/* ===== FONTS ===== */
/* Barlow Condensed (display/headings) + Barlow (body/UI) — athletic/performance pairing
   per the ui-ux-pro-max design-system recommendation for sports products. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* ---- Surface ladder (no pure black; OLED-safe, slight indigo tint) ---- */
  --bg-deep:     #070812;   /* body + scroll areas */
  --bg-base:     #0E1020;   /* default screen background */
  --bg-elevated: #161930;   /* cards, list rows */
  --bg-overlay:  #1F2340;   /* modals, sheets, pressed-state cards */
  --surface:     rgba(255,255,255,.04);

  /* ---- Back-compat aliases (old token names → new ladder values) ---- */
  --bg:  var(--bg-deep);
  --bg2: var(--bg-elevated);
  --bg3: var(--bg-overlay);
  --bg4: #2A2F4D;

  /* ---- Text ---- */
  --fg:       #F2F3F7;
  --fg-muted: #A2A7BC;
  --fg-faint: #6D7390;
  --white: var(--fg);
  --gray:  var(--fg-muted);
  --gray2: var(--fg-faint);

  /* ---- Brand accent (indigo-violet — replaces matrix green) ---- */
  --accent:        #5E6AD2;
  --accent-bright: #8B93E0;
  --accent-glow:   rgba(94,106,210,.28);
  /* Back-compat: --green now points at brand indigo everywhere.
     The pure-green semantic is in --success below; answer-correct flows
     use --success directly. */
  --green:      var(--accent);
  --green-dim:  rgba(94,106,210,.14);
  --green-glow: var(--accent-glow);

  /* ---- Semantic palette (functional — NOT brand) ---- */
  --success:     #22C55E;
  --success-dim: rgba(34,197,94,.14);
  --warning:     #F5B547;
  --warning-dim: rgba(245,181,71,.14);
  --danger:      #EF4444;
  --danger-dim:  rgba(239,68,68,.14);
  --info:        #38BDF8;
  --info-dim:    rgba(56,189,248,.14);
  /* Back-compat aliases */
  --gold:       var(--warning);
  --orange:     #F5943B;
  --orange-dim: rgba(245,148,59,.14);
  --red:        var(--danger);
  --red-dim:    var(--danger-dim);
  --blue:       var(--info);
  --blue-dim:   var(--info-dim);
  --purple:     #A78BFA;
  --purple-dim: rgba(167,139,250,.14);

  /* ---- Borders / outlines ---- */
  --border-hairline: rgba(255,255,255,.08);
  --border-strong:   rgba(255,255,255,.14);
  --focus-ring:      rgba(94,106,210,.6);

  /* ---- Typography ---- */
  --font-display: 'Barlow Condensed', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-body:    'Barlow', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font: var(--font-body);

  /* ---- Spacing (4pt grid) ---- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;

  /* ---- Radii ---- */
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-pill:999px;

  /* ---- Elevation ---- */
  --elev-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.35);
  --elev-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(0,0,0,.45);
  --elev-primary: 0 0 0 1px var(--accent-glow), 0 8px 28px var(--accent-glow);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med:  220ms;
  --dur-slow: 320ms;

  /* ---- App shell ---- */
  --nav-height:64px;
  --session-bar-h:46px;   /* guided-session bar; body.session-on reserves this + --safe-top */
  --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);
}
html,body{background:var(--bg);color:var(--white);font-family:var(--font);height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font-family:var(--font);cursor:pointer;border:none;outline:none;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}

/* ===== APP SHELL ===== */
#app{max-width:480px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right)}
#screens{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;padding:16px;padding-bottom:calc(16px + var(--nav-height) + var(--safe-bottom));overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;opacity:0;transform:translateX(60px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;will-change:transform,opacity}
.screen.active{opacity:1;transform:translateX(0);pointer-events:auto}
.screen.enter-right{opacity:0;transform:translateX(60px);transition:none}
.screen.enter-left{opacity:0;transform:translateX(-60px);transition:none}
.screen.exit-left{opacity:0;transform:translateX(-60px);pointer-events:none}
.screen.exit-right{opacity:0;transform:translateX(60px);pointer-events:none}

/* ===== HEADER ===== */
.screen-header{text-align:center;padding:12px 0 8px;position:relative}
.screen-header h1{font-family:var(--font-display);font-size:2.25rem;font-weight:800;letter-spacing:2px;color:var(--fg);text-shadow:none}
.screen-header p{font-family:var(--font-body);font-size:.7rem;color:var(--fg-muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}
.sub-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sub-header h2{font-family:var(--font-display);font-size:1.25rem;font-weight:700;letter-spacing:.5px}
.sub-header .badge{font-family:var(--font-display);font-size:.6rem;padding:3px 8px;border-radius:var(--radius-sm);font-weight:700;text-transform:uppercase;letter-spacing:1px}

/* ===== BOTTOM NAV ===== */
nav{display:flex;background:rgba(14,16,32,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--border-hairline);padding-bottom:var(--safe-bottom);position:relative;z-index:100;flex-shrink:0}
nav button{flex:1;padding:10px 4px 8px;background:none;color:var(--fg-faint);font-family:var(--font-body);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;transition:color var(--dur-fast) var(--ease-out);display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
nav button .nav-icon{font-size:1.35rem;transition:transform var(--dur-fast) var(--ease-out)}
nav button.active{color:var(--accent-bright)}
nav button.active .nav-icon{transform:scale(1.1)}
nav button.active::after{content:'';position:absolute;top:0;left:28%;right:28%;height:2px;background:var(--accent-bright);border-radius:0 0 2px 2px}

/* ===== BUTTONS ===== */
.btn{display:inline-block;padding:14px 28px;border-radius:var(--radius-lg);font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.5px;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);text-align:center;position:relative;overflow:hidden;text-transform:uppercase}
.btn:active{transform:scale(.96)}
.btn-green{background:var(--accent);color:#fff;box-shadow:var(--elev-primary)}
.btn-blue{background:var(--info);color:#0a0a1a}
.btn-outline{background:none;border:1.5px solid var(--accent);color:var(--accent-bright)}
.btn-outline:active{background:var(--accent-glow)}
.btn-gold{background:var(--warning);color:#2a1d00}
.btn-sm{padding:10px 20px;font-size:.82rem;border-radius:var(--radius-md)}
.btn-block{display:block;width:100%;margin-top:4px}

/* ===== CARDS ===== */
.card{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--sp-5);margin-bottom:10px;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);border:1px solid var(--border-hairline);box-shadow:var(--elev-1);position:relative;overflow:hidden}
.card:active{transform:scale(.98);border-color:var(--accent);box-shadow:var(--elev-2)}
.card h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:4px;font-weight:700;letter-spacing:.3px;color:var(--fg)}
.card p{font-family:var(--font-body);font-size:.82rem;color:var(--fg-muted);line-height:1.45}
.card .card-icon{font-size:1.8rem;margin-bottom:6px;color:var(--accent-bright);display:inline-flex;align-items:center;justify-content:center}
.card .card-icon svg{width:28px;height:28px;stroke-width:1.75}
.card-row .card-icon svg{width:32px;height:32px}
.nav-icon svg{width:22px;height:22px;stroke-width:1.75}
.card .card-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--gray2);font-size:1.2rem}
.card-row{display:flex;align-items:center;gap:14px}
.card-row .card-icon{margin-bottom:0;font-size:2.2rem;flex-shrink:0}
.card-row .card-text{flex:1}
.card.locked{opacity:.5;pointer-events:none}
.card.locked::after{content:'🔒';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.2rem}
#screen-home .card{animation:card-in .3s ease-out backwards}
#screen-home .card:nth-child(1){animation-delay:.05s}
#screen-home .card:nth-child(2){animation-delay:.1s}
#screen-home .card:nth-child(3){animation-delay:.15s}
#screen-home .card:nth-child(4){animation-delay:.2s}

.daily-card .daily-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.daily-card .daily-streak{font-size:.7rem;color:var(--green);font-weight:800;background:rgba(0,255,65,.12);border:1px solid rgba(0,255,65,.2);padding:2px 8px;border-radius:999px}
.daily-status{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:999px;font-size:.6rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.daily-status.ready{color:var(--green);border:1px solid rgba(0,255,65,.3);background:rgba(0,255,65,.12)}
.daily-status.complete{color:var(--gold);border:1px solid rgba(255,215,0,.4);background:rgba(255,215,0,.12)}
.home-more{margin-top:6px}
.more-toggle{width:100%;background:var(--bg3);border:1px solid #2a2a2a;color:var(--white);padding:10px 12px;border-radius:10px;font-size:.7rem;text-transform:uppercase;letter-spacing:1px}
.more-toggle:active{transform:scale(.98)}
.more-cards{display:none;margin-top:10px}
.more-cards.expanded{display:block}

.daily-summary-card{background:var(--bg2);border-radius:12px;padding:14px;margin-bottom:14px;border:1px solid #2a2a2a;text-align:center}
.daily-summary-title{font-size:1rem;font-weight:800;margin-bottom:4px}
.daily-summary-sub{font-size:.78rem;color:var(--gray);margin-bottom:4px}
.daily-summary-score{font-size:.85rem;color:#ccc;margin-top:6px}

.prescription-card{text-align:left}
.prescription-headline{font-size:1.05rem;font-weight:800;margin-bottom:4px;color:var(--white)}
.prescription-summary{font-size:.78rem;color:var(--gray);margin-bottom:10px;line-height:1.4}
.prescription-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--gray2);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #2a2a2a}
.prescription-blocks{display:flex;flex-direction:column;gap:8px}
.prescription-block{background:rgba(255,255,255,.02);border:1px solid #2a2a2a;border-radius:10px;padding:10px 12px}
.prescription-block.primary{border-color:var(--green);background:rgba(0,255,65,.05)}
.prescription-block-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.prescription-block-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:#000;font-weight:800;font-size:.7rem;flex-shrink:0}
.prescription-block-label{flex:1;font-size:.88rem;font-weight:700}
.prescription-block-time{font-size:.7rem;color:var(--gray2)}
.prescription-block-reason{font-size:.76rem;color:var(--gray);line-height:1.4;padding-left:28px}

/* ===== ASSESSMENT ===== */
.assessment-card{border-color:rgba(255,215,0,.25)!important;background:linear-gradient(135deg,var(--bg2),rgba(255,215,0,.08))!important}
.assessment-pill{display:inline-block;padding:6px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--bg3);color:var(--green);border:1px solid rgba(0,255,65,.2);margin-bottom:14px}
.assessment-hook{background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(0,255,65,.06));border-radius:12px;padding:14px;margin-bottom:14px;border:1px solid rgba(255,215,0,.25)}
.btn-gold{background:var(--gold);color:#000}
.assessment-title{font-size:1.1rem;font-weight:800;margin-bottom:6px;text-align:center}
.assessment-sub{font-size:.78rem;color:var(--gray);text-align:center;margin-bottom:8px}
.assessment-results-card{background:linear-gradient(145deg,var(--bg-elevated),rgba(94,106,210,.08));border-radius:var(--radius-lg);padding:var(--sp-5);border:1px solid var(--accent-glow);box-shadow:0 0 40px var(--accent-glow);text-align:center;margin-bottom:16px}
.assessment-results-card .score{font-family:var(--font-display);font-size:4.4rem;font-weight:800;color:var(--warning);text-shadow:0 0 24px rgba(245,181,71,.35);letter-spacing:1px}
.assessment-grade{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--accent-bright);margin-top:6px;letter-spacing:1px}
.assessment-subgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:14px 0}
.assessment-subbox{background:var(--bg2);border-radius:12px;padding:12px 8px;border:1px solid #2a2a2a;text-align:center}
.assessment-subbox .label{font-size:.6rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.assessment-improve{font-size:.72rem;color:var(--gray);margin-top:8px}
.assessment-share{background:var(--bg2);border-radius:14px;padding:14px;border:1px solid #2a2a2a;text-align:center;margin-bottom:14px}

/* ===== STATS ===== */
.stats-bar{display:flex;gap:8px;margin-bottom:14px}
.stat-box{flex:1;background:var(--bg-elevated);border-radius:var(--radius-md);padding:12px 8px;text-align:center;border:1px solid var(--border-hairline);box-shadow:var(--elev-1)}
.stat-box .stat-val{font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:var(--accent-bright);letter-spacing:.5px}
.stat-box .stat-label{font-family:var(--font-body);font-size:.58rem;font-weight:500;color:var(--fg-faint);text-transform:uppercase;letter-spacing:1.2px;margin-top:2px}

/* ===== FIELD (Canvas-based Madden renderer) ===== */
.field-canvas-wrap{position:relative;aspect-ratio:4/3;margin-bottom:14px;border-radius:12px;overflow:hidden;background:#2D3436}
.field-canvas-wrap.learn{aspect-ratio:4/2.8}
.field-canvas-wrap.progression{aspect-ratio:4/3.5}
.field-canvas-wrap canvas{display:block;width:100%;height:100%}

/* Legacy .field kept for backward compat but hidden when canvas is used */
.field{background:linear-gradient(180deg,#2D3436 0%,#232B2B 100%);border-radius:14px;padding:16px;position:relative;aspect-ratio:4/3;margin-bottom:14px;border:1px solid rgba(200,168,78,0.15);overflow:hidden}
.field-line{position:absolute;background:rgba(200,168,78,.12);height:1px;width:100%;left:0}
.los{position:absolute;background:rgba(74,144,217,.5);height:2px;width:100%;left:0;top:60%}
.defender,.receiver{position:absolute;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;transform:translate(-50%,-50%);transition:all .4s ease;border:2px solid}
.defender.db{background:rgba(74,144,217,.7);border-color:rgba(74,144,217,.9);color:#fff}
.defender.lb{background:rgba(200,229,80,.6);border-color:rgba(200,229,80,.8);color:#fff}
.defender.dl{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5);color:#fff}
.defender.s{background:rgba(74,144,217,.7);border-color:rgba(74,144,217,.9);color:#fff}
.receiver{background:rgba(0,102,255,.85);border-color:#3388ff;color:#fff;cursor:pointer;z-index:2}
.receiver:active{transform:translate(-50%,-50%) scale(1.2)}
.receiver.correct{background:var(--success)!important;border-color:var(--success)!important;color:#000!important}
.receiver.wrong{background:var(--danger)!important;border-color:var(--danger)!important}
.receiver.next-read{animation:pulse-read .8s infinite alternate}
.receiver .read-order{position:absolute;top:-10px;right:-10px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:.6rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.qb-marker{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);border:2px solid rgba(200,168,78,.5);color:#000;font-size:.6rem;font-weight:900;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:1}
@keyframes pulse-read{from{box-shadow:0 0 0 0 rgba(0,255,65,.4)}to{box-shadow:0 0 0 10px rgba(0,255,65,0)}}

/* ===== ANSWER GRID ===== */
.answer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.answer-btn{padding:14px 8px;background:var(--bg2);border:2px solid #3a3a3a;border-radius:10px;color:var(--white);font-size:.85rem;font-weight:700;transition:all .12s}
.answer-btn:active{transform:scale(.95)}
.answer-btn.correct{border-color:var(--success);background:var(--success-dim);color:var(--success);animation:pop .3s ease}
.answer-btn.wrong{border-color:var(--danger);background:var(--danger-dim);color:var(--danger);animation:shake .3s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ===== GAME HUD ===== */
.game-hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.8rem;gap:8px}
.game-hud .streak{color:var(--green);font-weight:700;white-space:nowrap}
.timer-bar{flex:1;height:5px;background:#333;border-radius:3px;overflow:hidden}
.timer-fill{height:100%;background:var(--green);transition:width .08s linear;border-radius:3px}
.timer-fill.danger{background:var(--red)}
.timer-fill.warning{background:var(--orange)}

/* ===== DIFFICULTY SELECT ===== */
.difficulty-select{display:flex;gap:8px;margin-bottom:14px}
.diff-btn{flex:1;padding:12px 6px;background:var(--bg2);border:2px solid #3a3a3a;border-radius:10px;color:var(--gray);font-size:.78rem;font-weight:700;text-align:center;transition:all .15s}
.diff-btn.active{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.diff-btn span{display:block;font-size:.58rem;color:var(--gray);margin-top:2px;font-weight:400}

/* ===== EXPLANATION ===== */
.explanation{background:var(--bg2);border-radius:10px;padding:12px;margin-top:10px;font-size:.8rem;line-height:1.5;border-left:3px solid var(--green)}

/* ===== HINT ===== */
.hint-text{text-align:center;font-size:.75rem;color:var(--gray);margin-bottom:8px;min-height:1.2em}

/* ===== BASELINE ===== */
.assessment-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px}
.tap-target{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;transition:all .08s;user-select:none}
.tap-target.waiting{background:#333;color:var(--gray)}
.tap-target.ready{background:var(--green);color:#000;box-shadow:0 0 40px var(--green-glow)}
.tap-target.offense{background:var(--blue);color:#fff}
.tap-target.defense{background:var(--red);color:#fff}
.progress-dots{display:flex;gap:5px;margin:12px 0;justify-content:center;flex-wrap:wrap}
.progress-dots .dot{width:8px;height:8px;border-radius:50%;background:#333;transition:background .2s}
.progress-dots .dot.done{background:var(--green)}
.progress-dots .dot.fail{background:var(--red)}
.progress-dots .dot.current{background:var(--white)}
.score-display{text-align:center;padding:30px 20px}
.score-display .big-score{font-size:4rem;font-weight:900;color:var(--green);text-shadow:0 0 30px var(--green-glow)}
.box-count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.box-count-btn{padding:16px 8px;background:var(--bg2);border:2px solid #3a3a3a;border-radius:10px;color:var(--white);font-size:1.2rem;font-weight:700;transition:all .12s}

/* ===== LAB ===== */
.lab-card{background:var(--bg2);border-radius:8px;padding:16px;margin-bottom:10px;cursor:pointer;border:1px solid #2a2a2a;transition:border-color .15s}
.lab-card:active{border-color:var(--green)}
.lab-card h3{font-size:1rem;margin-bottom:7px;line-height:1.25}
.lab-card p{font-size:.78rem;line-height:1.45;color:#bbb;margin-bottom:10px}
.lab-card .lab-stat{font-size:.74rem;color:var(--green);font-weight:700;margin-bottom:7px;line-height:1.35}
.lab-card-meta,.lab-card-footer{display:flex;justify-content:space-between;gap:10px;color:var(--gray);font-size:.64rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.lab-card-footer{margin:0;padding-top:10px;border-top:1px solid #2a2a2a;text-transform:none;letter-spacing:0}
.lab-article h2{font-size:1.2rem;margin-bottom:4px;line-height:1.3}
.lab-topic{font-size:.66rem;color:var(--gray);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.lab-article .key-stat{background:var(--green-dim);border:1px solid rgba(0,255,65,.2);border-radius:8px;padding:14px;text-align:center;margin:14px 0;font-size:.95rem;font-weight:700;color:var(--green);line-height:1.35}
.lab-article .research-consensus{background:var(--bg2);border-left:3px solid var(--green);padding:13px 14px;margin:14px 0}
.lab-article .research-consensus h4,.lab-article .qbiq-link h4{font-size:.72rem;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.lab-article .research-consensus p,.lab-article .qbiq-link p{font-size:.84rem;line-height:1.55;color:#ddd}
.lab-article .body-text{font-size:.88rem;line-height:1.7;color:#ccc;margin-bottom:14px}
.lab-article .body-text p{margin-bottom:12px}
.lab-article .try-this,.lab-article .qbiq-link{background:var(--blue-dim);border:1px solid rgba(0,102,255,.2);border-radius:8px;padding:14px;margin:14px 0}
.lab-article .try-this h4{color:var(--blue);margin-bottom:4px;font-size:.82rem}
.lab-article .try-this p{font-size:.82rem;line-height:1.5;color:#ccc}
.lab-article .source{font-size:.68rem;color:var(--gray);margin-top:12px;font-style:italic}
.back-btn{background:none;color:var(--gray);font-size:.85rem;margin-bottom:10px;padding:8px 0;display:flex;align-items:center;gap:4px}
.back-btn:active{color:var(--white)}

/* ===== PROFILE ===== */
.profile-section{margin-bottom:20px}
.profile-section h3{font-size:.85rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.age-track-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.age-track-btn{padding:16px 12px;background:var(--bg2);border:2px solid #3a3a3a;border-radius:12px;text-align:center;transition:all .15s}
.age-track-btn.active{border-color:var(--green);background:var(--green-dim)}
.age-track-btn .track-emoji{font-size:1.6rem;margin-bottom:4px}
.age-track-btn .track-name{font-size:.9rem;font-weight:700;color:var(--white)}
.age-track-btn .track-age{font-size:.7rem;color:var(--gray);margin-top:2px}
.age-track-btn.active .track-name{color:var(--green)}
.profile-stat-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #2a2a2a;font-size:.88rem}
.profile-stat-row .psr-label{color:var(--gray)}
.profile-stat-row .psr-value{font-weight:700;color:var(--green)}
.reset-btn{margin-top:20px;padding:12px;background:var(--red-dim);border:1px solid var(--red);border-radius:10px;color:var(--red);font-size:.85rem;font-weight:600;width:100%}

/* ===== PROFILE CHARTS ===== */
.chart-wrap{background:var(--bg2);border-radius:12px;padding:12px;border:1px solid #2a2a2a;overflow:hidden}
.chart-wrap canvas{display:block;width:100%}

/* Stats summary grid */
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.stats-item{background:var(--bg2);border-radius:10px;padding:12px 6px;text-align:center;border:1px solid #2a2a2a}
.stats-value{font-size:1.1rem;font-weight:800;color:var(--green);margin-bottom:2px}
.stats-label{font-size:.6rem;color:var(--gray);text-transform:uppercase;letter-spacing:.5px}

/* Streak calendar */
.streak-header{display:flex;gap:16px;margin-bottom:12px}
.streak-stat{display:flex;align-items:baseline;gap:6px}
.streak-num{font-size:1.3rem;font-weight:900;color:var(--green)}
.streak-label{font-size:.7rem;color:var(--gray)}
.streak-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.streak-cell{aspect-ratio:1;border-radius:3px;background:#1a1a1a;border:1px solid #2a2a2a;position:relative}
.streak-l1{background:rgba(0,255,65,0.15);border-color:rgba(0,255,65,0.2)}
.streak-l2{background:rgba(0,255,65,0.3);border-color:rgba(0,255,65,0.35)}
.streak-l3{background:rgba(0,255,65,0.5);border-color:rgba(0,255,65,0.55)}
.streak-l4{background:rgba(0,255,65,0.75);border-color:rgba(0,255,65,0.8)}
.streak-today{box-shadow:0 0 0 1.5px var(--green)}
.streak-day-label{position:absolute;top:-14px;left:0;font-size:8px;color:var(--gray2);white-space:nowrap}
@media(max-width:360px){.stats-grid{grid-template-columns:1fr 1fr;gap:6px}.streak-grid{gap:2px}}

/* ===== ONBOARDING (5-step) ===== */
#screen-onboarding{padding:0;overflow:hidden}
.onboard-skip{position:absolute;top:16px;right:16px;z-index:10;background:none;color:var(--gray);font-size:.8rem;font-weight:600;padding:8px 12px}
.onboard-skip:active{color:var(--white)}
.onboarding-viewport{flex:1;overflow:hidden;height:calc(100% - 50px)}
.onboarding-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform}
.onboarding-slide{min-width:100%;width:100%;display:flex;flex-direction:column;justify-content:center;padding:24px 20px;gap:16px;box-sizing:border-box}
.onboard-splash{text-align:center;padding:20px 0}
.onboard-logo{font-size:5rem;margin-bottom:12px;animation:onboard-pulse 2s ease infinite;color:var(--accent-bright);display:inline-flex;align-items:center;justify-content:center}
.onboard-logo svg{width:72px;height:72px;stroke-width:1.5}
.onboard-brand{font-size:3rem;font-weight:900;letter-spacing:6px;color:var(--green);text-shadow:0 0 30px var(--green-glow)}
.onboard-tagline{font-size:1rem;color:var(--gray);margin-top:8px;letter-spacing:1px}
@keyframes onboard-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.onboard-section-title{font-size:1.3rem;font-weight:900;text-align:center;margin-bottom:8px}
.onboard-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.onboard-pos-btn{padding:20px 12px;background:var(--bg2);border:2px solid #3a3a3a;border-radius:14px;color:var(--white);font-size:2rem;text-align:center;transition:all .15s}
.onboard-pos-btn span{display:block;font-size:.78rem;margin-top:6px;font-weight:600}
.onboard-pos-btn.active{border-color:var(--green);background:var(--green-dim)}
.onboard-pos-btn.active span{color:var(--green)}
.onboard-pos-btn.disabled{opacity:.35;pointer-events:none}
.onboard-coming-soon{text-align:center;font-size:.7rem;color:var(--gray);margin-bottom:8px}
.onboard-level-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.onboard-level-card{display:flex;align-items:center;gap:14px;padding:18px 16px;background:var(--bg2);border:2px solid #3a3a3a;border-radius:14px;text-align:left;transition:all .15s;color:var(--white)}
.onboard-level-card:active{transform:scale(.98)}
.onboard-level-card.active{border-color:var(--green);background:var(--green-dim)}
.olc-emoji{font-size:2rem;flex-shrink:0}
.olc-name{font-size:1rem;font-weight:800}
.olc-sub{font-size:.72rem;color:var(--gray);margin-top:2px}
.onboard-level-card.active .olc-name{color:var(--green)}
.onboard-cta-wrap{text-align:center;padding:20px 0}
.onboard-cta-emoji{font-size:4rem;margin-bottom:12px;animation:cel-bounce .8s ease;color:var(--warning);display:inline-flex;align-items:center;justify-content:center}
.onboard-cta-emoji svg{width:56px;height:56px;stroke-width:1.5}
.onboard-cta-title{font-size:1.8rem;font-weight:900;color:var(--green)}
.onboard-cta-sub{font-size:.9rem;color:var(--gray);margin-top:8px;line-height:1.5}
.onboard-dots{display:flex;justify-content:center;gap:8px;padding:12px 0 calc(12px + var(--safe-bottom));position:absolute;bottom:0;left:0;right:0}
.onboard-dot{width:10px;height:10px;border-radius:50%;background:#333;transition:all .3s}
.onboard-dot.active{background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.onboard-input{width:100%;padding:16px 14px;border-radius:12px;background:var(--bg2);border:2px solid #2a2a2a;color:var(--white);font-size:1rem}
.onboard-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 12px rgba(0,255,65,.15)}

/* ===== TRAIN MENU ===== */
.train-module-card{display:flex;align-items:center;gap:14px;background:var(--bg2);border-radius:14px;padding:16px;margin-bottom:10px;cursor:pointer;border:1px solid #2a2a2a;transition:all .15s}
.train-module-card:active{transform:scale(.98);border-color:var(--green)}
.train-module-card .tmc-icon{font-size:2.2rem;flex-shrink:0;width:50px;text-align:center;color:var(--accent-bright);display:flex;align-items:center;justify-content:center}
.train-module-card .tmc-icon svg{width:30px;height:30px;stroke-width:1.75}
.train-module-card.learn-module .tmc-icon{color:var(--success)}

/* ===== START HERE (new-user onboarding nudge on home) ===== */
.start-here{background:linear-gradient(135deg,rgba(94,106,210,.12),rgba(94,106,210,.04));border:1px solid var(--accent-glow);border-radius:var(--radius-lg);padding:14px;margin-bottom:14px;box-shadow:var(--elev-1)}
.start-here-head{margin-bottom:10px}
.shh-kicker{display:inline-block;font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-bright);background:rgba(94,106,210,.18);border-radius:var(--radius-sm);padding:2px 8px;margin-bottom:4px}
.shh-title{display:block;font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--fg);letter-spacing:.3px;margin-top:4px}
.start-here-step{display:flex;align-items:center;gap:12px;width:100%;background:var(--bg-elevated);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:10px 12px;margin-top:6px;color:var(--fg);text-align:left;transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.start-here-step:active{transform:scale(.98);border-color:var(--accent)}
.start-here-step.done{opacity:.7}
.start-here-step.done .shs-num{background:var(--success);color:#0a0a1a}
.shs-num{width:26px;height:26px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-family:var(--font-display);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.shs-body{flex:1;display:flex;flex-direction:column;gap:1px}
.shs-title{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--fg);letter-spacing:.3px}
.shs-blurb{font-family:var(--font-body);font-size:.72rem;color:var(--fg-muted);line-height:1.35}
.shs-arrow{color:var(--fg-faint);font-size:1.1rem}

/* ===== TRAIN MENU SECTION GROUPING ===== */
.train-section{margin-bottom:var(--sp-6)}
.train-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 8px;gap:10px}
.train-section-title{font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-bright);margin:0}
.train-section-sub{font-family:var(--font-body);font-size:.7rem;color:var(--fg-faint);margin:0;flex:1;text-align:right}
.train-module-card .tmc-text{flex:1}
.train-module-card .tmc-text h3{font-size:.95rem;font-weight:700;margin-bottom:2px}
.train-module-card .tmc-text p{font-size:.72rem;color:var(--gray);line-height:1.3}
.train-module-card .tmc-arrow{color:var(--gray2);font-size:1rem}
.train-module-card .tmc-best{font-size:.65rem;color:var(--green);font-weight:600;margin-top:3px}
.train-module-card{animation:card-in .3s ease-out backwards}
.train-module-card:nth-child(1){animation-delay:0s}
.train-module-card:nth-child(2){animation-delay:.04s}
.train-module-card:nth-child(3){animation-delay:.08s}
.train-module-card:nth-child(4){animation-delay:.12s}
.train-module-card:nth-child(5){animation-delay:.16s}
.train-module-card:nth-child(6){animation-delay:.2s}
.train-module-card:nth-child(7){animation-delay:.24s}
@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ===== CELEBRATION OVERLAY ===== */
.celebration{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:none}
.celebration .cel-content{text-align:center;animation:cel-in .4s ease}
.celebration .cel-emoji{font-size:4rem;animation:cel-bounce .6s ease}
.celebration .cel-text{font-size:1.4rem;font-weight:900;color:var(--green);text-shadow:0 0 30px var(--green-glow);margin-top:8px}
.celebration .cel-sub{font-size:.85rem;color:var(--gray);margin-top:4px}
@keyframes cel-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes cel-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* ===== PARTICLES ===== */
.particle{position:fixed;pointer-events:none;z-index:201;font-size:1.5rem;animation:particle-fly 1s ease-out forwards}
@keyframes particle-fly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0)}
}

/* ===== SCORE POPUP ===== */
.score-popup{position:absolute;font-size:1.2rem;font-weight:900;color:var(--green);pointer-events:none;animation:score-up .8s ease-out forwards;z-index:10}
.score-popup.bonus{color:var(--gold)}
@keyframes score-up{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-40px)}}

/* ===== PROGRESS BAR ===== */
.progress-ring{width:60px;height:60px;position:relative}
.progress-ring svg{transform:rotate(-90deg)}
.progress-ring .ring-bg{fill:none;stroke:#333;stroke-width:4}
.progress-ring .ring-fill{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.progress-ring .ring-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}

/* ===== RESULTS SCREEN ANIMATIONS ===== */
#cov-results, #proc-results, #prog-results, #assessment-results, #pressure-results, #occlusion-results{animation:results-in .4s ease-out}
@keyframes results-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ===== CARD HOVER/FOCUS STATES ===== */
.train-module-card:focus-visible,.card:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ===== SCROLLBAR ===== */
.screen::-webkit-scrollbar{width:0}

/* ===== FIELD CANVAS ENTRANCE ===== */
.field-canvas-wrap canvas{animation:field-in .3s ease-out}
@keyframes field-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ===== TIMER PULSE WHEN LOW ===== */
.timer-fill.danger{animation:timer-pulse .5s ease infinite alternate}
@keyframes timer-pulse{from{opacity:1}to{opacity:.6}}

/* ===== ANSWER BUTTON IMPROVEMENTS ===== */
.answer-btn{min-height:48px;display:flex;align-items:center;justify-content:center;line-height:1.2;padding:12px 6px;word-break:break-word;font-size:.8rem;-webkit-tap-highlight-color:transparent}
.answer-btn.correct{animation:pop .3s ease;box-shadow:0 0 12px rgba(0,255,65,.3)}
.answer-btn.wrong{animation:shake .3s ease;box-shadow:0 0 12px rgba(255,68,68,.3)}

/* ===== RESPONSIVE ===== */
/* ===== OL / RB / FB MARKERS (Progression) ===== */
.defender.ol{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.3);color:#000;width:24px;height:24px;font-size:.5rem;border-radius:3px}
.defender.rb-marker,.defender.fb-marker{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.4);color:#000;font-size:.5rem;width:28px;height:28px}

/* ===== LEARN COVERAGES MODULE ===== */
.learn-cov-progress{display:flex;justify-content:center;gap:8px;margin-bottom:16px;padding:4px 0}
.lcov-dot{width:10px;height:10px;border-radius:50%;background:#333;cursor:pointer;transition:all .2s}
.lcov-dot.active{background:var(--green);transform:scale(1.3);box-shadow:0 0 8px var(--green-glow)}
.lcov-dot.done{background:rgba(0,255,65,.4)}

.learn-cov-header{text-align:center;margin-bottom:16px}
.learn-cov-emoji{font-size:3rem;margin-bottom:4px}
.learn-cov-title{font-size:1.6rem;font-weight:900;color:var(--green)}
.learn-cov-subtitle{font-size:.82rem;color:var(--gray);margin-top:2px}

.concept-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:.65rem;font-weight:800;letter-spacing:1.5px;margin-top:8px;text-transform:uppercase}
.concept-badge.man{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,68,68,.3)}
.concept-badge.zone{background:var(--blue-dim);color:#5599ff;border:1px solid rgba(0,102,255,.3)}
.concept-badge.both{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(175,82,222,.3)}

.learn-cov-field{aspect-ratio:4/2.8;margin-bottom:16px;border-radius:12px;overflow:hidden;background:var(--bg-elevated);position:relative}
.learn-cov-field canvas{display:block;width:100%;height:100%}
/* The legend is an opaque overlay on the field, so where it sits decides what the
   learner cannot see. At top:4px it covered the deepest ~19% of the box — and 10
   defenders across the playbook are drawn at y<19, every one of them a safety or
   deep corner. So the Learn screen hid the deep shell in the exact drill whose job
   is teaching you to read the deep shell, and Cover 2 Robber's single high safety
   (y=16) was invisible. Nothing in the playbook is drawn below y=81, so the bottom
   strip is empty field and the overlay costs nothing there. */
.learn-cov-field .field-legend{position:absolute;bottom:4px;left:4px;right:4px;background:rgba(7,8,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:8px;margin:0;z-index:2}

/* ===== SPLIT-VIEW LESSON (Man vs Zone) ===== */
.learn-cov-split{display:flex;gap:10px;margin-bottom:16px;flex-direction:column}
@media (min-width: 540px){ .learn-cov-split{flex-direction:row} }
.learn-cov-split-col{flex:1;background:var(--bg-elevated);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--elev-1)}
.learn-cov-split-header{font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--fg);padding:10px 12px;border-bottom:1px solid var(--border-hairline);background:linear-gradient(180deg,rgba(94,106,210,.12),transparent)}
.learn-cov-split-header span{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:500;letter-spacing:.5px;color:var(--fg-muted);text-transform:none;margin-top:1px}
.learn-cov-split-col .learn-cov-field{aspect-ratio:4/3.4;margin:0;border-radius:0;background:transparent}
.learn-cov-split-tells{list-style:none;padding:8px 12px 12px;margin:0}
.learn-cov-split-tells li{font-family:var(--font-body);font-size:.72rem;line-height:1.45;color:var(--fg-muted);padding:3px 0;padding-left:14px;position:relative}
.learn-cov-split-tells li::before{content:'▸';position:absolute;left:0;color:var(--accent-bright);font-size:.7rem}

.learn-cov-section{background:var(--bg2);border-radius:12px;padding:14px;margin-bottom:10px;border:1px solid #2a2a2a}
.learn-cov-section-title{font-size:.85rem;font-weight:800;margin-bottom:8px;color:var(--green)}
.learn-cov-desc{font-size:.85rem;line-height:1.6;color:#ccc}
.learn-cov-keys{display:flex;flex-direction:column;gap:6px}
.learn-key-item{font-size:.82rem;line-height:1.5;padding:6px 10px;background:var(--bg3);border-radius:8px;color:#ddd}
.learn-cov-look{font-size:.85rem;line-height:1.6;color:#ccc}
.learn-cov-tip{background:var(--green-dim)!important;border-color:rgba(0,255,65,.2)!important}
.learn-cov-tip p{font-size:.85rem;line-height:1.5;color:#ccc}

.learn-cov-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-bottom:20px}
.learn-cov-counter{font-size:.8rem;color:var(--gray);font-weight:700}

.learn-module{border-color:rgba(0,255,65,.2)!important;background:linear-gradient(135deg,var(--bg2),rgba(0,255,65,.05))!important}

/* ===== TIER SELECTOR ===== */
.tier-tabs{display:flex;gap:6px;margin-bottom:14px;padding:2px;background:var(--bg2);border-radius:10px;border:1px solid #2a2a2a}
.tier-tab{flex:1;padding:10px 6px;background:none;border-radius:8px;color:var(--gray);font-size:.72rem;font-weight:700;text-align:center;transition:all .15s;text-transform:uppercase;letter-spacing:.5px}
.tier-tab.active{background:var(--bg3);color:var(--green);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tier-tab .tier-emoji{display:block;font-size:1.1rem;margin-bottom:2px}
.tier-tab.locked{opacity:.4;pointer-events:none}
.tier-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.6rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.tier-badge.beginner{background:rgba(0,255,65,.12);color:#00FF41;border:1px solid rgba(0,255,65,.2)}
.tier-badge.intermediate{background:rgba(255,165,0,.12);color:#ffa500;border:1px solid rgba(255,165,0,.2)}
.tier-badge.advanced{background:rgba(255,68,68,.12);color:#ff4444;border:1px solid rgba(255,68,68,.2)}

@media(max-width:400px){
  .screen-header h1{font-size:1.6rem}
  .answer-grid{grid-template-columns:1fr 1fr}
  .answer-btn{font-size:.75rem;padding:10px 4px;min-height:44px}
  .defender,.receiver{width:26px;height:26px;font-size:.5rem}
  .learn-cov-field .defender{width:28px;height:28px}
  .field-canvas-wrap{aspect-ratio:4/2.8}
  .game-hud{font-size:.72rem}
  .stats-bar .stat-val{font-size:1.2rem}
}
@media(max-width:340px){
  .answer-grid{gap:5px}
  .answer-btn{font-size:.7rem;min-height:40px}
}

/* ===== VOR TRAINING STYLES ===== */
.vor-drill-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 12px 0;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(0,255,65,0.15);
}
.vor-drill-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* VOR Level Cards */
.vor-level-card {
  background: var(--bg2, #1a1a1a);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  transition: transform 0.15s, border-color 0.2s;
}
.vor-level-card.unlocked:active {
  transform: scale(0.98);
}
.vor-level-card.locked {
  opacity: 0.5;
}
.vor-level-card.current {
  border-width: 2px;
}
.vor-level-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.vor-level-icon {
  font-size: 1.6rem;
}
.vor-level-info {
  flex: 1;
}
.vor-level-name {
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
}
.vor-level-badge {
  display: inline-block;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  margin-top: 3px;
}
.vor-level-arrow {
  font-size: 1.4rem;
  color: var(--gray, #888);
}
.vor-level-desc {
  font-size: .78rem;
  color: #aaa;
  line-height: 1.45;
  margin: 4px 0 6px;
}
.vor-level-status {
  font-size: .72rem;
  font-weight: 600;
}
.vor-level-lock {
  font-size: .72rem;
  color: var(--gray, #888);
}

/* VOR Setup / Instructions */
.vor-setup-section {
  background: var(--bg2, #1a1a1a);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #2a2a2a;
}
.vor-setup-section-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray, #888);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.vor-instructions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vor-instruction-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vor-instruction-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,255,65,0.15);
  color: #00FF41;
  font-size: .7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vor-instruction-text {
  font-size: .8rem;
  color: #ccc;
  line-height: 1.45;
}

/* VOR Clinical Note */
.vor-clinical-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.vor-clinical-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.vor-clinical-text {
  font-size: .72rem;
  color: #aaa;
  line-height: 1.5;
}

/* VOR Progress Dots */
.vor-progress-indicator {
  text-align: center;
  margin: 10px 0;
}
.vor-progress-label {
  font-size: .72rem;
  color: var(--gray, #888);
  margin-bottom: 6px;
}
.vor-progress-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.vor-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
  border: 2px solid #555;
  transition: all 0.3s;
}
.vor-dot.done {
  background: #00FF41;
  border-color: #00FF41;
}

/* VOR Warm-Up Phase Dots */
.vor-warmup-phase-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.vor-warmup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  transition: all 0.3s;
}
.vor-warmup-dot.done {
  background: #00FF41;
}
.vor-warmup-dot.active {
  background: #00FF41;
  box-shadow: 0 0 8px rgba(0,255,65,0.5);
  animation: vor-dot-pulse 1s infinite;
}
@keyframes vor-dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* VOR Drill Timer */
.vor-drill-timer {
  font-size: 1.4rem;
  font-weight: 900;
  color: #00FF41;
}
.vor-drill-progress {
  width: 100%;
  height: 3px;
  background: #333;
  border-radius: 2px;
  margin: 6px 0;
  overflow: hidden;
}
.vor-drill-progress-fill {
  height: 100%;
  background: #00FF41;
  border-radius: 2px;
  transition: width 0.3s;
}
.vor-drill-instruction {
  font-size: .82rem;
  color: #00FF41;
  font-weight: 600;
  line-height: 1.4;
}

/* VOR Gyro Bars */
.vor-gyro-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.vor-gyro-fill {
  flex: 1;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}
.vor-gyro-fill-inner {
  height: 100%;
  background: #00FF41;
  border-radius: 3px;
  transition: width 0.15s;
}
.vor-gyro-val {
  font-size: .65rem;
  color: var(--gray, #888);
  min-width: 36px;
  text-align: right;
}

/* VOR Warmup CTA */
.vor-warmup-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2, #1a1a1a);
  border: 1px solid rgba(0,255,65,0.2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  cursor: pointer;
}
.vor-warmup-cta:active {
  transform: scale(0.98);
}
.vor-warmup-cta-title {
  font-size: .9rem;
  font-weight: 800;
  color: #00FF41;
}
.vor-warmup-cta-sub {
  font-size: .72rem;
  color: var(--gray, #888);
  margin-top: 2px;
}
.vor-warmup-cta-arrow {
  font-size: 1.4rem;
  color: var(--gray, #888);
}

/* VOR Symptom Check */
.vor-symptom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #333;
  border-radius: 3px;
  outline: none;
}
.vor-symptom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00FF41;
  cursor: pointer;
}

/* VOR Beta Badge */
.vor-beta-badge {
  display: inline-block;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #00FF41;
  background: rgba(0,255,65,0.1);
  border: 1px solid rgba(0,255,65,0.25);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* VOR Section Label */
.vor-section-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray, #888);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 12px 0 8px;
}

/* VOR Results */
.vor-result-status {
  font-size: .75rem;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: center;
}
.vor-result-status.pass {
  background: rgba(0,255,65,0.1);
  color: #00FF41;
  border: 1px solid rgba(0,255,65,0.2);
}
.vor-result-status.fail {
  background: rgba(255,165,0,0.1);
  color: #FFA500;
  border: 1px solid rgba(255,165,0,0.2);
}
.vor-result-status.warning {
  background: rgba(255,51,51,0.1);
  color: #FF3333;
  border: 1px solid rgba(255,51,51,0.2);
}
.vor-result-status.info {
  background: rgba(100,100,100,0.1);
  color: var(--gray, #888);
  border: 1px solid rgba(100,100,100,0.2);
}

/* VOR Level 4 — Dual-Task Answer Buttons */
.vor-answer-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  justify-content: center;
}

.vor-answer-btn {
  flex: 1 1 45%;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid #333;
  background: var(--bg2);
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  min-height: 40px;
}

.vor-answer-btn:active {
  transform: scale(0.96);
}

.vor-answer-btn.correct {
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.15);
  color: var(--green);
}

.vor-answer-btn.wrong {
  border-color: var(--red);
  background: rgba(255, 51, 51, 0.15);
  color: var(--red);
}

.vor-answer-btn.timeout {
  border-color: var(--orange);
  opacity: 0.6;
}

/* Score popup for Level 4 in-drill feedback */
.vor-score-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  font-weight: 900;
  pointer-events: none;
  animation: vorScorePopup 0.8s ease-out forwards;
  z-index: 10;
}

@keyframes vorScorePopup {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  50% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(0.9); }
}

/* Dual-task metrics row in results */
.vor-dual-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.vor-dual-metric {
  text-align: center;
}

.vor-dual-metric .vor-metric-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: #9b59b6;
}

.vor-dual-metric .vor-metric-label {
  font-size: .65rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* Dual-task cost comparison */
.vor-cost-comparison {
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #2a2a2a;
}

.vor-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: .78rem;
}

.vor-cost-label {
  color: var(--gray);
}

.vor-cost-val {
  font-weight: 800;
}

/* VOR Level 5 — Scramble Simulation */
.vor-wm-panel {
  text-align: center;
  padding: 10px 0;
}

.vor-wm-prompt {
  font-size: 1rem;
  font-weight: 800;
  color: #f1c40f;
  margin-bottom: 8px;
}

.vor-wm-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.vor-wm-btn {
  width: 60px;
  height: 48px;
  border-radius: 10px;
  border: 1.5px solid #333;
  background: var(--bg2);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  transition: all .15s;
}

.vor-wm-btn:active {
  transform: scale(0.96);
}

.vor-wm-btn.correct {
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.15);
  color: var(--green);
}

.vor-wm-btn.wrong {
  border-color: var(--red);
  background: rgba(255, 51, 51, 0.15);
  color: var(--red);
}

/* Interval breakdown in results */
.vor-interval-breakdown {
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid rgba(241, 196, 15, 0.2);
}

.vor-interval-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #1e1e1e;
  font-size: .75rem;
}

.vor-interval-row:last-child {
  border-bottom: none;
}

.vor-interval-label {
  color: var(--gray);
  width: 28px;
  font-weight: 700;
}

.vor-interval-reads {
  flex: 1;
  letter-spacing: 2px;
}

.vor-interval-wm {
  width: 28px;
  text-align: center;
}

.vor-interval-move {
  width: 40px;
  text-align: right;
  color: #f1c40f;
  font-weight: 700;
}

/* ===== POST-SNAP READS ===== */
#postsnap-results{animation:results-in .4s ease-out}
.postsnap-canvas{display:block;width:100%;height:100%;touch-action:none}
.postsnap-round-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border-radius:8px;margin-bottom:6px;font-size:.8rem;border:1px solid #2a2a2a}
.postsnap-round-icon{font-size:1rem;flex-shrink:0;width:22px;text-align:center}
.postsnap-round-text{flex:1;line-height:1.35}
.postsnap-round-rt{font-size:.7rem;color:var(--gray);white-space:nowrap}
.train-module-card:nth-child(8){animation-delay:.28s}
.train-module-card:nth-child(9){animation-delay:.32s}
.train-module-card:nth-child(10){animation-delay:.36s}

/* ===== PERIPHERAL VISION TRAINER ===== */
.pv-canvas-wrap {
  width: 100%;
  aspect-ratio: 1;
  max-height: 340px;
  position: relative;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0a;
}

.pv-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.pv-level-badge {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pv-direction-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

.pv-dpad-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pv-dir-btn {
  width: 64px;
  height: 56px;
  border-radius: 12px;
  border: 2px solid #333;
  background: var(--bg2);
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv-dir-btn:active {
  transform: scale(0.94);
  background: #2a2a2a;
}

.pv-dir-btn.correct {
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.2);
  color: var(--green);
}

.pv-dir-btn.wrong {
  border-color: var(--red);
  background: rgba(255, 51, 51, 0.2);
  color: var(--red);
}

.pv-dir-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.pv-dpad-center {
  width: 56px;
  height: 56px;
}

#peripheral-results{animation:results-in .4s ease-out}

/* ===== PAYWALL OVERLAY ===== */
.paywall-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}
.paywall-overlay.hidden { display: none; }
.paywall-card {
  background: var(--bg2, #1a1a2e);
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.paywall-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 1.5rem;
  color: var(--gray, #888);
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.btn-link {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

/* ===== PRO BADGE ===== */
.pro-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  font-size: .55rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

/* ===== LOCK OVERLAY (for menu cards) ===== */
.card-locked {
  position: relative;
  opacity: 0.6;
}
.card-locked::after {
  content: '🔒 PRO';
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,215,0,0.15);
  color: #FFD700;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .5px;
}

/* ===== ASSESSMENT RESULTS POLISH ===== */
.oys-grade-badge{animation:grade-bounce .6s cubic-bezier(.34,1.56,.64,1) .3s both}
@keyframes grade-bounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* ===== SPRINT 2: ACCOUNT SYSTEM ===== */
.account-hero {
  text-align: center;
  padding: 24px 0 20px;
}
.account-hero-icon { font-size: 3rem; margin-bottom: 8px; }
.account-hero-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.account-hero-sub { font-size: .82rem; color: var(--gray); line-height: 1.5; }
.account-auth-btns { margin-bottom: 24px; }
.account-apple-btn {
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: .9rem;
  padding: 14px;
  border-radius: 12px;
  width: 100%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.account-google-btn {
  background: var(--bg2);
  color: var(--white);
  border: 1px solid #333;
  font-size: .9rem;
  padding: 14px;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}
.account-offline-mode {
  background: var(--bg2);
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: var(--white);
}
.account-features { margin-bottom: 20px; }
.account-feature-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
  font-size: .85rem;
  color: var(--gray);
}
.account-feature-row span:first-child { font-size: 1.1rem; flex-shrink: 0; }
.account-section { margin-bottom: 20px; }
.account-section h3 { font-size: .9rem; font-weight: 700; margin-bottom: 12px; }
.account-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 20px;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 16px;
}
.account-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #00aa2a);
  color: #000;
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
.account-email { font-size: .75rem; color: var(--gray); }
.account-stats-row {
  display: flex;
  justify-content: space-around;
  background: var(--bg2);
  border-radius: 12px;
  padding: 16px 8px;
  margin-bottom: 20px;
  border: 1px solid #2a2a2a;
}
.account-stat { text-align: center; }
.account-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--green); }
.account-stat-label { font-size: .65rem; color: var(--gray); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.account-field { margin-bottom: 12px; }
.account-label { font-size: .75rem; color: var(--gray); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.account-input, .account-select {
  width: 100%;
  background: var(--bg2);
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--white);
  padding: 12px 14px;
  font-size: .9rem;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.account-input:focus, .account-select:focus { border-color: var(--green); }

/* ===== SPRINT 2: SCORE REVEAL ANIMATION ===== */
@keyframes score-count-in {
  0% { opacity: 0; transform: scale(0.6) translateY(20px); }
  60% { transform: scale(1.08) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.score-reveal-anim {
  animation: score-count-in .7s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes grade-color-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.grade-reveal-anim {
  animation: grade-color-in .4s ease .5s both;
}

/* Animated score counter */
.score-counter-wrap {
  position: relative;
  display: inline-block;
}
.score-counter-wrap .score-particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}

/* ===== SPRINT 2: DRILL TRANSITION POLISH ===== */
@keyframes drill-slide-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.drill-enter { animation: drill-slide-in .25s ease both; }

@keyframes answer-correct-glow {
  0% { box-shadow: 0 0 0 0 rgba(0,255,65,0.6); }
  50% { box-shadow: 0 0 0 12px rgba(0,255,65,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,65,0); }
}
.answer-correct-pulse { animation: answer-correct-glow .4s ease; }

@keyframes answer-wrong-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.answer-wrong-shake { animation: answer-wrong-shake .35s ease; }

/* ===== SPRINT 2: LOADING / EMPTY / ERROR STATES ===== */
.state-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--gray);
  gap: 12px;
}
.state-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid #2a2a2a;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray);
}
.state-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.state-empty-title { font-weight: 700; color: var(--white); margin-bottom: 4px; }
.state-error {
  background: rgba(255,59,59,0.08);
  border: 1px solid rgba(255,59,59,0.3);
  border-radius: 10px;
  padding: 14px;
  color: #ff6b6b;
  font-size: .82rem;
  text-align: center;
  margin: 12px 0;
}

/* ===== SPRINT 2: HAPTIC VISUAL FEEDBACK ===== */
@keyframes haptic-correct {
  0% { background-color: transparent; }
  30% { background-color: rgba(0,255,65,0.15); }
  100% { background-color: transparent; }
}
@keyframes haptic-wrong {
  0% { background-color: transparent; }
  30% { background-color: rgba(255,59,59,0.15); }
  100% { background-color: transparent; }
}
.haptic-correct-flash { animation: haptic-correct .4s ease; }
.haptic-wrong-flash { animation: haptic-wrong .4s ease; }

/* ===== SPRINT 2: ADDITIONAL POLISH ===== */
.screen-header-simple {
  padding: 12px 0 16px;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 16px;
}
.screen-header-simple h2 {
  font-size: 1.3rem;
  font-weight: 800;
}

/* Answer button states — polish */
.answer-btn {
  transition: background-color .15s, transform .1s, box-shadow .15s;
}
.answer-btn:active {
  transform: scale(.96);
}
.answer-btn.correct {
  background-color: rgba(0,255,65,0.15) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 16px rgba(0,255,65,0.3);
  animation: answer-correct-glow .4s ease;
}
.answer-btn.wrong {
  background-color: rgba(255,68,68,0.15) !important;
  border-color: #ff4444 !important;
  animation: answer-wrong-shake .35s ease;
}

/* Card entrance stagger already in styles, ensure drill cards animate */
.drill-card-enter {
  animation: drill-slide-in .25s ease both;
}

/* Countdown timer warning */
.timer-fill.danger {
  background: var(--red, #ff4444) !important;
}

/* Gold shine on assessment results */
@keyframes gold-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.score-gold-shine {
  background: linear-gradient(90deg, #FFD700, #FFE066, #FFD700);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-shimmer 2s linear infinite;
}
/* QB Diary */
.diary-hero{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.diary-hero-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.7rem;background:rgba(255,200,87,.12);border:1px solid rgba(255,200,87,.28)}
.diary-hero h2{margin:0 0 4px;font-size:1.35rem}
.diary-hero p{margin:0;color:var(--gray);font-size:.82rem;line-height:1.4}
.diary-panel{background:var(--bg2);border:1px solid #2a2a2a;border-radius:12px;padding:14px;margin-bottom:14px}
.diary-panel-title{font-size:.72rem;color:var(--gray);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.diary-summary{border-color:rgba(255,200,87,.28);background:linear-gradient(135deg,var(--bg2),rgba(255,200,87,.06))}
.diary-focus{color:var(--gold);font-size:1rem;font-weight:800;margin-bottom:4px}
.diary-summary p,.diary-empty p,.diary-entry p{color:var(--gray);font-size:.82rem;line-height:1.5;margin:0 0 10px}
.diary-chip-row{display:flex;flex-wrap:wrap;gap:6px}
.diary-chip{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--fg);border-radius:999px;padding:4px 8px;font-size:.7rem;font-weight:700}
.diary-muted{color:var(--gray2);font-size:.75rem}
.diary-rating-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;color:var(--gray);font-size:.72rem}
.diary-ai-btn{width:100%;margin:10px 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--white);border-radius:10px;padding:11px 12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.diary-ai-summary{margin:10px 0;padding:10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.78rem;color:var(--white);line-height:1.45}
.diary-ai-summary pre{white-space:pre-wrap;font-family:var(--font);font-size:.78rem;line-height:1.45;margin:6px 0 0;color:var(--gray)}
.diary-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.diary-toggle button,.diary-tags button{border:1px solid #333;background:var(--bg);color:var(--gray);border-radius:8px;padding:9px 10px;font-weight:800;font-size:.78rem}
.diary-toggle button.active,.diary-tags button.active{color:var(--gold);border-color:rgba(255,200,87,.55);background:rgba(255,200,87,.08)}
.diary-prompt{display:block;margin-bottom:10px}
.diary-prompt span{display:block;color:var(--fg);font-weight:700;font-size:.78rem;margin-bottom:5px}
.diary-prompt textarea,.diary-note{width:100%;min-height:62px;resize:vertical;border-radius:8px;border:1px solid #333;background:var(--bg);color:var(--fg);padding:10px;font:inherit;font-size:.84rem}
.diary-rating-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.diary-rating-grid label{color:var(--gray);font-size:.72rem;font-weight:700}
.diary-rating-grid select{width:100%;margin-top:4px;border-radius:8px;border:1px solid #333;background:var(--bg);color:var(--fg);padding:8px}
.diary-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.diary-note{min-height:78px;margin-bottom:12px}
.diary-entry{border-top:1px solid #2a2a2a;padding:12px 0}
.diary-entry:first-of-type{border-top:0;padding-top:0}
.diary-entry-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:.8rem}
.diary-entry-head span{color:var(--gray2)}

/* ===== COACH MENTOR ===== */
.coach-hero{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.coach-hero-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.7rem;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.28)}
.coach-hero h2{margin:0 0 4px;font-size:1.35rem}
.coach-hero p{margin:0;color:var(--gray);font-size:.82rem;line-height:1.4}
.coach-mode-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px}
.coach-mode-card{display:block;text-align:left;background:var(--bg2);border:1px solid #2a2a2a;border-radius:8px;padding:13px;color:var(--fg)}
.coach-mode-card.active{border-color:rgba(56,189,248,.6);background:linear-gradient(135deg,var(--bg2),rgba(56,189,248,.08))}
.coach-mode-card strong{display:block;font-size:.9rem;margin-bottom:4px}
.coach-mode-card span{display:block;color:var(--gray);font-size:.76rem;line-height:1.4}
.coach-panel{background:var(--bg2);border:1px solid #2a2a2a;border-radius:12px;padding:14px;margin-bottom:14px}
.coach-panel-title{font-size:.72rem;color:var(--gray);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.coach-bubble{border-radius:10px;padding:10px 11px;margin-bottom:8px;font-size:.84rem;line-height:1.45}
.coach-bubble.coach{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.18);color:#dcefff}
.coach-bubble.athlete{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--fg);margin-left:20px}
.coach-src{margin-top:6px;font-size:.62rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray);opacity:.75}
.coach-prompt-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.coach-prompt-row button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--fg);border-radius:999px;padding:7px 9px;font-size:.7rem;font-weight:700;text-align:left}
.coach-input{width:100%;min-height:92px;resize:vertical;border-radius:8px;border:1px solid #333;background:var(--bg);color:var(--fg);padding:10px;font:inherit;font-size:.84rem;margin-bottom:10px}
.coach-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.coach-actions .btn{padding:12px 10px;font-size:.78rem}
.coach-session{border-top:1px solid #2a2a2a;padding:12px 0}
.coach-session:first-of-type{border-top:0;padding-top:0}
.coach-session div{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-size:.8rem}
.coach-session span,.coach-session small{color:var(--gray2)}
.coach-session p{margin:0 0 4px;color:var(--gray);font-size:.82rem;line-height:1.45}
.coach-empty p{color:var(--gray);font-size:.82rem;line-height:1.5;margin:4px 0 0}

/* ===== Today's Session hero (the guided daily flow) ===== */
.session-hero{background:linear-gradient(135deg,var(--bg-elevated),rgba(94,106,210,.10));border:1px solid var(--accent-glow);border-radius:16px;padding:16px;margin-bottom:14px}
.session-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sh-titles{display:flex;flex-direction:column;gap:2px}
.sh-kicker{font-size:.7rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-bright)}
.sh-sub{font-size:.72rem;color:var(--gray)}
.sh-ring{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--pct,0%),rgba(255,255,255,.10) 0)}
.sh-ring span{width:34px;height:34px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-size:.6rem;font-weight:800;color:var(--white)}
.sh-headline{font-size:.8rem;color:var(--gray);line-height:1.5;margin-bottom:10px}
.session-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.session-step{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--bg2);border:1px solid #2a2a2a;border-radius:12px;padding:10px 12px;transition:transform .12s,border-color .12s}
.session-step:active{transform:scale(.98)}
.session-step.next{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.session-step.done{opacity:.6}
.ss-num{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;background:rgba(255,255,255,.08);color:var(--white)}
.session-step.next .ss-num{background:var(--green);color:#04130a}
.session-step.done .ss-num{background:var(--success-dim);color:var(--success)}
.ss-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ss-phase{font-size:.58rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gray)}
.ss-name{font-size:.9rem;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-meta{font-size:.66rem;color:var(--gray);font-weight:700;flex:0 0 auto}
.session-cta{margin-top:2px}
/* Quick-resume row */
.resume-row{display:flex;gap:8px;margin-bottom:14px}
.resume-chip{flex:1;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label arrow" "name arrow";align-items:center;column-gap:6px;background:var(--bg2);border:1px solid #2a2a2a;border-radius:12px;padding:9px 12px;text-align:left;min-width:0}
.resume-chip.ghost{opacity:.8}
.rc-label{grid-area:label;font-size:.58rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gray)}
.rc-name{grid-area:name;font-size:.82rem;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-arrow{grid-area:arrow;color:var(--gray);font-size:1rem}

/* ===== Progress screen — group heads + collapsible reference ===== */
.profile-group-head{font-size:.62rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray);margin:18px 2px 8px;border-top:1px solid #232532;padding-top:14px}
.profile-group-head:first-of-type{border-top:none;padding-top:0}
.profile-more{margin-top:8px;border:1px solid #232532;border-radius:12px;overflow:hidden}
.profile-more>summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:.78rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--gray);background:var(--bg2)}
.profile-more>summary::-webkit-details-marker{display:none}
.profile-more>summary::after{content:' ▾';float:right;color:var(--gray)}
.profile-more[open]>summary::after{content:' ▴'}
.profile-more[open]>summary{border-bottom:1px solid #232532}
.profile-more>.profile-section{padding:0 14px}
.profile-more>.profile-section:first-of-type{padding-top:10px}

/* ===== Guided-session runner bar ===== */
/* The guided-session bar is the app's ONLY position:fixed top element, which means
   it escapes #app's padding-top:var(--safe-top) and is the one thing that renders
   under the notch. Its controls (Next, Stay, the exit X) sat in that dead strip on
   any notched iPhone. The bar now carries the inset itself, and the body
   reservation is derived from the same expression so the two cannot drift apart —
   they were both hardcoded 46px before, so a notch stole from both at once. */
body.session-on{padding-top:calc(var(--session-bar-h) + var(--safe-top))}
#session-bar{position:fixed;top:0;left:0;right:0;height:calc(var(--session-bar-h) + var(--safe-top));z-index:300;display:flex;align-items:center;gap:10px;padding:var(--safe-top) calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));background:linear-gradient(90deg,var(--bg-elevated),rgba(94,106,210,.20));border-bottom:1px solid var(--accent-glow);box-shadow:0 2px 12px rgba(0,0,0,.3)}
#session-bar.hidden{display:none}
.sb-info{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sb-count{font-size:.7rem;font-weight:800;color:var(--accent-bright)}
.sb-dots{display:flex;gap:4px}
.sb-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.sb-dot.cur{background:var(--green)}
.sb-dot.done{background:var(--success)}
.sb-step{flex:1;font-size:.8rem;font-weight:700;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-next{flex:1;background:var(--green);color:#04130a;font-weight:800;font-size:.8rem;border-radius:8px;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:sbPulse 1.6s ease-in-out infinite}
.sb-stay{flex:0 0 auto;background:rgba(255,255,255,.10);color:var(--white);font-weight:700;font-size:.72rem;border-radius:8px;padding:8px 10px;white-space:nowrap}
.sb-exit{flex:0 0 auto;background:transparent;color:var(--gray);font-size:1.05rem;padding:4px 8px;line-height:1}
@keyframes sbPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,65,.35)}50%{box-shadow:0 0 0 6px rgba(0,255,65,0)}}

/* ===== Mechanics Log ===== */
#mechanics-root{padding-bottom:32px}
.mech-hero{display:flex;gap:12px;align-items:center;margin:4px 0 14px}
.mech-hero-icon{font-size:30px;line-height:1}
.mech-hero h2{margin:0;font-size:1.25rem}
.mech-hero p{margin:2px 0 0;color:var(--fg-muted);font-size:.82rem;line-height:1.4}
.mech-stats{display:flex;gap:10px;margin:4px 0 14px}
.mech-stat{flex:1;background:var(--bg-elevated);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:10px;text-align:center}
.mech-stat .n{font-size:1.3rem;font-weight:800;color:var(--accent-bright)}
.mech-stat .l{font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;color:var(--fg-muted);margin-top:2px}
.mech-actions{display:flex;gap:10px;margin-bottom:6px}
.mech-actions .btn{flex:1;padding:13px 8px;font-size:.82rem}
.mech-actions .btn[disabled]{opacity:.4;pointer-events:none}
.mech-panel{background:var(--bg-elevated);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:14px;margin:12px 0}
.mech-panel video:not(.mech-thumb){width:100%;border-radius:var(--radius-md);background:#000;display:block}
.mech-coach{background:linear-gradient(135deg,var(--bg-overlay),var(--bg-elevated));border-color:var(--border-strong)}
.mech-coach h3{margin:4px 0 0;font-size:1rem}
.mech-coach p{margin:6px 0 0;color:var(--fg-muted);font-size:.82rem;line-height:1.45}
.mech-coach-pin{font-size:.7rem;font-weight:700;color:var(--warning)}
.mech-sectlbl{font-size:.66rem;letter-spacing:.8px;text-transform:uppercase;color:var(--fg-muted);font-weight:700;margin:18px 2px 2px}
.mech-repcard{display:flex;gap:12px;align-items:center;cursor:pointer}
.mech-thumb{width:96px;height:60px;border-radius:8px;flex:none;object-fit:cover;background:#000}
.mech-thumb.sm{width:64px;height:40px}
.mech-repbody{min-width:0}
.mech-repdate{font-weight:700;font-size:.9rem}
.mech-repmeta{font-size:.68rem;color:var(--fg-muted);margin:2px 0 4px;text-transform:uppercase;letter-spacing:.4px}
.mech-reprefl{font-size:.78rem;color:var(--fg-muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mech-empty{text-align:center}
.mech-empty strong{display:block;margin-bottom:4px}
.mech-empty p{color:var(--fg-muted);font-size:.82rem;margin:0}
.mech-back{background:none;border:0;color:var(--fg-muted);font-size:.82rem;cursor:pointer;padding:0;margin-bottom:8px}
.mech-field{display:block;margin:12px 0}
.mech-field>span{display:block;font-size:.78rem;font-weight:600;margin-bottom:6px}
.mech-field>span i{color:var(--fg-muted);font-weight:400;font-style:normal;font-size:.7rem}
.mech-field input,.mech-field select,.mech-field textarea{width:100%;background:var(--bg-overlay);border:1px solid var(--border-hairline);color:var(--fg);border-radius:var(--radius-md);padding:11px;font-size:.9rem;font-family:inherit}
.mech-field textarea{min-height:64px;resize:vertical}
.mech-prev{margin-bottom:10px}
.mech-hidden{display:none}
.mech-controls{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.mech-controls button{flex:1;min-width:52px;border:1px solid var(--border-hairline);background:var(--bg-overlay);color:var(--fg);border-radius:9px;padding:9px 4px;font-size:.72rem;font-weight:700;cursor:pointer}
.mech-controls button.on{border-color:var(--accent-bright);color:var(--accent-bright);background:var(--accent-glow)}
.mech-reveal{border-left:3px solid var(--accent-bright);padding:9px 12px;background:var(--accent-glow);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:.82rem;line-height:1.5;margin:10px 0}
.mech-del{display:block;width:100%;background:none;border:0;color:var(--fg-faint);font-size:.74rem;margin-top:10px;cursor:pointer}
.mech-pick{border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:10px;margin:8px 0;cursor:pointer;display:flex;gap:10px;align-items:center}
.mech-pick.sel{border-color:var(--accent-bright);background:var(--accent-glow)}
.mech-cmprow{display:flex;gap:10px}
.mech-cmprow>div{flex:1;min-width:0}
.mech-cmpdate{font-size:.74rem;font-weight:700;margin-bottom:4px}
.mech-cmpdate span{color:var(--fg-muted);font-weight:400}
#mech-cmp-scrub{width:100%;margin-top:10px;accent-color:var(--accent-bright)}

/* ===== Mechanics Log — Home habit tile ===== */
.mech-home-tile{display:flex;align-items:center;gap:12px;background:var(--bg-elevated);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:14px;margin:12px 0;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.mech-home-tile:active{transform:scale(.99)}
.mech-home-tile.stale{border-color:rgba(245,181,71,.45);background:linear-gradient(135deg,var(--bg-elevated),var(--warning-dim))}
.mech-home-tile .mht-icon{font-size:26px;line-height:1;flex:none}
.mech-home-tile .mht-body{flex:1;min-width:0}
.mech-home-tile .mht-title{font-weight:700;font-size:.95rem}
.mech-home-tile .mht-sub{font-size:.78rem;color:var(--fg-muted);margin-top:2px;line-height:1.35}
.mech-home-tile.stale .mht-sub{color:var(--warning)}
.mech-home-tile .mht-cta{flex:none;font-size:.8rem;font-weight:700;color:var(--accent-bright)}
.mech-muted{font-size:.82rem;color:var(--fg-muted);line-height:1.5}

/* ===== FIRST-RUN DRILL EXPLAINER (js/drillintro.js) ===== */
.drill-intro-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;
  background:rgba(4,5,12,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;animation:fadeIn .25s ease;
}
body.drill-intro-open{overflow:hidden}
.drill-intro-card{
  width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;
}
.drill-intro-head{text-align:center}
.drill-intro-kicker{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.14em;color:var(--accent-bright);margin-bottom:2px;
}
.drill-intro-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--fg);line-height:1.1;
}
/* The video IS the explanation, so it gets the space. Capped by viewport
   height so the actions never fall below the fold on a short screen — a
   dismiss button you have to scroll to is a trap, not a tutorial. */
.drill-intro-video{
  width:100%;max-height:62vh;border-radius:16px;background:#000;
  display:block;object-fit:contain;
  border:1px solid rgba(255,255,255,.08);
}
.drill-intro-overlay.needs-tap .drill-intro-video{outline:2px solid var(--accent)}
.drill-intro-overlay.needs-tap .drill-intro-head::after{
  content:'Tap the video to play';display:block;margin-top:6px;
  font-size:.78rem;color:var(--warning);
}
.drill-intro-actions{display:flex;gap:10px;align-items:center}
.drill-intro-skip{
  flex:none;padding:12px 16px;border-radius:12px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.14);
  color:var(--fg-muted);font-family:inherit;font-size:.9rem;font-weight:600;
}
.drill-intro-go{
  flex:1;padding:14px 16px;border-radius:12px;cursor:pointer;border:none;
  background:var(--accent);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:.04em;text-transform:uppercase;
  transition:box-shadow .2s ease,transform .1s ease;
}
/* Lights up once the explainer has finished, so "I'm done watching" and
   "I'm ready" are the same signal. */
.drill-intro-go.is-ready{box-shadow:0 0 0 3px var(--accent-glow)}
.drill-intro-go:active{transform:scale(.98)}

/* Replay affordance on the Train module cards */
.train-module-card{position:relative}
.tmc-intro{
  flex:none;width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--fg-muted);font-family:inherit;font-size:.82rem;font-weight:700;
  line-height:1;align-self:center;margin-right:2px;
}
.tmc-intro:active{background:var(--accent);color:#fff}