.battle-preview{display:flex;flex-direction:column;align-items:center;gap:16px}.battle-preview__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:12px;background:var(--bg-secondary);border-radius:16px;box-shadow:0 8px 32px #0000004d}.battle-preview__cell{width:36px;height:36px;border-radius:6px;transition:transform .3s ease,box-shadow .3s ease}.battle-preview__cell--player{box-shadow:inset 0 0 0 2px #ffffffb3,0 0 12px var(--player-glow);transform:scale(1.05);animation:playerPulse 1.5s ease-in-out infinite}.battle-preview__cell--opponent{box-shadow:inset 0 0 0 2px #00000080,0 0 12px var(--ai-glow);transform:scale(1.05);animation:opponentPulse 1.5s ease-in-out infinite}@keyframes playerPulse{0%,to{box-shadow:inset 0 0 0 2px #ffffffb3,0 0 12px var(--player-glow)}50%{box-shadow:inset 0 0 0 2px #ffffffe6,0 0 20px var(--player-glow)}}@keyframes opponentPulse{0%,to{box-shadow:inset 0 0 0 2px #00000080,0 0 12px var(--ai-glow)}50%{box-shadow:inset 0 0 0 2px #000000b3,0 0 20px var(--ai-glow)}}.battle-preview__labels{display:flex;align-items:center;gap:12px}.battle-preview__label{font-size:.875rem;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}.battle-preview__label--player{background:#4ecdc433;color:var(--color-teal);border:1px solid var(--color-teal)}.battle-preview__label--opponent{background:#ff6b6b33;color:var(--color-coral);border:1px solid var(--color-coral)}.battle-preview__vs{color:var(--text-secondary);font-size:.75rem;font-weight:600}.home-screen{gap:28px}.home-screen__header{text-align:center}.home-screen__logo{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--color-teal),var(--color-sunshine));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.home-screen__tagline{color:var(--text-secondary);font-size:.95rem;font-weight:500;max-width:280px;margin:0 auto}.home-screen__stats{display:flex;gap:20px;padding:16px 24px;background:var(--bg-secondary);border-radius:16px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-item__icon{font-size:1.25rem}.stat-item__value{font-size:1.25rem;font-weight:800;color:var(--text-primary)}.stat-item__label{font-size:.65rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.stat-item--streak .stat-item__value{color:var(--color-tangerine)}.home-screen__buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}.btn-large{padding:18px 48px;font-size:1.25rem;font-weight:800;letter-spacing:.05em;box-shadow:0 4px 20px #4ecdc466}.btn-large:hover{box-shadow:0 6px 28px #4ecdc480;transform:translateY(-2px)}.btn-small{padding:12px 24px;font-size:.9rem;opacity:.9}.btn-small:hover{opacity:1}.matchmaking-screen{gap:48px}.matchmaking-screen__header{display:flex;align-items:center;gap:8px}.matchmaking-screen__content{display:flex;flex-direction:column;align-items:center;gap:32px;min-height:200px}.matchmaking-screen__spinner{position:relative;width:80px;height:80px}.spinner-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid transparent;border-radius:50%;animation:spinnerRotate 1.5s ease-in-out infinite}.spinner-ring:nth-child(1){border-top-color:var(--color-teal);animation-delay:0s}.spinner-ring:nth-child(2){border-right-color:var(--color-sunshine);animation-delay:.2s;top:8px;right:8px;bottom:8px;left:8px}.spinner-ring:nth-child(3){border-bottom-color:var(--color-coral);animation-delay:.4s;top:16px;right:16px;bottom:16px;left:16px}@keyframes spinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.matchmaking-screen__message{color:var(--text-secondary);font-size:1.125rem;font-weight:500;min-width:220px;text-align:center}.matchmaking-screen__found{display:flex;flex-direction:column;align-items:center;gap:32px;animation:fadeIn .5s ease-out}.matchmaking-screen__countdown{font-size:3rem;font-weight:800;color:var(--color-sunshine);text-shadow:0 4px 12px rgba(255,230,109,.4);animation:pulse 1s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.matchmaking-screen__subtitle{color:var(--color-teal);font-size:1.25rem;font-weight:600}.matchmaking-screen__versus{display:flex;align-items:center;gap:24px}.player-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px;background:var(--bg-card);border-radius:16px;min-width:100px}.player-card__avatar{font-size:2.5rem}.player-card__name{font-size:.875rem;font-weight:600;color:var(--text-primary);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card--opponent{animation:opponentPop .4s ease-out .2s both}@keyframes opponentPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.versus-text{font-size:1.5rem;font-weight:800;color:var(--color-coral)}.matchmaking-screen__starting{color:var(--text-muted);font-size:.875rem;animation:pulse 1s ease-in-out infinite}.cell{width:var(--cell-size);height:var(--cell-size);border-radius:var(--cell-radius);transition:transform var(--transition-fast),background-color var(--transition-normal),box-shadow var(--transition-fast)}.cell--player{box-shadow:inset 0 0 0 2px #ffffffb3,0 0 6px var(--player-glow)}.cell--opponent{box-shadow:inset 0 0 0 3px #00000080,0 0 4px var(--ai-glow)}.grid{display:grid;grid-template-columns:repeat(8,var(--cell-size));grid-template-rows:repeat(8,var(--cell-size));gap:var(--cell-gap);padding:12px;background:var(--bg-secondary);border-radius:12px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff0d}.color-picker{text-align:center}.color-picker__label{color:var(--text-secondary);font-size:.875rem;margin-bottom:12px}.color-picker__buttons{display:flex;gap:12px;justify-content:center}.color-btn{width:60px;height:60px;border:none;border-radius:12px;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast);box-shadow:0 4px 12px #0000004d}.color-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.05);box-shadow:0 8px 20px #0006}.color-btn:active:not(:disabled){transform:translateY(-2px) scale(1.02)}.color-btn--unavailable{opacity:.3;cursor:not-allowed}.color-btn:disabled{cursor:not-allowed}.timer{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:200px}.timer__display{display:flex;align-items:center;gap:8px}.timer__icon{font-size:1.25rem}.timer__time{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}.timer__bar{width:100%;height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden}.timer__bar-fill{height:100%;background:var(--timer-safe);border-radius:4px;transition:width 1s linear,background-color var(--transition-normal)}.timer__bar-fill--warning{background:var(--timer-warning)}.timer__bar-fill--danger{background:var(--timer-danger);animation:pulse .5s ease-in-out infinite alternate}.timer--danger .timer__time{color:var(--timer-danger);animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:1}to{opacity:.6}}.score-bar{width:100%;max-width:360px}.score-bar__labels{display:flex;justify-content:space-between;margin-bottom:8px}.score-bar__player,.score-bar__opponent{display:flex;align-items:center;gap:8px}.score-bar__label{font-size:.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-bar__count{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}.score-bar__player .score-bar__count{color:var(--color-teal)}.score-bar__opponent .score-bar__count{color:var(--color-coral)}.score-bar__bar{display:flex;height:24px;background:var(--bg-secondary);border-radius:12px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000004d}.score-bar__fill{height:100%;transition:width var(--transition-normal)}.score-bar__fill--player{background:linear-gradient(90deg,var(--color-teal),#3BA89F)}.score-bar__fill--neutral{background:var(--bg-secondary)}.score-bar__fill--opponent{background:linear-gradient(90deg,#E55A5A,var(--color-coral))}.score-bar__overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 8px;font-size:.8rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}.game-screen{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}.game-screen__header{width:100%;display:flex;flex-direction:column;gap:12px}.game-screen__grid{margin:10px 0}.game-screen__controls{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.game-screen__thinking{font-size:1rem;color:var(--text-secondary);font-weight:500;min-height:24px;transition:opacity .2s ease;text-align:center}.game-screen__thinking.invisible{opacity:0}.end-screen{gap:16px}.end-screen__title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.end-screen__game-number{color:var(--text-secondary);font-size:.875rem;margin-top:-8px}.end-screen__grid{transform:scale(.75);margin:-30px 0}.end-screen__result-section{display:flex;flex-direction:column;align-items:center;gap:4px}.end-screen__percent{font-size:3rem;font-weight:900;color:var(--color-coral);line-height:1}.end-screen__percent--win{color:var(--color-teal);animation:percentPop .5s ease-out}@keyframes percentPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.end-screen__result{font-size:1.25rem;font-weight:700;color:var(--color-coral)}.end-screen__result--win{color:var(--color-teal)}.territory-bar{width:100%;max-width:320px}.territory-bar__bar{display:flex;height:20px;background:var(--bg-secondary);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.territory-bar__fill{height:100%;transition:width .5s ease-out}.territory-bar__fill--player{background:linear-gradient(90deg,var(--color-teal),#3BA89F)}.territory-bar__fill--neutral{background:var(--bg-card)}.territory-bar__fill--opponent{background:linear-gradient(90deg,#E55A5A,var(--color-coral))}.territory-bar__labels{display:flex;justify-content:space-between;margin-top:8px}.territory-bar__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.territory-bar__label--player{color:var(--color-teal)}.territory-bar__label--opponent{color:var(--color-coral)}.end-screen__achievement{display:flex;align-items:center;gap:16px;padding:16px 24px;background:var(--bg-card);border-radius:16px;border:3px solid;animation:achievementSlide .5s ease-out .3s both;width:100%;max-width:320px}@keyframes achievementSlide{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.achievement-emoji{font-size:2.5rem}.achievement-info{display:flex;flex-direction:column;gap:2px}.achievement-name{font-weight:800;font-size:1.1rem}.achievement-desc{color:var(--text-secondary);font-size:.8rem}.end-screen__scores{display:flex;gap:20px}.score-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 24px;background:var(--bg-card);border-radius:14px;position:relative}.score-card--winner{box-shadow:0 0 20px var(--player-glow)}.score-card__label{font-size:.65rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-card__count{font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1.1}.score-card__percent{font-size:.8rem;font-weight:600;color:var(--text-secondary)}.score-card__trophy{position:absolute;top:-8px;right:-8px;font-size:1.25rem}.end-screen__buttons{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px}.end-screen__footer{color:var(--text-secondary);font-size:.8rem;text-align:center;margin-top:8px}.end-screen__url{color:var(--color-teal);font-weight:600}.share-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.share-modal{background:var(--bg-secondary);border-radius:20px;padding:24px;max-width:400px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.share-modal__close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer;padding:4px 8px;line-height:1;transition:color var(--transition-fast)}.share-modal__close:hover{color:var(--text-primary)}.share-modal__title{text-align:center;font-size:1.5rem;font-weight:700;margin-bottom:20px;color:var(--text-primary)}.share-modal__achievement{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border-radius:12px;border:2px solid;margin-bottom:16px}.share-modal__achievement-emoji{font-size:2rem}.share-modal__achievement-name{font-weight:700;color:var(--text-primary);font-size:1rem}.share-modal__achievement-desc{color:var(--text-secondary);font-size:.875rem}.share-modal__preview{background:var(--bg-card);border-radius:12px;padding:12px;margin-bottom:16px;display:flex;justify-content:center;align-items:center;min-height:200px}.share-modal__loading{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-secondary)}.share-modal__image{width:100%;max-width:300px;height:auto;border-radius:8px}.share-modal__buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.share-modal__buttons .btn{width:100%;padding:14px}.share-modal__text-preview{background:var(--bg-card);border-radius:8px;padding:12px}.share-modal__text-preview pre{font-family:var(--font-family);font-size:.75rem;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;margin:0;line-height:1.5}.how-to-play{width:100%;background-color:#000;color:#fff;padding:40px 20px;margin-top:auto;border-top:1px solid #333}.how-to-play__content{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.how-to-play h2{font-size:1.25rem;color:var(--color-teal);margin-bottom:16px;letter-spacing:1px}.how-to-play__list{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;font-size:.95rem;line-height:1.5;color:#ccc}.how-to-play__list li{display:flex;align-items:flex-start;gap:8px}.how-to-play__list li:before{content:"•";color:var(--color-coral);font-weight:700}.how-to-play__divider{height:1px;background:#333;width:100%}.mode-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px}.mode-item h3{font-size:1rem;color:var(--color-sunshine);margin-bottom:8px}.mode-item p{font-size:.85rem;color:#999;margin-bottom:4px;line-height:1.4}@media (max-width: 480px){.mode-comparison{grid-template-columns:1fr;gap:20px}}:root{--color-teal: #4ECDC4;--color-sunshine: #FFE66D;--color-coral: #FF6B6B;--color-lime: #95E879;--color-purple: #A855F7;--color-tangerine: #FF9F43;--bg-primary: #1A1A2E;--bg-secondary: #16213E;--bg-card: #0F3460;--player-glow: rgba(78, 205, 196, .3);--ai-glow: rgba(255, 107, 107, .3);--timer-safe: #FFE66D;--timer-warning: #FF9F43;--timer-danger: #FF6B6B;--text-primary: #FFFFFF;--text-secondary: #8892B0;--text-muted: #5A6A8A;--cell-size: 40px;--cell-gap: 2px;--cell-radius: 4px;--grid-size: calc(var(--cell-size) * 8 + var(--cell-gap) * 7);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}@media (min-width: 768px){:root{--cell-size: 60px;--cell-gap: 3px;--cell-radius: 6px}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden;overflow-y:auto}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;display:flex;flex-direction:column}.app-container{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.text-center{text-align:center}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;font-family:var(--font-family);font-size:1rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast);-webkit-user-select:none;user-select:none}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--color-teal),#3BA89F);color:var(--bg-primary);box-shadow:0 4px 15px #4ecdc44d}.btn-primary:hover{box-shadow:0 6px 20px #4ecdc466}.btn-secondary{background:var(--bg-card);color:var(--text-primary);box-shadow:0 4px 15px #0003}.btn-secondary:hover{background:#1a4a7a}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:24px}.card{background:var(--bg-card);border-radius:16px;padding:24px;box-shadow:0 8px 32px #0000004d}.logo{font-size:3rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-teal),var(--color-sunshine));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-icon{font-size:2rem;margin-right:8px}