:root {
  --bg: #FAF6EF;
  --surface: #FFFFFF;
  --surface-2: #F3EDE3;
  --ink: #1E2A2C;
  --ink-2: #4E5B5D;
  --line: #E2D8C8;
  --primary: #1E6B66;
  --primary-hover: #185852;
  --primary-shadow: #12443F;
  --accent: #E07A5F;
  --good: #27734A;
  --good-bg: #E2F2E7;
  --bad: #A8432F;
  --bad-bg: #FBE7E2;
  --gold: #E5A632;
  --greeting: #C9614A; /* the logo's coral leaf, a little darker so it reads (3.7:1 on the ground, for large type) */
  --radius: 22px;
  --shadow: 0 1px 0 rgba(30, 42, 44, .05), 0 10px 28px rgba(30, 42, 44, .07);
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 21px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Rubik", system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  /* No blinking text cursor on the page (Chrome shows one everywhere when caret browsing is on). */
  caret-color: transparent;
}
input, textarea { caret-color: auto; }

main { max-width: 960px; margin: 0 auto; padding: 28px 24px 56px; outline: none; }

h1, h2 { margin: 0; line-height: 1.25; }
.muted { color: var(--ink-2); font-size: .9rem; }
.emoji { font-family: var(--emoji); font-weight: 400; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--primary); }
.top-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.account-btn[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 18px;
  padding: 14px 26px;
  min-height: 64px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background .15s, border-color .15s, transform .08s;
  text-align: center;
}
.btn:focus-visible, .card:focus-visible, .odd-tile:focus-visible, .choice:focus-visible, .lib-card:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 5px 0 var(--primary-shadow); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary .uicon { color: currentColor; } /* white icons on the green button */
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--primary-shadow); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 2px solid var(--line); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-small { min-height: 50px; padding: 8px 18px; font-size: .88rem; border-radius: 14px; }
.btn-lg { min-height: 76px; font-size: 1.1rem; }
.btn-xl { width: 100%; min-height: 96px; font-size: 1.45rem; border-radius: 24px; }
.btn .emoji { font-size: 1.5em; }
.btn .uicon { width: 1.4em; height: 1.4em; }
.btn-small .uicon { width: 1.2em; height: 1.2em; }

.screen { display: flex; flex-direction: column; gap: 22px; animation: rise .35s ease-out; }
.screen.play { gap: 14px; min-height: calc(100vh - 150px); }
/* The home greeting, one line at the start: "Good evening," in the text colour, her name larger in
   amber, both on one baseline. */
.greeting {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em;
  margin: 0 0 6px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
}
.greet-hello { font-size: clamp(1.55rem, 3.3vw, 2.15rem); color: var(--ink); white-space: nowrap; }
.greet-name { font-size: clamp(2.3rem, 5.43vw, 3.45rem); color: var(--greeting); white-space: nowrap; }
.screen.home { gap: 18px; min-height: calc(100vh - 170px); justify-content: center; } /* centered in the space under the top bar */
.screen.intro, .screen.result, .screen.done, .screen.days, .screen.auth { min-height: calc(100vh - 170px); justify-content: center; } /* the game intro, game end, training end and days screens too */
main:has(.screen.play) { padding-top: 18px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.screen-title { font-size: 1.7rem; display: flex; align-items: center; gap: 14px; }

.btn-pair { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow); }
.panel h2 { font-size: 1.05rem; color: var(--ink-2); font-weight: 600; margin-bottom: 14px; }

/* ---------- Avatar ---------- */
.avatar-row { display: flex; align-items: center; gap: 26px; }
.avatar {
  flex: 0 0 auto; width: 150px; height: 150px; border-radius: 50%; background: #E6F0EC;
  /* --voice (0–1) is set from her voice while she talks: the ring grows with it. */
  box-shadow: 0 0 0 calc(var(--voice, 0) * 12px) rgba(30, 107, 102, .22), var(--shadow);
  transition: box-shadow .08s linear;
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; user-select: none; }
.avatar.talking { animation: bob 1.6s infinite ease-in-out; }
/* Browser fallback voice gives no volume reading, so show a steady ring instead. */
.avatar.talking:not(.lipsync) { box-shadow: 0 0 0 6px rgba(30, 107, 102, .2), var(--shadow); }
@keyframes bob { 50% { transform: translateY(-3px) scale(1.015); } }

.bubble {
  position: relative;
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 26px;
  padding: 22px 28px;
  font-size: 1.15rem;
  box-shadow: var(--shadow);
}
.bubble strong { display: block; font-size: 1.3rem; color: var(--primary); margin-bottom: 4px; }
.bubble .detail { display: block; margin-top: 8px; color: var(--ink-2); font-size: 1rem; }
.bubble::before {
  content: "";
  position: absolute;
  inset-inline-start: -13px;
  top: 50%;
  width: 22px;
  height: 22px;
  background: var(--surface);
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}
[dir="rtl"] .bubble::before { border-left: none; border-right: 2px solid var(--line); transform: translateY(-50%) rotate(-45deg); }

/* ---------- Icons ---------- */
.gicon {
  --s: 44px;
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3);
  background: var(--tile-bg); color: var(--tile-fg);
  vertical-align: middle;
}
.gicon svg { width: 58%; height: 58%; }
.gicon.skill-memory { --tile-bg: #E1EFEC; --tile-fg: #1E6B66; }
.gicon.skill-attention { --tile-bg: #FBE6DF; --tile-fg: #B9533A; }
.gicon.skill-speed { --tile-bg: #FBEFD2; --tile-fg: #A26F0E; }
.gicon.skill-language { --tile-bg: #ECE6F5; --tile-fg: #6A4A9C; }
.gicon.locked { --tile-bg: var(--surface-2); --tile-fg: #9AA3A4; }
.gicon.sm { --s: 32px; }
.gicon.lg { --s: 56px; }
.uicon { display: inline-grid; width: 1.35em; height: 1.35em; color: var(--primary); }
.uicon svg { width: 100%; height: 100%; }

/* ---------- Program ---------- */
.badge { display: inline-block; margin-inline-start: 8px; padding: 2px 12px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2 { margin: 0; color: var(--ink); font-size: 1.15rem; }
.program-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; list-style: none; margin: 0 0 20px; padding: 0; }
.program-bar li { height: 12px; border-radius: 6px; background: var(--surface-2); }
.program-bar li.done { background: var(--primary); }
.program-bar li.current { background: var(--accent); }
.name-input {
  font: inherit; font-size: 1.1rem; padding: 10px 14px; width: min(260px, 60%);
  border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
}
.name-input:focus { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); border-color: var(--primary); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
/* Account screens */
.screen.auth { align-items: center; text-align: center; gap: 12px; }
.auth-title { margin: 0; font-size: 1.8rem; }
.auth-intro { margin: 0 0 4px; max-width: 460px; font-size: 1.1rem; color: var(--ink-2); line-height: 1.5; }
.auth-form { display: grid; gap: 12px; width: min(100%, 440px); text-align: start; }
.field { display: grid; gap: 4px; }
.field-label { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.field-hint { font-weight: 400; color: var(--ink-2); font-size: .95rem; }
.field-box { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.field-box:focus-within { border-color: var(--primary); outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.field-box input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.2rem; line-height: 1.3; padding: 10px 14px; background: transparent; color: var(--ink); caret-color: auto; }
.field-box input[type="email"] { text-align: left; }
[dir="rtl"] .field-box input[type="email"] { text-align: right; }
.pw-toggle { border: 0; border-inline-start: 2px solid var(--line); background: var(--surface-2); color: var(--primary); font: inherit; font-weight: 600; padding: 0 16px; cursor: pointer; }
.form-error { margin: 0; min-height: 1.4em; color: var(--bad); font-weight: 600; font-size: 1.05rem; }
.form-error:empty { min-height: 0; }
.auth-submit { margin-top: 4px; font-size: 1.25rem; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.auth-links .btn { padding: 6px 12px; min-height: 0; }
.account-panel p { margin: 6px 0 12px; }
.intro-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; }
.intro-meta { margin: -12px 0 0; font-size: 1rem; }
/* One small pill per game in the training: done games filled, the current one filling with its time. */
.game-bar { display: flex; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.game-bar li { width: 40px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.game-bar li.done { background: var(--primary); }
.game-bar li.current { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.game-bar li.current i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 4px; transition: width 1s linear; }
.rest { display: flex; flex-direction: column; gap: 22px; animation: rise .35s ease-out; }
.lib-card:disabled { cursor: default; opacity: .55; box-shadow: none; }
.lib-card:disabled:hover { border-color: var(--line); transform: none; }
.levels li.locked { opacity: .5; }

/* ---------- Week strip ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; }
.day { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-2); font-size: .9rem; }
.day-dot {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--line);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.2rem;
}
.day.done .day-dot { background: var(--primary); border-color: var(--primary); }
.day.today .day-name { color: var(--ink); font-weight: 700; }
.day.today .day-dot { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Session steps ---------- */

/* ---------- Play ---------- */
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.play-title { font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
/* The game fills the rest of the screen. The round and the question stay put at the top; what
   comes after them (the board, the answers) is centered in the space below. */
.ex-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.ex-body > .ex-prompt + *, .ex-body > .ex-status + :not(.ex-prompt) { margin-top: auto; }
.ex-body > :last-child { margin-bottom: auto; }
.ex-body > .rest { margin-block: auto; }
.ex-status { margin: 0; text-align: center; color: var(--ink-2); font-weight: 500; }
.ex-prompt { margin: 0; text-align: center; font-size: 1.35rem; font-weight: 600; }
.ex-msg { margin: 0; min-height: 1.6em; text-align: center; font-size: 1.25rem; font-weight: 600; }
.ex-msg.good { color: var(--good); }
.ex-msg.soft { color: var(--ink-2); }
.ex-next { display: flex; justify-content: center; min-height: 64px; }
.ex-next .btn { min-width: 260px; font-size: 1.2rem; }
.hint { margin: 0; text-align: center; color: var(--ink-2); font-size: .95rem; }

/* Pairs */
.cards {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 14px;
  width: 100%;
  max-width: min(calc(var(--cols) * 175px), calc((100vh - 290px) * var(--cols) / var(--rows)));
  margin: 0 auto;
  container-type: inline-size;
}
.card { aspect-ratio: 1; border: none; background: none; padding: 0; cursor: pointer; border-radius: 18px; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; }
.card-back, .card-front { position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; transition: opacity .25s, transform .25s; }
.card.flipped .card-back { opacity: 0; transform: scale(.9); }
.card.flipped .card-front { opacity: 1; transform: none; }
.card-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px),
    var(--primary);
  box-shadow: 0 4px 0 var(--primary-shadow);
}
.card:hover .card-back { filter: brightness(1.1); }
.card-front {
  background: var(--surface);
  border: 3px solid var(--line);
  opacity: 0;
  transform: scale(.85);
  font-size: calc(100cqi / var(--cols) * .48);
}
.card.matched .card-front { border-color: var(--good); background: var(--good-bg); }

/* Odd one out */
.odd-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 10px;
  width: 100%;
  max-width: min(100%, calc(min(600px, 100vh - 410px) * var(--cols) / var(--rows)));
  min-width: 300px;
  margin: 0 auto;
  container-type: inline-size;
}
.odd-tile {
  aspect-ratio: 1; border: 2px solid var(--line); border-radius: 16px; background: var(--surface);
  cursor: pointer; padding: 0; font-size: calc(100cqi / var(--cols) * .55); line-height: 1;
  transition: border-color .15s, background .15s;
}
.odd-tile:hover { border-color: var(--primary); }
.odd-tile.right { border-color: var(--good); background: var(--good-bg); border-width: 4px; }
.odd-tile.wrong { animation: shake .4s; border-color: var(--bad); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Quick star */
.tap-area {
  position: relative;
  height: min(440px, calc(100vh - 320px));
  min-height: 300px;
  border: 4px dashed var(--line);
  border-radius: 30px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.stim { position: absolute; transform: translate(-50%, -50%); font-size: 7rem; line-height: 1; pointer-events: none; animation: pop .18s ease-out; width: 1.3em; height: 1.3em; display: grid; place-items: center; border-radius: 50%; transition: opacity .2s; }
.stim[hidden] { display: none; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); } }
/* Feedback after an answer (the picture stays a moment): */
/* The picture is placed by its own centre, so a font box wider than the circle can't push it aside. */
.glyph { position: absolute; left: 50%; top: 50%; translate: -50% -50%; line-height: 1; white-space: nowrap; }
.stim.fb-good { box-shadow: 0 0 0 7px var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); animation: stim-yes .35s ease-out; }
.stim.fb-bad { box-shadow: 0 0 0 7px var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); animation: stim-no .4s ease-in-out; }
.stim.fb-missed { opacity: .3; }
@keyframes stim-yes { 50% { transform: translate(-50%, -50%) scale(1.15); } }
@keyframes stim-no { 25% { transform: translate(calc(-50% - 8px), -50%); } 75% { transform: translate(calc(-50% + 8px), -50%); } }
.tap-msg { position: absolute; inset-inline: 0; bottom: 24px; text-align: center; font-size: 1.35rem; font-weight: 600; color: var(--ink-2); pointer-events: none; }
.tap-msg.good { color: var(--good); }
.tap-msg.bad { color: var(--bad); }

/* Repeat the sequence */
.seq-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 16px;
  width: 100%;
  max-width: min(calc(var(--cols) * 190px), calc((100vh - 380px) * var(--cols) / var(--rows)));
  min-width: 260px;
  margin: 0 auto;
  container-type: inline-size;
}
.seq-tile {
  aspect-ratio: 1; border-radius: 22px; border: 3px solid transparent; background: var(--c);
  font-size: calc(100cqi / var(--cols) * .42); line-height: 1; cursor: pointer; padding: 0;
  transition: transform .12s, box-shadow .12s, filter .12s;
  filter: saturate(.7) brightness(.97);
}
.seq-tile:disabled { cursor: default; }
.seq-tile:not(:disabled):hover { border-color: var(--primary); }
.seq-tile.lit { filter: none; transform: scale(1.07); border-color: var(--primary); box-shadow: 0 0 0 6px rgba(30, 107, 102, .25), 0 10px 24px rgba(0,0,0,.15); }
.seq-tile.wrong { animation: shake .4s; border-color: var(--bad); }

/* Count the items */
.count-target { font-size: 2.2rem; vertical-align: middle; }
.count-field {
  position: relative;
  height: clamp(220px, calc(100vh - 540px), 380px);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 24px;
}
.count-item {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(1.6rem, 4.6vh, 2.6rem); line-height: 1;
  transition: opacity .2s;
}
.count-field.reveal .count-item:not(.is-target) { opacity: .25; }
.count-field.reveal .count-item.is-target { filter: drop-shadow(0 0 6px rgba(39, 115, 74, .8)); }

/* Same or different */
.same-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.same-card {
  min-height: min(240px, calc(100vh - 470px)); display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--line); border-radius: 26px;
  font-size: clamp(2.6rem, 8vh, 4.6rem); line-height: 1; letter-spacing: .12em;
}
.same-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.same-buttons .choice span { color: var(--primary); margin-inline-end: 8px; }

/* Missing letter */
.letter-word { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.lt {
  width: 74px; height: 88px; display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--line); border-radius: 16px;
  font-size: 2.6rem; font-weight: 600;
}
.lt.missing { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.lt.filled { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.letter-hint { min-height: 1.4em; font-size: 1.1rem; color: var(--primary); font-weight: 500; }
.choices.letters { grid-template-columns: repeat(var(--n, 3), 1fr); }
.choices.letters .choice { font-size: 2.6rem; }

/* Quick glance */
.gl-stage {
  position: relative; width: min(100%, 440px, calc(100vh - 420px)); min-width: 200px; aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line); overflow: hidden;
  container-type: inline-size; /* sizes inside it follow the circle */
}
.gl-item { position: absolute; transform: translate(-50%, -50%); font-size: clamp(1.6rem, 5.5vmin, 2.5rem); line-height: 1; }
.gl-center { font-size: clamp(2.6rem, 9vmin, 3.8rem); }
.gl-fix { font-size: 2.4rem; color: var(--ink-2); font-weight: 300; }
.gl-shape { display: block; width: .85em; height: .85em; background: #B5AEA2; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gl-spot {
  position: absolute; width: 15%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; cursor: pointer;
  display: grid; place-items: center; line-height: 1; box-sizing: border-box;
  border-radius: 50%; border: 2px dashed var(--line); background: var(--surface-2);
  font-size: 8.5cqi; /* the star is about 60% of its circle, so it always fits inside */
}
.gl-spot:hover { border-color: var(--primary); border-style: solid; }
.gl-spot.right { border: 3px solid var(--good); background: var(--good-bg); }
.gl-spot.wrong { border: 3px solid var(--bad); }
/* The circle and the two pictures take turns in one area of the circle's size, so nothing moves. */
.gl-area { display: grid; place-items: center; height: min(440px, max(200px, calc(100vh - 420px))); }
.gl-stage[hidden], .gl-choices[hidden] { display: none; }
.gl-choices { width: 100%; }
.choices.gl-choices { grid-template-columns: repeat(2, minmax(0, 230px)); justify-content: center; }
.gl-choices .choice { font-size: clamp(3.2rem, 9vmin, 5rem); min-height: clamp(140px, 26vh, 210px); padding: 10px; }

/* Shopping list */
.shop-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.shop-list li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; padding: 18px 20px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 20px; font-size: 1.15rem; font-weight: 600;
}
.shop-list .emoji { font-size: 3rem; line-height: 1; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.shop-item {
  font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; background: var(--surface); border: 3px solid var(--line); border-radius: 18px;
}
.shop-item .emoji { font-size: 2.1rem; line-height: 1.1; }
.shop-name { font-size: .95rem; font-weight: 500; }
.shop-item:hover { border-color: var(--primary); }
.shop-item.selected { border-color: var(--primary); background: #E3F0EE; }
.shop-item.right { border-color: var(--good); background: var(--good-bg); }
.shop-item.wrong { border-color: var(--bad); background: var(--bad-bg); }
.shop-item.missed { border-color: var(--accent); border-style: dashed; }

/* Color or word */
.stroop-word { text-align: center; font-size: clamp(3.4rem, 10vh, 5rem); font-weight: 700; letter-spacing: .04em; min-height: 1.4em; }
.choices.stroop-choices { grid-template-columns: repeat(var(--n), 1fr); }
.choices.stroop-choices .choice { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 14px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }

/* Catch the mole */
.mole-grid {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; width: 100%;
  max-width: min(calc(var(--cols) * 170px), calc((100vh - 330px) * var(--cols) / var(--rows)));
  margin: 0 auto;
}
.hole {
  position: relative; aspect-ratio: 1.15; border: none; padding: 0; cursor: pointer; border-radius: 22px;
  background: #DCEBC6; overflow: hidden;
}
.hole::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 12%; height: 24%;
  background: #5B4030; border-radius: 50%; box-shadow: inset 0 6px 10px rgba(0,0,0,.35);
}
.mole-box { position: absolute; left: 17%; right: 17%; bottom: 23%; height: 76%; overflow: hidden; z-index: 1; pointer-events: none; }
.mole { position: absolute; inset: 0; transform: translateY(105%); transition: transform .16s ease-out; }
.mole svg { width: 100%; height: 100%; display: block; }
.hole.up .mole { transform: translateY(6%); }
.hole.bonk .mole { transform: translateY(30%) scale(.9); }

/* Numbers in order */
.order-field {
  position: relative; height: clamp(240px, calc(100vh - 380px), 460px);
  background: var(--surface); border: 2px solid var(--line); border-radius: 24px;
}
.order-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.order-lines polyline { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: .5; vector-effect: non-scaling-stroke; }
.order-dot {
  position: absolute; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%;
  font: inherit; font-size: 1.6rem; font-weight: 700; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 3px solid var(--primary);
}
.order-dot:hover { background: #E3F0EE; }
.order-dot.done { background: var(--primary); color: #fff; cursor: default; }
.order-dot.wrong { animation: shake .4s; border-color: var(--bad); }

/* Where was it? */
.where-target { font-size: 2.4rem; vertical-align: middle; }
.where-grid {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 10px; width: 100%;
  max-width: min(calc(var(--cols) * 130px), calc((100vh - 400px) * var(--cols) / var(--rows)));
  margin: 0 auto; container-type: inline-size;
}
.where-cell {
  aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--line); background: var(--surface);
  font-size: calc(100cqi / var(--cols) * .5); line-height: 1; padding: 0; cursor: pointer;
}
.where-cell:disabled { cursor: default; color: inherit; }
.where-cell:not(:disabled):hover { border-color: var(--primary); }
.where-cell.right { border-color: var(--good); background: var(--good-bg); }
.where-cell.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake .4s; }

/* Find all the stars */
.stars-field {
  position: relative; height: clamp(230px, calc(100vh - 470px), 440px);
  background: var(--surface); border: 2px solid var(--line); border-radius: 24px;
}
.star-item {
  position: absolute; transform: translate(-50%, -50%); border: 3px solid transparent; background: none;
  border-radius: 50%; padding: 2px; cursor: pointer; line-height: 1;
  font-size: clamp(1.3rem, 3.6vh, 2rem);
}
.star-item:hover { border-color: var(--line); }
.star-item.found { border-color: var(--good); background: var(--good-bg); cursor: default; }
.star-item.missed { border-color: var(--accent); border-style: dashed; }
.star-item.wrong { animation: shake .4s; border-color: var(--bad); }

/* Middle arrow */
.arrow-row { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 110px; color: var(--ink); }
.arr { display: inline-flex; width: 74px; }
.arr svg { width: 100%; height: auto; display: block; }
.arr.left svg { transform: scaleX(-1); }
.arr.neutral { color: var(--ink-2); }
.arr-middle { display: inline-flex; padding: 6px 4px 10px; border-bottom: 5px solid var(--accent); }
.arrow-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.arrow-buttons .choice { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 1.6rem; }
.arrow-buttons .arr { width: 46px; color: var(--primary); }

/* Unscramble the word */
.scr-slots, .scr-pool { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.scr-slot, .scr-tile {
  width: 76px; height: 88px; border-radius: 16px; font: inherit; font-size: 2.5rem; font-weight: 600;
  display: grid; place-items: center; padding: 0; color: var(--ink);
}
.scr-slot { background: var(--surface-2); border: 3px dashed var(--line); cursor: pointer; }
.scr-slot:disabled { cursor: default; color: var(--ink); }
.scr-slot:not(:empty) { background: var(--surface); border-style: solid; border-color: var(--primary); }
.scr-slot.fixed { border-color: var(--line); background: var(--surface-2); }
.scr-slot.right { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.scr-slot.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake .4s; }
.scr-slot.shown { border-color: var(--accent); }
.scr-pool { margin-top: 6px; }
.scr-tile { background: var(--surface); border: 3px solid var(--line); cursor: pointer; box-shadow: 0 4px 0 var(--line); }
.scr-tile:hover { border-color: var(--primary); }
.scr-tile:disabled { visibility: hidden; }

/* What changed? (reuses the Where was it? grid) */
.where-cell.was { border-style: dashed; border-color: var(--accent); }
.changed-grid .where-grid { max-width: min(calc(var(--cols) * 130px), calc((100vh - 470px) * var(--cols) / var(--rows))); }

/* Which is cheaper? */
.cheap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cheap-card {
  font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 16px 22px; background: var(--surface); border: 3px solid var(--line); border-radius: 24px;
}
.cheap-card:hover { border-color: var(--primary); }
.cheap-store { color: var(--ink-2); font-size: .95rem; }
.cheap-item { font-size: clamp(2.6rem, 8vh, 4rem); line-height: 1.1; }
.cheap-name { font-size: 1.1rem; font-weight: 600; }
.cheap-price {
  margin-top: 8px; padding: 6px 20px; border-radius: 12px; background: #FFF4D6; border: 2px dashed var(--gold);
  font-size: 2rem; font-weight: 700;
}
.cheap-unit { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.cheap-card.right { border-color: var(--good); background: var(--good-bg); }
.cheap-card.wrong { border-color: var(--bad); background: var(--bad-bg); }

/* Follow the cup */
.cup-stage {
  position: relative; height: clamp(220px, calc(100vh - 430px), 320px);
  background: linear-gradient(to top, #E9DFCF 0 14%, transparent 14%); border-radius: 24px;
}
.cup {
  position: absolute; bottom: 8%; width: min(150px, calc(80% / var(--n))); aspect-ratio: .95;
  transform: translateX(-50%); transition: left var(--swap) ease-in-out;
  background: none; border: none; padding: 0; cursor: pointer;
}
.cup:disabled { cursor: default; }
.cup-body { position: absolute; inset: 0; z-index: 2; transition: transform .35s ease-out; }
.cup-body svg { width: 100%; height: 100%; display: block; }
.cup.lifted .cup-body { transform: translateY(-62%); }
.cup.hop .cup-body { animation: hop var(--swap) ease-in-out; }
@keyframes hop { 50% { transform: translateY(-16%); } }
.cup:not(:disabled):hover .cup-body { filter: brightness(1.08); }
.ball {
  position: absolute; left: 50%; bottom: 14%; width: 40%; aspect-ratio: 1; transform: translateX(-50%); z-index: 1;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFD98A, #E07A5F 70%);
}

/* Math and words */
.question { text-align: center; font-size: 3.4rem; font-weight: 700; letter-spacing: .02em; margin: 6px 0; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.choices.words { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 10px; }
.choice {
  font: inherit; font-size: 2rem; font-weight: 600; min-height: 112px; border-radius: 22px;
  border: 3px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.choices.words .choice { font-size: 1.6rem; min-height: 100px; }
.choice:hover { border-color: var(--primary); }
.choice.right { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }

/* ---------- Result / done ---------- */

/* ---------- Library ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.lib-card {
  font: inherit; color: var(--ink); text-align: start; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; padding: 24px 26px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.lib-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.lib-name { font-size: 1.25rem; font-weight: 700; }
.lib-meta { color: var(--ink-2); font-size: .92rem; }

/* ---------- Progress ---------- */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stat-num { font-size: 3rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.stat-label { color: var(--ink-2); }
.levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.levels li { display: grid; grid-template-columns: minmax(200px, 1.2fr) 2fr auto; align-items: center; gap: 18px; }
.lv-name { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.lv-num { color: var(--ink-2); font-size: .92rem; white-space: nowrap; }
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.meter i { height: 14px; border-radius: 4px; background: var(--surface-2); }
.meter i.on { background: var(--primary); }

/* ---------- Sharing ---------- */
.share-intro { margin: 0 0 16px; font-size: .95rem; }
.share-row { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.share-label { font-weight: 600; font-size: .95rem; }
.share-link { display: flex; gap: 10px; }
.share-link input {
  flex: 1; min-width: 0; font: inherit; font-size: .85rem; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink-2);
}

/* ---------- Family page ---------- */
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.recent li { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.recent li:last-child { border-bottom: none; }
.recent .r-date { font-weight: 600; }
.recent .r-games { color: var(--ink-2); }
.recent .r-score { font-weight: 600; color: var(--primary); white-space: nowrap; }
.family-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .recent li { grid-template-columns: 1fr auto; } .recent .r-games { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Dialog ---------- */
.dlg {
  border: none; border-radius: 28px; padding: 32px 36px; max-width: 560px; width: calc(100% - 32px);
  background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25);
  font-family: inherit;
}
.dlg::backdrop { background: rgba(30, 42, 44, .45); }
.dlg h2 { font-size: 1.5rem; }
.dlg p { font-size: 1.1rem; color: var(--ink-2); }
.dlg-actions { display: grid; gap: 14px; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  :root { font-size: 18px; }
  main { padding: 18px 16px 40px; }
  .topbar { padding: 10px 16px; }
  .top-actions { gap: 8px; }
  .top-actions .btn-small { padding: 8px 12px; }
  /* On a phone the speaker icon alone says it; the name stays for screen readers. */
  .sound-btn .btn-label { display: none; }
  .brand span { display: none; }
  .avatar { width: 96px; height: 96px; }
  .avatar-row { gap: 18px; }
  .btn-pair, .stat-row { grid-template-columns: 1fr; }
  .btn-pair { grid-auto-flow: row; }
  .levels li { grid-template-columns: 1fr auto; }
  .levels .meter { grid-column: 1 / -1; grid-row: 2; }
  .choice { font-size: 1.6rem; min-height: 90px; }
  .day-dot { width: 38px; height: 38px; }
}

/* Tap Noa to hear her again */
.avatar-row.replayable .avatar, .avatar-row.replayable .bubble { cursor: pointer; }
.avatar-row.replayable .bubble:hover { border-color: var(--primary); }

/* Welcome (turns sound on with one click) */
.screen.welcome { min-height: calc(100vh - 200px); justify-content: center; align-items: center; text-align: center; gap: 26px; }
.welcome .avatar { width: 190px; height: 190px; }
.welcome-title { font-size: 2rem; color: var(--primary); }
.welcome .btn-xl { max-width: 560px; }

/* ---------- Free play: game wheel ---------- */
.back-btn { align-self: flex-start; padding-inline: 10px; }
[dir="rtl"] .back-btn .uicon svg { transform: scaleX(-1); } /* the arrow points the way she reads back */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wheel-screen { align-items: center; text-align: center; }
.wheel-wrap { --size: clamp(240px, calc(100vh - 510px), 380px); position: relative; width: var(--size); height: var(--size); min-width: 240px; min-height: 240px; }
.wheel {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  border: 6px solid var(--surface); box-shadow: 0 0 0 2px var(--line), var(--shadow);
  transition: transform 4.2s cubic-bezier(.12, .75, .15, 1);
}
.wheel-slot {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  transform: rotate(var(--a)) translateY(calc(var(--size) * -0.36)) rotate(calc(-1 * var(--a)));
}
.wheel-slot .gicon { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wheel-hub {
  position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--surface); border: 4px solid var(--primary);
}
.wheel-pointer {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-top: 26px solid var(--accent); filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.wheel-result { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 60px; margin: 0; font-size: 1.5rem; font-weight: 700; }
.wheel-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 560px; }