/*
 * css/themes.css — All visual styles and theme variables for Hanzi Flow
 * ──────────────────────────────────────────────────────────────────────
 * Sections:
 *   1. CSS custom properties (themes: Paper, Neon, Retro × Light/Dark)
 *   2. Base layout & typography
 *   3. Start page & settings panel
 *   4. Practice card & canvas
 *   5. Controls (buttons)
 *   6. Overlays (hint, guide, result)
 *
 * To add a new theme: add a [data-theme="yourname"] block below and
 * a matching pill button in index.html settings panel.
 */

@font-face {
      font-family: 'STKaiti';
      src: url('STKaiti.ttf');
      font-weight: normal;
      font-style: normal;
    }

    /* ===== THEME VARIABLES ===== */
    :root {
      --ink: #1a1714;
      --paper: #f5f0e8;
      --cream: #ede7d5;
      --rust: #c0533a;
      --rust-light: #e8765e;
      --sage: #5a7a5c;
      --sage-light: #7da87f;
      --muted: #8a8070;
      --border: #d4cbb8;
      --card-bg: #faf7f1;
      --shadow: rgba(26,23,20,0.12);
      --input-bg: white;
    }

    /* DARK overlay */
    [data-dark="true"] {
      --ink: #e8e0d0;
      --paper: #1a1814;
      --cream: #252118;
      --rust: #e8765e;
      --rust-light: #f09070;
      --sage: #7da87f;
      --sage-light: #9dc89f;
      --muted: #7a7060;
      --border: #3a3530;
      --card-bg: #211f1a;
      --shadow: rgba(0,0,0,0.4);
      --input-bg: #2a2722;
    }

    /* THEME: Neon */
    [data-theme="neon"] {
      --ink: #1a003a;
      --paper: #f0e6ff;
      --cream: #e0ccff;
      --rust: #cc00aa;
      --rust-light: #ff22cc;
      --sage: #00b894;
      --sage-light: #00e6b8;
      --muted: #8844bb;
      --border: #c880ff;
      --card-bg: #f8f0ff;
      --shadow: rgba(180,0,255,0.12);
      --input-bg: #ffffff;
    }
    [data-theme="neon"][data-dark="true"] {
      --ink: #f0e6ff;
      --paper: #0d0020;
      --cream: #140030;
      --rust: #ff22dd;
      --rust-light: #ff66ee;
      --sage: #00ffcc;
      --sage-light: #4dffd8;
      --muted: #9966cc;
      --border: #3a0066;
      --card-bg: #110028;
      --shadow: rgba(180,0,255,0.2);
      --input-bg: #1a0038;
    }

    /* THEME: Retro */
    [data-theme="retro"] {
      --ink: #2d1b00;
      --paper: #f0c060;
      --cream: #e8b040;
      --rust: #c03000;
      --rust-light: #e05020;
      --sage: #205020;
      --sage-light: #306830;
      --muted: #806020;
      --border: #c09030;
      --card-bg: #f5c855;
      --shadow: rgba(45,27,0,0.18);
      --input-bg: #f8d870;
    }
    [data-theme="retro"][data-dark="true"] {
      --ink: #f0c060;
      --paper: #1a0e00;
      --cream: #251500;
      --card-bg: #201200;
      --border: #4a3000;
      --input-bg: #2a1800;
      --muted: #907040;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'DM Mono', monospace;
      background: var(--paper);
      min-height: 100vh;
      color: var(--ink);
    }

    /* ===== START PAGE ===== */
    #start-page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 20px 40px;
    }

    .start-header {
      text-align: center;
      margin-bottom: 6px;
      width: 100%;
      max-width: 420px;
    }

    .start-header-top {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 420px;
      position: relative;
      margin-bottom: 8px;
    }

    .start-header-spacer {
      width: 36px;
      flex-shrink: 0;
    }

    .app-logo-svg {
      width: 54px;
      height: 54px;
      border-radius: 13px;
      display: block;
      flex-shrink: 0;
      margin: 0 auto;
    }

    #settings-btn {
      position: absolute;
      right: 0;
      top: 0;
    }

    #settings-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--muted);
      transition: all 0.15s;
      flex-shrink: 0;
    }
    #settings-btn:hover { border-color: var(--ink); color: var(--ink); }

    .start-header h1 {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 26px;
      color: var(--ink);
      letter-spacing: -0.3px;
      margin: 0 0 4px 0;
    }

    .start-header p {
      font-size: 13px;
      color: var(--muted);
      margin-top: 6px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .selection-panel {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }


    /* ===== NEW START PAGE ===== */
    .start-desc {
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      color: var(--muted);
      margin: 0;
      line-height: 1.5;
      letter-spacing: 0.08em;
      text-align: center;
    }
    .start-desc-zh {
      letter-spacing: 0.04em;
    }

    .curriculum-tabs {
      width: 100%;
      max-width: 420px;
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      padding-top: 24px;
    }

    .curr-tab {
      flex: 1;
      padding: 9px 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--card-bg);
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.04em;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }
    .curr-tab:hover { border-color: var(--ink); color: var(--ink); }
    .curr-tab.active {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    .book-block {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
    }

    .book-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 18px;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid transparent;
      transition: background 0.15s;
    }

    .book-header:hover { background: var(--cream); }

    .book-header.open { border-bottom-color: var(--border); }

    .book-checkbox-wrap {
      width: 20px;
      height: 20px;
      border: 1.5px solid #c9cdd4;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s;
      background: #e4e6ea;
    }

    .book-checkbox-wrap.checked {
      background: var(--ink);
      border-color: var(--ink);
    }

    .book-checkbox-wrap.indeterminate {
      background: var(--muted);
      border-color: var(--muted);
    }

    .book-checkbox-wrap svg { display: block; opacity: 0.6; }
    .book-checkbox-wrap.checked svg,
    .book-checkbox-wrap.indeterminate svg { display: block; opacity: 1; }

    .book-title {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 17px;
      flex: 1;
    }

    .book-count {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .book-chevron {
      width: 16px;
      height: 16px;
      color: var(--muted);
      transition: transform 0.2s;
      flex-shrink: 0;
    }

    .book-header.open .book-chevron { transform: rotate(180deg); }

    .chapters-list {
      display: none;
      flex-direction: column;
    }

    .chapters-list.open { display: flex; }

    .chapter-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 18px 11px 18px;
      cursor: pointer;
      transition: background 0.12s;
      border-bottom: 1px solid var(--border);
    }

    .chapter-row:last-child { border-bottom: none; }
    .chapter-row:hover { background: var(--cream); }

    .ch-check {
      width: 16px;
      height: 16px;
      border: 1.5px solid #c9cdd4;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #e4e6ea;
      transition: all 0.15s;
    }

    .ch-check.checked {
      background: var(--sage);
      border-color: var(--sage);
    }

    .ch-check svg { display: block; opacity: 0.6; }
    .ch-check.checked svg { display: block; opacity: 1; }

    .chapter-name {
      font-size: 13px;
      color: var(--ink);
      flex: 1;
    }

    .chapter-range {
      font-size: 11px;
      color: var(--muted);
      font-family: 'STKaiti', cursive;
      letter-spacing: 0.02em;
    }

    /* Hidden real checkboxes */
    input[type="checkbox"] { display: none; }

    .start-footer {
      width: 100%;
      max-width: 420px;
      margin-top: 20px;
    }

    #start-btn {
      width: 100%;
      padding: 16px;
      background: var(--ink);
      color: var(--paper);
      font-family: 'DM Mono', monospace;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }

    #start-btn:hover { background: #2e2b27; }
    #start-btn:active { transform: scale(0.99); }

    /* ===== APP ===== */
    #app-container {
      display: none;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 14px 16px 20px;
    }

    .app-top {
      width: 100%;
      max-width: 400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .app-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Fraunces', serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
    }

    .app-logo-inline {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      flex-shrink: 0;
    }

    #home-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s;
    }

    #home-btn:hover { border-color: var(--ink); color: var(--ink); }

    /* Card */
    .card-scene {
      width: 100%;
      max-width: 400px;
      perspective: 1200px;
    }

    .card {
      width: 100%;
      height: 530px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card.flipped { transform: rotateY(180deg); }

    .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: 0 4px 24px var(--shadow), 0 1px 3px var(--shadow);
      overflow: hidden;
    }

    .card-face.back {
      transform: rotateY(180deg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    /* Front face layout */
    .card-front-inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .card-word-section {
      padding: 14px 24px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--input-bg);
      height: 100px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .card-label {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
    }

    #english-word {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 26px;
      color: var(--ink);
      line-height: 1.15;
    }

    #pinyin-front {
      font-size: 14px;
      color: var(--muted);
      margin-top: 4px;
      letter-spacing: 0.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .canvas-area {
      flex: 1;
      position: relative;
      padding: 10px 46px 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      overflow: hidden;
    }

    .canvas-wrap {
      position: relative;
      width: 100%;
      max-width: 300px;
      aspect-ratio: 1;
      border-radius: 12px;
      overflow: hidden;
      background: var(--input-bg);
      border: 1px solid var(--border);
    }

    #draw-canvas {
      width: 100%;
      height: 100%;
      cursor: crosshair;
      display: block;
    }

    .card-nav-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      background: var(--input-bg);
      flex-shrink: 0;
      height: 56px;
    }

    .nav-arrow {
      width: 36px;
      height: 36px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      color: var(--ink);
    }

    .nav-arrow:hover { background: var(--ink); color: white; border-color: var(--ink); }

    #number-text {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.05em;
    }

    /* Back face */
    #handwritten-char {
      font-family: 'STKaiti', cursive;
      font-size: 110px;
      color: var(--ink);
      line-height: 1;
    }

    #pinyin {
      font-size: 22px;
      color: var(--muted);
      margin-top: 4px;
    }

    #printed-char {
      font-size: 28px;
      color: var(--rust);
      margin-top: 2px;
    }

    .back-label {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--border);
      margin-top: 12px;
    }

    /* Controls */
    .controls {
      width: 100%;
      max-width: 400px;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

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

    /* New 3-column mid row: left-col | big Flip | right-col */
    .ctrl-mid-row {
      display: flex;
      gap: 6px;
      align-items: stretch;
    }
    .ctrl-side-col {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ctrl-side-col .ctrl-btn {
      width: 100%;
      flex: 1;
    }
    .ctrl-flip-center {
      flex: 0 0 80px;
      flex-direction: column;
      gap: 4px;
      padding: 10px 6px;
    }
    .ctrl-flip-center:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    .ctrl-flip-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ctrl-btn {
      flex: 1;
      padding: 10px 4px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--card-bg);
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: var(--ink);
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      white-space: nowrap;
    }

    .ctrl-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .ctrl-btn:active { transform: scale(0.98); }

    .ctrl-btn.primary {
      background: #e8e2d8;
      color: #a03030;
      border-color: #d4cdc0;
    }
    .ctrl-btn.primary:hover { background: #ddd7cc; border-color: #c4bdb0; }

    .ctrl-btn.accent {
      background: var(--sage);
      color: white;
      border-color: var(--sage);
    }
    .ctrl-btn.accent:hover { background: #4a6a4c; }

    .ctrl-icon {
      font-size: 14px;
      line-height: 1;
    }

    /* Result overlay */
    .result-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
      border-radius: 12px;
    }

    .result-icon {
      font-size: 120px;
      font-weight: bold;
      opacity: 0.45;
    }

    .result-overlay.match .result-icon { color: var(--sage); }
    .result-overlay.no-match .result-icon { color: var(--rust); }

    /* Hint overlay on canvas */
    #hint-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }

    #hint-char {
      font-family: 'STKaiti', cursive;
      font-size: 240px;
      color: var(--rust);
      opacity: 0.25;
      line-height: 1;
    }

    /* Guide overlay on canvas */
    #guide-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }

    #guide-char {
      font-family: 'STKaiti', cursive;
      color: var(--ink);
      opacity: 0.07;
      line-height: 1;
      position: absolute;
      /* positioned by JS to match HanziWriter hint exactly */
    }

    .ctrl-btn.guide-active {
      background: var(--cream);
      border-color: var(--muted);
      color: var(--muted);
    }
    .ctrl-btn.guide-active:hover {
      background: var(--muted);
      color: var(--paper);
      border-color: var(--muted);
    }

    /* Ghost off — light grey background */
    #guide-btn:not(.guide-active) {
      background: #e8e8e8;
      border-color: #c8c8c8;
      color: #505050;
    }
    #guide-btn:not(.guide-active):hover {
      background: #d8d8d8;
      border-color: #a8a8a8;
      color: #303030;
    }

    /* ===== SETTINGS ===== */
    .start-topbar { display: none; }

    #settings-panel {
      display: none;
      width: 100%;
      max-width: 420px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    #settings-panel.open { display: block; }

    .settings-section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      font-family: 'DM Mono', monospace;
    }

    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
    }
    .settings-row:last-child { border-bottom: none; }

    .settings-label {
      font-size: 13px;
      color: var(--ink);
    }

    /* Toggle switch */
    .toggle-wrap {
      position: relative;
      width: 42px;
      height: 24px;
      flex-shrink: 0;
    }
    .toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
    .toggle-track {
      position: absolute;
      inset: 0;
      background: var(--border);
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      background: white;
      border-radius: 50%;
      transition: transform 0.2s;
      pointer-events: none;
    }
    .toggle-wrap input:checked + .toggle-track { background: var(--ink); }
    .toggle-wrap input:checked ~ .toggle-thumb { transform: translateX(18px); }

    /* Theme pills */
    .theme-pills {
      display: flex;
      gap: 6px;
    }
    .theme-pill {
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--muted);
      background: var(--paper);
      cursor: pointer;
      transition: all 0.15s;
    }
    .theme-pill:hover { border-color: var(--ink); color: var(--ink); }
    .theme-pill.active {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }

    /* Voice toggle pills */
    .voice-toggle-wrap {
      display: flex;
      gap: 6px;
    }
    .voice-pill {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--muted);
      background: var(--paper);
      cursor: pointer;
      transition: all 0.15s;
    }
    .voice-pill:hover { border-color: var(--ink); color: var(--ink); }
    .voice-pill.active {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }

    /* Speaker button */
    #speak-btn {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      z-index: 10;
    }
    #speak-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    #speak-btn.speaking { background: var(--sage); color: white; border-color: var(--sage); }

/* ===== BILINGUAL TEXT STYLES ===== */
/* Chinese portions sit naturally alongside English in all UI elements.
   The .zh helper class can be used for Chinese-only spans when needed. */

.curr-tab,
.ctrl-btn,
#start-btn,
#home-btn,
.voice-pill,
.theme-pill,
.settings-label,
.settings-section-header,
.book-title,
.chapter-name,
.card-label,
.back-label,
.start-desc {
  /* Let Chinese characters render at their natural weight */
  font-synthesis: none;
}

/* Slightly tighten letter-spacing on bilingual buttons to avoid overflow */
.ctrl-btn { letter-spacing: 0.01em; }
.curr-tab { letter-spacing: 0.01em; }

/* ===== CURRICULUM INFO POPUP ===== */
.curr-tab-wrap {
  flex: 1;
  position: relative;
  display: flex;
}

.curr-tab-wrap .curr-tab {
  flex: 1;
  padding-right: 28px; /* room for ? button */
}

.curr-info-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: transparent;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
  z-index: 2;
}
.curr-info-btn:hover {
  border-color: var(--paper);
  color: var(--paper);
  background: var(--muted);
}
.curr-tab.active ~ .curr-info-btn,
.curr-tab-wrap:has(.curr-tab.active) .curr-info-btn {
  border-color: rgba(255,255,255,0.6);
  color: rgba(255,255,255,0.8);
}
.curr-tab-wrap:has(.curr-tab.active) .curr-info-btn:hover {
  border-color: white;
  color: var(--ink);
  background: white;
}

/* Popup backdrop */
.curr-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.curr-popup-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px 24px;
  max-width: 360px;
  width: 100%;
  max-height: min(88vh, 660px);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 8px 40px var(--shadow);
  animation: slideUp 0.2s ease;
  overflow: hidden;
}
@keyframes slideUp { from { transform:translateY(16px); opacity:0 } to { transform:translateY(0); opacity:1 } }

.curr-popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
}
.curr-popup-close:hover { background: var(--border); color: var(--ink); }

.curr-popup-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  padding-right: 32px;
  line-height: 1.3;
}

.curr-popup-subtitle {
  font-family: 'STKaiti', cursive;
  font-size: 15px;
  color: var(--rust);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}

.curr-popup-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.curr-popup-body strong {
  color: var(--ink);
  font-weight: 600;
}

.curr-popup-body a {
  color: var(--rust);
  text-decoration: underline;
}

/* ===== V1.0 — SEARCH BAR ===== */
.char-search-bar {
  width: 100%;
  max-width: 420px;
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 0;
}

.char-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  gap: 8px;
  transition: border-color 0.15s;
}
.char-search-wrap:focus-within {
  border-color: var(--rust);
}

.char-search-icon {
  color: var(--muted);
  flex-shrink: 0;
}

#char-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.02em;
}
#char-search-input::placeholder { color: var(--muted); font-size: 12px; }

#char-search-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.char-search-results {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow);
  max-height: 280px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--input-bg); }

.sri-hanzi {
  font-family: 'STKaiti', cursive;
  font-size: 28px;
  color: var(--ink);
  min-width: 36px;
  text-align: center;
}
.sri-info { flex: 1; min-width: 0; }
.sri-english {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sri-pinyin { font-size: 11px; color: var(--muted); margin-top: 1px; }
.sri-source { font-size: 10px; color: var(--rust); letter-spacing: 0.05em; flex-shrink: 0; }

.search-no-results {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ===== V1.0 — RICH CARD BACK ===== */
.card-face.back {
  padding: 0;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}

.back-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 16px;
  box-sizing: border-box;
  gap: 0;
}

.back-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.back-char-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#handwritten-char {
  font-family: 'STKaiti', cursive;
  font-size: 72px;
  color: var(--ink);
  line-height: 1;
}

#pinyin {
  font-size: 18px;
  color: var(--muted);
  margin-top: 2px;
}

#printed-char {
  font-size: 20px;
  color: var(--rust);
  margin-top: 2px;
}

.speak-btn-back {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  margin-top: 4px;
  transition: all 0.15s;
}
.speak-btn-back:hover { background: var(--ink); color: white; }
.speak-btn-back.speaking { background: var(--rust); color: white; border-color: var(--rust); }

.back-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.back-section:last-of-type { border-bottom: none; }

.back-section-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.back-section.strokes-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.back-section.strokes-section .back-section-label {
  margin-bottom: 0;
}
.back-strokes {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--ink);
  font-weight: 600;
}

.back-memory {
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink);
}

.back-dictionary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dict-entry {
  font-size: 11px;
  line-height: 1.6;
}
.dict-meaning {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.dict-sentence-hz { color: var(--rust); }
.dict-sentence-py { color: var(--muted); }
.dict-sentence-en { color: var(--ink); opacity: 0.7; }

.back-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--border);
  margin-top: 10px;
  text-align: center;
}

/* ===== BACK NAV STRIP ===== */
.back-nav-strip {
  /* Identical to .card-nav-strip on the front */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--input-bg);
  flex-shrink: 0;
  height: 56px;
  width: 100%;
  border-bottom: none;
}

/* Match #number-text styling exactly */
#number-text-back {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* ===== BACK TOP RIGHT (speak + english) ===== */
.back-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.back-english {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  text-align: right;
  max-width: 110px;
  line-height: 1.3;
}

/* ===== SETTINGS POPUP BODY ===== */
.settings-popup-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.settings-popup-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.settings-popup-section:last-child { border-bottom: none; padding-bottom: 4px; }

.settings-popup-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.settings-about-btn {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.settings-about-btn:hover { border-color: var(--rust); color: var(--rust); }

/* hide old inline settings panel if it still exists in DOM */
#settings-panel { display: none !important; }

/* ===== V1.006 — SPEAK BTN TOP + PROGRESS CHECKBOX ===== */
.card-word-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.speak-btn-top {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.15s;
}
.speak-btn-top:hover { background: var(--ink); color: white; border-color: var(--ink); }
.speak-btn-top.speaking { background: var(--rust); color: white; border-color: var(--rust); }

/* ── Progress checkbox button — same style as original speak-btn ── */
.progress-check-btn {
  position: static;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  /* NO transition — instant state change avoids :active race on mobile */
}

/* Tick hidden by default */
#progress-tick {
  opacity: 0;
}

/* Learned state */
.progress-check-btn.learned {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
}
.progress-check-btn.learned #progress-tick {
  opacity: 1;
}

/* ===== STICKY BEGIN PRACTICE BUTTON ===== */
#start-page {
  padding-bottom: 80px; /* room for sticky footer */
}
.start-footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px 20px;
  background: linear-gradient(to bottom, transparent, var(--paper) 40%);
  z-index: 100;
  pointer-events: none;
}
.start-footer {
  max-width: 420px;
  margin: 0 auto;
  pointer-events: all;
}

/* ===== PROGRESS INDICATOR BARS ===== */
/* Thin bar at top of curriculum tabs, book headers, chapter rows */
/* Controlled by --prog-pct custom property set by JS */

.curr-tab-wrap .curr-tab,
.book-header,
.chapter-row {
  position: relative;
  overflow: hidden; /* clip the bar */
}

/* The bar sits at the very top edge */
.curr-tab-wrap .curr-tab::before,
.book-header::before,
.chapter-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    #22c55e 0%,
    #22c55e var(--prog-pct, 0%),
    #ef4444 var(--prog-pct, 0%),
    #ef4444 100%
  );
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
  pointer-events: none;
}

/* Show bar only when progress is enabled AND element has data */
.progress-on .curr-tab-wrap .curr-tab::before,
.progress-on .book-header::before,
.progress-on .chapter-row::before {
  opacity: 0.85;
}

/* ===== RESET PROGRESS BUTTON ===== */
.settings-reset-btn {
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.settings-reset-btn:hover {
  background: #ef4444;
  color: white;
}

.settings-tutorial-btn {
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.settings-tutorial-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}


/* ── Canvas side button strip (Undo / Clear / Flip) ── */
.canvas-side-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.side-btn {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: 0;
  z-index: 10;
  outline: none;
}
.side-btn:hover  { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.side-btn:active { transform: scale(0.94); }


/* ── Progress label + checkbox wrapper (absolute bottom-right of canvas-area) ── */
.progress-label-wrap {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  z-index: 10;
}

#progress-label-text {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.01em;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}
.progress-label-not    { color: #ef4444; }
.progress-label-learned { color: #16a34a; }

/* ── Flip button on back card face (absolute bottom-right, above nav strip) ── */
.side-btn-back-flip {
  position: absolute;
  bottom: 64px;   /* above the 56px nav strip */
  right: 8px;
  z-index: 20;
}

/* ── Language selector grid ── */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  padding: 4px 0;
}

.lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn.active {
  border-color: var(--ink);
  background: var(--ink);
}
.lang-flag {
  font-size: 20px;
  line-height: 1;
}
.lang-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.lang-btn.active .lang-name {
  color: var(--paper);
}

/* ── My Hanzi curriculum panel ── */
.myhanzi-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.myhanzi-desc {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.myhanzi-input {
  width: 100%;
  min-height: 240px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.myhanzi-input:focus {
  border-color: var(--rust);
}

.myhanzi-footer {
  display: flex;
  justify-content: flex-end;
}

.myhanzi-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--sage);
  letter-spacing: 0.04em;
}

/* ===== RADICALS ===== */
.radical-used-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.radical-used-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: 22px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.radical-used-chip:hover,
.radical-used-chip:active {
  background: var(--border);
  border-color: var(--rust);
  color: var(--rust);
}

/* Radical character info popup */
.radical-char-popup-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  box-shadow: 0 8px 40px var(--shadow);
  animation: slideUp 0.18s ease;
  min-width: 180px;
}

.radical-char-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
}
.radical-char-popup-close:hover { background: var(--border); color: var(--ink); }

.radical-char-popup-hz {
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: 72px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.radical-char-popup-py {
  font-size: 18px;
  color: var(--rust);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.radical-char-popup-en {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  max-width: 180px;
}
  
/* ===== HOME REDESIGN — QUICK ACCESS + DRUM WHEEL ===== */

.home-section {
  width: 100%;
  max-width: 420px;
  margin-bottom: 14px;
  margin-top: 16px;
  overflow: visible;
}

.home-section-wheel {
  margin-bottom: 10px;
  overflow: visible;
}

.home-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  padding-left: 2px;
}

/* ── Quick access cards ── */
.quick-access-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.quick-card {
  flex: 1;
}

.quick-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 10px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.quick-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  opacity: 0;
  transition: opacity 0.2s;
}

.quick-card-radicals::before {
  background: linear-gradient(to right, var(--sage) 0%, var(--sage) var(--prog-pct, 0%), var(--border) var(--prog-pct, 0%), var(--border) 100%);
}

.quick-card-continue::before {
  background: linear-gradient(to right, #22c55e 0%, #22c55e 68%, #ef4444 68%, #ef4444 100%);
}

.quick-card:hover { border-color: var(--ink); }

.quick-card.active {
  border-color: var(--ink);
  box-shadow: 0 2px 12px var(--shadow);
}

.quick-card.active::before { opacity: 0.85; }

.quick-card-radicals.active {
  border-color: var(--sage);
  background: color-mix(in srgb, var(--sage) 8%, var(--card-bg));
}

.quick-card-continue.active {
  border-color: var(--rust);
  background: color-mix(in srgb, var(--rust) 6%, var(--card-bg));
}

.quick-card-glyph {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'STKaiti', serif;
  font-size: 22px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--sage) 18%, var(--card-bg));
  color: var(--sage);
  border: 1px solid color-mix(in srgb, var(--sage) 35%, var(--border));
}

.quick-card-glyph-muted {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  background: var(--cream);
  color: var(--muted);
  border-color: var(--border);
}

.quick-card-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}

.quick-card-title {
  font-family: 'Fraunces', serif;
  font-weight: 600; font-size: 15px;
  color: var(--ink);
}

.quick-card-meta {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.quick-card-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--sage);
  background: color-mix(in srgb, var(--sage) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--sage) 30%, var(--border));
  border-radius: 20px; padding: 3px 8px; flex-shrink: 0;
}

/* ── Curriculum chip strip ── */
.curr-chip-wrap {
  width: 100%;
  margin-bottom: 10px;
}

.curr-chip-strip {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
}

.curr-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s, color 0.14s;
  text-align: center;
}

.curr-chip:hover {
  border-color: color-mix(in srgb, var(--ink) 55%, var(--border));
}

.curr-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 18%, transparent);
}

.curr-chip.is-linked {
  border-color: var(--rust);
  color: var(--rust);
}

.curr-chip-glyph {
  font-family: 'STKaiti', serif;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.14s;
}

.curr-chip.active .curr-chip-glyph {
  color: var(--paper);
}

.curr-chip.is-linked .curr-chip-glyph {
  color: var(--rust);
}

.curr-chip-label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.14s;
}

.curr-chip.active .curr-chip-label {
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

.curr-chip.is-linked .curr-chip-label {
  color: var(--rust);
}

.drum-readout {
  text-align: center; margin-bottom: 10px; min-height: 14px; max-width: 280px;
  transition: opacity 0.2s ease;
}
.drum-readout.is-dimmed { opacity: 0.38; }
.drum-readout.is-linked .drum-readout-text { color: var(--rust); }
.drum-readout-text {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.04em;
  color: var(--ink); line-height: 1.4; opacity: 0.72;
}
.drum-readout.is-dimmed .drum-readout-text { opacity: 0.35; color: var(--muted); }

/* ── Radicals hint box (shown in selection panel when radicals quick-access active) ── */
.radicals-hint {
  font-size: 11px; color: var(--muted); line-height: 1.5;
  padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: 12px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--sage) 6%, var(--card-bg));
}
.radicals-hint strong { color: var(--sage); font-weight: 600; }

/* ── Progress bars on quick-cards (progress-on mode) ── */
.progress-on .quick-card-radicals::before { opacity: 0.85; }

/* ── Wheel section header row (label + About button) ── */
.home-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.home-section-label-row .home-section-label {
  margin-bottom: 0;
}
.wheel-about-btn {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wheel-about-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Second home-section (wheel) should not add extra top margin ── */
.home-section + .home-section {
  margin-top: 0;
}

/* ===== STREAK BADGE & POPUP ===== */

.streak-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1;
}
.streak-badge:hover {
  border-color: var(--rust);
  background: color-mix(in srgb, var(--rust) 6%, var(--card-bg));
}
.streak-badge[data-paused="1"] {
  opacity: 0.6;
}
.streak-flame {
  font-size: 16px;
  line-height: 1;
}
.streak-num {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Streak popup inner — overrides standard curr-popup-inner sizing */
.streak-popup-inner {
  text-align: center;
  padding: 28px 24px 20px;
  max-width: 320px;
  position: relative;
}

.streak-popup-flame {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
}

.streak-popup-count-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.streak-popup-big {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 700;
  color: var(--rust);
  line-height: 1;
}

.streak-popup-unit {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.streak-popup-msg {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.streak-popup-longest {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.streak-popup-footer {
  display: flex;
  justify-content: flex-end;
}

.streak-pause-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.streak-pause-btn:hover {
  border-color: var(--rust);
  color: var(--rust);
}

/* Continue card meta — allow wrapping for position label */
.quick-card-meta-continue {
  white-space: normal;
  line-height: 1.3;
}

/* ===== DECK COMPLETE POPUP ===== */

.deck-complete-inner {
  text-align: center;
  padding: 28px 24px 20px;
  max-width: 320px;
}

.dc-emoji {
  font-size: 48px;
  margin-bottom: 8px;
  line-height: 1;
}

.dc-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.dc-msg {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.dc-next-desc {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--rust);
  font-weight: 500;
  margin-bottom: 18px;
  min-height: 16px;
}

.dc-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-btn-primary {
  padding: 12px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dc-btn-primary:active { opacity: 0.8; }

.dc-btn-secondary {
  padding: 10px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dc-btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

/* ===== STREAK MILESTONE POPUP ===== */

.streak-milestone-inner {
  text-align: center;
  padding: 32px 24px 24px;
  max-width: 320px;
  position: relative;
  overflow: hidden;
}

.sm-emoji {
  font-size: 60px;
  line-height: 1;
  margin-bottom: 8px;
}

.sm-count-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sm-big {
  font-family: 'Fraunces', serif;
  font-size: 72px;
  font-weight: 700;
  color: var(--rust);
  line-height: 1;
}

.sm-unit {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--muted);
}

.sm-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}

.sm-msg {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 8px;
}

.sm-longest {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.sm-close-btn {
  padding: 11px 24px;
  background: var(--rust);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sm-close-btn:active { opacity: 0.8; }

/* Milestone tiers — background tint */
#streak-milestone-popup[data-tier="major"] .streak-milestone-inner {
  background: color-mix(in srgb, var(--rust) 5%, var(--card-bg));
}
#streak-milestone-popup[data-tier="epic"] .streak-milestone-inner {
  background: color-mix(in srgb, #a78bfa 8%, var(--card-bg));
}
#streak-milestone-popup[data-tier="epic"] .sm-big { color: #a78bfa; }
#streak-milestone-popup[data-tier="legendary"] .streak-milestone-inner {
  background: color-mix(in srgb, #f5c842 8%, var(--card-bg));
}
#streak-milestone-popup[data-tier="legendary"] .sm-big { color: #d97706; }

/* Confetti */
.confetti-piece {
  position: absolute;
  top: -10px;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(420px) rotate(720deg); opacity: 0; }
}

/* ===== PROGRESS % LABELS ===== */

.prog-pct-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #22c55e;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

/* ===== ONBOARDING OVERLAY ===== */

#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

#ob-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  pointer-events: all;
}

#ob-spotlight {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  z-index: 1;
}

#ob-tooltip {
  position: absolute;
  background: var(--card-bg, #faf7f1);
  border: 1px solid var(--border, #d4cbb8);
  border-radius: 14px;
  padding: 16px 16px 12px;
  pointer-events: all;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transition: top 0.28s cubic-bezier(0.22,1,0.36,1), left 0.28s cubic-bezier(0.22,1,0.36,1);
}

#ob-arrow {
  position: absolute;
  width: 0; height: 0;
}
#ob-arrow.ob-arrow-up {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--border, #d4cbb8);
  top: -10px;
}
#ob-arrow.ob-arrow-up::after {
  content: '';
  position: absolute;
  top: 2px; left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--card-bg, #faf7f1);
}
#ob-arrow.ob-arrow-down {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--border, #d4cbb8);
  bottom: -10px;
}
#ob-arrow.ob-arrow-down::after {
  content: '';
  position: absolute;
  bottom: 2px; left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--card-bg, #faf7f1);
}

#ob-step-counter {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#ob-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

#ob-body {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 14px;
  opacity: 0.85;
}

#ob-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#ob-skip {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

#ob-next {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity 0.15s;
}
#ob-next:active { opacity: 0.8; }

/* ── Onboarding skip confirmation toast ── */
#ob-skip-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  max-width: min(360px, calc(100vw - 32px));
  background: var(--ink);
  color: var(--paper);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#ob-skip-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Header top: streak badge (left) and settings (right) are absolutely
   positioned so the logo SVG is always perfectly centred ── */
#streak-badge {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#settings-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Tutorial settings row ── */
.settings-tutorial-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  text-align: left;
}
.settings-tutorial-row:hover { border-color: var(--rust); }
.settings-tutorial-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rust) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--rust) 25%, var(--border));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.settings-tutorial-text {
  flex: 1;
}
.settings-tutorial-title {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.settings-tutorial-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.settings-tutorial-chevron {
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== DRAW-SEARCH ===== */

.draw-search-toggle {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.draw-search-toggle:hover,
.draw-search-toggle.active {
  border-color: var(--rust);
  color: var(--rust);
  background: color-mix(in srgb, var(--rust) 8%, var(--card-bg));
}

.draw-search-panel {
  margin-top: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.draw-search-canvas {
  display: block;
  width: 100%;
  height: 200px;
  cursor: crosshair;
  touch-action: none;
  background: color-mix(in srgb, var(--ink) 3%, var(--card-bg));
}

.draw-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
}

.draw-search-hint {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.draw-search-clear-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.draw-search-clear-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ===== SEARCH RESULT — RADICAL HIGHLIGHT ===== */
.search-result-item.sri-radical .sri-source {
  color: var(--sage);
  font-weight: 500;
}
.search-result-item.sri-radical {
  border-left: 2px solid var(--sage);
}

/* ===== BACK PANEL — CURRICULUM LOCATIONS ===== */
.back-locations {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.loc-entry {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.loc-curr {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}

.loc-detail {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}