@font-face{font-family:'Baloo 2';font-weight:700;src:url(/assets/fonts/baloo700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Baloo 2';font-weight:800;src:url(/assets/fonts/baloo800.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Fredoka';font-weight:600;src:url(/assets/fonts/fredoka600.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nunito';font-weight:400;src:url(/assets/fonts/nunito400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nunito';font-weight:700;src:url(/assets/fonts/nunito700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nunito';font-weight:800;src:url(/assets/fonts/nunito800.woff2) format('woff2');font-display:swap}
/* Latin-extended companions (Sept 2026): ă ș ț Ă Ș Ț and the rest of Google's latin-ext range (Baloo also ← →). The files above are the
   basic Latin subset only, so Romanian letters were drawn in a fallback system font. Declared AFTER the basic faces so, for
   these code points, the browser picks them first; it only downloads one (~15KB) when a page actually uses such a letter. */
@font-face{font-family:'Baloo 2';font-weight:700;src:url(/assets/fonts/baloo700-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF, U+2190, U+2192}
@font-face{font-family:'Baloo 2';font-weight:800;src:url(/assets/fonts/baloo800-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF, U+2190, U+2192}
@font-face{font-family:'Nunito';font-weight:400;src:url(/assets/fonts/nunito400-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-weight:700;src:url(/assets/fonts/nunito700-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-weight:800;src:url(/assets/fonts/nunito800-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --paper:#FFF8EE; --ink:#16304B; --soft:#5B6B7F;
  --pink:#FF5C8A; --yellow:#FFC23C; --green:#22B792; --blue:#1D6FE0;
  --purple:#8B6DF0; --orange:#EFA340; --red:#D64533; --cyan:#16B6CE; --amber:#F2A93B;
  --accent:#1D6FE0;
  /* ---- New design-system tokens (2026 mobile redesign), additive — see handoff spec.
     Old vars above (--ink/--green/--blue/--red/--orange/--soft) were RE-VALUED to the
     new spec's hex codes on purpose (approved to apply app-wide, mobile + desktop).
     The tokens below are NEW names for concepts the old system never distinguished
     (ground vs surface, tinted vs solid, locked vs disabled) — used by the new
     My Path / lesson / Companies mobile components so nothing pre-existing has to
     guess which of two meanings an old var name carries. */
  --ground:#FDF3E7; --surface:#FFFFFF; --track:#F1EDE6;
  --ink-soft:#5B6B7F;
  --teal:#22B792; --teal-text:#17A67F; --teal-tint:#E7F7F1;
  --blue-tint:#EEF5FF;
  --orange-tint:#FFF6E7; --orange-text:#C9821F; --avatar-tint:#FFF3E0;
  --red-tint:#FFE9E4;
  --locked-fill:#F3EFE8; --locked-surface:#F7F2EA; --locked-border:#B9B4AC;
  --locked-ink:#5F5C56; --locked-title:#4F4C47; --disabled-ink:#6E6B66;
  --dots-future:#C9C6C2; --seg-empty:#DFDAD2;
  --dimmed-surface:#FBF7F1; --dimmed-border:#C9C6C2;
  --rule:rgba(22,48,75,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Nunito',sans-serif;color:var(--ink);background:var(--paper);font-size:16px;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.b{font-family:'Baloo 2',sans-serif}
button{font-family:'Baloo 2',sans-serif;cursor:pointer}
.hidden{display:none!important}

/* buttons */
.btn{border:3px solid var(--ink);background:var(--blue);color:#fff;font-weight:800;
  font-size:16px;padding:11px 18px;border-radius:14px;box-shadow:0 4px 0 #2430492e;transition:transform .05s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #2430492e}
.btn.green{background:var(--green)} .btn.pink{background:var(--pink)}
.btn.red{background:var(--red)} .btn.ghost{background:#fff;color:var(--ink)}
.btn.sm{font-size:14px;padding:8px 13px;border-radius:11px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- AUTH ---------- */
.auth-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:380px;background:#fff;border:4px solid var(--ink);
  border-radius:26px;box-shadow:0 10px 0 #2430491f;padding:26px 24px;text-align:center}
.lang-picker{display:flex;justify-content:center;gap:6px;margin-bottom:10px}
.lang-btn{border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:800;
  font-size:12px;padding:4px 10px;border-radius:10px;cursor:pointer;font-family:'Baloo 2',sans-serif}
.lang-btn.on{background:var(--blue);color:#fff}
/* QA-C2 fix: renamed from .badge - that name collided with the unrelated
   .badge rule further down (achievement tiles / quiz-letter options),
   whose gray/low-opacity styling was winning here by cascade order and
   making this pill unreadable (white text on near-white). */
.badge-pill{display:inline-block;font-family:'Fredoka';font-weight:700;letter-spacing:.16em;
  color:#fff;background:var(--pink);padding:6px 14px;border-radius:20px;font-size:12px;
  box-shadow:0 4px 0 #d83f6c}
.auth-card h1{font-size:34px;margin:14px 0 2px;font-weight:800}
.auth-card h1 .pop{color:var(--blue)}
.auth-card .sub{color:var(--soft);font-weight:700;font-size:14px;margin-bottom:18px}
.field{text-align:left;margin-bottom:12px}
.field label{font-family:'Baloo 2';font-weight:700;font-size:14px;display:block;margin-bottom:5px}
.field input{width:100%;border:3px solid var(--ink);border-radius:12px;padding:11px 13px;
  font-family:'Nunito';font-weight:700;font-size:16px;color:var(--ink);background:#fff}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,111,224,.35)}
.field select{width:100%;border:3px solid var(--ink);border-radius:12px;padding:11px 13px;
  font-family:'Nunito';font-weight:700;font-size:16px;color:var(--ink);background:#fff}
.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,111,224,.35)}
.hint-line a{color:var(--blue);text-decoration:underline}
/* FIX (L2, UI audit): see the matching HTML comments in app.html
   (.auth-legal-footer / .consent-label) - both give their inline <a> links
   a real padded box instead of just the font's own line-height, without
   turning them into oversized standalone buttons. */
.auth-legal-footer a{display:inline-block;padding:6px 3px}
.consent-label a{display:inline-block;padding:3px 1px}
.or-line{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--soft);
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.or-line::before,.or-line::after{content:"";flex:1;height:2px;background:#24304920}
.role-toggle{display:flex;gap:8px}
.role-toggle button{flex:1;border:3px solid var(--ink);background:#fff;color:var(--soft);
  border-radius:12px;padding:9px;font-size:14px;font-weight:800;font-family:'Baloo 2'}
.role-toggle button.on{background:var(--ink);color:#fff}

/* ---------- TEACHER DASHBOARD ---------- */
#teacherApp{display:flex;flex-direction:column;min-height:100%}
.t-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  border-bottom:3px solid var(--ink);background:#fff;flex-wrap:wrap;row-gap:10px}
/* FIX (2026-09-13, QA-I18N-001): the action-button group used to be an
   unstyled inline flex div with no wrap, so on narrow screens (and longer
   ES/RO button labels especially) it overflowed the topbar horizontally,
   clipping the Log out button off-screen. flex-wrap lets the whole group
   drop to its own row under the brand instead of forcing single-button
   line breaks or horizontal scroll. Same fix applied to the Admin panel's
   identical topbar structure below. */
.t-topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:8px}
.t-teachername{font-weight:800;color:var(--soft);font-size:14px}
.t-wrap{max-width:900px;width:100%;margin:0 auto;padding:24px}
.t-sectionlabel{font-family:'Baloo 2';font-weight:800;font-size:13px;letter-spacing:.04em;
  color:var(--soft);margin-bottom:10px}
.t-classgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
/* Design pass (2026-09-11): every rule below now reuses the exact same
   tokens/patterns already established for Portfolio/Deposits
   (four-tabs-redesign.css's .dep-card/.dep-openbtn/.dep-tile-opt/
   .dep-detailbtn/.dep-outcome/.dep-term-row/.dep-detail-pill) - no new
   colors, radii, or shadow values were introduced. See the paired comment
   at each rule for exactly which existing pattern it mirrors. */
.t-classcard{background:var(--surface);border:3px solid var(--ink);border-radius:14px;padding:14px;
  text-align:left;cursor:pointer;font-family:'Nunito';box-shadow:0 5px 0 rgba(22,48,75,.15)} /* == .dep-card */
.t-classcard.on{background:var(--ink);box-shadow:0 4px 0 rgba(22,48,75,.3)} /* == .dep-tile-opt.sel */
.t-classcard.on .cname,.t-classcard.on .ccount{color:var(--paper)}
.t-classcard.on .ccode{background:var(--surface)}
.t-classcard .cname{font-family:'Baloo 2';font-weight:800;font-size:15px;color:var(--ink);margin-bottom:6px}
.t-classcard .ccode{display:inline-block;font-family:'Baloo 2';font-weight:800;font-size:12px;
  letter-spacing:.05em;background:var(--blue-tint);color:var(--ink);padding:3px 9px;border-radius:8px;margin-bottom:8px}
.t-classcard .ccount{font-size:13px;color:var(--soft);font-weight:700}
.t-classcard.new{border-style:dashed;box-shadow:none;display:flex;align-items:center;justify-content:center;
  color:var(--soft);font-family:'Baloo 2';font-weight:700;background:transparent}
.t-newclassform{display:flex;gap:8px;margin-bottom:20px}
.t-newclassform input{flex:1;border:3px solid var(--ink);border-radius:12px;padding:9px 12px;
  font-family:'Nunito';font-weight:700;font-size:15px}
.t-panel{background:var(--surface);border:3px solid var(--ink);border-radius:18px;padding:18px 20px;
  box-shadow:0 5px 0 rgba(22,48,75,.15)} /* == .dep-card */
.t-panelhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-bottom:16px}
.t-panelname{font-family:'Baloo 2';font-weight:800;font-size:18px;color:var(--ink)}
.t-codeline{font-size:12px;color:var(--soft);font-weight:700;margin-top:4px}
.t-codeline b{font-family:'Baloo 2';letter-spacing:.05em;color:var(--ink)}
.t-copybtn{border:none;background:transparent;cursor:pointer;font-size:13px;margin-left:2px}
.t-enrollbox{background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:14px 16px;
  margin-bottom:18px} /* border added, same shape as .dep-outcome */
.t-enrolltitle{font-family:'Baloo 2';font-weight:800;font-size:13px;color:var(--ink);margin-bottom:8px}
.t-enrollbox textarea{width:100%;border:3px solid var(--ink);border-radius:10px;padding:8px 10px;
  font-family:'Nunito';font-size:14px;color:var(--ink);background:var(--surface);resize:vertical}
.t-enrollrow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.t-enrollrow select{flex:1;min-width:130px;border:3px solid var(--ink);border-radius:10px;padding:8px 10px;
  font-family:'Nunito';font-weight:700;font-size:14px;background:var(--surface)}
#teacherApp .btn.green{border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)} /* == .dep-openbtn, scoped to this screen only - .btn.green is shared with login/settings/dev-tools elsewhere and must not change there */
#teacherApp .btn.dark{background:var(--ink);color:#fff;border:3px solid var(--ink)}
.t-enrollresult{margin-top:12px;font-size:13px}
.t-newaccount{display:flex;justify-content:space-between;padding:5px 0;border-bottom:2px solid rgba(22,48,75,.12)} /* == .dep-term-row divider weight */
.t-newaccount b{font-family:'Baloo 2'}
.t-skip{color:var(--red);font-weight:700;font-size:12.5px;margin-top:6px}
.t-viewtoggle{display:flex;gap:8px;margin-bottom:16px} /* == .dep-term-tiles layout */
.t-viewtoggle button{flex:1;height:40px;border:2.5px solid var(--ink);border-radius:14px;background:var(--surface);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--ink);cursor:pointer} /* == .dep-tile-opt */
.t-viewtoggle button.on{background:var(--ink);color:var(--paper);box-shadow:0 4px 0 rgba(22,48,75,.3)} /* == .dep-tile-opt.sel */
/* QA-105 fix: the table itself has no max-width and none of its ancestors
   (#tStudentsWrap, .t-panel, .t-wrap) scrolled - on a narrow phone the row
   of per-student action buttons forced the whole page to overflow
   horizontally. Scoping the scroll to the wrap keeps the rest of the
   teacher panel (header, enroll box) from scrolling along with it. */
#tStudentsWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t-table{width:100%;border-collapse:collapse;font-size:13.5px}
.t-table th{text-align:left;color:var(--soft);font-family:'Baloo 2';font-weight:800;font-size:11px;
  letter-spacing:.04em;padding:6px 4px}
.t-table td{padding:9px 4px;border-top:2px solid rgba(22,48,75,.12);color:var(--ink)} /* == .dep-term-row divider weight */
.t-table td.name{font-weight:800}
.t-actionrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} /* fix (2026-09-11): the 4
  action buttons used to sit in a single white-space:nowrap cell, which
  worked in English/Romanian but pushed the row past the card's right edge
  in Spanish, where "Restablecer contraseña"/"Solicitar eliminación" are
  meaningfully longer. Wrapping onto a second line, instead of forcing one
  line no matter what, is the fix - same buttons, same text, just allowed
  to flow. */
.t-resetbtn{border:2.5px solid var(--ink);background:var(--surface);border-radius:12px;padding:5px 10px;
  font-size:12px;font-family:'Baloo 2';font-weight:800;color:var(--ink);cursor:pointer} /* == .dep-detailbtn shape */
.t-newpass{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:'Baloo 2';
  font-weight:800;color:var(--teal-text);background:var(--teal-tint);padding:4px 9px;border-radius:8px}
.t-empty{text-align:center;padding:40px 20px;color:var(--soft);font-weight:700}
/* FIX (M11, UI audit, confirmed live at 390px): the QA-105 fix above (sideways
   scroll on #tStudentsWrap) kept the page itself from overflowing, but a
   7-column table plus a 4-button action cell still doesn't fit a phone -
   XP (the last data column) was only ever visible after scrolling the whole
   table sideways, and the action buttons, with no room to sit side by side,
   wrapped one per line, making every row very tall. Below 600px this turns
   each row into a labeled card instead: headers hidden, each td full-width
   with its own label (from data-label, since the <th> that would normally
   supply it is now hidden) except the name (already its own bold line) and
   the actions cell (the buttons carry their own text). No sideways scrolling
   needed, and every field is visible without it. */
@media(max-width:600px){
  #tStudentsWrap{overflow-x:visible}
  .t-table thead{display:none}
  .t-table, .t-table tbody, .t-table tr, .t-table td{display:block;width:auto}
  .t-table tr{border:3px solid var(--ink);border-radius:14px;margin-bottom:10px;
    padding:12px 14px;box-shadow:0 4px 0 rgba(22,48,75,.15)}
  .t-table td{border-top:none;padding:5px 0;display:flex;justify-content:space-between;
    align-items:center;gap:10px;font-size:14.5px}
  .t-table td[data-label]::before{content:attr(data-label);font-family:'Baloo 2';font-weight:800;
    font-size:11px;letter-spacing:.04em;color:var(--soft);text-transform:uppercase;flex:none}
  .t-table td.name{font-size:16.5px;padding-bottom:8px;margin-bottom:4px;
    border-bottom:2px solid rgba(22,48,75,.12)}
  .t-actionrow{justify-content:flex-start;padding-top:4px}
}
.tabs-mini{display:flex;gap:8px;margin-bottom:16px}
.tabs-mini button{flex:1;border:3px solid var(--ink);background:#fff;color:var(--soft);
  border-radius:12px;padding:8px;font-size:14px;font-weight:800}
.tabs-mini button.on{background:var(--ink);color:#fff}
.err{color:var(--red);font-weight:800;font-size:13px;min-height:18px;margin:4px 0 10px}
.hint-line{color:var(--soft);font-weight:700;font-size:15.5px;margin-top:12px;line-height:1.45}

/* ---------- APP SHELL ---------- */
#app{display:flex;flex-direction:column;min-height:100%}
.stickyhead{position:sticky;top:0;z-index:30;background:var(--paper)}
.topbar{background:#fff;border-bottom:4px solid var(--ink);
  padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-family:'Baloo 2';font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap}
.brand .pop{color:var(--blue)}
.stat-pills{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;align-items:center}
.curswitch{display:flex;gap:3px;align-items:center;background:var(--paper);border:3px solid var(--ink);
  border-radius:12px;padding:3px 4px}
.curlabel{font-family:'Baloo 2';font-weight:800;font-size:9px;letter-spacing:.08em;color:var(--soft);padding:0 4px}
.curswitch button{border:none;background:transparent;color:var(--soft);font-family:'Baloo 2';font-weight:800;
  font-size:12px;padding:5px 9px;border-radius:9px}
.curswitch button.on{background:var(--ink);color:#fff}
.px-eur{font-family:'Nunito';font-weight:800;font-size:13px;color:var(--soft)}
.subtotal{margin-top:8px;text-align:right;font-weight:800;font-size:15px;color:var(--ink)}
.retpill{display:inline-block;font-family:'Baloo 2';font-weight:800;font-size:12px;border-radius:8px;
  padding:2px 8px;border:2px solid currentColor}
.retpill.up{color:#17a06f;background:#e8faf2}
.retpill.down{color:var(--red);background:#ffecec}
.fxnote{background:#EAF1FF;border:3px solid var(--ink);border-radius:18px;padding:14px 18px;margin-bottom:16px;
  font-weight:700;font-size:14px;color:#33405c;line-height:1.45;box-shadow:0 6px 0 #2430491a}
.fxnote-head{font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--blue);margin-bottom:4px}
.fxnote b{color:var(--ink)}
.pill{border:3px solid var(--ink);border-radius:12px;padding:5px 11px;background:var(--paper);
  font-weight:800;font-size:13px;line-height:1.1;text-align:center}
.pill small{display:block;font-size:9px;letter-spacing:.08em;color:var(--soft);font-weight:800}
.pill.value{background:#EAF1FF;cursor:pointer}.pill.cash{background:#E9FBF4}
.pill .up{color:#17a06f}.pill .down{color:var(--red)}
.who{font-weight:800;font-size:14px}
.tabbar{display:flex;gap:8px;padding:12px 16px 0;flex-wrap:wrap;margin-bottom:-4px}
.tabbar button{border:3px solid var(--ink);background:#fff;color:var(--soft);border-radius:12px 12px 0 0;
  padding:10px 18px;font-size:17px;font-weight:800;border-bottom:none}
.tabbar button.on{background:var(--ink);color:#fff}
.subtabbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px 2px}
.subtabbar button{border:3px solid var(--ink);background:#fff;color:var(--soft);border-radius:999px;padding:8px 16px;font-size:15.5px;font-weight:800;cursor:pointer}
.subtabbar button.on{background:var(--ink);color:#fff}
.banner{margin:12px 16px 0;background:var(--yellow);border:3px solid var(--ink);border-radius:14px;
  padding:10px 14px;font-weight:800;font-size:14.5px;color:#5a4300}
.view{padding:16px;max-width:760px;margin:0 auto;width:100%}

/* ---------- CARDS LAYOUT + QUICK-JUMP PANEL ---------- */
#viewCards{max-width:none;padding-left:20px;padding-right:26px}
.cards-layout{display:flex;gap:20px;align-items:flex-start;width:100%}
.card-col{flex:1;min-width:0;max-width:1500px}
.company-panel{flex:0 0 244px;position:sticky;top:var(--sticky-h,150px);display:flex;flex-direction:column;gap:8px;
  max-height:calc(100vh - 164px);overflow:auto;padding:2px}
.cpanel-head{font-family:'Baloo 2';font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--soft);
  padding:0 4px 2px}
.cpanel-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:3px solid var(--ink);border-left:7px solid var(--c);border-radius:14px;background:#fff;
  padding:8px 10px;box-shadow:0 3px 0 #2430491a;transition:transform .05s}
.cpanel-item:active{transform:translateY(1px)}
.cpanel-item.on{background:color-mix(in srgb,var(--c) 15%,#fff);box-shadow:0 3px 0 var(--c)}
.ci-icon{flex:0 0 36px;width:36px;height:36px;border-radius:10px;border:2px solid var(--c);
  background:color-mix(in srgb,var(--c) 16%,#fff);display:flex;align-items:center;justify-content:center}
.ci-icon svg{width:28px;height:28px}
.ci-text{display:flex;flex-direction:column;min-width:0}
.ci-name{font-family:'Baloo 2';font-weight:800;font-size:16px;line-height:1.08;color:var(--ink)}
.ci-meta{font-weight:800;font-size:13px;color:var(--soft)}
.ci-own{margin-left:auto;color:#17a06f;font-size:13px}
.cardnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cardnav-count{font-family:'Baloo 2';font-weight:800;color:var(--soft);font-size:15px}
@media(max-width:720px){
  .cards-layout{flex-direction:column}
  .company-panel{position:static;flex:0 0 auto;flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:visible;
    width:100%;max-height:none;gap:8px;padding-bottom:4px;flex-wrap:nowrap}
  .cpanel-head{display:none}
  .cpanel-item{flex:0 0 150px;width:auto;min-width:0;padding:6px 9px;gap:8px;border-left-width:6px}
  .ci-icon{flex:0 0 30px;width:30px;height:30px;border-radius:8px}
  .ci-icon svg{width:22px;height:22px}
  .ci-name{font-size:12.5px}
  .ci-meta{font-size:10px}
}
/* Fix: below ~1050px (but above the 720px mobile breakpoint), .tabbar/.subtabbar used to
   wrap onto a 2nd row, growing taller than the sticky sidebar's fixed top:150px offset —
   causing the sidebar to visually overlap the now-taller tab bar. Scrolling horizontally
   instead of wrapping keeps the header height constant, so the sticky offset stays valid. */
@media(min-width:721px){
  .tabbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
  .subtabbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
  .tabbar button,.subtabbar button{flex:0 0 auto}
}
.card{background:#fff;border:4px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 8px 0 #2430491f}
.card-band{background:var(--accent);padding:12px 20px;display:flex;justify-content:space-between;align-items:center}
.card-tag{color:#fff;font-weight:800;letter-spacing:.08em;font-size:17px;text-shadow:0 2px 0 #00000022}
.flag svg{width:42px;height:28px;border-radius:5px;border:2px solid #fff;display:block}
.card-top{display:flex;gap:18px;padding:18px 20px 6px;align-items:center}
.icon-wrap{flex:0 0 110px;height:110px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 16%,#fff)}
.icon-wrap svg{width:88px;height:88px}
.card-name{font-size:30px;line-height:1}
.card-where{font-family:'Fredoka';font-weight:600;color:var(--accent);font-size:15px;margin:2px 0 7px}
.card-do{font-weight:700;font-size:15.5px;color:#33405c;line-height:1.42}
.card-fact{margin:14px 20px 0;background:color-mix(in srgb,var(--accent) 13%,#fff);
  border:2px solid color-mix(in srgb,var(--accent) 32%,#fff);
  border-radius:13px;padding:11px 14px;font-weight:700;font-size:15px;color:#33405c}
.card-fact b{color:var(--accent)}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 20px 0;background:#F4F7FF;border:3px solid var(--ink);border-radius:14px;padding:10px 14px}
.price-big{font-family:'Baloo 2';font-weight:800;font-size:26px}
.price-big small{font-size:14.5px;color:var(--soft);font-weight:800}
.owned-tag{font-weight:800;font-size:13px;color:#17a06f}

/* money numbers fill-in */
.mn{margin:12px 20px 18px;background:#F4F7FF;border:3px solid var(--ink);border-radius:16px;padding:13px 14px}
.mn-title{font-family:'Baloo 2';font-weight:800;font-size:18px;margin-bottom:9px}
.mn-title span{color:var(--blue)}
.stats{display:flex;gap:10px}
.stat{flex:1;background:#fff;border:2px solid #DFE5F2;border-radius:12px;padding:9px 10px}
.stat-name{font-family:'Baloo 2';font-weight:800;font-size:15.5px}
.stat-sub{font-weight:700;font-size:16px;color:#7986a0;margin:1px 0 8px;line-height:1.4}
.stat input{width:100%;border:2px dashed #B9C3DA;border-radius:8px;padding:6px;text-align:center;
  font-family:'Nunito';font-weight:800;font-size:14px;color:var(--ink)}
.stat input:focus{outline:none;border-color:var(--accent);border-style:solid;box-shadow:0 0 0 3px rgba(29,111,224,.35)}
.stat-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.learn-link{font-size:10.5px;font-weight:800;color:#3E7BFA;background:#EAF1FF;border:1.5px solid #3E7BFA;
  border-radius:20px;padding:2px 7px;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.reveal-btn{margin-top:8px;width:100%;background:#fff;border:2px solid var(--ink);border-radius:8px;
  padding:6px;font-weight:800;font-size:11.5px;color:var(--ink);cursor:pointer;font-family:'Nunito'}
.reveal-out{font-size:12px;font-weight:700;color:#243049;margin-top:6px;min-height:14px;line-height:1.35}
.mn-nudge{background:#FFF3D6;border:2px solid #E0A300;border-radius:12px;padding:9px 12px;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700;color:#8a5a00;font-size:13px}
.mn-nudge button{background:#E0A300;color:#fff;border:none;border-radius:8px;padding:5px 11px;font-weight:900;
  font-size:12px;cursor:pointer;font-family:'Nunito'}
.mn-modal-overlay{position:fixed;inset:0;background:#00000066;display:flex;align-items:center;justify-content:center;
  z-index:500;padding:20px}
.mn-modal{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:20px;box-shadow:0 10px 0 #2430491a;
  max-width:520px;width:100%;max-height:88vh;overflow:auto}
.mn-modal-head{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:15px;margin-bottom:6px}
.mn-modal-close{cursor:pointer;font-weight:900;color:#7986a0;padding:2px 8px}
.bandrow{display:flex;align-items:center;gap:6px;margin-top:7px}
.dots3{display:flex;gap:4px}
.d{width:11px;height:11px;border-radius:50%;background:#dde3f0;border:2px solid #c6cee0}
.d.hot{background:var(--accent);border-color:var(--accent)}
.band-word{font-family:'Baloo 2';font-weight:800;font-size:11px;color:var(--accent)}
.hint{margin-top:11px;font-weight:700;font-size:15.5px;color:#5C6A82;line-height:1.45}
.hint b{color:var(--ink)}
.divi{display:inline-block;margin-top:9px;background:#FFE9A8;border:2px solid var(--ink);
  border-radius:9px;padding:4px 10px;font-weight:800;font-size:11.5px;color:#7a5a00}

/* trade box */
.trade{margin:0 20px 20px;border:3px solid var(--ink);border-radius:16px;padding:13px 14px;background:#fff}
.trade h3{font-size:16px;margin-bottom:9px}
.trade-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.trade-row .field{flex:1;min-width:120px;margin:0}
.est{font-weight:800;font-size:13.5px;color:var(--soft);margin-top:8px}
.est b{color:var(--ink)}
.msg{font-weight:800;font-size:13px;margin-top:8px;min-height:16px}
.msg.ok{color:#17a06f}.msg.bad{color:var(--red)}

/* ---------- PORTFOLIO / LEADERBOARD ---------- */
.panel{background:#fff;border:4px solid var(--ink);border-radius:20px;box-shadow:0 8px 0 #2430491f;
  padding:18px 18px;margin-bottom:16px}
.panel h2{font-size:24px;margin-bottom:4px}
.bigstats{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.bigstat{flex:1;min-width:120px;border:3px solid var(--ink);border-radius:14px;padding:12px;text-align:center}
.bigstat .n{font-family:'Baloo 2';font-weight:800;font-size:26px}
.bigstat small{font-size:11px;letter-spacing:.06em;color:var(--soft);font-weight:800}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th{font-family:'Baloo 2';text-align:left;font-size:14.5px;color:var(--soft);padding:0 10px}
td{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:10px;font-weight:700;font-size:15.5px}
td:first-child{border-left:2px solid var(--ink);border-radius:12px 0 0 12px}
td:last-child{border-right:2px solid var(--ink);border-radius:0 12px 12px 0}
.rowname{font-family:'Baloo 2';font-weight:800}
.medal{font-size:18px;margin-right:4px}
.me-row td{background:#EAF1FF}
tr.clickrow{cursor:pointer}
tr.clickrow:hover td{background:#EAF1FF}
.goarrow{color:var(--blue);font-weight:800;font-size:16px;margin-left:2px}
.up{color:#17a06f;font-weight:800}.down{color:var(--red);font-weight:800}
.empty{color:var(--soft);font-weight:700;text-align:center;padding:18px}
@media(max-width:520px){
  .card-top{flex-direction:column;text-align:center}
  .stats{flex-direction:column}
  .stat-sub{min-height:0}
  .card-fact,.anim-box,.cquiz,.cardchart-box,.price-row,.mn,.trade{margin-left:12px;margin-right:12px}
  .anim-title{font-size:15px}
  .anim-cap{font-size:15.5px}
  .card-do{font-size:14.5px}
}

/* ---------- MOBILE HEADER CLEANUP ---------- */
@media(max-width:720px){
  .topbar{padding:8px 12px;gap:8px}
  .brand{order:1;font-size:16px}
  .topbar > .btn{order:2;margin-left:auto;padding:6px 10px;font-size:13px}
  .stat-pills{order:3;width:100%;margin-left:0;gap:6px}
  .stat-pills .pill{order:1;flex:1;min-width:0;text-align:center;padding:5px 4px;font-size:12px}
  .stat-pills .pill small{font-size:8px}
  .curswitch{order:2;width:100%;justify-content:center;padding:3px}
  .curswitch button{padding:5px 9px}
  /* whole compact header stays stuck; tab bar is a single scrollable row */
  .tabbar{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 12px;border-bottom:3px solid var(--ink);margin-bottom:0}
  .tabbar button{flex:0 0 auto;padding:8px 12px;font-size:14px;border-radius:11px;border-bottom:3px solid var(--ink)}
  .view{padding:12px}
}

/* ---------- CHESS ARENA ---------- */
.chess-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.diffswitch{display:flex;gap:3px;align-items:center;background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:3px 4px}
.diffswitch button{border:none;background:transparent;color:var(--soft);font-family:'Baloo 2';font-weight:800;font-size:13px;padding:6px 12px;border-radius:9px;cursor:pointer}
.diffswitch button.on{background:var(--ink);color:#fff}
.chess-hud{font-weight:800;font-size:14px;color:var(--ink);background:#EAF1FF;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;margin-bottom:12px}
.chess-wrap{display:flex;justify-content:center}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(92vw,460px);aspect-ratio:1/1;
  border:4px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 8px 0 #2430491a}
.sq{position:relative;display:flex;align-items:center;justify-content:center;
  font-size:min(9vw,40px);line-height:1;cursor:pointer;user-select:none}
.sq.light{background:#F4E8D0}
.sq.dark{background:#C08A57}
.sq.last{box-shadow:inset 0 0 0 999px rgba(255,194,60,.38)}
.sq.sel{box-shadow:inset 0 0 0 4px var(--yellow)}
.sq.tgt .pc svg{outline:3px solid var(--green);outline-offset:-2px;border-radius:8px}
.sq .pc{width:90%;height:90%;display:flex;align-items:center;justify-content:center}
.sq .pc svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.sq .dot{position:absolute;width:24%;height:24%;border-radius:50%;background:rgba(31,184,154,.6)}
.chess-status{text-align:center;font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--ink);margin-top:14px;min-height:24px}
@media(max-width:720px){ .chess-hud{font-size:13px} }

/* ---------- LEADERBOARD SWITCH ---------- */
.boardswitch{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.boardswitch .bv{border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:'Baloo 2';font-weight:800;font-size:13px;padding:7px 12px;border-radius:11px;cursor:pointer}
.boardswitch .bv.on{background:var(--ink);color:#fff}

/* ---------- QUIZ ---------- */
.quiz-hud{font-weight:800;font-size:13.5px;color:var(--ink);background:#EAF1FF;border:3px solid var(--ink);
  border-radius:12px;padding:8px 12px;margin:10px 0 14px}
.quiz-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.qstage{border:3px solid var(--ink);border-radius:16px;background:var(--paper);padding:16px;text-align:center;
  box-shadow:0 6px 0 #2430491a}
.qstage h3{margin:6px 0 4px;font-family:'Baloo 2';color:var(--ink)}
.qstage p{font-size:13px;color:var(--soft);font-weight:600;margin:0 0 12px}
.qstage-emoji{font-size:42px;line-height:1}
.qstage.locked{opacity:.85;background:#f3f1ec}
.qlocknote{font-weight:800;font-size:13px;color:var(--soft);background:#fff;border:2px dashed var(--ink);
  border-radius:10px;padding:8px}
@media(max-width:720px){ .quiz-stages{grid-template-columns:1fr} }

.quiz-play{text-align:center}
.quiz-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--soft);font-size:13px}
/* FIX (2026-09-24): "Q 1/3" is now spelled out in RO/ES ("Întrebarea 1/3",
   "Pregunta 1/3" - mix.qlabel in i18n.js). Keep the counter and the Exit
   button on one line each; the stage title on the left is the part that wraps. */
.quiz-top{gap:10px}
.quiz-top>:first-child{min-width:0}
.quiz-top .quiz-count,.quiz-top .btn{white-space:nowrap;flex:none}
.quiz-stage-tag{color:var(--ink)}
.quiz-progress{height:10px;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;margin:8px 0 6px}
.quiz-progress span{display:block;height:100%;background:var(--green);transition:width .2s}
.quiz-art{font-size:64px;line-height:1;margin:14px 0 6px}
.quiz-q{font-family:'Baloo 2';font-weight:800;font-size:21px;color:var(--ink);margin:4px auto 16px;max-width:640px}
.quiz-opts{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:0 auto}
.qopt{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-family:'Nunito';font-weight:800;
  font-size:16px;padding:14px 16px;border-radius:14px;cursor:pointer;box-shadow:0 4px 0 #2430491a;transition:transform .05s}
.qopt:hover{background:#EAF1FF}
.qopt:active{transform:translateY(2px);box-shadow:0 2px 0 #2430491a}

.quiz-banner{font-family:'Baloo 2';font-weight:800;font-size:26px;text-align:center;border:3px solid var(--ink);
  border-radius:14px;padding:14px;margin:6px 0}
.quiz-banner.win{background:#E7FBF5;color:var(--green)}
.quiz-banner.lose{background:#FFF1F1;color:var(--red)}
.quiz-reward{text-align:center;font-weight:800;color:var(--ink);font-size:15px;margin:6px 0}
.quiz-reward.muted{color:var(--soft)}
.quiz-unlock{text-align:center;font-family:'Baloo 2';font-weight:800;color:var(--blue);font-size:18px;margin:6px 0}
.quiz-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.qreview-list{display:flex;flex-direction:column;gap:10px}
.qreview{border:3px solid var(--ink);border-radius:12px;padding:10px 12px;background:var(--paper)}
.qreview.ok{border-color:var(--green)}
.qreview.no{border-color:var(--red)}
.qr-head{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.qr-art{font-size:22px}
.qr-q{flex:1;font-size:14.5px}
.qr-mark{font-size:18px}
.qr-line{font-size:13.5px;color:var(--ink);margin-top:4px}
.qr-explain{font-size:13px;color:var(--soft);font-weight:600;margin-top:4px;font-style:italic}

/* ---------- AVATAR ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  position:relative;line-height:1;border:2px solid var(--ink);flex:none;overflow:hidden}
.avatar-acc{position:absolute;left:50%;top:5%;transform:translateX(-50%);line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));pointer-events:none}
.avatar-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;flex:none}
.avatar-btn:hover{transform:scale(1.06)}
.row-av{vertical-align:middle;margin-right:8px;display:inline-block}
.row-av .avatar{vertical-align:middle}

/* ---------- MODAL ---------- */
.modal-back{position:fixed;inset:0;background:rgba(36,48,73,.55);display:flex;align-items:center;
  justify-content:center;padding:16px;z-index:1000}
.modal{background:#fff;border:4px solid var(--ink);border-radius:20px;max-width:840px;width:100%;
  max-height:92vh;overflow:auto;padding:18px 20px;box-shadow:0 16px 0 #2430491a}
.modal h2{margin:.1em 0 .4em}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.av-preview{display:flex;justify-content:center;margin:6px 0 14px}
.av-group{margin:10px 0}
.av-label{font-weight:800;color:var(--soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{width:46px;height:46px;border:3px solid var(--ink);background:var(--paper);border-radius:12px;
  font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pick.on{outline:3px solid var(--yellow);outline-offset:2px}
.pick.swatch{font-size:0}

/* ---------- PRICE SPARKLINE + CHART ---------- */
.spark-box{margin:6px 0 4px;border:2px dashed #e4dccb;border-radius:12px;padding:8px 10px;background:#fffdf8}
.spark-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--soft);font-size:12px;margin-bottom:4px}
.spark-hint{font-weight:800}
.spark{height:64px;cursor:pointer}
.spark-svg{width:100%;height:64px;display:block}
.spark-empty{font-size:12px;color:var(--soft);font-weight:700}
.bigchart{border:3px solid var(--ink);border-radius:14px;background:#fffdf8;padding:8px;margin:6px 0}
.big-svg{width:100%;height:300px;display:block}
.chart-meta{font-weight:800;color:var(--ink);font-size:14px;margin:2px 0 6px}
.chart-x{display:flex;justify-content:space-between;color:var(--soft);font-weight:700;font-size:12px}
.ranges{display:flex;gap:6px;justify-content:center;margin-top:10px}
.rbtn{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-family:'Baloo 2';
  font-weight:800;font-size:13px;padding:6px 14px;border-radius:11px;cursor:pointer}
.rbtn.on{background:var(--ink);color:#fff}

/* ---------- IN-CARD AXED CHART (fixed height) ---------- */
.cardchart-box{margin:12px 20px 6px;border:2px dashed #e4dccb;border-radius:12px;padding:8px 10px 6px;background:#fffdf8}
.cardchart{min-height:90px}
.cc{display:flex;gap:6px}
.cc-yaxis{position:relative;width:34px;flex:none}
.cc-yaxis .yl{position:absolute;right:0;transform:translateY(-50%);font-size:11px;color:var(--soft);font-weight:700;white-space:nowrap}
.cc-main{position:relative;flex:1;min-width:0}
.cc-svg{width:100%;display:block;border-left:1px solid #cfc4ad;border-bottom:1px solid #cfc4ad}
.cc-dot{position:absolute;right:0;width:8px;height:8px;border-radius:50%;transform:translate(50%,-50%);box-shadow:0 0 0 2px #fffdf8}
.cc-xaxis{position:relative;height:16px;margin-top:3px}
.cc-xaxis .xl{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--soft);font-weight:700;white-space:nowrap}
.cc-xaxis .xl.first{transform:none;left:0!important}
.cc-xaxis .xl.last{transform:translateX(-100%)}

/* ---------- COMPANY "HOW THEY MAKE MONEY" ANIMATION ---------- */
.anim-box{margin:14px 20px 6px;border:2px solid var(--ink);border-radius:14px;background:#fff;padding:12px 16px;overflow:hidden}
.anim-title{font-family:'Baloo 2';font-weight:800;color:var(--ink);font-size:16.5px;margin-bottom:7px}
.anim-svg{width:100%;height:auto;display:block;max-height:230px}
.anim-cap{font-size:17px;color:var(--soft);font-weight:700;margin-top:9px;line-height:1.4}
@keyframes animDrive{0%{transform:translateX(-470px)}24%{transform:translateX(0)}78%{transform:translateX(0)}100%{transform:translateX(480px)}}
.anim-car{animation:animDrive 6s ease-in-out infinite}
@keyframes animSpin{to{transform:rotate(360deg)}}
.anim-wheel{animation:animSpin .7s linear infinite}
@keyframes animPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.3);opacity:1}}
.anim-bolt{animation:animPulse 1s ease-in-out infinite}
@keyframes animFill{0%{transform:scaleX(0)}40%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.anim-batt{animation:animFill 6s ease-in-out infinite}
@keyframes animCoin{0%{transform:translate(0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(-540px,-6px);opacity:0}}
.anim-coin{animation:animCoin 2.4s ease-in infinite}
@media (prefers-reduced-motion: reduce){.anim-car,.anim-wheel,.anim-bolt,.anim-batt,.anim-coin{animation:none}.anim-car{transform:translateX(0)}}

/* ---------- MONEY NUMBERS (interpret what you type) ---------- */
.bandrow{display:flex;align-items:center;gap:8px;margin-top:7px}
.stat-tip{font-size:10.5px;color:#7986a0;font-weight:700;line-height:1.3;margin-top:6px;min-height:1.2em}

/* ============ Per-company quizzes (Analyst seals) ============ */
.cquiz{margin:14px 20px 6px}
.cquiz:empty{display:none}
.cq-cta{border:3px solid var(--ink);border-radius:16px;background:color-mix(in srgb,var(--accent) 12%,#fff);padding:12px 14px}
.cq-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cq-h1{font-family:'Baloo 2';font-weight:800;font-size:17px;color:var(--ink)}
.cq-sub{font-weight:700;color:var(--soft);font-size:13px;margin:6px 0 10px;line-height:1.4}
.cq-sub b{color:var(--accent)}
.cq-pips{font-size:16px;color:var(--yellow);letter-spacing:2px;-webkit-text-stroke:.6px var(--ink)}
.cq-start{width:100%}
.cq-play{border:3px solid var(--ink);border-radius:16px;background:#fff;padding:12px 14px;max-width:680px;margin:0 auto}
.cq-refl .cq-opt{justify-content:center}
.cq-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--soft);font-size:13px}
.cq-tag{background:color-mix(in srgb,var(--accent) 16%,#fff);border:2px solid var(--accent);color:var(--accent);
  border-radius:999px;padding:2px 9px;font-size:11px;text-transform:capitalize}
.cq-prog{height:9px;border:2px solid var(--ink);border-radius:999px;background:#fff;margin:8px 0;overflow:hidden}
.cq-prog span{display:block;height:100%;background:var(--accent);transition:width .3s}
.cq-art{font-size:56px;text-align:center;margin:6px 0 2px}
.cq-q{font-family:'Baloo 2';font-weight:800;font-size:23px;color:var(--ink);text-align:center;margin:6px 0 14px;line-height:1.3}
.cq-opts{display:flex;flex-direction:column;gap:8px}
/* Variant C: full-width column — buttons stretch to fill, aligned edge to edge */
.cq-opts.fit{gap:11px}
.cq-opts.fit .cq-opt{max-width:min(540px,100%);
  display:flex;align-items:flex-start;gap:13px;justify-content:flex-start;text-align:left;line-height:1.3;overflow-wrap:anywhere}
.cq-opts.fit .cq-opt::before{content:attr(data-k);flex:0 0 30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:2.5px solid var(--ink);border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,#fff);font-size:15px;font-weight:900;color:var(--ink)}
.cq-opt{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:800;font-size:18px;
  border-radius:13px;padding:13px 18px;text-align:left;cursor:pointer;box-shadow:0 3px 0 #2430491f;transition:.08s}
.cq-opt:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 12%,#fff)}
.cq-opt:active{transform:translateY(2px);box-shadow:0 1px 0 #2430491f}
.cq-opt:disabled{cursor:default;opacity:.9}
.cq-opt.correct{background:color-mix(in srgb,var(--green) 22%,#fff);border-color:var(--green);color:#0a6e5c}
.cq-opt.wrong{background:color-mix(in srgb,var(--red) 18%,#fff);border-color:var(--red);color:#a32424}
.cq-ex{margin:10px 0 2px;font-weight:700;font-size:13px;border-radius:11px;padding:9px 11px;line-height:1.4}
.cq-ex.good{background:color-mix(in srgb,var(--green) 14%,#fff);color:#0a6e5c;border:2px solid var(--green)}
.cq-ex.bad{background:color-mix(in srgb,var(--red) 12%,#fff);color:#a32424;border:2px solid var(--red)}
.cq-center{text-align:center;margin-top:10px}
.cq-hidden{display:none}
.cq-refl{display:flex;gap:8px;margin-top:4px}
.cq-refl .cq-opt{flex:1;text-align:center}
.cq-why{width:100%;margin-top:9px;border:3px solid var(--ink);border-radius:12px;padding:10px 12px;
  font-family:'Nunito';font-weight:700;font-size:14px;box-sizing:border-box}
.cq-why:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,111,224,.35)}
.cq-end{border:3px solid var(--ink);border-radius:16px;background:#fff;padding:16px 14px;text-align:center}
.cq-banner{font-family:'Baloo 2';font-weight:800;font-size:20px;border:3px solid var(--ink);border-radius:13px;padding:8px;margin-bottom:10px}
.cq-banner.win{background:color-mix(in srgb,var(--green) 20%,#fff);color:#0a6e5c}
.cq-banner.ok{background:color-mix(in srgb,var(--yellow) 22%,#fff);color:#8a5a00}
.cq-score{font-weight:800;font-size:17px;color:var(--ink)}
.cq-reward{font-weight:800;color:var(--soft);margin:8px 0;font-size:14px}
.cq-badge{display:inline-block;background:color-mix(in srgb,var(--accent) 16%,#fff);border:2px solid var(--accent);
  color:var(--accent);border-radius:999px;padding:2px 10px;font-size:13px}
.cq-rank{font-weight:800;color:var(--ink);font-size:14px;margin:6px 0}
.cq-unlock{font-weight:800;font-size:13px;border-radius:11px;padding:8px;margin:8px 0 12px;
  background:color-mix(in srgb,var(--purple) 12%,#fff);border:2px dashed var(--purple);color:var(--purple)}
.cq-unlock.done{background:color-mix(in srgb,var(--green) 14%,#fff);border-style:solid;border-color:var(--green);color:#0a6e5c}
.cq-actions{display:flex;gap:8px;justify-content:center}

/* Analyst leaderboard */
.an-rank{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.cov{font-weight:800;color:var(--soft)}
.stars{font-weight:800;color:var(--yellow);-webkit-text-stroke:.5px var(--ink)}
.an-extra{margin-top:14px;border-top:2px dashed #2430492e;padding-top:12px}
.an-sub{font-family:'Baloo 2';font-weight:800;color:var(--ink);font-size:15px;margin:12px 0 8px}
.an-sub small{font-family:'Nunito';font-weight:700;color:var(--soft);font-size:12px}
.an-tiers{display:flex;gap:8px;flex-wrap:wrap}
.an-tier{flex:1;min-width:92px;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:10px 6px;text-align:center;opacity:.55}
.an-tier.on{opacity:1;background:color-mix(in srgb,var(--purple) 10%,#fff);box-shadow:0 4px 0 #2430491f}
.an-tier-t{font-family:'Baloo 2';font-weight:800;font-size:14px;color:var(--ink);margin-top:4px;line-height:1.1}
.an-tier-n{font-weight:700;font-size:12.5px;color:var(--soft);margin-top:2px}
.an-seals{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.an-seal{border:2px solid #2430492e;border-radius:14px;background:#fff;padding:8px 4px;text-align:center}
.an-seal.locked{opacity:.5;filter:grayscale(.7)}
.an-seal-n{font-weight:800;font-size:12.5px;color:var(--ink);margin:2px 0;line-height:1.1}

/* Chess lock */
.chess-lock{border:3px dashed var(--purple);border-radius:16px;background:color-mix(in srgb,var(--purple) 9%,#fff);
  color:var(--ink);font-weight:700;font-size:15px;text-align:center;padding:22px 16px;line-height:1.6}
.chess-lock b{color:var(--purple)}

/* ======================= DINO SCHOOL ======================= */
.lhub-head h2{margin:0 0 4px}
.lhub-note{margin-top:8px;font-size:14px;font-weight:800;color:var(--ink);background:#FFF6DA;
  border:2px dashed var(--amber);border-radius:12px;padding:8px 12px}
.lhub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.lcard{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:3px solid var(--ink);
  border-radius:16px;padding:12px;cursor:pointer;box-shadow:0 4px 0 #2430491f;font-family:inherit}
.lcard:active{transform:translateY(2px);box-shadow:0 2px 0 #2430491f}
.lcard.done{background:#EAF8F0;border-color:var(--green)}
.lcard-emoji{font-size:34px;flex:0 0 auto;width:48px;text-align:center}
.lcard-body{flex:1 1 auto;min-width:0}
.lcard-no{font-size:12px;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.4px}
.lcard-title{font-size:17px;font-weight:900;color:var(--ink)}
.lcard-badge{flex:0 0 auto;font-weight:900;font-size:14px;color:#fff;background:var(--amber);
  border:2px solid var(--ink);border-radius:10px;padding:4px 9px}
.lcard.done .lcard-badge{background:var(--green)}

.lesson{background:#fff;border:4px solid var(--ink);border-radius:20px;padding:14px;
  box-shadow:0 6px 0 #2430491f;margin:0 auto}
.lesson-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lesson-title{font-weight:900;font-size:18px;color:var(--ink);flex:1 1 auto}
.lesson-prog{display:flex;gap:6px}
.pdot{width:11px;height:11px;border-radius:50%;background:#D9CFB0;border:2px solid #8a7f5f}
.pdot.on{background:var(--blue);border-color:var(--ink)}
.lesson-stage{background:#FBF7EE;border:3px solid var(--ink);border-radius:16px;padding:10px;
  height:clamp(260px,40vh,340px);display:flex;align-items:center;justify-content:center}
.lesson-svg{width:100%;height:auto;max-height:clamp(230px,36vh,310px);display:block}
.lesson-emoji{font-size:130px;line-height:1.1;text-align:center}
.lesson-say{display:flex;gap:12px;align-items:flex-start;margin-top:12px}
.ldino{flex:0 0 auto;width:96px;height:96px}.ldino svg,.ldino img{width:96px;height:96px;object-fit:contain;display:block}
.dino-img{filter:drop-shadow(0 3px 2px #2430491f)}
.lbubble{flex:1 1 auto;background:#EEF4FF;border:3px solid var(--ink);border-radius:14px;
  padding:10px 14px;position:relative}
.lbubble:before{content:"";position:absolute;left:-12px;top:24px;border:8px solid transparent;
  border-right-color:var(--ink)}
/* FIX (bugs 7/8/10 + onboarding, display-bugs audit): this bubble is shared by
   cyberinvest intro slides, business stories, money numbers/traps "learn"
   slides, and the onboarding intro (all via acDinoRow()) - none of them ever
   got the size bump the economy/Academy lessons got when lesson-redesign.css
   shipped, so the text visibly stayed small next to them. Sized up to match
   .lp-read-body's 17.5-19px reading size instead of inventing a new scale. */
.lbubble h3{margin:0 0 4px;font-size:23px;color:var(--ink)}
.lbubble p{margin:0;font-size:18.5px;font-weight:600;color:var(--ink);line-height:1.5}
.lesson-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}

/* FIX (bug 9, display-bugs audit): this variant holds a question + options +
   feedback, not the short animation the fixed clamp(260px,40vh,340px) height
   above was sized for - on longer content it overflowed straight past the
   box into the Back/Next row underneath it. Same principle already used for
   the award/scene stage cases in obStart's slide renderer: let content that
   isn't a short animation size itself instead of forcing the animation box
   on it. */
.lesson-stage.check{height:auto;min-height:260px;flex-direction:column;align-items:stretch;gap:10px;justify-content:flex-start}
.lcheck-q{font-size:18px;font-weight:900;color:var(--ink);text-align:center;margin:6px 0}
.lcheck-opts{display:flex;flex-direction:column;gap:8px}
.lopt{font-family:inherit;text-align:left;font-size:15px;font-weight:800;color:var(--ink);
  background:#fff;border:3px solid var(--ink);border-radius:12px;padding:11px 14px;cursor:pointer}
.lopt:active{transform:translateY(2px)}
.lopt.right{background:#EAF8F0;border-color:var(--green)}
.lopt.wrong{background:#FCE9E6;border-color:var(--red)}
.qopt.right{background:#EAF8F0;border-color:var(--green)}
.qopt.wrong{background:#FCE9E6;border-color:var(--red)}
.lcheck-fb{font-size:14px;font-weight:800;min-height:8px}
.fb-ok{color:#1c7a4a;background:#EAF8F0;border:2px solid var(--green);border-radius:10px;padding:8px 12px}
.fb-no{color:#b23b2e;background:#FCE9E6;border:2px solid var(--red);border-radius:10px;padding:8px 12px}
.lesson-done{text-align:center;padding:14px}
.ld-emoji{font-size:54px}
.lesson-done h3{margin:8px 0 4px;font-size:24px;color:var(--ink)}
.lesson-done p{margin:0;font-size:17px;font-weight:700;color:var(--soft)}
@media(max-width:560px){
  .lesson{padding:10px;border-width:3px}
  .lesson-stage{padding:6px}
  .lesson-emoji{font-size:96px}
  .lesson-say{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .ldino{width:96px;height:96px}.ldino svg,.ldino img{width:96px;height:96px;object-fit:contain}
  .lbubble{width:100%}
  .lbubble:before{display:none}
  /* FIX (same audit note as above): mobile used to shrink this bubble even
     further than desktop - exactly backwards for the phone most kids actually
     read it on. No longer shrinks below the desktop size. */
  .lbubble h3{font-size:21px}.lbubble p{font-size:17.5px}
  .lesson-nav .btn{flex:1 1 0;padding:13px 10px;font-size:16px}
  .lcheck-q{font-size:17px}.lopt{font-size:15.5px;padding:13px}
}

/* ---- Junior Investor School: character-set picker ---- */
.charpick h2{margin:0 0 4px}
.cset-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.cset{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:14px;
  padding:8px 12px;cursor:pointer;font-family:inherit;font-weight:800;color:var(--ink);box-shadow:0 3px 0 #2430491f}
.cset:active{transform:translateY(2px);box-shadow:0 1px 0 #2430491f}
.cset.on{background:#EAF2FF;border-color:var(--blue)}
.cset-imgs{display:inline-flex;gap:4px}
.cset-imgs .av{width:32px;height:32px;border-radius:9px;border:2px solid var(--ink);background:#FBF7EE;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cset-imgs .av img{width:100%;height:100%;object-fit:contain}
.cset-label{font-size:15px}
.cname-head{font-weight:900;font-size:15px;margin:14px 0 8px}
.cname-list{display:flex;flex-direction:column;gap:10px}
.nrow{display:flex;align-items:center;gap:12px}
.nface{width:54px;height:54px;flex:0 0 auto;border-radius:14px;border:3px solid var(--ink);background:#FBF7EE;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nface img{width:100%;height:100%;object-fit:contain}
.nrole{flex:0 0 116px;font-weight:900;font-size:14px;color:var(--ink)}
.nrole small{display:block;font-weight:700;color:var(--soft);font-size:11px}
.ninput{flex:1 1 auto;min-width:0;border:2px solid var(--ink);border-radius:10px;padding:9px 11px;font-family:inherit;font-weight:800;font-size:15px;color:var(--ink)}
@media(max-width:560px){.nrole{flex-basis:84px;font-size:13px}.cset-label{font-size:14px}}
.cslot-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.cslot{background:#fff;border:3px solid #24304926;border-radius:14px;padding:10px;text-align:center}
.cslot.active{background:#FBF7EE}
.cslot-label{font-weight:900;font-size:10.5px;letter-spacing:.03em;margin-bottom:6px}
.cslot-face{width:110px;height:110px;border-radius:50%;border:3px solid var(--ink);background:#FBF7EE;
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto 8px;padding:0;cursor:pointer}
.cslot-face img{width:100%;height:100%;object-fit:contain}
.cslot-empty{font-size:26px;font-weight:900;color:#24304955}
.cslot input{width:100%;margin-bottom:6px;text-align:center;box-sizing:border-box;padding:7px 9px;font-size:14px}
.cslot-pickbtn{width:100%;border:1.5px solid var(--ink);background:#fff;border-radius:8px;
  padding:4px 10px;font-family:'Baloo 2';font-weight:700;font-size:11px;color:var(--ink);cursor:pointer}
.cslot-pickbtn:active{transform:translateY(1px)}
.hostgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:10px 0}
.hosttile{display:flex;align-items:center;justify-content:center;height:84px;border:2px solid #24304922;
  border-radius:12px;background:#fff;padding:6px;cursor:pointer;font-family:inherit}
.hosttile img{max-width:100%;max-height:100%;object-fit:contain}
.hosttile.on{border-color:var(--ink);border-width:3px;background:#FBF7EE}
@media(max-width:560px){.cslot-row{grid-template-columns:1fr}}

/* ---- Junior Investor School: topic tabs as cards (Option 2) ---- */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 0}
.tcard{display:flex;gap:12px;align-items:center;border:3px solid var(--ink);border-radius:16px;background:var(--paper);
  padding:14px;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);box-shadow:0 4px 0 #2430491f}
.tcard:active{transform:translateY(2px);box-shadow:0 2px 0 #2430491f}
.tcard .te{font-size:34px;flex:0 0 auto;line-height:1}
.tcard-txt{display:flex;flex-direction:column;min-width:0}
.tcard .ti{font-weight:900;font-size:16px;line-height:1.15}
.tcard .ts{font-size:12px;font-weight:800;color:var(--soft);margin-top:3px}
.tcard.on{color:#fff}.tcard.on .ts{color:rgba(255,255,255,.9)}
.barwrap{height:7px;background:#2430491a;border-radius:99px;margin-top:7px;overflow:hidden}
.barfill{display:block;height:100%;border-radius:99px}
.tcard.on .barwrap{background:rgba(255,255,255,.35)}
.topic-panel{margin-top:14px}
.topic-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.topic-big{font-size:28px;line-height:1}
.topic-head h2{margin:0;font-size:19px}
.topic-blurb{color:var(--soft);font-weight:700;font-size:13px;margin:2px 0 12px}
@media(max-width:560px){.tcard .ti{font-size:15px}.tcard .te{font-size:30px}}

/* ===== Money Numbers — animated slides ===== */
.mn-art{display:inline-block;transform-origin:center;will-change:transform}
.mn-in{animation:mnIn .45s ease both}
.mn-in2{animation:mnIn .55s .08s ease both}
@keyframes mnIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.mn-float{animation:mnFloat 2.6s ease-in-out infinite}
@keyframes mnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mn-pop{animation:mnPop 2.2s ease-in-out infinite}
@keyframes mnPop{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.mn-pulse{animation:mnPulse 1.8s ease-in-out infinite}
@keyframes mnPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,0,0))}50%{transform:scale(1.12);filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}}
.mn-spin{animation:mnSpin 3.2s linear infinite}
@keyframes mnSpin{to{transform:rotate(360deg)}}
.mn-swing{animation:mnSwing 2.4s ease-in-out infinite;transform-origin:top center}
@keyframes mnSwing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.mn-bounce{animation:mnBounce 1.6s ease-in-out infinite}
@keyframes mnBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-16px)}45%{transform:translateY(0)}60%{transform:translateY(-7px)}75%{transform:translateY(0)}}
.mn-rock{animation:mnRock 2.2s ease-in-out infinite;transform-origin:bottom center}
@keyframes mnRock{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.mn-rise{animation:mnRise 2.4s ease-in-out infinite}
@keyframes mnRise{0%{transform:translateY(8px) scale(.9);opacity:.7}60%{transform:translateY(-10px) scale(1.1);opacity:1}100%{transform:translateY(8px) scale(.9);opacity:.7}}
.mn-shake{animation:mnShake 2.4s ease-in-out infinite}
@keyframes mnShake{0%,100%{transform:translateX(0) rotate(0)}10%{transform:translateX(-7px) rotate(-6deg)}30%{transform:translateX(7px) rotate(6deg)}50%{transform:translateX(-5px) rotate(-4deg)}70%{transform:translateX(5px) rotate(4deg)}85%{transform:translateX(-2px)}}
@media (prefers-reduced-motion: reduce){
  .mn-art,.mn-in,.mn-in2{animation:none !important}
}

/* sub-tab bar: horizontal scroll on small screens (matches .tabbar mobile) */
@media (max-width: 640px){
  .subtabbar{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 12px 2px}
  .subtabbar button{flex:0 0 auto;padding:6px 12px;font-size:14px}
}

/* ---- Money Numbers: company comparison table ---- */
.mn-cmp{display:grid;gap:4px 6px;margin:10px 0 4px}
.mn-cmp-cell{font-size:13px;display:flex;align-items:center;justify-content:center;padding:6px 4px}
.mn-cmp-rowlab{justify-content:flex-start;color:var(--soft);font-weight:800;padding-left:2px}
.mn-cmp-rowlab.on{color:#2E7D46;font-weight:900}
.mn-cmp-head{flex-direction:column;font-weight:900;color:var(--ink);background:#fff;border:2.5px solid var(--ink);border-radius:11px;text-align:center;line-height:1.15;font-size:12.5px}
.mn-cmp-val{font-weight:800;color:var(--ink);background:#fff;border:1.5px solid #cfd6e6;border-radius:8px}
.mn-cmp-val.on{background:#DFF5E6;border:2.5px solid #2E7D46;color:#2E7D46;font-weight:900}
.mn-cmp-hint{font-size:12.5px;color:var(--soft);font-weight:700;text-align:center;margin:2px 0 4px}
.mn-cmp-hint b{color:#2E7D46}
.mn-guides{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800;color:var(--soft);margin:2px 0 6px}
.mn-guides img{width:30px;height:36px;object-fit:contain}
@media (max-width:640px){ .mn-cmp{gap:3px 4px} .mn-cmp-cell{font-size:12px;padding:5px 2px} .mn-cmp{grid-template-columns:64px repeat(var(--k,2),1fr)} }

/* ===== DESIGN REFRESH: full-width pages + bigger guides/quiz/stats ===== */
/* 1) Wider content on School & quiz pages (Companies is already full-width) */
/* FIX (L6, UI audit): was max-width:1240px - predates the header/bottomnav's
   own desktop pass (path-redesign.css) and companies-redesign.css's 900px
   "Option B" grid, so it was never coordinated with either. At 1280px this
   left #viewGuides (the teacher-picker screen, no inner max-width of its
   own) rendering an almost-edge-to-edge ~1200px panel while the sticky
   header/bottomnav above and below it were capped at 640px - measured live,
   the fixed bottomnav's rounded top corners landed mid-panel, looking like a
   narrow bar floating over a much wider list rather than closing it off.
   Every view most of these ids point at already has its own, narrower inner
   cap (.pf-content/.ex-content/.gm-content/.lb-content at 430px, .lp-content
   at 640px, .quiz-play .quiz-q/.quiz-opts at 780px, .cq-play at 680px, etc.),
   so this outer number only ever mattered for the ones that DON'T set an
   inner cap - #viewGuides and #viewChess - and for keeping one consistent
   ceiling app-wide. 900px matches the number path-redesign.css and
   companies-redesign.css both settled on, so every tab now agrees. */
/* FIX (M1, QA user-perspective audit): #viewPath was deliberately left out
   of this list (see the comment above) on the assumption that path-
   redesign.css's own inner .jp-content 900px rule was enough on its own.
   It wasn't: #viewPath itself is still a plain .view element, capped at
   the base .view{max-width:760px} rule (styles.css, above) same as every
   other tab - .jp-content's own max-width:900px (now also width:100%,
   same L6-style fix) can only ever fill 100% of ITS parent, and that
   parent (#viewPath) was still stuck at 760px. Confirmed live: raising the
   inner cap alone left it centered at 728px (760 minus #viewPath's own
   padding) on a 1280px screen - added here now, the same way every other
   tab already gets its outer cap lifted to 900px. */
#viewPath,#viewGuides,#viewAcademy,#viewQuiz,#viewCyber,#viewMoney,#viewTraps,#viewStories,#viewProgress,#viewCapstone,#viewPort,#viewBoard,#viewChess,#viewGym,#viewExchange{max-width:900px;padding-left:20px;padding-right:20px}

/* 2) Topic cards spread across the width */
.tgrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* 3) Quizzes: big lesson-style scene on top, question + answers below */
.quiz-play .quiz-q{font-size:25px;max-width:780px}
.quiz-play .quiz-opts{max-width:780px}
.quiz-play .qopt{font-size:18px;padding:15px 18px;text-align:left}
@media(max-width:760px){ .quiz-play .quiz-q{font-size:20px} .quiz-play .qopt{font-size:16px} }

/* 4) Guides page: bigger characters, tiles and text */
.charpick h2{font-size:28px}
.cset-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cset{padding:14px 16px;border-width:4px}
.cset-imgs{gap:8px}
.cset-imgs .av{width:78px;height:78px;border-radius:16px;border-width:3px}
.cset-label{font-size:20px;font-weight:900}
.nface{width:84px;height:84px;border-radius:18px}
.cname-head{font-size:20px}
.ninput{font-size:20px;padding:14px 16px}
.nrole{font-size:16px}
@media(max-width:560px){ .cset-row{grid-template-columns:1fr} .cset-imgs .av{width:64px;height:64px} .nface{width:68px;height:68px} }

/* 5) Companies indicator cards: bigger text + stack on mobile */
.mn{padding:16px 18px}
.mn-title{font-size:22px}
.stats{flex-wrap:wrap}
.stat{flex:1 1 220px;padding:14px 16px}
.stat-name{font-size:21px}
.stat-sub{font-size:16px}
.stat input{font-size:26px;padding:12px}
.stat-tip{font-size:15px}
.mn .hint{font-size:15px}
@media(max-width:720px){
  .stat{flex:1 1 100%;padding:9px 10px}
  .mn{padding:13px 14px}
  .mn-title{font-size:18px} .stat-name{font-size:15.5px} .stat-sub{font-size:12.5px} .stat input{font-size:17px;padding:6px} .stat-tip{font-size:10.5px} .mn .hint{font-size:12.5px}
}

/* ===== Which Company Wins — table redesign (narrower, bigger text, big guides) ===== */
.mn-compare-head{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:10px 0 16px}
.mn-ch-guide{display:flex;flex-direction:column;align-items:center;gap:3px}
.mn-ch-guide img{height:80px;width:auto;max-width:100px;object-fit:contain}
.mn-ch-fb{font-size:64px;line-height:1}
.mn-ch-name{font-size:13px;font-weight:900}
.mn-ch-name.g{color:#2E7D46}.mn-ch-name.b{color:#2A6FDB}
.mn-ch-mid{text-align:center}
.mn-ch-cmp{font-size:15px;font-weight:800;color:var(--soft)}
.mn-ch-tip{display:inline-block;margin-top:5px;font-size:15px;font-weight:900;color:#1d7a4d;background:#EAF7F1;border:2px solid #1FB89A;border-radius:999px;padding:5px 14px}
.mn-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mn-cmp{max-width:880px;margin:0 auto;gap:7px}
.mn-cmp-head{flex-direction:column;font-size:17px;border:3px solid var(--ink);border-radius:12px;padding:8px 6px;line-height:1.15;font-weight:900;background:#fff}
.mn-cmp-val{font-size:19px;border:1.5px solid #cfd6e6;border-radius:9px;padding:11px 6px;font-weight:900;background:#fff}
.mn-cmp-val.on{background:#DFF5E6;border:2.5px solid #1FB89A;color:#1d7a4d}
.mn-cmp-rowlab{justify-content:flex-start;font-size:16px;font-weight:800;color:var(--soft)}
.mn-cmp-rowlab.on{color:#2E7D46;font-weight:900}
.mn-cmp-btn{padding-top:8px}
.mn-cmp-btn .btn.blue{width:100%;padding:12px 6px;font-size:16px}
@media(max-width:640px){
  .mn-compare-head{gap:10px}
  .mn-ch-guide img{height:54px}
  .mn-ch-fb{font-size:42px}
  .mn-cmp{gap:5px}
  .mn-cmp-head{font-size:14px;padding:6px 4px}
  .mn-cmp-val{font-size:15px;padding:8px 4px}
  .mn-cmp-rowlab{font-size:13px}
  .mn-cmp-btn .btn.blue{font-size:13px;padding:9px 4px}
}

/* ===== Research checklist (before buying) ===== */
.modal-ov{position:fixed;inset:0;background:rgba(20,28,46,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
/* FIX (2026-09-13, QA-MODAL-001): this card had no max-height/overflow, so
   its bottom (Confirm button, on the buy checklist) could render completely
   below the visible viewport on smaller phones once the on-screen keyboard
   opened, with no way to scroll to reach it - the checklist's "why are you
   buying this" textarea makes the keyboard open a required, not optional,
   part of this flow. Same max-height/overflow already used by .modal above
   for the same reason. */
.modal-card{background:#fff;border:4px solid #243049;border-radius:20px;max-width:470px;width:100%;
  max-height:92vh;overflow:auto;padding:20px 22px;box-shadow:0 14px 44px rgba(0,0,0,.28)}
.modal-card h2{margin:0 0 6px;font-size:22px}
.modal-sub{font-size:14.5px;color:var(--soft);font-weight:700;margin:0 0 14px}
.bchk-row{display:flex;gap:10px;align-items:flex-start;background:#F6F8FC;border:2px solid #e3e8f2;border-radius:12px;padding:11px 12px;margin-bottom:9px;font-size:15px;font-weight:800;cursor:pointer}
.bchk-row input{width:22px;height:22px;margin-top:1px;flex:0 0 auto;accent-color:#1FB89A;cursor:pointer}
.bchk-why{margin:12px 0 2px}
.bchk-why-lbl{font-size:15px;font-weight:900;margin-bottom:6px}
.bchk-why textarea{width:100%;box-sizing:border-box;border:3px solid #243049;border-radius:12px;padding:10px 12px;font-family:inherit;font-size:15px;font-weight:700;resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.buy-why-saved{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--soft)}
.buy-why-saved span{color:var(--ink);font-style:italic}
@media(max-width:560px){ .modal-card{padding:16px} .modal-card h2{font-size:19px} }

/* ===== Market-closed info banner (informational, non-blocking) ===== */
.mkt-note{background:#FFF6DC;border:2px solid #E0A300;border-radius:12px;padding:9px 12px;margin:6px 0 10px;font-size:13.5px;font-weight:800;color:#5a4300;line-height:1.4}

/* ===== Progress: XP, level, badges, Daily Mix ===== */
.pill.xp{cursor:pointer;background:#EAF2FF;border-color:#2A6FDB}
.pill.xp small{color:#2A6FDB}
.pg-head{text-align:center}
.pg-lvl{font-size:26px;font-weight:900}
.pg-xp{font-size:15px;font-weight:800;color:var(--soft);margin:2px 0 10px}
.pg-bar{height:12px;background:#e9edf5;border-radius:8px;overflow:hidden}
.pg-bar span{display:block;height:100%;background:#1FB89A;border-radius:8px;transition:width .4s}
.pg-bar.big{height:16px;max-width:520px;margin:0 auto}
.pg-next{font-size:13px;font-weight:800;color:var(--soft);margin-top:8px}
.pg-area{margin:10px 0}
.pg-area-top{display:flex;justify-content:space-between;font-size:15px;font-weight:800;margin-bottom:5px}
.mix-card .mix-sub{font-size:14.5px;color:var(--soft);font-weight:700;margin:4px 0 12px}
.muted{font-size:14px;color:var(--soft);font-weight:700}
.badge-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:6px}
.badge{background:#F6F8FC;border:2px solid #e3e8f2;border-radius:14px;padding:14px 8px;text-align:center;opacity:.55}
.badge.on{background:#FFF8E6;border-color:#E0A300;opacity:1}
.badge-emoji{font-size:36px;line-height:1}
.badge-name{font-size:13px;font-weight:900;margin-top:6px;color:var(--ink)}

/* ===== Learning Path (soft-lock map) ===== */
.path{position:relative}
.path-step{display:flex;gap:14px;margin-bottom:12px}
.path-step:last-child{margin-bottom:0}
.path-step.locked{opacity:.62}
.path-nodecol{position:relative;width:46px;flex:0 0 46px;display:flex;justify-content:center}
.path-line{position:absolute;top:-12px;bottom:-12px;width:4px;background:#ded8c7}
.path-step:first-child .path-line{top:23px}
.path-line.cap{bottom:auto;height:35px;background:#ded8c7}
.path-node{position:relative;width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid #b9bfca;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900}
/* Companies / Daily Mix - real position:fixed (genuinely sticky through any scroll depth).
   top uses the real measured --sticky-h (same variable already used by .company-panel,
   set by _syncStickyPanelTop) plus a small gap, so it sits right under the topbar without
   ever overlapping it, on any screen. left is set dynamically by _syncPathBadgePositions
   (measures the real rendered SVG scale) - the 0 default here is just a safe fallback
   before that JS runs once on first paint. */
.path-fixed-badge{position:fixed;top:calc(var(--sticky-h,150px) + 8px);left:0;z-index:15;width:72px;height:72px;box-sizing:border-box;background:#fff;border:3px solid var(--ink);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(36,48,73,.15);cursor:pointer;text-align:center}
.path-fixed-badge .pfb-icon{font-size:27px;line-height:1}
.path-fixed-badge .pfb-label{font-size:10px;font-weight:900;color:var(--ink);line-height:1.2;font-family:'Baloo 2',sans-serif;margin-top:2px}
@media (max-width:759px){
  .path-fixed-badge{width:52px;height:52px;border-radius:12px}
  .path-fixed-badge .pfb-icon{font-size:21px}
  .path-fixed-badge .pfb-label{font-size:8px}
}
.path-node.done{background:#1FB89A;border-color:#178f78;color:#fff}
.path-node.current{border:4px solid #2A6FDB}
.path-node.cap{background:#FAEEDA;border-color:#E0A300}
.path-card{flex:1;background:#fff;border:3px solid #243049;border-radius:14px;padding:12px 14px;box-shadow:0 4px 0 rgba(36,48,73,.10)}
.path-card.current{border-color:#2A6FDB;box-shadow:0 4px 0 rgba(42,111,219,.18)}
.path-card.locked{border-color:#cfd4de}
.path-card.cap{background:#FFFBF0;border-color:#E0A300;box-shadow:0 4px 0 rgba(224,163,0,.18)}
.path-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.path-title{font-size:16px;font-weight:900}
.path-pill{font-size:12px;font-weight:900;padding:3px 10px;border-radius:20px;white-space:nowrap}
.path-pill.done{background:#E1F5EE;color:#0F6E56}
.path-pill.current{background:#E6F1FB;color:#185FA5}
.path-pill.locked{background:#F1EFE8;color:#5F5E5A}
.path-pill.cap{background:#FAEEDA;color:#854F0B}
.path-desc{font-size:13px;font-weight:700;color:#6E7891;margin:3px 0 8px}
.path-foot{display:flex;align-items:center;gap:10px}
.path-mini{flex:1;height:10px;background:#e9edf5;border-radius:6px;overflow:hidden}
.path-mini span{display:block;height:100%;background:#1FB89A;border-radius:6px}
.path-cnt{font-size:13px;font-weight:900}
.path-rec{font-size:12.5px;font-weight:800;color:#8a92a3;flex:1}
.path-hint{font-size:12.5px;font-weight:800;color:#a07a16;flex:1}
.btn.sm{padding:6px 12px;font-size:13px}

/* ===== Capstone: Research a company ===== */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.cap-pick{background:#fff;border:2px solid #e3e8f2;border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;font-family:inherit;transition:transform .08s}
.cap-pick:hover{border-color:#2A6FDB;background:#EAF2FF;transform:translateY(-2px)}
.cap-pick-emoji{font-size:28px;line-height:1}
.cap-pick-name{font-size:14px;font-weight:900;margin-top:6px;color:#243049}
.cap-pick-tag{font-size:10.5px;font-weight:800;color:#8a92a3;margin-top:2px;letter-spacing:.3px}
.cap-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.cap-step{font-size:13px;font-weight:900;color:#854F0B}
.cap-dots{display:flex;gap:5px}
.cap-dot{width:9px;height:9px;border-radius:50%;background:#e9edf5;display:inline-block}
.cap-dot.on{background:#E0A300}
.cap-q{font-size:18px;font-weight:900;margin:4px 0 12px;text-align:center}
.cap-report .cap-card{background:#FFFBF0;border:2px solid #E0A300;border-radius:12px;padding:14px 16px}
.cap-wrap{padding:0;overflow:hidden}
.cap-bighead{padding:14px 16px;display:flex;align-items:center;gap:14px}
.cap-bigicon{width:56px;height:56px;flex:0 0 56px;background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:7px;box-sizing:border-box}
.cap-bigicon svg{width:100%;height:100%;display:block}
.cap-bigname{color:#fff;font-weight:900;font-size:16.5px;font-family:'Baloo 2',sans-serif}
.cap-bigstep{color:#fff;opacity:.85;font-weight:800;font-size:12px;margin-top:2px}
.cap-bigdots{display:flex;gap:5px;margin-left:auto}
.cap-bigdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);display:inline-block}
.cap-bigdot.on{background:#fff}
.cap-body2{padding:16px 18px 18px}
.cap-card2{background:#FFFBF0;border:2px solid #E0A300;border-radius:12px;overflow:hidden;margin-top:8px}
.cap-card2 .cap-body2{padding:14px 16px}
.cap-card-title{font-size:15px;font-weight:900;margin-bottom:8px}
.cap-line{font-size:13px;font-weight:700;color:#243049;line-height:1.6;margin-bottom:6px}
.cap-line b{color:#854F0B}

/* ===================== Investor Gym ===================== */
.gym-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.gym-card{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:18px 8px;text-align:center;
  box-shadow:0 4px 0 rgba(36,48,73,.08);cursor:pointer;font-family:inherit;transition:transform .08s}
.gym-card:hover{transform:translateY(-2px)}
.gym-emoji{font-size:46px;line-height:1}
.gym-name{font-size:17px;font-weight:900;margin-top:8px;color:var(--ink)}
.gym-best{font-size:14px;font-weight:800;color:var(--soft);margin-top:4px}
.gym-best.has{color:var(--green)}
.gym-stage{max-width:580px;margin:0 auto}
/* intro */
.gym-intro{text-align:center;padding:8px 0 4px}
.gym-intro-emoji{font-size:64px;line-height:1}
.gym-intro-title{font-size:26px;font-weight:900;margin:8px 0 14px}
.gym-how{list-style:none;padding:0;margin:0 auto 18px;max-width:440px;text-align:left}
.gym-how li{position:relative;padding:8px 8px 8px 34px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.45}
.gym-how li:before{content:"▸";position:absolute;left:12px;top:8px;color:var(--green);font-weight:900}
.gym-intro-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gym-intro-note{font-size:14px;font-weight:800;color:var(--soft);margin-top:14px}
.btn.big{padding:14px 30px;font-size:19px;border-radius:14px}
/* play frame */
.gym-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.gym-stats{display:flex;gap:8px}
.gym-pill{border:2px solid var(--ink);border-radius:10px;padding:6px 13px;font-size:16px;font-weight:900}
.gym-pill.time{background:#EAF2FF;border-color:var(--blue);color:var(--blue)}
.gym-pill.score{background:#E1F5EE;border-color:var(--green);color:#0F6E56}
.gym-bar{height:9px;background:#e9edf5;border-radius:6px;overflow:hidden;margin-bottom:18px}
.gym-bar span{display:block;height:100%;background:var(--green);transition:width .9s linear}
.gym-titlebar{text-align:center;font-family:'Baloo 2';font-weight:800;font-size:20px;color:var(--ink);margin-bottom:14px}
.gym-center{text-align:center;padding:4px 0}
.gym-result{text-align:center;padding:14px 0}
.gym-result-emoji{font-size:60px;line-height:1}
.gym-result-score{font-size:24px;font-weight:900}
/* Bull or Bear */
.bull-fx{min-height:26px;font-size:19px;font-weight:900;margin-bottom:6px}
.bull-q{font-size:17px;font-weight:800;color:var(--soft);margin-bottom:6px}
.bull-price{font-size:64px;font-weight:900;letter-spacing:-1px;line-height:1;margin:2px 0 20px}
.bull-row{display:flex;gap:14px;max-width:440px;margin:0 auto}
.bull-btn{flex:1;border:3px solid;border-radius:14px;padding:18px;font-size:21px;font-weight:900;color:#fff;cursor:pointer;font-family:inherit}
.bull-btn.up{background:var(--green);border-color:#178f78;box-shadow:0 4px 0 #178f78}
.bull-btn.down{background:var(--red);border-color:#d83f3f;box-shadow:0 4px 0 #d83f3f}
.fx-ok{color:var(--green)} .fx-no{color:var(--red)}
/* News Flash */
.green-instr{font-size:17px;font-weight:800;color:var(--soft);margin-bottom:14px}
.news-co{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:8px}
.news-card{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:22px 16px;font-size:24px;font-weight:900;line-height:1.3;margin:0 auto 18px;max-width:440px;min-height:64px;display:flex;align-items:center;justify-content:center}
.green-fx{min-height:24px;font-size:17px;font-weight:900;margin-top:14px}
/* Tap the Ticker */
.tick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:460px;margin:14px auto 0}
.tick-tile{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:14px 8px;cursor:pointer;font-family:inherit;color:var(--ink);display:flex;flex-direction:column;gap:3px;align-items:center}
.tick-sym{font-size:15px;font-weight:900}
.tick-price{font-size:24px;font-weight:900}
.tick-tile.done{background:var(--green);color:#fff;border-color:#178f78}
.tick-tile.bad{background:#FFE1E1;border-color:var(--red)}
/* Market Match */
.mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:440px;margin:14px auto 0}
.mm-card{min-height:84px;border:3px solid var(--ink);border-radius:14px;background:var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px}
.mm-face{visibility:hidden;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mm-e{font-size:30px;line-height:1}
.mm-e svg{width:32px;height:32px;display:block}
.mm-n{font-size:14px;font-weight:900;color:var(--ink);line-height:1.15}
.mm-card.up,.mm-card.done{background:#fff}
.mm-card.up .mm-face,.mm-card.done .mm-face{visibility:visible}
.mm-card.done{border-color:var(--green);opacity:.6}
/* Spot the Trend */
.tr-grid{display:grid;gap:10px;margin:14px auto 0}
.tr-cell{aspect-ratio:1;border:3px solid var(--ink);border-radius:12px;background:#fff;cursor:pointer}
.tr-cell.lit{background:var(--yellow)} .tr-cell.on{background:var(--green)} .tr-cell.off{background:var(--red)}
/* Make €100 */
.mk-target{font-size:26px;font-weight:900;margin-bottom:2px}
.mk-sum{font-size:16px;font-weight:800;color:var(--soft);margin-bottom:14px}
.mk-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:440px;margin:0 auto}
.mk-tile{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:16px 22px;font-size:24px;font-weight:900;cursor:pointer;min-width:70px;font-family:inherit;color:var(--ink)}
.mk-tile.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.mk-tile.mk-ok{background:var(--green);color:#fff;border-color:var(--green)}
.mk-tile.mk-bad{background:var(--red);color:#fff;border-color:var(--red)}

/* Odd One Out (Investor Gym) */
.odd-row{display:flex;gap:16px;max-width:460px;margin:8px auto 0;justify-content:center}
.odd-box{flex:1;border:3px solid var(--ink);border-radius:16px;padding:34px 12px;font-size:30px;font-weight:900;color:#fff;cursor:pointer;font-family:inherit;letter-spacing:.5px}
.odd-box.green{background:var(--green);border-color:#178f78;box-shadow:0 4px 0 #178f78}
.odd-box.red{background:var(--red);border-color:#d83f3f;box-shadow:0 4px 0 #d83f3f}
.odd-hint{font-size:14px;font-weight:800;color:var(--soft)}
/* Tap the Price tiles = single big number */
.tick-tile{justify-content:center;font-size:27px;font-weight:900;min-height:66px}

/* Investor Gym — extra games */
.quiz-prompt{font-size:30px;font-weight:900;margin:6px 0 16px;text-align:center;line-height:1.2}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:400px;margin:0 auto}
.opt-btn{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:16px;font-size:24px;font-weight:900;cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:0 4px 0 rgba(36,48,73,.12)}
.opt-btn.good{background:var(--green);color:#fff;border-color:#178f78;box-shadow:0 4px 0 #178f78}
.opt-btn.wrong{background:#FFE1E1;border-color:var(--red)}
.tc-card{display:inline-block;border:3px solid var(--ink);border-radius:12px;background:var(--paper);padding:10px 18px;font-size:28px;font-weight:900;vertical-align:middle}
.tc-op{font-size:26px;font-weight:900;margin:0 12px;vertical-align:middle}
/* Tap the Colour */
.tc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:360px;margin:14px auto 0}
.tc-sq{aspect-ratio:1;border:3px solid var(--ink);border-radius:12px;cursor:pointer}
.tc-sq.hit{opacity:.3}
.tc-sq.miss{box-shadow:0 0 0 4px var(--red) inset}
/* Flick Master */
.flick-arrow{font-size:92px;line-height:1;margin:6px 0 14px;text-align:center;animation:flickpop .22s ease-out}
@keyframes flickpop{0%{transform:scale(.55);opacity:.2}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.flick-pad{display:grid;grid-template-columns:repeat(3,64px);grid-auto-rows:64px;gap:8px;justify-content:center}
.flick-btn{border:3px solid var(--ink);border-radius:12px;background:#fff;font-size:28px;font-weight:900;cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:0 4px 0 rgba(36,48,73,.12)}
/* Spot the Mover */
.bird-grid{display:grid;gap:8px;margin:14px auto 0}
.bird-sq{aspect-ratio:1;border:3px solid var(--ink);border-radius:10px;cursor:pointer}
.bird-sq.hit{box-shadow:0 0 0 4px var(--green) inset}
.bird-sq.miss{box-shadow:0 0 0 4px var(--red) inset}
/* Sort the Sectors */
.sect-item{display:inline-block;border:3px solid var(--ink);border-radius:16px;background:var(--paper);padding:14px 26px;font-size:24px;font-weight:900;margin:6px 0 16px}
.sect-bins{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;justify-content:center;max-width:420px;margin:0 auto}
.sect-bin{border:3px solid var(--ink);border-radius:14px;background:#fff;padding:14px 18px;font-size:18px;font-weight:900;cursor:pointer;font-family:inherit;color:var(--ink)}

/* Investor Gym — Match mode */
.gym-practice-h{font-size:15px;font-weight:900;color:var(--soft);margin-bottom:12px}
.gym-lobby{text-align:center}
.gym-lobby-t{font-size:23px;font-weight:900;margin-bottom:2px}
.gym-lobby-s{font-size:15px;font-weight:700;color:var(--soft);margin-bottom:16px}
.gym-vs-row{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:16px}
.vs-side{text-align:center}
.vs-av{width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);margin:0 auto 6px;background:#EAF2FF;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vs-n{font-size:15px;font-weight:900}
.vs-lvl{font-size:12.5px;font-weight:800}
.vs-lvl.you{color:var(--green)} .vs-lvl.opp{color:#FF8A3D}
.vs-x{font-size:22px;font-weight:900;color:#9aa0ad}
.gym-lobby-rec{font-size:13.5px;font-weight:800;color:var(--soft);margin-top:14px}
.gym-link{color:var(--blue);cursor:pointer;text-decoration:underline}
.opp-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.opp-em{font-size:34px;line-height:1}
.opp-em.big{font-size:42px}
/* match header strip */
.gym-matchbar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#F1ECFB;border:2px solid #d9ccf6;border-radius:12px;padding:7px 12px;margin-bottom:12px;flex-wrap:wrap}
.gym-roundtag{display:inline-block;background:#fff;border:2px solid #8B6DF0;border-radius:9px;padding:3px 11px;font-size:13.5px;font-weight:900;color:#6A4FD0}
.gym-vs2{font-size:15px;font-weight:900;display:flex;align-items:center;gap:6px}
.gym-vs2 .opp-em{font-size:22px} .gym-vs2 .opp-img{width:26px;height:26px;border:2px solid var(--ink)}
.gym-vs2.big{font-size:18px}.gym-vs2.big .opp-em{font-size:30px}.gym-vs2.big .opp-img{width:36px;height:36px}
.gym-vs2 .vs{color:#9aa0ad;font-weight:800}
.gym-dots{display:flex;gap:6px}
.mdot{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);background:#e9edf5;display:inline-block}
.mdot.win{background:var(--green)} .mdot.loss{background:var(--red)}
/* opponent chooser */
.opp-sec{font-size:13px;font-weight:900;color:var(--soft);margin:6px 2px 8px}
.opp-teachers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.opp-teacher{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px;font-family:inherit;cursor:pointer;box-shadow:0 4px 0 rgba(36,48,73,.12);text-align:center}
.opp-teacher .opp-img.big,.opp-teacher .opp-em.big{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;background:#EAF2FF}
.opp-teacher .opp-img.big{object-fit:cover}
.opp-tn{font-size:16px;font-weight:900}
.opp-input{width:100%;box-sizing:border-box;border:3px solid var(--ink);border-radius:12px;padding:12px 14px;font-size:16px;font-weight:800;font-family:inherit;color:var(--ink);margin-bottom:12px}
.opp-emoji{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:14px}
.oppe{border:3px solid var(--ink);border-radius:12px;background:#fff;font-size:24px;padding:6px;cursor:pointer;font-family:inherit}
.oppe.sel{border-color:var(--blue);background:#EAF2FF}
.opp-hint{font-size:13.5px;font-weight:800;color:var(--soft);background:var(--paper);border:2px solid #eee0c6;border-radius:10px;padding:9px 12px;margin-bottom:12px}
/* match result breakdown */
.mr-break{display:inline-block;text-align:left;background:var(--paper);border:2px solid #e3e8f0;border-radius:12px;padding:8px 14px;margin:6px 0}
.mr-row{display:flex;align-items:center;gap:16px;justify-content:space-between;font-size:14.5px;font-weight:800;color:var(--soft);padding:3px 0}
.mr-row b{font-size:15px}

/* Investor Gym — opponent groups, intro example, swatches, flick sequence */
.opp-setrow{margin-bottom:12px}
.opp-setlabel{font-size:13px;font-weight:800;color:var(--soft);margin:0 2px 6px}
.opp-teachers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tc-swatch{display:inline-block;width:18px;height:18px;border-radius:5px;border:2px solid var(--ink);vertical-align:-3px;margin:0 2px}
.fl-dot{font-size:18px;color:#c3cad6;margin:0 3px;font-weight:900}
.fl-dot.done{color:var(--green)}
.flick-prog{margin:10px 0 4px;min-height:22px}
/* intro example block */
.gym-eg{background:var(--paper);border:2px dashed #e0c9a0;border-radius:12px;padding:10px 12px;margin:4px auto 16px;max-width:440px}
.eg-lab{font-size:11px;font-weight:900;letter-spacing:.6px;color:#b08847;margin-bottom:8px}
.eg-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.eg-row2{display:inline-flex;gap:6px;margin-left:4px}
.eg-chip{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--ink);border-radius:9px;background:#fff;padding:6px 10px;font-size:15px;font-weight:900;color:var(--ink)}
.eg-chip.big{font-size:17px}
.eg-chip.ring{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,184,154,.25)}
.eg-ar{font-size:15px;font-weight:900;color:#9aa0ad}
.eg-ar2{font-size:26px;font-weight:900}
.eg-box{border:2px solid var(--ink);border-radius:9px;padding:8px 12px;font-size:15px;font-weight:900;color:#fff}
.eg-box.green{background:var(--green)} .eg-box.red{background:var(--red)}
.eg-box.ring{box-shadow:0 0 0 3px rgba(255,90,90,.3)}
.eg-cap{flex-basis:100%;text-align:center;font-size:12.5px;font-weight:800;color:var(--soft);margin-top:6px}
.eg-sq{display:inline-block;width:22px;height:22px;border-radius:6px;border:2px solid var(--ink);vertical-align:-4px}
.eg-sq.ring{box-shadow:0 0 0 3px rgba(36,48,73,.35)}
.eg-grid3{display:grid;grid-template-columns:repeat(3,20px);gap:4px}
.eg-cell{width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;background:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.eg-cell.lit{background:var(--yellow)}

/* Inbux header pill + Exchange screen */
.pill.inbux{background:#FFF3DC;border-color:#F2A93B;cursor:pointer}
.pill.inbux small{color:#9A6A00}
.pill.inbux span{color:#9A6A00}
.ex-rate{font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1}
.ex-sub{font-size:15px;font-weight:800;color:var(--soft);margin:4px 0 14px}
.ex-gaugewrap{height:16px;background:#e9edf5;border:2px solid var(--ink);border-radius:9px;overflow:hidden}
.ex-gauge{height:100%;background:linear-gradient(90deg,#FF5A5A,#FFC23C,#1FB89A)}
.ex-gaugelab{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--soft);margin:3px 2px 14px}
.ex-note{background:#EAF2FF;border:2px solid #cfe0ff;border-radius:10px;padding:10px 12px;font-size:13.5px;font-weight:700;color:#34507f;margin-bottom:14px}
.ex-reserve-l{font-size:13px;font-weight:900;color:var(--soft);margin-bottom:5px}
.ex-bar{height:14px;background:#e9edf5;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.ex-bar span{display:block;height:100%;background:var(--green)}
.ex-conv-h{font-size:13px;font-weight:900;color:var(--soft);margin-bottom:10px}
.ex-conv-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ex-input{flex:1;min-width:120px;border:3px solid var(--ink);border-radius:12px;padding:12px 14px;font-size:20px;font-weight:900;font-family:inherit;color:#9A6A00;background:#FFF3DC}
.ex-arrow{font-size:22px;font-weight:900;color:#9aa0ad}
.ex-get{border:3px solid #1FB89A;border-radius:12px;padding:12px 16px;font-size:20px;font-weight:900;background:#E1F5EE;color:#0F6E56;min-width:90px;text-align:center}
.ex-quick{display:flex;gap:8px}
.ex-quick .btn{flex:1}
.ex-msg{min-height:22px;text-align:center;font-size:14px;font-weight:900;margin-top:10px}
.ex-hold{text-align:center;font-size:12.5px;font-weight:800;color:#1FB89A;margin-top:8px}

/* readable panel prose (global) */
.view .panel > p{font-size:16px;line-height:1.45}
.panel h2{font-size:24px}

/* Money compare: explicit row-label subtitle */
.mn-rl-sub{font-weight:700;font-size:14.5px;color:#5C6A82;line-height:1.3}
.mn-cmp-rowlab{line-height:1.2}
.mn-ch-tip{font-size:13px;font-weight:700;color:#34507f;background:#EAF2FF;border:2px solid #cfe0ff;border-radius:9px;padding:5px 9px;margin-top:5px}

/* ===== Build your player ===== */
.avatar.player{padding:0;display:inline-flex;align-items:center;justify-content:center}
.avatar.player svg{display:block}
.opp-em.has-player{background:none;display:inline-flex;align-items:center;justify-content:center}
.av-builder{max-height:44vh;overflow:auto;text-align:left;margin-top:6px}
.av-preview svg{width:150px;height:auto;display:block;margin:0 auto}
.av-chars{gap:6px}
.pick.av-char{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;padding:7px 6px;line-height:1}
.pick.av-char .e{font-size:23px}
.pick.av-char .n{font-size:10.5px;font-weight:800}
.av-num{width:80px;border:3px solid var(--ink);border-radius:11px;padding:7px;font-size:16px;font-weight:900;font-family:inherit;text-align:center;color:var(--ink)}

/* Build your player — dedicated controls (auto-size so flags/labels fit) */
.av-opts{display:flex;flex-wrap:wrap;gap:8px}
.av-opt{border:3px solid var(--ink);border-radius:11px;background:#fff;font-family:inherit;font-weight:900;cursor:pointer;padding:7px 11px;font-size:14px;line-height:1.1}
.av-opt.on{background:var(--ink);color:#fff}
.av-sw{width:32px;height:32px;border-radius:8px;border:3px solid var(--ink);cursor:pointer;padding:0}
.av-sw.on{outline:3px solid var(--blue);outline-offset:1px}
.av-sw.none{background:#fff;color:var(--ink);font-weight:900;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.av-char{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:60px;padding:8px 6px;border:3px solid var(--ink);border-radius:12px;background:#fff;cursor:pointer;font-family:inherit;line-height:1}
.av-char.on{background:var(--ink)}
.av-char.on .n{color:#fff}
.av-char .e{font-size:24px}
.av-char .n{font-size:11px;font-weight:800;color:var(--ink)}

/* ---------------- Celebration/fail screens: shared motion vocabulary ---------------- */
@keyframes cel-jumpSpin{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-20px) rotate(180deg)}60%,100%{transform:translateY(0) rotate(360deg)}}
@keyframes cel-bounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-4deg)}}
@keyframes cel-dance{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-10px) rotate(-8deg)}75%{transform:translateX(10px) rotate(8deg)}}
@keyframes cel-shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-8px) rotate(-5deg)}40%{transform:translateX(8px) rotate(5deg)}60%{transform:translateX(-6px) rotate(-3deg)}80%{transform:translateX(6px) rotate(3deg)}}
@keyframes cel-wobbleSad{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-8deg) translateY(2px)}75%{transform:rotate(8deg) translateY(2px)}}
@keyframes cel-highfive{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-10px) rotate(-15deg)}55%{transform:translateY(-14px) rotate(5deg)}70%{transform:translateY(-6px) rotate(0)}}
@keyframes cel-pointBounce{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(6px) rotate(8deg)}}
@keyframes cel-sparkle{0%,100%{transform:scale(0.6) rotate(0);opacity:.4}50%{transform:scale(1.3) rotate(180deg);opacity:1}}
@keyframes cel-orbit{0%{transform:rotate(0) translateX(38px) rotate(0)}100%{transform:rotate(360deg) translateX(38px) rotate(-360deg)}}
@keyframes cel-drift{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-30px);opacity:0}}
@keyframes cel-fly{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(60px,-40px) rotate(35deg)}}
@keyframes cel-popText{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes cel-confetti{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(150px) rotate(360deg);opacity:0}}
@keyframes cel-bodyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cel-armWave{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(15deg)}}
@keyframes cel-blink{0%,85%,100%{transform:scaleY(1)}90%{transform:scaleY(0.15)}}
@keyframes cel-sadTilt{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-5deg) translateY(3px)}}
@keyframes cel-mouthTalk1{0%,100%{opacity:1}50%{opacity:0}}
@keyframes cel-mouthTalk2{0%,100%{opacity:0}50%{opacity:1}}
@keyframes cel-grow{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
/* These 12 classes were referenced (anim/decorAnim values) by the original 30-template
   bank since before this session, but no rule ever bound the class name to its matching
   @keyframes above - confirmed by direct search, zero ".cel-X{animation:...}" rules
   existed anywhere. Every teacher/icon-based celebration (25 of 30 templates) has been
   completely static this whole time. Monsters were unaffected since they use inline
   style="animation:..." directly, not these classes. */
.cel-jumpSpin{animation:cel-jumpSpin 0.9s ease-in-out infinite}
.cel-bounce{animation:cel-bounce 0.8s ease-in-out infinite}
.cel-dance{animation:cel-dance 0.9s ease-in-out infinite}
.cel-shake{animation:cel-shake 0.7s ease-in-out infinite}
.cel-wobbleSad{animation:cel-wobbleSad 1.1s ease-in-out infinite}
.cel-highfive{animation:cel-highfive 1s ease-in-out infinite}
.cel-pointBounce{animation:cel-pointBounce 0.8s ease-in-out infinite}
.cel-sparkle{animation:cel-sparkle 1.2s ease-in-out infinite}
.cel-orbit{animation:cel-orbit 2.4s linear infinite}
.cel-drift{animation:cel-drift 1.6s ease-out infinite}
.cel-fly{animation:cel-fly 1.4s ease-in-out infinite alternate}
.cel-grow{animation:cel-grow 0.6s cubic-bezier(.36,1.4,.5,1) both}
@keyframes cel-titlePop{0%{transform:scale(0.5);opacity:0}50%{transform:scale(0.78);opacity:0.55}80%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes cel-bigheadingPop{0%{transform:scale(0.25);opacity:0}45%{transform:scale(0.55);opacity:0.65}75%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.cel-bigheading{font-size:22px;font-weight:900;color:var(--ink);animation:cel-bigheadingPop 1s ease-out both;margin-bottom:6px}
.cel-divider{border-top:2px dashed rgba(36,48,73,.18);margin:14px 0}
@keyframes cel-r2IconPop{0%{transform:translateY(-14px) scale(0.4);opacity:0}50%{transform:translateY(-14px) scale(0.7);opacity:0.6}80%{transform:translateY(-14px) scale(1.12)}100%{transform:translateY(-14px) scale(1);opacity:1}}
@keyframes cel-r2RewardPop{0%{transform:scale(0.25);opacity:0}50%{transform:scale(0.6);opacity:0.6}80%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
.cel-r2-icon-big{font-size:52px;display:inline-block;animation:cel-r2IconPop 1s ease-out both;position:relative;top:-14px}
.cel-r2-label{font-size:15px;font-weight:900;margin-top:-8px;color:var(--ink)}
.cel-r2-rewards{display:flex;justify-content:center;gap:22px;margin-top:14px}
.cel-r2-reward{animation:cel-r2RewardPop 0.9s ease-out both}
.cel-r2-icon{font-size:26px}
.cel-r2-num{font-size:30px;font-weight:900;color:var(--ink);line-height:1}
.cel-r2-tag{font-size:10.5px;font-weight:800;margin-top:2px;letter-spacing:.04em}
.cel-card{position:relative;background:#fff;border:4px solid var(--ink);border-radius:18px;padding:22px 18px;text-align:center;overflow:hidden}
.cel-card.gold{background:linear-gradient(135deg,#FFF3D6,#FFE0A3);border-color:var(--gold,#F2A93B)}
.cel-card.oops{background:#FCEBEB;border-color:#E24B4A}
.cel-icon{font-size:52px;display:inline-block}
.cel-icon2{font-size:26px;display:inline-block;margin-left:4px}
.cel-slot{width:64px;height:64px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;position:relative}
.cel-slot img{width:100%;height:100%;object-fit:contain}
.cel-title{font-size:16px;font-weight:900;color:var(--ink);margin-top:8px;animation:cel-titlePop 0.9s ease-out .1s both}
.cel-reward{font-size:13px;font-weight:800;color:var(--soft);margin-top:6px}
.cel-confetti-piece{position:absolute;top:0;font-size:15px;animation:cel-confetti 1.6s ease-in infinite}