/* =============================================================== GAME SKIN */
:root{--grad:linear-gradient(135deg,#2563eb,#7c3aed);--gold:#f59e0b;--pink:#ec4899;--soft:#f5f7ff}
html,body{height:100%}
body{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:#fff}
.top{height:58px;flex:none;background:linear-gradient(180deg,#fff,#f7f8fd);box-shadow:0 1px 0 var(--line),0 6px 18px rgba(37,99,235,.05);gap:12px}
.brand{display:flex;align-items:center;gap:9px}.brand b{font-size:15px;letter-spacing:.2px}.brand small{display:block;color:var(--muted);font-size:10.5px;margin-top:-2px}
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-size:20px;box-shadow:0 4px 12px rgba(79,70,229,.35)}
.grid{flex:1;min-height:0;height:auto;padding:10px;gap:10px;background:#fbfcff}
.pane{border-radius:14px;box-shadow:0 2px 10px rgba(30,41,59,.05)}
.ph{background:linear-gradient(180deg,#fff,#f8f9fd)}
.chip{box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .12s,box-shadow .12s}
.chip:hover:not(.locked){transform:translateY(-1px);box-shadow:0 4px 10px rgba(37,99,235,.15)}
.chip .stars{font-size:10px;color:var(--gold);letter-spacing:-1px;margin-left:2px;text-align:left;margin-bottom:0;text-shadow:none}

/* HUD */
.hud{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(37,99,235,.08);white-space:nowrap}
.rank{display:flex;flex-direction:column;gap:3px;min-width:112px}.rank span{font-size:12px;font-weight:650}
.xpbar{height:6px;border-radius:99px;background:#e8ebf5;overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:var(--grad);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.xpn{font-size:12px;color:#4338ca}
.stat{font-size:13px;padding:2px 8px;border-radius:99px;background:#f3f4f8}
.stat.hot{background:#fff1e0;color:#c2410c;animation:hot 1s ease-in-out infinite}
@keyframes hot{50%{transform:scale(1.08)}}
.ghost.sq{padding:3px 8px;border-radius:99px;font-size:13px}
.xp-pop{position:fixed;right:210px;top:56px;z-index:80;font-weight:800;color:#4338ca;background:#eef0ff;border:1px solid #c7d2fe;border-radius:99px;padding:4px 12px;box-shadow:0 6px 18px rgba(79,70,229,.25);animation:xp 1.7s ease-out forwards;pointer-events:none}
@keyframes xp{0%{opacity:0;transform:translateY(10px) scale(.8)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}

/* Mission bar */
#mission{flex:none;display:flex;align-items:center;gap:16px;margin:10px 10px 0;padding:10px 16px 10px 20px;border-radius:16px;background:linear-gradient(120deg,#eef2ff 0%,#f5f3ff 55%,#fdf2f8 100%);border:1px solid #dbe0ff;box-shadow:0 6px 20px rgba(79,70,229,.10);position:relative;overflow:hidden}
#mission::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--grad)}
.m-ring{--p:0;flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#4f46e5 calc(var(--p)*1%),#dfe3f7 0);position:relative}
.m-ring::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}
.m-ring b,.m-ring small{position:relative;z-index:1;grid-area:1/1}
.m-ring b{font-size:17px;margin-top:-6px}.m-ring small{font-size:9.5px;margin-top:20px;color:var(--muted)}
.m-main{flex:1 1 300px;min-width:200px}
.m-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;color:#6366f1}
.m-t{font-size:16px;font-weight:750;line-height:1.2}
.m-b{font-size:12.5px;color:#475569;margin-top:2px;max-height:2.9em;overflow:hidden}
.m-track{display:flex;gap:6px;flex:none}
.m-stage{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:99px;background:#fff;border:1px solid #e1e5f5;color:#94a3b8;white-space:nowrap}
.m-stage i{font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e8ebf5;font-size:10px}
.m-stage.active{color:#312e81;border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.m-stage.active i{background:#6366f1;color:#fff}
.m-stage.done{color:#15803d;border-color:#bbf7d0;background:#f0fdf4}
.m-stage.done i{background:#22c55e;color:#fff}
.m-act{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:210px}
.m-go{border:0;border-radius:12px;padding:10px 18px;font-weight:750;font-size:14px;color:#fff;background:var(--grad);box-shadow:0 8px 20px rgba(79,70,229,.35);animation:bob 1.4s ease-in-out infinite;cursor:pointer}
.m-go:hover{filter:brightness(1.08)}
@keyframes bob{50%{transform:translateY(-3px)}}
.m-hint{font-size:11px;color:#64748b}
.m-status{font-size:13px;font-weight:650;color:#4338ca}

/* node target tag */
.node.target rect:first-child{stroke:#6366f1;stroke-width:4;animation:tgt 1s ease-in-out infinite}
@keyframes tgt{50%{stroke-width:7;filter:drop-shadow(0 0 10px rgba(99,102,241,.8))}}
.tgt-tag rect{fill:#4f46e5}
.tgt-tag text{font:700 10.5px var(--sans);fill:#fff}
.tgt-tag{animation:bob 1.2s ease-in-out infinite}

/* Result drawer */
#drawer{position:fixed;left:0;right:0;bottom:0;z-index:35;height:min(46vh,400px);background:#fff;border-top:1px solid #c7d2fe;border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(30,41,59,.28);transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.25,1);display:flex;flex-direction:column}
#drawer.on{transform:none}
.dr-head{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#eef2ff,#faf5ff);border-radius:20px 20px 0 0}
.dr-head>div{flex:1}.dr-head b{font-size:15px}.dr-head small{display:block;color:var(--muted);font-size:11.5px}.dr-ico{font-size:22px}
.dr-body{display:flex;gap:16px;flex:1;min-height:0;padding:12px 20px 16px}
.dr-term{flex:1.5;border-radius:12px;min-height:0}
.dr-note{flex:1;overflow:auto;font-size:14px;line-height:1.5;background:#f8faff;border:1px solid #e0e7ff;border-radius:12px;padding:12px 16px}
.dr-note code{font:12px var(--mono);background:#eef1f5;padding:0 4px;border-radius:4px}
.dr-term .hl{background:rgba(250,204,21,.22);border-radius:3px;box-shadow:inset 3px 0 0 #facc15;color:#fef3c7}

/* Prediction modal */
#quiz-wrap{position:fixed;inset:0;background:rgba(238,242,255,.78);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:45}
#quiz-wrap.on{display:flex}
.quiz{width:min(640px,94vw);background:#fff;border-radius:20px;padding:22px 26px;box-shadow:0 24px 70px rgba(49,46,129,.3);border:1px solid #c7d2fe;animation:pop .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.q-kicker{font-weight:800;letter-spacing:.12em;font-size:11px;color:#7c3aed}
.q-kicker span{float:right;color:#c2410c}
.quiz h3{margin:6px 0 14px;font-size:18px;line-height:1.3}
.quiz h3 code{font:13px var(--mono);background:#eef1f5;padding:0 5px;border-radius:4px}
#q-opts{display:grid;gap:8px}
.q-opt{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid #e1e5f5;background:#fff;border-radius:12px;padding:10px 14px;font-size:14px;transition:transform .12s,border-color .12s,background .12s;width:100%;min-height:0;justify-content:flex-start}
.q-opt b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:#eef0ff;color:#4338ca}
.q-opt:hover:not(:disabled){border-color:#818cf8;transform:translateX(3px);background:#fafaff}
.q-opt.right{border-color:#22c55e;background:#f0fdf4;animation:pulsegreen .6s}
.q-opt.right b{background:#22c55e;color:#fff}
.q-opt.wrong{border-color:#ef4444;background:#fef2f2;animation:shake .4s}
.q-opt.wrong b{background:#ef4444;color:#fff}
.q-opt:disabled{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pulsegreen{50%{transform:scale(1.02)}}
#q-fb{margin:12px 0 4px;font-size:13.5px;line-height:1.5}
#q-fb .ok{color:#15803d;font-weight:700}
#q-fb .no{color:#b91c1c;font-weight:700}
#q-btn{margin-top:8px}

/* Achievements, banner, confetti */
#ach-stack{position:fixed;right:16px;top:70px;z-index:90;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ach{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #fcd34d;border-radius:14px;padding:10px 16px;box-shadow:0 12px 30px rgba(245,158,11,.3);animation:slidein .5s cubic-bezier(.2,1.2,.4,1);max-width:340px}
.ach.out{opacity:0;transform:translateX(30px);transition:.5s}
.ach b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#b45309}
.ach span{font-size:13px;font-weight:600}
.a-ico{font-size:30px}
@keyframes slidein{from{transform:translateX(120%)}}
#banner{position:fixed;left:50%;top:84px;transform:translate(-50%,-30px);opacity:0;z-index:95;display:flex;gap:14px;align-items:center;background:var(--grad);color:#fff;border-radius:18px;padding:14px 26px;box-shadow:0 20px 50px rgba(79,70,229,.45);pointer-events:none;transition:.5s cubic-bezier(.2,1.2,.4,1)}
#banner.on{opacity:1;transform:translate(-50%,0)}
#banner b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
#banner span{font-size:18px;font-weight:750}
#banner em{display:block;font-style:normal;font-size:12px;opacity:.9;margin-top:2px}
.b-ico{font-size:34px}
.cf{position:fixed;top:-14px;width:9px;height:14px;border-radius:2px;z-index:99;pointer-events:none;animation:fall 2.2s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(720deg);opacity:.9}}
.stars{font-size:34px;letter-spacing:4px;color:var(--gold);text-align:center;margin-bottom:2px;text-shadow:0 4px 14px rgba(245,158,11,.4)}
.stars:empty{display:none}
.stars .off{color:#e5e7eb;text-shadow:none}
.coach{border-radius:20px;border:1px solid #c7d2fe;box-shadow:0 24px 70px rgba(49,46,129,.25)}
.coach h2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.primary{background:var(--grad);border-color:transparent;box-shadow:0 6px 16px rgba(79,70,229,.3)}
.btn.primary:disabled{background:#c9d6f5;box-shadow:none}
@media (max-width:1100px){#mission{flex-wrap:wrap}.m-track{order:5;width:100%;flex-wrap:wrap}}
@media (max-width:1000px){body{height:auto;overflow:auto}.grid{height:auto}}

/* Move-by-move action strip inside the console */
.actions{flex:none;padding:8px 12px 10px;border-bottom:1px solid #dbe0ff;background:linear-gradient(120deg,#eef2ff,#faf5ff)}
.a-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12.5px}
.a-head b{color:#312e81}.a-head .btn{margin-left:auto;padding:2px 10px;font-size:11.5px}
.a-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:112px;overflow:auto}
.a-chip{border:1.5px solid #e1e5f5;background:#fff;border-radius:99px;padding:5px 12px;font-size:12.5px;color:#94a3b8;min-height:0;box-shadow:none}
.a-chip.done{color:#15803d;border-color:#bbf7d0;background:#f0fdf4}
.a-chip.cur{color:#fff;border-color:transparent;background:var(--grad);font-weight:700;box-shadow:0 6px 16px rgba(79,70,229,.35);animation:bob 1.3s ease-in-out infinite}
.a-chip.todo:hover{background:#f8fafc}

.a-chip.auto{border-style:dashed;color:#94a3b8;background:transparent;font-size:11.5px}
.a-chip.auto.live{color:#4338ca;border-color:#818cf8;background:#eef2ff}
.a-chip.done{opacity:.9}