:root {
    --bg: #f5f6f8;
    --card: #ffffff;
    --card-back: #eef4ff;
    --text: #1c2230;
    --muted: #66707f;
    --accent: #2f6df6;
    --accent-soft: #dbe6ff;
    --good: #1f9d5b;
    --good-soft: #e2f6ec;
    --bad: #d9534f;
    --bad-soft: #fbe6e5;
    --warn: #c07d17;
    --fem: #d6336c;
    --warn-soft: #fbf0da;
    --syn: #7c3aed;
    --border: #dfe3ea;
    --shadow: 0 2px 10px rgba(20, 30, 60, 0.08);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #12151c;
      --card: #1c212c;
      --card-back: #1e2a42;
      --text: #e8ecf3;
      --muted: #97a1b2;
      --accent: #5b8bff;
      --accent-soft: #2a3550;
      --good: #35c07a;
      --good-soft: #17321f;
      --bad: #ff7b76;
      --bad-soft: #3a1f1e;
      --warn: #e0a94a;
      --fem: #ff9ec4;
      --warn-soft: #34290f;
      --syn: #c4a4ff;
      --border: #2b313d;
      --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  header { text-align: center; padding: 28px 16px 10px; }
  header h1 { margin: 0 0 4px; font-size: 1.7rem; }
  header p { margin: 0; color: var(--muted); font-size: 0.95rem; }
  .wrap { max-width: 900px; margin: 0 auto; padding: 12px 16px 60px; }

  .modebar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 8px; }
  .modebar button {
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    padding: 8px 18px; border-radius: 999px; font-size: 0.95rem; cursor: pointer; transition: all 0.15s;
  }
  .modebar button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* A bar switched off by another filter (ex. level bar while a section is active). */
  .modebar.bar-off { opacity: 0.4; }
  .modebar.bar-off button { cursor: not-allowed; }

  .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
  .theme-btn {
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    border-radius: 14px; padding: 16px 14px; cursor: pointer; text-align: left;
    box-shadow: var(--shadow); transition: transform 0.12s, border-color 0.12s;
  }
  .theme-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
  .theme-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .theme-btn .emoji { font-size: 1.6rem; }
  .theme-btn .t-en { font-weight: 600; margin-top: 6px; }
  .theme-btn .t-fr { color: var(--muted); font-size: 0.85rem; }
  .theme-btn .t-count { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
  #global-quiz-box { margin-top: 18px; }
  #global-quiz-box .theme-btn.global {
    width: 100%; border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 0 0 2px var(--accent-soft);
  }
  #global-quiz-box .theme-btn.global .t-fr,
  #global-quiz-box .theme-btn.global .t-count { color: var(--text); opacity: 0.8; }

  .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 4px; }
  .section-title h2 { margin: 0; font-size: 1.25rem; }
  .section-title .sub { color: var(--muted); font-size: 0.9rem; }
  .hint { color: var(--muted); font-size: 0.9rem; margin: 2px 0 14px; }

  .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
  .btn {
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    padding: 8px 16px; border-radius: 10px; font-size: 0.92rem; cursor: pointer; transition: all 0.15s;
  }
  .btn:hover:not(:disabled) { border-color: var(--accent); }
  .btn:disabled { opacity: 0.4; cursor: default; }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn.good { background: var(--good); border-color: var(--good); color: #fff; }
  .btn.bad { background: var(--bad); border-color: var(--bad); color: #fff; }

  /* Review cards */
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
  .flip { cursor: pointer; }
  .face {
    border-radius: 14px; box-shadow: var(--shadow); min-height: 130px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 10px; text-align: center;
    transition: background 0.15s;
  }
  .face.back { display: none; }
  .flip.revealed .face.front { display: none; }
  .flip.revealed .face.back { display: flex; }
  .face.front { background: var(--card); border: 1px solid var(--border); }
  .face.front .en { font-size: 1.2rem; font-weight: 600; }
  .face.front .tap { color: var(--muted); font-size: 0.72rem; margin-top: 4px; }
  .thumb { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; margin-bottom: 6px; }
  .quiz-thumb { width: 104px; height: 104px; object-fit: contain; border-radius: 14px; margin: 4px auto 2px; display: block; }
  .face.back { background: var(--card-back); border: 1px solid var(--accent-soft); }
  .face.back .fr-m { font-size: 1.25rem; font-weight: 700; }
  .face.back .fr-f { font-size: 1.05rem; color: var(--accent); }
  .face.back .inv { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
  .face.back .en-small { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
  .syn { margin-top: 8px; }
  .syn-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
  .syn-line { font-size: 0.92rem; font-weight: 600; color: var(--syn); line-height: 1.35; }
  .say {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 8px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--card); color: var(--accent);
    cursor: pointer; transition: all 0.15s;
  }
  .say:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .feedback .say { margin-top: 10px; }

  /* Sentences */
  .sent-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .sent-thumb { width: 160px; height: 160px; object-fit: contain; border-radius: 12px; margin-bottom: 8px; }
  .sent-en { font-size: 1.05rem; font-weight: 600; }
  .sent-fr { font-size: 1.2rem; font-weight: 700; color: var(--accent); }
  .sent-en-small { font-size: 0.82rem; color: var(--muted); margin-top: 10px; font-style: italic; }

  /* Grammar (little words) */
  .gram-hint { color: var(--muted); font-size: 0.9rem; font-style: italic; margin-top: 10px; }
  .gram-sentence { font-size: 1.5rem; font-weight: 700; margin: 10px 0 16px; }
  .gram-sentence .blank { color: var(--accent); border-bottom: 2px dashed var(--accent); padding: 0 12px; }
  .gram-options { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .gram-opt {
    border: 1.5px solid var(--border); background: var(--card); color: var(--text);
    padding: 10px 18px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
  }
  .gram-opt:hover:not(:disabled) { border-color: var(--accent); }
  .gram-opt:disabled { cursor: default; }
  .gram-opt.correct { background: var(--good); border-color: var(--good); color: #fff; }
  .gram-opt.wrong { background: var(--bad); border-color: var(--bad); color: #fff; }
  .gram-explain { color: var(--text); font-size: 0.95rem; margin-top: 8px; }
  .why-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 2px; }
  .rule-box { text-align: left; margin: 12px auto 0; max-width: 560px; background: var(--accent-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; }
  .rule-title { font-size: 0.8rem; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 5px; }
  .rule-fr { font-size: 0.9rem; color: var(--text); line-height: 1.45; }
  .rule-en { font-size: 0.85rem; color: var(--muted); line-height: 1.4; margin-top: 4px; font-style: italic; }
  .verb-inf { display: inline-block; font-size: 1.15rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 16px; margin-bottom: 6px; }
  .verb-en { color: var(--text); font-size: 1.35rem; font-weight: 600; line-height: 1.35; margin-bottom: 14px; }
  .verb-sentence { font-size: 1.25rem; font-weight: 600; line-height: 1.5; margin-bottom: 14px; }
  .cloze-blank { display: inline-block; min-width: 54px; border-bottom: 2px dashed var(--accent); color: var(--accent); font-weight: 800; text-align: center; }
  .gram-full { font-size: 1.15rem; font-weight: 700; color: var(--accent); margin-top: 6px; }
  .gram-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
  .gram-sep {
    grid-column: 1 / -1; margin: 14px 0 2px; padding-bottom: 6px;
    border-bottom: 2px solid var(--border); color: var(--text);
    font-weight: 700; font-size: 1.05rem;
  }
  .gcard { text-align: center; padding: 20px 18px; }
  .gcard .gram-sentence { font-size: 1.25rem; margin: 8px 0 14px; }
  .gcard .feedback { min-height: 0; }
  .gcard .feedback:empty { display: none; }

  /* Listening comprehension (ecoute.html) */
  .listen-box { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 22px; }
  .listen-btn {
    display: inline-flex; align-items: center; gap: 9px;
    border: none; background: var(--accent); color: #fff;
    padding: 10px 20px; border-radius: 999px; font-size: 1rem; font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow); transition: transform 0.12s, filter 0.12s;
  }
  .listen-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .listen-btn .play-tri {
    width: 0; height: 0; border-style: solid;
    border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
  }
  .listen-btn .pause-bars {
    width: 13px; height: 16px; box-sizing: border-box;
    border-left: 4px solid #fff; border-right: 4px solid #fff;
  }
  .listen-slow {
    border: 1.5px solid var(--border); background: var(--card); color: var(--muted);
    padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
  }
  .listen-slow:hover { border-color: var(--accent); color: var(--accent); }
  /* Answer options, only on the listening card: .gram-opt is shared with the grammar,
     generator, verb and look-alike exercises, which must keep their own size. */
  #ec-options .gram-opt { font-size: 1rem; padding: 9px 15px; }
  /* Two scopes of navigation share the bottom row: questions (.btn) then passages (.pnav). */
  .act-group { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .act-group + .act-group { margin-left: 18px; }
  .pnav {
    border: 1px solid var(--border); background: var(--card); color: var(--muted);
    padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
  }
  .pnav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .pnav.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .ec-qnum { color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
  /* Clearly above the options, without swallowing the card. clamp() keeps it readable
     on a phone without blowing it up on a desktop. */
  .ec-question {
    font-size: clamp(1.25rem, 2.8vw, 1.8rem); font-weight: 800; line-height: 1.28;
    letter-spacing: -0.01em; color: var(--text); margin: 10px auto 20px; max-width: 700px;
  }

  /* Seek bar */
  .seek-row { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto 18px; }
  .seek-time { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; min-width: 34px; }
  .seek-time:last-child { text-align: right; }
  .seek {
    -webkit-appearance: none; appearance: none; flex: 1;
    height: 6px; border-radius: 999px; background: var(--border); cursor: pointer; outline: none;
  }
  .seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--card); box-shadow: var(--shadow); cursor: grab;
  }
  .seek::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--card); box-shadow: var(--shadow); cursor: grab;
  }
  .seek:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
  .transcript {
    text-align: left; margin: 16px auto 0; max-width: 620px;
    background: var(--accent-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: 10px; padding: 12px 16px;
  }
  .transcript-fr { font-size: 1.02rem; font-weight: 600; color: var(--text); line-height: 1.55; }
  .transcript-en { font-size: 0.88rem; color: var(--muted); line-height: 1.45; margin-top: 8px; font-style: italic; }

  /* Quiz */
  .quiz-card {
    position: relative;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow); padding: 30px 22px; text-align: center; margin-top: 16px;
  }
  .quiz-progress { color: var(--muted); font-size: 0.9rem; }
  .quiz-en { font-size: 2.1rem; font-weight: 700; margin: 14px 0 4px; }
  .quiz-en-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 14px; }
  .quiz-input-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  /* Shared by every text answer field. Was styled by #id, so a second input
     inherited nothing and the two fields looked different on the same page. */
  .text-input {
    font-size: 1.15rem; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text); font-family: inherit;
  }
  .text-input:focus { outline: none; border-color: var(--accent); }
  .quiz-input { width: 260px; max-width: 70vw; text-align: center; }
  .feedback { min-height: 60px; margin: 14px 0 4px; }
  .feedback .verdict { font-size: 1.05rem; font-weight: 600; }
  .feedback.ok .verdict { color: var(--good); }
  .feedback.warn .verdict { color: var(--warn); }
  .feedback.no .verdict { color: var(--bad); }
  .feedback .correct { margin-top: 6px; }
  .feedback .correct .fr-m { font-size: 1.4rem; font-weight: 700; }
  .feedback .correct .fr-f { font-size: 1.15rem; color: var(--accent); }
  .feedback .correct .inv { font-size: 0.85rem; color: var(--muted); }
  .quiz-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

  .scorebar { display: flex; justify-content: center; gap: 20px; margin-top: 14px; color: var(--muted); font-size: 0.92rem; }
  .scorebar b { color: var(--text); }

  .result {
    text-align: center; background: var(--card); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow); padding: 32px 22px; margin-top: 16px;
  }
  .result .score-big { font-size: 2.4rem; font-weight: 800; margin: 8px 0; }
  .hidden { display: none !important; }
  footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 20px; }

  /* Persistent quiz score pastilles */
  .pastilles { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0 2px; flex-wrap: wrap; }
  .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; font-weight: 800; font-size: 1rem; }
  .pill.good { background: var(--good-soft); color: var(--good); }
  .pill.bad { background: var(--bad-soft); color: var(--bad); }
  .pill .dot { width: 11px; height: 11px; border-radius: 50%; }
  .pill.good .dot { background: var(--good); }
  .pill.bad .dot { background: var(--bad); }
  .pastilles .reset { background: none; border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer; text-decoration: underline; }

  /* Grammar mini image (about half the size of adjective images) */
  .gram-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: 10px; margin: 0 auto 6px; display: block; }

  /* Menu (home page) */
  .menu-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; }
  .menu-card { display: block; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 30px 24px; box-shadow: var(--shadow); transition: transform 0.12s, border-color 0.12s; text-align: center; }
  .menu-card:hover { transform: translateY(-3px); border-color: var(--accent); }
  .menu-card .m-emoji { font-size: 2.6rem; }
  .menu-card .m-title { font-weight: 700; font-size: 1.2rem; margin-top: 10px; }
  .menu-card .m-sub { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }

  /* Global navigation (on every page) */
  .topnav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
  .nav-link { color: var(--muted); text-decoration: none; font-size: 0.9rem; border: 1px solid var(--border); background: var(--card); padding: 7px 16px; border-radius: 999px; transition: all 0.15s; }
  .nav-link:hover { border-color: var(--accent); color: var(--accent); }
  .nav-link.active { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* Sentence builder (tiles) */
  .builder-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 24px 20px; margin-top: 16px; text-align: center; }
  .build-id { position: absolute; top: 8px; right: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 0.6rem; color: var(--muted); opacity: 0.55; letter-spacing: 0.02em; user-select: text; pointer-events: auto; }
  .lvl-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: transparent; padding: 0; margin-bottom: 8px; opacity: 0.7; }
  .lvl-badge.easy { color: var(--good); }
  .lvl-badge.medium { color: var(--warn); }
  .lvl-badge.advanced { color: var(--bad); }
  .builder-hint-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; margin: 2px auto 8px; display: block; }
  .builder-en { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
  .builder-en-sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 14px; }
  .answer-row { min-height: 58px; border: 2px dashed var(--border); border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 14px; }
  .answer-row.ok { border-color: var(--good); background: var(--good-soft); }
  .answer-row.no { border-color: var(--bad); background: var(--bad-soft); }
  .answer-row .placeholder { color: var(--muted); font-size: 0.9rem; }
  .tile-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; min-height: 44px; }
  .tile { border: 1.5px solid var(--border); background: var(--bg); color: var(--text); padding: 9px 14px; border-radius: 10px; font-size: 1.05rem; font-weight: 600; cursor: grab; transition: border-color 0.12s, box-shadow 0.12s; touch-action: none; user-select: none; -webkit-user-select: none; }
  .tile:hover { border-color: var(--accent); }
  .tile.dragging-src { opacity: 0.35; }
  .tile-drag-clone { position: fixed; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,0,0,0.25); transform: scale(1.06); }
  .answer-row.drop-hint { border-color: var(--accent); background: var(--accent-soft); }
  .tile-bank.drop-hint { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
  .builder-correct { font-size: 1.15rem; font-weight: 700; color: var(--accent); margin-top: 8px; }
  /* Shown when the learner built an accepted variant rather than the target sentence. */
  .variant-note { margin-top: 6px; font-size: 0.9rem; color: var(--muted); }

  /* Spoken-French flashcards (oral.html): the English side is the prompt, the French
     side only appears on a tap. The card itself is the button, hence the pointer. */
  .oral-progress { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
  .oral-card { cursor: pointer; min-height: 150px; }
  .oral-card:hover { border-color: var(--accent); }
  .oral-card.revealed { cursor: default; }
  .oral-fr { font-size: 1.45rem; font-weight: 800; color: var(--accent); line-height: 1.4; margin-top: 6px; }
  .oral-alt-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 12px; }
  .oral-alt { font-size: 1.05rem; font-weight: 600; color: var(--text); opacity: 0.85; line-height: 1.4; }

  /* Sentence typing mode: a whole sentence needs far more room than one word. */
  .sentence-input { width: min(560px, 90vw); max-width: 90vw; text-align: left; }
  .phrase-yours { margin-top: 8px; font-size: 1rem; }
  .phrase-yours .d-wrong { color: var(--bad); text-decoration: underline wavy; }
  .phrase-yours .d-accent { color: var(--warn); }        /* only an accent was missing */
  .phrase-yours .d-missing { color: var(--muted); text-decoration: line-through; }
  /* Pictures of the words the sentence uses, shown above the English prompt. */
  .phrase-imgs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .phrase-words { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .phrase-words .pw { display: inline-flex; align-items: center; gap: 6px; }

  .sent-note { font-size: 0.82rem; color: var(--text); margin-top: 8px; }

  .vm { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
  .vf { font-size: 1.25rem; font-weight: 700; color: var(--fem); }

  /* Taboo: explain the word, never say the forbidden ones */
  .taboo-timer {
    font-variant-numeric: tabular-nums; font-size: 2.2rem; font-weight: 800;
    color: var(--muted); line-height: 1.1; margin-bottom: 6px;
  }
  .taboo-timer.running { color: var(--accent); }
  .taboo-timer.low { color: var(--warn); }
  .taboo-timer.done { color: var(--bad); }
  .taboo-timer-note { font-size: 0.82rem; color: var(--muted); min-height: 18px; margin-bottom: 10px; }
  .taboo-word { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
  /* The word itself is the biggest thing on the card: it is what has to be talked around. */
  .taboo-word .vm, .taboo-word .vf { font-size: 1.9rem; }
  .taboo-word-en { font-size: 1.9rem; font-weight: 800; color: var(--text); }
  .taboo-forbidden { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 4px; }
  /* NOT struck through: these words have to be read quickly and often mid-timer, and
     a line through the middle slows that down. The red pill and the label say enough. */
  .taboo-forbidden .pill { font-size: 1.05rem; }