/* ═══════════════════════════════════════════════════════════════
   Turbo Academy v2 — GAME layer (on top of turbo-base.css)
   Full-viewport level stages, HUD, animated diagrams. No docs,
   no scroll walls — one screen per beat, like the activation flow.
   ═══════════════════════════════════════════════════════════════ */

body{overflow:hidden}
.page{padding:0;height:100vh;display:flex;flex-direction:column}

/* ── HUD (persistent top strip, under the real nav) ── */
.hud{position:relative;z-index:2;display:flex;align-items:center;gap:18px;padding:calc(var(--navh) + 18px) clamp(28px,3.9vw,75px) 0}
.hud-tag{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.hud-tag b{color:var(--ice);font-weight:800}
.hud-xp{flex:1;max-width:420px;height:6px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.hud-xp i{display:block;height:100%;width:0;border-radius:100px;background:var(--lime);box-shadow:var(--lime-glow);transition:width .45s cubic-bezier(.4,0,.2,1)}
.hud-pts{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--lime);text-shadow:var(--lime-glow)}
.hud-pts small{color:var(--text3);font-weight:700}

/* ── stage ── */
.stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px clamp(24px,4vw,80px) 90px;text-align:center}
.stage-visual{width:min(760px,94vw);height:min(380px,44vh);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.stage-copy h2{font-size:clamp(22px,2.4vw,32px);font-weight:700;color:#fff;letter-spacing:-0.01em}
.stage-copy p{margin-top:8px;font-size:clamp(14px,1.15vw,16.5px);font-weight:500;color:#8f8f92;max-width:640px}
.stage-sys{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);margin-bottom:14px}
.stage-sys b{color:var(--lime)}

/* advance button — the nav Connect chrome (lm) */
.stage-next{position:absolute;z-index:6;bottom:34px;right:clamp(28px,3.9vw,75px);min-width:150px;height:44px;padding:0 26px;border-radius:6px;background:#f3f3f3;color:#111;border:1px solid #c7c7c7;box-shadow:inset 0 4px 4px rgba(0,0,0,0.15),0 9px 22px rgba(0,0,0,0.35);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono);cursor:pointer;transition:transform .12s}
.stage-next:hover{transform:translateY(-2px)}
.stage-dots{position:absolute;z-index:6;bottom:48px;left:clamp(28px,3.9vw,75px);display:flex;gap:7px}
.hud{z-index:6}
.stage-dots i{width:22px;height:3px;border-radius:100px;background:rgba(255,255,255,.12)}
.stage-dots i.on{background:var(--lime);box-shadow:var(--lime-glow)}
.stage-exit{margin-right:20px;padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(13,13,15,.7);color:var(--text2);font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .15s;backdrop-filter:blur(8px)}
.stage-exit:hover{color:#fff;border-color:rgba(255,255,255,.34)}

/* ── checkpoint asked by ??? ── */
.cp-duo{display:flex;align-items:flex-start;gap:20px;width:min(760px,94vw);text-align:left}
.cp-face{width:150px;height:190px;flex-shrink:0;border-radius:14px;border:1px solid #212123;background-image:url('assets/guide-wide-final.png');background-size:auto 260%;background-position:74% 30%;filter:grayscale(1) contrast(1.06) brightness(1.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.6)}
.cp-bubble{flex:1;padding:24px 24px 22px}
.cp-bubble .gd-text{min-height:52px;margin-bottom:16px}
@media (max-width:700px){.cp-duo{flex-direction:column;align-items:center;text-align:center}.cp-face{width:120px;height:140px}}

/* ── new diagrams ── */
.dg-widget-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dg-widget-row em{font-size:10px;font-style:normal;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-family:var(--mono)}
.dg-widget-row strong{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--ice)}

.dg-share{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;justify-content:center}
.dg-share-side{display:flex;flex-direction:column;gap:14px;width:min(300px,80vw)}
.dg-share-side input[type=range]{width:100%;accent-color:var(--lime);cursor:pointer}

.dg-depth{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(620px,92%)}
.dg-depth-row{display:flex;gap:16px;width:100%}
.dg-depth-pool{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px}
.dg-depth-pool em{font-family:var(--mono);font-size:10px;font-style:normal;font-weight:800;letter-spacing:.1em;color:var(--text3)}
.dg-depth-bar{height:12px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.dg-depth-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,rgba(240,240,240,.5),rgba(240,240,240,.2))}
.dg-depth-pool b{font-family:var(--mono);font-size:15px;font-weight:800}
.dg-depth-pool b.bad{color:var(--red);text-shadow:var(--red-glow)}
.dg-depth-pool b.ok{color:var(--green);text-shadow:var(--green-glow)}

.dg-comp{display:flex;gap:16px;width:min(640px,94%)}
.dg-comp-side{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px;text-align:center;align-items:center}
.dg-comp-side em{font-family:var(--mono);font-size:10px;font-style:normal;font-weight:800;letter-spacing:.1em;color:var(--text3)}
.dg-comp-side b{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--ice)}
.dg-comp-side span{font-size:11.5px;color:var(--text3);transition:opacity .3s}
.dg-comp-side span i{font-style:normal;font-family:var(--mono);color:var(--text2)}
.dg-comp-side.lit{border-color:rgba(196,255,110,.3)}

.dg-doors{display:flex;gap:18px;width:min(640px,94%)}
.dg-door{flex:1;display:flex;flex-direction:column;gap:9px;padding:24px 20px;align-items:center;text-align:center;transition:transform .18s,border-color .18s}
.dg-door:hover{transform:translateY(-3px);border-color:rgba(196,255,110,.4)}
.dg-door strong{font-family:var(--mono);font-size:16px;font-weight:800;letter-spacing:.06em;color:#fff;margin-bottom:6px}
.dg-door .tag{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:100px;border:1px solid rgba(196,255,110,.3);background:rgba(196,255,110,.07);color:var(--lime)}
.dg-door .tag.warn{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--text2)}

/* ── lesson screens on mobile ── */
@media (max-width:700px){
  .hud{flex-wrap:wrap;gap:10px;padding:calc(var(--navh) + 12px) 14px 0}
  .hud-xp{order:3;flex-basis:100%;max-width:none}
  .stage{padding:12px 14px 150px;gap:18px}
  .stage-visual{height:auto;min-height:230px;max-height:38vh}
  .stage-copy p{font-size:13.5px}
  .stage-next{left:14px;right:14px;bottom:14px;width:auto}
  .stage-dots{bottom:74px;left:14px}
  .dg-duel,.dg-comp,.dg-doors,.dg-depth-row{flex-direction:column}
  .dg-share{flex-direction:column;gap:16px}
  .dg-share svg{width:130px;height:130px}
  .dg-pool{gap:8px;transform:scale(.66)}
  .dg-lane{width:34px}
  .dg-bars{height:130px}
  .cp-bubble{padding:18px}
}
.stage-exit:hover{color:var(--text)}

/* ── checkpoint ── */
.cp-wrap{width:min(640px,94vw)}
.cp-opts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.cp-opt{padding:16px 20px;border:1.327px solid #212123;border-radius:12px;background:rgba(16,17,17,0.85);backdrop-filter:blur(10px);box-shadow:inset 0 5px 5px rgba(255,255,255,0.05);color:var(--ice);font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s,border-color .15s;text-align:center}
.cp-opt:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.cp-opt.hit{border-color:var(--green);color:var(--green);background:var(--green-soft);box-shadow:var(--green-glow)}
.cp-opt.miss{animation:cp-shake .32s;border-color:var(--red-border);color:var(--red);background:var(--red-soft)}
@keyframes cp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.cp-cleared{margin-top:18px;font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--green);text-shadow:var(--green-glow);opacity:0;transition:opacity .2s}
.cp-cleared.on{opacity:1}

/* ── level clear ── */
.clear-pts{font-family:var(--mono);font-size:clamp(44px,5vw,68px);font-weight:800;color:var(--lime);text-shadow:var(--lime-glow);line-height:1}
.clear-label{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--text3);margin-bottom:16px}
.clear-sub{color:#8f8f92;font-size:15px;font-weight:500;margin-top:12px}

/* ═══ DIAGRAMS ═══ */
.dg{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}

/* pool core */
.dg-pool{display:flex;align-items:center;gap:clamp(24px,4vw,58px)}
.dg-token{display:flex;flex-direction:column;align-items:center;gap:10px}
.dg-token img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 24px rgba(255,255,255,.12)}
.dg-token b{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ice)}
.dg-token small{font-family:var(--mono);font-size:11px;color:var(--text3)}
.dg-core{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;border:1.327px solid #212123;background:radial-gradient(60% 60% at 50% 30%,rgba(196,255,110,.12),transparent 70%),rgba(16,17,17,.85);box-shadow:inset 0 5px 5px rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.4)}
.dg-core::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(196,255,110,.35);animation:dg-pulse 2.6s ease-out infinite}
@keyframes dg-pulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.dg-core span{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--text3)}
.dg-core b{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--lime);text-shadow:var(--lime-glow)}
.dg-lane{position:relative;width:clamp(60px,7vw,110px);height:2px;background:rgba(255,255,255,.08)}
.dg-lane i{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px rgba(255,255,255,.8);animation:dg-run 1.6s linear infinite}
.dg-lane.rtl i{animation-name:dg-run-r;background:var(--lime);box-shadow:var(--lime-glow)}
.dg-lane i:nth-child(2){animation-delay:.8s}
@keyframes dg-run{from{left:-8px}to{left:100%}}
@keyframes dg-run-r{from{left:100%}to{left:-8px}}

/* fee feed */
.dg-feed{width:min(560px,90%);display:flex;flex-direction:column;gap:8px}
.dg-feed-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.dg-feed-head span{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.dg-feed-head b{font-family:var(--mono);font-size:22px;font-weight:800;color:var(--lime);text-shadow:var(--lime-glow)}
.dg-feed-rows{display:flex;flex-direction:column;gap:6px;height:170px;overflow:hidden}
.dg-row{display:flex;justify-content:space-between;padding:10px 16px;font-family:var(--mono);font-size:12px;color:var(--text2);animation:dg-drop .3s ease-out}
.dg-row b{color:var(--green);font-weight:800}
@keyframes dg-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ratio bars */
.dg-ratio{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(540px,90%)}
.dg-bars{display:flex;gap:28px;align-items:flex-end;height:170px}
.dg-bar{display:flex;flex-direction:column;align-items:center;gap:9px}
.dg-bar i{width:64px;border-radius:8px 8px 3px 3px;transition:height .6s cubic-bezier(.4,0,.2,1)}
.dg-bar.hype i{background:linear-gradient(180deg,var(--lime),#7fae3c);box-shadow:var(--lime-glow)}
.dg-bar.usdc i{background:linear-gradient(180deg,#f0f0f0,#9a9a9e);box-shadow:0 0 14px rgba(255,255,255,.25)}
.dg-bar em{font-family:var(--mono);font-size:11px;font-weight:800;font-style:normal;color:var(--text3);letter-spacing:.08em}
.dg-price{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--ice)}
.dg-price b{color:var(--lime);text-shadow:var(--lime-glow);font-size:19px}
.dg-btn{padding:11px 22px;border-radius:8px;border:1px solid var(--border2);background:var(--s2);color:var(--text2);font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s}
.dg-btn:hover{color:#000;background:#fff;border-color:#fff}
.dg-btn.active{color:#000;background:#fff;border-color:#fff}

/* IL curve + slider */
.dg-il{width:min(560px,92%);display:flex;flex-direction:column;gap:14px}
.dg-il svg{width:100%}
.dg-il input[type=range]{width:100%;accent-color:var(--lime);cursor:pointer}
.dg-il-nums{display:flex;justify-content:space-between;font-family:var(--mono)}
.dg-il-nums span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:800}
.dg-il-nums b{display:block;font-size:20px;font-weight:800;color:var(--ice);margin-top:4px}

/* tug of war: fees vs IL */
.dg-tug{width:min(560px,92%);display:flex;flex-direction:column;gap:18px;align-items:center}
.dg-tug-bar{position:relative;width:100%;height:34px;border-radius:100px;border:1.327px solid #212123;background:rgba(16,17,17,.85);overflow:hidden;box-shadow:inset 0 5px 5px rgba(255,255,255,.05)}
.dg-tug-fees{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(184,255,86,.7),rgba(184,255,86,.25));transition:width .7s cubic-bezier(.4,0,.2,1)}
.dg-tug-il{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(270deg,rgba(248,113,113,.7),rgba(248,113,113,.25));transition:width .7s cubic-bezier(.4,0,.2,1)}
.dg-tug-labels{display:flex;justify-content:space-between;width:100%;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.1em}
.dg-tug-labels .f{color:var(--green)}
.dg-tug-labels .i{color:var(--red)}
.dg-tug-verdict{font-family:var(--mono);font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dg-tug-verdict.win{color:var(--green);text-shadow:var(--green-glow)}
.dg-tug-verdict.lose{color:var(--red);text-shadow:var(--red-glow)}
.dg-tug-modes{display:flex;gap:8px}

/* range band (big game version) */
.dg-range{width:min(620px,94%);display:flex;flex-direction:column;gap:16px}
.dg-range-track{position:relative;height:120px;border-radius:14px;border:1.327px solid #212123;background:rgba(16,17,17,.85);overflow:hidden;box-shadow:inset 0 5px 5px rgba(255,255,255,.05)}
.dg-range-grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 100%}
.dg-range-band{position:absolute;top:0;bottom:0;background:rgba(184,255,86,.13);border-inline:2px solid rgba(184,255,86,.5);transition:left .25s,width .25s}
.dg-range-band::after{content:"YOUR RANGE";position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;color:rgba(184,255,86,.75);white-space:nowrap}
.dg-range-band.off{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35)}
.dg-range-band.off::after{color:rgba(248,113,113,.7)}
.dg-range-price{position:absolute;top:0;bottom:0;width:2.5px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.85)}
.dg-range-price::after{content:"PRICE";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--ice)}
.dg-range-state{display:flex;justify-content:space-between;align-items:center}
.dg-range-state b{font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:.14em}
.dg-range-state b.on{color:var(--green);text-shadow:var(--green-glow)}
.dg-range-state b.off{color:var(--red);text-shadow:var(--red-glow)}
.dg-range-fees{font-family:var(--mono);font-size:12px;color:var(--text3);font-weight:800}
.dg-range-fees b{color:var(--lime);text-shadow:var(--lime-glow)}
.dg-range input[type=range]{width:100%;accent-color:var(--lime);cursor:pointer}
.dg-range-hint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:800}

/* autopilot duel */
.dg-duel{display:flex;gap:18px;width:min(680px,94%)}
.dg-duel-side{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px;border:1.327px solid #212123;border-radius:14px;background:rgba(16,17,17,.85);box-shadow:inset 0 5px 5px rgba(255,255,255,.05)}
.dg-duel-side h4{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.dg-duel-side h4 b{color:var(--ice)}
.dg-duel-track{position:relative;height:74px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.dg-duel-band{position:absolute;top:0;bottom:0;background:rgba(184,255,86,.14);border-inline:1.5px solid rgba(184,255,86,.5)}
.dg-duel-band.off{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.4)}
.dg-duel-price{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.dg-duel-stat{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;font-weight:800}
.dg-duel-stat em{font-style:normal;color:var(--text3);letter-spacing:.08em}
.dg-duel-stat b.on{color:var(--green)}
.dg-duel-stat b.off{color:var(--red)}
.dg-duel-fees{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--lime);text-shadow:var(--lime-glow)}

/* coin (celebration) */
.coin{position:fixed;top:-24px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9ffb8,var(--lime) 60%,#7fae3c);box-shadow:0 0 10px rgba(184,255,86,.6);z-index:999;pointer-events:none;animation:coin-fall linear forwards}
@keyframes coin-fall{to{transform:translateY(110vh) rotate(540deg)}}

/* pack milestone */
.pack-card{display:flex;flex-direction:column;align-items:center;gap:10px}
.pack-card img{width:120px;filter:drop-shadow(0 12px 34px rgba(196,255,110,.25))}
.pack-card.sealed img{filter:grayscale(1) brightness(.5)}
.pack-card b{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);text-shadow:var(--lime-glow)}
.pack-card.sealed b{color:var(--text3);text-shadow:none}