/* ═══════════════════════════════════════════════════════════
   汉字小英雄 · Hanzi Heroes — Rice Paper & Vermillion
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --paper:       #f7efdd;
  --paper-deep:  #efe2c6;
  --paper-line:  #dcc79c;
  --ink:         #33261f;
  --ink-soft:    #6b5a4c;
  --verm:        #cf4526;
  --verm-deep:   #a83318;
  --jade:        #3d8f6e;
  --jade-deep:   #2f7157;
  --gold:        #f2b32c;
  --gold-deep:   #d99a12;
  --sky:         #7fb5d5;
  --blush:       #f5c9b3;
  --radius:      28px;
  --shadow-ink:  0 6px 0 rgba(51, 38, 31, .18);
  --font-latin:  'Fredoka', 'PingFang SC', 'Heiti SC', sans-serif;
  --font-hanzi:  'PingFang SC', 'Heiti SC', 'Fredoka', sans-serif;
}

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

html, body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--font-latin);
  color: var(--ink);
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 115%, rgba(207,69,38,.08), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.24 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hanzi { font-family: var(--font-hanzi); }
.latin { font-family: var(--font-latin); }

/* ── screens ─────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.screen.active { display: flex; animation: screen-in .35s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

#confetti-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 90;
}

#star-flyer {
  position: fixed; z-index: 95; font-size: 44px; pointer-events: none;
  transition: transform .8s cubic-bezier(.3,-0.2,.3,1.2), opacity .8s ease;
  filter: drop-shadow(0 3px 4px rgba(51,38,31,.3));
}

/* ── splash ──────────────────────────────────────────────── */
#screen-splash { align-items: center; justify-content: center; text-align: center; }

.paper-deco { position: absolute; font-size: 64px; opacity: .5; pointer-events: none; }
.deco-cloud.c1 { top: 8%; left: 8%;  animation: drift 9s ease-in-out infinite alternate; }
.deco-cloud.c2 { top: 14%; right: 10%; font-size: 44px; animation: drift 7s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(26px); } }

.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.splash-panda { font-size: 96px; animation: bounce 2.2s ease-in-out infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

.splash-title { display: flex; flex-direction: column; gap: 4px; }
.splash-title .hanzi {
  font-size: clamp(44px, 7vw, 72px); font-weight: 700; letter-spacing: .06em;
  color: var(--ink);
  text-shadow: 3px 3px 0 rgba(207,69,38,.22);
}
.splash-title .latin {
  font-size: clamp(18px, 2.6vw, 26px); font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--verm);
}

.seal-btn {
  margin-top: 12px;
  width: 148px; height: 148px;
  border: none; border-radius: 30px;
  background: linear-gradient(160deg, var(--verm) 0%, var(--verm-deep) 100%);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.28), inset 0 0 0 10px var(--verm-deep), 0 10px 0 var(--verm-deep), 0 16px 26px rgba(168,51,24,.35);
  color: #fff8ee;
  font-family: var(--font-hanzi);
  font-size: 44px; font-weight: 700; line-height: 1.1;
  cursor: pointer;
  animation: seal-pulse 1.8s ease-in-out infinite;
  transition: transform .12s ease;
}
.seal-btn:active { transform: translateY(6px) scale(.96); animation: none; }
@keyframes seal-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.splash-hint { font-size: 15px; font-weight: 500; color: var(--ink-soft); letter-spacing: .08em; }

/* ── home ────────────────────────────────────────────────── */
.home-head {
  display: flex; align-items: center; gap: 16px;
  padding: 6px 4px 14px;
}
.panda-btn {
  font-size: 52px; background: none; border: none; cursor: pointer;
  transition: transform .15s ease;
}
.panda-btn:active { transform: scale(1.2) rotate(-8deg); }

.home-title { display: flex; flex-direction: column; }
.home-title .hanzi { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; }
.home-title .latin { font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--jade); }

.star-pill {
  margin-left: auto;
  background: #fff; border: 3px solid var(--ink);
  border-radius: 999px; padding: 8px 20px;
  font-size: 24px; font-weight: 700;
  box-shadow: var(--shadow-ink);
}

.shelves {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 20px; padding: 6px 4px 90px;
}

/* ── world & level map ───────────────────────────────────── */
.worlds {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 26px; padding: 6px 4px 90px;
}
.world-head {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 26px; font-weight: 700; font-family: var(--font-hanzi);
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(var(--paper) 82%, transparent);
  padding: 6px 2px 10px;
}
.world-head .latin { font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.level-medal {
  border: 3px solid var(--ink); border-radius: var(--radius);
  background: #fffdf6; box-shadow: var(--shadow-ink);
  padding: 14px 10px 12px; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; transition: transform .12s ease;
  font-family: var(--font-hanzi);
}
.level-medal:active { transform: translateY(4px) scale(.97); }
.level-medal .lm-icon { font-size: 40px; }
.level-medal .lm-name { font-size: 19px; font-weight: 700; }
.level-medal .lm-stars { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.level-medal.done-level {
  border-color: var(--gold-deep);
  background: linear-gradient(160deg, #fffdf6, #fdf3d5);
  box-shadow: 0 6px 0 rgba(217,154,18,.4), 0 0 18px rgba(242,179,44,.45);
}
.level-medal.locked {
  filter: grayscale(.75);
  opacity: .62;
  background: var(--paper-deep);
}
.level-medal.locked .lm-icon { position: relative; }
.level-medal.locked .lm-icon::after { content: '🔒'; position: absolute; right: -16px; bottom: -4px; font-size: 20px; }

/* words show smaller glyphs on cards */
.char-card .cc-hanzi.len2 { font-size: 38px; }
.char-card .cc-hanzi.len3 { font-size: 27px; }
.char-card .cc-hanzi.sent { font-size: 20px; line-height: 1.25; }

.shelf-label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 22px; font-weight: 700;
}
.shelf-label .latin { font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

.shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 14px; margin-top: 10px;
}

.char-card {
  position: relative;
  border: 3px solid var(--ink); border-radius: var(--radius);
  background: #fffdf6;
  box-shadow: var(--shadow-ink);
  padding: 14px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  min-height: 128px;
}
.char-card:active { transform: translateY(4px) scale(.97); box-shadow: 0 2px 0 rgba(51,38,31,.18); }
.char-card .cc-hanzi { font-family: var(--font-hanzi); font-size: 54px; font-weight: 600; line-height: 1; }
.char-card .cc-emoji { position: absolute; top: 8px; right: 10px; font-size: 22px; }
.char-card .cc-stars { font-size: 15px; letter-spacing: 2px; min-height: 20px; }
.char-card .cc-stars .dim { opacity: .22; }
.char-card.done {
  border-color: var(--gold-deep);
  background: linear-gradient(160deg, #fffdf6, #fdf3d5);
  box-shadow: 0 6px 0 rgba(217,154,18,.4), 0 0 18px rgba(242,179,44,.5);
}

.parent-btn {
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,253,246,.85); border: 2px solid var(--paper-line);
  border-radius: 999px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  font-family: var(--font-hanzi);
  cursor: pointer;
}
.hold-ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.hold-ring circle {
  fill: none; stroke: var(--jade); stroke-width: 5;
  stroke-dasharray: 107; stroke-dashoffset: 107;
}
.parent-btn.holding .hold-ring circle { transition: stroke-dashoffset 1.2s linear; stroke-dashoffset: 0; }

/* ── character screen ────────────────────────────────────── */
.char-head { display: flex; align-items: center; gap: 14px; padding: 4px 2px 10px; }

.round-btn {
  width: 62px; height: 62px; flex: none;
  border: 3px solid var(--ink); border-radius: 50%;
  background: #fffdf6; box-shadow: var(--shadow-ink);
  font-size: 28px; cursor: pointer;
  transition: transform .12s ease;
}
.round-btn:active { transform: translateY(3px) scale(.94); }

.char-word {
  display: flex; align-items: center; gap: 12px;
  background: #fffdf6; border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: var(--shadow-ink);
  padding: 6px 22px; cursor: pointer;
  transition: transform .12s ease;
}
.char-word:active { transform: scale(.96); }
.cw-emoji { font-size: 34px; }
.cw-hanzi { font-family: var(--font-hanzi); font-size: 38px; font-weight: 700; }
.cw-pinyin { font-size: 22px; font-weight: 600; color: var(--verm); }

.step-tabs { margin-left: auto; display: flex; gap: 8px; }
.step-tab {
  width: 64px; height: 64px;
  border: 3px solid var(--ink); border-radius: 22px;
  background: #fffdf6; box-shadow: var(--shadow-ink);
  font-size: 26px; cursor: pointer;
  transition: transform .12s ease, background .2s ease;
  position: relative;
}
.step-tab:active { transform: translateY(3px) scale(.94); }
.step-tab.active { background: var(--jade); }
.step-tab.starred::after {
  content: '⭐'; position: absolute; top: -10px; right: -8px; font-size: 18px;
}

.step-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }

#stage-grid[hidden], .speak-pane[hidden] { display: none !important; }
.speak-pane { flex: 1; min-height: 0; display: flex; }
.speak-pane .speak-stage { flex: 1; }

.oops-stage {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
}

/* ── sentence builder ────────────────────────────────────── */
#build-pane[hidden] { display: none !important; }
#build-pane { flex: 1; min-height: 0; display: flex; }
.build-stage {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4.5vh; text-align: center;
}
.build-stage.shake { animation: shake .4s ease; }
.build-emoji { font-size: clamp(56px, 10vh, 96px); }

.slot-row, .pool-row {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  min-height: 86px; align-items: center;
}
.tile, .slot {
  min-width: 96px; min-height: 78px; padding: 10px 20px;
  border-radius: 22px; font-family: var(--font-hanzi);
  font-size: 34px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.slot {
  border: 3px dashed var(--paper-line);
  background: rgba(220,199,156,.18); color: transparent;
}
.slot.filled {
  border: 3px solid var(--ink); border-style: solid;
  background: linear-gradient(160deg, var(--jade), var(--jade-deep));
  color: #fff; box-shadow: 0 5px 0 var(--jade-deep);
  cursor: pointer;
}
.tile {
  border: 3px solid var(--ink); background: #fffdf6;
  box-shadow: var(--shadow-ink); cursor: pointer;
  transition: transform .12s ease;
}
.tile:active { transform: translateY(4px) scale(.95); }
.tile.hint { animation: tile-hint 1s ease-in-out infinite; border-color: var(--gold-deep); }
@keyframes tile-hint { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); box-shadow: 0 6px 0 rgba(217,154,18,.5), 0 0 16px rgba(242,179,44,.6); } }
.tile.used { visibility: hidden; }

/* listen step: static tile preview */
.tile-preview { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tile-preview .tp {
  border: 3px solid var(--ink); border-radius: 18px; background: #fffdf6;
  box-shadow: var(--shadow-ink); padding: 8px 16px;
  font-family: var(--font-hanzi); font-size: 30px; font-weight: 700;
  animation: tp-in .5s ease both;
}
.tile-preview .tp:nth-child(2) { animation-delay: .15s; }
.tile-preview .tp:nth-child(3) { animation-delay: .3s; }
.tile-preview .tp:nth-child(4) { animation-delay: .45s; }
@keyframes tp-in { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }

.stage-grid {
  flex: 1; min-height: 0; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, 1fr);
  gap: 18px; align-items: center;
}
@media (orientation: portrait) {
  .stage-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.4fr) auto; }
}

.grid-wrap { display: flex; align-items: center; justify-content: center; min-height: 0; height: 100%; gap: 14px; }

/* multi-character words: 2-3 squares share the row */
.grid-wrap.boxes2 .grid-box, .grid-wrap.boxes3 .grid-box { width: auto; flex: 1; max-width: 46%; }
.grid-wrap.boxes3 .grid-box { max-width: 32%; }
.grid-box.dim-box { opacity: .38; }
.grid-box.active-box { box-shadow: 0 8px 0 var(--jade-deep), 0 0 0 5px rgba(61,143,110,.45), 0 14px 30px rgba(47,113,87,.3); border-color: var(--jade); }

.grid-box {
  position: relative;
  width: min(100%, 78vh);
  aspect-ratio: 1 / 1;
  max-height: 100%;
  background: var(--paper-deep);
  border: 6px solid var(--verm);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--verm-deep), 0 14px 30px rgba(168,51,24,.25), inset 0 0 40px rgba(220,199,156,.5);
  touch-action: none;
  overflow: hidden;
}
.grid-box.shake { animation: shake .4s ease; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.mizige { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mizige line {
  stroke: var(--paper-line); stroke-width: 1.2; stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.writer-target { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.writer-target svg { display: block; }

.stage-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 8px;
}

.mascot-bubble {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mascot-bubble .mb-panda { font-size: 64px; }
.mascot-bubble .mb-text {
  background: #fffdf6; border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: var(--shadow-ink);
  padding: 10px 18px; font-size: 20px; font-weight: 600;
  font-family: var(--font-hanzi);
  max-width: 300px;
}

.cta-btn {
  border: 3px solid var(--ink); border-radius: 999px;
  background: linear-gradient(160deg, var(--jade), var(--jade-deep));
  color: #fff; font-family: var(--font-hanzi);
  font-size: 26px; font-weight: 700;
  padding: 18px 34px; min-height: 72px; min-width: 200px;
  box-shadow: 0 6px 0 var(--jade-deep), 0 10px 18px rgba(47,113,87,.3);
  cursor: pointer; transition: transform .12s ease;
}
.cta-btn:active { transform: translateY(4px) scale(.97); }
.cta-btn.gold { background: linear-gradient(160deg, var(--gold), var(--gold-deep)); box-shadow: 0 6px 0 var(--gold-deep), 0 10px 18px rgba(217,154,18,.35); color: var(--ink); }

.ghost-btn {
  border: 3px solid var(--paper-line); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font-size: 17px; font-weight: 600; font-family: var(--font-hanzi);
  padding: 12px 22px; cursor: pointer;
}

/* hold-to-confirm fill for the reset button */
#btn-reset {
  background-image: linear-gradient(to right, var(--blush) 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: 100% 0;
}
#btn-reset.arming {
  background-position: 0 0;
  transition: background-position 1.5s linear;
  color: var(--verm-deep);
  border-color: var(--verm);
}

.side-minor { display: flex; gap: 12px; }
.side-minor .round-btn { width: 72px; height: 72px; font-size: 30px; }

/* ── speak step ──────────────────────────────────────────── */
.speak-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4vh; text-align: center;
}
.speak-word { display: flex; align-items: center; gap: 26px; }
.speak-word .sw-emoji { font-size: clamp(80px, 14vh, 140px); animation: bounce 2.4s ease-in-out infinite; }
.speak-word .sw-hanzi {
  font-family: var(--font-hanzi); font-weight: 700;
  font-size: clamp(90px, 18vh, 170px); line-height: 1;
  text-shadow: 4px 4px 0 rgba(207,69,38,.18);
}
.speak-word .sw-pinyin { font-size: clamp(26px, 4vh, 40px); font-weight: 600; color: var(--verm); align-self: flex-end; padding-bottom: 2vh; }
.speak-word .sw-hanzi.sent-word { font-size: clamp(40px, 8vh, 76px); }

.mic-zone { display: flex; align-items: center; gap: 26px; }

.big-mic {
  position: relative;
  width: 132px; height: 132px; border-radius: 50%;
  border: 4px solid var(--ink);
  background: linear-gradient(160deg, var(--verm), var(--verm-deep));
  box-shadow: 0 8px 0 var(--verm-deep), 0 12px 22px rgba(168,51,24,.35);
  font-size: 54px; cursor: pointer;
  transition: transform .12s ease;
}
.big-mic:active { transform: translateY(4px) scale(.95); }
.big-mic:disabled { filter: grayscale(.6) brightness(.9); }
.big-mic.recording { animation: rec-throb .8s ease-in-out infinite; }
@keyframes rec-throb { 0%,100% { transform: scale(1); } 50% { transform: scale(calc(1.04 + var(--level, 0) * 0.3)); } }
.big-mic.recording::before, .big-mic.recording::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 4px solid var(--verm); opacity: 0;
  animation: ring 1.4s ease-out infinite;
}
.big-mic.recording::after { animation-delay: .7s; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }

.speak-actions { display: flex; gap: 16px; align-items: center; min-height: 76px; }
.speak-actions .round-btn { width: 76px; height: 76px; font-size: 32px; }

/* ── overlays ────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(51,38,31,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.overlay[hidden] { display: none; }
.overlay-card {
  background: var(--paper); border: 4px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 10px 0 rgba(51,38,31,.25);
  padding: 26px 28px; max-width: 480px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.overlay-card h2 { font-family: var(--font-hanzi); font-size: 26px; }
.overlay-card h2 .latin { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--jade); margin-left: 8px; }
.parent-stats { font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.parent-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.parent-row label { font-family: var(--font-hanzi); font-size: 17px; font-weight: 600; display: flex; flex-direction: column; }
.parent-row label small { font-family: var(--font-latin); font-weight: 500; color: var(--ink-soft); }

.toggle {
  flex: none; width: 66px; height: 38px; border-radius: 999px;
  border: 3px solid var(--ink); background: var(--paper-deep);
  position: relative; cursor: pointer; transition: background .2s ease;
}
.toggle span {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; border: 2px solid var(--ink);
  transition: left .2s ease;
}
.toggle[aria-checked="true"] { background: var(--jade); }
.toggle[aria-checked="true"] span { left: 31px; }

.mic-status { font-size: 14px; color: var(--ink-soft); }
.parent-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.parent-tip { font-size: 13px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}