:root{--vh: 1vh}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;background-color:var(--bg, #0b1220)}html,body{touch-action:manipulation;overflow-x:hidden;max-width:100%}body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}input,textarea,[contenteditable],.selectable{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}button,[role=button],a,label,summary{touch-action:manipulation}button,input,select,textarea{font-family:inherit;font-size:inherit}input,textarea,select{font-size:max(16px,1em)}button,[role=button]{min-height:44px;min-width:44px;cursor:pointer}.board,.field,canvas,.drag-surface{touch-action:none}.control-layer{position:fixed;inset:0;z-index:30;pointer-events:none;touch-action:none}.control-layer>*{pointer-events:auto}.safe-inset{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--sky: #0b1124;--panel: #17203a;--panel-hi: #222d4c;--gutter: #101830;--edge: #2b365a;--slab0: #cdd5e1;--slab1: #dce2eb;--slab2: #e8ecf3;--slab3: #f4f6fa;--slab-win: #f7cf74;--slab-trap: #f9cbbc;--dome: #1b2740;--dome-gleam: #94a2bc;--p1: #b23b00;--p2: #0e3e9b;--mark: #16203a;--ink: #10182c;--glyph: #f4f6fa;--text: #f2f5fb;--muted: #afbbd6;--gold: #f0b93c;--alarm: #ff8a6b;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--gap: 5px;--pad: 6px;--n: 5;--shake: 3px}[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--sky);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.main-content{flex:1 0 auto;display:flex;flex-direction:column}.site-footer{flex-shrink:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:13px}.site-footer a{color:var(--muted)}body.playing .site-footer{display:none!important}a{color:var(--gold)}.screen{width:100%;max-width:560px;margin:0 auto;padding:16px 12px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;flex:1 0 auto}.btn,.lobby-btn,.re-go,.re-create{min-height:48px;padding:12px 18px;border-radius:14px;border:1px solid var(--edge);background:var(--panel);color:var(--text);font:600 16px/1.2 var(--font);cursor:pointer;transition:transform .12s ease,background .12s ease}.btn:active,.lobby-btn:active{transform:translateY(1px)}.btn.primary,.lobby-btn.primary,.re-create{background:var(--gold);border-color:var(--gold);color:#201704}.btn.ghost,.lobby-btn.ghost{background:transparent}.btn:disabled{opacity:.55;cursor:default}.linkbtn{background:none;border:0;color:var(--muted);font:600 15px/1 var(--font);padding:12px 10px;min-height:44px;cursor:pointer;text-decoration:underline}.iconbtn{min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--edge);background:var(--panel);color:var(--text);font-size:15px;cursor:pointer}:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--gold)}.menu{justify-content:center;text-align:center;gap:18px}.brand h1{margin:8px 0 4px;font-size:40px;letter-spacing:-.02em}.tagline{margin:0;color:var(--muted);font-size:15px}.logo{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:56px}.logo i{display:block;width:22px;background:var(--slab1);border-radius:4px;border-top:2px solid #fff}.logo i:nth-child(1){height:18px}.logo i:nth-child(2){height:34px}.logo i:nth-child(3){height:50px;background:var(--gold)}.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip{min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--edge);background:var(--panel);color:var(--text);font:600 15px/1 var(--font);cursor:pointer}.chip.on{background:var(--panel-hi);border-color:var(--gold);color:var(--gold)}.mode-blurb{margin:10px 4px 0;color:var(--muted);font-size:14px;min-height:34px}.mode-best{margin:4px 0 0;color:var(--muted);font-size:13px}.menu-actions{display:flex;flex-direction:column;gap:10px}.menu-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.game{gap:8px;max-width:100%}.hud{display:flex;align-items:center;gap:8px;min-height:48px;width:100%;max-width:560px;margin:0 auto}.hud-turn{flex:1;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;min-width:0}.hud-turn .rtok{flex:none}.hud-mode{color:var(--muted);font-size:13px;font-weight:600}.steps{display:flex;align-items:center;gap:6px;justify-content:center;color:var(--muted);font-size:13px;font-weight:700}.steps b{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:1px solid var(--edge);background:var(--panel);font-weight:700}.steps b.on{background:var(--gold);border-color:var(--gold);color:#201704}.steps b.done{background:var(--panel-hi);border-color:var(--gold);color:var(--gold)}.clockbar{height:4px;width:min(100%,560px);margin:0 auto;background:var(--panel);border-radius:999px;overflow:hidden}.clockbar i{display:block;height:100%;background:var(--gold);transition:width .3s linear}.clockbar.low i{background:var(--alarm)}.board-host{position:relative;align-self:center;width:var(--board);height:var(--board);aspect-ratio:1}.board-host{--board: min( calc(100vw - 16px) , calc(100vh - 250px) , 520px);--board: min( calc(100vw - 16px) , calc(100dvh - 250px) , 520px)}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-auto-rows:1fr;gap:var(--gap);padding:var(--pad);background:var(--gutter);border-radius:16px;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent}.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}.cell{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:14%;background:var(--slab0);cursor:pointer;touch-action:none;transition:transform .14s ease,filter .14s ease;box-shadow:0 calc(2px + 2px * var(--lv, 0)) calc(4px + 3px * var(--lv, 0)) #060a1673}.cell .tier{position:absolute;border-radius:14%;border-top:1.5px solid rgba(255,255,255,.55);border-left:1.5px solid rgba(255,255,255,.55);border-bottom:1.5px solid rgba(127,140,163,.75);border-right:1.5px solid rgba(127,140,163,.75);display:none}.cell .t1{inset:9%;background:var(--slab1)}.cell .t2{inset:18%;background:var(--slab2)}.cell .t3{inset:27%;background:var(--slab3)}.cell[style*="--lv:1"] .t1,.cell[style*="--lv: 1"] .t1,.cell[style*="--lv:2"] .t1,.cell[style*="--lv:2"] .t2,.cell[style*="--lv: 2"] .t1,.cell[style*="--lv: 2"] .t2,.cell[style*="--lv:3"] .t1,.cell[style*="--lv:3"] .t2,.cell[style*="--lv:3"] .t3,.cell[style*="--lv: 3"] .t1,.cell[style*="--lv: 3"] .t2,.cell[style*="--lv: 3"] .t3,.cell.domed .t1,.cell.domed .t2,.cell.domed .t3{display:block}.cell .dome{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--dome-gleam) 0 18%,var(--dome) 55%);display:none}.cell.domed .dome{display:block}.cell .lvl{position:absolute;left:8%;bottom:4%;font:700 min(3.2vw,15px) / 1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink);text-shadow:0 0 2px rgba(255,255,255,.9);z-index:2}.cell .mark{position:absolute;inset:26%;border-radius:50%;border:3px solid var(--mark);display:none;z-index:2}.cell.t-move .mark{display:block}.cell.t-build .mark{display:block;border-radius:22%;inset:24%}.cell.t-build .mark:after,.cell.t-move .mark:after{content:"";position:absolute;inset:32%;border-radius:2px;background:var(--mark)}.cell.t-move .mark:after{inset:38%;border-radius:50%}.cell.t-move,.cell.t-build{transform:translateY(-3px)}.cell.dim{filter:brightness(.62) saturate(.7)}.cell.t-win,.cell.t-win .t1,.cell.t-win .t2,.cell.t-win .t3{background:var(--slab-win)}.cell.t-trap{background:var(--slab-trap);outline:3px solid var(--alarm);outline-offset:-3px}.cell.last-from{outline:2px dashed rgba(22,32,58,.8);outline-offset:-4px}.cell.last-to{outline:2px solid rgba(22,32,58,.85);outline-offset:-4px}.cell.last-build:before{content:"";position:absolute;right:4%;top:4%;border-left:9px solid transparent;border-top:9px solid var(--mark);z-index:2}.cell.ghost .tok{opacity:.35}.cell.nope{animation:nope .12s linear 2}@keyframes nope{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.tok{position:absolute;left:24%;top:24%;width:52%;height:52%;display:flex;align-items:center;justify-content:center;font:700 min(3vw,13px) / 1 var(--font);color:var(--glyph);filter:drop-shadow(0 3px 3px rgba(6,10,22,.5));z-index:2}.tok.p1{background:var(--p1);border-radius:50%}.tok.p2{background:var(--p2);clip-path:polygon(50% 4%,96% 92%,4% 92%);padding-top:22%;align-items:flex-start}.tok.picked{box-shadow:0 0 0 3px var(--mark);transform:scale(1.06)}.tok.p2.picked{box-shadow:none;outline:3px solid var(--mark)}.tok.hop{animation:hop .22s cubic-bezier(.34,1.2,.5,1)}@keyframes hop{0%{transform:translate(calc(var(--gx, 0) * (100% + var(--gap) / .52)),calc(var(--gy, 0) * (100% + var(--gap) / .52)))}to{transform:translate(0)}}.board.shaking{animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(var(--shake))}75%{transform:translate(calc(-1 * var(--shake)))}}.board.flash{outline:4px solid var(--gold)}.prompt{text-align:center;color:var(--muted);font-size:14px;margin:0;min-height:20px}.turn-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tilebar{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}.tile-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;min-height:44px;border-radius:999px;border:1px solid var(--edge);background:var(--panel);color:var(--text);font:600 14px/1 var(--font);cursor:pointer}.game.drafting .board-host{--board: min( calc(100vw - 140px) , 210px)}.game.drafting .fx{display:none}.draftlist{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px;margin:0 auto}.draft-card{display:flex;flex-direction:column;gap:3px;text-align:left;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid var(--edge);background:var(--panel);color:var(--text);cursor:pointer}.draft-card b{font-size:15px}.draft-card span{color:var(--muted);font-size:13px;line-height:1.35}.tile-chip.armed{background:var(--gold);border-color:var(--gold);color:#201704}.tile-chip:disabled{opacity:.5}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 22vmin/1 var(--font);color:var(--gold);text-shadow:0 6px 24px rgba(0,0,0,.6);pointer-events:none;z-index:5}.countdown.pop{animation:pop .5s ease}@keyframes pop{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:.9}}.pause-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#060a16d1;border-radius:16px;z-index:6}.pause-card{display:flex;flex-direction:column;gap:10px;padding:18px;text-align:center}.overlay{position:fixed;inset:0;background:#040710b8;display:flex;align-items:flex-end;justify-content:center;z-index:50}.sheet{position:relative;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;background:var(--panel);border:1px solid var(--edge);border-radius:20px 20px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom))}.sheet h2{margin:0 0 12px;padding-right:44px}.sheet h3{margin:18px 0 8px;font-size:16px}.sheet-close.x{position:absolute;right:12px;top:12px;min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--edge);background:var(--panel-hi);color:var(--text);font-size:16px;cursor:pointer}.help-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;line-height:1.5}.help-list.small{font-size:14px;gap:8px}.help-note{color:var(--muted);font-size:14px}.about-attrib{color:var(--muted);font-size:13px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--panel);border:1px solid var(--edge);color:var(--text);padding:10px 18px;border-radius:999px;font-weight:600;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:60}.toast.show{opacity:1;transform:translate(-50%)}.results-head{text-align:center}.results-head h2{margin:0 0 6px;font-size:26px}.results-sub{margin:0;color:var(--muted)}.results-tally{margin:8px 0 0;color:var(--muted);font-size:13px}.iso{width:100%;max-width:460px;height:auto;margin:0 auto;display:block}.rrows{display:flex;flex-direction:column;gap:10px}.rrow{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:12px 14px}.rrow.won{border-color:var(--gold)}.rname{display:flex;align-items:center;gap:8px;font-weight:700}.rtok{width:16px;height:16px;border-radius:50%;flex:none}.rtok.p1{background:var(--p1)}.rtok.p2{background:var(--p2);border-radius:0;clip-path:polygon(50% 4%,96% 92%,4% 92%)}.rverdict{color:var(--muted);font-size:13px;margin:2px 0 8px}.rrow.won .rverdict{color:var(--gold);font-weight:700}.rstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin:0}.rstats div{background:var(--panel-hi);border-radius:10px;padding:8px;text-align:center}.rstats dt{color:var(--muted);font-size:11px}.rstats dd{margin:2px 0 0;font-weight:700;font-size:17px}.verdict{min-height:24px;text-align:center}.verdict-line,.verdict-progress{color:var(--muted);font-size:14px;margin:0}.waiting-note{color:var(--muted);font-size:13px;text-align:center;margin:0}.fault-note{color:var(--alarm);text-align:center;font-weight:600}.lobby-searching{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:40px 0;font-weight:600}.spinner{width:20px;height:20px;border:3px solid var(--edge);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;flex:none}.spinner.sm{width:14px;height:14px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.room-entry,.lobby{display:flex;flex-direction:column;gap:12px}.re-field,.lobby-link,.re-input{width:100%;min-width:0;padding:13px 14px;border-radius:12px;border:1px solid var(--edge);background:var(--gutter);color:var(--text);font:600 16px/1 var(--font)}.re-row,.re-join,.lobby-invite,.lobby-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.lobby-invite>*{min-width:0}.re-title,.lobby h2,.lobby h3,.lobby-title{text-align:center}.re-sub,.lobby-sub,.re-note,.lobby-wait{color:var(--muted);text-align:center;font-size:14px}.lobby-code{text-align:center;font:800 30px/1 var(--font);letter-spacing:.16em;color:var(--gold)}.lobby-players,.lobby-roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.lobby-players li{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:10px 12px;display:flex;gap:8px;align-items:center}.lobby-badge{font-size:12px;color:var(--muted)}.lobby-badge.ok{color:var(--gold)}.lobby-qr{display:flex;justify-content:center;padding:8px 0}.lobby-qr svg{width:190px;height:190px;max-width:70%}.lobby-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.mode-btn{min-height:44px}.host-pick{text-align:center;color:var(--muted)}.host-pick strong{color:var(--gold)}.lobby-flash{text-align:center;color:var(--gold);font-weight:700}@media(max-width:359px){:root{--gap: 4px;--pad: 4px}}@media(min-width:720px)and (max-width:999px)and (min-height:560px){.screen{max-width:680px}.board-host{--board: min( calc(100vw - 48px) , calc(100vh - 230px) , 520px);--board: min( calc(100vw - 48px) , calc(100dvh - 230px) , 520px)}}@media(min-width:1000px){.screen{max-width:1180px}.screen.game{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;padding:24px}.game .hud,.game .clockbar,.game .board-host,.game .steps,.game .prompt,.game .turn-actions,.game .tilebar{grid-column:1}.game .side{grid-column:2;grid-row:1 / span 8;background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:14px;align-self:stretch}.board-host{--board: min( calc(100vw - 372px) , 520px, calc(100vh - 290px) );--board: min( calc(100vw - 372px) , 520px, calc(100dvh - 290px) );justify-self:center}.menu{max-width:620px}.results-screen{max-width:900px}}.side{display:none}@media(min-width:1000px){.side{display:block}.side h3{margin:0 0 10px;font-size:15px}.movelist{list-style:none;margin:0;padding:0;max-height:46vh;overflow-y:auto;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.movelist li{padding:4px 6px;border-radius:8px;background:var(--gutter)}}@media(orientation:landscape)and (max-height:559px){.screen.game{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;gap:6px 14px;padding:8px 10px;max-width:100%}.game .board-host{grid-column:1;grid-row:1 / span 7;--board: min( calc(100vh - 26px) , calc(100vw - 260px) , 520px);--board: min( calc(100dvh - 26px) , calc(100vw - 260px) , 520px)}.game .hud,.game .clockbar,.game .steps,.game .prompt,.game .tilebar,.game .turn-actions{grid-column:2;margin:0}.game .turn-actions{justify-content:flex-start}.hud{min-height:36px}.side{display:none}.steps,.prompt{font-size:12px}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:1ms}.countdown.pop,.tok.hop,.board.shaking,.cell.nope{animation:none}.btn,.cell,.clockbar i{transition:none}}
