/* Single CSS entry point: import list only, order = cascade order. Checked by scripts/css-concat-check.mjs. *//* Design tokens: theme custom properties only (dark default, light via <html data-theme="light">). */

:root {
  color-scheme: dark;

  /* --- theme helpers (overridden by the light theme) ------- */
  --ink: 255, 244, 228; /* tint colour for borders and hover fills */
  --well: 10, 9, 8; /* sunken surfaces: inputs, slots */
  --scrim: rgba(6, 5, 4, 0.8);
  --solid: #17130f; /* opaque surface: table head, select options */
  --scroll: rgba(230, 205, 163, 0.24);
  --on-select: #fff;
  --rose-text: #e58891;
  --sheen-a: rgba(255, 250, 240, 0.09);
  --sheen-b: rgba(255, 244, 228, 0.05);

  /* --- core ----------------------------------------------- */
  --night: #0a0908;
  --night-2: #100e0c;
  --champagne: #e6cda3;
  --champagne-deep: #c7a876;
  --amber: #ffb765;
  --cream: #f4efe7;
  --rose: #d4676f;
  --leaf: #93c08f;

  /* --- glass ---------------------------------------------- */
  --glass-bg: linear-gradient(
    158deg,
    rgba(255, 252, 246, 0.072) 0%,
    rgba(255, 250, 242, 0.032) 46%,
    rgba(255, 248, 238, 0.045) 100%
  );
  --glass-bg-soft: linear-gradient(
    158deg,
    rgba(255, 252, 246, 0.05) 0%,
    rgba(255, 250, 242, 0.022) 100%
  );
  --glass-blur: saturate(150%) blur(26px);
  --glass-edge: rgba(var(--ink), 0.11);
  --glass-edge-lit: rgba(255, 246, 230, 0.2);
  --glass-sheen: inset 0 1px 0 rgba(var(--ink), 0.16);
  --glass-drop: 0 18px 44px rgba(0, 0, 0, 0.5);

  --champagne-soft: rgba(230, 205, 163, 0.13);
  --champagne-line: rgba(230, 205, 163, 0.26);
  --leaf-soft: rgba(147, 192, 143, 0.16);
  --rose-soft: rgba(212, 103, 111, 0.16);

  --rule: rgba(var(--ink), 0.1);
  --rule-quiet: rgba(var(--ink), 0.06);

  /* --- text ----------------------------------------------- */
  --text: #f4efe7;
  --text-2: #cfc7bb;
  --text-3: #a69d91;
  --text-4: #8f877b; /* AA 4.5:1 on glass panels (T9.5) */

  /* --- CEFR ramp ------------------------------------------ */
  --a1: #10b981;
  --a2: #5b95f7;
  --b1: #8285f6;
  --b2: #f59e0b;
  --c1: #ec4899;
  --c2: #a284f9;

  /* --- type ----------------------------------------------- */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- metrics -------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-xl: 26px;
  --shell: 1180px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- header, nav and switches (T9.1) ----------------------- */
  --wordmark-ink: linear-gradient(
    100deg,
    #fff6e0 0%,
    #f1d9a6 28%,
    #e6bb6a 52%,
    #f6e2b4 76%,
    #d9a955 100%
  );
  --wordmark-glow: drop-shadow(0 2px 14px rgba(230, 190, 110, 0.38));
  --tab-text: var(--text-3);
  --brand-note: var(--text-4);
  --control-bg: var(--glass-bg-soft); /* nav bar, switches, outline buttons */
  --nav-edge: var(--glass-edge);
  --gold-bg: linear-gradient(150deg, #f3e0be, var(--champagne-deep));
  --gold-ink: #241b10;
  --pill-active-bg: var(--gold-bg);
  --pill-active-ink: var(--gold-ink);
  --pill-active-edge: transparent;
  --pill-active-shadow: 0 3px 14px rgba(230, 205, 163, 0.25);
  --sheet-active-shadow: none;
  --switch-edge: var(--glass-edge);
  --switch-shadow: var(--glass-sheen);
  --switch-text: var(--text-3);
  --thumb-bg: linear-gradient(135deg, #efd9ae, #c9a56a);
  --thumb-ink: #1c150d;
  --thumb-shadow:
    0 2px 10px rgba(230, 205, 163, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --bar-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
  --kicker-ink: var(--champagne-deep); /* small uppercase labels */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lift: 0 8px 22px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
  --map-drop: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
  --on-color: #fff; /* text on saturated fills (CEFR badges) */
  --option-active-shadow:
    0 0 0 1px rgba(230, 205, 163, 0.2),
    0 6px 22px rgba(230, 190, 110, 0.18);
  --amber-glow: 0 0 12px rgba(255, 183, 101, 0.35);
  --bar-lift: 0 -8px 28px rgba(0, 0, 0, 0.25);
  --ring-glow: drop-shadow(0 0 8px rgba(230, 205, 163, 0.35));
  --card-tint: rgba(230, 205, 163, 0.07);
  --note-bg: var(--champagne-soft); /* soft info panels */
  --note-edge: var(--champagne-line);
  --account-guest-bg: var(--champagne-soft);
  --account-guest-edge: var(--champagne);
  --hp-bg:
    linear-gradient(135deg, rgba(230, 205, 163, 0.13), rgba(230, 205, 163, 0.03) 60%),
    var(--glass-bg-soft);
  --hp-edge: var(--champagne-line);
  --hp-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 34px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(230, 205, 163, 0.04);
  --hp-ring-a: #f3e0be;
  --hp-ring-b: #c9a46a;
  --hp-ring-glow: drop-shadow(0 0 6px rgba(230, 205, 163, 0.45));
  --hp-ring-glow-strong: drop-shadow(0 0 12px rgba(230, 205, 163, 0.8));
  --hp-fill: linear-gradient(90deg, var(--champagne-deep), #f3e0be);
  --pop-ink: #0c2a1d;
  --pop-bg: linear-gradient(135deg, #8fe0b6, var(--leaf));
  --pop-shadow: 0 6px 20px rgba(80, 200, 150, 0.4);
  --map-land: rgba(var(--ink), 0.08);
  --map-border: var(--glass-edge);
  --gold-edge: rgba(255, 246, 226, 0.4);
  --gold-shadow: 0 4px 18px rgba(230, 205, 163, 0.22);
  --gold-hover-bg: linear-gradient(150deg, #fbedd3, #d7b983);
  --gold-hover-shadow: 0 6px 24px rgba(255, 183, 101, 0.32);
  --btn-outline-edge: var(--champagne-line);
  --btn-quiet-bg: rgba(var(--ink), 0.045);
  --btn-quiet-edge: var(--rule-quiet);

  /* --- ambience: the lamp light behind the glass (.ambience in base.css) --- */
  --ambience:
    radial-gradient(
      52% 38% at 50% -4%,
      rgba(255, 183, 101, 0.16) 0%,
      rgba(255, 183, 101, 0) 70%
    ),
    radial-gradient(
      40% 34% at 92% 22%,
      rgba(230, 205, 163, 0.1) 0%,
      rgba(230, 205, 163, 0) 72%
    ),
    radial-gradient(
      46% 40% at 4% 74%,
      rgba(199, 168, 118, 0.085) 0%,
      rgba(199, 168, 118, 0) 74%
    ),
    radial-gradient(
      70% 50% at 50% 108%,
      rgba(255, 183, 101, 0.07) 0%,
      rgba(255, 183, 101, 0) 70%
    );
}

/* ============================================================
   Light theme: modern warm (owner 2026-11-07). Warm off-white page, white cards with a
   thin warm border and soft shadow, near-black text, gold only on the primary action and
   the active tab, no gloss and no multi-stop gradients. Same layout as the dark theme.
   Activated by <html data-theme="light">.
   ============================================================ */

:root[data-theme="light"] {
  color-scheme: light;

  --ink: 28, 25, 21;
  --well: 255, 255, 255;
  --scrim: rgba(28, 25, 21, 0.4);
  --solid: #ffffff;
  --scroll: rgba(28, 25, 21, 0.22);
  --on-select: #1c1915;
  --rose-text: #a3363f;
  --sheen-a: rgba(255, 255, 255, 0);
  --sheen-b: rgba(255, 255, 255, 0);

  --night: #faf8f5;
  --night-2: #f4f0ea;
  --champagne: #86601a; /* accent text and links: AA on white */
  --champagne-deep: #d9b775; /* gold */
  --amber: #8a520a;
  --cream: #1c1915;
  --rose: #9e3a42;
  --leaf: #2e6235;

  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
  --glass-bg-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72));
  --glass-blur: saturate(120%) blur(16px);
  --glass-edge: #ece6dc;
  --glass-edge-lit: rgba(255, 255, 255, 0);
  --glass-sheen: 0 0 0 transparent;
  --glass-drop:
    0 1px 2px rgba(28, 25, 21, 0.04),
    0 8px 24px rgba(28, 25, 21, 0.06);

  --champagne-soft: rgba(200, 150, 62, 0.12);
  --champagne-line: #e2d3b8;
  --leaf-soft: rgba(46, 98, 53, 0.1);
  --rose-soft: rgba(158, 58, 66, 0.08);

  --rule: rgba(28, 25, 21, 0.1);
  --rule-quiet: rgba(28, 25, 21, 0.06);

  --text: #1c1915;
  --text-2: #4f483e;
  --text-3: #5e574d;
  --text-4: #6f685d;

  /* CEFR colours darkened to AA 4.5:1 on white and the warm page */
  --a1: #06664a;
  --a2: #1d4ed8;
  --b1: #4f46e5;
  --b2: #92400e;
  --c1: #9d174d;
  --c2: #6d28d9;

  /* header, nav and switches */
  --wordmark-ink: linear-gradient(100deg, #8a6116, #8a6116);
  --wordmark-glow: none;
  --tab-text: var(--text-2);
  --brand-note: var(--text-3);
  --control-bg: #ffffff;
  --nav-edge: #ece6dc;
  /* translucent champagne gold: still the strongest action, but calm on white
     (owner: solid gold stood out too much) */
  --gold-bg: linear-gradient(180deg, rgba(217, 183, 117, 0.42), rgba(200, 150, 62, 0.36));
  --gold-ink: #5a3f0e;
  --gold-edge: rgba(176, 128, 44, 0.45);
  --gold-shadow: 0 1px 2px rgba(120, 85, 20, 0.1);
  --gold-hover-bg: linear-gradient(180deg, rgba(217, 183, 117, 0.55), rgba(200, 150, 62, 0.48));
  --gold-hover-shadow: 0 4px 12px rgba(160, 115, 40, 0.16);
  --pill-active-bg: #f4ead6;
  --pill-active-ink: #6e4f14;
  --pill-active-edge: #e2cfa6;
  --pill-active-shadow: inset 0 0 0 1px #e2cfa6;
  --sheet-active-shadow: var(--pill-active-shadow);
  --switch-edge: #ece6dc;
  --switch-shadow: 0 0 0 transparent;
  --switch-text: var(--text-3);
  --thumb-bg: #f4ead6;
  --thumb-ink: #6e4f14;
  --thumb-shadow: inset 0 0 0 1px #e2cfa6;
  --bar-shadow:
    0 -1px 0 #ece6dc,
    0 -8px 24px rgba(28, 25, 21, 0.05);
  --btn-outline-edge: #e2d3b8;
  --btn-quiet-bg: #ffffff;
  --btn-quiet-edge: #ece6dc;
  --kicker-ink: var(--champagne);
  --shadow-sm: 0 1px 3px rgba(28, 25, 21, 0.08);
  --shadow-md: 0 2px 8px rgba(28, 25, 21, 0.08);
  --shadow-lift: 0 6px 18px rgba(28, 25, 21, 0.1);
  --shadow-lg: 0 16px 36px rgba(28, 25, 21, 0.12);
  --map-drop: drop-shadow(0 6px 18px rgba(28, 25, 21, 0.08));
  --option-active-shadow:
    0 0 0 1px rgba(168, 116, 31, 0.3),
    0 6px 20px rgba(168, 116, 31, 0.12);
  --amber-glow: 0 0 10px rgba(200, 150, 62, 0.3);
  --bar-lift: 0 -6px 20px rgba(28, 25, 21, 0.06);
  --ring-glow: none;
  --card-tint: rgba(200, 150, 62, 0.06);
  --note-bg: #ffffff;
  --note-edge: var(--glass-edge);
  --account-guest-bg: #ffffff;
  --account-guest-edge: var(--btn-outline-edge);
  --hp-bg: var(--glass-bg);
  --hp-edge: var(--glass-edge);
  --hp-shadow: var(--glass-drop);
  --hp-ring-a: #d9b775;
  --hp-ring-b: #a7782a;
  --hp-ring-glow: none;
  --hp-ring-glow-strong: drop-shadow(0 0 8px rgba(200, 150, 62, 0.45));
  --hp-fill: linear-gradient(90deg, #a7782a, #d9b775);
  --pop-ink: #ffffff;
  --pop-bg: linear-gradient(135deg, #3f8a52, var(--leaf));
  --pop-shadow: 0 6px 18px rgba(46, 98, 53, 0.3);
  --map-land: #e8e1d5;
  --map-border: #c4b9a7;

  --ambience:
    radial-gradient(60% 40% at 50% -10%, rgba(240, 200, 140, 0.16), transparent 70%),
    linear-gradient(180deg, #faf8f5, #faf8f5);
}

/* ---- Layout: height of the phone bottom navigation (0 where it is hidden) ---- */
:root {
  --bottom-nav-h: 0px;
}

@media (max-width: 760px) {
  :root {
    --bottom-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Slovniczech — foundation
   Warm near-black, champagne gold, lamp-glow amber.
   Surfaces are frosted glass lit from behind.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
select,
input,
textarea {
  touch-action: manipulation;
}

body {
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The light the glass refracts. Fixed, so panels pick up a different
   part of the glow as the page scrolls. */
.ambience {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ambience);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.006em;
  margin: 0;
  color: var(--text);
}

h1 {
  font-size: 2.15rem;
  line-height: 1.16;
}

h2 {
  font-size: 1.72rem;
  line-height: 1.22;
}

h3 {
  font-size: 1.38rem;
  line-height: 1.3;
}

p {
  margin: 0;
}

a {
  color: var(--champagne);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: rgba(var(--ink), 0.07);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--champagne) 30%, transparent);
  color: var(--on-select);
}

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
  border-radius: 3px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

.hidden {
  display: none !important;
}

/* Visually hidden but read by screen readers (e.g. a section title the design omits). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 1.85rem;
  }
}

@media (max-width: 560px) {
  h2 {
    font-size: 1.5rem;
  }
}

/* ============================================================
   The glass primitive
   ============================================================ */

.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-sheen), var(--glass-drop);
}

/* A specular sweep across the surface — the tell that it is glass
   and not merely a translucent box. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    var(--sheen-a) 0%,
    transparent 24%,
    transparent 76%,
    var(--sheen-b) 100%
  );
}

/* Without backdrop-filter the glass would sit on bare black and lose
   contrast, so fall back to a solid warm surface. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .glass {
    background: var(--solid);
  }
}
/* ============================================================
   Shell & navigation
   ============================================================ */

.app-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 26px 110px;
}

.app-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 34px 0 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule-quiet);
}

.wordmark {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex-shrink: 0;
}

.wordmark-logo {
  width: 56px;
  height: auto;
  display: block;
}

.wordmark-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wordmark h1 {
  background: linear-gradient(
    94deg,
    var(--cream) 8%,
    var(--champagne) 48%,
    var(--champagne-deep) 96%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wordmark-note {
  font-size: 0.8rem;
  color: var(--brand-note);
  letter-spacing: 0.03em;
  text-transform: none;
}

.header-controls {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.header-controls > .main-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  max-width: 100%;
}

/* Top row, left to right: theme toggle, language, account. */
.header-controls > .btn:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.header-controls > .btn:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

.btn-theme {
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.btn-theme svg {
  display: block;
  width: 17px;
  height: 17px;
}

/* ============================================================
   Navigation: tabs, mobile nav modal, view switching
   ============================================================ */

.main-nav {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  padding: 4px;
  border-radius: 99px;
  background: var(--control-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--nav-edge);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.nav-tab-btn {
  background: none;
  border: 0;
  border-radius: 99px;
  color: var(--tab-text);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 19px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.nav-tab-btn:hover {
  color: var(--text);
}

.nav-tab-btn.active {
  color: var(--pill-active-ink);
  background: var(--pill-active-bg);
  border-color: var(--pill-active-edge);
  box-shadow: var(--pill-active-shadow);
}

.nav-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: 99px;
  color: var(--text);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-trigger svg {
  flex-shrink: 0;
}

.nav-modal {
  width: min(360px, 100%);
}

.nav-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-modal-item {
  background: rgba(var(--ink), 0.045);
  border: 1px solid var(--rule-quiet);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.nav-modal-item:hover {
  border-color: var(--rule);
  color: var(--text);
}

.nav-modal-item.active {
  color: var(--pill-active-ink);
  background: var(--pill-active-bg);
  border-color: var(--pill-active-edge);
  box-shadow: var(--sheet-active-shadow);
}

.view-section {
  display: none;
}

.view-section.active {
  display: block;
}

/* ============================================================
   Panels
   ============================================================ */

.panel {
  border-radius: var(--r-xl);
  padding: 28px 30px;
  margin-bottom: 22px;
}

.panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.panel-desc {
  color: var(--text-2);
  font-size: 0.97rem;
  max-width: 64ch;
  margin-bottom: 20px;
}

@media (max-width: 880px) {
  .panel {
    padding: 22px 18px;
  }
}

@media (max-width: 560px) {
  .panel {
    padding: 20px 16px;
    border-radius: var(--r-lg);
  }

  .panel-desc {
    font-size: 0.93rem;
    margin-bottom: 16px;
  }
}

:root[data-theme="light"] .panel-desc {
  color: var(--text-2);
}

/* ============================================================
   Progress ledger
   ============================================================ */

.ledger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  border-radius: var(--r-xl);
  padding: 22px 30px;
  margin-bottom: 28px;
}

.ledger-figure {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--serif);
}

.ledger-learned {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--champagne);
  font-variant-numeric: lining-nums tabular-nums;
}

.ledger-total {
  font-size: 1.22rem;
  color: var(--text-4);
  font-variant-numeric: lining-nums tabular-nums;
}

.ledger-body {
  min-width: 0;
}

.ledger-caption {
  font-size: 0.92rem;
  color: var(--text-2);
  margin-bottom: 11px;
}

.ledger-caption strong {
  color: var(--text);
  font-weight: 600;
}

.track {
  height: 4px;
  background: rgba(var(--ink), 0.09);
  border-radius: 99px;
  overflow: hidden;
}

.track-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--champagne-deep),
    var(--champagne) 55%,
    var(--amber)
  );
  box-shadow: 0 0 14px color-mix(in srgb, var(--amber) 30%, transparent);
  transition: width 0.55s var(--ease);
}

.ledger-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.ledger-hint {
  font-size: 0.8rem;
  color: var(--text-4);
  text-align: right;
  max-width: 24ch;
}

@media (max-width: 880px) {
  .ledger {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ledger-action {
    align-items: flex-start;
  }

  .ledger-hint {
    text-align: left;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .ledger-learned {
    font-size: 2.4rem;
  }
}

@media (max-width: 560px) {
  .ledger {
    padding: 18px 16px;
    margin-bottom: 20px;
    border-radius: var(--r-lg);
  }

  .ledger-action .btn {
    width: 100%;
  }

  .ledger-action {
    align-items: stretch;
  }
}

/* Feature: learned-words counter in the header (Practice tab), with a "+N" pop */
.hp {
  position: relative;
  flex: 0 1 340px;
  min-width: 0;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 92px;
  margin: 0 auto;
  padding: 0 28px 0 14px;
  border-radius: 26px;
  background: var(--hp-bg);
  border: 1px solid var(--hp-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--hp-shadow);
}

.hp + .header-controls {
  margin-left: 0;
}

.hp-ring {
  position: relative;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
}

.hp-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hp-ring circle {
  fill: none;
  stroke-width: 4.5;
}

.hp-ring .bg {
  stroke: rgba(var(--ink), 0.13);
}

.hp-ring .fg {
  stroke: url(#hpGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease);
  filter: var(--hp-ring-glow);
}

.hp-stop-a {
  stop-color: var(--hp-ring-a);
}

.hp-stop-b {
  stop-color: var(--hp-ring-b);
}

.hp-ring-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 0.92rem var(--sans);
  color: var(--champagne);
  letter-spacing: -0.02em;
}

.hp.glow .hp-ring {
  animation: hpGlow 0.9s var(--ease);
}

.hp-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.hp-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kicker-ink);
  line-height: 1;
}

.hp-fig {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.hp-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2.05rem;
  letter-spacing: -0.02em;
  color: var(--cream);
  display: inline-block;
}

.hp-total {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-3);
}

.hp-num.bump {
  animation: hpBump 0.55s var(--ease);
}

.hp-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(var(--ink), 0.12);
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--hp-fill);
  transition: width 0.8s var(--ease);
}

.hp-plus {
  position: absolute;
  right: 22px;
  bottom: calc(100% + 8px);
  padding: 4px 12px;
  border-radius: 99px;
  pointer-events: none;
  white-space: nowrap;
  font: 800 0.95rem var(--sans);
  color: var(--pop-ink);
  background: var(--pop-bg);
  box-shadow: var(--pop-shadow);
  animation: hpPlus 1.3s var(--ease) forwards;
}

@keyframes hpPlus {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}

@keyframes hpBump {
  40% {
    transform: scale(1.14);
    color: var(--champagne);
  }
}

@keyframes hpGlow {
  40% {
    filter: var(--hp-ring-glow-strong);
  }
}

@media (max-width: 1060px) {
  .hp {
    flex-basis: 270px;
    height: 78px;
    gap: 14px;
    padding: 0 20px 0 10px;
  }

  .hp-ring {
    width: 56px;
    height: 56px;
  }

  .hp-ring-pct {
    font-size: 0.8rem;
  }

  .hp-num {
    font-size: 1.65rem;
  }

  .hp-total {
    font-size: 0.82rem;
  }
}

@media (max-width: 760px) {
  .hp {
    order: 10;
    flex: none;
    width: 100%;
    height: 76px;
    margin: 12px 0 4px;
    padding: 0 22px 0 12px;
  }

  .hp-plus {
    right: 16px;
    bottom: calc(100% - 4px);
  }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  font-family: var(--sans);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.008em;
  border-radius: 99px;
  padding: 11px 22px;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.btn-solid {
  background: var(--gold-bg);
  border: 1px solid var(--gold-edge);
  color: var(--gold-ink);
  box-shadow: var(--gold-shadow);
}

.btn-solid:hover:not(:disabled) {
  background: var(--gold-hover-bg);
  box-shadow: var(--gold-hover-shadow);
}

.btn-outline {
  background: var(--control-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--btn-outline-edge);
  color: var(--champagne);
}

.btn-outline:hover:not(:disabled) {
  background: var(--champagne-soft);
  border-color: var(--champagne);
}

.btn-quiet {
  background: var(--btn-quiet-bg);
  border: 1px solid var(--btn-quiet-edge);
  color: var(--text-2);
}

.btn-quiet:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--rule);
  background: rgba(var(--ink), 0.08);
}

.btn-wide {
  display: block;
  width: 100%;
  margin-top: 16px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

button,
.btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* no double-tap zoom delay on buttons */
}

/* ============================================================
   Form controls
   ============================================================ */

.field {
  background-color: rgba(var(--well), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 12px 15px;
  font-size: 0.97rem;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
  min-width: 0;
}

.field::placeholder {
  color: var(--text-4);
}

.field:hover {
  border-color: var(--rule);
  background-color: rgba(var(--well), 0.35);
}

.field:focus {
  outline: none;
}

input.field:focus,
textarea.field:focus,
select.field:focus-visible {
  border-color: var(--champagne);
}

select.field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23a69d91' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
  text-overflow: ellipsis;
}

select.field option {
  background: var(--solid);
  color: var(--text);
}

textarea.field {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.6;
}

@media (max-width: 880px) {
  .field,
  textarea.field {
    font-size: 16px;
  }
}

:root[data-theme="light"] select.field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2365594a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  .field,
  select.field,
  input.field {
    font-size: 16px;
  }
}

.lvl-a2 {
  --lvl: var(--a2);
}

.lvl-b1 {
  --lvl: var(--b1);
}

.lvl-b2 {
  --lvl: var(--b2);
}

.lvl-c1 {
  --lvl: var(--c1);
}

.lvl-c2 {
  --lvl: var(--c2);
}

.level-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.level-mark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lvl, var(--champagne));
  box-shadow: 0 0 9px var(--lvl, var(--champagne));
}

/* Phones: level badge pinned to the card corner (Dictionary entry). */
@media (max-width: 560px) {
  .level-mark {
    position: absolute;
    top: 17px;
    right: 18px;
  }
}

@media (max-width: 360px) {
  .level-mark {
    right: 14px;
  }
}

/* Primitive: speak button (.btn-say) and its phone tap size (shared with .btn-bookmark); used by Dictionary entries, My words, Level test and drills. */
.btn-say {
  background: none;
  border: 0;
  color: var(--text-4);
  cursor: pointer;
  padding: 3px 5px;
  line-height: 1;
  border-radius: var(--r-xs);
  transition:
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-say:hover {
  color: var(--amber);
  transform: scale(1.08);
}

.btn-say.is-speaking {
  color: var(--amber);
  filter: drop-shadow(
    0 0 8px color-mix(in srgb, var(--amber) 60%, transparent)
  );
  animation: pulse-say 1.2s infinite ease-in-out;
}

.btn-say svg {
  display: block;
  width: 17px;
  height: 17px;
}

@keyframes pulse-say {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .btn-say {
    padding: 8px;
    margin: -5px -4px;
  }
}

@media (max-width: 560px) {
  .btn-say,
  .btn-bookmark {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ============================================================
   Level test overlay
   ============================================================ */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 60;
}

.overlay-window {
  width: min(640px, 100%);
  max-height: 88vh;
  max-height: calc(100dvh - 44px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-xl);
}

.overlay-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px 18px;
}

.overlay-head p {
  font-size: 0.9rem;
  color: var(--text-3);
  margin-top: 4px;
}

.btn-close {
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.btn-close:hover {
  color: var(--text);
}

.overlay-body {
  padding: 22px 30px 30px;
}

.exam-meta {
  font-size: 0.82rem;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}

.exam-word {
  font-family: var(--serif);
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  margin: 18px 0 6px;
  color: var(--cream);
}

.exam-phon {
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-4);
  margin-bottom: 24px;
  min-height: 20px;
}

.result-pane {
  text-align: center;
  padding: 18px 0 6px;
}

.result-score {
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--champagne);
  font-variant-numeric: lining-nums tabular-nums;
}

.result-pane h2 {
  margin-bottom: 9px;
}

.result-pane p {
  font-size: 0.97rem;
  color: var(--text-2);
  max-width: 46ch;
  margin: 0 auto 24px;
}

@media (max-width: 560px) {
  .overlay {
    padding: 12px;
  }

  .overlay-window {
    max-height: calc(100dvh - 24px);
    border-radius: var(--r-lg);
  }

  .overlay-head {
    padding: 20px 20px 12px;
  }

  .overlay-body {
    padding: 14px 20px 22px;
  }

  .exam-word {
    font-size: 2.2rem;
    overflow-wrap: break-word;
  }

  .result-score {
    font-size: 3.2rem;
  }
}

.overlay-head-center {
  position: relative;
  justify-content: center;
  text-align: center;
}

.overlay-head-center > div {
  flex: 1 1 auto;
  padding: 0 32px;
  text-align: center;
}

.overlay-head-center h2,
.overlay-head-center h3,
.overlay-head-center p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.overlay-head-center .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

@media (max-width: 560px) {
  .overlay-head-center .btn-close {
    top: 12px;
    right: 12px;
  }
}

/* Question header, speak button and spacing (were inline styles in LevelTest.tsx) */
.overlay-body.lt-body {
  padding-top: 10px;
}

.lt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.lt-head .exam-meta {
  margin: 0;
}

.btn-say.lt-say {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule-quiet);
  border-radius: 50%;
  background: rgba(var(--ink), 0.06);
  color: var(--champagne);
  cursor: pointer;
}

.lt-say svg {
  width: 18px;
  height: 18px;
}

.exam-word.lt-word {
  margin-top: 4px;
  margin-bottom: 24px;
}

.btn.lt-done {
  margin-top: 20px;
}

/* Feature: first-visit welcome screen with language choice (WelcomeScreen.tsx). */

.welcome {
  position: fixed;
  inset: 0;
  z-index: 80; /* above header, bottom nav (50) and overlays (60) */
  isolation: isolate; /* keeps the inner .ambience (z-index -1) above this background */
  background: var(--night);
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  animation: welcome-in 0.5s var(--ease) both;
}

body.welcome-open {
  overflow: hidden;
}

.welcome-inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-logo {
  width: 72px;
  height: auto;
  margin-bottom: 14px;
}

.welcome-brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0;
}

.welcome-tagline {
  margin: 10px 0 0;
  font-size: 1rem;
  color: var(--text-2);
}

.welcome-tagline span {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--text-3);
}

.welcome-choices {
  width: 100%;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.welcome-choice {
  min-height: 150px;
  padding: 24px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.2s var(--ease),
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.welcome-choice.is-suggested {
  border-color: var(--champagne);
  box-shadow:
    var(--glass-drop),
    0 0 0 1px color-mix(in srgb, var(--champagne) 35%, transparent);
}

.welcome-choice:hover {
  transform: translateY(-2px);
  border-color: var(--champagne);
}

.welcome-choice:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.welcome-hello {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--cream);
}

.welcome-lang {
  font-size: 1rem;
  font-weight: 600;
  color: var(--champagne);
}

.welcome-desc {
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-3);
}

.welcome-hint {
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
}

@keyframes welcome-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .welcome-brand {
    font-size: 2.2rem;
  }

  .welcome-choices {
    margin-top: 32px;
    gap: 10px;
  }

  .welcome-choice {
    min-height: 136px;
    padding: 20px 12px;
  }

  .welcome-hello {
    font-size: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome {
    animation: none;
  }

  .welcome-choice:hover {
    transform: none;
  }
}

/* Answer option buttons (.opt, .opt-grid), shared by practice drills and the level test. */
/* ---------- Options grid --------------------------------- */

.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.opt {
  position: relative;
  text-align: left;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 1.04rem;
  padding: 16px 19px;
  cursor: pointer;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition:
    border-color 0.16s var(--ease),
    background 0.16s var(--ease),
    opacity 0.22s var(--ease);
}

.opt:hover:not(:disabled) {
  border-color: var(--champagne-line);
  background: var(--glass-bg);
}

.opt:disabled {
  cursor: default;
}

.opt.right {
  border-color: color-mix(in srgb, var(--leaf) 60%, transparent);
  background: var(--leaf-soft);
  color: var(--cream);
}

.opt.wrong {
  border-color: color-mix(in srgb, var(--rose) 60%, transparent);
  background: var(--rose-soft);
}

.opt.faded {
  opacity: 0.32;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive ----------------------------------- */

@media (max-width: 660px) {

  .opt-grid {
    grid-template-columns: 1fr;
  }
}

/* Feature: slide-switch. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
.slide-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 3px;
  border-radius: 99px;
  background: var(--control-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--switch-edge);
  box-shadow: var(--switch-shadow);
  isolation: isolate;
}

.slide-switch-thumb {
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 99px;
  background: var(--thumb-bg);
  box-shadow: var(--thumb-shadow);
  transition: transform 0.28s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.slide-switch[data-pos="1"] .slide-switch-thumb {
  transform: translateX(100%);
}

.slide-switch-opt {
  appearance: none;
  background: none;
  border: 0;
  min-width: 40px;
  height: 30px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  border-radius: 99px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--switch-text);
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.slide-switch-opt.on {
  color: var(--thumb-ink);
}

.slide-switch-opt svg {
  display: block;
  width: 16px;
  height: 16px;
}

.slide-switch-opt:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .slide-switch-thumb,
  .slide-switch-opt {
    transition: none;
  }
}

/* Very small phones (SE, 320–360px) */
@media (max-width: 360px) {
  .slide-switch-opt {
    min-width: 34px;
    padding: 0 8px;
  }
}
/* Feature: own-words. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
/* ============================================================
   Own words
   ============================================================ */

.form-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.6fr auto;
  gap: 11px;
}

.table-wrap {
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--rule-quiet);
  border-radius: var(--r-md);
}

table.db {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

table.db th {
  position: sticky;
  top: 0;
  background: var(--solid);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  z-index: 1;
}

table.db td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-quiet);
  color: var(--text-2);
}

table.db tr:hover td {
  background: rgba(var(--ink), 0.04);
}

table.db td.cz-cell {
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--text);
}

.btn-remove {
  background: none;
  border: 0;
  color: var(--text-4);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--r-xs);
}

.btn-remove:hover {
  color: var(--rose);
  background: var(--rose-soft);
}

.db-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

@media (max-width: 880px) {

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {

  /* My words: the table turns into a list of cards. */
  .db-head .field {
    max-width: none !important;
    width: 100%;
  }

  .table-wrap {
    max-height: 60vh;
    max-height: 60dvh;
  }

  table.db,
  table.db tbody {
    display: block;
  }

  table.db thead {
    display: none;
  }

  table.db tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule-quiet);
  }

  table.db td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  table.db td:first-child {
    display: none;
  }

  table.db td:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  table.db td:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.92rem;
  }

  table.db td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
  }

  table.db td:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  table.db tr:hover td {
    background: none;
  }
}

/* ---- Mobile pass: roadmap, my words ---- */
@media (max-width: 760px) {
  /* My words: the level badge belongs to its row, not the panel. */
  table.db .level-mark {
    position: static;
    justify-self: end;
  }
}
/* Feature: roadmap. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
/* ============================================================
   Roadmap — colour-coded stage cards
   ============================================================ */

.roadmap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stage {
  position: relative;
  border-radius: var(--r-lg);
  padding: 24px 28px 22px;
  overflow: hidden;
}

.stage.lvl-a1 {
  --lvl: var(--a1);
}

.stage.lvl-a2 {
  --lvl: var(--a2);
}

.stage.lvl-b1 {
  --lvl: var(--b1);
}

.stage.lvl-b2 {
  --lvl: var(--b2);
}

.stage.lvl-c1 {
  --lvl: var(--c1);
}

.stage.lvl-c2 {
  --lvl: var(--c2);
}

/* The colour rail that identifies the level at a glance. */
.stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--lvl);
  box-shadow: 0 0 22px color-mix(in srgb, var(--lvl) 60%, transparent);
}

.stage.locked {
  opacity: 0.6;
}

.stage-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.stage-level {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--lvl);
  margin-bottom: 2px;
}

.stage-title {
  font-family: var(--serif);
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cream);
}

.stage-pill {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-2);
  background: rgba(var(--ink), 0.07);
  border: 1px solid var(--rule-quiet);
  border-radius: 99px;
  padding: 5px 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stage.done .stage-pill {
  color: var(--lvl);
  border-color: color-mix(in srgb, var(--lvl) 45%, transparent);
  background: color-mix(in srgb, var(--lvl) 14%, transparent);
}

.stage-desc {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 70ch;
  margin-top: 10px;
}

.stage-rule {
  height: 1px;
  background: var(--rule-quiet);
  margin: 18px 0 16px;
}

.topic-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topic {
  font-size: 0.83rem;
  color: var(--text-2);
  background: rgba(var(--ink), 0.045);
  border: 1px solid var(--rule-quiet);
  border-radius: 99px;
  padding: 5px 13px;
  transition:
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.topic:hover {
  border-color: color-mix(in srgb, var(--lvl) 50%, transparent);
  color: var(--text);
}

.topic-n {
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.stage-count {
  font-size: 0.85rem;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

.stage-actions {
  display: flex;
  gap: 9px;
}

.stage .btn {
  font-size: 0.86rem;
  padding: 8px 17px;
}

@media (max-width: 880px) {

  .stage {
    padding: 20px 20px 18px;
  }
}

@media (max-width: 560px) {

  .stage-top {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 560px) {

  /* Roadmap */
  .stage {
    padding: 18px 16px 16px;
  }

  .stage-title {
    font-size: 1.4rem;
  }

  .stage-pill {
    align-self: flex-start;
  }

  .stage-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .stage-actions {
    width: 100%;
  }

  .stage-actions .btn {
    flex: 1;
  }
}

@media (max-width: 760px) {

  /* Roadmap: topics become one swipeable row of compact chips. */
  .topic-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    margin: 0 -16px;
    padding: 2px 16px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 14px,
      #000 calc(100% - 28px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 14px,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }

  .topic-row::-webkit-scrollbar {
    display: none;
  }

  .topic {
    flex: 0 0 auto;
    font-size: 0.76rem;
    padding: 4px 10px;
    white-space: nowrap;
  }

  .stage-desc {
    font-size: 0.92rem;
    margin-top: 8px;
  }

  .stage-rule {
    margin: 14px 0 12px;
  }

  .stage-foot {
    margin-top: 6px;
  }

  .stage-actions .btn {
    padding: 10px 12px;
    font-size: 0.86rem;
  }
}

/* ---- Roadmap mobile: percent pill in the top-right corner ---- */
@media (max-width: 560px) {
  .stage-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .stage-top > div {
    min-width: 0;
  }

  .stage-pill {
    align-self: flex-start;
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 4px 11px;
    font-size: 0.78rem;
  }
}

@media (max-width: 560px) {
  .stage .stage-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .stage .stage-pill {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    margin: 2px 0 0;
  }
}

/* Feature: Lessons list and lesson screen in "Learn" (P8) */
.ls-list {
  margin: 0 0 26px;
}

.ls-list h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
}

.ls-list ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ls-list li button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--glass-bg-soft);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.ls-list li button:hover {
  border-color: var(--champagne-line);
}

.ls-level {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--champagne-line);
  border-radius: 99px;
  color: var(--champagne);
  font-size: 0.78rem;
  font-weight: 700;
}

.ls-name {
  flex: 1;
  font-weight: 600;
}

.ls-done {
  flex: none;
  color: var(--leaf);
  font-size: 0.85rem;
  font-weight: 600;
}

.ls-go {
  color: var(--champagne);
}

.ls-state {
  margin: 0 0 22px;
  color: var(--text-2);
}

.ls-state p {
  margin: 0 0 10px;
}

/* Lesson screen */
.ls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.ls-back {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--champagne);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ls-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ls-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}

.ls-text p {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.65;
}

.ls-table-wrap {
  overflow-x: auto;
}

.ls-table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.ls-table caption {
  padding-bottom: 8px;
  color: var(--text-2);
  text-align: left;
}

.ls-table th,
.ls-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule-quiet);
  text-align: left;
}

.ls-table th {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 600;
}

.ls-examples {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ls-examples li,
.ls-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--rule-quiet);
}

.ls-examples li > span,
.ls-audio > span {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.ls-cz {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.ls-tr {
  color: var(--text-2);
  font-size: 0.92rem;
}

.ls-say {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--champagne);
  cursor: pointer;
}

.ls-say:hover {
  background: var(--champagne-soft);
}

.ls-exercise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 16px 18px;
  border: 1px solid var(--champagne-line);
  border-radius: var(--r-lg);
  background: var(--champagne-soft);
}

.ls-exercise > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ls-exercise small {
  color: var(--text-2);
}

.ls-foot {
  padding-top: 8px;
}

.ls-finished {
  margin: 0;
  color: var(--leaf);
  font-weight: 600;
}

/* Feature: admin panel (TA), only visible to admin accounts */
.adm {
  max-width: 760px;
  margin: 0 auto;
}

.adm-head {
  margin: 0 0 22px;
}

.adm-head .btn {
  margin: 0 0 12px;
}

.adm-head h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.9rem;
}

.adm-head p {
  margin: 0;
  color: var(--text-3);
}

.adm-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.adm-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
}

.adm-num {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--champagne);
}

.adm-label {
  color: var(--text-3);
  font-size: 0.85rem;
}

.adm-badge {
  flex: none;
  padding: 2px 9px;
  border: 1px dashed var(--champagne-line);
  border-radius: 99px;
  color: var(--text-3);
  font-size: 0.75rem;
}

.adm-empty,
.adm-updated {
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: 0.9rem;
}

/* Feature: false friends explanation (PP.7) */
.ff-note {
  margin: 6px 0 0;
  color: var(--text-3);
}

.ff-example-tr {
  margin: 2px 0 0;
  color: var(--text-4);
  font-size: 0.9rem;
}

.adm-game-result {
  max-width: 420px;
  margin: 40px auto;
  padding: 28px;
  border-radius: var(--r-lg);
  text-align: center;
}

.adm-game-result p {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 2rem;
}

.adm-game-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 640px) {
  .adm-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Feature: add-word. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
/* ---------- Add-word sheet (bottom sheet on phones) ------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: sheetFade 0.18s var(--ease) both;
}

.sheet {
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 26px 24px;
  border-radius: var(--r-lg);
  background: var(--solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
  animation: sheetRise 0.26s var(--ease) both;
}

.sheet-grip {
  display: none;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.sheet-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}

.sheet-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  color: var(--text-2);
  cursor: pointer;
}

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sheet-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sheet-field > span {
  font-size: 0.85rem;
  color: var(--text-3);
}

.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.sheet-actions .btn {
  min-height: 48px;
}

@media (max-width: 560px) {
  .sheet-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .sheet {
    max-width: none;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: sheetSlide 0.3s var(--ease) both;
  }

  .sheet-grip {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--rule);
    margin: 0 auto 14px;
  }

  .sheet-head h3 {
    font-size: 1.45rem;
  }
}

@keyframes sheetFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheetRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sheetSlide {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* Primitive: search field with icon (.dict-search), shared by Dictionary and Atlas. */

.dict-search {
  position: relative;
  flex: 1;
  min-width: 0;
}

.dict-search-ico {
  z-index: 2;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
  pointer-events: none;
}

.dict-search .dict-search-input {
  display: block;
  width: 100%;
  padding-left: 44px;
  padding-right: 40px;
  height: 100%;
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
}

.dict-search .dict-search-input::-webkit-search-cancel-button {
  display: none;
}

/* Primitive: segmented control (.seg, .seg-btn) and level/region chips (.pr-level), shared by Practice settings and Atlas. */

.pr-level {
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 99px;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  color: var(--text-2);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    border-color 0.16s var(--ease),
    background 0.16s var(--ease),
    color 0.16s var(--ease);
}

.pr-level:hover {
  border-color: var(--champagne-line);
}

.pr-level.active {
  border-color: var(--champagne);
  background: var(--champagne-soft);
  color: var(--champagne);
}

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: rgba(var(--well), 0.45);
  border: 1px solid var(--rule);
}

.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.15;
  cursor: pointer;
  transition:
    background 0.16s var(--ease),
    color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.active {
  background: var(--glass-bg);
  border-color: var(--champagne-line);
  color: var(--champagne);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 760px) {
  .seg-btn {
    font-size: 0.86rem;
    padding: 6px 4px;
  }
}

/* Feature: collections modal backdrop (CollectionsModal). */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Collections modal content (were inline styles in CollectionsModal.tsx) */
.modal-content.col-modal {
  width: 100%;
  max-width: 480px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--night-2);
  box-shadow: var(--glass-drop);
}

.col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.col-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--text);
}

.btn.col-close {
  font-size: 1.2rem;
}

.col-form {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.col-form .field {
  flex: 1;
}

.col-lists {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
}

.col-empty {
  padding: 20px 0;
  color: var(--text-3);
  text-align: center;
}

.col-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgb(var(--well));
}

.col-name {
  font-weight: 600;
  color: var(--text);
}

.col-count {
  font-size: 0.85rem;
  color: var(--text-3);
}

.col-actions {
  display: flex;
  gap: 8px;
}

.btn.col-btn {
  padding: 4px 8px;
  font-size: 0.85rem;
}

.btn.col-btn-danger {
  color: var(--rose);
}

/* Feature: sign-in / register modal (were inline styles in AuthModal.tsx) */
.overlay-window.au-window {
  width: min(420px, 100%);
}

.au-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.au-stack-sm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.au-row {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.au-grow {
  flex: 1;
}

.field.au-field {
  width: 100%;
  margin-top: 6px;
}

.field.au-code {
  letter-spacing: 2px;
  text-align: center;
  font-size: 1.2rem;
}

.btn.au-mt8 {
  margin-top: 8px;
}

.btn.au-link-sm {
  align-self: flex-end;
  padding: 2px 8px;
  font-size: 0.85rem;
}

.btn.au-danger {
  border-color: var(--rose-soft);
  color: var(--rose);
}

/* Messages: error / info / success, readable in both themes */
.au-alert {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid;
  font-size: 0.9rem;
}

.au-alert-error {
  border-color: var(--rose-soft);
  background: var(--rose-soft);
  color: var(--rose-text);
}

.au-alert-info {
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--a2) 22%, transparent);
  background: color-mix(in srgb, var(--a2) 10%, transparent);
  color: var(--a2);
}

.au-alert-ok {
  border-color: var(--leaf-soft);
  background: var(--leaf-soft);
  color: var(--leaf);
}

/* Signed-in card */
.au-card {
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-quiet);
  background: rgba(var(--ink), 0.05);
}

.au-muted {
  font-size: 0.85rem;
  color: var(--text-3);
}

.au-name {
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

/* "or" divider and Google button slot */
.au-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 0.85rem;
}

.au-line {
  flex: 1;
  height: 1px;
  background: var(--rule-quiet);
}

.au-google {
  display: flex;
  justify-content: center;
  min-height: 44px;
  color-scheme: light;
}

/* Feature: dictionary. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
.btn.dict-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-md);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .btn.dict-add {
    width: 48px;
    padding: 0;
  }

  .btn.dict-add span {
    display: none;
  }
}

/* ============================================================
   CEFR marks
   ============================================================ */

.lvl-a1 {
  --lvl: var(--a1);
}

/* Level filter row */
.level-rail {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.level-chip {
  --lvl: var(--champagne);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 92px;
  border-radius: var(--r-md);
  padding: 11px 16px 10px;
  cursor: pointer;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.level-chip-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--lvl, var(--champagne));
  opacity: 0.85;
  transition: width 0.3s var(--ease);
}

.level-chip:hover:not(:disabled) {
  border-color: var(--glass-edge-lit);
}

.level-chip.active {
  border-color: color-mix(in srgb, var(--lvl) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lvl) 28%, transparent),
    var(--shadow-lift);
  background: var(--glass-bg);
}

.level-chip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.level-chip-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.level-chip.active .level-chip-name {
  color: var(--lvl);
}

.level-chip-count {
  font-size: 0.78rem;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
} /* ============================================================
   Dictionary
   ============================================================ */

.filter-bar {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filter-bar .field {
  flex: 1 1 210px;
}

.filter-bar .field-search {
  flex: 2 1 330px;
}

.result-line {
  font-size: 0.87rem;
  color: var(--text-4);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.word-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Base entry styles - desktop/tablet */
.entry {
  --lvl: var(--champagne);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  padding: 19px 24px 19px 22px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--rule-quiet);
  transition:
    background 0.18s var(--ease),
    border-left-color 0.18s var(--ease);
  position: relative;
}

.entry:last-child {
  border-bottom: 0;
}

.entry:hover {
  background: rgba(var(--ink), 0.045);
  border-left-color: var(--lvl);
}

.entry.is-learned {
  border-left-color: var(--lvl);
}

.entry-main {
  min-width: 0;
}

.entry-head {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
}

.entry-cz {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: 0.008em;
  color: var(--cream);
}

.entry-phon {
  font-size: 0.88rem;
  color: var(--text-4);
  font-style: italic;
}

.entry-ua {
  font-size: 1.06rem;
  color: var(--text);
  margin-top: 2px;
}

.entry-usage {
  margin-top: 11px;
  padding: 9px 0 9px 15px;
  border-left: 2px solid var(--champagne-line);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-2);
}

.entry-usage-translation {
  margin-top: 6px;
  padding-left: 15px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--text-3);
  font-style: italic;
  border-left: 2px solid transparent;
}

.entry-usage-row {
  cursor: pointer;
  border-radius: var(--r-xs);
  transition:
    opacity 0.2s var(--ease),
    color 0.2s var(--ease);
}

.entry-usage-row:hover .entry-usage {
  color: var(--amber);
  border-left-color: var(--amber);
}

.entry-usage-row.is-speaking-usage .entry-usage {
  color: var(--amber);
  border-left-color: var(--amber);
  animation: pulse-text 1.2s infinite ease-in-out;
}

.entry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.btn-learn {
  font-family: var(--sans);
  background: rgba(var(--ink), 0.05);
  border: 1px solid var(--rule-quiet);
  border-radius: 99px;
  color: var(--text-3);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 6px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s var(--ease);
}

.btn-learn:hover {
  border-color: var(--rule);
  color: var(--text);
}

.btn-learn.on {
  background: var(--leaf-soft);
  border-color: color-mix(in srgb, var(--leaf) 45%, transparent);
  color: var(--leaf);
}

/* Phones only (tablets keep the desktop layout): level badge
   pinned top-right of the card, learn button spans full width
   beneath the text. */
@media (max-width: 560px) {
  .entry {
    grid-template-columns: 1fr;
    padding: 17px 18px;
  }

  .entry-main {
    padding-right: 54px;
  }

  .entry-cz {
    font-size: 1.55rem;
  }

  .entry-side {
    display: contents;
  }

  .btn-learn {
    display: block;
    width: 100%;
    margin-top: 14px;
    text-align: center;
  }
}

.empty-note strong {
  color: var(--text);
  font-weight: 600;
} /* Override pass from the old monolith: mobile tweaks for many features.
   Fold each rule into the file it overrides (TS.R-D), then delete this file. */
/* ============================================================
   Mobile refinements
   Everything below only applies on small screens and overrides
   the desktop rules above.
   ============================================================ */

/* Touch devices have no hover, so hover states would stick after a tap. */
@media (hover: none) {
  .entry:hover {
    background: none;
    border-left-color: transparent;
  }

  .entry.is-learned:hover {
    border-left-color: var(--lvl);
  }
}

@media (max-width: 560px) {
  /* Level chips scroll sideways instead of wrapping into a tall block. */
  .level-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px 16px;
    padding: 0 16px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .level-rail::-webkit-scrollbar {
    display: none;
  }

  .level-chip {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 9px 13px;
  }

  /* Dictionary cards */
  .word-list {
    border-radius: var(--r-lg);
  }

  .entry-head {
    gap: 6px 10px;
  }

  .entry-cz,
  .entry-ua,
  .entry-usage,
  .entry-usage-translation {
    overflow-wrap: break-word;
  }

  .btn-learn {
    padding: 10px 15px;
    font-size: 0.88rem;
  }
}

@media (max-width: 360px) {
  .level-rail {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .entry {
    padding: 15px 14px;
  }

  .entry-main {
    padding-right: 48px;
  }
}

/* ---- Level chips: tinted glow instead of black shadow ---- */
.level-chip.active {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--lvl) 20%, transparent) 0%,
      color-mix(in srgb, var(--lvl) 6%, transparent) 100%
    ),
    var(--glass-bg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lvl) 34%, transparent),
    0 6px 20px color-mix(in srgb, var(--lvl) 24%, transparent);
}

/* ---- Level chips: always one row, swipe sideways ---- */
.level-rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 10px;
  margin-left: -4px;
  margin-right: -4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.level-rail::-webkit-scrollbar {
  display: none;
}

.level-rail > .level-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ---------- Dictionary toolbar ---------------------------- */
.dict-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 14px;
}

.dict-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.dict-search-clear {
  z-index: 2;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--ink), 0.08);
  color: var(--text-2);
  cursor: pointer;
}

.dict-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dict-filters .field {
  min-width: 0;
  min-height: 48px;
  text-overflow: ellipsis;
}

.dict-collections {
  grid-column: 1 / -1;
  min-height: 46px;
}

@media (max-width: 640px) {
  .dict-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .dict-filters .dict-f-topic {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .entry-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .entry-usage-row {
    -webkit-tap-highlight-color: transparent;
  }
}

@keyframes pulse-text {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .filter-bar .field-search {
    grid-column: 1 / -1;
    order: -2;
  }

  .filter-bar .field:nth-child(3) {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 560px) {
  .filter-bar .field,
  .filter-bar .field-search {
    flex: none;
    width: 100%;
  }
}

/* Custom dropdown in the dictionary filters (was injected by WordList.tsx) */
.dd {
  position: relative;
  min-width: 0;
}

.dd-btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.dd-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-btn svg {
  flex: 0 0 auto;
  transition: transform 0.18s;
}

.dd.open .dd-btn {
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px var(--champagne-soft);
}

.dd.open .dd-btn svg {
  transform: rotate(180deg);
}

.dd-list {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: min(340px, 55dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  margin: 0;
  list-style: none;
  border-radius: var(--r-md);
  background: var(--solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
}

.dd-opt {
  padding: 11px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.3;
}

.dd-opt:hover,
.dd-opt.hl {
  background: rgba(var(--ink), 0.08);
  color: var(--text);
}

.dd-opt.sel {
  color: var(--champagne);
  font-weight: 700;
}

@media (max-width: 760px) {
  .dd-btn {
    font-size: 16px;
  }
  .dd-opt {
    padding: 13px 12px;
  }
}

/* Entry actions: bookmark next to the "learned" button (was injected by Entry.tsx) */
.entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entry .btn-bookmark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule-quiet);
  background: rgba(var(--ink), 0.05);
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.entry .btn-bookmark:hover {
  border-color: var(--champagne-line);
  color: var(--champagne);
}

.entry .btn-bookmark.is-saved {
  background: var(--champagne-soft);
  border-color: var(--champagne);
  color: var(--champagne);
}

@media (max-width: 560px) {
  .entry-actions {
    width: 100%;
  }
  .entry-actions .btn-learn {
    flex: 1;
    min-height: 36px;
  }
  .entry .btn-bookmark {
    width: 44px;
    height: 44px;
  }
}

/* Usage translation while it is being fetched */
.entry-usage-translation.is-pending {
  opacity: 0.5;
  font-style: italic;
}
/* Feature: practice. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
.foot-right {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

/* ---------- The prompt ----------------------------------- */

.prompt {
  text-align: center;
  margin-bottom: 32px;
}

/* ---------- Cloze gap ------------------------------------ */

.gap {
  display: inline-block;
  min-width: 5ch;
  border-bottom: 2px solid var(--champagne);
  box-shadow: 0 6px 16px -8px var(--amber);
  vertical-align: baseline;
}

@media (max-width: 560px) {
  .prompt {
    margin-bottom: 24px;
  }
}

.grade {
  min-height: 52px;
  padding: 0 6px;
  border-radius: var(--r-md);
  font-size: 0.95rem;
} /* Feature: practice. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
/* Feature: Practice settings and drill UI */
.practice-settings-panel {
  width: 100%;
  margin: 20px auto;
  padding: 36px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
}

.practice-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.practice-mode-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.practice-title {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--text);
  margin-bottom: 8px;
}

.practice-desc {
  color: var(--text-3);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.practice-section-label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  margin-bottom: 10px;
}

.practice-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.practice-options-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.option-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.option-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-2);
}

.segmented-control {
  display: flex;
  gap: 8px;
  background: rgba(var(--well), 0.4);
  padding: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
}

.segmented-control .btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-weight: 500;
  transition: all 0.16s var(--ease);
}

.segmented-control .btn.active {
  background: var(--glass-bg-soft);
  color: var(--champagne);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--glass-edge-lit);
}

.practice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.result-of {
  font-size: 0.97rem;
  color: var(--text-4);
  margin-bottom: 14px;
} /* ============================================================
   Practice — one design language across all five drills.
   ============================================================ */

.practice-panel {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

/* ---------- Setup ---------------------------------------- */

.setup-lead {
  margin-bottom: 22px;
}

.drill-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
  gap: 11px;
  margin-bottom: 26px;
}

.drill-option {
  text-align: left;
  border-radius: var(--r-md);
  padding: 17px 19px 18px;
  cursor: pointer;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.drill-option:hover:not(:disabled) {
  border-color: var(--glass-edge-lit);
}

.drill-option.active {
  border-color: var(--champagne-line);
  background: var(--glass-bg);
  box-shadow: var(--option-active-shadow);
}

.drill-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.drill-option-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--cream);
}

.drill-option.active .drill-option-name {
  color: var(--champagne);
}

.drill-option-desc {
  display: block;
  font-size: 0.89rem;
  color: var(--text-3);
  line-height: 1.5;
}

.drill-option.active .drill-option-desc {
  color: var(--text-2);
}

.drill-option-avail {
  display: block;
  margin-top: 11px;
  font-size: 0.8rem;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

.drill-option.active .drill-option-avail {
  color: var(--champagne-deep);
}

.setup-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 11px;
  align-items: end;
  padding-top: 22px;
  border-top: 1px solid var(--rule-quiet);
}

.control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-label {
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ---------- Shared session chrome ------------------------ */

.drill {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.drill-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 13px;
}

.drill-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-2);
}

.drill-stats {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: 0.87rem;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

.drill-stats b {
  color: var(--text);
  font-weight: 700;
}

.drill-stats .streak {
  color: var(--amber);
}

.drill-rule {
  height: 3px;
  background: rgba(var(--ink), 0.08);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 34px;
}

.drill-rule-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--champagne-deep),
    var(--champagne) 60%,
    var(--amber)
  );
  box-shadow: var(--amber-glow);
  transition: width 0.4s var(--ease);
}

.drill-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.drill-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-quiet);
}

.prompt-kicker {
  font-size: 0.93rem;
  color: var(--text-3);
  margin-bottom: 14px;
}

.prompt-word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0.006em;
  word-break: break-word;
  color: var(--cream);
}

/* Sentences and Ukrainian prompts are read word by word — sans, and
   never smaller than body text. */
.prompt-sentence {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.28rem, 3vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cream);
  max-width: 34ch;
  margin: 0 auto;
}

.prompt-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 12px;
  font-size: 1rem;
  color: var(--text-3);
  min-height: 26px;
}

.prompt-sub em {
  font-style: italic;
  color: var(--text-4);
}

.opt-cz {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
}

/* ---------- Verdict -------------------------------------- */

.verdict {
  text-align: center;
  margin-top: 24px;
  min-height: 54px;
}

.verdict-line {
  font-size: 1.04rem;
  font-weight: 600;
}

.verdict-line.ok {
  color: var(--leaf);
}

.verdict-line.bad {
  color: var(--rose-text);
}

.verdict-usage {
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 8px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Typing --------------------------------------- */

.answer-row {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.answer-field {
  flex: 1;
  background: rgba(var(--well), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  transition: border-color 0.2s var(--ease);
}

.answer-field::placeholder {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-4);
}

.answer-field:focus {
  outline: none;
  border-color: var(--champagne);
}

.answer-field.right {
  border-color: var(--leaf);
  color: var(--leaf);
}

.answer-field.wrong {
  border-color: var(--rose);
}

.answer-field:disabled {
  opacity: 1;
}

/* ---------- Pairs ---------------------------------------- */

.pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.pair-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tile {
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 15px 17px;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.35;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition:
    border-color 0.16s var(--ease),
    background 0.16s var(--ease),
    opacity 0.28s var(--ease);
}

.tile.cz {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
}

.tile:hover:not(.locked) {
  border-color: var(--champagne-line);
  background: var(--glass-bg);
}

.tile.picked {
  border-color: var(--champagne);
  background: var(--champagne-soft);
  box-shadow: 0 0 0 1px var(--champagne-line);
}

.tile.locked {
  border-color: transparent;
  background: var(--leaf-soft);
  color: var(--text-4);
  cursor: default;
  opacity: 0.4;
}

.tile.miss {
  border-color: var(--rose);
  background: var(--rose-soft);
}

/* ---------- Builder -------------------------------------- */

.build-area {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.slot {
  min-height: 86px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px dashed var(--champagne-line);
  background: rgba(var(--well), 0.4);
  transition:
    border-color 0.24s var(--ease),
    background 0.24s var(--ease);
}

.slot.right {
  border-style: solid;
  border-color: var(--leaf);
  background: var(--leaf-soft);
}

.slot.wrong {
  border-style: solid;
  border-color: var(--rose);
  background: var(--rose-soft);
}

.slot:empty::before {
  content: attr(data-empty);
  font-size: 0.95rem;
  color: var(--text-4);
}

.chip-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 48px;
}

.chip {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 9px 17px;
  cursor: pointer;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition:
    border-color 0.16s var(--ease),
    transform 0.16s var(--ease);
}

.chip:hover:not(:disabled) {
  border-color: var(--champagne);
}

.chip:active:not(:disabled) {
  transform: translateY(1px);
}

.chip:disabled {
  cursor: default;
  opacity: 0.85;
}

/* ---------- Results -------------------------------------- */

.drill-result {
  text-align: center;
  padding: 32px 0;
  animation: rise 0.5s var(--ease) both;
}

.drill-result .result-score {
  font-family: var(--serif);
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--champagne);
  font-variant-numeric: lining-nums tabular-nums;
}

.result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.review-list {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: left;
  border-top: 1px solid var(--rule-quiet);
}

.review-head {
  font-size: 0.85rem;
  color: var(--text-4);
  padding: 14px 2px 8px;
}

.review-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--rule-quiet);
}

.review-cz {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--cream);
}

.review-ua {
  font-size: 0.95rem;
  color: var(--text-2);
  text-align: right;
}

@media (max-width: 660px) {
  .pairs {
    gap: 8px;
  }

  .tile {
    padding: 12px 13px;
    font-size: 0.95rem;
  }

  .tile.cz {
    font-size: 1.16rem;
  }

  .drill-rule {
    margin-bottom: 26px;
  }

  .drill-stats {
    gap: 14px;
    font-size: 0.82rem;
  }
}

@media (max-width: 880px) {
  .answer-field {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  /* Practice */
  .practice-panel {
    min-height: 0;
  }

  .drill-menu {
    grid-template-columns: 1fr;
  }

  .drill-option {
    padding: 14px 16px;
  }

  .setup-controls {
    grid-template-columns: 1fr 1fr;
  }

  .setup-controls .btn-solid {
    grid-column: 1 / -1;
    padding: 13px 22px;
  }

  .drill-bar {
    gap: 6px 12px;
  }

  .drill-foot {
    margin-top: 22px;
    padding-top: 16px;
  }

  .drill-foot .btn {
    padding: 10px 16px;
  }

  .answer-row {
    flex-direction: column;
  }

  .answer-field {
    font-size: 1.15rem;
    padding: 12px 14px;
  }

  .chip {
    font-size: 1.15rem;
    padding: 8px 13px;
  }

  .slot {
    min-height: 72px;
    padding: 12px;
  }

  .review-row {
    gap: 12px;
  }

  .drill-result .result-score {
    font-size: 3.4rem;
  }
}

@media (max-width: 360px) {
  .setup-controls {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="light"] .tile.locked {
  color: var(--text-3);
}

:root[data-theme="light"] .drill-option.active .drill-option-avail {
  color: var(--champagne);
}

/* ---- Practice setup: controls must never push past the panel ---- */
.control {
  min-width: 0;
}

.control select.field {
  width: 100%;
  max-width: 100%;
}

.practice-panel {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  .setup-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 10px;
  }

  /* Topic is the longest label: full row, first. */
  .setup-controls > .control:nth-child(2) {
    grid-column: 1 / -1;
    order: -1;
  }

  /* Level + length sit side by side. */
  .setup-controls > .control:nth-child(1),
  .setup-controls > .control:nth-child(3) {
    grid-column: auto;
  }

  /* Direction: full row. */
  .setup-controls > .control:nth-child(4) {
    grid-column: 1 / -1;
  }

  .setup-controls > .control.hidden {
    display: none;
  }

  .setup-controls .field {
    padding: 11px 36px 11px 13px;
    font-size: 16px; /* stops iOS zoom on focus */
  }
}

@media (max-width: 760px) {
  .answer-field {
    font-size: 16px;
  }
}

/* ---------- Practice setup -------------------------------- */
.pr {
  width: 100%;
  max-width: 880px;
  margin: 8px auto 0;
  padding-bottom: 24px;
}

.pr-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--text);
}

.pr-head p {
  margin: 0 0 20px;
  color: var(--text-3);
  font-size: 1rem;
}

.pr-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.pr-mode {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 10px 14px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  color: var(--text-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    transform 0.12s var(--ease);
}

.pr-mode:hover {
  border-color: var(--champagne-line);
  color: var(--text);
}

.pr-mode:active {
  transform: scale(0.98);
}

.pr-mode.active {
  border-color: var(--champagne);
  background: var(--champagne-soft);
  color: var(--champagne);
  box-shadow: 0 0 0 1px var(--champagne-line);
}

.pr-mode-ico {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.pr-mode-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pr-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
}

.pr-card-head h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--champagne);
}

.pr-card-head p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.97rem;
  line-height: 1.5;
}

.pr-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pr-option-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pr-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
}

.pr-option-row .pr-label {
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

.pr-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pr-grid2 .field {
  min-height: 48px;
  text-overflow: ellipsis;
}

.pr-levels {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  margin: 0 -2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pr-levels::-webkit-scrollbar {
  display: none;
}

/* on/off switch */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  border-radius: 99px;
  border: 1px solid var(--rule);
  background: rgba(var(--well), 0.5);
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-3);
  transition:
    transform 0.2s var(--ease),
    background 0.2s var(--ease);
}

.switch.on {
  background: var(--champagne-soft);
  border-color: var(--champagne);
}

.switch.on .switch-knob {
  transform: translateX(20px);
  background: var(--champagne);
}

.pr-more {
  border-top: 1px solid var(--rule-quiet);
  padding-top: 14px;
}

.pr-more summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--champagne);
}

.pr-more summary::-webkit-details-marker {
  display: none;
}

.pr-more summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}

.pr-more[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.pr-more-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 14px;
}

/* sticky start bar */
.pr-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px 12px 20px;
  border-radius: var(--r-lg);
  background: var(--solid);
  border: 1px solid var(--glass-edge);
  box-shadow:
    var(--bar-lift),
    var(--glass-drop);
}

.pr-bar-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  color: var(--text-3);
  font-size: 0.9rem;
}

.pr-bar-info strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.pr-bar-info strong.ok {
  color: var(--leaf);
}

.pr-bar-info strong.bad {
  color: var(--rose);
}

.pr-bar-info em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--rose-text);
}

.pr-start {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 38px;
  font-size: 1.05rem;
}

@media (max-width: 760px) {
  .pr-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pr-card {
    padding: 18px 16px;
    gap: 16px;
    border-radius: 18px;
  }

  .pr-card-head h3 {
    font-size: 1.5rem;
  }

  .pr-grid2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .pr-bar {
    margin-left: -4px;
    margin-right: -4px;
    padding: 10px 10px 10px 16px;
    /* above the phone bottom nav (its height includes the safe area) */
    bottom: calc(
      8px + max(var(--bottom-nav-h), env(safe-area-inset-bottom, 0px))
    );
  }

  .pr-start {
    padding: 0 28px;
  }
}

/* Feature: wide practice setup (TL.1). On desktop the setup uses the full shell
   width: modes on the left, settings card on the right, start bar below. */
@media (min-width: 1024px) {
  .pr {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas:
      "head head"
      "modes card"
      "bar bar";
    column-gap: 24px;
    align-items: start;
  }

  .pr-head {
    grid-area: head;
  }

  /* The settings card is taller than the mode list: keep modes in view while it scrolls.
     Modes are grouped by goal (PP.2), so the group wrapper takes the grid area. */
  .pr-groups {
    grid-area: modes;
    margin-bottom: 0;
    position: sticky;
    top: 16px;
  }

  .pr-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
  }

  .pr-card {
    grid-area: card;
  }

  .pr-bar {
    grid-area: bar;
  }
}

/* ---------- Focus mode while a drill is running ----------- */
body.in-game .ledger {
  display: none !important;
}

.practice-active-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* ---------- Drill card + chrome --------------------------- */
.practice-active-wrapper .drill-card {
  min-height: min(640px, calc(100dvh - 40px));
  padding: 20px 26px 26px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
  display: flex;
  flex-direction: column;
}

.drill {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.drill-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.drill-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}

.drill-close:hover {
  color: var(--text);
  border-color: var(--champagne-line);
}

.drill-close svg {
  width: 18px;
  height: 18px;
}

.drill-top .drill-rule {
  flex: 1;
  height: 6px;
  margin: 0;
  border-radius: 99px;
}

.drill-count {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.drill-count i {
  font-style: normal;
  color: var(--text-4);
  margin: 0 1px;
}

.sprint-timer {
  color: var(--champagne);
  font-size: 1.15rem;
}

.sprint-timer.urgent {
  color: var(--rose);
  animation: pulse 0.9s ease-in-out infinite;
}

.drill-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 2px 0;
}

.drill-meta .drill-name {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}

.drill-meta .drill-stats {
  gap: 14px;
  font-size: 0.85rem;
}

.drill .drill-stage {
  flex: 1;
  justify-content: center;
  padding: 22px 0 8px;
}

.drill .prompt {
  margin-bottom: 26px;
}

.drill .prompt.prompt-tight {
  margin-bottom: 18px;
}

.drill .prompt-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 14px;
}

.drill .prompt-sub .btn-say,
.btn-say-lg {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--champagne-line);
  background: var(--champagne-soft);
  color: var(--champagne);
  cursor: pointer;
  transition:
    transform 0.12s var(--ease),
    background 0.16s var(--ease);
}

.btn-say-lg svg {
  width: 22px;
  height: 22px;
}

.btn-say-lg:active {
  transform: scale(0.94);
}

/* answer options */
.drill .opt-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.drill .opt {
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.drill .opt.opt-cz {
  font-size: 1.4rem;
}

.drill .opt.right::after,
.drill .opt.wrong::after {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 700;
}

.drill .opt.right::after {
  content: "✓";
  color: var(--leaf);
}

.drill .opt.wrong::after {
  content: "✕";
  color: var(--rose);
}

.drill .verdict {
  min-height: 70px;
  margin-top: 20px;
}

/* typing */
.drill .answer-row {
  align-items: stretch;
}

.drill .answer-field {
  min-width: 0;
  min-height: 56px;
}

.drill .answer-row .btn {
  min-height: 56px;
  padding: 0 24px;
}

.diacritics-keypad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 560px;
  margin: 14px auto 0;
}

.diacritics-keypad .key {
  width: 40px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.diacritics-keypad .key:active {
  background: var(--champagne-soft);
  border-color: var(--champagne);
}

/* pairs */
.drill .pairs {
  gap: 12px;
}

.drill .pair-col {
  gap: 10px;
}

.drill .tile {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.drill .tile.cz {
  font-size: 1.25rem;
}

/* builder */
.drill .slot {
  min-height: 92px;
}

.drill .chip {
  min-height: 46px;
  font-size: 1.25rem;
}

.drill-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule-quiet);
}

.drill-foot .btn {
  min-height: 50px;
  padding: 0 28px;
}

/* sprint */
.sprint-trans {
  margin-top: 14px;
  font-size: clamp(1.3rem, 4.4vw, 1.8rem);
  font-weight: 600;
  color: var(--champagne);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sprint-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 560px;
  margin: 8px auto 0;
  width: 100%;
}

.sprint-btn {
  min-height: 68px;
  font-size: 1.15rem;
  border-radius: var(--r-md);
}

.sprint-no {
  background: var(--rose-soft);
  border-color: var(--rose);
  color: var(--rose-text);
}

.sprint-yes {
  background: var(--leaf-soft);
  border-color: var(--leaf);
  color: var(--leaf);
}

.sprint-btn:active {
  transform: scale(0.97);
}

.drill-stage.flash-ok {
  animation: flashOk 0.25s ease;
}

.drill-stage.flash-bad {
  animation: flashBad 0.25s ease;
}

/* flashcards */
.flashcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 300px;
  padding: 26px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-edge);
  background: var(--glass-bg-soft);
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s var(--ease);
}

.flashcard:hover,
.flashcard:focus-visible {
  border-color: var(--champagne-line);
}

/* ---------- Results --------------------------------------- */
.res-card {
  padding: 30px 24px 26px;
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
  animation: rise 0.45s var(--ease) both;
}

.res-hero {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 14px;
}

.res-ring {
  width: 100%;
  height: 100%;
}

.res-ring circle {
  fill: none;
  stroke-width: 7;
}

.res-ring-bg {
  stroke: rgba(var(--ink), 0.1);
}

.res-ring-fg {
  stroke: var(--champagne);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease);
  filter: var(--ring-glow);
}

.res-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 2.9rem;
  font-weight: 600;
  color: var(--champagne);
  font-variant-numeric: lining-nums;
}

.res-of {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--text-2);
}

.res-of b {
  color: var(--text);
}

.res-verdict {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--text-3);
  line-height: 1.5;
}

.res-review {
  max-width: 560px;
  margin: 24px auto 0;
  text-align: left;
  border-top: 1px solid var(--rule-quiet);
}

.res-review-head {
  margin: 0;
  padding: 14px 2px 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}

.res-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--rule-quiet);
}

.res-cz {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.res-tr {
  text-align: right;
  font-size: 0.95rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.res-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 440px;
  margin: 26px auto 0;
}

.res-actions .btn {
  min-height: 50px;
}

@media (max-width: 640px) {
  .practice-active-wrapper .drill-card {
    min-height: calc(100dvh - 20px);
    padding: 14px 14px 16px;
    border-radius: 18px;
  }

  .drill .opt-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .drill .opt {
    min-height: 60px;
    padding: 14px 16px;
  }

  .drill .opt.opt-cz {
    font-size: 1.3rem;
  }

  .drill .drill-stage {
    padding-top: 14px;
  }

  .drill .answer-row {
    flex-direction: column;
  }

  .drill .answer-row .btn {
    width: 100%;
  }

  .drill .pairs {
    gap: 8px;
  }

  .drill .tile {
    min-height: 56px;
    padding: 10px 11px;
    font-size: 0.93rem;
  }

  .drill .tile.cz {
    font-size: 1.12rem;
  }

  .diacritics-keypad .key {
    width: calc((100% - 6 * 6px) / 7);
    min-width: 0;
  }

  .drill-foot {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(to top, var(--solid) 70%, transparent);
  }

  .drill-foot .btn {
    flex: 1;
  }

  .sprint-btn {
    min-height: 74px;
  }

  .res-card {
    padding: 24px 16px 20px;
  }

  .res-hero {
    width: 148px;
    height: 148px;
  }

  .res-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .res-tr {
    grid-column: 2;
    text-align: left;
    margin-top: -6px;
  }
}

/* ============================================================
   Drill redesign v2 - roomier, calmer, close button on the right
   ============================================================ */
.practice-active-wrapper {
  max-width: 880px;
}

.practice-active-wrapper .drill-card {
  min-height: min(680px, calc(100dvh - 40px));
  padding: 26px clamp(20px, 5vw, 44px) 34px;
  border-radius: 26px;
  background:
    radial-gradient(
      120% 70% at 50% 0%,
      var(--card-tint),
      transparent 60%
    ),
    var(--glass-bg);
}

/* bar: counter | progress | close */
.drill-top {
  gap: 16px;
}

.drill-top .drill-count {
  order: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--text-2);
}

.drill-top .drill-rule {
  order: 2;
  height: 8px;
  background: rgba(var(--ink), 0.09);
}

.drill-top .drill-close {
  order: 3;
  width: 38px;
  height: 38px;
  border-color: transparent;
  background: rgba(var(--ink), 0.06);
}

.drill-top .drill-close:hover {
  background: var(--rose-soft);
  color: var(--rose-text);
  border-color: transparent;
}

.drill-meta {
  margin: 18px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-quiet);
  align-items: center;
}

.drill-meta .drill-name {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--kicker-ink);
}

.drill .drill-stage {
  padding: 34px 0 10px;
}

.drill .prompt {
  margin-bottom: 36px;
}

.drill .prompt-kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(var(--ink), 0.06);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.drill .prompt-word {
  font-size: clamp(2.6rem, 7vw, 4rem);
}

.drill .prompt-sub {
  margin-top: 16px;
}

/* numbered answer tiles */
.drill .opt-grid {
  counter-reset: opt;
  gap: 14px;
  max-width: 760px;
}

.drill .opt {
  counter-increment: opt;
  gap: 14px;
  min-height: 68px;
  padding: 14px 20px 14px 14px;
  border-radius: 16px;
  background: rgba(var(--ink), 0.04);
  border-color: var(--rule);
}

.drill .opt::before {
  content: counter(opt);
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--ink), 0.08);
  color: var(--text-3);
  font: 700 0.85rem var(--sans);
}

.drill .opt:hover:not(:disabled) {
  background: rgba(var(--ink), 0.07);
  transform: translateY(-1px);
}

.drill .opt.right::before {
  background: var(--leaf);
  color: var(--night);
}

.drill .opt.wrong::before {
  background: var(--rose);
  color: var(--night);
}

.drill .verdict {
  margin-top: 24px;
}

.drill .verdict-usage {
  max-width: 52ch;
  margin: 8px auto 0;
}

@media (max-width: 640px) {
  .practice-active-wrapper .drill-card {
    padding: 16px 16px 20px;
    border-radius: 20px;
  }

  .drill .drill-stage {
    padding-top: 22px;
  }

  .drill .prompt {
    margin-bottom: 26px;
  }

  .drill .opt {
    min-height: 62px;
    padding: 12px 16px 12px 12px;
  }

  .drill .opt::before {
    flex-basis: 30px;
    height: 30px;
  }

  .drill-meta {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .drill-meta .adv-toggle {
    margin-left: 0;
    order: 3;
    width: 100%;
  }

  .drill-meta .adv-toggle button {
    flex: 1;
  }
}

/* ============================================================
   Drill typography - Cormorant is too narrow/light for words
   you have to read fast (and for Czech diacritics). Use Manrope.
   ============================================================ */
.drill .prompt-word,
.drill .prompt-sentence,
.drill .opt.opt-cz,
.drill .tile.cz,
.drill .chip,
.drill .flash-front,
.res-cz {
  font-family: var(--sans);
  font-optical-sizing: auto;
}

.drill .prompt-word {
  font-weight: 800;
  font-size: clamp(2.3rem, 6.4vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.drill .prompt-sentence {
  font-weight: 700;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  letter-spacing: -0.01em;
  line-height: 1.4;
  max-width: 28ch;
  margin-inline: auto;
}

.drill .opt.opt-cz {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
}

.drill .tile.cz {
  font-weight: 700;
  font-size: 1.05rem;
}

.drill .chip {
  font-weight: 700;
  font-size: 1.1rem;
}

.drill .flash-front {
  font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 3rem);
  letter-spacing: -0.02em;
}

.res-cz {
  font-weight: 700;
  font-size: 1.1rem;
}

.drill .gap {
  display: inline-block;
  min-width: 4.2ch;
  border-bottom: 3px solid var(--champagne);
  box-shadow: none;
  background: none;
  vertical-align: baseline;
}

@media (max-width: 640px) {
  .drill .opt.opt-cz {
    font-size: 1.1rem;
  }
  .drill .tile.cz {
    font-size: 0.98rem;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.55;
  }
}

@keyframes flashOk {
  from {
    box-shadow: inset 0 0 0 999px var(--leaf-soft);
  }
  to {
    box-shadow: inset 0 0 0 999px transparent;
  }
}

@keyframes flashBad {
  from {
    box-shadow: inset 0 0 0 999px var(--rose-soft);
  }
  to {
    box-shadow: inset 0 0 0 999px transparent;
  }
}

/* Cloze: "choices / type" switch above the sentence (was an inline style in mode-cloze.js) */
.drill .cloze-seg {
  max-width: 260px;
  margin: 0 auto 18px;
}

/* ---------- Feature: focus mode (in-game) ---------------------------------
   While a drill runs (body.in-game, set by Practice.tsx) the page itself never
   scrolls and the drill card sits centered in the space left below the header
   (phones hide the header and the bottom nav). Very long content scrolls only inside the middle
   of the card (.drill-stage); progress, close and the answer buttons stay put. */
html:has(> body.in-game) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Phones: the header is hidden while playing (focus mode); desktop keeps logo and menu */
@media (max-width: 760px) {
  body.in-game .app-header {
    display: none !important;
  }

  body.in-game .app-shell {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
  }
}

body.in-game .app-shell {
  height: 100dvh;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

body.in-game .app-header {
  flex: none;
}

body.in-game #tab-practice.view-section.active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.in-game .practice-active-wrapper {
  height: 100%; /* definite height, so the card's percentage height resolves */
  display: flex;
  align-items: center;
}

body.in-game .practice-active-wrapper .drill-card {
  width: 100%;
  height: min(720px, 100%);
  min-height: 0;
  overflow: hidden;
}

/* Only the middle of the card may scroll: progress and close stay on top,
   the answer buttons stay at the bottom and never cover the content. */
body.in-game .drill {
  flex: 1 1 auto;
  min-height: 0;
}

body.in-game .drill .drill-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: safe center;
  scrollbar-width: thin;
}

body.in-game .drill-foot,
body.in-game .drill-next {
  position: static;
  flex: none;
}

/* No reserved blank space for the verdict until there is one (drill.js scrolls it in) */
body.in-game .drill .verdict:empty {
  min-height: 0;
  margin-top: 0;
}

body.in-game .drill .drill-stage {
  scrollbar-color: var(--rule) transparent;
  /* soft edges instead of a hard cut when the middle is scrolled (inside the padding) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 12px,
    #000 calc(100% - 12px),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 12px,
    #000 calc(100% - 12px),
    transparent
  );
}

/* Short screens (laptops, phones): calmer but tighter vertical rhythm */
@media (max-height: 820px) {
  body.in-game .drill-meta {
    margin-top: 12px;
    padding-bottom: 10px;
  }

  body.in-game .drill .drill-stage {
    padding: 14px 0 8px;
  }

  body.in-game .drill .prompt {
    margin-bottom: 20px;
  }

  body.in-game .drill .prompt-kicker {
    margin-bottom: 10px;
  }

  body.in-game .drill-foot {
    margin-top: 10px;
    padding-top: 10px;
  }
}

@media (max-width: 640px) {
  body.in-game .app-shell {
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px
      max(10px, env(safe-area-inset-bottom, 0px));
  }

  body.in-game .practice-active-wrapper .drill-card {
    height: 100%;
  }

  /* Meta row in two lines instead of three: mode name, then advance switch + score */
  body.in-game .drill-meta .drill-name {
    flex: 1 1 100%;
  }

  body.in-game .drill-meta .adv-toggle {
    order: 2;
    width: auto;
    margin-left: 0;
  }

  body.in-game .drill-meta .drill-stats {
    order: 3;
    margin-left: auto;
  }
}

/* Phones with short screens: compact answers, tap targets stay >= 44px */
@media (max-width: 640px) and (max-height: 820px) {
  body.in-game .drill .opt-grid {
    gap: 8px;
  }

  body.in-game .drill .opt {
    min-height: 52px;
    padding-block: 8px;
  }

  body.in-game .drill .chip {
    min-height: 44px;
  }

  body.in-game .drill .cloze-seg {
    margin-bottom: 12px;
  }

  body.in-game .drill .prompt-sentence {
    font-size: 1.25rem;
  }

  body.in-game .drill .slot {
    min-height: 64px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  body.in-game .drill .chip-pool {
    gap: 6px;
  }
}

/* Laptops: the header stays visible, so the card gets the space below it
   (about 520px on a 768px screen). Tighter, still calm, tap targets >= 44px. */
@media (min-width: 761px) and (max-height: 900px) {
  body.in-game .practice-active-wrapper .drill-card {
    padding-top: 18px;
    padding-bottom: 20px;
  }

  body.in-game .drill-meta {
    margin-top: 10px;
    padding-bottom: 10px;
  }

  body.in-game .drill .drill-stage {
    padding: 10px 0 6px;
  }

  body.in-game .drill .prompt {
    margin-bottom: 14px;
  }

  body.in-game .drill .prompt-kicker {
    margin-bottom: 8px;
  }

  body.in-game .drill .prompt-sentence {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  }

  body.in-game .drill .cloze-seg {
    margin-bottom: 10px;
  }

  body.in-game .drill .opt-grid {
    gap: 10px;
  }

  body.in-game .drill .opt {
    min-height: 50px;
    padding-block: 8px;
  }

  body.in-game .drill .slot {
    min-height: 64px;
    padding: 10px 14px;
    margin-bottom: 12px;
  }

  body.in-game .drill .chip {
    min-height: 44px;
  }

  body.in-game .drill .tile {
    min-height: 48px;
  }

  body.in-game .drill-foot {
    margin-top: 8px;
    padding-top: 10px;
  }
}

/* Advance mode panel (manual / auto) on the practice setup screen */
.pr-advance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--note-edge);
  background: var(--note-bg);
}

.pr-advance-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pr-advance-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

.pr-advance-hint {
  font-size: 0.82rem;
  color: var(--text-3);
}

.pr-advance-seg {
  flex: 0 0 auto;
  min-width: 200px;
}

@media (max-width: 560px) {
  .pr-advance {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pr-advance-seg {
    min-width: 0;
  }
}

/* In-drill advance toggle and sticky "Next" button (was injected by drill.js) */
.adv-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  border: 1px solid var(--rule);
  background: rgba(var(--well), 0.45);
}

.adv-toggle button {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--text-3);
  font: 600 0.8rem var(--sans);
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s;
}

.adv-toggle button.active {
  background: var(--champagne-soft);
  color: var(--champagne);
  box-shadow: inset 0 0 0 1px var(--champagne-line);
}

.drill-meta .adv-toggle {
  margin-left: auto;
}

.drill-next {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 14px 0 0;
  margin-top: 14px;
  background: linear-gradient(to top, var(--solid) 65%, transparent);
  animation: rise 0.25s var(--ease) both;
}

.drill-next .btn {
  width: 100%;
  max-width: 420px;
  min-height: 54px;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .drill-next {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ============================================================
   Flashcards (PP.1): 3D flip card, grade buttons with intervals, swipe
   ============================================================ */
.fc-scene {
  perspective: 1400px;
  margin: 6px 0 4px;
}

.fc-card {
  position: relative;
  display: grid;
  min-height: 300px;
  border-radius: var(--r-xl);
  cursor: pointer;
  outline: none;
  touch-action: pan-y;
  transform-style: preserve-3d;
  transform: translateX(var(--fc-drag, 0)) rotateY(0deg);
  transition: transform 0.55s var(--ease);
}

.fc-card.is-flipped {
  transform: translateX(var(--fc-drag, 0)) rotateY(180deg);
}

.fc-card:focus-visible {
  box-shadow: 0 0 0 3px var(--champagne-line);
}

.fc-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  border: 1px solid var(--glass-edge);
  border-radius: inherit;
  background: var(--glass-bg);
  box-shadow: var(--glass-drop);
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fc-back {
  transform: rotateY(180deg);
}

.fc-card.drag-left .fc-face {
  border-color: var(--rose);
}

.fc-card.drag-right .fc-face {
  border-color: var(--leaf);
}

.fc-kicker {
  color: var(--kicker-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fc-word {
  color: var(--text);
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}

.fc-word.is-cz {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 500;
}

/* The front word, repeated small on the back so the pair is visible before rating */
.fc-recall {
  color: var(--text-2);
  font-size: 1.1rem;
}

.fc-recall.is-cz {
  font-family: var(--serif);
  font-size: 1.4rem;
}

.fc-hint {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 0.88rem;
}

.fc-example {
  width: 100%;
  max-width: 520px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(var(--ink), 0.05);
  text-align: left;
}

.fc-example-cz {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.15rem;
}

.fc-example-cz .btn-say {
  vertical-align: middle;
}

.fc-example-tr {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 0.9rem;
}

.fc-question {
  margin: 18px 0 10px;
  color: var(--text-2);
  font-size: 0.92rem;
  text-align: center;
}

.fc-grades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fc-grade {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 64px;
  padding: 10px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.fc-grade:hover {
  transform: translateY(-1px);
}

.fc-grade b {
  font-size: 0.98rem;
  font-weight: 700;
}

.fc-grade small {
  color: var(--text-3);
  font-size: 0.78rem;
}

.fc-grade kbd {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--text-4);
  font: 600 0.7rem var(--sans);
}

.fc-again b {
  color: var(--rose);
}

.fc-again:hover {
  border-color: var(--rose);
}

.fc-hard b {
  color: var(--amber);
}

.fc-hard:hover {
  border-color: var(--amber);
}

.fc-good {
  border-color: var(--gold-edge);
  background: var(--gold-bg);
}

.fc-good b,
.fc-good small {
  color: var(--gold-ink);
}

.fc-easy b {
  color: var(--leaf);
}

.fc-easy:hover {
  border-color: var(--leaf);
}

.fc-keys {
  margin: 14px 0 0;
  color: var(--text-4);
  font-size: 0.8rem;
  text-align: center;
}

@media (pointer: coarse) {
  .fc-grade kbd {
    display: none;
  }
}

@media (max-width: 520px) {
  .fc-grades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fc-card {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-card {
    transition: none;
  }
}

/* Mode picker grouped by goal (PP.2) */
.pr-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.pr-group-title {
  margin: 0 0 8px;
  color: var(--kicker-ink);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pr-groups .pr-modes {
  margin-bottom: 0;
}

.pr-mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pr-mode-short {
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
}

.pr-mode.active .pr-mode-short {
  color: var(--text-2);
}

.pr-start-here {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--leaf-soft);
  color: var(--leaf);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

/* Review (self-rated flashcards) as a wide block above the games: not a test */
.pr-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--champagne-line);
  border-radius: var(--r-md);
  background: var(--note-bg);
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease);
}

.pr-review:hover {
  border-color: var(--champagne);
  color: var(--text);
}

.pr-review.active {
  border-color: var(--champagne);
  background: var(--champagne-soft);
  color: var(--champagne);
  box-shadow: 0 0 0 1px var(--champagne-line);
}

.pr-review .pr-mode-text {
  flex: 1 1 200px;
}

.pr-review-due {
  color: var(--text-3);
  font-size: 0.82rem;
  font-weight: 500;
}

.pr-review.active .pr-review-due {
  color: var(--text-2);
}

/* Advance toggle inside "More settings": a plain row, not a boxed panel */
.pr-more .pr-advance {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Listening and Dictation (owner 2026-11-07): big play button, slower replay, Czech letters */
.ls-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ls-play {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-top: 8px;
  border: 1px solid var(--gold-edge);
  border-radius: 50%;
  background: var(--gold-bg);
  color: var(--gold-ink);
  box-shadow: var(--gold-shadow);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}

.ls-play:hover {
  transform: scale(1.04);
}

.ls-play:active {
  transform: scale(0.96);
}

.ls-play svg {
  width: 36px;
  height: 36px;
}

.ls-slow {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--champagne);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ls-pair {
  margin: 6px 0 0;
  color: var(--text-2);
}

.ls-pair b {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.ls-keypad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.ls-key {
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--control-bg);
  color: var(--text);
  font: 600 1rem var(--sans);
  cursor: pointer;
}

.ls-key:hover {
  border-color: var(--champagne-line);
}

@media (pointer: coarse) {
  .ls-key {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   Word games (owner 2026-11-07): Ten/ta/to, Sentence, Hangman, Anagram
   ============================================================ */
.wg-gender {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wg-g {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 84px;
  padding: 12px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.wg-g:hover:not(:disabled) {
  border-color: var(--champagne-line);
  transform: translateY(-1px);
}

.wg-g b {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.wg-g small {
  color: var(--text-3);
  font-size: 0.8rem;
}

.wg-g kbd,
.wg-sopt kbd {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--text-4);
  font: 600 0.7rem var(--sans);
}

.wg-g.right {
  border-color: var(--leaf);
  background: var(--leaf-soft);
}

.wg-g.wrong {
  border-color: var(--rose);
  background: var(--rose-soft);
}

.wg-reveal {
  margin: 6px 0 0;
  color: var(--text-2);
}

.wg-reveal b {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.wg-sentence {
  font-family: var(--serif);
}

.wg-sentence-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wg-sopt {
  position: relative;
  padding-right: 34px;
  text-align: left;
  line-height: 1.45;
}

.wg-clue {
  font-size: 1.1rem;
}

.wg-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 6px;
}

.wg-slot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  border-bottom: 2px solid var(--rule);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
}

.wg-slot.open {
  border-bottom-color: var(--champagne);
}

.wg-misses {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 0.85rem;
}

.wg-letters,
.wg-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.wg-letter,
.wg-tile {
  min-width: 40px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--control-bg);
  color: var(--text);
  font: 600 1.05rem var(--sans);
  cursor: pointer;
}

.wg-tile {
  min-width: 48px;
  min-height: 52px;
  font-family: var(--serif);
  font-size: 1.5rem;
}

.wg-letter:hover:not(:disabled),
.wg-tile:hover:not(:disabled) {
  border-color: var(--champagne-line);
}

.wg-letter:disabled,
.wg-tile:disabled {
  cursor: default;
  opacity: 0.35;
}

.wg-letter.hit {
  border-color: var(--leaf);
  color: var(--leaf);
  opacity: 0.6;
}

.wg-letter.miss {
  text-decoration: line-through;
}

.wg-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 520px) {
  .wg-letter {
    min-width: 36px;
  }
}

/* ============================================================
   Atlas feature styles - interactive map, cards, grid, and details
   ============================================================ */

.atlas-container {
  width: 100%;
  max-width: 1240px;
  margin: 12px auto 0;
  padding-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.atlas-view-toggle {
  min-width: 190px;
}

.atlas-regions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.atlas-regions::-webkit-scrollbar {
  display: none;
}

.atlas-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.atlas-map-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.atlas-svg-card {
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 580px;
  width: 100%;
}

.atlas-popup-card {
  position: absolute;
  bottom: 24px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100% - 48px);
  overflow-y: auto;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.atlas-popup-card.popup-left {
  left: 24px;
  right: auto;
}

.atlas-popup-card.popup-right {
  right: 24px;
  left: auto;
}

.atlas-zoom-controls {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.atlas-zoom-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.atlas-zoom-btn:hover {
  background: var(--champagne-soft);
  color: var(--champagne);
  border-color: var(--champagne-line);
}

.atlas-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 1.4rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s var(--ease);
}

.atlas-popup-close:hover {
  background: rgba(var(--ink), 0.1);
  color: var(--text);
}

@media (max-width: 768px) {
  .atlas-popup-card,
  .atlas-popup-card.popup-left,
  .atlas-popup-card.popup-right {
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

.atlas-svg {
  width: 100%;
  height: 100%;
  max-height: 560px;
  filter: var(--map-drop);
}

.atlas-polygon {
  /* SVG fill cannot take the --glass-bg-soft gradient (it rendered black);
     a light tint of the theme ink works in both themes. */
  fill: var(--map-land);
  stroke: var(--map-border);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  cursor: pointer;
  transition:
    fill 0.2s var(--ease),
    stroke 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

.atlas-polygon.dimmed {
  opacity: 0.22;
  fill: rgba(var(--ink), 0.03);
}

.atlas-polygon:hover {
  fill: var(--champagne-soft);
  stroke: var(--champagne-line);
}

.atlas-polygon.selected {
  fill: var(--champagne-soft);
  stroke: var(--champagne);
  stroke-width: 1.8;
  filter: none;
}

.atlas-map-hint {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--text-3);
  text-align: center;
  font-weight: 500;
}

.atlas-card {
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.atlas-country-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.atlas-country-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--rule-quiet);
  padding-bottom: 18px;
}

.atlas-country-title {
  margin: 6px 0 2px;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
}

.atlas-country-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--text-3);
}

.atlas-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.atlas-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.atlas-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(var(--well), 0.5);
  border: 1px solid var(--rule-quiet);
}

.atlas-fact span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4);
}

.atlas-fact strong {
  font-size: 1.1rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.atlas-fact small {
  font-size: 0.85rem;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.atlas-usage-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--glass-bg-soft);
  border: 1px solid var(--rule-quiet);
}

.atlas-usage-box > span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4);
}

.atlas-usage-box p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-2);
}

.atlas-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.atlas-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease),
    transform 0.12s var(--ease);
}

/* List items are buttons (keyboard reachable): reset native button look. */
.atlas-list-item {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.atlas-list-item:hover {
  border-color: var(--champagne-line);
  background: var(--champagne-soft);
}

.atlas-list-item.active {
  border-color: var(--champagne);
  background: var(--champagne-soft);
  box-shadow: 0 0 0 1px var(--champagne-line);
}

.atlas-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.atlas-list-info strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--text);
}

.atlas-list-info span {
  font-size: 0.85rem;
  color: var(--text-3);
}

@media (max-width: 960px) {
  .atlas-map-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .atlas-svg-card {
    min-height: 380px;
  }

  .atlas-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .atlas-list-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .atlas-fact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Feature: loading / error state while the Atlas chunk is fetched */
.atlas-status {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-2);
}

/* ---------- Country card (moved from Atlas.tsx inline \3c style>) ---------- */
.cc {
  position: absolute;
  bottom: 24px;
  width: 100%;
  max-width: 400px;
  max-height: calc(100% - 48px);
  overflow-y: auto;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.cc.popup-left {
  left: 24px;
}

.cc.popup-right {
  right: 24px;
}

.cc-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px 20px 14px;
}

.cc-titles {
  flex: 1;
  min-width: 0;
}

.cc-region {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--champagne);
  background: var(--champagne-soft);
  border: 1px solid var(--champagne-line);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.cc-name {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--text);
}

.cc-tr {
  margin: 4px 0 0;
  font-size: 1rem;
  color: var(--text-2);
}

.cc-btns {
  display: flex;
  gap: 6px;
}

.cc-ib {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  background: rgba(var(--ink), 0.06);
  border: 1px solid var(--rule-quiet);
  transition: color .15s,border-color .15s,background .15s;
}

.cc-ib:hover {
  color: var(--champagne);
  border-color: var(--champagne-line);
}

.cc-ib.on {
  color: var(--champagne);
  background: var(--champagne-soft);
  border-color: var(--champagne-line);
}

.cc-facts {
  display: grid;
  gap: 1px;
  margin: 0 20px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule-quiet);
  background: var(--rule-quiet);
}

.cc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  background: var(--glass-bg);
}

.cc-row>span {
  font-size: .8rem;
  color: var(--text-2);
}

.cc-row>div {
  text-align: right;
  min-width: 0;
}

.cc-row strong {
  display: block;
  color: var(--text);
  font-size: .98rem;
}

.cc-row small {
  display: block;
  color: var(--text-2);
  font-size: .8rem;
}

.cc-sec {
  padding: 16px 20px 0;
}

.cc-lab {
  display: block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}

.cc-chips {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.cc-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text);
  background: rgba(var(--ink), 0.05);
  border: 1px solid var(--rule-quiet);
  font: inherit;
  transition: border-color .15s,background .15s;
}

.cc-chip:hover {
  border-color: var(--champagne-line);
  background: var(--champagne-soft);
}

.cc-chip small {
  font-size: .72rem;
  color: var(--text-2);
}

.cc-chip b {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.cc-ex {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(var(--ink), 0.05);
  border: 1px solid var(--rule-quiet);
  color: var(--text);
}

.cc-ex:hover {
  border-color: var(--champagne-line);
}

.cc-ex p {
  margin: 0;
  line-height: 1.4;
}

.cc-ex p+p {
  margin-top: 6px;
  font-size: .88rem;
  color: var(--text-2);
}

.cc-foot {
  height: 20px;
  flex: none;
}

@media (max-width:760px) {
  .cc {
    left: 0!important;
    right: 0!important;
    bottom: 0;
    max-width: none;
    max-height: 62%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
}

/* ---------- Feature: full-screen map (TL.2) ---------------------------------
   Map view: the map leaves the centered shell, spans the visible viewport width
   (100vw minus the scrollbar) and fills the screen below the site header, so it is
   fully visible without scrolling. --sbw and --atlas-top are set by Atlas.tsx.
   Search, regions and the map/list switch float over the map as one glass bar. */
.atlas-map .atlas-map-layout {
  width: calc(100vw - var(--sbw, 0px));
  margin-inline: calc(50% - (100vw - var(--sbw, 0px)) / 2);
}

.atlas-container.atlas-map {
  padding-bottom: 0;
}

.atlas-svg-card {
  height: max(420px, calc(100dvh - var(--atlas-top, 220px) - var(--bottom-nav-h, 0px) - 12px));
  min-height: 0;
  padding: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  align-items: stretch;
  justify-content: flex-start;
}

/* Map, zoom buttons, hint and country card share one positioned stage. */
.atlas-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.atlas-svg {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

.atlas-bar {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.atlas-bar .dict-search {
  flex: 1 1 220px;
  min-width: 0;
}

.atlas-bar .atlas-regions {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px;
}

.atlas-bar .atlas-view-toggle {
  flex: none;
}

.atlas-list .atlas-bar {
  margin-bottom: 4px;
}

/* Search suggestions (map view): a glass list under the search field. */
.atlas-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(340px, 50dvh);
  overflow-y: auto;
  border-radius: var(--r-md);
  background: var(--solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
}

.atlas-suggest-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.atlas-suggest-item.active {
  background: var(--champagne-soft);
}

.atlas-suggest-name {
  color: var(--text);
  font-weight: 600;
}

.atlas-suggest-item.active .atlas-suggest-name {
  color: var(--champagne);
}

.atlas-suggest-sub {
  color: var(--text-3);
  font-size: 0.85rem;
}

.atlas-suggest-empty {
  padding: 10px 12px;
  color: var(--text-3);
  font-size: 0.92rem;
}

/* Floating glass bar over the map (desktop and tablets). */
.atlas-map .atlas-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 76px; /* room for the zoom buttons */
  z-index: 12;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop);
}

/* The map starts below the floating bar (bar top 16px + its height + 8px gap),
   so no country hides under it; --atlas-bar-h is measured in Atlas.tsx. */
.atlas-map .atlas-stage {
  padding-top: calc(16px + var(--atlas-bar-h, 56px) + 8px);
}

/* Country card stays clear of the floating bar too (card bottom offset 24px). */
.atlas-map .cc {
  max-height: calc(100% - 16px - var(--atlas-bar-h, 56px) - 8px - 24px);
}

/* A card on the right keeps the zoom buttons column free (like the bar does). */
.atlas-map .cc.popup-right {
  right: 76px;
}

/* Zoom and pan (useMapZoom): the map owns touch gestures (pinch, drag), shows a
   grab cursor when it can be dragged and never selects text while dragging. */
.atlas-svg {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.atlas-svg.is-zoomed,
.atlas-svg.is-zoomed .atlas-polygon {
  cursor: grab;
}

.atlas-svg.is-dragging,
.atlas-svg.is-dragging .atlas-polygon {
  cursor: grabbing;
}

/* Hint floats over the map instead of taking a row below it. */
.atlas-map-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--glass-bg-soft);
  border: 1px solid var(--rule-quiet);
  white-space: nowrap;
  pointer-events: none;
}

/* When search, all regions and the switch no longer fit in one row (UA labels
   are longer), use two tidy rows instead of letting the switch wrap alone. */
@media (max-width: 1180px) {
  /* Two compact rows: search + map/list switch, then scrollable region chips. */
  .atlas-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search toggle"
      "regions regions";
    gap: 8px;
  }

  .atlas-bar .dict-search {
    grid-area: search;
  }

  .atlas-bar .atlas-view-toggle {
    grid-area: toggle;
    min-width: 0;
  }

  .atlas-bar .atlas-regions {
    grid-area: regions;
  }
}

@media (max-width: 760px) {
  /* Phones: the bar would hide too much of the map, so it sits above it.
     The map fills the rest of the screen; the country card is a bottom sheet. */
  .atlas-map .atlas-bar {
    position: static;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--rule-quiet);
    border-radius: 0;
    box-shadow: none;
  }

  /* The bar sits above the map, so the stage needs no top offset; the map
     fills the stage (useMapZoom starts it zoomed to fill, on Europe). */
  .atlas-map .atlas-stage {
    padding-top: 0;
  }

  /* Country card: a bottom sheet over the map, like map apps. */
  .atlas-map .cc {
    max-height: 55%;
  }

  /* The hint would show through the translucent bottom sheet. */
  .atlas-stage:has(.cc) .atlas-map-hint {
    display: none;
  }
}

/* ---------- Feature: map view without page scroll ----------------------------
   <html data-tab> is set by App.tsx, .atlas-map-mode by Atlas.tsx (map view only;
   the country list still scrolls). The map fills exactly the rest of the screen. */
:root[data-tab="atlas"].atlas-map-mode {
  overflow: hidden;
  overscroll-behavior: none;
}

:root[data-tab="atlas"].atlas-map-mode .app-shell {
  padding-bottom: 0;
}

:root[data-tab="atlas"].atlas-map-mode .atlas-map .atlas-map-layout {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

:root[data-tab="atlas"].atlas-map-mode .atlas-svg-card {
  height: max(320px, calc(100dvh - var(--atlas-top, 220px) - var(--bottom-nav-h, 0px)));
}

/* Sprint (true/false under time pressure) */
.sprint-prompt {
  margin-bottom: 30px;
}
.drill .sprint-prompt .prompt-kicker {
  margin-bottom: 22px;
}
.sprint-prompt .prompt-word {
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
}
.drill .sprint-prompt .sprint-trans {
  max-width: 28ch;
  margin: 24px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule-quiet);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--champagne);
}
.drill .sprint-actions {
  max-width: 520px;
  gap: 14px;
  margin: 8px auto 0;
}
.drill .sprint-btn {
  min-height: 64px;
  gap: 12px;
  padding: 14px 20px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-md);
  border: 1px solid;
  box-shadow: none;
  transition:
    background 0.16s var(--ease),
    transform 0.12s var(--ease);
}
.drill .sprint-yes:hover {
  background: color-mix(in srgb, var(--leaf) 24%, transparent);
}
.drill .sprint-no:hover {
  background: color-mix(in srgb, var(--rose) 26%, transparent);
}
.sprint-key {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid currentColor;
  opacity: 0.5;
  line-height: 1.5;
}
@media (hover: none) {
  .sprint-key {
    display: none;
  }
}
.drill-stats .sprint-record {
  color: var(--text-4);
}
.drill-stats .sprint-record b {
  color: var(--champagne);
  font-weight: 600;
}
.drill-stats .sprint-record.new b {
  color: var(--leaf);
}
.drill-stats .sprint-timer {
  font-weight: 600;
}
@media (max-width: 520px) {
  .drill .sprint-actions {
    gap: 10px;
  }
  .drill .sprint-btn {
    min-height: 72px;
    padding: 12px;
  }
}
/* Feature: profile. All rules for this feature, in cascade order (base, then theme and breakpoint overrides). */
.profile-header-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--champagne-soft);
  color: var(--champagne);
  border: 2px solid var(--champagne-line);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-user-info {
  flex: 1;
  min-width: 0;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-name-row h4 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--text);
}

.profile-email {
  margin: 2px 0 8px;
  font-size: 0.9rem;
  color: var(--text-2);
}

.profile-badges {
  display: flex;
  gap: 8px;
}

.profile-guest-banner {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--glass-bg-soft);
  border: 1px solid var(--champagne-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  padding: 16px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-val {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--champagne);
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-2);
}

.profile-levels-section {
  padding: 18px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-levels-section h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.profile-levels-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-level-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-level-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-2);
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: var(--well);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--champagne), var(--amber));
  border-radius: 999px;
  transition: width 0.3s ease;
}/* Profile page */
.profile-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-page .profile-header-card {
  padding: 26px 30px;
  border-radius: var(--r-lg);
  gap: 24px;
}

.profile-page .profile-avatar {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  font-size: 2.1rem;
  font-weight: 600;
  box-shadow: 0 0 0 6px var(--champagne-soft);
}

.profile-page .profile-name-row h4 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.profile-page .profile-name-row .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.profile-page .profile-email {
  margin: 6px 0 12px;
  font-size: 0.92rem;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

.profile-page .profile-name-edit {
  display: flex;
  gap: 8px;
  max-width: 380px;
}

.profile-page .profile-name-edit .field {
  flex: 1;
  min-width: 0;
}

.pf-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--champagne);
  background: var(--champagne-soft);
  border: 1px solid var(--champagne-line);
}

.pf-badge-ok {
  color: var(--leaf);
  background: var(--leaf-soft);
  border-color: color-mix(in srgb, var(--leaf) 30%, transparent);
}

/* Sync problem (failed, session expired, storage full): calm warning, not an alarm */
.pf-badge-warn {
  color: var(--rose);
  background: var(--rose-soft);
  border-color: color-mix(in srgb, var(--rose) 35%, transparent);
}

.profile-page .profile-guest-banner {
  align-items: center;
  padding: 20px;
}

.profile-page .profile-stats-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.profile-page .stat-card {
  padding: 20px 22px;
  gap: 6px;
  border-radius: var(--r-lg);
}

.profile-page .stat-val {
  font-size: 2.1rem;
  line-height: 1;
}

.profile-page .stat-label {
  font-size: 0.8rem;
  color: var(--text-3);
}

.profile-page .profile-levels-section {
  padding: 22px 24px;
  border-radius: var(--r-lg);
  gap: 16px;
}

.profile-page .profile-levels-section h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
}

.profile-page .profile-levels-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 28px;
}

.profile-page .profile-level-row {
  gap: 8px;
}

.profile-page .profile-level-meta {
  align-items: center;
}

.profile-page .progress-bar-bg {
  height: 7px;
  background: rgba(var(--ink), 0.1);
}

.profile-page .progress-bar-fill {
  background: var(--champagne);
  min-width: 0;
}

.profile-page .profile-level-row.a1 .progress-bar-fill {
  background: var(--a1);
}

.profile-page .profile-level-row.a2 .progress-bar-fill {
  background: var(--a2);
}

.profile-page .profile-level-row.b1 .progress-bar-fill {
  background: var(--b1);
}

.profile-page .profile-level-row.b2 .progress-bar-fill {
  background: var(--b2);
}

.profile-page .profile-level-row.c1 .progress-bar-fill {
  background: var(--c1);
}

.profile-page .profile-level-row.c2 .progress-bar-fill {
  background: var(--c2);
}

.pf-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.pf-scroll {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

.pf-row {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(var(--ink), 0.04);
  border: 1px solid var(--rule-quiet);
  transition: border-color 0.15s var(--ease);
}

.pf-row:hover {
  border-color: var(--champagne-line);
}

.pf-speak {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--rule);
}

.pf-search {
  width: 100%;
}

@media (max-width: 800px) {
  .pf-two {
    grid-template-columns: 1fr;
  }
  .profile-page .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-page .profile-levels-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .profile-page {
    padding: 16px 12px 48px;
    gap: 14px;
  }
  .profile-page .profile-header-card {
    padding: 18px;
    gap: 16px;
  }
  .profile-page .profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }
  .profile-page .profile-name-row h4 {
    font-size: 1.5rem;
  }
  .profile-page .stat-val {
    font-size: 1.7rem;
  }
  .profile-page .profile-levels-section {
    padding: 18px;
  }
  .profile-page .profile-levels-list {
    grid-template-columns: 1fr;
  }
}

/* Word rows, mode stats, empty states and account block (were inline styles in Profile.tsx) */
.pf-word {
  min-width: 0;
}

.pf-word-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-word-head strong {
  color: var(--text);
}

.pf-word-sub {
  font-size: 0.82rem;
}

.pf-word-sub.bad {
  color: var(--rose);
}

.pf-word-sub.muted {
  color: var(--text-2);
}

.pf-mode-sub {
  font-size: 0.82rem;
  color: var(--text-2);
}

.pf-mode-score {
  text-align: right;
}

.pf-mode-score .stat-val {
  font-size: 1.1rem;
}

.pf-mode-count {
  font-size: 0.8rem;
  color: var(--text-3);
}

.pf-empty {
  padding: 12px;
  color: var(--text-3);
  text-align: center;
}

.pf-account {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.pf-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.pf-account-title {
  font-weight: 600;
  color: var(--text);
}

.pf-account-state {
  font-size: 0.85rem;
}

.pf-account-state.cloud {
  color: var(--leaf);
}

.pf-account-state.local {
  color: var(--amber);
}

.btn.pf-signout {
  color: var(--rose);
  border-color: var(--rose);
}

/* src/styles/features/home.css */
.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  padding-bottom: 24px;
}

/* Hero */
.h-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding-top: 12px;
}

.h-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--champagne-line);
  border-radius: 99px;
  background: var(--champagne-soft);
  color: var(--champagne);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.h-hero h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 7.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.h-hero h2 em {
  display: block;
  font-style: italic;
  background: linear-gradient(100deg, var(--champagne), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h-sub {
  max-width: 46ch;
  margin: 0 0 26px;
  color: var(--text-2);
  font-size: 1.3rem;
  line-height: 1.6;
}

.h-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Returning user pill */
.h-back {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
  padding: 7px 16px;
  border: 1px solid var(--champagne-line);
  border-radius: 99px;
  background: var(--champagne-soft);
  color: var(--champagne);
  font-size: 0.95rem;
  font-weight: 600;
}

.h-back > span:nth-child(3) {
  color: var(--text-2);
  font-weight: 500;
}

.h-back-bar {
  width: 64px;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--rule);
}

.h-back-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--champagne);
  transition: width 0.8s var(--ease);
}

.h-back-save {
  padding: 2px 10px;
  border: 1px solid var(--champagne-line);
  border-radius: 99px;
  background: transparent;
  color: var(--champagne);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s;
}

.h-back-save:hover {
  background: var(--champagne-soft);
}

/* Demo card */
.h-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
  padding: 36px 26px 24px;
  border-radius: var(--r-xl);
  text-align: center;
  animation: h-float 6s ease-in-out infinite;
}

@keyframes h-float {
  50% {
    transform: translateY(-8px);
  }
}

.h-tag {
  position: absolute;
  top: 14px;
  left: 18px;
  color: var(--text-4);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.h-lv {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--a1);
  color: var(--on-color);
  font-size: 0.8rem;
  font-weight: 700;
}

.h-fade {
  animation: h-in 0.45s var(--ease);
}

@keyframes h-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.h-sent {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.25;
}

.h-key {
  padding: 0 2px;
  border: 0;
  border-bottom: 2px dashed var(--champagne);
  background: none;
  color: var(--champagne);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

.h-key:hover {
  background: var(--champagne-soft);
}

.h-gloss {
  display: grid;
  gap: 6px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s var(--ease),
    opacity 0.4s;
}

.h-gloss.on {
  max-height: 140px;
  opacity: 1;
}

.h-ua {
  color: var(--champagne);
  font-size: 1.2rem;
}

.h-ua small {
  color: var(--text-3);
}

.h-use {
  color: var(--text-2);
  font-size: 1.02rem;
  font-style: italic;
}

.h-hint {
  color: var(--text-4);
  font-size: 0.92rem;
}

.h-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.h-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.h-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--rule);
  cursor: pointer;
  transition: width 0.2s var(--ease);
}

.h-dots button.on {
  width: 20px;
  background: var(--champagne);
}

/* Dashboard */
.h-dash {
  display: grid;
  gap: 18px;
  padding: 32px 24px 26px;
  border-radius: var(--r-xl);
  text-align: center;
}

.h-big b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1;
  color: var(--champagne);
}

.h-big span {
  color: var(--text-3);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.h-lbar,
.h-llab {
  display: flex;
  gap: 3px;
}

.h-lbar {
  height: 38px;
}

.h-lbar span {
  display: grid;
  place-items: center;
  flex-basis: 0;
  min-width: 46px;
  overflow: hidden;
  color: var(--on-color);
  font-size: 0.9rem;
  font-weight: 700;
}

.h-lbar span:first-child {
  border-radius: 99px 0 0 99px;
}

.h-lbar span:last-child {
  border-radius: 0 99px 99px 0;
}

.h-llab {
  margin-top: 6px;
}

.h-llab span {
  flex-basis: 0;
  min-width: 46px;
  padding-left: 6px;
  border-left: 2px solid;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.h-note {
  margin: 0;
  color: var(--text-2);
  font-size: 1.1rem;
  text-align: center;
}

.h-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.h-mini b {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1;
  color: var(--champagne);
}

.h-mini span {
  color: var(--text-2);
  font-size: 1.1rem;
}

/* Sections */
.h-sec h3 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  text-align: center;
}

/* Topics */
.h-sec-s {
  margin: -12px 0 24px;
  color: var(--text-2);
  font-size: 1.1rem;
  text-align: center;
}

.h-sec {
  position: relative;
  left: 50%;
  width: min(max(80vw, 640px), calc(100vw - 32px), 1800px);
  translate: -50% 0;
}

.h-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 20px;
  margin: 0;
  padding: 12px 0 64px;
  list-style: none;
}

.h-topics li:nth-child(4n + 2) {
  margin-top: 42px;
}

.h-topics li:nth-child(4n + 3) {
  margin-top: 14px;
}

.h-topics li:nth-child(4n) {
  margin-top: 62px;
}

.h-topics button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 9px 13px 9px 20px;
  border: 1px solid var(--glass-edge);
  border-radius: 99px;
  background: transparent;
  color: var(--text-1, inherit);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    border-color 0.2s,
    background 0.2s;
}

.h-topics button small {
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--champagne-soft);
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

.h-topics button:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--champagne-line);
  background: var(--champagne-soft);
}

/* Final CTA */
.h-end {
  padding: 44px 22px 36px;
  border-radius: var(--r-xl);
  text-align: center;
}

.h-end h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

.h-end > p {
  max-width: 52ch;
  margin: 0 auto 24px;
  color: var(--text-2);
  font-size: 1.1rem;
}

.h-end .h-cta {
  justify-content: center;
}

.h-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.h-perks li {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
}

.h-perks small {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.45;
}

.h-skip {
  margin-top: 16px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s;
}

.h-skip:hover {
  color: var(--text-2);
}

/* Numbers: lining, tabular, sans */
.h-big b,
.h-mini b,
.h-lbar span,
.h-llab span,
.h-back,
.h-lv {
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

.h-big b,
.h-mini b {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.h-ic {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  border-radius: 12px;
  background: var(--champagne-soft);
  color: var(--champagne);
}

.h-back-save,
.h-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.h-back-save svg {
  width: 16px;
  height: 16px;
}

.h-play svg {
  width: 20px;
  height: 20px;
}

/* Icon animations */
.h-perks li {
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s;
}

.h-perks li:hover {
  transform: translateY(-4px);
  border-color: var(--champagne-line);
}

.h-ic svg {
  transform-origin: center;
}

.ic-cloud svg {
  animation: ic-bob 3.2s ease-in-out infinite;
}

.ic-streak svg {
  animation: ic-flame 1.6s ease-in-out infinite;
}

.ic-repeat svg {
  animation: ic-spin 6s linear infinite;
}

@keyframes ic-bob {
  50% {
    transform: translateY(-4px);
  }
}

@keyframes ic-flame {
  0%,
  100% {
    transform: scale(1) rotate(0);
  }
  35% {
    transform: scale(1.12, 1.18) rotate(-4deg);
  }
  70% {
    transform: scale(0.96, 1.04) rotate(3deg);
  }
}

@keyframes ic-spin {
  to {
    transform: rotate(360deg);
  }
}

.h-sec,
.h-dash,
.h-end {
  animation: h-rise 0.6s var(--ease) both;
}

@keyframes h-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Topic motion */
.h-topics li {
  animation: t-float 7s ease-in-out infinite;
}

.h-topics li:nth-child(3n) {
  animation-duration: 9s;
  animation-delay: -3s;
}

.h-topics li:nth-child(3n + 1) {
  animation-duration: 8s;
  animation-delay: -5s;
}

.h-topics li:nth-child(5n) {
  animation-duration: 10.5s;
  animation-delay: -1.5s;
}

@keyframes t-float {
  25% {
    translate: 3px -6px;
  }
  50% {
    translate: 0 -11px;
  }
  75% {
    translate: -3px -5px;
  }
}

.h-topics button {
  position: relative;
}

.h-topics button::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--champagne);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

/* All pills in 8 slots of 6s: about 4 glow at a time */
.h-topics button::after {
  animation: t-glow 48s ease-in-out infinite;
}

.h-topics li:nth-child(8n + 2) button::after {
  animation-delay: -6s;
}
.h-topics li:nth-child(8n + 3) button::after {
  animation-delay: -12s;
}
.h-topics li:nth-child(8n + 4) button::after {
  animation-delay: -18s;
}
.h-topics li:nth-child(8n + 5) button::after {
  animation-delay: -24s;
}
.h-topics li:nth-child(8n + 6) button::after {
  animation-delay: -30s;
}
.h-topics li:nth-child(8n + 7) button::after {
  animation-delay: -36s;
}
.h-topics li:nth-child(8n + 8) button::after {
  animation-delay: -42s;
}

@keyframes t-glow {
  0%,
  12.5%,
  100% {
    opacity: 0;
  }
  6.25% {
    opacity: 1;
  }
}

.h-topics li:hover,
.h-topics li:focus-within {
  animation-play-state: paused;
}

/* Level bar (bar + label share one column, always aligned) */
.h-lv-bar {
  display: flex;
  gap: 3px;
}

.h-lv-bar button {
  display: grid;
  gap: 8px;
  flex-basis: 0;
  min-width: 46px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
}

.h-lv-bar i {
  display: grid;
  place-items: center;
  height: 38px;
  overflow: hidden;
  color: var(--on-color);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  transition:
    transform 0.2s var(--ease),
    filter 0.2s;
}

.h-lv-bar button:first-child i {
  border-radius: 99px 0 0 99px;
}

.h-lv-bar button:last-child i {
  border-radius: 0 99px 99px 0;
}

.h-lv-bar em {
  padding-left: 6px;
  border-left: 2px solid currentColor;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.h-lv-bar button:hover i,
.h-lv-bar button:focus-visible i {
  transform: translateY(-3px);
  filter: brightness(1.12);
}

/* Stat cards */
.h-stat {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s,
    background 0.25s;
}

.h-stat:hover {
  transform: translateY(-3px);
  border-color: var(--champagne-line);
  background: var(--champagne-soft);
}

.h-stat .h-ic {
  margin: 0 0 4px;
}

.h-stat:hover .h-ic svg {
  animation: ic-bob 1s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 860px) {
  .home {
    gap: 40px;
  }
  .h-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .h-topics {
    gap: 16px 10px;
    padding-bottom: 50px;
  }
  .h-topics li:nth-child(n) {
    margin-top: 0;
  }
  .h-topics li:nth-child(odd) {
    margin-top: 16px;
  }
  .h-topics button {
    font-size: 0.95rem;
    padding: 10px 12px;
  }
  .h-perks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .h-cta .btn {
    flex: 1 1 100%;
  }
  .h-card {
    min-height: 290px;
    padding: 34px 18px 20px;
  }
  .h-lv-bar button {
    min-width: 38px;
  }
  .h-lv-bar i,
  .h-lv-bar em {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-topics li,
  .h-topics button::after,
  .h-card,
  .h-sec,
  .h-dash,
  .h-end,
  .h-ic svg {
    animation: none;
  }
  .h-gloss,
  .h-back-bar i {
    transition: none;
  }
}

/* ---------- Feature: topic ribbons on phones ---------------------------------
   All topics in 3 rows that drift sideways in a seamless loop (each track holds
   the row twice and moves by half its width). Touch pauses a row. Desktop keeps
   the floating cloud above. */
.h-ribbons {
  display: none;
}

@media (max-width: 600px) {
  .h-topics {
    display: none;
  }

  .h-ribbons {
    display: grid;
    gap: 10px;
    padding: 8px 0 44px;
  }

  .h-ribbon {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .h-ribbon-track {
    display: flex;
    width: max-content;
    animation: h-ribbon 55s linear infinite;
  }

  .h-ribbon:nth-child(2) .h-ribbon-track {
    animation-duration: 64s;
    animation-direction: reverse;
  }

  .h-ribbon:nth-child(3) .h-ribbon-track {
    animation-duration: 50s;
  }

  .h-ribbon:active .h-ribbon-track,
  .h-ribbon:focus-within .h-ribbon-track {
    animation-play-state: paused;
  }

  /* Same look as the desktop pills; spacing via margin so both copies are equal. */
  .h-ribbon-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-right: 10px;
    padding: 8px 10px 8px 16px;
    border: 1px solid var(--glass-edge);
    border-radius: 99px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
  }

  .h-ribbon-chip small {
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--champagne-soft);
    color: var(--champagne);
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
  }

  .h-ribbon-chip:active {
    border-color: var(--champagne-line);
    background: var(--champagne-soft);
  }
}

@keyframes h-ribbon {
  to {
    transform: translateX(-50%);
  }
}

/* Reduced motion: rows stand still and scroll by finger instead. */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .h-ribbon {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .h-ribbon-track {
    animation: none;
  }
}
/* Feature: Home dashboard for returning users (P7). Full shell width like the other tabs;
   the hero and the rows fill the width with content instead of empty space. */
.hd {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0 32px;
}

.hd h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
}

/* 1. Hero */
.hd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 28px;
  border-radius: var(--r-xl);
}

@media (min-width: 900px) {
  .hd-hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 40px;
    padding: 36px 40px;
  }

  .hd-hero-side {
    padding-left: 40px;
    border-left: 1px solid var(--rule-quiet);
  }
}

.hd-hero-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hd-hero-main h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.1;
}

.hd-hero-main h3 {
  margin-top: 10px;
  color: var(--champagne);
}

.hd-sync {
  min-height: 44px;
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--champagne);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hd-today-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--text-2);
}

.hd-pill {
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--glass-bg-soft);
  font-size: 0.92rem;
}

.hd-start {
  align-self: stretch;
  min-height: 52px;
  font-size: 1.05rem;
}

@media (min-width: 761px) {
  .hd-start {
    align-self: flex-start;
    min-width: 280px;
  }
}

.hd-newday {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 0.85rem;
}

.hd-newday > span {
  margin-right: 4px;
}

.hd-newday .hd-chip {
  padding: 6px 10px;
}

.hd-hero-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.hd-ring {
  position: relative;
  width: 132px;
  height: 132px;
}

.hd-ring svg {
  width: 100%;
  height: 100%;
}

.hd-goal-bg,
.hd-goal-fg {
  fill: none;
  stroke-width: 7;
}

.hd-goal-bg {
  stroke: var(--rule);
}

.hd-goal-fg {
  stroke: var(--champagne);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease);
}

.hd-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding-top: 46px;
}

.hd-ring-num b {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hd-ring-num small {
  color: var(--text-3);
}

.hd-ring-cap {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.hd-ring-cap span {
  color: var(--text-3);
  font-size: 0.88rem;
}

.hd-streak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 14px;
  border: 1px solid var(--champagne-line);
  border-radius: 99px;
  background: var(--champagne-soft);
  color: var(--text-2);
  font-size: 0.88rem;
}

.hd-streak svg {
  flex: none;
  color: var(--champagne);
}

/* Quiet pill chips (new words per day, quick start) */
.hd-chip {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.hd-chip:hover {
  border-color: var(--champagne-line);
  color: var(--text);
}

.hd-chip.active {
  border-color: var(--champagne-line);
  background: var(--champagne-soft);
  color: var(--champagne);
}

/* 2. Continue / Review + word of the day */
.hd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 900px) {
  .hd-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .hd-row.solo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hd-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hd-action {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  min-height: 84px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hd-action b {
  font-size: 1.05rem;
  font-weight: 600;
}

.hd-action small {
  color: var(--text-3);
  font-size: 0.88rem;
}

.hd-action:hover b {
  color: var(--champagne);
}

/* Section headings */
.hd-sec {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hd-sec-head p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 0.92rem;
}

.hd-search,
.hd-levels-card {
  padding: 26px 28px;
  border-radius: var(--r-xl);
}

/* Search */
.hd-search-field {
  position: relative;
  display: block;
}

.hd-search-field svg {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  z-index: 1;
  color: var(--text-3);
  pointer-events: none;
}

.hd-search-field .field {
  width: 100%;
  min-height: 48px;
  padding-left: 44px;
}

.hd-results {
  margin-top: 10px;
}

.hd-results ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-results li {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--rule-quiet);
}

.hd-res-cz {
  font-weight: 600;
}

.hd-res-tr {
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hd-res-lv {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 600;
}

.hd-empty {
  margin: 0;
  color: var(--text-3);
}

.hd-more {
  margin-top: 12px;
}

.hd-say {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--champagne);
  cursor: pointer;
  vertical-align: middle;
}

.hd-say:hover {
  background: var(--champagne-soft);
}

/* Word of the day */
.hd-wod {
  padding: 22px 24px;
  border-radius: var(--r-xl);
}

.hd-wod-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hd-wod-top h3 {
  color: var(--text-3);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hd-wod-word {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.hd-wod-cz {
  font-family: var(--serif);
  font-size: 2.1rem;
}

.hd-wod-tr {
  margin: 0 0 12px;
  color: var(--champagne);
  font-weight: 600;
}

.hd-wod-use {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.hd-wod-use-tr {
  margin: 4px 0 0;
  color: var(--text-2);
  font-style: italic;
}

/* 4. Quick start cards */
.hd-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.hd-quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 96px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hd-quick-card b {
  font-weight: 600;
}

.hd-quick-card small {
  color: var(--text-3);
  font-size: 0.86rem;
  line-height: 1.45;
}

.hd-quick-card:hover b {
  color: var(--champagne);
}

/* Phones: two compact tiles per row, names only */
@media (max-width: 600px) {
  .hd-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hd-quick-card {
    min-height: 60px;
    justify-content: center;
    padding: 12px 14px;
  }

  .hd-quick-card small {
    display: none;
  }
}

/* 5. Levels */
.hd-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-levels button {
  display: grid;
  grid-template-columns: 34px 1fr 7.5em;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
}

.hd-levels button:hover {
  background: var(--glass-bg-soft);
}

.hd-lv-name {
  font-weight: 700;
}

.hd-lv-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--rule);
}

.hd-lv-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width 0.8s var(--ease);
}

.hd-lv-num {
  text-align: right;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.hd-test {
  align-self: flex-start;
}

/* Challenge of the day */
.hd-daily {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 20px 24px;
  border-radius: var(--r-xl);
}

.hd-daily-text p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 0.92rem;
}

/* Feature: header-nav. Header and navigation overrides (breakpoints, themes, phone bottom nav, More sheet), imported last.
   Base header/nav rules stay in layout/shell.css and layout/nav.css (they must precede buttons, overlays and views). */
@media (max-width: 880px) {
  .app-shell {
    padding: 0 16px 90px;
  }
}

@media (max-width: 560px) {

  .app-header {
    align-items: flex-start;
    padding-top: 24px;
  }

  .nav-tab-btn {
    padding: 7px 13px;
    font-size: 0.87rem;
  }
}

@media (max-width: 880px) {

  .app-shell {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Header ----------
   Row one: logo + account button.
   Row two: language icon + swipeable tab strip (no popup menu). */
@media (max-width: 760px) {
  .app-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    padding: 16px 0 14px;
    margin-bottom: 18px;
  }

  /* Invisible full-width item that forces a line break after the account button. */
  .app-header::after {
    content: "";
    order: 4;
    flex: 0 0 100%;
    height: 0;
  }

  .wordmark {
    order: 1;
    margin-right: auto;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 10px;
    min-width: 0;
  }

  .wordmark-logo {
    width: 38px;
  }

  .wordmark-details {
    align-items: flex-start;
    gap: 0;
  }

  .wordmark h1 {
    font-size: 1.5rem;
  }

  .wordmark-note {
    font-size: 0.72rem;
  }

  /* The controls become direct children of the header so they can be
     ordered independently of the logo. */
  .header-controls {
    display: contents;
  }

  .header-controls > .btn {
    min-width: 0;
    padding: 9px 14px;
    font-size: 0.85rem;
    /* Inline styles in the markup set display:flex; block lets long
       e-mail addresses truncate with an ellipsis instead of wrapping. */
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-controls > .btn svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
  }

  /* Theme toggle: round icon button, first row between logo and account. */
  .header-controls > .btn.btn-theme {
    order: 2;
    flex: 0 0 auto;
    display: inline-grid !important;
    padding: 0;
  }

  .header-controls > .btn.btn-theme svg {
    margin: 0;
    vertical-align: 0;
  }

  /* Account / sign-in: first row, right of the logo. */
  .header-controls > .btn:nth-child(2) {
    order: 3;
    flex: 0 1 auto;
  }

  /* Language: second row, icon + short code. */
  .header-controls > .btn:nth-child(1) {
    order: 5;
    flex: 0 0 auto;
    margin-top: 10px;
  }

  /* Tabs: second row, fill the rest of the width and scroll sideways. */
  .main-nav {
    order: 6;
    flex: 1 1 0;
    min-width: 0;
    margin-top: 10px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============================================================
   Slide switches (language UA / EN, theme Sun / Night)
   ============================================================ */

.header-switches {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 760px) {
  .header-controls > .header-switches {
    order: 5;
    margin-top: 10px;
    margin-right: auto;
  }

  .header-controls > .main-nav {
    order: 6;
    flex: 0 0 100%;
  }
}
/* ============================================================
   Pass 3: wordmark, level chips (no black glow), light sliders
   ============================================================ */

/* ---- Wordmark ---- */
.wordmark h1 {
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
  background: var(--wordmark-ink);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: var(--wordmark-glow);
  animation: wordmark-shine 9s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark h1 {
    animation: none;
  }
}

@media (max-width: 760px) {
  .wordmark h1 {
    font-size: 1.95rem;
  }
}

/* ---- Mobile header: switches sit under the sign-in button ---- */
@media (max-width: 760px) {
  .header-controls > .header-switches {
    order: 5;
    margin: 10px 0 0 auto;
    justify-content: flex-end;
  }

  .header-controls > .main-nav {
    order: 6;
    flex: 0 0 100%;
    margin-top: 10px;
  }
}

/* ---- Mobile header v2: logo + sign-in on row 1, switches under it ---- */
@media (max-width: 760px) {
  .wordmark h1 {
    font-size: 1.7rem;
  }

  .wordmark-logo {
    width: 34px;
  }

  .wordmark {
    gap: 8px;
  }

  .header-controls > .btn:nth-child(2) {
    padding: 8px 12px;
    font-size: 0.8rem;
    max-width: 52vw;
  }

  .header-controls > .btn:nth-child(2) svg {
    margin-right: 4px;
  }
}

@media (max-width: 400px) {
  .wordmark h1 {
    font-size: 1.5rem;
  }

  .wordmark-note {
    font-size: 0.66rem;
  }
}

/* ============================================================
   Mobile v3 — header never reflows, roadmap pill pinned right
   ============================================================ */
@media (max-width: 760px) {
  /* Row 1 is always: [logo + title (shrinks)] [sign-in (fixed)]. */
  .wordmark {
    flex: 1 1 0;
    min-width: 0;
    margin-right: 0;
  }

  .wordmark-details {
    min-width: 0;
  }

  .wordmark h1 {
    font-size: clamp(1.3rem, 6.4vw, 1.7rem);
    white-space: nowrap;
  }

  .wordmark-note {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .header-controls > .btn:nth-child(2) {
    flex: 0 0 auto;
    max-width: 60vw;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .wordmark-logo {
    width: 28px;
  }

  .wordmark-note {
    display: none;
  }

  .header-controls > .btn:nth-child(2) {
    padding: 7px 10px;
    font-size: 0.74rem;
  }

  .header-controls > .btn:nth-child(2) svg {
    display: none;
  }
}

@media (max-width: 760px) {
  .wordmark-details {
    overflow: hidden;
  }

  .wordmark h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .wordmark h1 {
    font-size: clamp(1.1rem, 5.6vw, 1.4rem);
  }
}

/* In-game focus mode (header hidden, shell sizing) lives in features/practice.css. */

/* ---------- Header account button, phone bottom navigation and "More" sheet ---------- */

/* Feature: header account button (was inline styles in App.tsx). */
.header-controls > .account-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-controls > .account-btn.is-guest {
  border-color: var(--account-guest-edge);
  color: var(--champagne);
  font-weight: 600;
  background: var(--account-guest-bg);
}

.header-controls > .account-btn.is-user {
  border-color: var(--champagne-line);
  color: var(--text);
  font-weight: 500;
}

.account-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--champagne-soft);
  border: 1px solid var(--champagne-line);
  color: var(--champagne);
}

/* Feature: "More" sheet content (account row, settings rows). */
.nav-sheet-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--champagne-soft);
  border-color: var(--champagne-line);
}

.nav-sheet-account-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-sheet-account-action {
  font-size: 0.82rem;
  color: var(--champagne);
}

.nav-sheet-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 6px 4px 6px 18px;
  color: var(--text-2);
  font-weight: 600;
}

/* Feature: phone bottom navigation. Hidden on wider screens. */
.bottom-nav {
  display: none;
}

@media (max-width: 760px) {
  /* Header: one slim row (logo + account). Tabs move to the bottom bar,
     language and theme to the "More" sheet. */
  .app-header .header-controls > .header-switches,
  .app-header .header-controls > .main-nav {
    display: none;
  }

  .header-controls > .account-btn.is-user .account-label {
    display: none;
  }

  /* Content never hides behind the bottom bar. */
  .app-shell {
    padding-bottom: calc(32px + var(--bottom-nav-h));
  }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50; /* below overlays (.overlay is 60) */
    display: flex;
    align-items: stretch;
    height: var(--bottom-nav-h);
    padding: 6px 6px env(safe-area-inset-bottom, 0px);
    background: var(--solid);
    border-top: 1px solid var(--glass-edge);
    box-shadow: var(--bar-shadow);
  }

  .bottom-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--text-3);
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: color 0.18s var(--ease);
  }

  .bottom-nav-btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav-ico {
    width: 22px;
    height: 22px;
  }

  .bottom-nav-btn.active {
    color: var(--champagne);
  }

  .bottom-nav-btn.active .bottom-nav-ico {
    filter: drop-shadow(0 0 6px var(--champagne-line));
  }

  /* A running drill is a focus mode: no header, no bottom bar. */
  body.in-game .bottom-nav {
    display: none;
  }

  /* "More" opens as a bottom sheet. */
  .overlay:has(> .nav-modal) {
    place-items: end stretch;
    padding: 0;
  }

  .nav-modal {
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@keyframes wordmark-shine {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}