:root{--bg: #0b0e14;--text: #f3f6fb;--muted: rgba(228, 234, 246, .62);--faint: rgba(228, 234, 246, .38);--line: rgba(255, 255, 255, .1);--red: #ff4f58;--blue: #3f8cff;--gold: #ffc53d;--green: #34d07a;--r-sm: 14px;--r-md: 20px;--r-lg: 26px;--r-xl: 32px;--pill: 999px;--glass-fill: linear-gradient( 160deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .035) 60%, rgba(255, 255, 255, .08) 100% );--glass-fill-strong: linear-gradient(160deg, rgba(46, 53, 70, .86) 0%, rgba(24, 28, 38, .9) 100%);--glass-blur: blur(26px) saturate(190%);--glass-shadow: 0 14px 40px rgba(0, 0, 0, .36), 0 2px 8px rgba(0, 0, 0, .22);--glass-inner: inset 0 1px .5px rgba(255, 255, 255, .42), inset 0 -1px 1px rgba(255, 255, 255, .07);--glass-rim: linear-gradient( 140deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .1) 26%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .08) 72%, rgba(255, 255, 255, .4) 100% );--spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.2, .9, .3, 1);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root,.app{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:var(--bg);color:var(--text);font-family:ui-rounded,SF Pro Rounded,-apple-system,BlinkMacSystemFont,SF Pro Text,system-ui,Segoe UI,Roboto,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:disabled{opacity:.32;cursor:default}svg{flex:none}.hidden-layer{visibility:hidden;position:absolute;inset:0}.glass,.player,.menu-btn,.status,.panel,.toolbar,.toast,.tut-progress,.tut-card,.btn.secondary,.seg,.choice,.terrain,.stats>div,.legend-item,.toggles,.rule,.page-header .icon-btn,.home .corner,.combat-chip{position:relative;isolation:isolate;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow),var(--glass-inner);border:0}.glass:before,.player:before,.menu-btn:before,.status:before,.panel:before,.toolbar:before,.toast:before,.tut-progress:before,.tut-card:before,.btn.secondary:before,.seg:before,.choice:before,.terrain:before,.stats>div:before,.legend-item:before,.toggles:before,.rule:before,.page-header .icon-btn:before,.home .corner:before,.combat-chip:before,.sheet:before,.over-card:before,.btn.primary:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:var(--glass-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.glass:after,.player:after,.menu-btn:after,.status:after,.panel:after,.toolbar:after,.tut-progress:after,.tut-card:after,.btn.secondary:after,.seg:after,.choice:after,.terrain:after,.stats>div:after,.legend-item:after,.toggles:after,.page-header .icon-btn:after,.home .corner:after,.sheet:after,.over-card:after,.btn.primary:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 70% at 18% -12%,#fff3,#fff0 55%);pointer-events:none}.seg button.on,.choice.on,.terrain.on,.tool.on{background:linear-gradient(180deg,#ffffff3d,#ffffff1f);box-shadow:inset 0 1px .5px #fff9,inset 0 0 0 1px #ffffff29,0 6px 16px #00000040;color:var(--text)}.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--pill);padding:12px 20px;font-weight:650;letter-spacing:.01em;min-height:48px;white-space:nowrap;transition:transform .18s var(--spring),filter .2s,background .2s}.btn:active{transform:scale(.96)}.btn.big{width:100%;padding:16px 22px;font-size:17px;min-height:58px}.btn.primary{color:#0b0e14;background:linear-gradient(180deg,#fff,#e6ebf4);box-shadow:0 12px 30px #00000061,0 2px 6px #0003,inset 0 1px #fff,inset 0 -3px 8px #1e28461a}.btn.primary:before{background:linear-gradient(180deg,#fff,#fff3 60%,#a0afd299)}.btn.primary:after{background:radial-gradient(80% 90% at 30% 0%,#ffffffe6,#fff0 60%);opacity:.6}.btn.secondary{color:var(--text)}.btn.ghost{color:var(--muted);min-height:44px;padding:10px 12px;font-size:14.5px}.btn.ghost:active{background:#ffffff14}.btn.danger{color:#fff;background:linear-gradient(180deg,#ff6a71,#e2343e);box-shadow:0 10px 26px #e2343e66,inset 0 1px #ffffff73}.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--text);transition:transform .18s var(--spring)}.icon-btn:active{transform:scale(.9)}.row{display:flex;gap:10px;justify-content:center}.row>.btn{flex:1}.page{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 18px);background:radial-gradient(60% 40% at 8% 12%,rgba(255,79,88,.2),transparent 70%),radial-gradient(60% 45% at 95% 78%,rgba(63,140,255,.22),transparent 70%),radial-gradient(120% 80% at 50% 0%,#1b2232 0%,var(--bg) 62%);z-index:5}.page-header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:52px}.page-header h2{font-size:18px;font-weight:700;margin:0;text-align:center}.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 28px;max-width:640px;width:100%;margin:0 auto}section{margin-top:24px}section h4{display:flex;align-items:center;gap:6px;margin:0 0 10px 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}.note{color:var(--muted);font-size:13px;margin:10px 6px 0}.home{justify-content:space-between;align-items:center}.home .corner{position:absolute;top:calc(var(--safe-top) + 10px);right:calc(var(--safe-right) + 14px);z-index:2}.home .hero{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.hero-stage{width:100%;max-width:560px;height:min(44vh,420px);display:grid;place-items:center;margin-top:-8px;animation:fade .8s ease}.hero-fallback{opacity:.9}.brand{display:flex;align-items:center;gap:10px;margin-top:-6px}.brand-mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}.wordmark{margin:0;font-size:clamp(24px,7vw,38px);font-weight:800;letter-spacing:.12em;background:linear-gradient(180deg,#fff,#c9d5ee);-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin:0;color:var(--muted);letter-spacing:.02em}.actions{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}.stats{display:flex;gap:8px;width:100%;max-width:420px;margin-top:16px}.stats>div{flex:1;border-radius:var(--r-md);padding:10px 4px;text-align:center;display:flex;flex-direction:column;gap:2px}.stats b{font-size:20px;font-weight:800}.stats span{font-size:11px;color:var(--muted)}.seg{display:flex;border-radius:var(--pill);padding:4px;gap:4px}.seg button{flex:1;min-height:44px;padding:8px;border-radius:var(--pill);font-weight:650;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .18s var(--spring),background .25s,color .2s}.seg button:active{transform:scale(.95)}.swatch{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:inset 0 1px 1px #ffffff80}.swatch.red{background:var(--red)}.swatch.blue{background:var(--blue)}.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.choice{border-radius:var(--r-md);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text);transition:transform .18s var(--spring),background .25s}.choice span{font-size:11px;color:var(--muted);text-align:center}.choice em{position:absolute;top:7px;right:10px;font-size:10px;font-style:normal;color:var(--green)}.choice:active,.terrain:active{transform:scale(.95)}.terrains{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}.terrain{border-radius:var(--r-md);padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;transition:transform .18s var(--spring),background .25s}.terrain .mini{filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));transition:transform .3s var(--spring)}.terrain.on .mini{transform:translateY(-3px) scale(1.06)}.mini.random{width:84px;height:65px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:26px;font-weight:800;background:conic-gradient(from 200deg,#2f6f73,#77a655,#c4b46a,#a98466,#d9d6d0,#2f6f73);color:#00000080;box-shadow:inset 0 1px 1px #ffffff80}.sticky-cta{max-width:640px;width:100%;margin:0 auto;padding-top:10px}.piece-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.legend-item{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:var(--r-md);padding:14px 6px;text-align:center}.legend-item span{font-size:11px;color:var(--muted)}.rule{border-radius:var(--r-lg);padding:16px 18px 8px}.rule h3{margin:0 0 8px;font-size:17px}.rule p{margin:0 0 10px;line-height:1.5;color:#e8eef8d1}.toggles{display:flex;flex-direction:column;border-radius:var(--r-lg);padding:4px 14px}.toggle{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}.toggle:last-child{border-bottom:0}.toggle-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:linear-gradient(180deg,#fff3,#ffffff14);box-shadow:inset 0 1px #ffffff59}.toggle-label{flex:1;line-height:1.3}.toggle input{display:none}.toggle i{flex:none;width:52px;height:32px;border-radius:var(--pill);background:#ffffff29;box-shadow:inset 0 1px 2px #0000004d;position:relative;transition:background .25s}.toggle i:after{content:"";position:absolute;top:2px;left:2px;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#fff,#e9edf5);box-shadow:0 3px 8px #0000004d,inset 0 -1px 1px #00000014;transition:transform .3s var(--spring)}.toggle input:checked+i{background:var(--green)}.toggle input:checked+i:after{transform:translate(20px)}.game{position:absolute;inset:0}.canvas-wrap{position:absolute;inset:0;background:radial-gradient(50% 35% at 10% 8%,rgba(255,79,88,.12),transparent 70%),radial-gradient(50% 35% at 92% 92%,rgba(63,140,255,.14),transparent 70%),radial-gradient(130% 90% at 50% 38%,#222c40,#141925 52%,#0a0c11)}.loading{height:100%;display:grid;place-items:center;letter-spacing:.3em;color:var(--muted)}.topbar{position:absolute;top:0;left:0;right:0;padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 12px) 0 calc(var(--safe-left) + 12px);pointer-events:none}.players{display:flex;gap:8px;align-items:stretch;pointer-events:auto}.player{flex:1;min-width:0;border-radius:var(--r-md);padding:9px 12px 8px;transition:box-shadow .35s var(--ease-out),transform .35s var(--spring)}.player.active{transform:translateY(1px) scale(1.015)}.player.active.p1{box-shadow:var(--glass-shadow),var(--glass-inner),0 0 0 1.5px #ff4f58e6,0 8px 26px #ff4f584d}.player.active.p2{box-shadow:var(--glass-shadow),var(--glass-inner),0 0 0 1.5px #3f8cfff2,0 8px 26px #3f8cff52}.player-head{display:flex;align-items:center;gap:7px}.player .dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:inset 0 1px 1px #ffffff80}.player.p1 .dot{background:var(--red)}.player.p2 .dot{background:var(--blue)}.player.active .dot{animation:beat 1.4s ease-in-out infinite}@keyframes beat{50%{transform:scale(1.35);filter:brightness(1.2)}}.player .name{font-weight:650;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.player .score{font-weight:800;font-size:19px}.player .score small{font-size:10px;color:var(--muted);margin-left:2px;font-weight:650}.score{display:inline-block;animation:pop-score .5s var(--spring)}@keyframes pop-score{0%{transform:scale(1.6);color:var(--gold)}}.roster{display:flex;gap:2px;margin-top:5px}.glyph-captured{opacity:.35}.glyph-finished{filter:drop-shadow(0 0 3px var(--gold))}.menu-btn{width:48px;height:auto;border-radius:var(--r-md);display:grid;place-items:center}.status{margin:9px auto 0;width:fit-content;max-width:100%;display:flex;gap:10px;align-items:center;padding:7px 16px;border-radius:var(--pill);font-size:13px;font-weight:650}.status.over{color:var(--gold)}.status .finished{display:inline-flex;gap:5px;align-items:center}.slot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);transition:background .3s,box-shadow .3s}.slot.p1{background:var(--red);border-color:var(--red);box-shadow:0 0 9px var(--red)}.slot.p2{background:var(--blue);border-color:var(--blue);box-shadow:0 0 9px var(--blue)}.bottom{position:absolute;left:0;right:0;bottom:0;padding:0 calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 12px);display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}.bottom>*{pointer-events:auto}.panel{width:100%;max-width:560px;border-radius:var(--r-lg);padding:12px 14px;min-height:64px;display:flex;align-items:center}.panel>*{animation:rise .28s var(--ease-out)}@keyframes rise{0%{transform:translateY(8px);opacity:0}}.hint{width:100%;text-align:center;color:var(--muted)}.hint .btn{width:100%}.thinking{display:inline-flex;gap:5px;align-items:center}.thinking i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s;margin-right:6px}@keyframes blink{0%,80%,to{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}.piece-card{display:flex;gap:14px;align-items:center;width:100%}.piece-card>.glyph{padding:8px;border-radius:16px;background:linear-gradient(180deg,#ffffff29,#ffffff0d);box-shadow:inset 0 1px #ffffff59;box-sizing:content-box}.piece-info{flex:1;min-width:0}.piece-title{display:flex;gap:8px;align-items:center;font-size:16px}.tag{font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:#ff9f432e;color:#ffb86b;padding:3px 8px;border-radius:var(--pill)}.piece-stats{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:3px}.piece-stats b{color:var(--text);font-size:15px}.piece-special{font-size:12.5px;color:#e8eef8c7;margin-top:4px;line-height:1.35}.toolbar{display:flex;gap:4px;border-radius:var(--pill);padding:5px;width:100%;max-width:420px}.tool{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:var(--pill);font-size:10.5px;font-weight:600;color:var(--muted);transition:transform .18s var(--spring),background .25s,color .2s}.tool:active{transform:scale(.9);color:var(--text)}.toast{border-radius:var(--pill);padding:9px 16px;font-size:13px;font-weight:650;animation:toast-in .4s var(--spring)}@keyframes toast-in{0%{transform:translateY(12px) scale(.9);opacity:0}}.pending{width:100%;display:flex;flex-direction:column;gap:12px}.pending-text{text-align:center;font-weight:650}.combat{display:flex;align-items:stretch;gap:8px}.combat-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.combat-side ul{list-style:none;padding:0;margin:0;font-size:12px;color:var(--muted);width:100%}.combat-side li{display:flex;justify-content:space-between;gap:6px}.combat-side li b{color:var(--text)}.combat-side .total{font-size:24px;font-weight:800}.vs{align-self:center;font-size:20px;color:var(--gold);font-weight:800}.combat-chip{display:flex;align-items:baseline;gap:3px;color:#fff;font-weight:800;font-size:13px;padding:3px 9px;border-radius:var(--pill);white-space:nowrap;box-shadow:0 4px 14px #0006,inset 0 0 0 1.5px #ff4f58d9,var(--glass-inner)}.combat-chip small{color:var(--gold);font-size:11px}.sheet-backdrop{position:absolute;inset:0;background:#04060a6b;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:0 10px calc(var(--safe-bottom) + 10px);z-index:20;animation:fade .2s ease}.sheet-backdrop.center{align-items:center;padding:16px}@keyframes fade{0%{opacity:0}}.sheet,.over-card{position:relative;isolation:isolate;background:var(--glass-fill-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 30px 80px #0000008c,var(--glass-inner)}.sheet{width:100%;max-width:560px;border-radius:var(--r-xl);padding:10px 14px 12px;animation:up .42s var(--spring)}.sheet h3{text-align:center;margin:12px 0 16px}@keyframes up{0%{transform:translateY(60px) scale(.96);opacity:0}}.sheet-handle{width:38px;height:5px;border-radius:var(--pill);background:#ffffff47;margin:0 auto 8px}.menu-list{display:flex;flex-direction:column;gap:2px}.menu-list button{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 12px;border-radius:var(--r-md);font-size:16px;font-weight:550;transition:background .2s,transform .18s var(--spring)}.menu-list button svg{color:var(--muted)}.menu-list button:active{background:#ffffff1a;transform:scale(.98)}.danger-text,.danger-text svg{color:var(--red)!important}.over-card{width:100%;max-width:380px;border-radius:var(--r-xl);padding:26px 20px 16px;text-align:center;display:flex;flex-direction:column;gap:10px;animation:pop .5s var(--spring)}@keyframes pop{0%{transform:scale(.82);opacity:0}}.over-emblem{width:76px;height:76px;margin:0 auto 2px;border-radius:50%;display:grid;place-items:center;color:#c3cad8;background:linear-gradient(180deg,#ffffff29,#ffffff0a);box-shadow:inset 0 1px .5px #ffffff80,inset 0 0 0 1px #ffffff1a,0 10px 30px #00000059;animation:emblem .9s var(--spring)}.over-card.won .over-emblem{color:#fff6d6;background:radial-gradient(circle at 30% 25%,#ffe08a,#f2a516 70%);box-shadow:inset 0 1px 1px #ffffffb3,0 0 0 6px #ffc53d24,0 12px 36px #ffaa1e73}.over-card.lost .over-emblem{color:#9aa3b4}@keyframes emblem{0%{transform:scale(.2) rotate(-30deg);opacity:0}}.over-title{font-size:32px;font-weight:800}.over-card.won .over-title{color:var(--gold)}.over-card.lost .over-title{color:#ff8a8d}.over-reason{color:var(--muted)}.over-score{font-size:44px;font-weight:800;display:flex;justify-content:center;gap:14px}.over-score .red{color:var(--red)}.over-score .blue{color:var(--blue)}.over-score .sep{color:var(--faint)}.over-meta{font-size:12px;color:var(--muted);margin-bottom:6px}.badge{background:#ffc53d1f;box-shadow:inset 0 0 0 1px #ffc53d66;border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:2px}.badge strong{color:var(--gold)}.badge span{font-size:12px;color:var(--muted)}.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:30}.tut-head{display:flex;gap:8px;align-items:stretch;pointer-events:auto}.tut-head .menu-btn{height:48px}.tut-progress{flex:1;border-radius:var(--r-md);padding:7px 14px;display:flex;flex-direction:column;gap:6px;justify-content:center}.tut-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:650}.tut-bar{display:flex;gap:3px}.tut-bar i{flex:1;height:5px;border-radius:var(--pill);background:#ffffff24;transition:background .3s}.tut-bar i.done{background:var(--green);cursor:pointer}.tut-bar i.cur{background:#fff;box-shadow:0 0 8px #fff9}.tut-card{pointer-events:auto;display:block;width:100%;max-width:560px;margin:9px auto 0;text-align:left;border-radius:var(--r-lg);padding:12px 16px}.tut-card strong{font-size:16px}.tut-card p{margin:5px 0 0;font-size:13.5px;line-height:1.42;color:#e8eef8d6}.tut-card.collapsed strong:after{content:" ▾";color:var(--muted);font-size:12px}.tut-feedback{width:100%;display:flex;flex-direction:column;gap:7px}.tut-feedback p{margin:0;font-size:13.5px;line-height:1.42;color:#e8eef8d6}.tut-feedback p.muted{color:var(--muted);font-size:12px}.tut-feedback-title{font-weight:800;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}.tut-feedback.ok .tut-feedback-title{color:var(--green)}.tut-feedback.ko .tut-feedback-title{color:#ff8a8d}.tut-feedback .row{margin-top:4px}.medal{font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--pill);background:#ffffff1a}.medal.gold{color:var(--gold)}.medal.silver{color:#cfd5df}.medal.bronze{color:#d39b6a}.trophy{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#fff6d6;background:radial-gradient(circle at 30% 25%,#ffe08a,#f2a516 70%);box-shadow:inset 0 1px 1px #ffffffb3,0 0 0 8px #ffc53d1f,0 14px 40px #ffaa1e73;animation:emblem .9s var(--spring);margin-bottom:10px}@media(min-width:900px){.topbar .players{max-width:640px;margin:0 auto}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){:root{--glass-fill: linear-gradient(160deg, rgba(48, 56, 74, .94), rgba(28, 32, 42, .94))}}