:root {
    /* Sound to Story - warm ground, ink outlines, a colour per strand.
       Strand colours run warm to cool up the ladder, so the order is
       something a child can see rather than something they must be told. */
    --paper: #fdfaf4;
    --paper-deep: #f0e8dc;
    --ink: #22201c;
    --ink-soft: #5e574c;
    --ink-faint: #7d7264;
    --rule: #e8e0d2;

    --accent: #d4552f;        /* coral - also the Sound strand */
    --accent-soft: #fbe6dd;
    --gold: #c8862b;          /* amber - also the Word strand */
    --gold-soft: #f8ecd6;
    --teal: #2e8f86;          /* also the Sentence strand */
    --teal-soft: #dcefec;
    --indigo: #5061c4;        /* the Text strand */
    --indigo-soft: #e0e3f7;
    --mint: #d8e8d4;
    --shadow: rgba(34, 32, 28, 0.12);

    --s-sound: var(--accent);
    --s-word: var(--gold);
    --s-sentence: var(--teal);
    --s-text: var(--indigo);

    /* Edu VIC WA NT is the handwriting your students are taught to form,
       so headings match what they write. Lexend was drawn to make reading
       easier for developing readers, so it carries everything else.
       Display is used only at large sizes - handwriting is hard work at 15px. */
    --font-display: 'Edu VIC WA NT Beginner', 'Edu VIC WA NT Hand', 'Lexend', system-ui, cursive;
    --font-ui: 'Lexend', system-ui, -apple-system, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-text-fill-color: currentColor; }

  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    font-family: var(--font-ui);
    background: var(--paper);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(212, 167, 60, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(58, 125, 122, 0.05) 0%, transparent 40%);
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .screen {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    padding: 2rem;
    animation: fadeIn 0.4s ease;
    overflow-y: auto;
  }

  .screen.active { display: flex; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============ HOME SCREEN ============ */
  #home {
    /* Left-aligned, like the design. Centring made every block feel like a
       poster; the app reads as a page you scan down. */
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-top: 3rem;
  }

  .home-inner {
    max-width: 720px;
    width: 100%;
    padding: 1rem 0 3rem;
  }

  .badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
  }

  h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
  }

  h1 .underline {
    position: relative;
    display: inline-block;
  }

  h1 .underline::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0.05em;
    height: 0.25em;
    background: var(--gold);
    z-index: -1;
    opacity: 0.5;
    border-radius: 4px;
  }

  .tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
  }

  .section-label {
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    flex-shrink: 0;
  }

  /* Step 1: pick a set */
  .set-grid {
    margin-bottom: 2rem;
  }

  .set-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .sound-drawer {
    height: 0;
    overflow: hidden;
    transition: height 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
  }

  .drawer-inner {
    padding: 0.5rem 0 0.75rem;
  }

  @media (max-width: 479px) {
    .set-row { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 600px) {
    .set-row { gap: 1rem; }
  }

  .set-btn {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 0.7rem 0.75rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    transition: all 0.15s ease;
    box-shadow: 3px 3px 0 var(--ink);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    min-height: 4rem;
  }

  .set-btn-n {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    line-height: 1;
    color: var(--ink);
    flex-shrink: 0;
    width: clamp(2.6rem, 5.5vw, 3.4rem);
    text-align: center;
  }
  .set-btn.selected .set-btn-n { color: var(--paper); }

  .set-btn-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .star-badge {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
  }

  .star-counter-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 1rem;
  }

  .done-celebration {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--accent);
    margin-bottom: 0.75rem;
    animation: spin 0.6s ease;
  }

  .set-btn:hover, .set-btn:focus-visible {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
    outline: none;
  }

  .set-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
  }

  .set-btn.selected {
    background: var(--accent);
    color: var(--paper);
  }

  .set-btn .num {
    display: block;
    font-family:  sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0;
  }
  .set-btn .num.lv-foundation { color: #1d4ed8; }
  .set-btn .num.lv-level1     { color: #6d28d9; }
  .set-btn .num.lv-level2     { color: #be185d; }
  .set-btn .num.lv-advanced   { color: #0f766e; }
  .set-btn.selected .num { color: var(--paper); opacity: 0.8; }

  .set-btn .focus {
    display: block;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--accent);
    word-break: break-word;
  }
  .set-btn.selected .focus { color: var(--paper); }

  /* Step 2: pick what within the set */
  .sound-picker {
    margin-bottom: 2rem;
    animation: fadeIn 0.3s ease;
  }

  .sound-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  @media (min-width: 600px) {
    .sound-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .wall-group-label {
    font-family:  sans-serif; font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
    margin: 1.1rem 0 0.5rem;
  }
  .wall-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
  }
  @media (min-width: 600px) { .wall-grid { grid-template-columns: repeat(6, 1fr); } }
  .wall-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.15rem; padding: 0.6rem 0.2rem; border: 2px solid var(--ink);
    border-radius: 12px; background: var(--paper); cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink); transition: transform 0.1s, box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .wall-tile:active, .wall-tile.playing { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); background: var(--gold); }
  .wall-tile .wall-glyph { font-size: 1.5rem; font-weight: 700; line-height: 1; }
  .wall-tile .wall-emoji { font-size: 1.05rem; line-height: 1; }

  .lc-listen {
    display: flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; margin: 1.5rem auto; border-radius: 50%;
    border: 3px solid var(--ink); background: var(--gold); color: var(--ink);
    cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .lc-listen:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

  .pr-stats { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
  .pr-stat { flex: 1; min-width: 5rem; background: var(--paper-deep); border-radius: 12px; padding: 0.7rem 0.5rem; text-align: center; }
  .pr-stat .n { font-size: 1.6rem; font-weight: 800; font-family:  sans-serif; color: var(--ink); line-height: 1; }
  .pr-stat .l { font-size: 0.72rem; color: var(--ink-soft); font-family:  sans-serif; font-weight: 600; margin-top: 0.2rem; }
  .pr-book { margin-bottom: 0.7rem; }
  .pr-book-head { display: flex; justify-content: space-between; align-items: baseline; font-family:  sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 0.25rem; }
  .pr-book-head .sub { font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; }
  .pr-bar { height: 9px; border-radius: 5px; background: var(--paper-deep); overflow: hidden; }
  .pr-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
  .pr-bar.gold > span { background: var(--gold); }
  .pr-section-label { font-family:  sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 1.2rem 0 0.5rem; }
  .pr-tricky { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .pr-tricky .chip { background: #fdf3d8; border: 1.5px solid var(--gold); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.9rem; font-weight: 600; }
  .pr-empty { color: var(--ink-soft); font-size: 0.88rem; font-style: italic; }
  .pr-heat { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
  .pr-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--paper-deep); border: 1px solid rgba(42,42,42,0.15); }
  .pr-cell.partial { background: var(--accent-soft); }
  .pr-cell.gold { background: var(--gold); border-color: rgba(42,42,42,0.25); }
  .pr-next { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .pr-next button { font-family:  sans-serif; font-weight: 700; font-size: 0.82rem; border: 2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
  .pr-next button:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
  .pr-legend { display: flex; gap: 0.8rem; font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.4rem; }
  .pr-legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
  .pr-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
  .pr-kids { display: flex; flex-direction: column; gap: 0.45rem; }
  .pr-kid { display: flex; align-items: center; gap: 0.6rem; border: 2px solid var(--ink); border-radius: 12px; padding: 0.5rem 0.7rem; background: var(--paper); }
  .pr-kid .nm { font-family: var(--font-ui); font-weight: 700; }
  .pr-kid.me .nm::after { content: ' (you)'; font-family: sans-serif; font-weight:600; font-size:0.7rem; color: var(--ink-soft); }
  .pr-kid .kbar { height: 6px; background: var(--paper-deep); border-radius: 3px; flex: 1; overflow: hidden; max-width: 110px; }
  .pr-kid .kbar span { display: block; height: 100%; background: var(--accent); }
  .pr-kid .mini { font-size: 0.76rem; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }

  .clue-btn {
    margin-top: 0.6rem; padding: 0.4rem 0.9rem; border: 2px solid var(--gold);
    border-radius: 999px; background: #fdf3d8; color: var(--ink); cursor: pointer;
    font-family:  sans-serif; font-weight: 700; font-size: 0.85rem;
    -webkit-tap-highlight-color: transparent;
  }
  .clue-btn:active { transform: translateY(1px); }
  .clue-text {
    margin: 0.5rem auto 0; max-width: 22rem; background: #fdf3d8;
    border-radius: 10px; padding: 0.5rem 0.8rem; font-size: 0.9rem;
    color: var(--ink); line-height: 1.4;
  }

  .sound-btn {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.85rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 2px 2px 0 var(--ink);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }

  .sound-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
  }

  .sound-btn.selected {
    background: var(--ink);
    color: var(--paper);
  }

  .sound-btn .glyph {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    min-width: 2.5rem;
    text-align: center;
  }

  .sound-btn.selected .glyph {
    background: var(--gold);
    color: var(--ink);
  }

  .sound-btn .info {
    flex: 1;
    min-width: 0;
  }

  .sound-btn .name {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    display: block;
  }

  .sound-btn .desc {
    font-family:  sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.7;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 0.15rem;
    display: block;
  }

  .sound-btn.everything .glyph {
    background: var(--gold);
    color: var(--ink);
    font-style: italic;
    font-size: 1.1rem;
  }

  .start-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--ink);
    color: var(--paper);
    border: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px var(--shadow);
  }

  .start-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(42, 42, 42, 0.2);
  }

  .start-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .start-btn svg {
    width: 1.1em;
    height: 1.1em;
  }

  .home-decoration {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
  }

  .deco-1 { top: 8%; left: 4%; transform: rotate(-12deg); }
  .deco-2 { top: 14%; right: 5%; transform: rotate(8deg); }
  .deco-3 { bottom: 12%; left: 6%; transform: rotate(15deg); }
  .deco-4 { bottom: 16%; right: 4%; transform: rotate(-8deg); }

  @media (max-width: 700px) {
    .home-decoration { display: none; }
  }

  .deco-card {
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 1.4rem;
    font-weight: 500;
    box-shadow: 2px 2px 0 var(--ink);
  }

  /* ============ CARD SCREEN ============ */
  #cards {
    padding: 1.25rem;
    overflow: hidden;
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
  }

  .back-btn {
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.15s;
  }

  .back-btn:hover { background: var(--ink); color: var(--paper); }
  .back-btn.confirming { background: var(--accent); color: var(--paper); border-color: var(--accent); }

  .progress-info {
    flex: 1;
    text-align: center;
  }

  .round-label {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-bottom: 0.25rem;
  }

  .progress-track {
    height: 6px;
    background: var(--paper-deep);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 300px;
  }

  .progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .progress-count {
    font-family:  sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-top: 0.4rem;
  }

  .card-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 1rem 0;
  }

  .card {
    position: absolute;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 1 / 1.05;
    max-height: 100%;
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  }

  .card.outgoing {
    transform: translateX(-120%) rotate(-8deg);
    opacity: 0;
    pointer-events: none;
  }

  .card.incoming {
    transform: translateX(120%) rotate(6deg);
    opacity: 0;
  }

  .card-tag {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--paper-deep);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
  }

  .card-instruction {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
    text-align: center;
    max-width: 90%;
  }

  /* The big word/sentence - Victorian-style handwriting */
  .card-content {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    color: var(--ink);
    max-width: 100%;
  }

  .card-content.word {
    font-size: clamp(3rem, 12vw, 6rem);
    letter-spacing: 0.01em;
  }

  .card-content.sentence {
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
    font-weight: 500;
    max-width: 95%;
    line-height: 1.35;
    word-spacing: 0.35em;
  }

  .card-content.sound {
    font-size: clamp(4.5rem, 18vw, 9rem);
    color: var(--accent);
    font-weight: 600;
  }

  .card-content.tricky {
    color: var(--accent);
  }

  .card-sound-emoji {
    font-size: clamp(2.8rem, 11vw, 4.5rem);
    margin-top: 0.6rem;
    line-height: 1;
  }

  .card-sound-example {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--ink-soft);
    opacity: 0.7;
    margin-top: 1.5rem;
  }

  .audio-btn {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2.5px solid var(--ink);
    background: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 3px 3px 0 var(--ink);
    z-index: 5;
  }

  .audio-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
  .audio-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

  .audio-btn svg { width: 28px; height: 28px; color: var(--ink); }

  .audio-btn.playing {
    background: var(--teal);
    animation: pulse 1.2s ease-in-out infinite;
  }
  .audio-btn.playing svg { color: var(--paper); }

  @keyframes pulse {
    0%, 100% { box-shadow: 3px 3px 0 var(--ink); }
    50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 6px rgba(58, 125, 122, 0.2); }
  }

  .card-content mark {
    background: none;
    color: var(--accent);
    font-style: normal;
  }

  .tap-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-soft);
    opacity: 0.6;
  }

  .card.quiz-card::after {
    content: 'Press 1 – 4 to answer';
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family:  sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    opacity: 0.3;
    pointer-events: none;
  }


  /* ============ DONE SCREEN ============ */
  #done {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .done-inner {
    max-width: 480px;
  }

  .star {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: spin 0.8s ease;
  }

  @keyframes spin {
    from { transform: rotate(-180deg) scale(0.3); opacity: 0; }
    to { transform: rotate(0) scale(1); opacity: 1; }
  }

  .done-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    line-height: 1.05;
    margin-bottom: 1rem;
  }

  .done-stats {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
  }

  .done-stat-grid {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .done-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--paper-deep);
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-family:  sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
  }

  .done-stat-chip.chip-perfect {
    background: #d1fae5;
    border-color: #16a34a;
    color: #14532d;
  }

  .done-stat-chip.chip-star {
    background: #fef3c7;
    border-color: var(--gold);
    color: #713f12;
  }

  .done-stat-chip.chip-hard {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }

  .done-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Up next panel on done screen */
  .done-next {
    background: var(--mint);
    border: 2px solid var(--teal);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    text-align: left;
  }
  .done-next-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.3rem;
  }
  .done-next-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 0.55rem;
  }
  .done-next-sounds {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.6rem;
  }
  .done-next-btn {
    background: var(--teal);
    color: var(--paper);
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s;
  }
  .done-next-btn:hover { opacity: 0.85; }

  /* Word reading card */
  .wordread-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin: 0.85rem 0 1rem;
  }
  .wordread-word {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    transition: all 0.12s;
    text-align: center;
  }
  .wordread-word:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
  .wordread-word.word-spoken { background: var(--gold); border-color: var(--gold); color: #fff; }
  .wordread-word mark { background: none; color: var(--accent); font-weight: 700; font-style: normal; }
  .wordread-word.word-spoken mark { color: #fff; }

  /* Lock progress badge on tile */
  .tile-lock {
    font-family:  sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .tile-lock-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--paper-deep);
    flex: 1;
    overflow: hidden;
  }
  .tile-lock-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
  }
  .set-btn.selected .tile-lock { color: rgba(255,255,255,0.8); }
  .set-btn.selected .tile-lock-bar { background: rgba(255,255,255,0.3); }
  .set-btn.selected .tile-lock-fill { background: #fff; }
  .set-btn.tile-gold .tile-lock { display: none; }

  /* Sound done state in drawer */
  .sound-btn.sound-done { border-color: #16a34a; background: #f0fdf4; }
  .sound-btn.sound-done .glyph { background: #dcfce7; color: #16a34a; }
  .sound-btn.sound-done .name::after { content: ' ✓'; color: #16a34a; font-size: 0.85em; }

  /* Locked buttons in drawer */
  .sound-btn.sound-locked, .fluency-drawer-btn.fluency-locked {
    opacity: 0.45; cursor: not-allowed; pointer-events: none;
  }

  /* Gold tile - all sounds + review + fluency complete */
  .set-btn.tile-gold {
    background: var(--gold);
    border-color: #b8912e;
    box-shadow: 3px 3px 0 #8a6b1e;
  }
  .set-btn.tile-gold .set-btn-n { color: #fff; }
  .set-btn.tile-gold .num { color: rgba(255,255,255,0.85); }
  .set-btn.tile-gold .focus { color: #fff; }
  .set-btn.tile-gold .tile-dot-lbl { color: rgba(255,255,255,0.8); }
  .set-btn.tile-gold .rtd, .set-btn.tile-gold .ftd { border-color: rgba(255,255,255,0.55); }
  .set-btn.tile-gold .rtd.done, .set-btn.tile-gold .ftd.done { background: #fff; border-color: #fff; }
  .set-btn.tile-gold:hover { box-shadow: 4px 4px 0 #8a6b1e; }

  /* Progress dot rows on set tile */
  .tile-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0.3rem;
  }
  .tile-dot-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .tile-dot-lbl {
    font-family:  sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;
    width: 1rem;
  }
  .ftd, .rtd {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: transparent;
    transition: background 0.2s;
  }
  .ftd { border-color: var(--teal); }
  .ftd.done { background: var(--teal); }
  .rtd { border-color: var(--gold); }
  .rtd.done { background: var(--gold); }
  .set-btn.selected .ftd { border-color: rgba(255,255,255,0.6); }
  .set-btn.selected .ftd.done { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); }
  .set-btn.selected .rtd { border-color: rgba(255,255,255,0.6); }
  .set-btn.selected .rtd.done { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); }
  .set-btn.selected .tile-dot-lbl { opacity: 0.7; }

  /* Fluency level done mark in level picker */
  .fl-done { display: block; font-size: 0.7rem; color: #16a34a; margin-top: 0.15rem; font-family:  sans-serif; font-weight: 700; }

  .secondary-btn {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .secondary-btn:hover { background: var(--ink); color: var(--paper); }

  /* ============ STRAND TABS ============ */
  /* Sits above the book tabs and reads as the level above them: text with an
     underline, not another pill, so the two rows are never confused. */
  .strand-tabs {
    display: flex;
    gap: clamp(0.7rem, 3.5vw, 1.6rem);
    width: 100%;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--paper-deep);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .strand-tab {
    position: relative;
    background: none;
    border: none;
    padding: 0.3rem 0.1rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    color: var(--ink-soft);
    opacity: 0.55;
    transition: opacity 0.18s ease, color 0.18s ease;
  }

  .strand-tab:hover:not(.empty):not(.selected) { opacity: 0.85; }

  .strand-tab.selected {
    opacity: 1;
    color: var(--ink);
  }

  .strand-tab.selected::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.5rem;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
  }

  /* A strand with no books yet - visible so the shape is legible, but dead. */
  .strand-tab.empty { opacity: 0.28; cursor: default; }

  @media (prefers-reduced-motion: reduce) {
    .strand-tab { transition: none; }
  }

  /* ============ BOOK TABS ============ */
  .book-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 2rem;
    background: var(--paper-deep);
    padding: 0.3rem;
    border-radius: 14px;
    border: 2px solid var(--ink);
    width: 100%;
  }

  .book-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.65rem 0.5rem;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(0.78rem, 2.2vw, 0.95rem);
    color: var(--ink-soft);
    transition: all 0.15s;
    line-height: 1.2;
  }

  .book-tab.selected {
    background: var(--ink);
    color: var(--paper);
  }

  .book-tab:hover:not(.selected) {
    background: rgba(42,42,42,0.07);
  }

  .book-tab-level {
    display: block;
    font-family:  sans-serif;
    font-weight: 600;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    opacity: 0.5;
    margin-top: 0.1rem;
    text-transform: none;
  }

  .home-hint {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
    opacity: 0.45;
    text-align: center;
    padding: 2.5rem 0 1rem;
  }

  /* ============ REVEAL BUTTON ============ */
  .reveal-btn {
    background: var(--gold);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    padding: 1.25rem 2.5rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  .reveal-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ink);
  }

  .reveal-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ink);
  }

  @keyframes revealPop {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
  }

  .card-content.revealed-pop {
    animation: revealPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .sound-hint-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }

  .reveal-btn-sm {
    font-size: 0.95rem;
    padding: 0.7rem 1.5rem;
  }

  /* ============ CHOICE CARD ============ */
  .choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 440px;
  }

  .choice-btn {
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    padding: 1.1rem 0.5rem;
    cursor: pointer;
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 500;
    font-size: clamp(1.4rem, 5vw, 2rem);
    text-align: center;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
    line-height: 1.2;
  }

  .choice-btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
  }

  .choice-btn.wrong {
    animation: choiceShake 0.45s ease;
    background: #fde8e8;
    border-color: var(--accent);
  }

  .choice-btn.correct {
    background: #d4f0d4;
    border-color: #3a7d3a;
    box-shadow: 3px 3px 0 #3a7d3a;
    color: #1a4a1a;
  }

  .choice-btn mark {
    background: none;
    color: var(--accent);
  }

  .choice-sound {
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
  }

  /* Sound display inside the choice card - smaller than the full sound card */
  .choice-sound-display {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 600;
    font-size: clamp(2.8rem, 11vw, 5rem);
    color: var(--accent);
    line-height: 1;
  }

  /* ── Grapheme-identify card ── */
  .grapheme-word {
    font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
    margin-bottom: 0.5rem;
  }

  .grapheme-grid {
    gap: 0.6rem;
  }

  .grapheme-btn {
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    padding: 0.9rem 0.4rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 5vw, 2rem);
    color: var(--accent);
    text-align: center;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
  }

  .grapheme-btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
  }

  .grapheme-btn.wrong {
    animation: choiceShake 0.45s ease;
    background: #fde8e8;
    border-color: var(--accent);
  }

  .grapheme-btn.correct {
    background: #d4f0d4;
    border-color: #3a7d3a;
    box-shadow: 3px 3px 0 #3a7d3a;
    color: #1a4a1a;
  }

  @keyframes choiceShake {
    0%, 100% { transform: translateX(0); }
    15%  { transform: translateX(-9px); }
    35%  { transform: translateX(9px); }
    55%  { transform: translateX(-6px); }
    75%  { transform: translateX(6px); }
  }

  /* ── Add to mix button ──────────────────────────── */
  .mix-add-btn {
    background: transparent;
    border: 2px solid var(--teal);
    color: var(--teal);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s;
  }
  .mix-add-btn:hover:not(:disabled) {
    background: var(--teal);
    color: var(--paper);
  }
  .mix-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

  /* ── Pairing banner ────────────────────────────── */
  .pairing-banner {
    width: 100%;
    background: var(--mint);
    border: 2.5px solid var(--teal);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    box-shadow: 3px 3px 0 var(--teal);
    margin-bottom: 1.25rem;
    animation: fadeIn 0.3s ease;
  }

  .pairing-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .pairing-banner-label {
    font-family:  sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal);
    white-space: nowrap;
  }

  .pairing-banner-sound {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
  }

  .pairing-banner-hint {
    flex: 1;
    font-family:  sans-serif;
    font-size: 0.85rem;
    color: var(--teal);
    font-weight: 700;
    white-space: nowrap;
  }

  .pairing-banner-cancel {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .pairing-banner-cancel:hover { background: rgba(0,0,0,0.06); }

  /* ── Activity selection screen ──────────────────── */
  #activity {
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding-top: 2rem;
  }

  .activity-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin: 0.75rem 0 1.5rem;
    line-height: 1.1;
  }

  .activity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.25rem;
  }

  .activity-tile {
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    padding: 1.1rem 0.6rem;
    cursor: pointer;
    text-align: center;
    box-shadow: 3px 3px 0 var(--ink);
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .activity-tile:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }

  .activity-tile.selected {
    background: var(--ink);
    color: var(--paper);
  }

  .activity-tile-icon { font-size: 1.9rem; line-height: 1; }

  .activity-tile-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: clamp(0.78rem, 2.4vw, 0.98rem);
    line-height: 1.2;
  }

  .activity-tile-desc {
    font-family:  sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.65;
  }

  /* Preview panel */
  .activity-preview-panel {
    width: 100%;
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    padding: 1.1rem 1rem;
    box-shadow: 3px 3px 0 var(--ink);
    animation: fadeIn 0.3s ease;
    margin-bottom: 1.25rem;
    text-align: left;
  }

  .preview-label {
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.75rem;
  }

  .preview-card-mock {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.85rem 0.85rem 0.75rem;
    box-shadow: 3px 3px 0 var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
  }

  .preview-tag-mock {
    font-family:  sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--paper-deep);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    align-self: flex-start;
  }

  .preview-instruction-mock {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-soft);
    text-align: center;
  }

  .preview-sound-mock {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 2.2rem;
    color: var(--accent);
    line-height: 1;
  }

  .preview-word-mock {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 2rem;
    line-height: 1;
  }

  .preview-reveal-mock {
    background: var(--gold);
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.8rem;
    box-shadow: 2px 2px 0 var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .preview-choice-grid-mock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    width: 100%;
  }

  .preview-choice-btn-mock {
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    padding: 0.45rem 0.3rem;
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 1rem;
    text-align: center;
    box-shadow: 2px 2px 0 var(--ink);
  }

  .preview-choice-btn-mock.correct-mock {
    background: #d4f0d4;
    border-color: #3a7d3a;
    box-shadow: 2px 2px 0 #3a7d3a;
  }

  /* ============ WORD CONSTRUCTION CARD ============ */
  .wordconst-instruction {
    font-family:  sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.75rem;
  }
  .wordconst-target {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    min-height: 3rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--paper-deep);
    border-radius: 12px;
  }
  /* Per-character boxes in word construction */
  .wc-char {
    min-width: 1.8rem;
    height: 2.6rem;
    border-radius: 7px;
    border: 2px dashed var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0 0.2rem;
    background: var(--paper);
    transition: all 0.18s;
    color: var(--ink);
  }
  .wc-char.filled {
    border-style: solid;
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
    animation: pop 0.2s ease;
  }
  .wc-char.focus-filled { border-color: var(--accent); background: var(--accent); color: #fff; }
  .wc-char.all-done { border-color: #16a34a; background: #16a34a; color: #fff; }
  .wordconst-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  .wc-tile {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    transition: all 0.12s;
    min-width: 2.4rem;
    text-align: center;
  }
  /* Joined slot for digraphs/trigraphs - one dashed shell, letters divided
     by a faint dotted line so the chunk reads as a single sound */
  .wc-group {
    display: flex;
    border: 2px dashed var(--ink-soft);
    border-radius: 7px;
    background: var(--paper);
    overflow: hidden;
    transition: all 0.18s;
  }
  .wc-group .wc-char {
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .wc-group .wc-char + .wc-char { border-left: 2px dotted rgba(74, 74, 74, 0.3); }
  .wc-group .wc-char.filled { background: var(--ink); color: var(--paper); }
  .wc-group .wc-char.focus-filled { background: var(--accent); color: #fff; }
  .wc-group .wc-char.all-done { background: #16a34a; color: #fff; }
  .wc-group.filled { border-style: solid; border-color: var(--ink); }
  .wc-group.focus-filled { border-color: var(--accent); }
  .wc-group.all-done { border-style: solid; border-color: #16a34a; }
  /* Split digraph (a–e): the two linked boxes share an accent tint */
  .wc-char.wc-split:not(.filled):not(.focus-filled):not(.all-done) {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .wc-tile:hover:not(.used) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
  .wc-tile:active:not(.used) { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
  .wc-tile.used { opacity: 0.2; pointer-events: none; }
  .wc-tile.wrong-shake { animation: shake 0.35s ease; }
  .wc-tile.focus-tile { color: var(--accent); border-color: var(--accent); }

  .preview-activity-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .preview-activity-item {
    font-family:  sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    background: var(--paper-deep);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* ── Rhyme target word ───────────────── */
  .rhyme-target {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 500;
    font-size: clamp(2.8rem, 11vw, 5rem);
    color: var(--ink);
    line-height: 1;
  }

  /* ── Hard words on done screen ───────── */
  .hard-words-section {
    background: var(--paper-deep);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin: 0.75rem 0;
    text-align: left;
    width: 100%;
    max-width: 380px;
  }

  .hard-word-chip {
    display: inline-block;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    padding: 0.2rem 0.6rem;
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 1.1rem;
    margin: 0.2rem;
  }

  /* ── Sort card ────────────────────────── */
  .sort-cols {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 380px;
  }
  .sort-col-btn {
    flex: 1;
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    padding: 1.1rem 0.4rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 5.5vw, 2.2rem);
    color: var(--accent);
    text-align: center;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
  }
  .sort-col-btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
  .sort-col-btn.wrong  { animation: choiceShake 0.45s ease; background: #fde8e8; border-color: var(--accent); color: var(--accent); }
  .sort-col-btn.correct { background: #d4f0d4; border-color: #3a7d3a; box-shadow: 3px 3px 0 #3a7d3a; color: #1a4a1a; }

  /* ── Word complete card ───────────────── */
  .wc-word {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 500;
    font-size: clamp(2rem, 8vw, 3.5rem);
    text-align: center;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  .wc-blank {
    color: var(--ink-soft);
    border-bottom: 3px solid var(--ink);
    padding-bottom: 0.05em;
    letter-spacing: 0.2em;
  }

  .wc-word mark { background: none; color: var(--accent); font-style: normal; }

  /* ── Sentence fill card ───────────────── */
  .sf-sentence {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-weight: 500;
    font-size: clamp(1.3rem, 3.5vw, 1.9rem);
    text-align: center;
    line-height: 1.4;
    word-spacing: 0.15em;
    max-width: 95%;
  }
  .sf-blank {
    color: var(--ink-soft);
    border-bottom: 3px solid var(--ink);
    padding: 0 0.3em 0.05em;
    letter-spacing: 0.1em;
    display: inline-block;
    min-width: 2.5rem;
  }

  /* ============ SEARCH ============ */
  .search-bar-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .search-bar-wrap .search-bar { flex: 1; }
  .search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.65rem 1rem;
    box-shadow: 3px 3px 0 var(--ink);
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .search-bar:focus-within {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .search-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--ink-soft); }
  #searchInput {
    flex: 1;
    border: none;
    background: transparent;
    font-family:  sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    outline: none;
    min-width: 0;
  }
  #searchInput::placeholder { color: var(--ink-soft); font-weight: 400; opacity: 0.65; }
  .search-clear {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 1rem;
    padding: 0.1rem 0.25rem;
    line-height: 1;
    border-radius: 6px;
  }
  .search-clear:hover { background: var(--paper-deep); }
  .search-results {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .search-result-item {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    transition: all 0.15s;
    width: 100%;
  }
  .search-result-item:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
  .search-result-glyph {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    min-width: 2.2rem;
    text-align: center;
    line-height: 1.3;
    flex-shrink: 0;
  }
  .search-result-info { flex: 1; min-width: 0; }
  .search-result-book {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--mint);
    color: var(--teal);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    margin-bottom: 0.2rem;
  }
  .search-result-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    display: block;
  }
  .search-result-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.1rem; }
  .search-no-results {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    padding: 1.5rem 1rem;
    font-size: 0.9rem;
  }

  /* ============ FLUENCY ============ */
  #fluency {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
  }
  .fluency-inner {
    width: 100%;
    max-width: 640px;
  }
  .fluency-back {
    align-self: flex-start;
    margin-bottom: 1.2rem;
  }

  /* Level picker */
  .fluency-level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1.25rem 0 0.5rem;
  }
  .fluency-level-btn {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 1.1rem 0.5rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 700;
    text-align: center;
    box-shadow: 3px 3px 0 var(--ink);
    transition: all 0.15s;
  }
  .fluency-level-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
  .fluency-level-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
  .fluency-level-btn .fl-emoji { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: 0.3rem; }
  .fluency-level-btn .fl-name { display: block; font-size: 1.1rem; margin-bottom: 0.25rem; }
  .fluency-level-btn .fl-words { display: block; font-family:  sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
  .fluency-level-btn.easy  { border-color: #16a34a; }
  .fluency-level-btn.medium{ border-color: var(--gold); }
  .fluency-level-btn.hard  { border-color: var(--accent); }

  /* Stage header */
  .fluency-stage-label {
    font-family:  sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.35rem;
  }
  .fluency-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    line-height: 1.15;
    margin-bottom: 1rem;
  }

  /* Stage 1 - tricky word chips */
  .fluency-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
  }
  .fluency-chip {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    transition: all 0.12s;
  }
  .fluency-chip:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
  .fluency-chip.chip-gold { background: var(--gold); color: #fff; border-color: var(--gold); }

  /* Stage 2 - passage */
  .fluency-passage-card {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px;
    padding: 1.25rem 1.3rem;
    box-shadow: 3px 3px 0 var(--ink);
    margin-bottom: 1.25rem;
    line-height: 1.85;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
  }
  .fluency-word {
    cursor: pointer;
    border-radius: 3px;
    padding: 0.05em 0.05em;
    transition: background 0.1s;
  }
  .fluency-word:hover { background: var(--paper-deep); }
  .fluency-word.word-lit { background: var(--gold); color: #1a1a1a; border-radius: 4px; }
  .fluency-passage-card mark { background: none; color: var(--accent); font-weight: 700; font-style: normal; }
  .fluency-word.word-lit mark { color: inherit; }

  /* Vocab definitions */
  .vocab-word {
    cursor: pointer;
    border-bottom: 2px dotted var(--teal);
    position: relative;
  }
  .vocab-word.word-lit { border-bottom-color: transparent; }
  .vocab-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    font-family:  sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    max-width: 220px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  .vocab-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
  }

  /* Read button */
  .fluency-read-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.3rem;
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 1.25rem;
    transition: opacity 0.15s;
  }
  .fluency-read-btn:hover { opacity: 0.85; }
  .fluency-read-btn.reading { background: var(--accent); }

  /* Stage 3 - questions */
  .fluency-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    line-height: 1.4;
    margin-bottom: 1.1rem;
  }
  .fluency-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
  }
  .fluency-opt-btn {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    text-align: left;
    font-family:  sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    transition: all 0.12s;
  }
  .fluency-opt-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
  .fluency-opt-btn.correct { background: #d1fae5; border-color: #16a34a; box-shadow: 2px 2px 0 #16a34a; }
  .fluency-opt-btn.wrong   { background: #fee2e2; border-color: var(--accent); animation: shake 0.4s ease; }

  /* tf / yn two-button layout */
  .fluency-tf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .fluency-tf-btn {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 1.1rem;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
    transition: all 0.12s;
  }
  .fluency-tf-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
  .fluency-tf-btn.correct { background: #d1fae5; border-color: #16a34a; }
  .fluency-tf-btn.wrong   { background: #fee2e2; border-color: var(--accent); animation: shake 0.4s ease; }

  /* Check the passage toggle in question stage */
  .fluency-passage-toggle {
    width: 100%;
    background: var(--mint);
    border: 2px solid var(--teal);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    font-family:  sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--teal);
    cursor: pointer;
    text-align: center;
    margin-bottom: 0.75rem;
    transition: all 0.15s;
    box-shadow: 2px 2px 0 var(--teal);
  }
  .fluency-passage-toggle:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--teal); }
  .fluency-passage-toggle.peek-open {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--paper);
    box-shadow: 2px 2px 0 #2a5d5a;
  }
  .fluency-passage-peek {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    box-shadow: 2px 2px 0 var(--ink);
    margin-bottom: 1rem;
    max-height: 180px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 0.9rem;
    -webkit-overflow-scrolling: touch;
  }
  .fluency-passage-peek .fluency-word { font-size: 0.9rem; }
  .fluency-passage-peek mark { background: none; color: var(--accent); font-weight: 700; font-style: normal; }

  /* Progress dots */
  .fluency-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .fp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 2px solid var(--ink);
    transition: background 0.2s;
  }
  .fp-dot.done { background: #16a34a; border-color: #16a34a; }
  .fp-dot.active { background: var(--accent); border-color: var(--accent); }

  /* Done screen */
  .fluency-done-icon { font-size: 3rem; margin-bottom: 0.75rem; }
  .fluency-done-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 5vw, 2rem);
    color: var(--accent);
    margin-bottom: 0.5rem;
  }
  .fluency-done-sub {
    font-size: 1rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
  }

  /* Fluency drawer button */
  .fluency-drawer-btn {
    background: var(--paper);
    border: 2px solid var(--teal);
    border-radius: 12px;
    padding: 0.65rem 1.1rem;
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--teal);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.15s;
    box-shadow: 2px 2px 0 var(--teal);
  }
  .fluency-drawer-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--teal); }
  .fluency-drawer-btn:disabled { opacity: 0.4; pointer-events: none; }

  /* ── Spelling Test home button ───────────────────────────────── */
  .spelling-test-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0 0.85rem;
    height: 100%;
    min-height: 2.9rem;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    font-family:  sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .spelling-test-btn:hover {
    color: var(--ink);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .spelling-test-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
  }

  /* ── Settings screen ─────────────────────────────────────────── */
  .settings-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1.5px solid var(--paper-deep);
  }
  .settings-row:last-child { border-bottom: none; }
  .settings-row-text { flex: 1; min-width: 0; }
  .settings-row-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    display: block;
  }
  .settings-row-desc {
    font-family:  sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
    display: block;
    margin-top: 0.1rem;
  }
  /* Toggle switch */
  .toggle-wrap {
    position: relative;
    width: 2.8rem;
    height: 1.6rem;
    flex-shrink: 0;
  }
  .toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
  .toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--paper-deep);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: background 0.2s;
  }
  .toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ink-soft);
    transition: transform 0.2s, background 0.2s;
  }
  .toggle-wrap input:checked + .toggle-track { background: var(--teal); border-color: var(--teal); }
  .toggle-wrap input:checked + .toggle-track::after { transform: translateX(1.2rem); background: white; }
  .toggle-wrap input:disabled + .toggle-track { opacity: 0.35; cursor: not-allowed; }

  /* ── Print word list button ───────────────────────────────────── */
  .print-word-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 1.5px solid var(--ink-soft);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-family:  sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin-top: 0.35rem;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .print-word-btn:hover { color: var(--ink); border-color: var(--ink); }

  /* ── Spelling Test screen ─────────────────────────────────────── */
  .st-set-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
    margin-bottom: 1rem;
  }
  .st-set-tile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    font-family:  sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
    transition: all 0.12s;
    box-shadow: 2px 2px 0 var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .st-set-tile.selected { background: var(--ink); color: var(--paper); }
  .st-set-tile .st-check {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
    line-height: 1;
  }
  .st-set-tile.selected .st-check::after { content: '✓'; }
  .st-word-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.25rem;
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    margin-bottom: 1rem;
  }
  .st-word-reveal {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 2.4rem;
    color: var(--accent);
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    text-align: center;
  }
  .st-word-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 1.5rem;
    margin: 0.75rem 0 1.25rem;
  }
  .st-word-list li {
    font-family: 'Edu VIC WA NT Hand', cursive;
    font-size: 1.35rem;
    color: var(--ink);
    padding: 0.25rem 0;
    border-bottom: 1.5px dashed var(--paper-deep);
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
  }
  .st-num {
    font-family:  sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--ink-soft);
    min-width: 1.2rem;
  }
  /* ── Phoneme Count card ───────────────────────────────────────── */
  .phoneme-count-grid {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem;
  }
  .phoneme-count-btn {
    width: 3.4rem;
    height: 3.4rem;
    border: 2.5px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    font-family:  sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    transition: all 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .phoneme-count-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
  .phoneme-count-btn.correct { background: #4caf50; color: white; border-color: #4caf50; box-shadow: none; }
  .phoneme-count-btn.wrong { animation: shake 0.35s ease; background: var(--accent); color: white; border-color: var(--accent); }

  /* ── Profiles ───────────────────────────────────────────────── */
  .profile-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
  }
  .profile-pill {
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 0.35rem 0.85rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
  }
  .profile-pill.selected {
    background: var(--ink);
    color: var(--paper);
  }
  .profile-name-input {
    flex: 1;
    min-width: 0;
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink);
    border: none;
    border-bottom: 1.5px dashed var(--ink-soft);
    background: transparent;
    padding: 0.2rem 0;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
  }
  .profile-active-chip {
    font-family:  sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--paper);
    background: var(--ink);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    white-space: nowrap;
  }
  .profile-switch-btn {
    font-family:  sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--ink);
    background: none;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .profile-remove-btn {
    border: none;
    background: none;
    color: var(--ink-soft);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
  }
  .profile-add-btn {
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--paper);
    border: 2px dashed var(--ink-soft);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    width: 100%;
  }

  /* ── Continue where you left off ────────────────────────────── */
  .continue-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    width: 100%;
    text-align: left;
    padding: 0.8rem 2.8rem 0.8rem 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    font-family:  sans-serif;
    transition: all 0.1s;
  }
  .continue-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
  }
  .continue-label {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .continue-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .continue-sounds {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
  }
  .continue-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink);
  }

  /* ── Mode picker (home vs class) ────────────────────────────── */
  .mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--paper);
    background-image:
      radial-gradient(circle at 20% 30%, rgba(212, 167, 60, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(58, 125, 122, 0.05) 0%, transparent 40%);
    animation: fadeIn 0.4s ease;
    overflow-y: auto;
  }
  .mode-overlay-inner {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .mode-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    margin-bottom: 0.1rem;
  }
  .mode-sub {
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin-bottom: 0.6rem;
  }
  .mode-tile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-align: left;
    padding: 1rem 1.1rem;
    border: 2px solid var(--ink);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    font-family:  sans-serif;
    transition: all 0.1s;
  }
  .mode-tile:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
  }
  .mode-emoji { font-size: 1.9rem; line-height: 1; flex-shrink: 0; }
  .mode-info { display: flex; flex-direction: column; gap: 0.15rem; }
  .mode-name {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
  }
  .mode-desc {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    line-height: 1.4;
  }
  .mode-badge {
    align-self: flex-start;
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--ink-soft);
    background: none;
    border: 1.5px solid var(--ink-soft);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    margin-bottom: 0.9rem;
  }

  /* ── Typed spelling ─────────────────────────────────────────── */
  .st-type-input {
    width: 100%;
    max-width: 320px;
    text-align: center;
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
  }
  .st-type-input:focus { border-color: var(--accent); }
  .st-correct {
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--teal);
    padding: 0.35rem 0;
    text-align: center;
  }
  .st-diff {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--paper-deep);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    margin: 0.3rem 0;
  }
  .st-diff-row { display: flex; align-items: baseline; gap: 0.6rem; }
  .st-diff-lbl {
    font-family:  sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-soft);
    min-width: 4.4rem;
    text-align: right;
    flex-shrink: 0;
  }
  .st-diff-word {
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    word-break: break-all;
  }
  .st-ch-bad { color: var(--accent); text-decoration: line-through; }
  .st-ch-fix { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
  .st-retype-hint {
    font-family:  sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin: 0.25rem 0 0;
    text-align: center;
  }
  .st-mark-ok { color: var(--teal); font-weight: 800; }
  .st-mark-no { color: var(--accent); font-weight: 800; }
  .st-feedback { width: 100%; }
  .practise-now-btn {
    display: block;
    margin-top: 0.65rem;
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--paper);
    background: var(--ink);
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    cursor: pointer;
  }

  /* ── Fluency reading timer ──────────────────────────────────── */
  .fluency-wpm {
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--mint);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  /* ── Parent tips ────────────────────────────────────────────── */
  .parent-tips {
    font-family:  sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft);
    background: var(--paper-deep);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .continue-today {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--teal);
  }

  /* ── Placement test ─────────────────────────────────────────── */
  .pl-shown {
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper-deep);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    text-align: center;
  }
  .pl-suggest {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
  }

  /* ── Sound it out ───────────────────────────────────────────── */
  .so-chunk { transition: color 0.15s; }
  .so-lit { color: var(--accent) !important; }
  .sound-out-btn {
    font-family:  sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    margin-top: 0.55rem;
  }
  .sound-out-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
  .wordread-row { display: inline-flex; align-items: stretch; gap: 0.3rem; }
  .wordread-so {
    border: 1.5px solid var(--ink-soft);
    background: var(--paper);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.4rem;
  }

  /* ── Sound hint toast ───────────────────────────────────────── */
  .sound-hint-toast {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(92vw, 430px);
    background: var(--ink);
    color: var(--paper);
    font-family:  sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.4;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    z-index: 999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: opacity 0.5s;
    cursor: pointer;
  }
  .sound-hint-toast.hide { opacity: 0; }

  /* ===== Overworld map (at-home mode) ===== */
  #ow-root { margin-top: 0.25rem; }
  .ow-banner { padding:0.4rem 0.9rem; color:#fff; text-align:center; font-family:var(--font-ui); font-weight:700; font-size:0.85rem; border-radius:10px; margin-bottom:0.5rem; border:2px solid var(--ink); }
  .ow-back { display:inline-flex; align-items:center; gap:0.3rem; font-family:var(--font-ui); font-weight:700; font-size:0.85rem; background:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:0.35rem 0.9rem; box-shadow:2px 2px 0 var(--ink); cursor:pointer; margin-bottom:0.6rem; }
  .ow-back:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
  .ow-canvas { position:relative; margin:0 auto; border-radius:16px; overflow:hidden; background:linear-gradient(160deg,#fbf2dd,#eef3df); }
  .ow-canvas.ow-zoom-in { animation: owZoomIn 0.45s cubic-bezier(.2,1.1,.4,1); transform-origin:50% 32%; }
  .ow-canvas.ow-zoom-out { animation: owZoomOut 0.4s cubic-bezier(.2,1.1,.4,1); transform-origin:50% 32%; }
  @keyframes owZoomIn { from{transform:scale(.62);opacity:0;} to{transform:scale(1);opacity:1;} }
  @keyframes owZoomOut { from{transform:scale(1.18);opacity:0;} to{transform:scale(1);opacity:1;} }
  .ow-canvas.ow-sub { box-shadow: inset 0 0 0 5px rgba(42,42,42,0.10), inset 0 0 55px rgba(42,42,42,0.16); }
  .ow-terrain { position:absolute; inset:0; pointer-events:none; }
  .ow-path { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .ow-pl { fill:none; stroke:#fffdf7; stroke-width:11; stroke-linecap:round; stroke-dasharray:12 11; }
  .ow-pl.under { stroke:var(--ink); stroke-width:22; opacity:0.28; stroke-dasharray:none; }
  .ow-pl.edge { stroke:var(--ink); stroke-width:16; opacity:0.9; stroke-dasharray:none; }
  .ow-node { position:absolute; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; border:2.5px solid var(--ink); background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; box-shadow:3px 3px 0 var(--ink); font-family:var(--font-ui); z-index:5; }
  .ow-node .n { font-weight:800; font-size:1.3rem; line-height:1; }
  .ow-node .lbl { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:5px; font-family:sans-serif; font-weight:800; font-size:0.56rem; color:var(--ink); background:var(--paper); padding:2px 6px; border-radius:7px; text-align:center; max-width:104px; line-height:1.1; box-shadow:1px 1px 0 rgba(42,42,42,0.2); }
  .ow-node .lbl i { display:block; font-style:normal; font-weight:600; font-size:0.9em; opacity:0.6; }
  .ow-node.done { background:var(--gold); }
  .ow-node.done .n::after { content:'★'; }
  .ow-node.current { background:var(--accent); color:var(--paper); animation:owBob 1.4s ease-in-out infinite; }
  .ow-node.locked { background:var(--paper-deep); color:var(--ink-soft); }
  .ow-node.future { background:#e9e2d1; border-style:dashed; opacity:0.85; }
  @keyframes owBob { 0%,100%{transform:translate(-50%,-55%);} 50%{transform:translate(-50%,-48%);} }
  .ow-avatar { position:absolute; transform:translate(-50%,-130%); font-size:1.9rem; z-index:8; pointer-events:none; filter:drop-shadow(2px 3px 0 rgba(42,42,42,0.25)); }
  .ow-puff { position:absolute; width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.85); transform:translate(-50%,-50%); pointer-events:none; z-index:7; animation:owPuff 0.6s ease-out forwards; }
  @keyframes owPuff { from{opacity:.8;transform:translate(-50%,-50%) scale(.4);} to{opacity:0;transform:translate(-50%,-50%) scale(1.7);} }
  .ow-ring { position:absolute; width:58px; height:58px; border-radius:50%; border:3px solid var(--accent); transform:translate(-50%,-50%); pointer-events:none; z-index:6; animation:owRing 0.6s ease-out forwards; }
  @keyframes owRing { from{opacity:.7;transform:translate(-50%,-50%) scale(.7);} to{opacity:0;transform:translate(-50%,-50%) scale(1.9);} }
  /* customise bar + shop */
  .ow-bar { display:flex; justify-content:flex-end; margin-bottom:0.5rem; }
  .ow-cust { font-family:sans-serif; font-weight:800; font-size:0.8rem; background:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:0.35rem 0.9rem; box-shadow:2px 2px 0 var(--ink); cursor:pointer; }
  .ow-cust:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
  .ow-shop-scrim { position:fixed; inset:0; background:rgba(42,42,42,0.45); display:flex; align-items:center; justify-content:center; z-index:5000; padding:1rem; }
  .ow-shop-card { width:100%; max-width:420px; max-height:84vh; overflow-y:auto; background:var(--paper); border:2.5px solid var(--ink); border-radius:20px; padding:1.1rem 1.1rem 1.3rem; box-shadow:6px 6px 0 var(--ink); }
  .ow-shop-h { font-family:var(--font-display); font-weight:800; font-size:1.4rem; margin:0 0 0.1rem; }
  .ow-shop-bal { font-family:var(--font-ui); font-style:italic; color:var(--ink-soft); margin-bottom:0.6rem; }
  .ow-shop-sect { font-family:sans-serif; font-weight:800; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin:0.9rem 0 0.5rem; }
  .ow-shop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; }
  .ow-item { border:2px solid var(--ink); border-radius:14px; background:var(--paper); padding:0.55rem 0.2rem 0.4rem; text-align:center; cursor:pointer; position:relative; box-shadow:2px 2px 0 var(--ink); }
  .ow-item .em { font-size:1.7rem; line-height:1; }
  .ow-item .pr { font-family:sans-serif; font-weight:800; font-size:0.62rem; color:#8a6a14; margin-top:0.2rem; }
  .ow-item .tn { font-size:0.55rem; font-weight:700; margin-top:0.1rem; }
  .ow-item.owned { background:var(--mint); }
  .ow-item.on { outline:3px solid var(--accent); outline-offset:1px; }
  .ow-item .tick { position:absolute; top:2px; right:4px; font-size:0.7rem; }
  .ow-shop-done { width:100%; margin-top:1rem; font-family:var(--font-ui); font-weight:600; font-size:1.05rem; padding:0.8rem; border-radius:999px; border:none; background:var(--ink); color:var(--paper); cursor:pointer; }
  .ow-bar { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
  .ow-stars { font-family:var(--font-ui); font-weight:700; font-size:0.9rem; color:#8a6a14; background:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:0.3rem 0.8rem; box-shadow:2px 2px 0 var(--ink); }
  .ow-node:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }
  .ow-confetti { position:fixed; top:-20px; width:9px; height:14px; border-radius:2px; z-index:6000; pointer-events:none; animation:owFall linear forwards; }
  @keyframes owFall { to { transform:translateY(110vh) rotate(600deg); opacity:0.85; } }
  .ow-cel { position:fixed; left:50%; top:36%; transform:translateX(-50%); z-index:6001; background:var(--ink); color:var(--paper); font-family:var(--font-ui); font-weight:800; font-size:1.2rem; text-align:center; padding:0.85rem 1.3rem; border-radius:16px; box-shadow:4px 4px 0 rgba(0,0,0,0.2); pointer-events:none; animation:owCelPop 1.9s ease forwards; }
  @keyframes owCelPop { 0%{opacity:0;transform:translateX(-50%) scale(0.6);} 12%{opacity:1;transform:translateX(-50%) scale(1);} 80%{opacity:1;} 100%{opacity:0;} }
  .ow-seg-wrap { display:flex; gap:4px; }
  .ow-seg { font-family:sans-serif; font-weight:800; font-size:0.8rem; border:2px solid var(--ink); background:var(--paper); border-radius:999px; padding:0.3rem 0.75rem; cursor:pointer; }
  .ow-seg.on { background:var(--ink); color:var(--paper); }
  body.ow-reduce .ow-node.current { animation:none !important; }
  body.ow-reduce .ow-canvas.ow-zoom-in, body.ow-reduce .ow-canvas.ow-zoom-out { animation:none !important; }
  .ow-badge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.55rem; }
  .ow-badge { border:2px solid var(--ink); border-radius:14px; background:var(--paper); padding:0.6rem 0.3rem; text-align:center; box-shadow:2px 2px 0 var(--ink); }
  .ow-badge.locked { opacity:0.4; filter:grayscale(1); }
  .ow-badge .be { font-size:1.9rem; line-height:1; }
  .ow-badge .bn { font-family:var(--font-ui); font-weight:700; font-size:0.72rem; margin-top:0.2rem; }
  .ow-badge .bd { font-size:0.6rem; color:var(--ink-soft); margin-top:0.15rem; line-height:1.15; }
  .ow-cust.on { background:var(--ink); color:var(--paper); }
  .ow-tray { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; background:var(--paper-deep); border:2px solid var(--ink); border-radius:12px; padding:0.4rem 0.6rem; margin-bottom:0.5rem; }
  .ow-tray-hint { font-family:sans-serif; font-weight:700; font-size:0.7rem; color:var(--ink-soft); flex:1; min-width:120px; }
  .ow-tray-items { display:flex; gap:0.3rem; flex-wrap:wrap; }
  .ow-tray-item { font-size:1.3rem; line-height:1; background:var(--paper); border:2px solid var(--ink); border-radius:10px; padding:0.15rem 0.35rem; cursor:pointer; }
  .ow-tray-item.on { outline:3px solid var(--accent); outline-offset:1px; }
  #ow-decor { position:absolute; inset:0; pointer-events:none; z-index:4; }
  .ow-deco { position:absolute; transform:translate(-50%,-90%); font-size:1.6rem; line-height:1; filter:drop-shadow(1px 2px 0 rgba(42,42,42,0.18)); }
  .ow-decorating .ow-deco { pointer-events:auto; cursor:pointer; }
  .ow-decorating .ow-node { pointer-events:none; }
  .ow-canvas.ow-decorating { cursor:copy; }

  /* ============ WORD CLASS CARD ============ */
  .wcl-sentence {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    line-height: 1.45;
    text-align: center;
    margin: 0.5rem 0 1.1rem;
    color: var(--ink);
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }
  .wcl-target {
    background: rgba(212, 167, 60, 0.28);
    color: inherit;
    border-radius: 4px;
    padding: 0.02em 0.22em;
    box-shadow: inset 0 -0.16em 0 rgba(212, 167, 60, 0.75);
  }
  .wcl-grid { grid-template-columns: repeat(2, 1fr); }
  .wcl-opt { text-transform: lowercase; }
  .wcl-feedback {
    margin-top: 0.9rem;
    min-height: 3.2rem;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .wcl-feedback.shown { opacity: 1; transform: translateY(0); }
  .wcl-feedback em { font-style: normal; font-weight: 700; color: var(--ink); }
  .wcl-yes { color: var(--teal); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) {
    .wcl-feedback { transition: none; }
  }

  /* ============ STRAND CARDS ============ */
  /* The top-level chooser. Big, coloured and child-sized: a card with an
     icon, a sentence and a progress bar reads at eight in a way a row of
     tabs does not. Each takes its own strand's colour. */
  .strand-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
    margin-bottom: 1.4rem;
  }
  @media (max-width: 520px) { .strand-cards { grid-template-columns: 1fr; } }

  .strand-card {
    --sc: var(--ink-faint);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    text-align: left;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 20px;
    padding: 1.15rem 1.2rem;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--sc);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    font-family: var(--font-ui);
    color: var(--ink);
  }
  .strand-card[data-strand="sound"]    { --sc: var(--s-sound); }
  .strand-card[data-strand="word"]     { --sc: var(--s-word); }
  .strand-card[data-strand="sentence"] { --sc: var(--s-sentence); }
  .strand-card[data-strand="text"]     { --sc: var(--s-text); }

  .strand-card:hover:not(.empty) { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--sc); }
  .strand-card.selected { background: var(--paper-deep); box-shadow: 2px 2px 0 var(--sc); transform: translate(2px, 2px); }
  .strand-card.empty { opacity: 0.4; cursor: default; box-shadow: 4px 4px 0 var(--rule); }

  .strand-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
  .strand-card-icon {
    width: 2.7rem; height: 2.7rem; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sc) 16%, #fff);
    color: var(--sc);
    flex-shrink: 0;
  }
  .strand-card-icon svg { width: 1.45rem; height: 1.45rem; }
  .strand-card-count { font-size: 0.78rem; color: var(--ink-faint); font-weight: 500; text-align: right; }
  .strand-card-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 4.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.1;
  }
  .strand-card-desc { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.4; }
  .strand-card-bar {
    display: block; height: 0.5rem; border-radius: 999px;
    background: var(--paper-deep); overflow: hidden; margin-top: 0.15rem;
  }
  .strand-card-bar > span { display: block; height: 100%; background: var(--sc); border-radius: 999px; }

  @media (prefers-reduced-motion: reduce) { .strand-card { transition: none; } }

  /* ============ WAYS TO EARN STARS ============ */
  .star-ways {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 18px;
    padding: 1rem 1.15rem;
    margin-top: 0.7rem;
    width: 100%;
  }
  .star-ways-head {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
  }
  .star-ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.4rem; }
  @media (max-width: 560px) { .star-ways-grid { grid-template-columns: 1fr; } }
  .star-way { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; }
  .star-way-text { flex-grow: 1; color: var(--ink-soft); }
  .star-way-n { font-weight: 700; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* ============ STRAND: OPENED ============ */
  /* Tapping a card grows it into this header. The card and the header share
     their anatomy - icon, name, description, count, progress bar - so the
     FLIP animation between them reads as one object opening, not two swapping. */
  .strand-cards.is-open { display: block; }

  .strand-open {
    --sc: var(--ink-faint);
    text-align: left;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 20px;
    padding: 1rem 1.2rem 1.15rem;
    box-shadow: 4px 4px 0 var(--sc);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transform-origin: top left;
  }
  .strand-open[data-strand="sound"]    { --sc: var(--s-sound); }
  .strand-open[data-strand="word"]     { --sc: var(--s-word); }
  .strand-open[data-strand="sentence"] { --sc: var(--s-sentence); }
  .strand-open[data-strand="text"]     { --sc: var(--s-text); }

  .strand-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0.15rem 0;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-faint);
    transition: color 0.15s ease;
  }
  .strand-back svg { width: 0.95rem; height: 0.95rem; }
  .strand-back:hover { color: var(--sc); }

  .strand-open-main { display: flex; align-items: center; gap: 0.9rem; }
  .strand-open-words { display: flex; flex-direction: column; gap: 0.15rem; flex-grow: 1; min-width: 0; }
  .strand-open .strand-card-count { flex-shrink: 0; }

  .strand-card,
  .strand-open { transform-origin: top left; }

  @media (prefers-reduced-motion: reduce) {
    .strand-back { transition: none; }
  }

  /* ============ HOME MASTHEAD ============ */
  .home-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
  }
  .home-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
  .home-logo { width: 2rem; height: 2rem; color: var(--s-sound); flex-shrink: 0; }
  .home-wordmark {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5.5vw, 1.95rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
  }
  .home-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

  .star-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }
  .star-pill svg { width: 1rem; height: 1rem; color: var(--gold); }

  /* ============ HOME SEARCH ============ */
  .search-bar {
    border-width: 2.5px;
    border-radius: 999px;
    padding: 0.85rem 1.15rem;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .search-bar input { font-size: 1.02rem; }
  .search-egs { display: flex; gap: 0.35rem; flex-shrink: 0; }
  @media (max-width: 560px) { .search-egs { display: none; } }
  .search-eg {
    border-radius: 7px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .search-eg.eg-sound { background: var(--accent-soft); color: #b8431f; }
  .search-eg.eg-word  { background: var(--gold-soft);   color: #a06d1d; }
  .search-eg.eg-text  { background: var(--teal-soft);   color: #26746d; }

  /* ============ KEEP GOING ============ */
  .continue-btn {
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 20px;
    padding: 1.15rem 1.35rem;
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
    align-items: center;
    cursor: pointer;
  }
  .continue-label {
    grid-column: 1;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a89d8c;
  }
  .continue-name {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
  }
  .continue-sounds, .continue-today { grid-column: 1; font-size: 0.85rem; color: #c9c0b1; }
  .continue-arrow {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 2.9rem; height: 2.9rem;
    padding: 0.8rem;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--s-sound);
    color: #fff;
    flex-shrink: 0;
  }

  /* ============ THE ASK ============ */
  .home-ask { display: flex; flex-direction: column; gap: 0.15rem; }
  .home-ask-sub { font-size: 0.88rem; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; text-transform: none; }

  /* ============ SHORTCUTS ============ */
  .home-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
    width: 100%;
  }
  @media (max-width: 640px) { .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .home-shortcut {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    text-align: left;
    transition: transform 0.13s ease, box-shadow 0.13s ease;
  }
  .home-shortcut svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
  .home-shortcut:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
  @media (prefers-reduced-motion: reduce) { .home-shortcut { transition: none; } }

  /* stars panel picks up the same footing as the shortcuts */
  .star-ways { margin-top: 1.4rem; border-width: 2.5px; border-radius: 20px; padding: 1.15rem 1.3rem; }
  .star-ways-head { font-size: 1.35rem; }

  /* the ask sits left, the settings gear right, both on the same baseline */
  #strandChooseRow { align-items: flex-start; }
  #strandChooseRow .home-ask { flex-grow: 1; min-width: 0; }
  .search-bar-wrap { flex-wrap: nowrap; }
  .search-bar { flex-grow: 1; min-width: 0; }

  /* icon per star row, tinted by the strand the reward comes from */
  .star-way-ico {
    width: 1.75rem; height: 1.75rem;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .star-way-ico svg { width: 0.95rem; height: 0.95rem; }
  .star-way-ico.tone-sound    { background: var(--accent-soft); color: var(--s-sound); }
  .star-way-ico.tone-word     { background: var(--gold-soft);   color: var(--s-word); }
  .star-way-ico.tone-sentence { background: var(--teal-soft);   color: var(--s-sentence); }
  .star-way-ico.tone-text     { background: var(--indigo-soft); color: var(--s-text); }
  .star-ways-grid { gap: 0.6rem 1.6rem; }
  .star-way { gap: 0.6rem; }

  /* The card went dark, so its text has to come with it. These need the
     same specificity as the original rules to win. */
  .continue-btn .continue-name  { color: var(--paper); }
  .continue-btn .continue-label { color: #a89d8c; }
  .continue-btn .continue-sounds,
  .continue-btn .continue-today { color: #c9c0b1; }

  /* ============ LIBRARY ============ */
  .lib-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.2rem; }
  .lib-chip {
    background: #fff;
    border: 2px solid var(--rule);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--ink-soft);
    transition: border-color 0.14s ease, color 0.14s ease;
  }
  .lib-chip:hover { border-color: var(--ink-faint); }
  .lib-chip.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

  .lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  @media (max-width: 700px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 420px) { .lib-grid { grid-template-columns: 1fr; } }

  .lib-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    font-family: var(--font-ui);
    color: var(--ink);
    padding: 0;
  }
  .lib-card:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--s-text); }

  /* No illustrations yet - a flat colour block per kind reads better than
     a stock image would, and costs nothing to ship. */
  .lib-cover {
    position: relative;
    display: block;
    height: 5.5rem;
    background: var(--s-text);
  }
  /* A cover colour per text type - the same six a child is learning to name. */
  .lib-card[data-type="narrative"]   .lib-cover { background: #7a4b63; }
  .lib-card[data-type="recount"]     .lib-cover { background: #8a6d2f; }
  .lib-card[data-type="report"]      .lib-cover { background: #3d5a80; }
  .lib-card[data-type="procedure"]   .lib-cover { background: #2f6b4f; }
  .lib-card[data-type="persuasive"]  .lib-cover { background: #a04a30; }
  .lib-card[data-type="explanation"] .lib-cover { background: #4a4470; }
  .lib-kind {
    position: absolute; top: 0.6rem; left: 0.7rem;
    background: var(--paper);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .lib-read {
    position: absolute; top: 0.55rem; right: 0.6rem;
    width: 1.55rem; height: 1.55rem;
    border-radius: 999px;
    background: var(--s-sentence);
    border: 2px solid var(--paper);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .lib-read svg { width: 0.8rem; height: 0.8rem; }

  .lib-title {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.85rem 0.9rem 0.35rem;
  }
  .lib-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.9rem 0.9rem;
    font-size: 0.82rem;
    color: var(--ink-faint);
  }
  .lib-dots { display: flex; gap: 0.2rem; }
  .lib-dot { width: 0.48rem; height: 0.48rem; border-radius: 999px; background: var(--rule); }
  .lib-dot.on { background: var(--s-sentence); }

  .lib-note { font-size: 0.85rem; color: var(--ink-faint); margin: 1.1rem 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .lib-card, .lib-chip { transition: none; }
  }

  /* ============ SIGN IN ============ */
  .sign-in-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.38rem 0.85rem 0.38rem 0.6rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
  }
  .sign-in-btn svg { width: 1.05rem; height: 1.05rem; }
  .sign-in-btn.in { padding-left: 0.38rem; }

  .sign-in-avatar {
    width: 1.7rem; height: 1.7rem;
    border-radius: 999px;
    background: var(--s-sentence);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  .sign-in-avatar.plus { background: var(--paper-deep); color: var(--ink-soft); }

  .sheet-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(34, 32, 28, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1.2rem;
  }
  .sheet-card {
    background: var(--paper);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 1.5rem 1.5rem 1.3rem;
    width: min(26rem, 100%);
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .sheet-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 0.35rem; }
  .sheet-sub { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1.1rem; line-height: 1.5; }
  .sheet-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
  .sheet-name {
    display: flex; align-items: center; gap: 0.7rem;
    background: #fff;
    border: 2px solid var(--rule);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
  }
  .sheet-name:hover { border-color: var(--ink-faint); }
  .sheet-name.selected { border-color: var(--s-sentence); background: var(--teal-soft); }
  .sheet-name.add { font-weight: 500; color: var(--ink-soft); }
  .sheet-out, .sheet-done {
    width: 100%;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
  }
  .sheet-out { background: none; border: 2px solid var(--rule); color: var(--ink-soft); margin-bottom: 0.5rem; }
  .sheet-done { background: var(--ink); border: 2px solid var(--ink); color: var(--paper); }

  .sheet-newname { display: flex; gap: 0.5rem; }
  .sheet-newname input {
    flex-grow: 1;
    min-width: 0;
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 0.6rem 0.85rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    background: #fff;
    color: var(--ink);
  }
  .sheet-newname input:focus { outline: 2px solid var(--s-sentence); outline-offset: 1px; }
  .sheet-go {
    background: var(--s-sentence);
    border: 2px solid var(--s-sentence);
    color: #fff;
    border-radius: 14px;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
  }

  /* Class mode sits apart from the names: it is a device setting, not a person. */
  .sheet-class {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    background: #fff;
    border: 2px solid var(--rule);
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
    color: var(--ink);
  }
  .sheet-class:hover { border-color: var(--ink-faint); }
  .sheet-class.selected { border-color: var(--s-word); background: var(--gold-soft); }
  .sheet-class-ico {
    width: 1.7rem; height: 1.7rem;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--s-word);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .sheet-class.selected .sheet-class-ico { background: #fff; }
  .sheet-class-ico svg { width: 1rem; height: 1rem; }
  .sheet-class-words { display: flex; flex-direction: column; gap: 0.1rem; }
  .sheet-class-name { font-weight: 700; font-size: 1rem; }
  .sheet-class-desc { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; }



  /* Badge carries state and action in one pill, split by a hairline. */
  .sign-in-btn { padding: 0.38rem 0.9rem 0.38rem 0.7rem; gap: 0.5rem; }
  .sign-in-btn.in { padding-left: 0.4rem; }
  .sign-in-state { font-weight: 700; white-space: nowrap; }
  .sign-in-sep {
    width: 2px;
    align-self: stretch;
    margin: 0.1rem 0;
    border-radius: 1px;
    background: var(--rule);
    flex-shrink: 0;
  }
  .sign-in-action { color: var(--s-sentence); font-weight: 700; white-space: nowrap; }
  .sign-in-btn:hover .sign-in-action { color: var(--ink); }

  /* ============ READER ============ */
  #reader { padding: 0; }
  .rd-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem clamp(1rem, 4vw, 2.2rem);
    border-bottom: 2px solid var(--rule);
    background: var(--paper);
    flex-shrink: 0;
  }
  .rd-back, .rd-size {
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink);
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
  }
  .rd-back svg { width: 1.05rem; height: 1.05rem; }
  .rd-bar-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 3.4vw, 1.35rem);
    font-weight: 700;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rd-listen {
    display: flex; align-items: center; gap: 0.45rem;
    background: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    color: var(--paper);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .rd-listen svg { width: 1rem; height: 1rem; }
  @media (max-width: 560px) { .rd-listen span { display: none; } }

  .rd-scroll { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rd-inner { max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 2.6rem) clamp(1rem, 4vw, 2.2rem) 2.5rem; }

  .rd-meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
  .rd-kind {
    border-radius: 7px;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--indigo-soft);
    color: var(--s-text);
  }
  .rd-kind.t-narrative   { background: #f0e2ea; color: #7a4b63; }
  .rd-kind.t-recount     { background: var(--gold-soft); color: #8a6d2f; }
  .rd-kind.t-report      { background: var(--indigo-soft); color: #3d5a80; }
  .rd-kind.t-procedure   { background: var(--teal-soft); color: #2f6b4f; }
  .rd-kind.t-persuasive  { background: var(--accent-soft); color: #a04a30; }
  .rd-kind.t-explanation { background: #e6e4f2; color: #4a4470; }
  .rd-mins { font-size: 0.85rem; color: var(--ink-faint); }

  /* Reading type: generous line height, a measure that does not run long,
     and three sizes because eight-year-olds differ a lot. */
  .rd-body { font-size: 1.2rem; line-height: 1.75; color: var(--ink); }
  .rd-body.rd-lg { font-size: 1.4rem; line-height: 1.72; }
  .rd-body.rd-xl { font-size: 1.65rem; line-height: 1.7; }
  .rd-body p { margin: 0 0 1.3rem; }
  .rd-body p:last-child { margin-bottom: 0; }

  .rd-word {
    background: var(--gold-soft);
    border: none;
    border-bottom: 2.5px dotted var(--s-word);
    border-radius: 4px;
    padding: 0 0.12em;
    cursor: pointer;
    font: inherit;
    color: inherit;
  }
  .rd-word:hover { background: #f2dfba; }

  .rd-vocab {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    margin-top: 1.6rem;
    box-shadow: 4px 4px 0 var(--s-word);
  }
  .rd-vocab-ico {
    width: 2.1rem; height: 2.1rem;
    border-radius: 10px;
    background: var(--gold-soft);
    color: var(--s-word);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .rd-vocab-ico svg { width: 1.15rem; height: 1.15rem; }
  .rd-vocab-words { display: flex; flex-direction: column; gap: 0.2rem; flex-grow: 1; }
  .rd-vocab-word { font-weight: 700; font-size: 1.05rem; }
  .rd-vocab-def { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
  .rd-vocab-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.4rem; line-height: 1; color: var(--ink-faint); padding: 0 0.2rem;
  }

  .rd-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--rule);
  }
  .rd-foot-note { font-size: 0.88rem; color: var(--ink-faint); }
  .rd-done {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--s-text);
    border: 2px solid var(--s-text);
    border-radius: 999px;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
  }
  .rd-done svg { width: 1.05rem; height: 1.05rem; }

  /* ============ HUNTS ============ */
  .hn-step { font-size: 0.85rem; color: var(--ink-faint); font-weight: 600; white-space: nowrap; flex-shrink: 0; }

  .hn-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
  .hn-chip {
    --hc: var(--ink-faint);
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: 2px solid var(--rule);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
    background: #fff;
  }
  .hn-chip svg { width: 0.8rem; height: 0.8rem; }
  .hn-chip.s-sound    { --hc: var(--s-sound); }
  .hn-chip.s-word     { --hc: var(--s-word); }
  .hn-chip.s-sentence { --hc: var(--s-sentence); }
  .hn-chip.current { background: var(--hc); border-color: var(--hc); color: #fff; font-weight: 700; }
  .hn-chip.done { border-color: var(--hc); color: var(--hc); }

  .hn-prompt-card {
    --hc: var(--ink);
    display: flex; align-items: center; gap: 1.1rem;
    background: var(--hc);
    color: #fff;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
  }
  .hn-prompt-card.s-sound    { --hc: var(--s-sound); }
  .hn-prompt-card.s-word     { --hc: var(--s-word); }
  .hn-prompt-card.s-sentence { --hc: var(--s-sentence); }
  .hn-prompt-words { flex-grow: 1; min-width: 0; }
  .hn-prompt-kind {
    font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
    opacity: 0.8; margin-bottom: 0.25rem;
  }
  .hn-prompt-text { font-family: var(--font-display); font-size: clamp(1.15rem, 3.6vw, 1.5rem); font-weight: 700; line-height: 1.2; }
  .hn-prompt-hint { font-size: 0.83rem; opacity: 0.85; margin-top: 0.3rem; line-height: 1.4; }
  .hn-count { text-align: right; flex-shrink: 0; line-height: 1.1; }
  .hn-count b { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .hn-count span { font-size: 1.1rem; opacity: 0.7; }
  .hn-count em { display: block; font-style: normal; font-size: 0.75rem; opacity: 0.8; }

  .hn-body { line-height: 2.05; }
  /* Tappable words must not push the sentence apart: the padding that makes
     a comfortable target is cancelled by an equal negative margin, so the
     line still reads with normal word spacing. */
  .hn-word, .hn-sen {
    display: inline;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 6px;
    padding: 0.12em 0.18em;
    margin: 0 -0.18em;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hn-word:hover, .hn-sen:hover { background: var(--paper-deep); }
  .hn-word.found, .hn-sen.found {
    background: var(--gold-soft);
    box-shadow: inset 0 0 0 2px var(--s-word);
    font-weight: 700;
  }
  .hn-word.miss, .hn-sen.miss {
    background: var(--paper-deep);
    box-shadow: inset 0 0 0 2px var(--rule);
    color: var(--ink-faint);
    text-decoration: line-through;
  }
  /* Sentence hunts stack one sentence per row. Tapping a whole sentence out
     of flowing prose is fiddly and the boundaries are the thing being
     judged, so they are drawn as separate blocks. Paragraph grouping is
     kept, so the shape of the text still comes through. */
  .hn-body.by-sentence { line-height: 1.6; }
  .hn-body.by-sentence p { margin-bottom: 1.1rem; }
  .hn-body.by-sentence .hn-sen {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    margin: 0 0 0.4rem;
    border-radius: 10px;
    text-align: left;
  }
  .hn-body.by-sentence .hn-sen:hover { background: var(--paper-deep); }

  .hn-legend { display: flex; gap: 1.4rem; margin-top: 1.4rem; font-size: 0.83rem; color: var(--ink-faint); }
  .hn-legend span { display: flex; align-items: center; gap: 0.45rem; }
  .hn-key { width: 0.95rem; height: 0.95rem; border-radius: 5px; border: 2px solid var(--s-word); background: var(--gold-soft); }
  .hn-key.miss { border: 2px dashed var(--rule); background: var(--paper-deep); }

  /* ============ HUNT HELP ============ */
  .hn-help-btn {
    width: 2.1rem; height: 2.1rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .hn-help-btn:hover { background: rgba(255, 255, 255, 0.3); }
  .hn-help-btn svg { width: 1.15rem; height: 1.15rem; }

  .hn-help {
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    padding: 1rem 1.15rem;
    margin: -0.9rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .hn-help-row { display: flex; gap: 0.8rem; align-items: baseline; font-size: 0.95rem; line-height: 1.5; }
  .hn-help-tag {
    flex-shrink: 0;
    width: 5.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-faint);
  }
  .hn-help-row b { font-weight: 700; }
  .hn-help-row i { font-style: italic; color: var(--ink-soft); }
  @media (max-width: 520px) {
    .hn-help-row { flex-direction: column; gap: 0.15rem; }
    .hn-help-tag { width: auto; }
  }

  .hn-say { margin-right: -0.15rem; }

  /* ============ QUESTIONS ============ */
  .qz-track { height: 5px; background: var(--rule); flex-shrink: 0; }
  .qz-track > div { height: 100%; background: var(--s-text); transition: width 0.35s ease; }
  @media (prefers-reduced-motion: reduce) { .qz-track > div { transition: none; } }

  .qz-passage {
    background: var(--paper-deep);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-height: 16rem;
    overflow-y: auto;
  }
  .qz-passage p { margin: 0 0 0.8rem; }
  .qz-passage p:last-child { margin-bottom: 0; }

  /* The clue: the passage opens itself and marks where to look. */
  .qz-passage.clued {
    background: #fff;
    border: 2.5px solid var(--s-text);
    color: var(--ink);
  }
  .qz-clue-head {
    position: sticky; top: -1.1rem; z-index: 1;
    background: #fff;
    padding: 1.1rem 0 0.1rem;
    margin-top: -1.1rem;
    display: flex; align-items: flex-start; gap: 0.45rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--s-text);
    margin-bottom: 0.6rem;
  }
  .qz-clue-head svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
  mark.qz-clue {
    background: #ffe27a;
    color: var(--ink);
    font-weight: 600;
    border-radius: 5px;
    padding: 0.1em 0.15em;
    margin: 0 -0.15em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: clueIn 0.5s ease;
  }
  @keyframes clueIn {
    from { background: #fff3c4; }
    to   { background: #ffe27a; }
  }
  @media (prefers-reduced-motion: reduce) { mark.qz-clue { animation: none; } }

  .qz-card {
    --qc: var(--s-sentence);
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 1.4rem 1.5rem;
    box-shadow: 5px 5px 0 var(--qc);
  }
  .qz-card.open { --qc: var(--s-sound); }

  .qz-tag-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
  .qz-tag {
    border-radius: 7px;
    padding: 0.28rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .qz-tag.t-sentence { background: var(--teal-soft);   color: var(--s-sentence); }
  .qz-tag.t-word     { background: var(--gold-soft);   color: var(--s-word); }
  .qz-tag.t-text     { background: var(--indigo-soft); color: var(--s-text); }
  .qz-tag.t-sound    { background: var(--accent-soft); color: var(--s-sound); }
  .qz-blurb { font-size: 0.82rem; color: var(--ink-faint); }

  .qz-q { font-size: clamp(1.1rem, 3.2vw, 1.3rem); line-height: 1.4; font-weight: 500; margin-bottom: 1.2rem; }

  .qz-options { display: grid; gap: 0.6rem; }
  @media (min-width: 620px) { .qz-options { grid-template-columns: 1fr 1fr; } }
  .qz-opt {
    border: 2.5px solid var(--rule);
    border-radius: 14px;
    background: #fff;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--ink);
    text-align: left;
  }
  .qz-opt:hover:not(:disabled) { border-color: var(--ink-faint); }
  .qz-opt.right { border-color: var(--s-sentence); background: var(--teal-soft); font-weight: 700; }
  .qz-opt.wrong { border-color: var(--s-sound); background: var(--accent-soft); text-decoration: line-through; color: var(--ink-faint); }
  .qz-opt:disabled { cursor: default; }

  .qz-why { margin-top: 1rem; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
  .qz-why b.yes { color: var(--s-sentence); }
  .qz-why b.no  { color: var(--s-sound); }

  .qz-write {
    width: 100%;
    border: 2.5px dashed var(--rule);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ink);
    background: #fff;
    resize: vertical;
  }
  .qz-write:focus { outline: 2px solid var(--s-sound); outline-offset: 1px; border-style: solid; }
  .qz-check {
    margin-top: 0.8rem;
    background: var(--ink);
    border: 2px solid var(--ink);
    color: var(--paper);
    border-radius: 999px;
    padding: 0.65rem 1.3rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
  }

  .qz-model {
    margin-top: 1.2rem;
    background: var(--paper-deep);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
  }
  .qz-model-head {
    font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-faint); margin-bottom: 0.55rem;
  }
  .qz-model-text { font-size: 1.02rem; line-height: 1.55; margin-bottom: 0.9rem; }
  .qz-ticks { display: flex; flex-direction: column; gap: 0.55rem; }
  .qz-tick { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; cursor: pointer; line-height: 1.45; }
  .qz-tick input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--s-sentence); flex-shrink: 0; }
  .qz-seen {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.9rem; padding-top: 0.8rem;
    border-top: 1px solid var(--rule);
    font-size: 0.83rem; color: var(--ink-faint);
  }
  .qz-seen svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }

  .qz-next-wrap { display: flex; justify-content: flex-end; margin-top: 1.3rem; }
  .qz-next {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--s-text); border: 2px solid var(--s-text); color: #fff;
    border-radius: 999px; padding: 0.8rem 1.5rem; cursor: pointer;
    font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  }
  .qz-next svg { width: 1.05rem; height: 1.05rem; }

  /* ============ HOW MUCH HUNTING ============ */
  .hn-choose {
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 5px 5px 0 var(--s-word);
  }
  .hn-choose-head { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
  .hn-choose-sub { font-size: 0.92rem; color: var(--ink-soft); margin: 0.25rem 0 1.2rem; }
  .hn-choose-grid { display: grid; gap: 0.7rem; }
  @media (min-width: 620px) { .hn-choose-grid { grid-template-columns: repeat(3, 1fr); } }
  .hn-choose-opt {
    display: flex; flex-direction: column; gap: 0.3rem;
    background: #fff;
    border: 2.5px solid var(--rule);
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
    color: var(--ink);
  }
  .hn-choose-opt:hover { border-color: var(--s-word); background: var(--gold-soft); }
  .hn-stars { font-size: 1.15rem; letter-spacing: 0.08em; color: var(--gold); line-height: 1; }
  .hn-stars .off { color: var(--rule); }
  .hn-choose-n { font-weight: 700; font-size: 1rem; }
  .hn-choose-what { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.4; }
  .hn-skip {
    margin-top: 1.1rem;
    background: none; border: none; padding: 0;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-faint);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
  .hn-skip:hover { color: var(--ink); }

  /* ============ SENTENCE FEEDBACK ============ */
  .hn-note {
    background: #fff;
    border: 2.5px solid var(--s-sentence);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    margin: 0.2rem 0 0.9rem;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .hn-note.no { border-color: var(--s-sound); }
  .hn-note-head { margin-bottom: 0.6rem; }
  .hn-note.yes .hn-note-head b { color: var(--s-sentence); }
  .hn-note.no  .hn-note-head b { color: var(--s-sound); }
  .hn-note-sen { font-size: 1rem; line-height: 1.9; margin-bottom: 0.55rem; }
  .hn-note-why { font-size: 0.92rem; color: var(--ink-soft); }
  .hn-note-why b { font-weight: 700; color: var(--ink); }
  .hn-note-why i { font-style: italic; }

  .cl { border-radius: 5px; padding: 0.08em 0.24em; }
  .cl.independent { background: var(--teal-soft);   box-shadow: inset 0 -2px 0 var(--s-sentence); }
  .cl.dependent   { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--s-sound); }
  .cl.joiner      { background: var(--gold-soft);   box-shadow: inset 0 -2px 0 var(--s-word); font-weight: 700; }

  .hn-note-key { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 0.55rem; }
  .hn-note-key .k { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -0.08em; }
  .hn-note-key .k.independent { background: var(--teal-soft);   border: 1.5px solid var(--s-sentence); }
  .hn-note-key .k.dependent   { background: var(--accent-soft); border: 1.5px solid var(--s-sound); }
  .hn-note-key .k.joiner      { background: var(--gold-soft);   border: 1.5px solid var(--s-word); }

  .lib-kind { font-size: 0.62rem; }

  /* ============ SIGNING IN, AND THE TEACHER'S SIDE ============ */
  .ci-inner { max-width: 34rem; margin: 0 auto; padding: 1.6rem 1.15rem 3rem; }
  .ci-card.wide { max-width: 42rem; }

  .ci-card {
    background: #fff;
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 1.6rem 1.5rem 1.5rem;
    box-shadow: 5px 5px 0 var(--s-text);
  }
  .ci-step {
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-faint); margin-bottom: 0.5rem;
  }
  .ci-h { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.35rem; line-height: 1.2; }
  .ci-sub { color: var(--ink-soft); margin: 0 0 1.2rem; font-size: 0.95rem; }

  .ci-code {
    width: 100%;
    font-family: var(--font-display);
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    padding: 0.7rem 0.5rem;
    border: 2.5px solid var(--ink);
    border-radius: 14px;
    background: var(--paper-deep);
    color: var(--ink);
  }
  .ci-go {
    width: 100%;
    margin-top: 1rem;
    background: var(--s-text); color: #fff;
    border: 2.5px solid var(--ink); border-radius: 14px;
    padding: 0.8rem; font-size: 1.05rem; font-weight: 700;
    cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
  }
  .ci-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .ci-say { margin-top: 0.9rem; font-size: 0.95rem; color: var(--s-sound); font-weight: 600; }
  .ci-back-link {
    display: block; margin: 1rem auto 0; background: none; border: 0;
    color: var(--ink-faint); font-size: 0.9rem; text-decoration: underline; cursor: pointer;
  }

  .ci-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; }
  .ci-name {
    display: flex; align-items: center; gap: 0.55rem;
    background: var(--paper-deep); border: 2px solid var(--ink);
    border-radius: 14px; padding: 0.6rem 0.7rem;
    font-size: 1rem; font-weight: 600; color: var(--ink);
    cursor: pointer; text-align: left;
  }
  .ci-name:active { transform: translateY(1px); }

  .ci-pips { display: flex; gap: 0.7rem; justify-content: center; margin: 0.4rem 0 1.3rem; }
  .ci-pip {
    width: 1.05rem; height: 1.05rem; border-radius: 50%;
    border: 2.5px solid var(--ink); background: transparent;
  }
  .ci-pip.on { background: var(--s-text); }
  .ci-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .ci-pad button {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
    padding: 0.75rem 0; border: 2.5px solid var(--ink); border-radius: 14px;
    background: #fff; color: var(--ink); cursor: pointer;
  }
  .ci-pad button:active { background: var(--paper-deep); transform: translateY(1px); }
  .ci-pad-wide { grid-column: span 2; }

  .tc-field {
    width: 100%; margin-bottom: 0.7rem;
    padding: 0.7rem 0.8rem; font-size: 1rem;
    border: 2.5px solid var(--ink); border-radius: 12px;
    background: var(--paper-deep); color: var(--ink);
  }
  .tc-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.2rem; }
  .tc-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--paper-deep); border: 2px solid var(--ink);
    border-radius: 14px; padding: 0.75rem 0.9rem;
    font-size: 1.02rem; font-weight: 600; color: var(--ink); cursor: pointer;
  }
  .tc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.07em; color: var(--s-text); font-weight: 700;
  }
  .tc-code.big { font-size: 1.15rem; }
  .tc-headline { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .tc-headline .ci-back-link { margin: 0.2rem 0 0; flex-shrink: 0; }

  .tc-table { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; }
  .tc-table th {
    text-align: left; font-size: 0.7rem; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--ink-faint);
    padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--rule);
  }
  .tc-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .tc-table td:last-child { text-align: right; width: 1%; white-space: nowrap; }
  .tc-x {
    background: none; border: 0; color: var(--ink-faint);
    font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.3rem;
  }
  .tc-x.sure {
    font-size: 0.82rem; font-weight: 700; color: #fff;
    background: var(--s-sound); border-radius: 8px; padding: 0.3rem 0.55rem;
  }
  .tc-add { display: flex; gap: 0.6rem; align-items: flex-start; }
  .tc-add .tc-field { margin-bottom: 0; }
  .tc-add-btn {
    flex-shrink: 0; background: var(--s-text); color: #fff;
    border: 2.5px solid var(--ink); border-radius: 12px;
    padding: 0.7rem 1rem; font-weight: 700; cursor: pointer;
  }
  .tc-note { font-size: 0.85rem; color: var(--ink-faint); margin: 0.9rem 0 0; }

  .tc-sub-h {
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-faint);
    margin: 1.4rem 0 0.5rem;
  }
  .tc-when { color: var(--ink-faint); font-size: 0.85rem; white-space: nowrap; }
  .tc-you {
    font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 700; color: #fff; background: var(--s-text);
    border-radius: 6px; padding: 0.12rem 0.36rem; margin-left: 0.35rem;
  }
  .tc-add-btn.small { padding: 0.4rem 0.7rem; font-size: 0.85rem; border-width: 2px; }

  .tc-initial { width: 3.6rem; flex-shrink: 0; text-align: center; text-transform: uppercase; }
  .tc-print { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
  .tc-print-btn {
    background: var(--s-word); color: #fff;
    border: 2.5px solid var(--ink); border-radius: 12px;
    padding: 0.6rem 0.95rem; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  }
  .tc-print-btn.ghost { background: #fff; color: var(--ink); }

  /* ============ PRINTING ============
     The sheet lives in the page and is invisible until printing, because
     a popup window gets blocked and does not exist on an iPad at all. */
  #printSheet { display: none; }
  @media print {
    body.printing > *:not(#printSheet) { display: none !important; }
    body.printing { background: #fff; margin: 0; }
    #printSheet { display: block; }
    @page { margin: 12mm; }
  }

  .pc-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  .pc {
    border: 1.5px dashed #999;
    border-radius: 4mm;
    padding: 5mm;
    break-inside: avoid;
    page-break-inside: avoid;
    color: #000;
    font-family: 'Lexend', system-ui, sans-serif;
  }
  .pc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3mm; }
  .pc-name { font-size: 13pt; font-weight: 700; }
  .pc-class { font-size: 9pt; color: #555; }
  .pc-mid { display: flex; align-items: center; gap: 5mm; }
  .pc-qr { flex-shrink: 0; line-height: 0; }
  .pc-label { display: block; font-size: 7.5pt; letter-spacing: 0.1em; text-transform: uppercase; color: #555; }
  .pc-code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 20pt; font-weight: 700; letter-spacing: 0.09em;
  }
  .pc-foot { margin-top: 3mm; font-size: 7.5pt; color: #555; }

  .pp { text-align: center; color: #000; font-family: 'Lexend', system-ui, sans-serif; }
  .pp-kicker { font-size: 12pt; letter-spacing: 0.18em; text-transform: uppercase; color: #555; }
  .pp-title { font-size: 60pt; margin: 2mm 0 6mm; font-weight: 700; }
  .pp-qr { line-height: 0; }
  .pp-url { font-size: 18pt; font-weight: 700; margin-top: 4mm; letter-spacing: 0.02em; }
  .pp-steps {
    display: inline-block; text-align: left; margin: 8mm auto 0;
    font-size: 14pt; line-height: 2;
  }