/* ========================================
   WOSHICND — Mandarin Terminal
   Thème repris de cyanoide (Nier Automata style)
   ======================================== */

:root {
  --font-main: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  /* Share Tech Mono n'a pas les voyelles à ton du pinyin (ā ǐ ǒ ǚ...) : plutôt
     que de laisser le navigateur basculer glyphe par glyphe sur une police de
     secours différente selon le système, tout le pinyin utilise une police
     mono dédiée qui couvre ces glyphes tout en restant dans l'esprit terminal. */
  --font-pinyin: 'JetBrains Mono', 'Noto Sans Mono', monospace;
}

.app.light {
  --bg: #f5f5f0;
  --bg-panel: rgba(240, 240, 235, 0.85);
  --bg-card: rgba(255, 255, 255, 0.6);
  --text: #0a0a0a;
  --accent: #0000FF;
  --accent-alt: #2222cc;
  --accent-glow: rgba(0, 0, 255, 0.15);
  --border: rgba(0, 0, 255, 0.25);
  --muted: #888888;
  --item-hover: rgba(0, 0, 255, 0.08);
  --item-selected: rgba(0, 0, 255, 0.14);
  --grid-color: rgba(0, 0, 255, 0.09);
  --vignette: rgba(0, 0, 0, 0.15);
  --tag-sens: #0000FF;
  --tag-son: #cc6a00;
  --tag-mot: #007a55;
  --tag-forme: #8800aa;
  --good: #0a8a3c;
  --good-glow: rgba(10, 138, 60, 0.2);
  --bad: #cc2222;
  --bad-glow: rgba(204, 34, 34, 0.2);
}

.app.dark {
  --bg: #0a0a0a;
  --bg-panel: rgba(15, 15, 15, 0.85);
  --bg-card: rgba(255, 255, 255, 0.04);
  --text: #e8e8e0;
  --accent: #FFFF00;
  --accent-alt: #cccc00;
  --accent-glow: rgba(255, 255, 0, 0.12);
  --border: rgba(255, 255, 0, 0.25);
  --muted: #666666;
  --item-hover: rgba(255, 255, 0, 0.06);
  --item-selected: rgba(255, 255, 0, 0.12);
  --grid-color: rgba(255, 255, 0, 0.07);
  --vignette: rgba(0, 0, 0, 0.4);
  --tag-sens: #FFFF00;
  --tag-son: #ff9d3d;
  --tag-mot: #4be3a4;
  --tag-forme: #d68bff;
  --good: #39ff6a;
  --good-glow: rgba(57, 255, 106, 0.25);
  --bad: #ff4d4d;
  --bad-glow: rgba(255, 77, 77, 0.25);
}

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

/* #app (id, spécificité 100) écrasait silencieusement le height de .app (classe,
   spécificité 10) plus bas — #app est retiré de ce sélecteur pour que .app
   reste la seule source de vérité sur sa taille. Sinon, configuration
   d'origine restaurée telle quelle : c'est la seule dont on ait la certitude
   qu'elle ne casse rien en mode standalone iOS (tout ce qu'on a essayé
   depuis — position:fixed sur body, -webkit-fill-available — a soit été
   sans effet, soit activement cassé l'affichage/le bouton thème). */
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  transition: background 0.6s ease, color 0.6s ease;
  box-sizing: border-box;
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Patch ciblé PWA installée sur iOS : confirmé présent uniquement en mode
   standalone (donc pas la barre d'outils Safari, qui est hors de notre
   contrôle et hors sujet ici) — une bande du fond blanc par défaut du
   WebView reste visible sous le contenu malgré height:100dvh/-webkit-fill-
   available sur .app. Repeint de force cette zone avec notre couleur de
   thème, quelle que soit la cause géométrique exacte du vide. Inactif en
   navigation normale (display-mode: browser), où il ne sert à rien. */
.safe-bottom-fill { display: none; }
@media (display-mode: standalone) {
  .safe-bottom-fill {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: max(40px, env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    z-index: 10;
    pointer-events: none;
  }
}

.layout {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.panel-left {
  width: 300px;
  min-width: 260px;
  height: 100%;
  padding: 40px 20px 20px 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 2;
  transition: background 0.6s ease, border-color 0.6s ease;
}

.panel-right {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.panel-right-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 40px 40px 60px;
  position: relative;
  z-index: 1;
}

/* --- Menu --- */
.menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 14px;
}

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

.menu-title {
  font-family: var(--font-main);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--accent);
  text-transform: uppercase;
  line-height: 1.1;
  transition: color 0.6s ease;
  animation: glitchText 10s linear infinite;
}

.cursor-blink {
  animation: blink 0.8s step-end infinite;
  color: var(--accent);
}

@keyframes blink { 50% { opacity: 0; } }

.menu-subtitle {
  font-family: var(--font-pinyin);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.menu-title-line {
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.4;
}

.menu-decorator {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  padding: 2px 0;
}

.decorator-bracket { color: var(--accent); opacity: 0.5; }
.decorator-dots { color: var(--accent); opacity: 0.4; }

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.menu-list::-webkit-scrollbar { width: 3px; }
.menu-list::-webkit-scrollbar-track { background: transparent; }
.menu-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

.menu-item:hover { background: var(--item-hover); border-color: var(--border); }

.menu-item.selected {
  background: var(--item-selected);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.menu-item-indicator {
  font-size: 12px;
  color: var(--accent);
  opacity: 0.6;
  width: 12px;
  text-align: center;
}
.menu-item.selected .menu-item-indicator { opacity: 1; }

.menu-item-labels { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.menu-item-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.menu-item.selected .menu-item-sub { color: var(--accent); opacity: 0.7; }

.menu-item-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 1; transform: translateX(0); }
  50% { opacity: 0.5; transform: translateX(4px); }
}

.menu-footer { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.menu-footer-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}

/* --- Theme / language toggles --- */
.toolbar-toggles {
  position: fixed;
  /* max() plutôt que top:16px seul : sur iPhone avec Dynamic Island/encoche,
     16px depuis le vrai bord du viewport (on s'étend dessous grâce à
     viewport-fit=cover) plaçait les boutons SOUS la zone système, invisibles
     derrière elle. env(safe-area-inset-top) redescend sous cette zone. */
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-toggle {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  font: inherit;
  color: inherit;
}
.theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }

.theme-toggle-track {
  width: 34px;
  height: 17px;
  border-radius: 2px;
  border: 1px solid var(--accent);
  position: relative;
  opacity: 0.8;
  display: block;
}
.theme-toggle-thumb {
  position: absolute;
  top: 1px;
  width: 13px;
  height: 13px;
  border-radius: 1px;
  background: var(--accent);
  transition: left 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}
.theme-toggle-thumb.light { left: 1px; }
.theme-toggle-thumb.dark { left: 18px; }
.theme-toggle-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
}

/* --- Page header (right panel) --- */
.page-header { margin-bottom: 24px; }
.page-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
}
.page-title .accent { color: var(--accent); }
.page-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
}
.page-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.35;
  margin-top: 10px;
}

/* --- Word grid --- */
.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.word-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 2px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
}
.word-card:hover { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
.word-card.open { border-color: var(--accent); background: var(--item-selected); }

.word-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.word-hanzi { font-size: 34px; font-weight: 600; line-height: 1; }
.word-pinyin { font-family: var(--font-pinyin); font-size: 13px; color: var(--accent); letter-spacing: 0.5px; }
.word-fr { margin-top: 6px; font-size: 15px; color: var(--text); opacity: 0.85; text-transform: uppercase; letter-spacing: 0.5px; }
.word-fr-emoji { font-size: 16px; }

.word-card-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }

.btn-audio {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-audio:hover { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.word-radical-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.word-radical-chip:hover { color: var(--accent); border-color: var(--accent); }

/* --- Breakdown (expanded) --- */
.word-breakdown {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.breakdown-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breakdown-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 10px;
  min-width: 52px;
}
.breakdown-part-emoji { font-size: 16px; line-height: 1; margin-bottom: 2px; }
.breakdown-part-char { font-size: 22px; line-height: 1.1; }
.breakdown-result { border-color: var(--accent); }
.breakdown-part-pinyin { font-family: var(--font-pinyin); font-size: 10px; color: var(--muted); margin-top: 2px; }
.breakdown-part-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--bg);
}
.breakdown-part-tag.sens { background: var(--tag-sens); }
.breakdown-part-tag.son { background: var(--tag-son); }
.breakdown-part-tag.mot { background: var(--tag-mot); }
.breakdown-part-tag.forme { background: var(--tag-forme); }

.breakdown-plus { color: var(--muted); font-size: 14px; }
.breakdown-arrow { color: var(--accent); font-size: 16px; margin: 0 2px; }

.breakdown-meaning {
  font-size: 13px;
  color: var(--muted);
}
.breakdown-meaning b { color: var(--text); font-weight: 500; }

.breakdown-logic {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.5;
}
.breakdown-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

/* --- Phrases (groupées par domaine) --- */
.domain-block { margin-bottom: 30px; }
.domain-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.word-hanzi-sentence { font-size: 20px; line-height: 1.4; font-weight: 500; }
.word-pinyin-sentence { font-family: var(--font-pinyin); font-size: 12px; color: var(--accent); margin-top: 4px; }

/* --- Grammaire --- */
.grammar-list { display: flex; flex-direction: column; gap: 20px; }
.grammar-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 2px;
  padding: 18px 20px;
}
.grammar-title { font-size: 18px; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 8px; }
.grammar-rule { font-size: 13px; color: var(--text); opacity: 0.85; line-height: 1.6; margin-bottom: 14px; }
.grammar-examples { display: flex; flex-direction: column; gap: 8px; }
.grammar-example {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 10px 12px;
}
.grammar-example.bad { border-color: rgba(200, 60, 60, 0.4); }
.grammar-example-mark { font-size: 14px; margin-top: 2px; }
.grammar-example-hanzi { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.grammar-example-pinyin { font-family: var(--font-pinyin); font-size: 12px; color: var(--accent); margin-top: 3px; }
.grammar-example-fr { font-size: 13px; color: var(--text); opacity: 0.8; margin-top: 2px; }
.grammar-example-note { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 4px; }

/* --- Explorer (réseau de mots, vue orbite) --- */
.orbit-toolbar { display: flex; justify-content: center; margin-bottom: 18px; }
.orbit-wrap {
  position: relative;
  width: min(420px, 92vw);
  height: min(420px, 92vw);
  margin: 0 auto;
}
.orbit-audio-row { display: flex; justify-content: center; margin-top: 16px; }

/* anneau pointillé décoratif qui trace le chemin de l'orbite */
.orbit-ring {
  position: absolute;
  inset: 14%;
  border: 1px dashed var(--accent);
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
}

.orbit-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--accent);
  background: var(--item-selected);
  box-shadow: 0 0 24px var(--accent-glow);
  text-align: center;
  z-index: 2;
}
.orbit-emoji { font-size: 20px; }
.orbit-hanzi { font-size: 26px; font-weight: 600; line-height: 1.1; }
.orbit-pinyin { font-family: var(--font-pinyin); font-size: 12px; color: var(--accent); }
.orbit-label {
  font-size: 13px; color: var(--text); opacity: 1; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  max-width: 120px;
  line-height: 1.25;
}
.orbit-center .btn-audio { font-size: 9px; padding: 3px 6px; margin-top: 1px; }

/* piste invisible qui tourne en continu ; le satellite est décalé du rayon
   --r (fixé en JS selon la taille réelle du conteneur) et contre-tourne pour
   rester lisible pendant que la piste l'emmène autour du centre. */
.orbit-track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  animation-name: orbit-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbit-counter-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.orbit-satellite {
  position: absolute;
  top: calc(var(--r, 140px) * -1);
  left: 0;
  transform: translate(-50%, -50%);
  animation-name: orbit-counter-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 80px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
  z-index: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.orbit-satellite.navigable {
  cursor: pointer;
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.orbit-satellite.navigable:hover, .orbit-satellite.navigable:active {
  box-shadow: 0 0 18px var(--accent-glow);
  background: var(--item-selected);
}
.orbit-satellite.leaf { border-style: dashed; opacity: 0.55; cursor: help; }

.orbit-sat-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.orbit-satellite.leaf .orbit-sat-dot { background: var(--muted); box-shadow: none; }
.orbit-sat-emoji { font-size: 15px; line-height: 1; }
.orbit-satellite.leaf .orbit-sat-emoji { opacity: 0.7; filter: grayscale(0.4); }
.orbit-sat-char { font-size: 15px; font-weight: 600; line-height: 1; }
.orbit-sat-pinyin { font-family: var(--font-pinyin); font-size: 9px; color: var(--muted); }
.orbit-satellite.navigable .orbit-sat-pinyin { color: var(--accent); }

@media (max-width: 768px) {
  .orbit-wrap { width: min(300px, 86vw); height: min(300px, 86vw); }
  .orbit-center { width: 140px; padding: 10px; }
  .orbit-hanzi { font-size: 22px; }
  .orbit-label { font-size: 11px; max-width: 104px; }
  .orbit-satellite { width: 60px; }
  .orbit-sat-char { font-size: 13px; }
  .orbit-sat-emoji { font-size: 13px; }
  .orbit-audio .btn-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-track, .orbit-satellite { animation: none; }
}

/* --- Écriture (tracé) --- */
.write-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.write-info {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--muted);
  text-transform: uppercase;
  max-width: 100%;
}
.write-pinyin { font-family: var(--font-pinyin); color: var(--accent); font-size: 14px; }
.write-meaning { color: var(--text); opacity: 0.8; max-width: 100%; text-align: center; }
.write-meaning-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-align: center;
  max-width: 90%;
  margin-top: -8px;
}
.write-emoji { font-size: 16px; }
.canvas-stack {
  position: relative;
  width: min(340px, 80vw);
  height: min(340px, 80vw);
  touch-action: none;
  border-radius: 2px;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.25s ease;
}
.canvas-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-stack.good { box-shadow: 0 0 18px var(--good-glow), 0 0 0 2px var(--good); }
.canvas-stack.bad { box-shadow: 0 0 18px var(--bad-glow), 0 0 0 2px var(--bad); }
#fgCanvas { cursor: crosshair; }
.write-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.write-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  min-height: 16px;
}
.write-status.good { color: var(--good); }
.write-status.bad { color: var(--bad); }

/* --- Radicaux page --- */
.radical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.radical-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 2px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.radical-card:hover, .radical-card.active { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
.radical-card-char { font-size: 30px; }
.radical-card-emoji { font-size: 20px; vertical-align: middle; }
.radical-card-meaning { font-size: 13px; margin-top: 4px; opacity: 0.85; }
.radical-card-pinyin { font-family: var(--font-pinyin); font-size: 11px; color: var(--accent); }
.radical-card-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 6px; letter-spacing: 1px; }

.radical-results { margin-top: 28px; }

/* --- Révision / flashcards --- */
.flash-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 10px; }
.flash-scope {
  display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-start;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  max-width: 100%; padding: 2px 2px 6px;
}
.flash-scope::-webkit-scrollbar { height: 3px; }
.flash-scope::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.flash-scope-btn {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.flash-scope-btn.active { color: var(--accent); border-color: var(--accent); background: var(--item-selected); }
.shuffle-chip { border-style: dashed; }

.flash-card {
  width: min(420px, 90%);
  min-height: 260px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.flash-progress {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}
.flash-hanzi { font-size: 64px; font-weight: 600; }
.flash-emoji { font-size: 34px; }
.flash-hint { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.flash-back { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
.flash-pinyin { font-family: var(--font-pinyin); font-size: 16px; color: var(--accent); }
.flash-fr { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
.flash-logic { font-size: 12px; color: var(--muted); max-width: 320px; margin-top: 6px; }

.flash-controls { display: flex; gap: 12px; }
.flash-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.flash-btn:hover { box-shadow: 0 0 10px var(--accent-glow); }
.flash-btn.know { color: var(--tag-mot); border-color: var(--tag-mot); }
.flash-btn.retry { color: var(--tag-son); border-color: var(--tag-son); }

.flash-empty { font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: center; padding: 40px 0; }

/* --- Overlays --- */
.overlay-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}
.overlay-noise {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 51; opacity: 0.35; mix-blend-mode: overlay; image-rendering: pixelated;
}
.overlay-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 49;
  background: radial-gradient(ellipse at center, transparent 50%, var(--vignette) 100%);
}
.overlay-glitch-line {
  position: fixed; left: 0; right: 0; height: 2px; background: var(--accent);
  opacity: 0; pointer-events: none; z-index: 52; animation: glitchLine 8s linear infinite;
}
@keyframes glitchLine {
  0%, 94% { opacity: 0; top: 0; }
  95% { opacity: 0.15; top: 20%; }
  96% { opacity: 0; top: 20%; }
  97% { opacity: 0.2; top: 60%; }
  97.5% { opacity: 0; top: 60%; }
  98% { opacity: 0.1; top: 80%; }
  98.5% { opacity: 0; }
  99% { opacity: 0.15; top: 40%; }
  99.5% { opacity: 0; top: 40%; }
  100% { opacity: 0; top: 0; }
}
@keyframes glitchText {
  0%, 96% { transform: none; text-shadow: none; }
  96.5% { transform: translateX(-2px) skewX(-1deg); text-shadow: 2px 0 var(--accent), -2px 0 rgba(255,0,0,0.3); }
  97% { transform: translateX(2px) skewX(0.5deg); text-shadow: -2px 0 var(--accent), 2px 0 rgba(0,255,255,0.3); }
  97.5% { transform: none; text-shadow: none; }
  98% { transform: translateX(-1px); text-shadow: 1px 0 rgba(255,0,0,0.5); }
  98.5% { transform: none; text-shadow: none; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  /* flex-basis en % du parent (.layout, height:100% de .app) plutôt qu'en vh :
     sur iOS en PWA standalone, vh ne correspond pas toujours exactement à la
     fenêtre réelle, et 40vh+60vh pouvait tomber un peu court, laissant un vide
     (fond blanc du WebView) sous le contenu. Le % reste toujours exact. */
  .layout { flex-direction: column; }
  .panel-left {
    width: 100%; min-width: unset; height: 40%; max-height: 40%; flex-shrink: 0;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 56px 16px 14px 18px;
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }
  .panel-right { height: 60%; flex: 1; }
  .panel-right-inner { padding: 16px 16px 20px; }
  .menu-title { font-size: 20px; letter-spacing: 3px; }
  .menu-item { padding: 7px 10px; font-size: 13px; }
  .toolbar-toggles { top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); gap: 6px; }
  .theme-toggle { padding: 6px 8px; }
  .page-header { margin-bottom: 12px; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 10px; }
  .word-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .word-hanzi { font-size: 28px; }
  .flash-hanzi { font-size: 48px; }

  /* Écriture : tout doit tenir sans scroll dans les 60vh du panneau droit */
  .write-wrap { gap: 8px; }
  .flash-scope { padding-bottom: 4px; }
  .write-info { font-size: 10px; gap: 8px; }
  .write-pinyin { font-size: 12px; }
  .canvas-stack { width: min(200px, 50vw); height: min(200px, 50vw); }
  .write-status { font-size: 10px; min-height: 13px; }
  .write-controls { gap: 6px; }
  .write-controls .flash-btn, .write-controls .btn-audio { padding: 8px 12px; font-size: 13px; }
  .write-controls .btn-label { display: none; }
}