:root{font-family:Plus Jakarta Sans,Segoe UI,system-ui,sans-serif;line-height:1.5;color-scheme:dark;background-color:#12181b;color:#f0f4f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #12181B;--panel: #1E252B;--tile: #2A3137;--tile-border: #3A444D;--tile-hover: #333C44;--text: #F0F4F8;--text-muted: #9AA4AE;--primary: #386641;--primary-hov: #2a4d31;--red: #EF4444;--red-dim: #bc4749;--blue: #3b82f6;--mono: "JetBrains Mono", monospace}html{scrollbar-width:none}body{margin:0;min-height:100vh;scrollbar-width:none}body::-webkit-scrollbar{width:0;height:0;display:none}button{font-family:inherit;cursor:pointer}input{font-family:inherit;color:inherit}.chat-panel{width:100%;max-width:none;background:var(--panel, #1E252B);border:1px solid var(--tile-border, #3A444D);border-radius:.875rem;overflow:hidden;margin-top:.4rem}.chat-messages{height:clamp(40px,7svh,80px);overflow-y:auto;padding:.5rem .75rem;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:var(--tile-border, #3A444D) transparent}.chat-msg{font-size:.8rem;line-height:1.45;word-break:break-word;color:var(--text, #F0F4F8)}.chat-msg.color-red .chat-sender{color:#f87171;font-weight:700}.chat-msg.color-blue .chat-sender{color:#60a5fa;font-weight:700}.chat-input-row{display:flex;border-top:1px solid var(--tile-border, #3A444D)}.chat-input{flex:1;background:transparent;border:none;color:var(--text, #F0F4F8);font-size:.82rem;font-family:Plus Jakarta Sans,sans-serif;padding:.55rem .875rem;outline:none}.chat-input::placeholder{color:var(--text-muted, #9AA4AE)}.chat-send-btn{background:none;border:none;border-left:1px solid var(--tile-border, #3A444D);color:var(--primary, #386641);cursor:pointer;padding:.5rem .875rem;font-size:.82rem;font-weight:700;font-family:Plus Jakarta Sans,sans-serif;letter-spacing:.02em;transition:background .15s}.chat-send-btn:hover{background:#3866411f}@media(max-height:820px){.chat-messages{height:clamp(28px,5svh,48px)}}.player-piece{position:absolute;width:var(--piece-size, 56px);height:var(--piece-size, 56px);border-radius:50%;transition:transform .2s linear;will-change:transform;z-index:10;display:flex;align-items:center;justify-content:center}.piece-inner{width:var(--piece-inner-size, 44px);height:var(--piece-inner-size, 44px);border-radius:50%;border:2px solid rgba(255,255,255,.2)}.player-piece.piece-me .piece-inner{border:var(--me-border-width, 3px) solid #22c55e;box-shadow:0 0 0 var(--me-glow-width, 3px) #22c55e3d,0 0 var(--piece-glow, 18px) #22c55e73}.piece-red .piece-inner{background:radial-gradient(circle at 35% 30%,#ff8080,#dc2626);box-shadow:0 0 var(--piece-glow, 12px) #ef444480}.piece-blue .piece-inner{background:radial-gradient(circle at 35% 30%,#93c5fd,#1d4ed8);box-shadow:0 0 var(--piece-glow, 12px) #3b82f680}.attacker-glow{position:absolute;inset:var(--attacker-inset, -14px);border-radius:50%;animation:glow-pulse 1.1s ease-in-out infinite;pointer-events:none;z-index:-1}.glow-red{background:radial-gradient(circle,rgba(239,68,68,.65) 0%,transparent 68%)}.glow-blue{background:radial-gradient(circle,rgba(59,130,246,.65) 0%,transparent 68%)}@keyframes glow-pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.45);opacity:1}}@keyframes hit-flash{0%,to{opacity:1}25%,75%{opacity:.08}}.player-piece.hit{animation:hit-flash .6s ease 3}@keyframes explode{0%{transform:translate(-50%,-50%) scale(1);opacity:1}40%{transform:translate(-50%,-50%) scale(2.4);opacity:.9}to{transform:translate(-50%,-50%) scale(.1);opacity:0}}.player-piece.exploding{animation:explode .5s ease-out forwards!important;transition:none!important}.collision-effect{position:absolute;width:70px;height:70px;pointer-events:none;z-index:20;animation:collision-burst .5s ease-out forwards}.collision-effect:before,.collision-effect:after{content:"";position:absolute;inset:0;border-radius:50%}.collision-effect:before{background:radial-gradient(circle,#fbbf24 0%,#ef4444 50%,transparent 70%);animation:burst-inner .5s ease-out forwards}.collision-effect:after{background:radial-gradient(circle,transparent 40%,#fbbf24 60%,transparent 80%);animation:burst-outer .5s ease-out forwards}@keyframes burst-inner{0%{transform:scale(0);opacity:1}60%{transform:scale(1.2);opacity:.9}to{transform:scale(1.8);opacity:0}}@keyframes burst-outer{0%{transform:scale(.5);opacity:0}30%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}@keyframes collision-burst{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}.game-grid-shell{width:100%;height:100%;max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.game-grid{position:relative;box-sizing:border-box;max-width:100%;background:var(--panel, #1e252b);border:1px solid var(--tile-border, #3a444d);border-radius:1rem;overflow:visible;cursor:crosshair;touch-action:none;box-shadow:0 8px 32px #00000080,inset 0 1px #ffffff08}.grid-cell{position:absolute;border:1px solid var(--tile-border, #3a444d);background:var(--tile, #2a3137);border-radius:4px;transition:background .12s}.grid-cell:hover{background:var(--tile-hover, #333c44)}.grid-cell.obstacle{background:linear-gradient(135deg,#ef44442e,#f8717114),var(--tile, #2a3137);border-color:#f8717173}.grid-cell.obstacle:hover{background:linear-gradient(135deg,#ef44442e,#f8717114),var(--tile, #2a3137)}.obstacle-mark{position:absolute;inset:18%;border-radius:calc(var(--cell-size, 96px) * .125);background:linear-gradient(135deg,#f87171bf,#b91c1ce6);box-shadow:0 0 0 1px #ffffff14 inset,0 8px 18px #7f1d1d47}.obstacle-mark:before,.obstacle-mark:after{content:"";position:absolute;top:50%;left:50%;width:70%;height:calc(var(--cell-size, 96px) * .065);border-radius:999px;background:#fff5f5eb;transform-origin:center}.obstacle-mark:before{transform:translate(-50%,-50%) rotate(45deg)}.obstacle-mark:after{transform:translate(-50%,-50%) rotate(-45deg)}.gameover-overlay{width:100%;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.gameover-box{width:100%;background:var(--panel, #1E252B);border:1px solid var(--tile-border, #3A444D);border-radius:1rem;padding:.9rem 1rem;text-align:center;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem;box-shadow:0 10px 28px #00000047,0 0 0 1px #ffffff08}.gameover-result{font-size:1.15rem;font-weight:900;line-height:1.2;letter-spacing:.02em}.gameover-result.win{color:#fbbf24;text-shadow:0 0 18px rgba(251,191,36,.35)}.gameover-result.lose{color:var(--text-muted, #9AA4AE)}.gameover-message{font-size:.82rem;color:#cbd5e1;padding:.5rem .75rem;background:var(--tile, #2A3137);border:1px solid var(--tile-border, #3A444D);border-radius:.625rem}.rematch-notice{font-size:.82rem;color:var(--blue, #3b82f6);padding:.5rem 1rem;background:#3b82f614;border-radius:.5rem;border:1px solid rgba(59,130,246,.2)}.rematch-btn{background:var(--primary, #386641);border:none;border-radius:.7rem;color:#fff;cursor:pointer;font-family:Plus Jakarta Sans,sans-serif;font-size:.85rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.65rem 1rem;transition:all .15s;box-shadow:0 4px 16px #38664166}.rematch-btn:hover{background:var(--primary-hov, #2a4d31);transform:translateY(-2px);box-shadow:0 8px 24px #3866418c}.rematch-btn:active{transform:translateY(0)}.hp-display{display:flex;align-items:center;gap:calc(.45rem * var(--gs-scale, 1))}.hp-label{font-size:clamp(.6rem,calc(.7rem * var(--gs-scale, 1)),.85rem);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted, #9AA4AE);white-space:nowrap}.hp-label.bold{font-weight:800;color:var(--text, #F0F4F8)}.hearts{display:flex;gap:calc(2px * var(--gs-scale, 1))}.heart{font-size:clamp(.9rem,calc(1.25rem * var(--gs-scale, 1)),1.6rem);display:inline-block;line-height:1;transition:transform .15s}.heart.filled{color:#ef4444;filter:drop-shadow(0 0 5px rgba(239,68,68,.55))}.heart.empty{color:var(--tile-border, #3A444D);filter:none;opacity:.7}@keyframes heart-shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.heart.shaking{animation:heart-shake .4s ease}.player-info{position:relative}.nickname-btn{background:transparent;border:1px solid transparent;border-radius:calc(.45rem * var(--gs-scale, 1));padding:calc(.2rem * var(--gs-scale, 1)) calc(.45rem * var(--gs-scale, 1));font-size:clamp(.72rem,calc(.85rem * var(--gs-scale, 1)),1rem);font-weight:700;font-family:Plus Jakarta Sans,sans-serif;cursor:pointer;transition:background .15s,border-color .15s;letter-spacing:.01em;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nickname-btn.color-red{color:#f87171}.nickname-btn.color-blue{color:#60a5fa}.nickname-btn.color-red:hover{background:#ef444414;border-color:#ef44444d}.nickname-btn.color-blue:hover{background:#3b82f614;border-color:#3b82f64d}.profile-box{position:absolute;top:calc(100% + 6px);left:0;right:auto;z-index:200;background:var(--panel, #1E252B);border:1px solid var(--tile-border, #3A444D);border-radius:.75rem;padding:.625rem;min-width:180px;box-shadow:0 16px 40px #000000a6;user-select:text;-webkit-user-select:text;cursor:text}.profile-box.profile-box-self{left:0;right:auto}.profile-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.22rem 0;font-size:.8rem;border-bottom:1px solid var(--tile, #2A3137)}.profile-row:last-child{border-bottom:none}.profile-row span:first-child{color:var(--text-muted, #9AA4AE);font-size:.75rem;letter-spacing:.04em;user-select:text;-webkit-user-select:text}.profile-row span:last-child{color:var(--text, #F0F4F8);font-weight:600;font-family:Plus Jakarta Sans,sans-serif;user-select:text;-webkit-user-select:text}.timer-container{position:relative;width:100%;height:22px;background:var(--tile, #2A3137);border-radius:999px;border:1px solid var(--tile-border, #3A444D);overflow:hidden}.timer-bar{height:100%;border-radius:999px;transition:width .05s linear,background-color .4s}.timer-bar.green{background:linear-gradient(90deg,#15803d,#22c55e)}.timer-bar.yellow{background:linear-gradient(90deg,#a16207,#eab308)}.timer-bar.red{background:linear-gradient(90deg,#b91c1c,#ef4444);animation:timer-pulse .35s ease-in-out infinite alternate}@keyframes timer-pulse{0%{opacity:1}to{opacity:.5}}.timer-text{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--mono, monospace);font-size:.7rem;font-weight:600;color:#ffffffd9;letter-spacing:.05em}.game-screen{display:flex;flex-direction:column;align-items:stretch;gap:calc(.5rem * var(--gs-scale, 1));padding:calc(.75rem * var(--gs-scale, 1));height:100svh;overflow:visible;width:100%;max-width:600px;margin:0 auto;box-sizing:border-box}.gs-loading{display:flex;align-items:center;justify-content:center;min-height:100svh;color:var(--text-muted);font-size:.875rem;letter-spacing:.12em;font-family:var(--mono)}.gs-utility-bar{display:flex;align-items:center;gap:calc(.625rem * var(--gs-scale, 1));width:100%;flex-shrink:0}.gs-timer-slot{flex:1;min-width:0}.gs-utility-buttons{display:flex;align-items:center;gap:calc(.375rem * var(--gs-scale, 1));flex-shrink:0}.gs-lobby-btn,.gs-mute-btn{background:var(--tile);border:1px solid var(--tile-border);border-radius:calc(.5rem * var(--gs-scale, 1));color:var(--text-muted);cursor:pointer;font-family:Plus Jakarta Sans,sans-serif;line-height:1;transition:background .15s,border-color .15s,color .15s}.gs-lobby-btn{padding:calc(.4rem * var(--gs-scale, 1)) calc(.8rem * var(--gs-scale, 1));font-size:clamp(.6rem,calc(.72rem * var(--gs-scale, 1)),.85rem);font-weight:700;letter-spacing:.09em;text-transform:uppercase}.gs-mute-btn{font-size:clamp(.75rem,calc(1rem * var(--gs-scale, 1)),1.2rem);padding:calc(.35rem * var(--gs-scale, 1)) calc(.5rem * var(--gs-scale, 1))}.gs-lobby-btn:hover,.gs-mute-btn:hover{border-color:var(--primary);color:var(--text);background:var(--tile-hover)}.gs-phase-moving{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:clamp(.6rem,calc(.75rem * var(--gs-scale, 1)),.9rem);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}.gs-moving-pip{width:calc(6px * var(--gs-scale, 1));height:calc(6px * var(--gs-scale, 1));border-radius:50%;background:var(--blue);flex-shrink:0;animation:gs-pip-pulse .7s ease-in-out infinite alternate}@keyframes gs-pip-pulse{0%{opacity:.35;transform:scale(.75)}to{opacity:1;transform:scale(1.25)}}.gs-player-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(.75rem * var(--gs-scale, 1));padding:calc(.55rem * var(--gs-scale, 1)) calc(.875rem * var(--gs-scale, 1));background:var(--panel);border:1px solid var(--tile-border);border-radius:calc(.875rem * var(--gs-scale, 1));position:relative;overflow:visible;flex-shrink:0;transition:border-color .2s;--corner-color: var(--tile-border)}.gs-player-card:after{content:"";position:absolute;top:0;right:0;width:calc(16px * var(--gs-scale, 1));height:calc(16px * var(--gs-scale, 1));border-top:2px solid var(--corner-color);border-right:2px solid var(--corner-color);border-radius:0 calc(.875rem * var(--gs-scale, 1)) 0 0;opacity:.45;pointer-events:none}.gs-color-red{border-left:3px solid rgba(239,68,68,.65)}.gs-color-blue{border-left:3px solid rgba(59,130,246,.65)}.gs-self{box-shadow:0 0 0 1px #38664124 inset,0 4px 20px #00000047}.gs-self.gs-color-red{--corner-color: rgba(239, 68, 68, .35)}.gs-self.gs-color-blue{--corner-color: rgba(59, 130, 246, .35)}.gs-role-badge{display:flex;flex-direction:column;align-items:center;gap:calc(.15rem * var(--gs-scale, 1));padding:calc(.45rem * var(--gs-scale, 1)) calc(.55rem * var(--gs-scale, 1));background:var(--tile);border:1px solid var(--tile-border);border-radius:calc(.625rem * var(--gs-scale, 1));min-width:calc(50px * var(--gs-scale, 1));flex-shrink:0}.gs-role-badge-self{border-color:#38664161;background:#38664114}.gs-role-icon{font-size:clamp(.9rem,calc(1.4rem * var(--gs-scale, 1)),1.8rem);line-height:1}.gs-role-label{font-size:clamp(.55rem,calc(.62rem * var(--gs-scale, 1)),.75rem);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);line-height:1}.gs-player-mid{display:flex;flex-direction:column;gap:calc(.2rem * var(--gs-scale, 1));min-width:0}.gs-color-tag{font-family:var(--mono);font-size:clamp(.5rem,calc(.58rem * var(--gs-scale, 1)),.7rem);font-weight:700;letter-spacing:.12em;color:var(--text-muted);opacity:.5}.gs-hp-slot{display:flex;justify-content:flex-end;flex-shrink:0}.gs-grid-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:visible}.gs-path-bar{width:100%;padding:calc(.55rem * var(--gs-scale, 1)) calc(.875rem * var(--gs-scale, 1));background:var(--panel);border:1px solid var(--tile-border);border-radius:calc(.875rem * var(--gs-scale, 1));display:flex;flex-direction:column;gap:calc(.45rem * var(--gs-scale, 1));transition:border-color .25s,box-shadow .25s;position:relative;flex-shrink:0}.gs-path-bar:after{content:"";position:absolute;top:0;right:0;width:calc(14px * var(--gs-scale, 1));height:calc(14px * var(--gs-scale, 1));border-top:2px solid var(--tile-border);border-right:2px solid var(--tile-border);border-radius:0 calc(.875rem * var(--gs-scale, 1)) 0 0;opacity:.35;pointer-events:none}.gs-path-full{border-color:#22c55e73;box-shadow:0 0 14px #22c55e1a,0 0 0 1px #22c55e14 inset}.gs-path-full:after{border-color:#22c55e66;opacity:.6}.gs-path-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.gs-path-label{font-size:clamp(.6rem,calc(.7rem * var(--gs-scale, 1)),.85rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.gs-path-count{font-family:var(--mono);font-size:clamp(.65rem,calc(.8rem * var(--gs-scale, 1)),.95rem);color:var(--text-muted);line-height:1}.gs-path-current{font-size:clamp(.8rem,calc(1rem * var(--gs-scale, 1)),1.2rem);font-weight:700;color:#22c55e;transition:color .2s}.gs-path-full .gs-path-current{color:#4ade80}.gs-path-sep{opacity:.4}.gs-path-max{color:var(--text-muted)}.gs-path-gauge{display:flex;gap:calc(4px * var(--gs-scale, 1))}.gs-path-seg{flex:1;height:clamp(7px,calc(10px * var(--gs-scale, 1)),14px);background:var(--tile);border:1px solid var(--tile-border);border-radius:calc(3px * var(--gs-scale, 1));transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.gs-path-seg.filled{background:linear-gradient(180deg,#22c55e,#16a34a);border-color:#22c55e99;box-shadow:0 0 6px #22c55e59}.gs-path-full .gs-path-seg.filled{box-shadow:0 0 8px #22c55e80}.gs-path-seg.latest{animation:gs-seg-pop .28s cubic-bezier(.34,1.56,.64,1)}@keyframes gs-seg-pop{0%{transform:scaleY(.5);opacity:.5}60%{transform:scaleY(1.25)}to{transform:scaleY(1);opacity:1}}.gs-result-slot{width:100%;flex-shrink:0}.game-screen{overflow-y:visible;overflow-x:hidden;max-width:800px}.gs-grid-area{position:relative;z-index:1}.gs-result-slot{position:relative;z-index:5;margin-bottom:calc(.5rem * var(--gs-scale, 1))}.gs-board-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}.gs-board-stage .gs-grid-area{flex:1;min-height:0}.gs-board-stage .gs-result-slot{position:absolute;top:calc(.5rem * var(--gs-scale, 1));left:50%;transform:translate(-50%);width:min(100%,calc(26rem * var(--gs-scale, 1)));margin-bottom:0;pointer-events:none}.gs-board-stage .gameover-overlay{pointer-events:none}.gs-board-stage .gameover-box,.gs-board-stage .rematch-btn{pointer-events:auto}@media(max-height:820px){.gs-player-card{padding:calc(.3rem * var(--gs-scale, 1)) calc(.7rem * var(--gs-scale, 1));gap:calc(.5rem * var(--gs-scale, 1))}.gs-path-bar{padding:calc(.3rem * var(--gs-scale, 1)) calc(.7rem * var(--gs-scale, 1));gap:calc(.25rem * var(--gs-scale, 1))}}@media(max-height:420px){.chat-panel{display:none}}@media(max-width:360px){.game-screen{padding:calc(.375rem * var(--gs-scale, 1));gap:calc(.25rem * var(--gs-scale, 1))}}.lobby-screen{display:flex;flex-direction:column;align-items:center;gap:1.75rem;padding:2.5rem 1.5rem;min-height:100vh;width:100%;max-width:520px;margin:0 auto}.logo{font-size:2.75rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#ef4444 30%,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem}.lobby-card{background:var(--panel, #1E252B);border:1px solid var(--tile-border, #3A444D);border-radius:1.5rem;padding:1.75rem;display:flex;flex-direction:column;gap:.875rem;width:100%;box-shadow:0 4px 32px #0006;transition:box-shadow .2s}.lobby-card:hover{box-shadow:0 8px 40px #00000080}.lobby-card h2{display:flex;align-items:center;gap:.75rem;font-size:1.1rem;font-weight:700;color:var(--text, #F0F4F8);margin-bottom:.25rem}.lobby-card h2:before{content:attr(data-step);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#38664133;border:1px solid rgba(56,102,65,.4);color:var(--primary, #386641);font-size:.78rem;font-weight:800;flex-shrink:0}.lobby-card p{font-size:.875rem;color:var(--text-muted, #9AA4AE)}.account-card{gap:.625rem}.account-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.account-header h2{margin-bottom:0}.account-logout{border:none;background:transparent;color:var(--text-muted, #9AA4AE);font-size:.85rem;font-weight:700;text-transform:lowercase;cursor:pointer}.account-logout:hover{color:#f8fafc}.account-record{color:var(--blue, #3b82f6);font-weight:700}.account-input-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--text-muted, #9AA4AE);text-transform:uppercase}.account-upgrade{display:flex;flex-direction:column;gap:.85rem;margin-top:.4rem;padding-top:1rem;border-top:1px solid rgba(154,164,174,.14)}.account-upgrade-title{position:relative;text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.18em;color:var(--text-muted, #9AA4AE);text-transform:uppercase}.account-upgrade-title:before,.account-upgrade-title:after{content:"";position:absolute;top:50%;width:calc(50% - 5.75rem);height:1px;background:#9aa4ae24}.account-upgrade-title:before{left:0}.account-upgrade-title:after{right:0}.google-link-btn{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:.75rem;background:#f8fafc;color:#1f2937;font-size:.95rem;font-weight:700;font-family:Plus Jakarta Sans,sans-serif}.google-link-btn:hover{background:#fff}.google-link-mark{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;border-radius:999px;color:#ea4335;font-weight:800}.account-info-msg{color:#93c5fd;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:.75rem;padding:.75rem .9rem}.lobby-input{background:var(--tile, #2A3137);border:1px solid var(--tile-border, #3A444D);border-radius:.75rem;padding:.75rem 1rem;color:var(--text, #F0F4F8);font-size:.95rem;font-family:Plus Jakarta Sans,sans-serif;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}.lobby-input::placeholder{color:var(--text-muted, #9AA4AE)}.lobby-input:focus{border-color:var(--primary, #386641);box-shadow:0 0 0 3px #38664126}.code-input{font-family:var(--mono);letter-spacing:.35em;text-align:center;font-size:1.15rem;text-transform:uppercase}.lobby-btn{padding:.75rem 1rem;border-radius:.75rem;border:none;font-size:.95rem;font-weight:700;font-family:Plus Jakarta Sans,sans-serif;transition:all .15s;letter-spacing:.01em;width:100%}.lobby-btn:active{transform:scale(.98)}.lobby-btn.primary{background:var(--primary, #386641);color:#fff;box-shadow:0 4px 16px #38664159}.lobby-btn.primary:hover{background:var(--primary-hov, #2a4d31);box-shadow:0 6px 20px #38664180}.lobby-btn.secondary{background:#3b82f61f;color:var(--blue, #3b82f6);border:1px solid rgba(59,130,246,.3)}.lobby-btn.secondary:hover{background:#3b82f633;border-color:#3b82f680}.lobby-btn.ai{background:#ef44441f;color:var(--red, #EF4444);border:1px solid rgba(239,68,68,.3)}.lobby-btn.ai:hover{background:#ef444433;border-color:#ef444480}.lobby-btn.accent{position:relative;background:var(--primary, #386641);color:#fff;font-size:1rem;padding:.9rem 1rem;box-shadow:0 4px 20px #38664166;overflow:hidden}.lobby-btn.accent:before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#386641,#22c55e,#386641);border-radius:inherit;opacity:0;transition:opacity .3s;z-index:-1}.lobby-btn.accent:hover{background:var(--primary-hov, #2a4d31);box-shadow:0 6px 28px #38664199}.lobby-btn.accent:hover:before{opacity:.4}.lobby-btn.cancel{background:#ef44441f;color:var(--red, #EF4444);border:1px solid rgba(239,68,68,.32)}.lobby-btn.cancel:hover{background:#ef444433;border-color:#ef444480}.room-code{font-family:var(--mono);font-size:2.25rem;font-weight:500;letter-spacing:.45em;text-align:center;color:#fbbf24;background:var(--tile, #2A3137);border:1px solid var(--tile-border, #3A444D);border-radius:.75rem;padding:1.1rem;text-shadow:0 0 20px rgba(251,191,36,.4)}.waiting-text{text-align:center;color:var(--text-muted, #9AA4AE);font-size:.875rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.waiting-text:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse-dot 1.5s ease-in-out infinite;flex-shrink:0}.spinner{width:40px;height:40px;border:3px solid var(--tile-border, #3A444D);border-top-color:var(--primary, #386641);border-radius:50%;animation:spin .75s linear infinite;margin:.75rem auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.is-matchmaking{gap:1rem}.matchmaking-status{display:flex;flex-direction:column;gap:.75rem}.matchmaking-status-head{display:flex;align-items:center;gap:.625rem;color:var(--text, #F0F4F8);font-size:1rem}.matchmaking-dot{width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 6px #22c55e1f;animation:pulse-dot 1.5s ease-in-out infinite;flex-shrink:0}.error-msg{color:#f87171;font-size:.825rem;text-align:center;padding:.5rem .75rem;background:#ef444414;border-radius:.5rem;border:1px solid rgba(239,68,68,.2)}.btn-divider{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.upgrade-modal-backdrop{position:fixed;inset:0;background:#030712a3;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:30}.upgrade-modal{width:min(100%,28rem);background:var(--panel, #1E252B);border:1px solid var(--tile-border, #3A444D);border-radius:1.25rem;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 18px 48px #00000073}.upgrade-modal h3{font-size:1.1rem;color:var(--text, #F0F4F8)}.upgrade-modal p{color:var(--text-muted, #9AA4AE)}.upgrade-modal-actions{display:flex;flex-direction:column;gap:.75rem}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg, #12181B);color:var(--text, #F0F4F8);font-family:Plus Jakarta Sans,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.app{width:100vw;min-height:100vh;display:flex}.app-lobby{align-items:center;justify-content:center}.app-game{align-items:flex-start;justify-content:center}.app-loading{align-items:center;justify-content:center;color:var(--text-muted, #9AA4AE);font-size:1.1rem;font-weight:500;letter-spacing:.05em}.loading{color:var(--text-muted, #9AA4AE);font-size:1.1rem;font-weight:500;letter-spacing:.05em}