:root{--bg:#0b1020;--bg2:#121a33;--card:#151f3d;--line:#24305a;--t:#eef2ff;--m:#9aa6c8;--acc:#7c8cff;--acc2:#22e06b;--light:#e6ebf4;--dark:#7f91b3;--r:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#1d2a5a 0%,transparent 60%),var(--bg);color:var(--t);font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100%}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--m)}.small{font-size:13px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(11,16,32,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:8px;color:var(--t);text-decoration:none;font-weight:800;letter-spacing:-.01em;font-size:17px}
.ghostbtn{background:none;border:0;font-size:28px;line-height:1;padding:0 6px 4px;color:var(--m)}
body[data-screen=home] .back{visibility:hidden;width:0;padding:0}
.pill{margin-left:auto;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:#1b2547;color:#c7d0f0;white-space:nowrap}
.pill[data-st=loading]{animation:pulse 1.4s ease-in-out infinite}
.pill[data-st=ready]{background:rgba(34,224,107,.14);color:#7ff0aa}
.pill[data-st=failed]{background:rgba(255,93,93,.15);color:#ff9a9a}
@keyframes pulse{50%{opacity:.55}}
main{max-width:1100px;margin:0 auto;padding:14px 14px 40px}
.screen{animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.hero h1{font-size:40px;letter-spacing:-.03em;margin:14px 0 2px;background:linear-gradient(90deg,#fff,#b9c4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag-line{margin:0 0 16px;color:#c3ccef;font-size:17px}
.rank-card{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-radius:var(--r);background:linear-gradient(135deg,#1c2a5c,#141d3c);border:1px solid var(--line)}
.rank-card small{display:block;color:var(--m);font-size:12px}
.rank{display:flex;align-items:baseline;gap:10px}.rank b{font-size:38px;letter-spacing:-.02em}.rank span{color:#aab6ff;font-weight:600}
.crest{font-size:48px;opacity:.85;filter:drop-shadow(0 6px 14px rgba(124,140,255,.4))}
.resume{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.resume small{display:block;color:var(--m)}
.modes{display:grid;gap:12px;margin:14px 0}
.mode{display:flex;align-items:center;gap:14px;text-align:left;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);transition:transform .15s,border-color .15s}
.mode:active{transform:scale(.985)}.mode:hover{border-color:#3a4a8a}
.mode .mi{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px}
.mode.m-play .mi{background:linear-gradient(135deg,#6d7cff,#4a55d6)}
.mode.m-coach .mi{background:linear-gradient(135deg,#123a2a,#1a2a4a);border:1px solid #2a5a44}
.mode .mt{flex:1}.mode b{display:block;font-size:20px}.mode small{color:var(--m);font-size:14px}
.chev{font-size:26px;color:var(--m)}
.how{padding:16px 18px;border-radius:var(--r);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.how h2{margin:0 0 6px;font-size:17px}.how p{margin:6px 0}
.legend{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px}
.legend li{display:flex;align-items:center;gap:10px;color:var(--m)}.legend b{color:var(--t);min-width:86px}
.legend i,.legend-row i{display:inline-block;width:34px;height:6px;border-radius:3px;background:var(--c)}
i.dash{background:repeating-linear-gradient(90deg,var(--c) 0 9px,transparent 9px 13px)!important}
i.dot{background:repeating-linear-gradient(90deg,var(--c) 0 5px,transparent 5px 9px)!important}
.foot-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:16px}
.linkbtn{background:none;border:0;color:var(--m);text-decoration:underline;font-size:13px;padding:4px 0}
.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:700;background:var(--acc);color:#0b1020}
.btn.small{padding:8px 14px}.btn.big{width:100%;padding:16px;font-size:17px;margin-top:18px;background:linear-gradient(90deg,#7c8cff,#22e06b);color:#07101f}
.btn.ghost{background:#1a2446;color:var(--t);border:1px solid var(--line)}.btn.danger{color:#ffb4b4}
.h1s{margin:8px 0 2px;font-size:28px;letter-spacing:-.02em}.h2s{font-size:15px;color:#c3ccef;margin:18px 0 8px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;margin-top:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.switch-row small{display:block;color:var(--m)}.switch-row input{width:22px;height:22px;accent-color:#22e06b}
#oppSection.disabled{opacity:.35;pointer-events:none}
.match{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:14px;border-radius:14px;background:var(--card);border:1.5px solid var(--line)}
.match small{display:block;color:var(--m)}.match .chk{opacity:0;color:var(--acc2);font-weight:900}
.match.on{border-color:var(--acc)}.match.on .chk{opacity:1}
.any{margin:12px 0;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.any-h,.any-s{display:flex;justify-content:space-between}.any-s{font-size:12px;color:var(--m)}
.any input{width:100%;margin:12px 0 4px;accent-color:var(--acc)}
.bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bot{display:grid;grid-template-columns:34px 1fr auto;grid-template-areas:"av n e" "av d d";column-gap:8px;text-align:left;padding:10px;border-radius:14px;background:var(--card);border:1.5px solid var(--line)}
.bot .av{grid-area:av;align-self:center}.bot b{grid-area:n}.bot .e{grid-area:e;font-weight:700;color:#aab6ff}.bot small{grid-area:d;color:var(--m);font-size:12px;line-height:1.25}
.bot.on{border-color:var(--acc);background:#1b2550}
.av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#3a4790,#26305f);color:#dfe4ff}
.av.you{background:linear-gradient(135deg,#22e06b,#1a8f54);color:#06140c}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px}
.seg button{flex:1;border:0;background:none;padding:10px;border-radius:10px;font-weight:600;color:var(--m)}.seg button.on{background:#26305f;color:var(--t)}
/* game */
.game-grid{display:grid;gap:12px;justify-content:center}
.board-col{width:var(--bs);--bs:clamp(280px,min(calc(100vw - 20px),calc(100dvh - 300px)),640px)}
.pbar{display:flex;align-items:center;gap:10px;padding:6px 2px}
.pbar .who b{display:block;font-size:14px;line-height:1.1}.pbar .who span{font-size:12px;color:var(--m)}
.pbar .capt{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:55%}.pbar .capt img{width:18px;height:18px;margin-left:-5px}
.board-wrap{position:relative;width:var(--bs);height:var(--bs);border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);touch-action:none;user-select:none;-webkit-user-select:none}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%}
.sq{position:relative;display:grid;place-items:center}
.sq.light{background:var(--light)}.sq.dark{background:var(--dark)}
.sq.last::before{content:"";position:absolute;inset:0;background:rgba(124,140,255,.38)}
.sq.sel::before{content:"";position:absolute;inset:0;background:rgba(80,98,255,.55)}
.sq.check::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,60,80,.95) 0%,rgba(255,60,80,.5) 45%,transparent 75%)}
.sq.tgt::after{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(20,28,60,.32)}
.sq.tgt-cap::after{content:"";position:absolute;inset:4%;border-radius:50%;border:5px solid rgba(20,28,60,.32)}
.pc{position:relative;width:92%;height:92%;z-index:1;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.pc.ghosted{opacity:.3}
.cr,.cf{position:absolute;font-size:10px;font-weight:700;z-index:2;opacity:.8}
.cr{left:3px;top:2px}.cf{right:3px;bottom:1px}
.sq.light .cr,.sq.light .cf{color:var(--dark)}.sq.dark .cr,.sq.dark .cf{color:var(--light)}
.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.arrows .arrow{animation:draw .35s ease both}
@keyframes draw{from{opacity:0}}
.dragghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.side-col{width:var(--bs);--bs:clamp(280px,min(calc(100vw - 20px),calc(100dvh - 300px)),640px);display:flex;flex-direction:column;gap:10px}
.status-row{display:flex;align-items:center;gap:10px;font-weight:600}
.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;border-radius:8px;background:#26305f;color:#c9d1ff}
.tag.t-coach{background:rgba(34,224,107,.15);color:#7ff0aa}
.opening{font-size:13px;color:#c9d1ff;padding:6px 10px;border-radius:10px;background:rgba(124,140,255,.12);align-self:flex-start}
.opening::before{content:"Opening · ";color:var(--m)}
.coach{padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.hint{margin:0;color:#c3ccef}.warn{margin:0;color:#ffb4b4}
.thinking{display:flex;align-items:center;gap:8px}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #3a4a8a;border-top-color:#22e06b;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.picks-h{font-size:12px;color:var(--m);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.picks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.picks li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#10183a;border-left:5px solid var(--c)}
.picks .num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#0b1020;font-weight:800;font-size:13px;flex:none}
.picks .lbl{font-weight:700;color:var(--c);min-width:74px}.picks .san{font-size:16px}.picks .ev,.tip .ev{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--m);font-size:13px}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--m)}
.legend-row span{display:flex;align-items:center;gap:6px}.legend-row i{width:20px;height:5px}
.tip{padding:10px 12px;border-radius:12px;background:#0f1734;border:1px solid var(--line)}
.tip-h{display:flex;align-items:center;gap:8px}.tip p{margin:6px 0 0;color:#c3ccef;font-size:14px}
.badge{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--c);color:#0b1020}
.moves{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);font-size:14px;scrollbar-width:none}
.moves .mn{color:var(--m);margin-left:6px}
.controls{display:flex;gap:8px}.controls .btn{flex:1;padding:11px}
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(4,7,16,.6);backdrop-filter:blur(4px);padding:20px}
.sheet{width:min(380px,100%);padding:22px;border-radius:22px;background:#151f3d;border:1px solid var(--line);text-align:center;animation:in .2s ease}
.sheet h3{margin:0 0 6px;font-size:24px}.why{margin:0 0 10px;color:var(--m)}
.rchange{display:flex;justify-content:center;align-items:baseline;gap:10px;font-size:20px;margin:6px 0}
.rchange b{font-size:34px}.rchange .arrow{color:var(--m)}
.delta{font-weight:800;font-size:16px;padding:2px 8px;border-radius:999px}.delta.up{background:rgba(34,224,107,.18);color:#7ff0aa}.delta.down{background:rgba(255,93,93,.18);color:#ffaaaa}
.sheet-actions{display:grid;gap:8px;margin-top:14px}
.promo{display:flex;justify-content:center;gap:8px}.promo button{width:64px;height:64px;border-radius:14px;background:var(--light);border:0;padding:6px}.promo img{width:100%;height:100%}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;padding:10px 16px;border-radius:999px;background:#26305f;color:var(--t);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media (min-width:980px){
  .game-grid{grid-template-columns:auto 360px;align-items:start}
  .board-col{--bs:clamp(320px,calc(100dvh - 140px),680px)}
  .side-col{--bs:360px;padding-top:44px}
  .modes{grid-template-columns:1fr 1fr}
  #home{max-width:760px;margin:0 auto}#setup{max-width:760px;margin:0 auto}
}