/* ===========================================================================
   Memory & Languages — styles
   Mobile-first, responsive, light + dark themes.

   The board never scrolls: app.js measures the free area and writes --cols and
   --card-w, and every dimension inside a card (type, plate, padding, radius) is
   derived from --card-w so a card stays proportional at any computed size.
   =========================================================================== */
:root {
  --radius: 18px;
  --radius-sm: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Card geometry — --card-w is written by fitBoard() in px. */
  --card-w: 96px;
  --card-ar: .84;              /* width / height */
  --card-gap: 10px;
  --card-radius: calc(var(--card-w) * .16);

  --flip-ms: 420ms;
  --flip-ease: cubic-bezier(.22, .78, .28, 1);
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

[data-theme="dark"] {
  --bg: #090e1c;
  --bg-2: #111827;
  --surface: #18203247;
  --surface-solid: #182032;
  --surface-2: #222c44;
  --text: #e9edf8;
  --text-dim: #96a2bd;
  --border: #2c3752;
  --border-soft: #ffffff14;
  --primary: #7c3aed;
  --primary-2: #a78bfa;
  --accent: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;

  /* The plate stays light in BOTH themes. The illustrations are outline drawings, and an
     outline needs a light ground to stay an outline — on the dark plate this used to use,
     the tooth and the books all but vanished. It reads as a sheet of tinted paper the
     drawing sits on, which is also the cleanest figure/ground separation available. */
  --plate-l: 95%;
  --plate-l2: 88%;
  --plate-s: 60%;
  --plate-ring: 72%;
  --plate-ink: 38%;   /* lightness for anything drawn ON the plate */

  --card-face: #1b2438;
  --card-face-2: #151d2e;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.32);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.42);
  --shadow-lift: 0 3px 8px rgba(0,0,0,.45), 0 22px 46px rgba(0,0,0,.5);
}
[data-theme="light"] {
  --bg: #eaeef7;
  --bg-2: #f7f9fc;
  --surface: #ffffffcc;
  --surface-solid: #ffffff;
  --surface-2: #eff2f9;
  --text: #131c33;
  --text-dim: #5c6884;
  --border: #dde3f0;
  --border-soft: #0b132a12;
  --primary: #6d28d9;
  --primary-2: #8b5cf6;
  --accent: #059669;
  --warn: #d97706;
  --danger: #e11d48;

  --plate-l: 96%;
  --plate-l2: 90%;
  --plate-s: 74%;
  --plate-ring: 78%;
  --plate-ink: 36%;

  --card-face: #ffffff;
  --card-face-2: #f6f8fd;
  --shadow-1: 0 1px 2px rgba(24,40,80,.08), 0 4px 12px rgba(24,40,80,.09);
  --shadow-2: 0 2px 6px rgba(24,40,80,.10), 0 14px 34px rgba(24,40,80,.14);
  --shadow-lift: 0 3px 8px rgba(24,40,80,.12), 0 22px 46px rgba(24,40,80,.20);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 720px at 84% -12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 62%),
    radial-gradient(900px 620px at -6% 104%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
#ill-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--primary); color: #fff; padding: .5rem 1rem; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .65rem 1rem; font-size: .93rem; font-weight: 650;
  transition: transform .1s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: color-mix(in srgb, var(--surface-2) 72%, var(--primary) 22%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(140deg, var(--primary-2), var(--primary));
  color: #fff; border: none;
  box-shadow: 0 1px 0 #ffffff30 inset, 0 8px 20px color-mix(in srgb, var(--primary) 45%, transparent);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 1px 0 #ffffff38 inset, 0 10px 26px color-mix(in srgb, var(--primary) 55%, transparent); }
.btn-lg { width: 100%; padding: .95rem 1rem; font-size: 1.05rem; border-radius: var(--radius); }
.btn-lg svg { width: 19px; height: 19px; }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: background .16s ease, transform .1s ease, color .16s ease;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: color-mix(in srgb, var(--surface-2) 66%, var(--primary) 26%); }
.icon-btn:active { transform: scale(.93); }
.icon-btn.active { background: linear-gradient(140deg, var(--primary-2), var(--primary)); color: #fff; border-color: transparent; }

/* -------------------------------- Setup -------------------------------- */
.screen { min-height: 100dvh; }
.setup { display: grid; place-items: center; padding: 1rem; }
.setup-card {
  width: min(940px, 100%);
  /* As a grid item its automatic minimum size is its min-content width, which would let
     a wide header push the card past the viewport instead of the content wrapping. */
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
  padding: 1.25rem;
  display: grid; gap: 1.15rem;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: .9rem; }
.brand-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none; border-radius: 16px;
  background: linear-gradient(140deg, var(--primary-2), var(--primary));
  color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 45%, transparent);
}
.brand-mark svg { width: 28px; height: 28px; }
.brand-text { min-width: 0; overflow-wrap: anywhere; }
.brand h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }
.tagline { margin: .18rem 0 0; color: var(--text-dim); font-size: .89rem; }
.brand-actions { margin-left: auto; display: flex; gap: .4rem; }

.setup-group { display: grid; gap: .55rem; min-width: 0; }
.setup-group h2 { font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); }

.lang-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .75rem; }
.lang-arrow { color: var(--text-dim); font-size: 1.3rem; padding-bottom: .5rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill {
  display: inline-flex; align-items: center; gap: .42rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .5rem .9rem; font-size: .87rem; font-weight: 650;
  transition: background .16s ease, border-color .16s ease, transform .1s ease;
}
.pill svg { width: 16px; height: 16px; }
.pill:hover { border-color: var(--primary-2); }
.pill:active { transform: scale(.97); }
.pill.active {
  background: linear-gradient(140deg, var(--primary-2), var(--primary)); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent);
}

.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .36rem .72rem .36rem .4rem; font-size: .82rem; font-weight: 650;
}
/* The theme chips reuse the card plate at badge size, so setup and board look alike.
   The symbol takes the theme's own hue, which is what keeps each chip identifiable at a
   glance now that it carries a symbol instead of a colourful illustration. */
.chip .chip-ill { width: 22px; height: 22px; flex: none; border-radius: 7px; }
.chip .chip-ill > svg { width: 62%; height: 62%; color: hsl(var(--h) 55% var(--plate-ink)); }
.chip:hover { border-color: var(--primary-2); }
.chip.active { background: color-mix(in srgb, var(--primary) 26%, var(--surface-2)); border-color: var(--primary-2); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start;
  text-align: left; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .85rem;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.choice:hover { border-color: var(--primary-2); transform: translateY(-1px); }
.choice.active { background: color-mix(in srgb, var(--primary) 20%, var(--surface-2)); border-color: var(--primary-2); }
.choice svg { width: 21px; height: 21px; color: var(--primary-2); margin-top: 1px; }
.choice-label { font-weight: 700; font-size: .91rem; display: block; }
.choice-desc { color: var(--text-dim); font-size: .77rem; margin-top: .15rem; display: block; line-height: 1.35; }

.warn { margin: -.5rem 0 0; color: var(--warn); font-size: .85rem; font-weight: 650; }

.setup-profile { display: flex; flex-wrap: wrap; gap: .5rem; }
.stat-pill {
  display: inline-flex; align-items: center; gap: .42rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .38rem .8rem; font-size: .8rem; font-weight: 650; color: var(--text-dim);
}
.stat-pill svg { width: 15px; height: 15px; color: var(--primary-2); }
.stat-pill strong { color: var(--text); }

/* ------------------------------- Top bar ------------------------------- */
/* The play screen owns the viewport: it never scrolls, the board is fitted to it. */
.play { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; flex: none;
  padding: .55rem .75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.board-title { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-title .sub { color: var(--text-dim); font-weight: 500; }

.hud { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.hud-item {
  display: inline-flex; align-items: center; gap: .34rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .28rem .62rem; font-variant-numeric: tabular-nums;
}
.hud-icon { display: inline-grid; place-items: center; color: var(--text-dim); }
.hud-icon svg { width: 14px; height: 14px; }
.hud-value { font-size: .83rem; font-weight: 700; }
.hud-score { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.hud-combo { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); color: var(--warn); }
.hud-combo .hud-icon { color: var(--warn); }
.hud-item.bump { animation: bump .38s cubic-bezier(.3,1.4,.5,1); }
@keyframes bump { 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* --------------------------------- Board -------------------------------- */
.play-main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr;
  gap: .75rem; padding: .75rem;
}
.board-wrap { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; }

.board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--card-w));
  gap: var(--card-gap);
  justify-content: center; align-content: center;
}

/* --------------------------------- Card --------------------------------- */
.card {
  position: relative; padding: 0; border: none; background: none;
  width: var(--card-w);
  aspect-ratio: var(--card-ar);
  border-radius: var(--card-radius);
  perspective: 1100px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--flip-ease), filter .2s ease;
}
.card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) var(--flip-ease);
  border-radius: inherit;
}
.card.is-open .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center;
  gap: calc(var(--card-w) * .05);
  padding: calc(var(--card-w) * .065);
  border-radius: inherit;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

/* Face down — a single branded surface, quiet enough to read as "not yet revealed". */
.card-front {
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--primary-2) 92%, #fff), var(--primary) 62%, color-mix(in srgb, var(--primary) 72%, #0b1020));
  color: #fff;
}
.card-front::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 22% 8%, #ffffff2e, transparent 58%),
    repeating-linear-gradient(48deg, #ffffff0f 0 2px, transparent 2px 11px);
}
.card-front::after {
  content: ""; position: absolute; inset: calc(var(--card-w) * .045);
  border-radius: calc(var(--card-radius) * .78);
  border: 1px solid #ffffff2b;
}
.card-mark { width: 42%; height: 42%; opacity: .9; position: relative; filter: drop-shadow(0 2px 6px #0003); }
.card-mark svg { width: 100%; height: 100%; }

/* Face up */
.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(170deg, var(--card-face), var(--card-face-2));
  color: var(--text);
  border: 1px solid var(--border-soft);
  text-align: center;
}

/* The tinted plate that separates the illustration from the card surface. */
.plate {
  position: relative;
  width: 68%; aspect-ratio: 1;
  border-radius: 32%;
  display: grid; place-items: center;
  background: linear-gradient(158deg, hsl(var(--h) var(--plate-s) var(--plate-l)), hsl(var(--h) var(--plate-s) var(--plate-l2)));
  box-shadow: inset 0 0 0 1px hsl(var(--h) 45% var(--plate-ring) / .55);
}
.plate .ill { width: 74%; height: 74%; display: block; }
.card-image .plate { width: 82%; }

/* Colour words get a generated chip; number words get type. Both share the plate. */
/* The ring is keyed to the text colour, so near-black and near-white swatches stay
   visible against the plate in both themes. */
.swatch {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  box-shadow:
    inset 0 -6% 14% #00000024,
    0 0 0 2px hsl(var(--h) 30% 55% / .5),
    0 2px 6px #0000002e;
}
.numeral { font-size: calc(var(--card-w) * .34); font-weight: 900; letter-spacing: -.04em; color: hsl(var(--h) 55% var(--plate-ink)); }

/* Word label */
.card-word {
  display: grid; gap: calc(var(--card-w) * .02); justify-items: center;
  font-weight: 750; line-height: 1.15;
  /* The floor matters on the biggest deck shown on the smallest phone, where the card
     is ~45px and the proportional size alone would drop under 7px. */
  font-size: clamp(.62rem, calc(var(--card-w) * .15), 1.35rem);
  letter-spacing: -.01em;
  max-width: 100%; word-break: break-word; hyphens: auto;
  padding: 0 calc(var(--card-w) * .02);
}
/* A speaker glyph above the term marks "this card can be heard" (target language). */
.card-speaker { color: var(--primary-2); width: calc(var(--card-w) * .17); height: calc(var(--card-w) * .17); }
.card-speaker svg { width: 100%; height: 100%; }
/* A typographic language mark, not a flag emoji — see LANGS in i18n.js. */
.card-lang {
  position: absolute; top: calc(var(--card-w) * .055); right: calc(var(--card-w) * .07);
  font-size: calc(var(--card-w) * .095); font-weight: 800; letter-spacing: .06em;
  color: var(--text-dim); opacity: .75; line-height: 1;
}
.lang-tag {
  display: inline-grid; place-items: center; min-width: 1.55em; padding: .1em .35em;
  border-radius: 5px; font-size: .74em; font-weight: 800; letter-spacing: .05em;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

/* Text cards: the target language reads warmer than the base language, so a glance
   tells you which side of the pair you are looking at. */
.card-text-target .card-back { background: linear-gradient(170deg, color-mix(in srgb, var(--primary) 12%, var(--card-face)), var(--card-face-2)); }
.card-text-target .card-word { color: var(--text); }
.card-text-base .card-word { color: var(--text-dim); font-weight: 700; }

/* Audio card: the sound is the content, so the term stays hidden until it is solved. */
.card-audio-face .plate { width: 62%; }
.wave { width: 58%; height: 58%; color: hsl(265 55% var(--plate-ink)); display: grid; place-items: center; }
.wave svg { width: 100%; height: 100%; }
.card.is-open .card-audio-face .wave { animation: wavepulse 1.6s ease-in-out infinite; }
@keyframes wavepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .62; transform: scale(.93); } }
.card-hint-text {
  font-size: clamp(.44rem, calc(var(--card-w) * .105), .74rem);
  color: var(--text-dim); font-weight: 650; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ---- Interaction states ---- */
@media (hover: hover) and (pointer: fine) {
  .card:not(.is-done):hover { transform: translateY(-5px); }
  .card:not(.is-done):hover .card-face { box-shadow: var(--shadow-lift); }
}
.card:not(.is-done):active { transform: translateY(-1px) scale(.97); }
.card.is-done { cursor: default; }

/* Selected — the card you just turned over */
.card.is-picked .card-back { box-shadow: var(--shadow-2), 0 0 0 2px var(--primary-2); }

/* Matched — a short confirmation, then the pair settles back visually */
.card.is-done .card-back {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-1), 0 0 0 2px color-mix(in srgb, var(--accent) 65%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 13%, var(--card-face)), var(--card-face-2));
}
.card.is-done { opacity: .92; }
.card.is-match .card-inner { animation: matchpop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes matchpop {
  0%   { transform: rotateY(180deg) scale(1); }
  42%  { transform: rotateY(180deg) scale(1.11); }
  100% { transform: rotateY(180deg) scale(1); }
}
.card-badge {
  position: absolute; top: calc(var(--card-w) * -.05); right: calc(var(--card-w) * -.05);
  width: calc(var(--card-w) * .3); height: calc(var(--card-w) * .3);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #04231a;
  box-shadow: 0 3px 10px #0000003d;
  animation: badgein .38s cubic-bezier(.3, 1.6, .5, 1) backwards;
  z-index: 2;
}
.card-badge svg { width: 66%; height: 66%; }
@keyframes badgein { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }

/* Wrong pair — a short, low-amplitude shake; never long enough to slow play down */
.card.is-miss .card-back {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  box-shadow: var(--shadow-1), 0 0 0 2px color-mix(in srgb, var(--danger) 60%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--danger) 12%, var(--card-face)), var(--card-face-2));
}
.card.is-miss { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50%      { transform: translateX(-4px); }
}

/* Hinted pair */
.card.is-hint .card-back { box-shadow: var(--shadow-2), 0 0 0 2px var(--warn); }
.card.is-hint .card-inner { animation: hintpulse 1.2s ease-in-out infinite; }
@keyframes hintpulse { 50% { transform: rotateY(180deg) scale(1.04); } }

/* Deal-in: cards land in sequence when a board is dealt */
.card.dealing { animation: dealin .42s var(--flip-ease) backwards; animation-delay: var(--deal-delay, 0ms); }
@keyframes dealin { from { opacity: 0; transform: translateY(14px) scale(.9); } }

/* Pause veil + peek banner */
.pause-veil {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); border-radius: var(--radius); z-index: 5;
}
.veil-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 .3rem; }
.veil-sub { color: var(--text-dim); margin: 0 0 1rem; font-size: .88rem; }
.peek-banner {
  position: absolute; top: .25rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--warn); color: #241800; font-weight: 800; font-size: .78rem;
  padding: .3rem .85rem; border-radius: 999px; z-index: 6; margin: 0;
  box-shadow: var(--shadow-2);
}
.peek-banner svg { width: 15px; height: 15px; }

/* ---------------------- Learning moment (on a match) ---------------------
   Sits over the board and is inert to the pointer, so play never waits for it.
   Anchored to the bottom, where it cannot cover the cards still in play. */
.learn-moment {
  position: absolute; left: 50%; bottom: .4rem; transform: translateX(-50%);
  z-index: 7; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .28s var(--flip-ease), visibility .18s;
  max-width: min(94%, 460px);
}
.learn-moment.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-4px); }
.learn-moment.interactive { pointer-events: auto; }

.lm-card {
  display: flex; align-items: center; gap: .8rem;
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 16px; padding: .6rem .9rem .6rem .6rem;
  box-shadow: var(--shadow-2);
  position: relative;
}
.lm-plate { width: 52px; height: 52px; flex: none; border-radius: 15px; }
.lm-plate .ill { width: 74%; height: 74%; }
.lm-plate .swatch { width: 60%; }
.lm-plate .numeral { font-size: 1.5rem; }
.lm-text { min-width: 0; display: grid; gap: .05rem; }
.lm-term { margin: 0; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.lm-ipa { margin: 0; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .78rem; color: var(--primary-2); }
.lm-translation { margin: 0; font-size: .9rem; color: var(--text-dim); font-weight: 600; }
.lm-sentence { margin: .18rem 0 0; font-size: .82rem; color: var(--text-dim); font-style: italic; line-height: 1.35; }

.lm-badge {
  position: absolute; top: -.55rem; left: .7rem;
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--accent); color: #04231a;
  border-radius: 999px; padding: .1rem .5rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.lm-badge svg { width: 12px; height: 12px; }

/* A miss says less, and says it gently. */
.lm-miss { flex-direction: column; align-items: stretch; gap: .5rem; padding: .7rem .9rem; text-align: center; }
.lm-almost { margin: 0; font-size: .95rem; font-weight: 750; color: var(--warn); }
.lm-pair { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.lm-word {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .32rem .7rem; font-size: .86rem; font-weight: 650;
}
.lm-word:hover { border-color: var(--primary-2); }
.lm-word svg { width: 14px; height: 14px; color: var(--primary-2); }

@media (max-width: 620px) {
  .lm-plate { width: 42px; height: 42px; border-radius: 12px; }
  .lm-term { font-size: 1rem; }
  .lm-sentence { display: none; }
}

/* --------------------------- Words side panel --------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  backdrop-filter: blur(12px);
}
.panel-head {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: none; color: var(--text-dim);
  padding: .7rem .8rem; text-align: left;
}
.panel-title { display: flex; align-items: center; gap: .45rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; }
.panel-title svg { width: 15px; height: 15px; }
.panel-count {
  margin-left: auto; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .05rem .5rem; font-size: .75rem; font-weight: 750; color: var(--text);
}
.panel-chevron { display: none; }
.panel-chevron svg { width: 17px; height: 17px; transition: transform .22s ease; }
.panel-body { min-height: 0; overflow-y: auto; padding: 0 .8rem .8rem; display: grid; gap: .55rem; align-content: start; }
.panel-hint { color: var(--text-dim); font-size: .8rem; margin: 0; line-height: 1.45; }
.word-list { display: grid; gap: .4rem; }
.word-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .45rem .55rem; width: 100%; text-align: left; color: inherit;
  animation: slidein .32s var(--flip-ease);
}
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } }
.word-item:hover { border-color: var(--primary-2); }
.word-plate {
  width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(158deg, hsl(var(--h) var(--plate-s) var(--plate-l)), hsl(var(--h) var(--plate-s) var(--plate-l2)));
  box-shadow: inset 0 0 0 1px hsl(var(--h) 45% var(--plate-ring) / .5);
}
.word-plate .ill { width: 74%; height: 74%; }
.word-plate .swatch { width: 58%; }
.word-plate .numeral { font-size: 1rem; }
.word-target { font-weight: 750; font-size: .9rem; }
.word-base { color: var(--text-dim); font-size: .77rem; }
.word-new { font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.word-speak { color: var(--text-dim); display: grid; place-items: center; }
.word-speak svg { width: 16px; height: 16px; }

/* --------------------------------- Modals -------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 7, 18, .66); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 1rem;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(560px, 100%); max-height: 88dvh; overflow-y: auto;
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow-2);
  padding: 1.15rem; display: grid; gap: .9rem;
  animation: rise .24s var(--flip-ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.modal-head h2 { font-size: 1.15rem; font-weight: 800; }
.modal-body { display: grid; gap: .9rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal-actions .btn { flex: 1 1 140px; }

.modal-result { text-align: center; }
.modal-result h2 { font-size: 1.45rem; font-weight: 800; }
.result-stars { display: flex; justify-content: center; gap: .35rem; }
.result-stars svg { width: 34px; height: 34px; }
.result-stars .on { color: var(--warn); fill: var(--warn); animation: starin .45s cubic-bezier(.3,1.5,.5,1) backwards; }
.result-stars .off { color: var(--border); }
@keyframes starin { from { opacity: 0; transform: scale(.4) rotate(-30deg); } }
.result-best { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; color: var(--accent); font-weight: 700; margin: 0; font-size: .9rem; }
.result-best svg { width: 16px; height: 16px; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; }
.result-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem; }
.result-cell .k { display: block; color: var(--text-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.result-cell .v { display: block; font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.achievement-row { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.achievement {
  display: inline-flex; align-items: center; gap: .35rem;
  background: color-mix(in srgb, var(--warn) 18%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; font-weight: 700;
}
.achievement svg { width: 14px; height: 14px; color: var(--warn); }

/* Settings rows */
.setting { display: grid; gap: .35rem; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.setting-label { font-weight: 650; font-size: .92rem; }
.setting-desc { color: var(--text-dim); font-size: .78rem; line-height: 1.35; }
.switch { position: relative; width: 46px; height: 26px; flex: none; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .2s ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: transform .2s var(--flip-ease), background .2s ease; }
.switch.on { background: linear-gradient(140deg, var(--primary-2), var(--primary)); border-color: transparent; }
.switch.on::after { transform: translateX(20px); background: #fff; }
.range { width: 100%; accent-color: var(--primary-2); }
.select {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .55rem .6rem; font-family: inherit; font-size: .9rem;
}
.divider { height: 1px; background: var(--border); }

.xp-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--primary-2), var(--primary)); transition: width .45s var(--flip-ease); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; }
.best-list { display: grid; gap: .35rem; }
.best-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .6rem; font-size: .84rem; }
.best-row .k { color: var(--text-dim); }
.best-row .v { font-weight: 800; font-variant-numeric: tabular-nums; }

/* --------------------------------- Toasts -------------------------------- */
.toasts { position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 80; display: grid; gap: .4rem; justify-items: center; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 999px;
  padding: .48rem .95rem; font-size: .85rem; font-weight: 700; box-shadow: var(--shadow-2);
  animation: toastin .26s var(--flip-ease);
}
.toast svg { width: 15px; height: 15px; }
.toast.good { border-color: var(--accent); color: var(--accent); }
.toast.warn { border-color: var(--warn); color: var(--warn); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) scale(.94); } }

/* ------------------------------ Breakpoints ------------------------------ */
/* Desktop / tablet: the word panel is a fixed side column. */
@media (min-width: 860px) {
  .setup-card { padding: 1.7rem; }
  .brand h1 { font-size: 1.8rem; }
  .play-main { grid-template-columns: minmax(0, 1fr) 290px; padding: .9rem; gap: .9rem; }
  /* The panel is always open as a side column, so its toggle has nothing to do. */
  #btn-panel { display: none; }
}
@media (min-width: 1280px) {
  .play-main { grid-template-columns: minmax(0, 1fr) 330px; }
}

/* Phone / small tablet: the panel collapses into a bottom sheet so the board keeps
   the whole viewport. It only expands when the player asks for it. */
@media (max-width: 859px) {
  .play-main { padding: .55rem; gap: .5rem; grid-template-rows: minmax(0, 1fr) auto; }
  .panel { max-height: 46dvh; }
  .panel-chevron { display: grid; place-items: center; color: var(--text-dim); }
  .panel:not(.open) .panel-body { display: none; }
  .panel.open .panel-chevron svg { transform: rotate(180deg); }
}
@media (max-width: 620px) {
  .lang-pair { grid-template-columns: 1fr; }
  .lang-arrow { display: none; }
  .setup { padding: .6rem; }
  .setup-card { padding: 1rem; gap: .95rem; }
  .brand { gap: .6rem; }
  .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .brand h1 { font-size: 1.2rem; }
  .tagline { font-size: .8rem; }
  .brand-actions { gap: .25rem; }
  .topbar { padding: .45rem .5rem; gap: .4rem; }
  .board-title { display: none; }
  .hud { order: 3; width: 100%; justify-content: space-between; }
  /* Touch targets stay at the 44px minimum on phones; the row still fits because the
     board title is hidden at this width. */
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .topbar-right { gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card-inner, .card, .xp-fill, .switch::after { transition-duration: .01ms !important; }
  .card.is-match .card-inner, .card.is-miss, .card.is-hint .card-inner, .card.dealing,
  .card-badge, .word-item, .modal, .toast, .hud-item.bump, .result-stars .on,
  .card.is-open .card-audio-face .wave { animation: none !important; }
  .learn-moment { transition-duration: .01ms !important; }
}