:root {
  --bg: #191511;
  --paper: #f3ead8;      /* VN card */
  --ink: #2b241c;
  --vn-red: #b5402a;
  --zh-paper: #edeae2;   /* ZH card, style B */
  --zh-ink: #26231e;
  --zh-red: #c65a3f;
  --muted: #8a7d68;
  --zh-muted: #75706a;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
body {
  background: var(--bg);
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  min-height: 100vh;
}
#app { display: flex; flex-direction: column; align-items: center; padding: 28px 16px 60px; gap: 26px }

.interstitial { color: #cfc4ae; text-align: center; max-width: 320px; margin-top: 30vh; font-weight: 300; line-height: 1.6 }
.interstitial h1 { font-family: "Fraunces", serif; margin-bottom: 12px }

.day-label {
  color: #7a6f5d; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.day-label::before, .day-label::after { content: ""; display: block; width: 34px; height: 1px; background: #453c30 }

.card { width: min(390px, 100%); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55); position: relative }
.card.vn { background: var(--paper); color: var(--ink) }
.card.zh { background: var(--zh-paper); color: var(--zh-ink) }
.card.han-viet { outline: 2px solid var(--zh-red); outline-offset: 3px }  /* cognate-day special border §4 */
.card.false-friend { outline: 2px dashed var(--zh-red); outline-offset: 3px }  /* [P1-C13] */

.art { position: relative }
.art img { width: 100%; display: block; aspect-ratio: 1/1; object-fit: cover }
.art .credit { position: absolute; bottom: 8px; right: 10px; font-size: 9px; letter-spacing: .06em;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.6) }   /* [R1-A1] quiet credit */
.art-fallback { aspect-ratio: 1/1; display: grid; place-items: center;
  font-family: "Fraunces", serif; font-size: 80px; opacity: .25 }          /* typographic fallback [PLAN-D9] */

.body { padding: 22px 24px 24px }
.word-row { display: flex; align-items: flex-start; justify-content: space-between }
.word { font-family: "Fraunces", serif; font-weight: 600; font-size: 56px; line-height: 1 }
.vn .word { color: var(--vn-red) }
.word.hanzi { font-family: "Noto Serif SC", serif; font-size: 64px }
.pinyin { font-family: "Fraunces", serif; font-size: 22px; margin-top: 4px; font-style: italic; color: var(--zh-muted) }
.tone-hint { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: right; color: var(--muted) }
.zh .tone-hint { color: var(--zh-muted) }
.tone-hint svg { display: block; margin-top: 6px; margin-left: auto }
.gloss { margin-top: 10px; font-size: 15px; font-weight: 300; color: var(--muted) }
.zh .gloss { color: var(--zh-muted) }
.gloss em { font-style: italic }

.play {
  margin-top: 18px; display: flex; align-items: center; gap: 14px;
  border: none; border-radius: 999px; padding: 12px 20px; width: 100%;
  font-family: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer;
}
.vn .play { background: var(--vn-red); color: var(--paper) }
.zh .play { background: var(--zh-ink); color: var(--zh-paper) }
.play .disc { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 11px }
.play .who { margin-left: auto; font-weight: 300; opacity: .75; font-style: italic; font-size: 12px }
.play:disabled { opacity: .55; cursor: default }

.divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: #6a6152;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; width: min(390px, 100%) }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #3a332a }

/* Locked teach card: word/script visible, only ART veiled [R1-I7] */
.locked .art img { filter: blur(14px) saturate(.7); transform: scale(1.06) }
.lock-veil {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: rgba(38, 35, 30, .35); color: #fff; padding: 24px;
}
.lock-veil .glyph svg { width: 30px; height: 30px }
.lock-veil p { font-size: 13px; font-weight: 300; line-height: 1.5; max-width: 240px; text-shadow: 0 1px 8px rgba(0,0,0,.5) }
.record-btn {
  margin-top: 6px; background: rgba(243,234,216,.95); color: var(--ink);
  border: none; border-radius: 999px; padding: 10px 22px; font-family: inherit;
  font-size: 12px; letter-spacing: .08em; font-weight: 500; cursor: pointer;
}

/* Recorder panel states */
.recorder { padding: 14px 24px 20px; display: flex; flex-direction: column; gap: 10px; align-items: center }
.recorder .status { font-size: 12px; color: var(--muted); font-style: italic }
.recorder .timer { font-variant-numeric: tabular-nums; font-size: 13px }
.recorder .error { color: var(--vn-red); font-size: 12px; text-align: center }
.recorder .row { display: flex; gap: 10px }

/* Voyage strip [R1-I9] */
.voyage { width: min(390px, 100%); background: #211c16; border-radius: 12px; padding: 14px 18px 12px; color: #8a7d68 }
.voyage .route { position: relative; height: 22px; margin-bottom: 6px }
.voyage .line { position: absolute; top: 11px; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, #4a4136 0 6px, transparent 6px 12px) }
.voyage .done { position: absolute; top: 10px; left: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #c8942a, var(--vn-red)) }
.voyage .boat { position: absolute; top: -2px; transform: translateX(-50%); font-size: 15px }
.voyage .ends { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .18em; text-transform: uppercase }
.voyage .count { text-align: center; font-size: 11px; margin-top: 8px; font-weight: 300; font-style: italic; color: #6d6353 }

/* Garden */
.garden { width: min(390px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.garden .cell { border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; position: relative; cursor: pointer; border: none; padding: 0; background: #211c16 }
.garden .cell img { width: 100%; height: 100%; object-fit: cover; display: block }
.garden .cell.pending img { filter: grayscale(.9) brightness(.5) }
.garden .cell .num { position: absolute; bottom: 4px; left: 6px; font-size: 10px; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.8) }

.nav { display: flex; gap: 18px; width: min(390px, 100%); justify-content: center }
.nav button { background: none; border: none; color: #7a6f5d; font-family: inherit; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer; padding: 8px }
.nav button.active { color: #cfc4ae }

.queue-nav { display: flex; gap: 10px; align-items: center; color: #7a6f5d; font-size: 12px }
.queue-nav button { background: #211c16; color: #cfc4ae; border: none; border-radius: 8px; padding: 8px 14px; font-family: inherit; cursor: pointer }

.suggest { width: min(390px, 100%); color: #8a7d68; font-size: 12px }
.suggest summary { cursor: pointer; letter-spacing: .12em; text-transform: uppercase; font-size: 10px }
.suggest textarea { width: 100%; min-height: 64px; margin: 8px 0; background: #211c16; color: #cfc4ae;
  border: 1px solid #3a332a; border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px }
.suggest-status { margin-left: 10px; font-style: italic }