/* ============================================================
   ATOMIC ENGLISH — SHARED ENGINE STYLES
   Design tokens + every reusable component style used across
   lesson pages (topbar, buttons, flashcards, matching, memory,
   quiz, chips/builder, listening player, reading, speaking,
   typing, speed round, XP/achievement/modal, confetti canvas).

   Loaded by every lesson's index.html via:
     <link rel="stylesheet" href="../../shared/engine.css">

   Lesson-specific extras (e.g. a custom activity's CSS) stay
   inline in that lesson's own <style> block — do not add
   one-off, single-lesson rules here.
   ============================================================ */
  /* ============================================================
     ATOMIC ENGLISH — DESIGN TOKENS (dark theme)
     ============================================================ */
  :root{
    --green:#58cc02; --green-dark:#46a302; --green-soft:rgba(88,204,2,.14);
    --blue:#1cb0f6;  --blue-dark:#1899d6;  --blue-soft:rgba(28,176,246,.14);
    --yellow:#ffc800;--yellow-dark:#e6a700;--yellow-soft:rgba(255,200,0,.14);
    --red:#ff4b4b;   --red-dark:#ea2b2b;   --red-soft:rgba(255,75,75,.14);
    --purple:#a78bfa;--purple-soft:rgba(167,139,250,.14);
    --bg:#0d1220; --bg2:#111830;
    --card:#161e36; --card-hi:#1c2544;
    --border:#28325a; --border-hi:#3a477e;
    --ink:#eef2ff; --ink-light:#8f97b8; --ink-faint:#5a6183;
    --radius-lg:22px; --radius-md:16px; --radius-sm:12px;
    --shadow-card:0 10px 30px rgba(0,0,0,.35);
    --shadow-btn:0 4px 0 rgba(0,0,0,.35);
    --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;min-height:100%;font-family:var(--font);color:var(--ink);
    background:radial-gradient(1200px 700px at 80% -10%, #1a2450 0%, var(--bg) 55%) fixed var(--bg);
    overscroll-behavior:none;}
  button{font-family:var(--font);}

  #app{max-width:520px;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;position:relative;}

  /* ---------- sticky top bar ---------- */
  .topbar{position:sticky;top:0;z-index:50;display:flex;flex-direction:column;gap:8px;
    padding:12px 16px 10px;background:rgba(13,18,32,.85);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);}
  .topbar-row{display:flex;align-items:center;gap:10px;}
  .badge-day{font-size:12px;font-weight:900;letter-spacing:.5px;color:var(--blue);
    background:var(--blue-soft);border:1px solid rgba(28,176,246,.35);
    border-radius:99px;padding:4px 10px;white-space:nowrap;}
  .topbar-title{font-size:14px;font-weight:900;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .xp-pill{display:flex;align-items:center;gap:5px;font-weight:900;font-size:13px;color:var(--yellow);
    background:var(--yellow-soft);border:1px solid rgba(255,200,0,.35);border-radius:99px;padding:4px 10px;
    transition:transform .2s;}
  .xp-pill.bump{animation:xpBump .5s ease;}
  @keyframes xpBump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
  .coin-pill{color:var(--purple);background:var(--purple-soft);border-color:rgba(167,139,250,.4);}
  .pct-pill{font-weight:900;font-size:12px;color:var(--ink-light);white-space:nowrap;}
  .progress-track{height:12px;background:var(--card-hi);border-radius:99px;overflow:hidden;
    border:1px solid var(--border);}
  .progress-fill{height:100%;width:0%;border-radius:99px;
    background:linear-gradient(90deg,var(--green),#8ee000);
    box-shadow:0 0 12px rgba(88,204,2,.5);transition:width .6s cubic-bezier(.4,0,.2,1);}
  .back-btn{background:none;border:none;color:var(--ink-light);font-size:20px;cursor:pointer;
    padding:2px 6px;border-radius:8px;line-height:1;text-decoration:none;display:inline-flex;
    align-items:center;justify-content:center;}
  .back-btn:hover{color:var(--ink);}

  /* ---------- screens ---------- */
  .screen{flex:1;display:flex;flex-direction:column;padding:18px 18px 90px;animation:fadeIn .35s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .center-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:14px;}

  h1.big{font-size:26px;margin:0;font-weight:900;}
  p.sub{color:var(--ink-light);font-size:15px;margin:0;line-height:1.55;}

  /* ---------- dashboard section cards ---------- */
  .hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:8px 0 20px;}
  .hero .emoji{font-size:52px;animation:floaty 3.2s ease-in-out infinite;}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .section-list{display:flex;flex-direction:column;gap:12px;}
  .section-card{display:flex;align-items:center;gap:14px;background:var(--card);
    border:2px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;
    cursor:pointer;text-align:left;width:100%;color:var(--ink);
    transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:var(--shadow-card);}
  .section-card:not(.locked):hover{transform:translateY(-2px);border-color:var(--border-hi);}
  .section-card:not(.locked):active{transform:scale(.98);}
  .section-card .s-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;
    justify-content:center;font-size:26px;flex-shrink:0;}
  .section-card .s-body{flex:1;min-width:0;}
  .section-card .s-title{font-weight:900;font-size:16px;}
  .section-card .s-desc{font-size:12.5px;color:var(--ink-light);margin-top:2px;}
  .section-card .s-xp{font-size:12px;font-weight:900;color:var(--yellow);white-space:nowrap;}
  .section-card .s-check{font-size:20px;}
  .section-card.done{border-color:rgba(88,204,2,.5);}
  .section-card.done .s-xp{color:var(--green);}
  .section-card.locked{opacity:.45;cursor:not-allowed;filter:saturate(.4);}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
    font-weight:900;font-size:15px;letter-spacing:.4px;border-radius:var(--radius-md);
    padding:14px 26px;color:#fff;background:var(--green);box-shadow:0 4px 0 var(--green-dark);
    transition:filter .15s,transform .05s;text-transform:uppercase;}
  .btn:hover{filter:brightness(1.08);}
  .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-dark);}
  .btn:disabled{background:var(--card-hi);color:var(--ink-light);box-shadow:0 4px 0 #10152a;
    cursor:not-allowed;filter:none;}
  .btn.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-dark);}
  .btn.blue:active{box-shadow:0 1px 0 var(--blue-dark);}
  .btn.ghost{background:transparent;color:var(--blue);box-shadow:none;border:2px solid var(--border);}
  .btn.small{padding:9px 16px;font-size:13px;border-radius:12px;}
  .btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
  .footer-cta{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:center;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(transparent,rgba(13,18,32,.92) 40%);pointer-events:none;}
  .footer-cta .btn{pointer-events:auto;min-width:min(340px,80vw);}

  /* ---------- generic cards ---------- */
  .panel{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-lg);
    padding:18px;box-shadow:var(--shadow-card);}
  .step-head{margin:2px 0 16px;}
  .step-kicker{font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);}
  .step-title{font-size:20px;font-weight:900;margin:4px 0 0;}
  .step-sub{font-size:13.5px;color:var(--ink-light);margin-top:4px;line-height:1.5;}
  .step-dots{display:flex;gap:6px;margin-top:12px;}
  .step-dots i{width:8px;height:8px;border-radius:99px;background:var(--card-hi);border:1px solid var(--border);}
  .step-dots i.on{background:var(--green);border-color:var(--green);}

  /* ---------- flashcards ---------- */
  .flash-stage{perspective:1100px;margin:6px auto 14px;width:100%;max-width:330px;height:300px;}
  .flash-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.4,.1,.2,1.1);cursor:pointer;}
  .flash-card.flipped{transform:rotateY(180deg);}
  .flash-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    background:var(--card);border:2px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);padding:20px;}
  .flash-face.back{transform:rotateY(180deg);border-color:rgba(28,176,246,.45);}
  .flash-emoji{font-size:66px;line-height:1;}
  .flash-word{font-size:26px;font-weight:900;}
  .flash-tr{font-size:22px;font-weight:900;color:var(--blue);}
  .flash-hint{font-size:12px;color:var(--ink-light);}
  .flash-tag{position:absolute;top:12px;left:14px;font-size:10.5px;font-weight:900;letter-spacing:1px;
    text-transform:uppercase;color:var(--purple);background:var(--purple-soft);
    padding:3px 9px;border-radius:99px;}
  .flash-nav{display:flex;align-items:center;justify-content:center;gap:18px;}
  .flash-nav .cnt{font-weight:900;color:var(--ink-light);font-size:14px;min-width:60px;text-align:center;}
  .icon-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--border);background:var(--card);
    color:var(--ink);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    transition:transform .1s,border-color .15s;}
  .icon-btn:hover{border-color:var(--border-hi);}
  .icon-btn:active{transform:scale(.92);}
  .icon-btn:disabled{opacity:.35;cursor:not-allowed;}
  .audio-btn{background:var(--blue-soft);border-color:rgba(28,176,246,.4);color:var(--blue);}
  .audio-btn.playing{animation:pulse 1s ease infinite;}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

  /* ---------- image vocab grid ---------- */
  .vocab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .vocab-tile{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-md);
    padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
    transition:transform .12s,border-color .15s;}
  .vocab-tile:active{transform:scale(.94);}
  .vocab-tile .e{font-size:30px;}
  .vocab-tile .w{font-size:12px;font-weight:900;text-align:center;}
  .vocab-tile .t{font-size:10.5px;color:var(--ink-light);text-align:center;}

  /* ---------- matching ---------- */
  .match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .match-item{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-md);
    padding:14px 10px;font-weight:900;font-size:14.5px;text-align:center;cursor:pointer;color:var(--ink);
    transition:border-color .15s,background .15s,opacity .3s,transform .12s;}
  .match-item:active{transform:scale(.96);}
  .match-item.sel{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);}
  .match-item.ok{border-color:var(--green);background:var(--green-soft);color:var(--green);
    opacity:.55;pointer-events:none;}
  .match-item.err{animation:shake .4s ease;border-color:var(--red);background:var(--red-soft);color:var(--red);}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}
    60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

  /* ---------- memory ---------- */
  .memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
  .mem-card{aspect-ratio:3/3.4;perspective:600px;cursor:pointer;}
  .mem-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s;}
  .mem-card.open .mem-inner{transform:rotateY(180deg);}
  .mem-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
    font-weight:900;padding:4px;text-align:center;}
  .mem-front{background:linear-gradient(135deg,var(--card-hi),var(--card));border:2px solid var(--border);
    color:var(--ink-light);font-size:20px;}
  .mem-back{transform:rotateY(180deg);background:var(--card);border:2px solid var(--blue);
    font-size:13px;color:var(--ink);}
  .mem-back.emoji{font-size:26px;}
  .mem-card.matched .mem-back{border-color:var(--green);background:var(--green-soft);}
  .mem-card.matched{animation:matchPop .4s ease;}
  @keyframes matchPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
  .mem-stats{display:flex;justify-content:center;gap:16px;font-size:13px;font-weight:900;
    color:var(--ink-light);margin-bottom:12px;}

  /* ---------- quiz / mcq ---------- */
  .q-text{font-size:17px;font-weight:900;line-height:1.5;margin:0 0 14px;}
  .opt-list{display:flex;flex-direction:column;gap:10px;}
  .opt{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-md);
    padding:14px 16px;font-size:15px;font-weight:800;text-align:left;cursor:pointer;color:var(--ink);
    transition:border-color .15s,background .15s,transform .1s;width:100%;}
  .opt:not(:disabled):hover{border-color:var(--border-hi);}
  .opt:not(:disabled):active{transform:scale(.98);}
  .opt.ok{border-color:var(--green);background:var(--green-soft);color:var(--green);}
  .opt.err{border-color:var(--red);background:var(--red-soft);color:var(--red);animation:shake .4s ease;}
  .opt:disabled{cursor:default;}
  .feedback{margin-top:12px;padding:12px 14px;border-radius:var(--radius-md);font-weight:900;font-size:14px;
    display:none;animation:fadeIn .3s ease;}
  .feedback.show{display:block;}
  .feedback.good{background:var(--green-soft);color:var(--green);border:1px solid rgba(88,204,2,.4);}
  .feedback.bad{background:var(--red-soft);color:var(--red);border:1px solid rgba(255,75,75,.4);}

  /* ---------- audio player ---------- */
  .player{display:flex;flex-direction:column;gap:14px;align-items:center;padding:22px 18px;}
  .player .art{width:86px;height:86px;border-radius:26px;display:flex;align-items:center;justify-content:center;
    font-size:42px;background:var(--blue-soft);border:2px solid rgba(28,176,246,.4);}
  .player .controls{display:flex;gap:14px;align-items:center;}
  .play-big{width:64px;height:64px;border-radius:50%;border:none;background:var(--blue);color:#fff;
    font-size:24px;cursor:pointer;box-shadow:0 5px 0 var(--blue-dark);display:flex;align-items:center;
    justify-content:center;transition:filter .15s,transform .05s;}
  .play-big:active{transform:translateY(3px);box-shadow:0 2px 0 var(--blue-dark);}
  .transcript{font-size:14.5px;line-height:1.8;color:var(--ink-light);background:var(--bg2);
    border:1px dashed var(--border);border-radius:var(--radius-md);padding:14px;display:none;}
  .transcript.show{display:block;animation:fadeIn .3s ease;}
  .transcript b{color:var(--ink);}

  /* ---------- premium: video gate (modal) ---------- */
  .video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius-md);
    overflow:hidden;background:#000;margin:4px 0 4px;}
  .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .video-unlock-row{display:flex;gap:8px;margin-top:16px;align-items:center;}
  .video-unlock-row .type-input{flex:1;width:auto;margin-bottom:0;}

  /* ---------- reading ---------- */
  .passage{font-size:16px;line-height:1.9;background:var(--card);border:2px solid var(--border);
    border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-card);}
  .passage b{color:var(--blue);}

  /* ---------- chips: builder / blanks / ordering ---------- */
  .answer-row{min-height:56px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    background:var(--bg2);border:2px dashed var(--border);border-radius:var(--radius-md);
    padding:10px;margin-bottom:14px;}
  .answer-row.ok{border-color:var(--green);border-style:solid;}
  .answer-row.err{border-color:var(--red);animation:shake .4s ease;}
  .chip-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
  .chip{background:var(--card);border:2px solid var(--border);border-bottom-width:4px;
    border-radius:12px;padding:9px 14px;font-weight:900;font-size:15px;color:var(--ink);cursor:pointer;
    transition:transform .1s,border-color .15s;user-select:none;}
  .chip:hover{border-color:var(--border-hi);}
  .chip:active{transform:scale(.94);}
  .chip.in-answer{border-color:rgba(28,176,246,.5);background:var(--blue-soft);color:var(--blue);}
  .chip.ghosted{opacity:.25;pointer-events:none;}
  .blank-sentence{font-size:17px;font-weight:800;line-height:2.3;}
  .blank-slot{display:inline-block;min-width:86px;border-bottom:3px solid var(--border-hi);text-align:center;
    padding:2px 8px;margin:0 3px;cursor:pointer;border-radius:8px 8px 0 0;transition:background .15s;}
  .blank-slot.filled{background:var(--blue-soft);color:var(--blue);border-bottom-color:var(--blue);}
  .blank-slot.ok{background:var(--green-soft);color:var(--green);border-bottom-color:var(--green);}
  .blank-slot.err{background:var(--red-soft);color:var(--red);border-bottom-color:var(--red);animation:shake .4s;}

  /* ---------- speaking ---------- */
  .speak-card{display:flex;flex-direction:column;gap:12px;}
  .speak-prompt{font-size:18px;font-weight:900;}
  .speak-helpers{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-light);
    background:var(--bg2);border-radius:var(--radius-md);padding:12px 14px;border:1px dashed var(--border);}
  .speak-helpers b{color:var(--blue);}
  .rec-zone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 4px;}
  .rec-btn{width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;font-size:32px;color:#fff;
    background:var(--red);box-shadow:0 5px 0 var(--red-dark),0 0 0 0 rgba(255,75,75,.4);
    display:flex;align-items:center;justify-content:center;transition:transform .1s;}
  .rec-btn:active{transform:scale(.94);}
  .rec-btn.recording{animation:recPulse 1.4s ease infinite;}
  @keyframes recPulse{0%{box-shadow:0 5px 0 var(--red-dark),0 0 0 0 rgba(255,75,75,.45)}
    70%{box-shadow:0 5px 0 var(--red-dark),0 0 0 22px rgba(255,75,75,0)}
    100%{box-shadow:0 5px 0 var(--red-dark),0 0 0 0 rgba(255,75,75,0)}}
  .rec-status{font-size:13px;font-weight:900;color:var(--ink-light);min-height:18px;}
  .self-eval{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
  .eval-btn{flex:1;min-width:92px;background:var(--card);border:2px solid var(--border);
    border-radius:var(--radius-md);padding:10px 8px;cursor:pointer;color:var(--ink);
    display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:900;font-size:12px;
    transition:border-color .15s,background .15s,transform .1s;}
  .eval-btn:active{transform:scale(.95);}
  .eval-btn.sel{border-color:var(--green);background:var(--green-soft);color:var(--green);}
  .eval-btn .fe{font-size:24px;}

  /* ---------- typing ---------- */
  .type-input{width:100%;background:var(--bg2);border:2px solid var(--border);border-radius:var(--radius-md);
    color:var(--ink);font-family:var(--font);font-weight:900;font-size:18px;padding:14px 16px;
    text-align:center;outline:none;transition:border-color .15s;}
  .type-input:focus{border-color:var(--blue);}
  .type-input.ok{border-color:var(--green);background:var(--green-soft);}
  .type-input.err{border-color:var(--red);animation:shake .4s ease;}

  /* ---------- speed round ---------- */
  .speed-timer{font-size:38px;font-weight:900;text-align:center;color:var(--yellow);
    font-variant-numeric:tabular-nums;}
  .speed-timer.low{color:var(--red);animation:pulse .6s ease infinite;}
  .speed-word{font-size:30px;font-weight:900;text-align:center;margin:10px 0 18px;}
  .speed-score{text-align:center;font-weight:900;color:var(--green);font-size:15px;margin-bottom:6px;}
  /* ---------- xp float / toast ---------- */
  .xp-float{position:fixed;z-index:120;font-weight:900;font-size:22px;color:var(--yellow);
    pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.6);animation:xpFloat 1.2s ease forwards;}
  @keyframes xpFloat{0%{opacity:0;transform:translateY(10px) scale(.7)}
    20%{opacity:1;transform:translateY(0) scale(1.15)}
    100%{opacity:0;transform:translateY(-60px) scale(1)}}

  /* ---------- achievement popup ---------- */
  .achieve{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-30px);opacity:0;
    z-index:210;display:flex;align-items:center;gap:12px;background:var(--card-hi);
    border:2px solid var(--yellow);border-radius:var(--radius-md);padding:12px 18px;
    box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;
    pointer-events:none;max-width:88vw;}
  .achieve.show{transform:translateX(-50%) translateY(0);opacity:1;}
  .achieve .a-emoji{font-size:30px;}
  .achieve .a-title{font-weight:900;font-size:14px;color:var(--yellow);}
  .achieve .a-sub{font-size:12px;color:var(--ink-light);font-weight:700;}

  /* ---------- modal ---------- */
  .modal-veil{position:fixed;inset:0;z-index:150;background:rgba(5,8,18,.75);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;padding:22px;}
  .modal-veil.show{display:flex;animation:fadeIn .3s ease;}
  .modal{background:var(--card);border:2px solid var(--border-hi);border-radius:26px;padding:30px 24px;
    max-width:380px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);
    animation:modalPop .45s cubic-bezier(.34,1.56,.64,1);}
  @keyframes modalPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
  .modal .m-emoji{font-size:58px;}
  .modal h2{font-size:24px;margin:10px 0 6px;font-weight:900;}
  .modal p{color:var(--ink-light);font-size:14.5px;margin:0 0 18px;line-height:1.6;}
  .modal .stats-row{display:flex;gap:10px;justify-content:center;margin-bottom:20px;}
  .stat-box{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:12px 8px;}
  .stat-box .v{font-size:22px;font-weight:900;color:var(--yellow);}
  .stat-box .l{font-size:11px;font-weight:800;color:var(--ink-light);text-transform:uppercase;
    letter-spacing:.8px;margin-top:2px;}

  /* ---------- habit engine: warm-up screen + weekly-ceremony ribbon ---------- */
  .warmup-card{width:100%;max-width:320px;margin:6px auto 0;padding:32px 20px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
    transition:transform .1s;}
  .warmup-card:active{transform:scale(.97);}
  .warmup-tr{font-size:20px;font-weight:900;color:var(--blue);transition:opacity .25s ease;}
  .week-ribbon{display:inline-block;font-size:12px;font-weight:900;letter-spacing:1px;
    color:var(--yellow);background:var(--yellow-soft);border:1px solid rgba(255,200,0,.4);
    border-radius:99px;padding:5px 14px;margin-bottom:10px;}

  #confetti-canvas{position:fixed;inset:0;z-index:200;pointer-events:none;}

  @media (max-width:380px){
    .vocab-grid{grid-template-columns:repeat(2,1fr);}
    .memory-grid{grid-template-columns:repeat(4,1fr);gap:7px;}
    .flash-stage{height:270px;}
  }