/* ═══════════════════════════════════════════════════════════════════════
   MindGym — B3 Wealth design language
   Light theme derives from the B3 client portal (its app-like surface);
   dark theme derives from b3wealth.com. Same Cormorant + Inter + DM Mono.
   Change token VALUES here, never component colours further down.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'DM Mono', ui-monospace, SFMono-Regular, monospace;

  /* B3 portal light */
  --bg:#FAFAF8;
  --paper:#FFFFFF;
  --surface:#F4F3EF;
  --surface-2:#ECEAE4;
  --ink:#1A1917;
  --ink-soft:#4A4843;
  --ink-mute:#6E6C64;        /* 5.26:1 on white — was #7A7870 at 4.42, under AA */
  --line:#E2E0D8;
  --line-strong:#D4D1C8;

  /* B3's own --gold-d; the lighter --gold (#9A7D3A) only reaches 3.74:1 on this
     canvas, so the deeper gold carries text and fills, and #9A7D3A is kept for
     decorative tints via --accent-mid / --accent-wash. */
  --accent:#7A6228;
  --accent-deep:#655020;
  --accent-mid:#E8D9B5;
  --accent-wash:#F7F2E8;
  --on-accent:#FFFFFF;

  --good:#3D7A52;  --good-wash:#EDF4F0;  --good-line:#BBD1BE;
  --bad:#A03050;   --bad-wash:#FCEEF2;   --bad-line:#E3C0CD;
  --info:#2A5F8A;  --info-wash:#EAF2F8;  --info-line:#C9D7E7;
  --warn:#8A6D1F;  --warn-wash:#FBF3DA;  --warn-line:#E5D38D;

  /* section accents — muted wayfinding, champagne stays dominant */
  --train:#3A4A5E;    --train-soft:#EDF0F4;    --on-train:#2E3B4C;
  --math:#4F4470;     --math-soft:#EFEDF6;     --on-math:#413859;
  --thinking:#1F5F5C; --thinking-soft:#E6F0EF; --on-thinking:#1B4E4C;
  --speaking:#6E3552; --speaking-soft:#F4E9EF; --on-speaking:#5A2B43;
  --zen:#4F6B52;      --zen-soft:#EBF0EB;      --on-zen:#3F5642;
  --create:#9C5730;   --create-soft:#F7EAE0;   --on-create:#7C4526;

  /* game hues — must read as their own names on this background */
  --hue-red:#C0392B; --hue-blue:#2E6DA4; --hue-green:#3D7A52; --hue-yellow:#8A6D1F;
  --game-ink:#3A4A5E;
  --canvas:#FFFFFF;          /* doodle surface stays paper in both themes */
  --focus-ring:var(--accent);

  --shadow:0 1px 2px rgba(26,25,23,.05), 0 6px 18px rgba(26,25,23,.05);
  --r-xs:3px;
  --r:4px;
  --r-md:8px;
  --radius:12px;             /* card radius — B3 is squarer than before */
}

/* Dark = b3wealth.com champagne-on-cool-dark.
   Applied automatically by system preference, or explicitly via the toggle. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15191A;
    --paper:#20282A;
    --surface:#1B2122;
    --surface-2:#232B2D;
    --ink:#F2EAD9;
    --ink-soft:#C9C0AC;
    --ink-mute:#95928A;
    --line:rgba(216,194,138,.14);
    --line-strong:rgba(216,194,138,.26);

    --accent:#D8C28A;
    --accent-deep:#B89D5C;
    --accent-mid:#E9DCB8;
    --accent-wash:rgba(216,194,138,.10);
    --on-accent:#15191A;

    --good:#7FB59A;  --good-wash:rgba(127,181,154,.12);  --good-line:rgba(127,181,154,.34);
    --bad:#E08897;   --bad-wash:rgba(224,136,151,.12);   --bad-line:rgba(224,136,151,.34);
    --info:#8FB8D8;  --info-wash:rgba(143,184,216,.12);  --info-line:rgba(143,184,216,.32);
    --warn:#E3C368;  --warn-wash:rgba(227,195,104,.12);  --warn-line:rgba(227,195,104,.32);

    --train:#9FB4CC;    --train-soft:rgba(159,180,204,.12);  --on-train:#C6D5E5;
    --math:#B0A3D6;     --math-soft:rgba(176,163,214,.12);   --on-math:#D2C9EC;
    --thinking:#7FBDB8; --thinking-soft:rgba(127,189,184,.12);--on-thinking:#AEDCD8;
    --speaking:#D69BB6; --speaking-soft:rgba(214,155,182,.12);--on-speaking:#EDC4D5;
    --zen:#9DBFA2;      --zen-soft:rgba(157,191,162,.12);    --on-zen:#C4DBC8;
    --create:#DB9B72;   --create-soft:rgba(219,155,114,.12); --on-create:#EEC4A6;

    --hue-red:#E8796B; --hue-blue:#6FA8DC; --hue-green:#7FB59A; --hue-yellow:#E3C368;
    --game-ink:#C9C0AC;

    --shadow:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.34);
  }
}

/* Explicit dark choice — wins regardless of system preference. */
:root[data-theme="dark"]{
  --bg:#15191A;
  --paper:#20282A;
  --surface:#1B2122;
  --surface-2:#232B2D;
  --ink:#F2EAD9;
  --ink-soft:#C9C0AC;
  --ink-mute:#95928A;
  --line:rgba(216,194,138,.14);
  --line-strong:rgba(216,194,138,.26);

  --accent:#D8C28A;
  --accent-deep:#B89D5C;
  --accent-mid:#E9DCB8;
  --accent-wash:rgba(216,194,138,.10);
  --on-accent:#15191A;

  --good:#7FB59A;  --good-wash:rgba(127,181,154,.12);  --good-line:rgba(127,181,154,.34);
  --bad:#E08897;   --bad-wash:rgba(224,136,151,.12);   --bad-line:rgba(224,136,151,.34);
  --info:#8FB8D8;  --info-wash:rgba(143,184,216,.12);  --info-line:rgba(143,184,216,.32);
  --warn:#E3C368;  --warn-wash:rgba(227,195,104,.12);  --warn-line:rgba(227,195,104,.32);

  --train:#9FB4CC;    --train-soft:rgba(159,180,204,.12);  --on-train:#C6D5E5;
  --math:#B0A3D6;     --math-soft:rgba(176,163,214,.12);   --on-math:#D2C9EC;
  --thinking:#7FBDB8; --thinking-soft:rgba(127,189,184,.12);--on-thinking:#AEDCD8;
  --speaking:#D69BB6; --speaking-soft:rgba(214,155,182,.12);--on-speaking:#EDC4D5;
  --zen:#9DBFA2;      --zen-soft:rgba(157,191,162,.12);    --on-zen:#C4DBC8;
  --create:#DB9B72;   --create-soft:rgba(219,155,114,.12); --on-create:#EEC4A6;

  --hue-red:#E8796B; --hue-blue:#6FA8DC; --hue-green:#7FB59A; --hue-yellow:#E3C368;
  --game-ink:#C9C0AC;

  --shadow:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.34);
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size:16px;
  line-height:1.65;
  min-height: 100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{ background:var(--accent-wash); }

/* B3 headings: Cormorant at scale, light weight, tight leading */
h1,h2,h3,.serif{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.12; }

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 40;
  gap:16px;
}
.brand{ display:flex; align-items:baseline; gap:9px; font-family:var(--serif); font-size:1.5rem; font-weight:500; letter-spacing:-.02em; }
.brand-mark{ font-size:1.2rem; color:var(--accent); }
.brand-name{ color:var(--ink); }

.tabs{ display:flex; flex-wrap:wrap; gap:2px; }
.tab{
  border:none; background:transparent; padding:8px 12px; border-radius:var(--r);
  font-family:var(--sans); font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); cursor:pointer; white-space:nowrap;
  transition: color .15s ease, background .15s ease;
}
.tab:hover{ color:var(--accent); }
.tab.active{ background:var(--accent-wash); color:var(--accent-deep); box-shadow:none; }

/* Header controls (theme toggle + mobile menu) */
.topbar-right{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; cursor:pointer;
  background:transparent; color:var(--accent);
  border:1px solid var(--line-strong); border-radius:var(--r);
  font-size:15px; line-height:1; transition:all .18s;
}
.icon-btn:hover{ border-color:var(--accent); background:var(--accent-wash); }
.nav-toggle{ display:none; }

main{ max-width: 980px; margin: 0 auto; padding: 40px 24px 80px; }

/* ---------- Generic layout ---------- */
.section-head{ margin-bottom: 26px; }
.section-head h1{ font-size: clamp(2rem, 4.2vw, 2.9rem); margin-bottom:10px; }
.section-head p{ color: var(--ink-soft); font-size: .96rem; max-width: 620px; line-height:1.6; }
/* B3 eyebrow: champagne, widely letterspaced, with a hairline rule beneath */
.eyebrow{
  text-transform:uppercase; letter-spacing:.24em; font-size:.68rem; font-weight:600;
  color: var(--accent); margin-bottom:12px; display:block;
}
.section-head .eyebrow::after{
  content:''; display:block; width:56px; height:1px;
  background:var(--accent); opacity:.55; margin-top:10px;
}

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:16px; }

.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap:10px;
}
.card:hover{ transform: translateY(-2px); border-color:var(--accent); box-shadow: var(--shadow); }
.card .icon{ font-size:1.5rem; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:var(--r); }
.card h3{ font-size:1.35rem; }
.card p{ color:var(--ink-soft); font-size:.87rem; line-height:1.5; flex:1; }
.card .stat{
  font-family:var(--mono); font-size:.7rem; color: var(--ink-mute); font-weight:400;
  letter-spacing:.02em; padding-top:10px; border-top:1px solid var(--line);
}

.tag-train .icon{ background:var(--train-soft); color:var(--train); }
.tag-zen .icon{ background:var(--zen-soft); color:var(--zen); }
.tag-create .icon{ background:var(--create-soft); color:var(--create); }
.tag-math .icon{ background:var(--math-soft); color:var(--math); font-family:var(--serif); font-weight:600; }
.tag-thinking .icon{ background:var(--thinking-soft); color:var(--thinking); font-family:var(--serif); font-weight:600; }
.tag-speaking .icon{ background:var(--speaking-soft); color:var(--speaking); font-family:var(--serif); font-weight:600; }
.card-button{ width:100%; text-align:left; font:inherit; color:inherit; }

/* ---------- Buttons — B3: small, uppercase, letterspaced, squared ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid transparent; border-radius: var(--r);
  padding: .78rem 1.3rem; font-family:var(--sans); font-weight:700;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition: all .18s ease;
}
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background: var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--accent); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent); background: var(--accent-wash); }
.btn-lg{ padding:.95rem 1.7rem; font-size:12px; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px; }
.button-link{ appearance:none; border:0; background:transparent; font:inherit; }

button:focus-visible, [role="button"]:focus-visible, input:focus-visible, .pill:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:3px;
}

/* ---------- Home / Today ---------- */
.today-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow); }
/* Figures in DM Mono, per the B3 system */
.stat-card .num{ font-family:var(--mono); font-size:1.85rem; font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.stat-card .label{ color:var(--ink-mute); font-size:.63rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; margin-top:8px;}
.streak-flame{ color:var(--accent); }

/* ---------- Instruction / result screens ---------- */
.panel{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 34px;
  box-shadow: var(--shadow); max-width: 640px; margin: 0 auto;
}
.panel .back-link{ display:inline-block; margin-bottom:16px; color:var(--ink-soft); font-size:.86rem; cursor:pointer; font-weight:600; }
.panel .back-link:hover{ color: var(--ink); }
.rule-list{ margin: 18px 0; padding-left: 0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.rule-list li{ display:flex; gap:12px; align-items:flex-start; font-size: .96rem; line-height:1.5; }
.rule-list .num-bullet{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:var(--ink-soft);
}
.example-box{ background: var(--bg); border-radius:14px; padding:14px 16px; font-size:.88rem; color:var(--ink-soft); margin-top:10px; }
.evidence-box{ margin-top:12px; padding:15px 16px; border:1px solid var(--info-line); background:var(--info-wash); border-radius:14px; display:grid; gap:6px; font-size:.84rem; line-height:1.45; color:var(--info); }
.evidence-box strong{ color:var(--train); }
.evidence-box a{ color:var(--train); font-weight:700; width:max-content; }
.evidence-box small{ font-size:.76rem; color:var(--ink-soft); }
.motivation-card{ margin:20px 0 4px; padding:20px; border:1px solid var(--warn-line); border-radius:18px; background:linear-gradient(135deg,var(--warn-wash),var(--warn-wash)); color:var(--warn); text-align:left; }
.motivation-badge{ display:inline-block; margin-bottom:8px; padding:5px 9px; border-radius:999px; background:var(--warn-line); color:var(--on-accent); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.motivation-card h3{ font-size:1.15rem; margin-bottom:8px; }
.motivation-card blockquote{ font-family:var(--serif); font-size:1.16rem; line-height:1.45; margin:8px 0; }
.motivation-card p{ color:var(--warn); font-size:.84rem; line-height:1.45; }
.motivation-card a{ display:inline-block; margin-top:10px; color:var(--warn); font-size:.75rem; font-weight:700; }

/* ---------- Game stage ---------- */
.stage{
  background: var(--paper); border:1px solid var(--line); border-radius: 22px; padding: 28px;
  box-shadow: var(--shadow); max-width: 640px; margin: 0 auto;
}
.stage-hud{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); }
.stage-hud .quit{ cursor:pointer; color:var(--bad); }
.stage-body{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height: 320px; gap: 18px; text-align:center; }
.prompt-text{ font-family:var(--serif); font-size:1.5rem; }
.sub-text{ color:var(--ink-soft); font-size:.9rem; }

/* Simon tiles */
.tile-grid{ display:grid; grid-template-columns: repeat(2, 100px); gap:12px; }
.tile{ width:100px; height:100px; border-radius:16px; cursor:pointer; opacity:.55; transition: opacity .12s, transform .08s; border:none; }
.tile:active{ transform: scale(.96); }
.tile.lit{ opacity:1; box-shadow: 0 0 0 4px rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.18); }
.tile.t0{ background:var(--hue-red); } .tile.t1{ background:var(--hue-blue); } .tile.t2{ background:var(--hue-yellow); } .tile.t3{ background:var(--hue-green); }

/* Focus sweep shapes */
.shape-box{ width:150px; height:150px; display:flex; align-items:center; justify-content:center; color:var(--game-ink); }
.shape-box svg{ width:100%; height:100%; }

/* Named game hues — SVGs use fill="currentColor" so they re-tint with the theme */
.hue-red{ color:var(--hue-red); }
.hue-blue{ color:var(--hue-blue); }
.hue-green{ color:var(--hue-green); }
.hue-yellow{ color:var(--hue-yellow); }
.card-target .hue-red, .card-target .hue-blue,
.card-target .hue-green, .card-target .hue-yellow{ display:flex; }

/* Rule switch cards */
.rule-banner{ background: var(--train-soft); color:var(--train); font-weight:700; padding:8px 16px; border-radius:20px; font-size:.85rem; }
.card-target{ width:140px; height:180px; border-radius:14px; background:var(--bg); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; }
.bin-row{ display:flex; gap:28px; margin-top: 6px; }
.bin{ padding:16px 24px; border-radius:var(--r); border:1px dashed var(--line-strong); background:transparent; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; color:var(--ink-soft); transition:all .18s; }
.bin:hover{ border-color: var(--accent); border-style:solid; color:var(--accent); background:var(--accent-wash); }

/* Pattern options */
.option-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.option-btn{ font-size:1.6rem; padding:16px 20px; border-radius:14px; border:1.5px solid var(--line); background:var(--paper); cursor:pointer; min-width:64px; }
.option-btn:hover{ border-color: var(--ink); }

/* Math quiz */
.math-eq{ font-family:var(--mono); font-size:2.4rem; }
.tf-row{ display:flex; gap:16px; }
.tf-btn{ font-size:1.1rem; font-weight:700; padding:16px 34px; border-radius:14px; border:none; cursor:pointer; }
.tf-true{ background: var(--zen-soft); color: var(--zen); }
.tf-false{ background:var(--bad-wash); color:var(--bad); }

/* ---------- Adult mathematics ---------- */
.math-head h1{ color:var(--math); }
.math-note{ max-width:760px; margin:-4px 0 22px; padding:14px 16px; border-left:4px solid var(--math); background:var(--math-soft); color:var(--on-math); font-size:.88rem; line-height:1.55; border-radius:0 12px 12px 0; }
.math-context{ font-family:var(--serif); font-size:1.45rem; line-height:1.45; max-width:520px; }
.math-option{ min-width:112px; font-family:var(--sans); font-size:1rem; }
.math-feedback{ min-height:3.6em; max-width:520px; padding:0 10px; color:var(--ink-soft); line-height:1.5; }
.answer-correct{ border-color:var(--good)!important; background:var(--good-wash)!important; color:var(--good); }
.answer-wrong{ border-color:var(--bad)!important; background:var(--bad-wash)!important; color:var(--bad); }

/* Feedback flash */
.flash-correct{ animation: flashGood .35s ease; }
.flash-wrong{ animation: flashBad .35s ease; }
@keyframes flashGood{ 0%{ background: var(--good-wash);} 100%{ background: var(--paper);} }
@keyframes flashBad{ 0%{ background: var(--bad-wash);} 100%{ background: var(--paper);} }

/* ---------- Zen ---------- */
.breath-wrap{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.breath-circle{
  width: 220px; height:220px; border-radius:50%; background: radial-gradient(circle at 35% 30%, var(--surface), var(--zen-soft));
  border:2px solid var(--zen); display:flex; align-items:center; justify-content:center;
  transition: transform 4s cubic-bezier(.4,0,.2,1);
  transform: scale(.7);
}
.breath-circle span{ font-family:var(--serif); color:var(--zen); font-size:1.15rem; }
.zen-timer{ font-family:var(--mono); font-size:2rem; color: var(--ink); }
.pattern-picker{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.pill{ padding:9px 15px; border-radius:var(--r); border:1px solid var(--line-strong); font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; line-height:normal; color:var(--ink-soft); cursor:pointer; background:transparent; appearance:none; transition:all .18s; }
.pill:hover{ border-color:var(--accent); color:var(--accent); }
.pill.active{ background: var(--accent); border-color:var(--accent); color:var(--on-accent); }
#domainFilter .pill.active{ background: var(--train); border-color:var(--train); }
.thinking-filter{ justify-content:flex-start; margin-bottom:20px; }
.thinking-filter .pill.active{ background:var(--thinking);border-color:var(--thinking); }

/* ---------- Thinking Lab ---------- */
.thinking-head h1{ color:var(--thinking); }
.thinking-note{ max-width:800px; margin:-4px 0 22px; padding:14px 16px; border-left:4px solid var(--thinking); background:var(--thinking-soft); color:var(--on-thinking); font-size:.88rem; line-height:1.55; border-radius:0 12px 12px 0; }
.thinking-domain-counts{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.thinking-domain-counts span{ padding:9px 12px; border:1px solid var(--thinking-soft-line, var(--line)); border-radius:12px; background:var(--thinking-soft); color:var(--on-thinking); font-size:.8rem; }
.thinking-domain-counts strong{ margin-left:5px; color:var(--thinking); font-family:var(--serif); font-size:1rem; }
.thinking-method{ margin-top:14px; padding:11px 14px; border-radius:12px; background:var(--thinking-soft); color:var(--thinking); font-weight:700; font-size:.86rem; }
.thinking-workbench{ max-width:760px; }
.thinking-scenario{ padding:18px; border-radius:16px; background:var(--thinking-soft); color:var(--on-thinking); font-family:var(--serif); font-size:1.2rem; line-height:1.5; }
.thinking-fields{ display:grid; gap:15px; margin-top:20px; }
.thinking-fields label{ display:grid; gap:7px; color:var(--ink); font-size:.86rem; font-weight:700; }
.thinking-fields textarea{ width:100%; resize:vertical; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper); font:400 .92rem/1.5 var(--sans); }
.thinking-fields textarea:focus-visible{ outline:3px solid var(--thinking); outline-offset:2px; border-color:var(--thinking); }
.field-error{ min-height:1.4em; margin-top:10px; color:var(--bad); font-size:.84rem; font-weight:700; }
.response-review{ display:grid; gap:10px; margin-top:18px; }
.response-review h3{ color:var(--thinking); }
.response-review div{ padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.response-review p{ margin-top:5px; color:var(--ink-soft); font-size:.88rem; line-height:1.45; white-space:pre-wrap; }
.worked-model{ margin-top:18px; padding:18px; border:1px solid var(--thinking-soft-line, var(--line)); border-radius:16px; background:var(--thinking-soft); }
.worked-model p{ color:var(--on-thinking); font-size:.9rem; line-height:1.55; }
.practice-ledger{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.practice-ledger span{ padding:7px 10px; border-radius:999px; background:var(--zen-soft); color:var(--zen); font-size:.76rem; }

/* ---------- Guided-text meditation (body scan / loving-kindness / PMR) ---------- */
.guided-text-wrap{ display:flex; flex-direction:column; align-items:center; gap:30px; max-width:460px; }
.guided-text{ font-family:var(--serif); font-size:1.35rem; line-height:1.55; text-align:center; color:var(--ink); min-height:5.5em; display:flex; align-items:center; }
.guided-fade-in{ animation: guidedFade 1.1s ease; }
@keyframes guidedFade{ 0%{ opacity:0; transform:translateY(4px);} 100%{ opacity:1; transform:translateY(0);} }

/* ---------- Digit Span ---------- */
.digit-display{ font-family:var(--mono); font-size:4rem; min-height:1.4em; color:var(--accent); transition: opacity .15s ease; }
.digit-entry{ font-family:var(--serif); font-size:1.8rem; letter-spacing:.08em; color:var(--ink); min-height:1.4em; margin-bottom:18px; }
.keypad{ display:grid; grid-template-columns: repeat(3, 64px); gap:10px; justify-content:center; }
.keypad-btn{ padding:16px 0; border-radius:12px; border:1.5px solid var(--line); background:var(--paper); font-size:1.15rem; font-weight:700; cursor:pointer; }
.keypad-btn:hover{ border-color:var(--train); }
.keypad-wide{ grid-column: span 1; font-size:.8rem; }
.keypad-submit{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Trail Blazer ---------- */
.trail-stage{ position:relative; width:100%; background:var(--bg); border-radius:14px; border:1.5px solid var(--line); }
.trail-node{
  position:absolute; width:44px; height:44px; border-radius:50%; transform:translate(-50%,-50%);
  border:1.5px solid var(--train); background:var(--paper); color:var(--train); font-weight:700; font-size:.9rem; cursor:pointer;
}
.trail-node.trail-done{ background:var(--good); border-color:var(--good); color:var(--paper); opacity:.55; cursor:default; }
.flash-node-wrong{ animation: nodeShake .3s ease; }
@keyframes nodeShake{ 0%,100%{ background:var(--paper);} 40%{ background:var(--bad-wash); border-color:var(--bad);} }

/* ---------- Stroop Challenge ---------- */
.stroop-word{ font-family:var(--serif); font-size:3.4rem; font-weight:600; min-height:1.3em; letter-spacing:.02em; }
.stroop-word.hue-red{ color:var(--hue-red); }
.stroop-word.hue-blue{ color:var(--hue-blue); }
.stroop-word.hue-green{ color:var(--hue-green); }
.stroop-word.hue-yellow{ color:var(--hue-yellow); }
.color-choice-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.color-choice-btn{ padding:14px 22px; border-radius:var(--r); border:1px solid currentColor; background:transparent; font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.11em; text-transform:uppercase; cursor:pointer; transition:all .18s; }
.color-choice-btn:hover{ box-shadow:inset 0 0 0 2px currentColor; }
.color-choice-btn:active{ transform: scale(.97); }

/* ---------- Mirror or Same ---------- */
.rotation-row{ display:flex; gap:40px; align-items:center; justify-content:center; flex-wrap:wrap; }
.rotation-shape-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.rotation-shape{ width:90px; height:90px; display:flex; align-items:center; justify-content:center; color:var(--game-ink); }

/* ---------- Extended cognitive tasks ---------- */
.nback-symbol,.lexical-item,.code-target{ font-family:var(--serif); font-size:4rem; color:var(--train); min-height:1.3em; }
.corsi-grid{ display:grid; grid-template-columns:repeat(3,82px); gap:12px; }
.corsi-cell{ width:82px;height:82px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--train-soft);cursor:pointer; }
.corsi-cell.lit,.corsi-cell.chosen{ background:var(--train);box-shadow:0 0 0 4px rgba(46,64,87,.15); }
.pair-study{ display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;width:100%;max-width:480px; }
.pair-study div{ display:flex;justify-content:space-between;gap:10px;background:var(--bg);padding:12px;border-radius:10px; }
.intention-banner{ background:var(--warn-wash);border:1px solid var(--warn-line);color:var(--warn);padding:10px 14px;border-radius:12px;font-weight:700;font-size:.86rem; }
.prospective-number{ width:150px;height:150px;display:grid;place-items:center;border:5px solid transparent;border-radius:22px;background:var(--bg);font-family:var(--serif);font-size:3.5rem; }
.prospective-number.cue{ border-color:var(--warn);background:var(--warn-wash); }
.flanker-row,.stop-arrow{ font-family:var(--serif);font-size:3.1rem;letter-spacing:.12em;white-space:nowrap; }
.stop-arrow{ width:130px;height:130px;border-radius:50%;display:grid;place-items:center;background:var(--good-wash);color:var(--good);transition:background .08s,color .08s; }
.stop-arrow.stop{ background:var(--bad-wash);color:var(--bad); }
.visual-search-grid{ display:grid;gap:8px;width:min(100%,430px); }
.search-item{ aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-weight:800;font-size:1.15rem;cursor:pointer; }
.code-key{ display:flex;gap:8px;flex-wrap:wrap;justify-content:center; }
.code-key div{ width:58px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px;display:grid;place-items:center;gap:4px; }
.code-key span{ font-size:1.35rem; }.code-key strong{ color:var(--train); }
.code-pad{ grid-template-columns:repeat(3,64px); }
.tower-board{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,520px);height:245px;align-items:end; }
.tower-peg{ position:relative;height:220px;border:0;border-bottom:8px solid var(--line-strong);background:transparent;cursor:pointer; }
.tower-post{ position:absolute;width:8px;height:170px;background:var(--line-strong);left:50%;bottom:0;transform:translateX(-50%);border-radius:4px 4px 0 0; }
.tower-discs{ position:absolute;bottom:5px;left:0;right:0;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start; }
.disc{ display:block;height:24px;border-radius:8px;background:var(--train);border:2px solid var(--paper);z-index:2; }
.disc.d1{width:52px}.disc.d2{width:86px}.disc.d3{width:120px}
.tower-peg.selected{ background:var(--train-soft);border-radius:12px 12px 0 0; }

/* ---------- Creativity ---------- */
.speaking-head h1{ color:var(--speaking); }
.speaking-note{ max-width:800px; margin:-4px 0 22px; padding:14px 16px; border-left:4px solid var(--speaking); background:var(--speaking-soft); color:var(--on-speaking); font-size:.88rem; line-height:1.55; border-radius:0 12px 12px 0; }
.speaking-sources{ margin-top:22px; }
.speaking-sources div{ line-height:1.8; }
.speaking-panel{ max-width:720px; }
.speaking-workbench{ max-width:760px; }
.speaking-prompt{ padding:17px 18px; border-radius:15px; background:var(--speaking-soft); color:var(--on-speaking); font-family:var(--serif); font-size:1.15rem; line-height:1.5; }
.speaking-timer{ font-family:var(--mono); color:var(--speaking); font-size:4.4rem; line-height:1; }
.pulse-ring{ width:82px; height:82px; display:grid; place-items:center; border:2px solid var(--speaking); border-radius:50%; color:var(--speaking); font-size:2rem; animation:speakPulse 2.4s ease-in-out infinite; }
@keyframes speakPulse{ 50%{ transform:scale(1.08); box-shadow:0 0 0 12px rgba(132,59,98,.08); } }
.speaking-rubric{ display:grid; gap:16px; margin-top:22px; }
.speaking-rubric fieldset{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.speaking-rubric legend{ padding:0 5px; font-size:.87rem; font-weight:700; }
.rating-row{ display:flex; gap:9px; margin-top:8px; }
.rating-row label{ cursor:pointer; }
.rating-row input{ position:absolute; opacity:0; pointer-events:none; }
.rating-row span{ width:38px; height:38px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:50%; font-weight:700; color:var(--ink-soft); }
.rating-row input:checked + span{ background:var(--speaking); border-color:var(--speaking); color:var(--paper); }
.rating-row input:focus-visible + span{ outline:3px solid var(--speaking); outline-offset:2px; }
.recording-privacy{ margin-top:12px; color:var(--ink-soft); font-size:.78rem; line-height:1.5; }
.pulse-ring.is-recording{ color:var(--bad); border-color:var(--bad); }
.playback-box{ display:grid; gap:8px; margin:16px 0; padding:15px; border:1px solid var(--speaking-soft-line, var(--line)); border-radius:14px; background:var(--speaking-soft); }
.playback-box audio{ width:100%; }
.playback-box small{ color:var(--ink-soft); line-height:1.45; }
.coach-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.coach-card{ padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--bg); }
.coach-card span{ display:block; margin-bottom:7px; color:var(--speaking); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.coach-card h3{ margin-bottom:7px; font-size:1rem; }
.coach-card p{ color:var(--ink-soft); font-size:.86rem; line-height:1.5; }
.coach-card.strength{ background:var(--good-wash); border-color:var(--good-line); }
.coach-card.strength span{ color:var(--good); }
.coach-card.focus{ background:var(--speaking-soft); border-color:var(--speaking-soft-line, var(--line)); }
.coach-card.assignment{ grid-column:1/-1; background:var(--warn-wash); border-color:var(--warn-line); }
.coach-card.assignment span{ color:var(--warn); }

/* ---------- Creativity ---------- */
.creative-note{ max-width:760px; margin:-4px 0 22px; padding:14px 16px; border-left:4px solid var(--create); background:var(--create-soft); color:var(--on-create); font-size:.88rem; line-height:1.55; border-radius:0 12px 12px 0; }
.creative-prompt{ font-family:var(--serif); font-size:1.45rem; line-height:1.45; max-width:530px; padding:20px; border-radius:18px; background:var(--create-soft); color:var(--on-create); }
.remote-clues{ font-family:var(--serif); font-size:2rem; color:var(--create); letter-spacing:.02em; }
.remote-option{ font-family:var(--sans); font-size:1rem; min-width:92px; }
.result-list{ max-height:240px; margin:14px auto 0; }
.aut-object{ font-size:3rem; }
.aut-timer{ font-family:var(--mono); font-size:1.6rem; }
.idea-input-row{ display:flex; gap:10px; width:100%; max-width:420px; }
.idea-input-row input{ flex:1; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); font-size:.95rem; font-family:var(--sans); }
.idea-input-row input:focus{ outline:2px solid var(--create); border-color:var(--create); }
.idea-list{ list-style:none; text-align:left; width:100%; max-width:420px; max-height:160px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.idea-list li{ background: var(--bg); color:var(--ink); padding:8px 12px; border-radius:10px; font-size:.88rem; border:1px solid var(--line); }

.canvas-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
#doodleCanvas{ background:var(--canvas); border-radius:14px; border:1.5px solid var(--line); touch-action:none; cursor:crosshair; }
.doodle-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.swatch{ width:28px; height:28px; padding:0; border-radius:50%; cursor:pointer; border:2px solid var(--canvas); box-shadow: 0 0 0 1px var(--line-strong); appearance:none; }
.swatch.active{ box-shadow: 0 0 0 2px var(--accent); }
input[type=range]{ width:110px; }

/* ---------- Result screen ---------- */
.result-hero{ text-align:center; margin-bottom: 18px; }
.result-hero .big-num{ font-family:var(--mono); font-size:3rem; font-weight:500; letter-spacing:-.03em; color:var(--ink); }
.result-hero .caption{ color:var(--ink-soft); font-size:.9rem; }

footer.note{ text-align:center; color:var(--ink-soft); font-size:.78rem; margin-top: 40px; line-height:1.6; max-width:560px; margin-left:auto; margin-right:auto; }
.home-caveat{ text-align:left; margin-bottom:22px; }
.reset-link{ text-decoration:underline; cursor:pointer; color:inherit; padding:4px 2px; }

@media (max-width:560px){
  .topbar{ padding:12px 16px; }
  main{ padding: 26px 14px 60px; }
  .pill{ min-height:44px; }   /* meet the 44px touch-target guideline on phones */
  .icon-btn{ width:44px; height:44px; }
  .reset-link{ padding:12px 6px; }
  .panel,.stage{ padding:22px 18px; }
  #doodleCanvas{ width:100%; height:auto; }
  .math-option{ min-width:96px; }
  .corsi-grid{ grid-template-columns:repeat(3,72px); }.corsi-cell{ width:72px;height:72px; }
  .pair-study{ grid-template-columns:1fr; }
  .flanker-row{ font-size:2.35rem; }
  .tower-board{ gap:5px; }.disc.d1{width:42px}.disc.d2{width:68px}.disc.d3{width:92px}
  .coach-grid{ grid-template-columns:1fr; }
  .coach-card.assignment{ grid-column:auto; }
}

/* ---------- Collapsed nav (B3 pattern) ----------
   Seven tabs used to wrap onto two rows and pin ~19% of a phone screen.
   Below 1024px they collapse behind a menu button instead. */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:4px; padding:10px; }
  .nav-toggle span{ display:block; height:1.5px; width:100%; background:var(--accent); transition:all .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

  .tabs{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px 16px 18px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .tabs.open{ display:flex; }
  .tab{ display:flex; align-items:center; min-height:44px; text-align:left; padding:12px; font-size:12px; border-radius:var(--r); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}