/* =========================================================
   First 300 — Scene game
   Original minimal-modern aesthetic (design handoff)
   ========================================================= */

:root {
  /* ----- palette (warm neutrals, restrained accents) ----- */
  --bg:        #F8F7F4;
  --surface:   #FFFFFF;
  --ink-900:   #111111;
  --ink-700:   #353432;
  --ink-500:   #6B6A66;
  --ink-400:   #92908A;
  --ink-300:   #C1BFB7;
  --ink-200:   #E4E2D9;
  --ink-100:   #EFEDE5;
  --ink-50:    #F3F1EA;

  /* feedback */
  --ok:        #2F8F5C;
  --ok-bg:     #E6F2EB;
  --ok-ink:    #1E5C3A;
  --warn:      #C96A2E;
  --warn-bg:   #FBEFE3;
  --warn-ink:  #8A4316;

  /* type */
  --font-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-la: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing */
  --container: 1080px;
  --gutter: 32px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-zh), var(--font-la);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

[hidden] { display: none !important; }

html[data-locale="zh-Hant-HK"] {
  --font-zh: "Noto Sans HK", "PingFang HK", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

.app {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) 96px;
  position: relative;
}

/* =========================================================
   TOP BAR — 56px
   ========================================================= */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 56px;
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 18px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-la);
}
.brand__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-900);
  display: inline-block;
  align-self: center;
}
.brand__mark {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}

/* chapter tabs — minimal text-only with 2px underline on active */
.chapters {
  display: flex;
  gap: 4px;
  justify-self: center;
}
.chapter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  position: relative;
  transition: color .15s ease, background .15s ease;
}
.chapter:hover:not(.is-locked) { color: var(--ink-900); background: var(--ink-50); }
.chapter__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  letter-spacing: 0.04em;
}
.chapter__name {
  font-size: 14px;
  font-weight: 500;
}
.chapter.is-active {
  color: var(--ink-900);
}
.chapter.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -9px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
}
.chapter.is-active .chapter__num { color: var(--ink-700); }
.chapter.is-locked {
  color: var(--ink-300);
  cursor: not-allowed;
}
.chapter.is-locked .chapter__num { color: var(--ink-300); }

.topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stats {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
}
.stat b {
  font-weight: 500;
  color: var(--ink-900);
  margin-right: 4px;
  letter-spacing: -0.01em;
}
.stat i { font-style: normal; font-family: var(--font-zh); }
.iconbtn {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  color: var(--ink-500);
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.iconbtn:hover { background: var(--ink-100); color: var(--ink-900); }

/* =========================================================
   QUESTION META — chapter name + counter + progress
   ========================================================= */
.qmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 6px;
}
.qmeta__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qmeta__chapter {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.qmeta__sep { color: var(--ink-300); }
.qmeta__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
}
.qmeta__count b { color: var(--ink-900); font-weight: 500; }
.qmeta__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--bg);
  margin-left: 4px;
}
.qmeta__tag.is-review {
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--ink-300);
}

.qmeta__progress {
  flex: 0 0 200px;
  height: 3px;
  background: var(--ink-200);
  border-radius: 3px;
  overflow: hidden;
}
.qmeta__progress-fill {
  display: block;
  height: 100%;
  background: var(--ink-900);
  border-radius: 3px;
  transition: width .35s ease;
}

.hint {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink-900);
  transition: opacity .15s ease;
}

/* =========================================================
   SCENE — focal element
   ========================================================= */
.scene {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  padding: 32px 8px 28px;
}

.scene__cast {
  display: flex;
  align-items: center;
  gap: 6px;
}
.scene__cast.is-recall .scene__point,
.scene__cast.is-recall .scene__target {
  display: none;
}
.scene__actor,
.scene__target {
  font-size: 96px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px; height: 132px;
}
.scene__point {
  color: var(--ink-300);
  display: inline-flex;
}

/* bubble */
.bubble {
  position: relative;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 32px;
  border-radius: 20px;
  background: var(--surface);
  border: 2px dashed var(--ink-300);
  color: var(--ink-500);
  font-size: 18px;
  min-height: 96px;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.bubble:hover { border-color: var(--ink-500); color: var(--ink-700); }
.bubble:disabled { cursor: not-allowed; opacity: 0.5; }
.bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: var(--surface);
  border-left: 2px dashed var(--ink-300);
  border-bottom: 2px dashed var(--ink-300);
  transition: inherit;
}
.bubble:hover::before { border-color: var(--ink-500); }

.bubble__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink-50);
  color: var(--ink-700);
  flex: 0 0 36px;
}
.bubble__text { line-height: 1.45; }

/* bubble — REVEALED (correct) */
.bubble[data-state="reveal"] {
  border: 1px solid var(--ink-200);
  border-style: solid;
  background: var(--surface);
  color: var(--ink-900);
  font-family: var(--font-la);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: default;
}
.bubble[data-state="reveal"]::before {
  border-style: solid;
  border-color: var(--ink-200);
  background: var(--surface);
}
.bubble[data-state="reveal"] .bubble__icon {
  background: var(--ok-bg);
  color: var(--ok);
}
.bubble .target-word {
  position: relative;
  font-weight: 700;
  color: var(--ok-ink);
}
.bubble .target-word::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--ok);
  border-radius: 2px;
}

/* =========================================================
   AUDIO BAR
   ========================================================= */
.audiobar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: -8px 0 28px;
}
.playbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  transition: transform .12s ease, background .15s ease;
}
.playbtn:hover:not(:disabled) { background: #000; transform: translateY(-1px); }
.playbtn:active { transform: translateY(0); }
.playbtn:disabled { cursor: not-allowed; opacity: 0.5; }

.audio-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
}
.audio-mode__label {
  font-family: var(--font-zh);
  margin-right: 4px;
  font-size: 12px;
}
.audio-mode__opt {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  font-family: var(--font-zh);
  font-size: 12px;
  transition: color .15s ease, background .15s ease;
}
.audio-mode__opt:hover { color: var(--ink-900); }
.audio-mode__opt.is-on {
  background: var(--ink-100);
  color: var(--ink-900);
  font-weight: 500;
}

/* =========================================================
   OPTIONS
   ========================================================= */
.options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.opt {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-family: var(--font-la);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  position: relative;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.opt::after {
  content: attr(data-i);
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-300);
}
.opt:hover:not(.is-disabled):not(.is-correct):not(.is-wrong) {
  border-color: var(--ink-900);
  transform: translateY(-2px);
}
/* review (emoji) options */
.opt.is-emoji {
  font-size: 56px;
  justify-content: center;
  padding: 14px;
}

/* states */
.opt.is-correct {
  border-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.opt.is-wrong {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.opt.is-pulse {
  animation: pulse 1.2s ease-in-out infinite;
}
.opt.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(47, 143, 92, 0.45);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(47, 143, 92, 0);
    transform: translateY(-2px);
  }
}

/* =========================================================
   FEEDBACK
   ========================================================= */
.feedback {
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 32px;
  animation: slideUp .25s ease;
}
.feedback.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.feedback.is-warn { background: var(--warn-bg); color: var(--warn-ink); }

.feedback__row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.feedback__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ok);
  color: #fff;
  flex: 0 0 auto;
}
.feedback.is-warn .feedback__badge { background: var(--warn); }
.feedback__msg {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}
.next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-900);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  transition: transform .12s ease, opacity .15s ease;
}
.next:hover { transform: translateX(2px); }
.next:disabled, .next[hidden] { display: none; }
.feedback.is-warn .next { display: none; }

.feedback__gloss {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.feedback__gloss .g {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.feedback__gloss .g b {
  font-family: var(--font-la);
  font-weight: 500;
}
.feedback__gloss .g i {
  font-style: normal;
  font-family: var(--font-zh);
  color: var(--ok-ink);
  opacity: 0.75;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   GLOSSARY
   ========================================================= */
.glossary {
  border-top: 1px solid var(--ink-200);
  padding-top: 14px;
}
.glossary__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 0;
  color: var(--ink-500);
  transition: color .15s ease;
}
.glossary__head:hover { color: var(--ink-900); }
.glossary__title {
  font-size: 13px;
  font-weight: 500;
}
.glossary__count {
  font-family: var(--font-mono);
  font-size: 12px;
  margin-left: auto;
}
.glossary__chev { display: inline-flex; transition: transform .15s ease; }
.glossary__head[aria-expanded="true"] .glossary__chev { transform: rotate(180deg); }

.glossary__body { padding: 12px 0 4px; }
.glossary__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 24px;
}
.glossary__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}
.glossary__list li .es {
  font-family: var(--font-la);
  font-weight: 500;
  color: var(--ink-900);
}
.glossary__list li .zh {
  color: var(--ink-500);
  font-size: 13px;
}
.glossary__list li .emoji { font-size: 16px; }
.glossary__empty {
  color: var(--ink-400);
  font-size: 13px;
  margin: 4px 0;
}

/* =========================================================
   SETTINGS MENU
   ========================================================= */
.menu {
  position: absolute;
  top: 64px;
  right: var(--gutter);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  z-index: 50;
}
.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-700);
  transition: background .12s ease, color .12s ease;
}
.menu__item:hover { background: var(--ink-50); color: var(--ink-900); }
.menu__item--danger { color: var(--warn-ink); }
.menu__item--danger:hover { background: var(--warn-bg); }
.menu__header {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 4px;
}
.menu__header b {
  color: var(--ink-900);
  font-weight: 600;
  font-family: var(--font-la);
}

/* =========================================================
   ONBOARDING (preserved from legacy)
   ========================================================= */
.onboarding-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
.onboarding-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 40px 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  display: grid;
  gap: 16px;
}
.onboarding-brand {
  margin: 0;
  text-align: center;
  font-size: clamp(36px, 6vw, 52px);
  letter-spacing: -0.02em;
  font-family: var(--font-la);
  font-weight: 600;
}
.onboarding-bilingual {
  margin: 0;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
  font-weight: 500;
}
.onboarding-eyebrow {
  margin: 0;
  text-align: center;
  color: var(--ink-400);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.onboarding-title {
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.onboarding-sub {
  margin: 0;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.5;
}
.lang-stack {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}
.lang-card {
  min-height: 64px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 18px;
  display: grid;
  gap: 4px;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.lang-card:hover:not(:disabled) {
  border-color: var(--ink-900);
  background: var(--ink-50);
  transform: translateY(-1px);
}
.lang-card strong {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 600;
}
.lang-card em {
  font-style: normal;
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 500;
}
.lang-card.is-coming-soon {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- slogan + account form (onboarding step 3) ---- */
.slogan-block {
  margin: 4px 0 2px;
  text-align: center;
}
.slogan-line {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.slogan-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.6;
}

.account-form {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.account-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  font-family: var(--font-zh), var(--font-la);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink-900);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-input::placeholder { color: var(--ink-400); }
.account-input:focus {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}
.account-error {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--warn-ink);
  background: var(--warn-bg);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.account-submit {
  margin-top: 4px;
  padding: 12px 18px;
  background: var(--ink-900);
  color: var(--bg);
  border-radius: var(--radius);
  font-family: var(--font-zh);
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.1s ease;
}
.account-submit:hover { background: #000; transform: translateY(-1px); }
.account-submit:active { transform: translateY(0); }
.account-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-400);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .app { padding: 16px 20px 80px; }
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 12px;
    height: auto;
    padding-bottom: 12px;
  }
  .chapters {
    grid-column: 1 / -1;
    justify-self: start;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
  }
  .chapter.is-active::after { bottom: -5px; }
  .stats .stat:nth-child(3) { display: none; }

  .scene {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 0 24px;
    text-align: center;
  }
  .scene__cast { justify-content: center; }
  .scene__actor, .scene__target { width: 100px; height: 100px; font-size: 72px; }

  .bubble { font-size: 16px; padding: 22px 24px; }
  .bubble[data-state="reveal"] { font-size: 22px; }
  .bubble::before { left: 50%; top: -10px; transform: translateX(-50%) rotate(135deg); }

  .options { grid-template-columns: repeat(2, 1fr); }
  .opt { font-size: 22px; padding: 22px 18px; min-height: 90px; }

  .qmeta__progress { flex-basis: 100px; }
}

@media (max-width: 560px) {
  .brand__sub { display: none; }
  .qmeta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .qmeta__progress { width: 100%; flex-basis: auto; }
  .scene__actor, .scene__target { width: 84px; height: 84px; font-size: 60px; }
  .opt { font-size: 20px; min-height: 80px; padding: 18px 14px; }
  .feedback__row { flex-wrap: wrap; }
  .feedback__msg { width: 100%; order: 3; }
  .next { margin-left: auto; }
  .audiobar { flex-wrap: wrap; }
}