/* Brain Gym — calm, warm, high-contrast art direction */
:root {
  --bg: #FBF5EA; --bg2: #F3EADA; --card: #FFFFFF; --line: #E8DDCB; --line2: #D9CCB5;
  --ink: #2B2640; --ink2: #575170; --ink3: #7A7390;
  --primary: #17806D; --primary-d: #0E5E50; --primary-l: #2BB39A;
  --c-memory: #7C6CF0; --c-maths: #E99A22; --c-language: #22A88F; --c-focus: #EE5F4F; --c-logic: #3F86DC;
  --good: #1E9E62; --good-d: #137A4A; --good-ink: #137A4A; --bad: #E2474B; --bad-d: #B32F33;
  --tile: #FFF3D6; --tile-b: #E9CF95; --tile-s: #DDBF7E;
  --r: 20px; --ts: 1;
  --shadow: 0 2px 0 rgba(59, 51, 85, .05), 0 12px 32px -8px rgba(59, 51, 85, .16);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
html.cb { --good: #1F6FD1; --good-d: #164F96; --good-ink: #164F96; --bad: #D86F00; --bad-d: #A35300; }
html[data-text="large"] { --ts: 1.14; }
html[data-text="xl"] { --ts: 1.3; }
html { font-size: calc(clamp(15px, 10.5px + 0.95vmin, 20px) * var(--ts)); height: 100%; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.3;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
body::before { /* soft background blobs */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 0% 0%, rgba(124, 108, 240, .09), transparent 70%),
    radial-gradient(40vmax 30vmax at 100% 100%, rgba(34, 168, 143, .10), transparent 70%),
    radial-gradient(30vmax 22vmax at 100% 0%, rgba(233, 154, 34, .08), transparent 70%);
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
button:focus { outline: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 4px solid #3F86DC; outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
svg { display: block; }

#app { position: fixed; inset: 0; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.99);
  transition: opacity .32s ease, transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s .38s;
}
.screen.active { opacity: 1; visibility: visible; transform: none; transition: opacity .32s ease, transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.screen-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 2px 2px 8px; }
.reduce-motion .screen { transform: none; transition: opacity .15s, visibility 0s .15s; }
.reduce-motion .screen.active { transition: opacity .15s, visibility 0s; }

/* ---------- common pieces ---------- */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border: 2px solid #F0E7D8; padding: 1rem 1.1rem; }
.card-h { font-weight: 800; font-size: 1.05rem; margin-bottom: .6rem; color: var(--ink); }
.card-h small { font-weight: 600; color: var(--ink3); font-size: .8rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 800; color: var(--ink3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.2rem; min-width: 44px;
  padding: .6em 1.2em; border-radius: 16px; border: 2px solid var(--line); background: #fff; color: var(--ink);
  font-weight: 800; font-size: 1.05rem; box-shadow: 0 4px 0 var(--line); transition: transform .08s, box-shadow .08s, background .2s;
  text-decoration: none;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn.primary { background: var(--primary); border-color: var(--primary-d); color: #fff; box-shadow: 0 5px 0 var(--primary-d); }
.btn.primary:active { box-shadow: 0 2px 0 var(--primary-d); }
.btn.big { width: 100%; min-height: 4rem; flex-direction: column; gap: .1em; font-size: 1.3rem; border-radius: 18px; }
.btn-sub { font-size: .85rem; font-weight: 600; opacity: .92; }
.btn-sub:empty { display: none; }
.btn.danger { background: var(--bad); border-color: var(--bad-d); color: #fff; box-shadow: 0 4px 0 var(--bad-d); }
.btn.danger-lite { color: #B32F33; }
.icon-btn {
  width: 3rem; height: 3rem; min-width: 44px; min-height: 44px; border-radius: 14px; border: 2px solid var(--line); background: #fff;
  display: grid; place-items: center; box-shadow: 0 3px 0 var(--line); color: var(--ink); padding: 0; flex: none;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.icon-btn svg { width: 58%; height: 58%; }
.icon-btn.small { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.icon-btn .ico-off { display: none; }
.icon-btn.off .ico-on { display: none; }
.icon-btn.off .ico-off { display: block; }
.row-btns { display: flex; gap: .7rem; }
.row-btns .btn { flex: 1; }
.skill-tag { display: inline-block; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--sk, var(--primary)); padding: .2em .7em; border-radius: 999px; }
.bubble {
  position: relative; background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: .7em 1em; font-weight: 700;
  font-size: 1.08rem; box-shadow: var(--shadow); color: var(--ink);
}
.bubble::before { content: ""; position: absolute; left: -11px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right-color: var(--line); border-left: 0; }
.bubble::after { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.coach-goat { width: 7rem; flex: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.stat { background: var(--bg); border-radius: 14px; padding: .55rem .3rem; text-align: center; }
.stat b { display: block; font-size: 1.45rem; font-weight: 900; }
.stat small { color: var(--ink2); font-weight: 700; font-size: .78rem; }

/* ---------- goat ---------- */
.goat { width: 100%; height: auto; overflow: visible; }
.goat .m, .goat .eyes-shut, .goat .brows { display: none; }
.goat.mood-happy .m-happy, .goat.mood-cheer .m-cheer, .goat.mood-oops .m-oops, .goat.mood-think .m-think { display: inline; }
.goat.mood-cheer .eyes-open { display: none; }
.goat.mood-cheer .eyes-shut, .goat.mood-oops .brows, .goat.mood-think .brows { display: inline; }
.goat .eyes-open { transform-origin: 80px 88px; animation: blink 5.5s infinite; }
.goat.mood-think .pupils { transform: translate(3px, -3px); }
.goat .ear-l { transform-origin: 50px 70px; animation: earL 6s infinite; }
.goat .ear-r { transform-origin: 110px 70px; animation: earR 6s infinite 1.3s; }
.goat-bob { transform-origin: 80px 150px; }
.goat.anim-hop .goat-bob { animation: hop .55s cubic-bezier(.3, .7, .4, 1.4); }
.goat.anim-tilt .goat-bob { animation: tilt .6s ease; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes earL { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-4deg); } }
@keyframes earR { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-10deg); } 96% { transform: rotate(4deg); } }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-12%) scale(1.03, .97); } 70% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
.reduce-motion .goat *, .reduce-motion .goat-bob { animation: none !important; }

/* ---------- HOME ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; max-width: 1120px; width: 100%; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .5rem; }
.logo-goat { width: 2.9rem; display: block; }
.brand h1 { font-size: 1.75rem; font-weight: 900; letter-spacing: -.01em; }
.brand h1 span { color: var(--primary); }
.top-actions { display: flex; align-items: center; gap: .5rem; }
.streak-pill { display: flex; align-items: center; gap: .25rem; height: 3rem; padding: 0 .85rem 0 .65rem; border-radius: 999px; background: #fff; border: 2px solid var(--line); color: #C9BFAE; font-weight: 900; font-size: 1.2rem; box-shadow: 0 3px 0 var(--line); }
.streak-pill svg { width: 1.5rem; height: 1.5rem; }
.streak-pill.lit { color: #E8702A; border-color: #F6C9A4; background: #FFF4EA; box-shadow: 0 3px 0 #F6C9A4; }
.streak-pill.lit b { color: var(--ink); }
.home-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8rem; max-width: 1120px; width: 100%; margin: .6rem auto 0; overflow-y: auto; padding: 2px 2px 6px; }
.home-left { display: contents; }
.coach { order: 1; display: flex; align-items: center; gap: 1rem; padding: 0 .2rem; }
.coach .coach-goat { width: clamp(4.8rem, 13vh, 8rem); }
.home-right { order: 2; }
.week { order: 3; }
.home-nav { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.daily { display: flex; flex-direction: column; gap: .8rem; border-top: 6px solid var(--primary-l); }
.daily-head .date { font-size: 1.3rem; font-weight: 900; margin-top: .1rem; }
.daily-games { display: flex; flex-direction: column; gap: .5rem; }
.dchip { display: flex; align-items: center; gap: .75rem; padding: .5rem .7rem; border-radius: 16px; background: var(--bg); border: 2px solid transparent; }
.dchip-ico { width: 2.9rem; height: 2.9rem; flex: none; border-radius: 12px; background: #fff; padding: .25rem; box-shadow: inset 0 0 0 3px var(--sk); }
.dchip-txt { flex: 1; display: flex; flex-direction: column; }
.dchip-txt b { font-size: 1.1rem; }
.dchip-txt small { font-weight: 800; color: var(--ink2); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.dchip-state { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #fff; border: 2px solid var(--line); color: var(--ink3); flex: none; }
.dchip.done { background: #EAF7F1; border-color: #BFE6D4; }
html.cb .dchip.done { background: #E8F0FB; border-color: #B9CFEE; }
.dchip.done .dchip-state { background: var(--good); border-color: var(--good-d); color: #fff; }
.dchip-state svg { width: 70%; }
.week { background: rgba(255, 255, 255, .7); border-radius: var(--r); padding: .6rem .9rem .7rem; border: 2px solid #F0E7D8; }
.week-title { font-weight: 800; font-size: .85rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.wday small { display: block; font-weight: 800; color: var(--ink3); font-size: .78rem; margin-top: .15rem; }
.wd-dot { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: 0 auto; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line); color: #fff; }
.wd-dot svg { width: 70%; }
.wday.done .wd-dot { background: var(--good); border-color: var(--good-d); }
.wday.today .wd-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary-l); }
.wday.today small { color: var(--primary); }
.tile-btn { flex-direction: column; min-height: 4.6rem; gap: .25rem; font-size: 1.1rem; }
.tile-btn svg { width: 1.7rem; height: 1.7rem; color: var(--primary); }
.home-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; max-width: 1120px; width: 100%; margin: .4rem auto 0; font-size: .85rem; color: var(--ink3); font-weight: 700; }
.gc-link { color: var(--ink2); text-decoration: none; font-weight: 800; padding: .4rem .6rem; border-radius: 10px; }
.gc-link:hover { background: #fff; }

@media (min-aspect-ratio: 5/4) and (min-width: 640px) {
  .home-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 1.2rem; }
  .home-left { display: flex; flex-direction: column; gap: .8rem; align-self: stretch; justify-content: center; }
  .home-right { align-self: center; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .home-body { margin-top: .3rem; gap: .8rem; }
  .coach .coach-goat { width: 4.2rem; }
  .bubble { font-size: .95rem; padding: .5em .8em; }
  .daily { gap: .45rem; padding: .7rem .9rem; }
  .daily-games { flex-direction: row; }
  .dchip { flex: 1; flex-direction: column; text-align: center; gap: .25rem; padding: .4rem; }
  .dchip-state { position: absolute; transform: translate(1.7rem, -.3rem); width: 1.6rem; height: 1.6rem; font-size: .8rem; }
  .dchip { position: relative; }
  .dchip-ico { width: 2.3rem; height: 2.3rem; }
  .dchip-txt b { font-size: .92rem; }
  .btn.big { min-height: 3.3rem; font-size: 1.15rem; }
  .tile-btn { min-height: 3.2rem; flex-direction: row; }
  .week { padding: .4rem .7rem .5rem; }
  .wd-dot { width: 1.8rem; height: 1.8rem; }
  .home-foot { margin-top: .2rem; }
  .brand h1 { font-size: 1.4rem; }
  .logo-goat { width: 2.3rem; }
  .icon-btn, .streak-pill { height: 2.6rem; }
  .icon-btn { width: 2.6rem; }
}

/* ---------- sub-screens header ---------- */
.subbar { display: flex; align-items: center; gap: .8rem; max-width: 1120px; width: 100%; margin: 0 auto .7rem; }
.subbar h2 { font-size: 1.5rem; font-weight: 900; }
.subbar-note { margin-left: auto; color: var(--ink3); font-weight: 800; font-size: .9rem; }

/* ---------- FREE PLAY ---------- */
.free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 11.5rem), 1fr)); gap: .8rem; max-width: 1120px; margin: 0 auto; }
.gcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .9rem .6rem .8rem;
  background: #fff; border: 2px solid #F0E7D8; border-radius: var(--r); box-shadow: 0 5px 0 #EADFCB, var(--shadow); text-align: center;
  transition: transform .12s, box-shadow .12s; overflow: hidden;
}
.gcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--sk); }
.gcard:hover { transform: translateY(-2px); }
.gcard:active { transform: translateY(3px); box-shadow: 0 2px 0 #EADFCB; }
.gc-ico { width: 3.6rem; height: 3.6rem; }
.gc-name { font-weight: 900; font-size: 1.1rem; }
.gc-skill { font-size: .75rem; font-weight: 800; color: #fff; background: var(--sk); border-radius: 999px; padding: .1em .65em; text-transform: uppercase; letter-spacing: .07em; }
.gc-best { font-size: .85rem; font-weight: 800; color: var(--ink2); }
@media (min-aspect-ratio: 3/2) and (max-height: 560px) {
  .free-grid { grid-template-columns: repeat(5, 1fr); }
  .gc-ico { width: 2.6rem; height: 2.6rem; }
  .gcard { padding: .6rem .4rem; }
  .gc-name { font-size: .95rem; }
}

/* ---------- INTRO ---------- */
.intro-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8rem; max-width: 1120px; width: 100%; margin: 0 auto; }
.intro-info { display: flex; flex-direction: column; gap: .7rem; border-top: 6px solid var(--sk); }
.intro-title { display: flex; align-items: center; gap: .8rem; }
.intro-ico { width: 3.6rem; height: 3.6rem; flex: none; background: var(--bg); border-radius: 14px; padding: .3rem; }
.intro-title h3 { font-size: 1.7rem; font-weight: 900; margin-top: .25rem; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.steps li { display: flex; align-items: center; gap: .7rem; font-size: 1.15rem; font-weight: 700; }
.steps li span { width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sk); color: #fff; font-weight: 900; }
.demo-box { position: relative; flex: 1; min-height: 12rem; overflow: hidden; padding: 0; background: var(--bg); }
.demo-label { position: absolute; top: .55rem; left: .8rem; font-weight: 900; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ink2); padding: .15em .6em; border-radius: 999px; }
.stage.demo { position: absolute; inset: 2.3rem .6rem .6rem; pointer-events: none; font-size: .85em; }
.demo-hand { position: absolute; left: 0; top: 0; width: 44px; height: 44px; opacity: 0; transition: transform .55s cubic-bezier(.4, .1, .2, 1), opacity .3s; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); pointer-events: none; }
.demo-hand.on { opacity: 1; }
.demo-hand svg { transition: transform .12s; transform-origin: 40% 20%; }
.demo-hand.press svg { transform: scale(.82); }
@media (min-aspect-ratio: 5/4) and (min-width: 640px) {
  .intro-body { flex-direction: row; align-items: stretch; }
  .intro-info { flex: 0 0 min(44%, 30rem); justify-content: center; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .subbar { margin-bottom: .4rem; }
  .intro-info { gap: .4rem; padding: .7rem .9rem; }
  .intro-title h3 { font-size: 1.3rem; }
  .intro-ico { width: 2.6rem; height: 2.6rem; }
  .steps li { font-size: 1rem; }
  .steps li span { width: 1.6rem; height: 1.6rem; }
}

/* ---------- PLAY ---------- */
.hud { display: flex; align-items: center; gap: .7rem; max-width: 1120px; width: 100%; margin: 0 auto; position: relative; z-index: 5; }
.hud-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hud-title b { font-size: 1.25rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-title small { font-weight: 800; color: var(--ink2); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.hud-pos { background: var(--bg2); border-radius: 999px; padding: 0 .5em; margin-left: .2em; color: var(--ink); }
.hud-level { font-weight: 900; font-size: .9rem; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: .3em .8em; white-space: nowrap; color: var(--ink2); }
.hud-level.bump { animation: bump .6s; background: #FFF4D6; border-color: #F2C76B; color: var(--ink); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 100% { transform: scale(1); } }
.hud-score { display: flex; flex-direction: column; align-items: flex-end; min-width: 3.6rem; }
.hud-score small { font-weight: 800; color: var(--ink3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.hud-score b { font-size: 1.7rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-goat { position: relative; width: 3.4rem; flex: none; }
.say { position: absolute; right: 0; top: calc(100% + 2.6rem); background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: .35em .8em; font-weight: 800; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .2s, transform .25s; pointer-events: none; font-size: 1rem; z-index: 6; }
.say.show { opacity: 1; transform: none; }
.say::before { content: ""; position: absolute; right: 1.2rem; top: -9px; border: 8px solid transparent; border-bottom-color: var(--line); border-top: 0; }
.meters { display: flex; gap: .8rem; align-items: center; max-width: 1120px; width: 100%; margin: .55rem auto 0; }
.timer { flex: 1; display: flex; align-items: center; gap: .5rem; }
.timer-track { flex: 1; height: .9rem; border-radius: 999px; background: var(--bg2); overflow: hidden; border: 2px solid var(--line); }
.timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--sk), var(--sk)); transform-origin: left; border-radius: 999px; }
.timer.low .timer-fill { background: var(--bad); }
.timer-txt { font-weight: 900; font-size: 1.2rem; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.timer.low .timer-txt { color: var(--bad-d); }
.combo { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.combo-count { font-size: .8rem; font-weight: 800; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; min-width: 5.6em; text-align: right; }
.combo-track { width: 4.5rem; height: .7rem; border-radius: 999px; background: var(--bg2); overflow: hidden; border: 2px solid var(--line); }
.combo-fill { height: 100%; width: 0; background: linear-gradient(90deg, #F2A93B, #EE5F4F); border-radius: 999px; transition: width .25s; }
.combo-mult { font-weight: 900; font-size: 1.05rem; min-width: 2.2em; color: var(--ink3); }
.combo.hot .combo-mult { color: #D9541E; }
.combo.hot .combo-count { color: #D9541E; }
.stage-wrap { position: relative; flex: 1; min-height: 0; max-width: 1120px; width: 100%; margin: .5rem auto 0; }
.stage { position: absolute; inset: 0; display: flex; container-type: size; }
.countdown, .timeup { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(251, 245, 234, .82); backdrop-filter: blur(3px); z-index: 4; border-radius: var(--r); }
.countdown[hidden], .timeup[hidden] { display: none; }
.cd-card { text-align: center; background: #fff; border-radius: 24px; padding: 1.2rem 2rem; box-shadow: var(--shadow); border-top: 6px solid var(--sk); max-width: 92%; }
.cd-title { font-size: 1.6rem; font-weight: 900; }
.cd-rule { font-size: 1.15rem; font-weight: 700; color: var(--ink2); margin-top: .3rem; }
.cd-num { font-size: 4.5rem; font-weight: 900; color: var(--sk); line-height: 1.1; margin-top: .3rem; }
.pulse { animation: cdpulse .5s ease-out; }
@keyframes cdpulse { 0% { transform: scale(1.5); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
.timeup-card { font-size: 2.6rem; font-weight: 900; background: #fff; padding: .6rem 1.6rem; border-radius: 22px; box-shadow: var(--shadow); animation: cdpulse .45s; }
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .hud .icon-btn { width: 2.6rem; height: 2.6rem; }
  .hud-title b { font-size: 1.05rem; }
  .hud-goat { width: 2.7rem; }
  .meters { margin-top: .3rem; }
  .stage-wrap { margin-top: .3rem; }
  .cd-num { font-size: 3rem; }
  .cd-card { padding: .7rem 1.4rem; }
}
@media (max-width: 480px) {
  .hud-level { display: none; }
  .combo-count { display: none; }
}

/* ---------- shared game bits ---------- */
.g-tiles, .g-pairs, .g-odd, .g-path, .g-choice, .g-builder { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.4rem, 2.2cqh, 1rem); }
.g-prompt { font-size: 1.2rem; font-weight: 800; text-align: center; min-height: 1.6em; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.g-prompt small { font-weight: 700; color: var(--ink2); font-size: .9rem; }
.dots { display: inline-flex; gap: .25rem; }
.dots i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); }
.dots i.on { background: var(--good); border-color: var(--good-d); }
.shake { animation: shake .42s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.pop-in { animation: popin .32s cubic-bezier(.3, .8, .4, 1.3); }
@keyframes popin { 0% { transform: scale(.9); opacity: .35; } 100% { transform: none; opacity: 1; } }
.reduce-motion .shake, .reduce-motion .pop-in, .reduce-motion .pulse { animation: none; }
.float-text { position: fixed; z-index: 60; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.7rem; color: var(--good-ink); pointer-events: none; animation: floatup 1.05s ease-out forwards; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; }
.float-text.big { font-size: 2.4rem; color: #D9541E; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.reduce-motion .float-text { animation: fadeout 1s forwards; }
@keyframes fadeout { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* mark icons on right / wrong (never colour alone) */
.mc-btn.right::after, .tile.found::after, .odd-cell.right::after, .path-cell.right::after,
.mc-btn.wrong::after, .tile.miss::after, .odd-cell.wrong::after, .path-cell.wrong::after {
  position: absolute; top: -.55rem; right: -.55rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 900; color: #fff; border: 3px solid #fff; z-index: 2; line-height: 1;
}
.mc-btn.right::after, .tile.found::after, .odd-cell.right::after, .path-cell.right::after { content: "\2713"; background: var(--good-d); }
.mc-btn.wrong::after, .tile.miss::after, .odd-cell.wrong::after, .path-cell.wrong::after { content: "\2715"; background: var(--bad-d); }
.tile.found::after, .tile.miss::after { top: .15rem; right: .15rem; width: 1.3rem; height: 1.3rem; font-size: .8rem; border-width: 2px; }

/* ---------- Tile Recall ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(5px, 1.6cqmin, 12px); width: min(96cqw, calc(100cqh - 3.6rem), 34rem); aspect-ratio: 1; }
.tile { position: relative; border-radius: 16%; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); padding: 0; transition: background .18s, transform .18s, border-color .18s; }
.tile:active { transform: translateY(2px); }
.tile.lit { background: var(--c-memory); border-color: #5644D6; box-shadow: 0 4px 0 #5644D6, 0 0 0 4px rgba(124, 108, 240, .25); transform: scale(1.04); }
.tile.found { background: var(--good); border-color: var(--good-d); box-shadow: 0 4px 0 var(--good-d); }
.tile.miss { background: var(--bad); border-color: var(--bad-d); box-shadow: 0 4px 0 var(--bad-d); }
.tile.reveal { background: #DCD6FB; border: 3px dashed #5644D6; }

/* ---------- Pair Match ---------- */
.pair-board { flex: 1; width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); grid-auto-rows: calc(var(--cw) * 1.12); justify-content: center; align-content: center; }
.pcard { position: relative; margin: 4px; padding: 0; border: 0; background: none; perspective: 700px; }
.pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3, .7, .3, 1.1); }
.pcard.up .pc-in, .pcard.done .pc-in { transform: rotateY(180deg); }
.pc-back, .pc-front { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 3px solid #5644D6; box-shadow: 0 4px 0 #4B3BC2; }
.pc-back { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25) 0 12%, transparent 13%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .18) 0 10%, transparent 11%), linear-gradient(145deg, #8E80F5, #6A59E6); }
.pc-back::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; color: rgba(255, 255, 255, .85); font-size: calc(var(--cw) * .38); }
.pc-front { background: #fff; transform: rotateY(180deg); border-color: var(--line2); box-shadow: 0 4px 0 var(--line2); display: grid; place-items: center; }
.pc-front svg { width: 72%; height: 72%; }
.pcard.done .pc-front { border-color: var(--good); box-shadow: 0 0 0 3px rgba(30, 158, 98, .25); opacity: .72; }
.reduce-motion .pc-in { transition: none; }

/* ---------- multiple choice ---------- */
.mc-prompt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 0; max-width: 100%; }
.mc-options { display: grid; gap: clamp(.5rem, 2cqmin, .9rem); width: min(100%, 36rem); grid-template-columns: 1fr 1fr; }
.mc-options.n3 { grid-template-columns: repeat(3, 1fr); }
.mc-options.n5 { display: flex; flex-wrap: wrap; justify-content: center; }
.mc-options.n5 .mc-btn { flex: 1 1 30%; }
.mc-btn {
  position: relative; min-height: clamp(3.4rem, 15cqh, 6rem); border-radius: 18px; background: #fff; border: 3px solid var(--line);
  box-shadow: 0 5px 0 var(--line); font-weight: 900; font-size: clamp(1.4rem, 6cqmin, 2.4rem); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .3rem .6rem; transition: transform .08s, background .15s, border-color .15s;
}
.mc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.mc-btn.right { background: var(--good); border-color: var(--good-d); box-shadow: 0 5px 0 var(--good-d); color: #fff; animation: pickok .35s; }
.mc-btn.wrong { background: var(--bad); border-color: var(--bad-d); box-shadow: 0 5px 0 var(--bad-d); color: #fff; }
.mc-btn.reveal { border: 3px dashed var(--good); box-shadow: 0 5px 0 var(--good); }
@keyframes pickok { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
.reduce-motion .mc-btn.right { animation: none; }
.keycap { position: absolute; left: .45rem; top: .3rem; font-size: .72rem; font-weight: 800; color: var(--ink3); opacity: .8; }
.mc-btn.right .keycap, .mc-btn.wrong .keycap { color: #fff; }
@media (hover: none) { .keycap { display: none; } }
.ask { font-size: 1.25rem; font-weight: 800; color: var(--ink2); text-align: center; }
.ask b { color: var(--ink); }
@container (max-height: 300px) and (min-width: 560px) {
  .mc-options.n4 { grid-template-columns: repeat(4, 1fr); width: min(100%, 48rem); }
  .mc-options.n5 { flex-wrap: nowrap; width: min(100%, 52rem); }
  .mc-options.n5 .mc-btn { flex: 1 1 0; }
}

/* Quick Sums */
.eq { display: flex; align-items: center; gap: .35em; font-size: clamp(2.2rem, 13cqmin, 5rem); font-weight: 900; background: #fff; padding: .15em .6em; border-radius: 22px; box-shadow: var(--shadow); border-bottom: 6px solid var(--c-maths); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-eq { color: var(--ink3); }
.eq-ans { min-width: 1.4em; text-align: center; color: var(--c-maths); }
.eq-ans.filled { color: var(--good-ink); }
.g-sums { gap: clamp(.8rem, 6cqh, 2.2rem); }

/* Which is bigger */
.mc-options.duo { width: min(100%, 44rem); grid-template-columns: 1fr 1fr; gap: clamp(.7rem, 3cqmin, 1.4rem); }
.duo .mc-btn { min-height: clamp(6rem, 52cqh, 15rem); font-size: clamp(1.7rem, 9cqmin, 3.6rem); border-radius: 24px; border-bottom-width: 3px; }
.duo .mc-btn:not(.right):not(.wrong) { background: linear-gradient(#fff, #FFF8EA); }
.frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.frac span + span { border-top: .09em solid currentColor; padding-top: .04em; margin-top: .04em; min-width: 1.2em; text-align: center; }
.g-bigger { gap: clamp(.6rem, 4cqh, 1.6rem); }

/* Missing letter / word tiles */
.word-row { display: flex; gap: clamp(4px, 1.2cqmin, 9px); }
.wl {
  width: min(4.3rem, 11cqw, 18cqh); aspect-ratio: 1 / 1.08; background: var(--tile); border: 3px solid var(--tile-b); border-radius: 12px;
  font-size: min(2.6rem, 6.4cqw, 11cqh); font-weight: 900; display: grid; place-items: center; box-shadow: 0 4px 0 var(--tile-s); color: var(--ink);
}
.wl.gap { background: #fff; border: 3px dashed var(--c-language); color: var(--c-language); box-shadow: none; animation: gapPulse 1.4s infinite; }
.wl.filled { background: var(--good); border: 3px solid var(--good-d); color: #fff; box-shadow: 0 4px 0 var(--good-d); animation: popin .3s; }
@keyframes gapPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.reduce-motion .wl.gap { animation: none; }
.letters { letter-spacing: .08em; }
.g-missing { gap: clamp(.8rem, 7cqh, 2.4rem); }

/* Word Builder */
.g-builder { width: min(100%, 44rem); margin: 0 auto; gap: clamp(.35rem, 1.8cqh, .8rem); justify-content: stretch; }
.wb-found { align-self: stretch; flex: 1 1 auto; min-height: 2.8rem; overflow-y: auto; display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; background: rgba(255, 255, 255, .65); border-radius: 16px; padding: .55rem; border: 2px dashed var(--line2); }
.wb-hint { color: var(--ink3); font-weight: 700; margin: auto; }
.wb-chip { background: #fff; border: 2px solid var(--c-language); border-radius: 999px; padding: .15em .7em; font-weight: 900; font-size: 1rem; letter-spacing: .04em; animation: popin .3s; height: fit-content; }
.wb-chip.full { background: #FFF1C9; border-color: #E99A22; }
.wb-msg { min-height: 1.4em; font-weight: 800; font-size: 1.05rem; color: var(--ink2); text-align: center; }
.wb-msg.good { color: var(--good-ink); }
.wb-msg.bad { color: var(--bad-d); }
.wb-msg.warn { color: #9A5A00; }
.wb-current { min-height: min(4.2rem, 14cqh); display: flex; justify-content: center; align-items: center; gap: 5px; flex: none; }
.wb-current .wl { width: min(3.4rem, 11cqw, 13cqh); font-size: min(2rem, 6cqw, 8cqh); }
.wb-current.ok .wl { background: var(--good); border-color: var(--good-d); color: #fff; box-shadow: 0 4px 0 var(--good-d); }
.wb-ph { color: var(--ink3); font-weight: 700; font-size: 1.05rem; }
.wb-rack { display: flex; justify-content: center; gap: clamp(4px, 1.4cqw, 10px); flex: none; }
.wb-l {
  width: min(4.4rem, 12.4cqw, 17cqh); aspect-ratio: 1; font-size: min(2.2rem, 7cqw, 9cqh); font-weight: 900; background: var(--tile); border: 3px solid var(--tile-b);
  border-radius: 16px; box-shadow: 0 5px 0 var(--tile-s); padding: 0; transition: transform .1s, opacity .15s;
}
.wb-l:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tile-s); }
.wb-l.used { opacity: .28; transform: translateY(4px); box-shadow: none; }
.wb-ctrl { display: flex; justify-content: center; gap: .6rem; flex: none; }
.wb-c { min-width: 5.2rem; min-height: min(3.5rem, 15cqh); border-radius: 14px; border: 2px solid var(--line); background: #fff; box-shadow: 0 4px 0 var(--line); display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: 1.35rem; font-weight: 900; padding: .2rem .8rem; }
.wb-c small { font-size: .9rem; font-weight: 800; }
.wb-c:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.wb-c.ok { background: var(--primary); color: #fff; border-color: var(--primary-d); box-shadow: 0 4px 0 var(--primary-d); min-width: 7rem; }

/* Colour Clash */
.rule { font-size: 1.15rem; font-weight: 800; background: #fff; border: 2px solid var(--line); padding: .3em 1em; border-radius: 999px; }
.rule.word { background: #FFEBB0; border-color: #E9B949; }
.clash-card { position: relative; background: #2B2744; border-radius: 24px; min-width: min(80cqw, 26rem); height: clamp(5rem, 30cqh, 12rem); display: grid; place-items: center; padding: 0 1.4rem; box-shadow: 0 6px 0 #1B1830; }
.clash-word { font-size: clamp(2.2rem, 12cqmin, 5rem); font-weight: 900; letter-spacing: .05em; position: relative; }
.clash-card.shape svg { position: absolute; height: 88%; width: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.clash-card.shape .clash-word { color: #FFD84A; font-size: clamp(1.4rem, 7cqmin, 2.6rem); text-shadow: 0 2px 0 #2B2744; }
.g-clash .mc-btn { font-size: clamp(1rem, 4cqmin, 1.35rem); flex-direction: column; gap: .2rem; min-height: clamp(3.6rem, 15cqh, 5.6rem); }
.sw { width: 1.7em; height: 1.7em; border-radius: 50%; border: 3px solid #2B2640; }
.sw-name { text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
.sw-shape { width: 1.9em; height: 1.9em; }
.mc-btn.right .sw-shape svg g, .mc-btn.wrong .sw-shape svg g { fill: #fff; }

/* Odd One Out */
.odd-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(4px, 1.4cqmin, 10px); width: min(96cqw, calc(100cqh - 3.4rem), 36rem); aspect-ratio: 1; }
.odd-cell { position: relative; background: #fff; border: 3px solid var(--line); border-radius: 16%; box-shadow: 0 4px 0 var(--line); padding: 9%; display: grid; place-items: center; transition: transform .1s; }
.odd-cell svg { width: 100%; height: 100%; }
.odd-cell:active { transform: translateY(2px); }
.odd-cell.right { background: #DDF4E8; border-color: var(--good); box-shadow: 0 4px 0 var(--good-d); }
.odd-cell.wrong { background: #FBE1E1; border-color: var(--bad); }
html.cb .odd-cell.right { background: #DCE8F8; }
html.cb .odd-cell.wrong { background: #FBE9D6; }
.odd-cell.reveal { border: 4px dashed var(--good); background: #EEF9F3; }

/* Pattern Next */
.seq { display: flex; gap: clamp(4px, 1.4cqmin, 10px); flex-wrap: nowrap; }
.st { min-width: min(5rem, 14cqw, 20cqh); height: min(5rem, 14cqw, 20cqh); padding: 0 .3rem; background: #fff; border: 3px solid var(--line); border-radius: 14px; font-size: min(2.4rem, 6cqw, 9cqh); font-weight: 900; display: grid; place-items: center; box-shadow: 0 4px 0 var(--line); font-variant-numeric: tabular-nums; }
.st svg { width: 76%; height: 76%; }
.st.q { border: 3px dashed var(--c-logic); color: var(--c-logic); box-shadow: none; }
.st.filled { border: 3px solid var(--good); background: #E6F6EE; color: var(--good-ink); animation: popin .3s; }
.opt-ico { width: 1.9em; height: 1.9em; }
.g-pattern { gap: clamp(.8rem, 6cqh, 2.2rem); }

/* Path Finder */
.g-path { gap: clamp(.3rem, 1.6cqh, .8rem); }
.path-strip { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.pa-row { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; min-height: 2.7rem; max-width: 96cqw; }
.pa { width: min(2.7rem, 9cqw); height: min(2.7rem, 9cqw); background: #fff; border-radius: 10px; border: 2px solid var(--line); padding: 3px; animation: popin .25s; }
.pa.hid { background: var(--bg2); }
.pa.hid svg { visibility: hidden; }
.pa.done { border-color: #E99A22; background: #FFF3D6; }
.path-grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(96cqw, calc(100cqh - 6.4rem), 32rem); aspect-ratio: 1; }
.path-cell { position: relative; background: #fff; border: 3px solid var(--line); border-radius: 14%; box-shadow: 0 3px 0 var(--line); padding: 0; transition: background .15s; }
.path-cell.start { background: #E3F4EF; border-color: #A9DCCD; }
.path-cell.trail { background: #FFF1D0; border-color: #EBC777; }
.path-cell.right { background: var(--good); border-color: var(--good-d); }
.path-cell.wrong { background: var(--bad); border-color: var(--bad-d); }
.path-cell.reveal { border: 4px dashed var(--good); background: #E3F6EC; }
.path-goat { --cell: calc((100% - (var(--n) - 1) * 6px) / var(--n)); position: absolute; width: var(--cell); height: var(--cell); left: calc(var(--c) * (var(--cell) + 6px)); top: calc(var(--r) * (var(--cell) + 6px)); padding: 3px; pointer-events: none; transition: left .16s ease, top .16s ease; z-index: 2; }
.path-goat.instant { transition: none; }
.reduce-motion .path-goat { transition: none; }

/* ---------- RESULT ---------- */
.result-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; overflow-y: auto; }
.res-coach { display: flex; align-items: center; gap: .9rem; max-width: 34rem; width: 100%; }
.res-coach .coach-goat { width: clamp(4.5rem, 12vh, 7rem); }
.res-card { width: min(100%, 34rem); display: flex; flex-direction: column; gap: .75rem; text-align: center; border-top: 6px solid var(--sk); }
.res-score-wrap { position: relative; }
.res-score { font-size: 4rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.res-pts { font-weight: 800; color: var(--ink3); }
.best-flag { position: absolute; right: 0; top: 0; background: #FFE9A8; border: 2px solid #E9B949; color: #6E4A00; font-weight: 900; border-radius: 999px; padding: .2em .7em; transform: rotate(6deg); }
.res-msg { margin: 0; font-weight: 700; color: var(--ink2); font-size: 1.05rem; }
@media (min-aspect-ratio: 5/4) and (max-height: 620px) {
  .result-body { flex-direction: row; gap: 1.4rem; }
  .res-coach { flex-direction: column; width: auto; max-width: 15rem; }
  .res-coach .bubble::before, .res-coach .bubble::after { display: none; }
  .res-card { gap: .45rem; padding: .7rem 1rem; }
  .res-score { font-size: 2.8rem; }
  .stat { padding: .35rem .2rem; }
  .stat b { font-size: 1.15rem; }
}

/* ---------- WORKOUT RESULT ---------- */
.wr-body { display: grid; gap: .9rem; max-width: 1120px; width: 100%; margin: 0 auto; align-content: start; }
.wr-top { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; border-top: 6px solid var(--primary-l); }
.wr-date { font-weight: 800; color: var(--ink2); }
.wr-ring { position: relative; width: min(12rem, 34vh); aspect-ratio: 1; margin: .3rem 0; --p: 0; }
.wr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--bg2); stroke-width: 12; }
.ring-fg { fill: none; stroke: url(#none); stroke: var(--primary-l); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); transition: stroke-dashoffset 1.4s cubic-bezier(.3, .7, .3, 1); }
.reduce-motion .ring-fg { transition: none; }
.wr-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wr-ring-in b { font-size: min(3.4rem, 10vh); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.wr-ring-in small { font-weight: 800; color: var(--ink3); }
.wr-label { font-size: 1.5rem; font-weight: 900; color: var(--primary); }
.wr-streak { display: flex; align-items: center; gap: .35rem; font-weight: 800; font-size: 1.1rem; background: #FFF4EA; border: 2px solid #F6C9A4; border-radius: 999px; padding: .3em .9em; }
.wr-streak b { font-size: 1.3rem; }
.flame { width: 1.6rem; height: 1.6rem; display: inline-block; }
.wr-side { display: flex; flex-direction: column; gap: .8rem; }
.wr-bars { display: flex; flex-direction: column; gap: .6rem; }
.wr-bar { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.8rem; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; }
.wr-ico { grid-row: span 2; width: 2.6rem; height: 2.6rem; background: var(--bg); border-radius: 10px; padding: .2rem; box-shadow: inset 0 0 0 3px var(--sk); }
.wr-name { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.wr-name b { font-size: 1.05rem; }
.wr-name small { color: var(--ink2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-val { grid-row: span 2; grid-column: 3; grid-row-start: 1; font-weight: 900; font-size: 1.3rem; text-align: right; }
.wr-track { height: .8rem; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.wr-track i { display: block; height: 100%; background: var(--sk); border-radius: 999px; transition: width 1s cubic-bezier(.3, .7, .3, 1); }
.res-coach.small .coach-goat { width: 4.2rem; }
@media (min-aspect-ratio: 5/4) and (min-width: 640px) {
  .wr-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .wr-top { position: sticky; top: 0; }
}

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cal-head b { font-size: 1.05rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.cal-dow { font-size: .78rem; font-weight: 800; color: var(--ink3); }
.cal-day { display: grid; place-items: center; height: 2rem; margin: 0 auto; width: 2rem; border-radius: 50%; font-weight: 800; font-size: .9rem; color: var(--ink2); }
.cal-day.done { background: var(--good); color: #fff; }
.cal-day.today { box-shadow: inset 0 0 0 3px var(--primary-l); color: var(--ink); }
.cal-day.done.today { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary-l); }

/* ---------- PROGRESS ---------- */
.totals { max-width: 1120px; margin: 0 auto .8rem; }
.totals .stat { background: #fff; box-shadow: var(--shadow); }
.prog-grid { display: grid; gap: .9rem; max-width: 1120px; margin: 0 auto; }
@media (min-width: 760px) { .prog-grid { grid-template-columns: 1fr 1fr; } .span2 { grid-column: span 2; } }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: #ECE3D3; stroke-width: 1.5; fill: none; }
.chart .axis { fill: var(--ink3); font-size: 14px; font-weight: 700; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: rgba(34, 168, 143, .12); }
.chart .dot { fill: var(--primary); stroke: #fff; stroke-width: 2.5; }
.chart .hit { fill: transparent; }
.chart .pt:hover .dot, .chart .pt:focus .dot { r: 8; }
.chart .lbl { font-weight: 900; font-size: 16px; fill: var(--ink); font-family: var(--font); }
.chart-radar svg { max-width: 24rem; margin: 0 auto; }
.chart-radar .shape { fill: rgba(63, 134, 220, .16); stroke: var(--c-logic); stroke-width: 2.5; stroke-linejoin: round; }
.chart .rlbl { font-weight: 800; font-size: 15px; fill: var(--ink); font-family: var(--font); }
.chart .rval { font-weight: 900; font-size: 16px; fill: var(--ink2); font-family: var(--font); }
.empty { display: flex; align-items: center; gap: 1rem; padding: 1rem .5rem; }
.empty .goat { width: 4.5rem; flex: none; }
.empty p { margin: 0; font-weight: 700; color: var(--ink2); }
.bests { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; }
.best-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 2px solid var(--bg2); }
.best-ico { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--sk); padding: .1rem; }
.best-name { flex: 1; font-weight: 700; font-size: .95rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best-val { font-weight: 900; font-variant-numeric: tabular-nums; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: .7rem; }
.badge { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .3rem; border-radius: 14px; background: var(--bg); }
.badge svg { width: 3.4rem; height: 3.4rem; }
.badge b { font-size: .9rem; }
.badge small { font-size: .76rem; color: var(--ink2); font-weight: 600; }
.badge.locked { opacity: .55; }
.badge.locked b { color: var(--ink3); }
.fine { max-width: 1120px; margin: 1rem auto .5rem; color: var(--ink3); font-size: .85rem; font-weight: 600; text-align: center; }
@media (max-width: 420px) { .bests { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .res-card .stats { grid-template-columns: repeat(4, 1fr); } .res-card .stat small { font-size: .68rem; } }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(43, 38, 64, .48); display: grid; place-items: center; padding: 14px; animation: fadein .2s; }
.overlay[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.sheet { background: #fff; border-radius: 26px; padding: 1.2rem 1.3rem; width: min(100%, 30rem); max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: .8rem; text-align: center; animation: popin .28s; }
.reduce-motion .sheet, .reduce-motion .overlay { animation: none; }
.sheet h2 { font-size: 1.6rem; font-weight: 900; }
.sheet-sub { margin: 0; color: var(--ink2); font-weight: 600; }
.sheet-goat { width: 5rem; margin: 0 auto -.3rem; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.settings-sheet { text-align: left; width: min(100%, 34rem); }
.settings-sheet h2 { text-align: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-bottom: 2px solid var(--bg2); flex-wrap: wrap; }
.set-l { font-weight: 800; font-size: 1.08rem; display: flex; flex-direction: column; }
.set-l small { font-weight: 600; color: var(--ink2); font-size: .82rem; }
.seg { display: inline-flex; background: var(--bg2); border-radius: 14px; padding: 4px; gap: 3px; }
.seg button { border: 0; background: none; padding: .5em .8em; border-radius: 11px; font-weight: 800; color: var(--ink2); min-height: 44px; }
.seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.switch { width: 4rem; height: 2.3rem; min-height: 44px; border-radius: 999px; background: #D7CFC2; border: 0; position: relative; padding: 0; flex: none; transition: background .2s; }
.switch i { position: absolute; left: 5px; top: 50%; width: 1.8rem; height: 1.8rem; margin-top: -.9rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"] i { transform: translateX(calc(4rem - 1.8rem - 10px)); }
.set-foot { display: flex; justify-content: space-between; gap: .6rem; margin-top: .3rem; }
.set-foot .btn.primary { min-width: 8rem; }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 18px; padding: .6rem 1.1rem .6rem .7rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); font-weight: 800; opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .35s cubic-bezier(.3, .8, .3, 1.2); border: 2px solid #F0E7D8; }
.toast.show { opacity: 1; transform: none; }
.toast small { display: block; color: var(--ink3); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }
.toast b { font-size: 1.1rem; }
.t-badge svg { width: 2.8rem; height: 2.8rem; }

/* ---------- misc ---------- */
.goat.mini { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .15)); }
html:not(.ready) .screen { transition: none; }
@media (prefers-contrast: more) { :root { --line: #B8AC97; --ink2: #3E3956; --ink3: #4E4866; } }
.wr-btns { width: 100%; margin-top: .5rem; }
.cal-grid { row-gap: .15rem; }
.wb-found { max-height: 15rem; }
.g-builder { justify-content: center; }
.path-cell { background: #F1F7E8; border-color: #DCE7C8; box-shadow: 0 3px 0 #DCE7C8; }
.word-row .wl { width: min(4.6rem, calc((94cqw - (var(--len) - 1) * 9px) / var(--len)), 20cqh); font-size: min(2.8rem, calc(52cqw / var(--len)), 11cqh); }
.seq .st { min-width: min(5.2rem, calc((94cqw - (var(--len) - 1) * 10px) / var(--len)), 20cqh); height: min(5.2rem, calc((94cqw - (var(--len) - 1) * 10px) / var(--len)), 20cqh); font-size: min(2.4rem, calc(40cqw / var(--len)), 9cqh); }
@media (max-height: 520px) {
  .sheet { padding: .7rem 1rem; gap: .45rem; }
  .sheet h2 { font-size: 1.3rem; }
  .set-row { padding: .15rem 0; }
  .seg button { padding: .3em .7em; }
  .sheet-goat { width: 3.4rem; }
}
.home-body { justify-content: safe center; }
@container (min-width: 700px) and (min-height: 760px) {
  .mc-options { width: min(100%, 46rem); gap: 1.1rem; }
  .mc-btn { min-height: 7.5rem; font-size: 3rem; }
  .g-clash .mc-btn { font-size: 1.6rem; min-height: 7rem; }
  .duo .mc-btn { min-height: 18rem; font-size: 4.2rem; }
  .eq { font-size: 6rem; }
  .clash-card { min-width: 32rem; height: 14rem; }
  .clash-word { font-size: 6rem; }
  .tile-grid, .odd-grid { width: min(96cqw, calc(100cqh - 4rem), 46rem); }
  .path-grid { width: min(96cqw, calc(100cqh - 7rem), 42rem); }
  .wb-l { width: 5.6rem; font-size: 2.8rem; }
  .wb-current .wl { width: 4.2rem; font-size: 2.4rem; }
  .wb-c { min-height: 4.4rem; font-size: 1.7rem; }
  .g-builder { width: min(100%, 50rem); }
  .ask, .g-prompt, .rule { font-size: 1.5rem; }
  .pa { width: 3.4rem; height: 3.4rem; }
  .word-row .wl { width: min(6.2rem, calc((94cqw - (var(--len) - 1) * 9px) / var(--len)), 20cqh); font-size: min(3.6rem, calc(52cqw / var(--len)), 11cqh); }
  .seq .st { min-width: min(7rem, calc((94cqw - (var(--len) - 1) * 10px) / var(--len)), 20cqh); height: min(7rem, calc((94cqw - (var(--len) - 1) * 10px) / var(--len)), 20cqh); font-size: min(3.2rem, calc(40cqw / var(--len)), 9cqh); }
}
.eq { font-size: min(5rem, 13cqmin, calc(150cqw / var(--len, 10))); }
@container (min-width: 700px) and (min-height: 760px) { .eq { font-size: min(6rem, calc(150cqw / var(--len, 10))); } }