/* LatinBen — styles
 * Bright, playful, child-first. Card flip + tracing canvas keep the spirit of
 * the original front face. Colors are driven by CSS vars set per palette.
 */

:root {
  --lb-bg1: #FFE7A0;
  --lb-bg2: #FFC4D6;
  --lb-accent: #FF8A5B;
  --lb-ink: #5B3A29;
  --lb-card: #FFFDF5;
}

/* Handwriting font for everything the child is learning to form */
.hand { font-family: 'LatinHand', 'Fraunces', cursive; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: 'DM Mono', 'Fraunces', system-ui, sans-serif;
  color: var(--lb-ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

body {
  background: linear-gradient(160deg, var(--lb-bg1), var(--lb-bg2));
  transition: background 0.5s ease;
}

/* Floating fun shapes in the background */
.bg-deco { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-deco span {
  position: absolute; font-size: 44px; opacity: 0.35;
  animation: float 6s ease-in-out infinite;
}
.bg-deco span:nth-child(1) { top: 8%;  left: 8%;  animation-delay: 0s; }
.bg-deco span:nth-child(2) { top: 18%; right: 10%; animation-delay: 1.2s; font-size: 38px; }
.bg-deco span:nth-child(3) { bottom: 22%; left: 12%; animation-delay: 0.6s; font-size: 50px; }
.bg-deco span:nth-child(4) { bottom: 14%; right: 14%; animation-delay: 1.8s; }
.bg-deco span:nth-child(5) { top: 45%; left: 4%;  animation-delay: 2.4s; font-size: 34px; }
.bg-deco span:nth-child(6) { top: 40%; right: 5%; animation-delay: 0.9s; font-size: 40px; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-16px) rotate(6deg); }
}

/* ── Home screen ─────────────────────────────────────────────────────────── */
#home-screen {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.home-title {
  font-family: 'Fraunces', 'DM Mono', serif;
  font-weight: 700;
  font-size: clamp(32px, 10vw, 52px);
  color: var(--lb-ink);
  text-shadow: 0 3px 0 rgba(255,255,255,0.55);
  letter-spacing: 1px;
  margin-top: clamp(14px, 4vw, 28px);
  position: relative; z-index: 2;
}
.home-tagline {
  font-size: clamp(12px, 3.2vw, 16px);
  color: var(--lb-ink);
  opacity: 0.7;
  margin-top: 2px;
  position: relative; z-index: 2;
}

/* Scattered card layout — each card is absolutely placed via CSS vars */
.home-scatter {
  position: absolute;
  top: 0; bottom: 0;
  /* On wide screens keep the scatter zone phone-width so cards aren't too spread */
  width: min(100%, 520px);
  left: 50%; transform: translateX(-50%);
  pointer-events: none;
}

.home-card {
  pointer-events: all;
  position: absolute;
  background: var(--hc-bg);
  border: none; cursor: grab;
  border-radius: 28px;
  padding: 18px 20px 16px;
  width: clamp(140px, 44%, 230px);
  box-shadow: 0 6px 0 var(--hc-shadow), 0 10px 28px rgba(0,0,0,0.16);
  transform: rotate(var(--hc-rot));
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: hc-float 4s ease-in-out infinite;
  touch-action: none;  /* prevent scroll interference while dragging */
  user-select: none;
}
.home-card:active { cursor: grabbing; }
/* Cards scattered across the screen — two per row, staggered heights.
   left positions stay in CSS; top is set dynamically by positionHomeCards() in JS
   so the cards always fill the usable zone between title and palette button. */
#btn-numbers   { left: 4%;  animation-delay: 0s; }
#btn-uppercase { left: 50%; animation-delay: 0.9s; }
#btn-lowercase { left: 4%;  animation-delay: 1.7s; }
#btn-words     { left: 50%; animation-delay: 2.4s; }

@keyframes hc-float {
  0%,100% { transform: rotate(var(--hc-rot)) translateY(0); }
  50%      { transform: rotate(var(--hc-rot)) translateY(-9px); }
}
.home-card:active {
  transform: rotate(var(--hc-rot)) translateY(5px) scale(0.96);
  box-shadow: 0 2px 0 var(--hc-shadow), 0 4px 10px rgba(0,0,0,0.14);
  animation: none;
}

.hc-emoji {
  font-size: clamp(42px, 12vw, 60px);
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
}
.hc-label {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(13px, 4vw, 22px);
  color: var(--lb-ink);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
  max-width: 100%;
}
.hc-sample {
  font-size: clamp(11px, 2.8vw, 15px);
  color: var(--lb-ink); opacity: 0.65;
  letter-spacing: 2px; margin-top: 2px;
  word-break: break-all;
  text-align: center;
  max-width: 100%;
}

/* Strictness slider in settings */
.set-row-col {
  flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 0;
}
.set-slider-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; color: #444;
}
.set-strictness-val {
  font-weight: 700; font-size: 16px; color: var(--lb-accent);
  min-width: 28px; text-align: right;
}
.set-slider-row {
  display: flex; align-items: center; gap: 8px;
}
.set-slider-end { font-size: 18px; }
.set-slider-row input[type="range"] {
  flex: 1; height: 6px; accent-color: var(--lb-accent);
  cursor: pointer;
}
.set-slider-desc {
  font-size: 12px; color: #999; line-height: 1.4; text-align: center;
}

/* Bottom-right palette button */
.palette-btn {
  position: fixed; z-index: 5;
  right: 20px; bottom: 22px;
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid #fff; cursor: pointer;
  background: conic-gradient(#FF8A5B, #FFD166, #06D6A0, #3DB2FF, #FF6FB5, #FF8A5B);
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 8px 18px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  transition: transform 0.12s ease;
}
.palette-btn:active { transform: scale(0.92); }
.palette-btn.pop { animation: pop 0.4s ease; }
@keyframes pop {
  0% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.18) rotate(60deg); }
  100% { transform: scale(1) rotate(120deg); }
}

/* Top-right parent (hamburger) button — quiet, parents only */
.parent-wrap {
  position: fixed; z-index: 5; right: 14px; top: 14px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.parent-btn {
  width: 46px; height: 46px; border-radius: 14px;
  border: none; cursor: pointer;
  background: rgba(255,255,255,0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.parent-hint {
  font-size: 10px; color: var(--lb-ink); opacity: 0.55;
  background: rgba(255,255,255,0.4);
  padding: 3px 8px; border-radius: 8px;
  text-align: right; line-height: 1.4;
  white-space: pre-line;
}
.parent-btn span { width: 20px; height: 2.6px; border-radius: 2px; background: var(--lb-ink); opacity: 0.55; }

/* Home-only controls hide during practice so they never overlap the card nav */
body.in-practice .palette-btn,
body.in-practice .parent-wrap,
body.in-words .palette-btn,
body.in-words .parent-wrap { display: none; }

/* ── Practice screen ─────────────────────────────────────────────────────── */
#practice-screen {
  position: relative; z-index: 1;
  height: 100%;
  display: none; flex-direction: column;
  align-items: center;
  padding: 14px 16px 18px;
}
.practice-top {
  width: 100%; max-width: 420px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.home-btn {
  border: none; cursor: pointer;
  background: var(--lb-card);
  border-radius: 18px; padding: 10px 18px;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px;
  color: var(--lb-ink);
  box-shadow: 0 5px 0 rgba(0,0,0,0.12);
}
.home-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.brand-mini { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; opacity: 0.7; }

/* Flip card */
.card-scene { width: 100%; max-width: 420px; perspective: 1400px; flex: 1; min-height: 0; display:flex; }
.flip-card {
  width: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.flip-card.flipped { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--lb-card);
  border-radius: 28px;
  box-shadow: 0 12px 0 rgba(0,0,0,0.1), 0 16px 36px rgba(0,0,0,0.16);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.face.back { transform: rotateY(180deg); }

/* Front face */
.glyph-name-row {
  text-align: center; padding: 14px 10px 6px;
}
.trace-label {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 2px;
}
.glyph-name {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 52px; line-height: 1; color: var(--lb-accent);
  cursor: pointer;
}

.canvas-area {
  flex: 1; min-height: 0;
  padding: 6px 18px 10px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.canvas-wrap {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 1;
  border-radius: 22px;
  background: repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0,0,0,0.05) 50px),
              repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0,0,0,0.05) 50px),
              #fff;
  border: 3px dashed rgba(0,0,0,0.12);
  overflow: hidden;
}
#trace-guide { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
#showme-host { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
#trace-guide svg, #showme-host svg { position: absolute; inset: 0; }
#draw-canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }

.learned-badge {
  position: absolute; top: 10px; left: 10px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #06D6A0; color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  z-index: 3;
}

/* Front actions */
.front-actions {
  display: flex; gap: 12px; padding: 6px 18px 4px; justify-content: center;
}
.act-btn {
  border: none; cursor: pointer;
  background: var(--lb-bg1);
  color: var(--lb-ink);
  border-radius: 18px; padding: 12px 18px;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px;
  box-shadow: 0 5px 0 rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 7px;
}
.act-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.act-btn.flip { background: var(--lb-accent); color: #fff; }

/* Nav strip (both faces) */
.nav-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 2px solid rgba(0,0,0,0.07);
}
.nav-arrow {
  border: none; cursor: pointer;
  background: var(--lb-bg2);
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 26px; color: var(--lb-ink);
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
}
.nav-arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.nav-counter { font-size: 16px; opacity: 0.6; }

/* Back face */
.back-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px 8px;
}
.back-glyph {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 60px; color: var(--lb-accent); line-height: 1;
}
.back-words-label {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.5;
}
.back-words {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.word-item {
  border: none; cursor: pointer; text-align: left;
  background: var(--lb-bg1);
  border-radius: 18px; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.word-item:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.word-emoji { font-size: 40px; width: 52px; text-align: center; flex-shrink: 0; }
.word-text { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; color: var(--lb-ink); }

/* Celebration */
.celebrate {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}
.celebrate.show { animation: celebrate 1.4s ease; }
@keyframes celebrate {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.celebrate-burst {
  background: rgba(255,255,255,0.92);
  border-radius: 30px; padding: 24px 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  text-align: center;
}
.celebrate-emoji { font-size: 64px; }
.celebrate-text {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 30px;
  color: var(--lb-accent); margin-top: 6px;
}
.celebrate.retry .celebrate-text { color: #E08A2B; font-size: 24px; }

/* ── Parent popup ────────────────────────────────────────────────────────── */
.popup {
  position: fixed; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); padding: 20px;
}
.popup-inner {
  background: #fff; color: #333;
  font-family: 'DM Mono', monospace;
  border-radius: 24px;
  width: 100%; max-width: 380px;
  max-height: 85vh;
  display: flex; flex-direction: column;  /* header fixed, body scrolls */
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;  /* clip to rounded corners; scrolling is on popup-body */
}
/* Sticky title bar — always visible, never scrolls */
.popup-header {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 22px 12px;
  border-bottom: 1px solid #f0ece6;
  background: #fff;
}
/* X close button */
.popup-close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: #f3efe9; color: #888;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
  transition: background .14s, color .14s;
}
.popup-close:hover { background: #ede6da; color: #444; }
.popup-close:active { background: #e2d8cc; }
/* Scrollable content area */
.popup-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 22px 22px;
  /* Scrollbar visually inside the rounded panel */
  scrollbar-width: thin;
  scrollbar-color: #d5cabb transparent;
}
.popup-body::-webkit-scrollbar { width: 5px; }
.popup-body::-webkit-scrollbar-track { background: transparent; }
.popup-body::-webkit-scrollbar-thumb { background: #d5cabb; border-radius: 3px; }
.popup-title {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px;
  color: var(--lb-ink); margin-bottom: 2px;
}
.popup-note { font-size: 12px; color: #999; }
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid #eee;
  font-size: 15px; color: #444;
}
.set-row:last-of-type { border-bottom: none; }
.set-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--lb-accent); }
.popup-btn {
  width: 100%; border: none; cursor: pointer;
  border-radius: 14px; padding: 13px; margin-top: 14px;
  font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 500;
}
.popup-btn.danger { background: #fde8e8; color: #c0392b; }
.popup-btn.primary { background: var(--lb-accent); color: #fff; }
.popup-about { font-size: 12px; color: #888; margin-top: 16px; line-height: 1.5; }

/* ── Let's write! (landscape words screen) ───────────────────────────────── */
#words-screen {
  position: relative; z-index: 1; height: 100%;
  display: none; flex-direction: column; padding: 10px 14px 14px;
}
.words-stage {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  transform-origin: center center;
}
.words-top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-bottom: 8px;
}
.words-counter { font-size: 16px; opacity: 0.6; }

.words-flip { flex: 1; min-height: 0; position: relative; perspective: 1600px; }
.wface {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--lb-card); border-radius: 24px;
  box-shadow: 0 10px 0 rgba(0,0,0,0.1), 0 14px 30px rgba(0,0,0,0.16);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  min-height: 0;
}
.wfront { transform: rotateY(0deg); }
.wback { transform: rotateY(180deg); }
.words-flip.flipped .wfront { transform: rotateY(-180deg); }
.words-flip.flipped .wback { transform: rotateY(0deg); }

.words-canvas-area {
  flex: 1; min-height: 0; padding: 10px 14px 4px;
  display: flex; align-items: center; justify-content: center;
}
.words-canvas-wrap {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0,0,0,0.05) 50px),
              repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0,0,0,0.05) 50px),
              #fff;
  border: 3px dashed rgba(0,0,0,0.12); overflow: hidden;
}
#words-guide, #words-showme { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
#words-guide svg, #words-showme svg { position: absolute; inset: 0; }
#words-canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }

.words-actions {
  display: flex; gap: 8px; padding: 6px 12px 8px; justify-content: center;
  align-items: center; flex-wrap: wrap;
}
.words-actions .act-btn { padding: 9px 13px; font-size: 15px; }
.words-nav {
  width: 44px; height: 44px; font-size: 24px; background: var(--lb-bg2);
}

.words-meaning {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  overflow: hidden; padding: 8px;
}
.words-meaning-emoji { font-size: clamp(48px, 15vmin, 120px); line-height: 1; }
.words-meaning-word {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(28px, 8vmin, 56px); color: var(--lb-accent); letter-spacing: 2px;
  text-align: center;
}

/* Rotate prompt: only shown on the words screen when in portrait on a phone */
.rotate-hint {
  position: absolute; inset: 0; z-index: 40;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; padding: 30px;
  background: linear-gradient(160deg, var(--lb-bg1), var(--lb-bg2));
}
.rotate-emoji { font-size: 90px; animation: rotatewiggle 2s ease-in-out infinite; }
@keyframes rotatewiggle { 0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);} }
.rotate-text {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(22px, 6vw, 30px); color: var(--lb-ink); max-width: 320px; line-height: 1.3;
}
/* In portrait, show the rotate hint and hide the writing card */
@media (orientation: portrait) {
  body.in-words .rotate-hint { display: flex; }
  body.in-words .words-flip,
  body.in-words .words-top { visibility: hidden; }
}
@media (orientation: landscape) {
  body.in-words .rotate-hint { display: none; }
}

/* Rotate screen: home + start buttons */
.rotate-home-btn { position: absolute; top: 16px; left: 16px; }
.rotate-start-btn {
  border: none; cursor: pointer;
  background: var(--lb-accent); color: #fff;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px;
  padding: 16px 32px; border-radius: 22px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.18);
  margin-top: 8px;
}
.rotate-start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); }

/* Portrait lock for Home + the 3 single-glyph curricula */
.portrait-lock {
  position: fixed; inset: 0; z-index: 60;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; padding: 30px;
  background: linear-gradient(160deg, var(--lb-bg1), var(--lb-bg2));
}
@media (orientation: landscape) {
  /* Lock everything EXCEPT the words deck to portrait — but only on phone-like
     devices. Desktop/laptop (`.is-desktop`) can't rotate, so never lock them. */
  body:not(.in-words):not(.is-desktop) .portrait-lock { display: flex; }
}

/* Forced-landscape: user tapped "Start writing" while still holding the phone
   upright. Show the writing card and hide the rotate prompt regardless of the
   actual orientation. When the device is physically portrait we rotate the
   whole stage 90° (sizing handled in JS) so the child gets a real sideways
   writing strip without turning the phone. */
body.words-force-landscape .rotate-hint { display: none !important; }
body.words-force-landscape .words-flip,
body.words-force-landscape .words-top { visibility: visible !important; }

@media (orientation: portrait) {
  body.words-force-landscape #words-screen { padding: 0; overflow: hidden; }
  body.words-force-landscape .words-stage {
    position: absolute; top: 0; left: 0;
    transform-origin: top left;
    /* rotate about top-left, then shift right by one screen-width so the
       rotated strip lands back on-screen. width/height (swapped) set in JS. */
    transform: rotate(90deg) translateY(-100%);
    padding: 10px 14px 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Custom letters — Settings section + recorder overlay
   ════════════════════════════════════════════════════════════════════════ */

/* Settings: custom-letters block */
.set-section {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid #eee;
}
.set-section-title {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px;
  color: var(--lb-ink); margin-bottom: 4px;
}
.set-section-note { font-size: 12px; color: #999; margin-bottom: 12px; line-height: 1.5; }
.popup-btn.small { font-size: 13px; padding: 11px; margin-top: 10px; }
.popup-btn:not(.primary):not(.danger) { background: #f3efe6; color: var(--lb-ink); }
.popup-btn:disabled { opacity: 0.45; pointer-events: none; }
.set-btn-row { display: flex; gap: 10px; }
.set-btn-row .popup-btn { margin-top: 10px; }

/* Recorder overlay */
.recorder {
  position: fixed; inset: 0; z-index: 100;
  display: none; flex-direction: column;
  background: linear-gradient(160deg, #f6efe2, #efe6d4);
  font-family: 'DM Mono', monospace; color: var(--lb-ink);
}
.recorder.open { display: flex; }
body.recorder-open { overflow: hidden; }

.rec-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--lb-card);
  border-bottom: 1px solid #e4dcc9;
  box-shadow: 0 2px 10px rgba(91,58,41,0.08);
}
.rec-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; }
.rec-pos { margin-left: auto; font-size: 13px; color: #a99; }

.rec-body { flex: 1; display: flex; min-height: 0; }

.rec-rail {
  flex: 0 0 60px;
  background: var(--lb-card);
  border-right: 1px solid #e4dcc9;
  overflow-y: auto; padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}
.rec-grp { font-size: 10px; color: #b0a48c; text-align: center; margin: 8px 0 3px; letter-spacing: 1px; }
.rec-cell {
  width: 42px; height: 42px; margin: 3px auto;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px;
  border-radius: 11px; border: 2px solid transparent;
  color: #b3a890; position: relative; cursor: pointer;
}
.rec-cell.done { color: var(--lb-ink); }
.rec-cell.done::after {
  content: ''; position: absolute; right: 4px; top: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: #4a9a82;
}
.rec-cell.active { background: #f3ece0; border-color: var(--lb-accent); color: var(--lb-accent); }

.rec-stage { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px; }
.rec-pad {
  position: relative; flex: 1; min-height: 0;
  aspect-ratio: 1 / 1; max-height: 100%; max-width: 100%;
  margin: 0 auto;
  background: var(--lb-card);
  border: 1px solid #e4dcc9; border-radius: 20px;
  box-shadow: 0 4px 16px rgba(91,58,41,0.10);
  touch-action: none;
}
.rec-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 20px; display: block; }
#rec-guide { z-index: 1; }
#rec-ink { z-index: 2; }
.rec-hint { flex: 0 0 auto; text-align: center; font-size: 12px; color: #a99680; margin-top: 10px; }

.rec-actions {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--lb-card);
  border-top: 1px solid #e4dcc9;
}
.rec-strokes { font-size: 13px; color: #a99680; margin-right: auto; }
.rec-strokes b { color: var(--lb-ink); }

@media (max-width: 560px) {
  .rec-rail { flex-basis: 52px; }
  .rec-cell { width: 38px; height: 38px; font-size: 16px; }
  .rec-title { font-size: 16px; }
}

/* ── Glyph-set library picker ──────────────────────────────────────────── */
.glyph-library {
  margin-top: 12px;
  border: 1px solid #e8e0d4;
  border-radius: 16px;
  overflow: hidden;
  background: #faf7f2;
}
.glyph-library-title {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #aaa;
  padding: 10px 14px 6px;
}
.glyph-library-list { display: flex; flex-direction: column; }
.lib-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #c5b89a;
  padding: 8px 14px 3px; background: #f3ede3;
}
.lib-empty {
  font-size: 12px; color: #bbb; padding: 10px 14px; display: block;
}
/* card = row container (div, not a button) */
.lib-set-card {
  display: flex; align-items: stretch;
  border-top: 1px solid #ede7dc;
}
.lib-set-card:first-child { border-top: none; }
/* the main load button inside the card */
.lib-set-load {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 11px 10px 11px 14px;
  cursor: pointer; text-align: left; min-width: 0;
}
.lib-set-load:active { background: #f0e9df; }
.lib-set-emoji { font-size: 24px; flex-shrink: 0; line-height: 1; }
.lib-set-info  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lib-set-name  { font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px; color: #2b2b2b; }
.lib-set-author{ font-size: 11px; color: #999; }
.lib-set-desc  { font-size: 11px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-set-action {
  font-size: 12px; font-weight: 700; color: var(--lb-accent);
  background: rgba(0,0,0,.04); border-radius: 8px;
  padding: 5px 10px; flex-shrink: 0; white-space: nowrap;
}
/* delete button for user-saved sets */
.lib-set-del {
  flex-shrink: 0; border: none; background: none;
  padding: 0 12px; font-size: 14px; color: #ccc; cursor: pointer;
  border-left: 1px solid #ede7dc;
}
.lib-set-del:hover { color: #c0392b; background: #fde8e8; }
.lib-browse, .lib-cancel {
  display: block; width: calc(100% - 28px);
  margin: 8px 14px 4px; border-radius: 10px;
}
.lib-cancel { color: #aaa; background: none; margin-bottom: 10px; }

/* ── Language picker ─────────────────────────────────────────────────────── */
.lang-popup-inner {
  max-width: 340px;
}
.lang-popup-body {
  padding: 12px 16px 20px;
}
.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lang-btn {
  display: flex; align-items: center; gap: 12px;
  background: #f5f0e8; border: 2px solid transparent;
  border-radius: 16px; padding: 14px 16px;
  cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s;
}
.lang-btn:active { background: #ede6d9; }
.lang-btn.active {
  border-color: var(--lb-accent);
  background: #fff8f4;
}
.lang-flag { font-size: 28px; line-height: 1; flex-shrink: 0; }
.lang-name {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 15px; color: var(--lb-ink);
}

/* ── Gamification ────────────────────────────────────────────────────────── */

/* Star jar — in the normal flow of #home-screen, centered below the tagline.
   Draggable: detaches to position:fixed on first drag move.
   z-index:15 keeps it above home cards (which peak at z-index:10 when dragged). */
.star-jar-wrap {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 15;
  margin-top: 6px;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
  cursor: grab;
}
.star-jar-wrap:active { cursor: grabbing; }
.star-jar {
  width: 80px; height: 88px;
  transform-origin: center bottom;
}
.star-jar-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: #a99680;
  margin-top: 2px; letter-spacing: 0.5px;
  pointer-events: none;
}

/* Mini jar in practice screen top bar */
.practice-jar {
  width: 120px; height: 28px;
  flex-shrink: 0;
}
.practice-jar svg { display: block; }

/* Jar receives a star: quick bounce (home jar — can rotate) */
@keyframes jar-ping {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.18) rotate(-4deg); }
  55%  { transform: scale(1.12) rotate(3deg); }
  80%  { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
/* Mini bar ping — scale only, no rotation */
@keyframes mini-jar-ping {
  0%   { transform: scaleY(1); }
  30%  { transform: scaleY(1.25); }
  60%  { transform: scaleY(0.92); }
  100% { transform: scaleY(1); }
}
.jar-ping { animation: jar-ping 0.48s cubic-bezier(.36,.07,.19,.97) both; }
.practice-jar.jar-ping { animation: mini-jar-ping 0.42s cubic-bezier(.36,.07,.19,.97) both; }

/* Letter alive: canvas-wrap bounces on success */
@keyframes letter-alive {
  0%   { transform: scale(1);    filter: brightness(1); }
  20%  { transform: scale(1.04); filter: brightness(1.15) drop-shadow(0 0 12px var(--lb-accent)); }
  50%  { transform: scale(0.97); filter: brightness(1.08); }
  70%  { transform: scale(1.02); filter: brightness(1.12) drop-shadow(0 0 8px var(--lb-accent)); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.letter-alive {
  animation: letter-alive 0.65s cubic-bezier(.36,.07,.19,.97) both;
}

/* Jar burst overlay animations */
@keyframes jarBurstIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes jarBurstOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.1); }
}
@keyframes jarBounce {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
/* Back-exit toast animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Chinese / Pinyin font override ─────────────────────────────────────── */
/* Fraunces lacks many toned pinyin glyphs (ā ō ē ū ǖ etc.), causing the   */
/* browser to fall back to a system font where diacritics misalign.         */
/* Noto Sans has full precomposed pinyin coverage.                           */
body.lang-zh .word-text,
body.lang-zh .words-meaning-word,
body.lang-zh .back-word,
body.lang-zh .word-item .word-text,
body.lang-zh .home-title,
body.lang-zh .home-tagline,
body.lang-zh .hc-label,
body.lang-zh .card-glyph,
body.lang-zh .practice-top .brand-mini {
  font-family: 'Noto Sans', 'Fraunces', sans-serif;
}

/* Chinese: glyph-name and hand-rendered labels need Noto Sans for toned pinyin */
body.lang-zh #glyph-name,
body.lang-zh .glyph-name,
body.lang-zh .back-glyph,
body.lang-zh #back-glyph,
body.lang-zh .rec-pos,
body.lang-zh .rec-cell {
  font-family: 'Noto Sans', 'Fraunces', sans-serif;
}