:root {
  --bg: #120d20;
  --panel: rgba(20, 14, 36, 0.92);
  --panel-solid: #1d1533;
  --line: rgba(255, 255, 255, 0.14);
  --text: #f4effa;
  --muted: #b7aecb;
  --accent: #ff7aa8;
  --accent-2: #ffd36e;
  --ok: #6fdc9b;
  --ng: #ff6b6b;
  --radius: 14px;
  --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", var(--font-zh);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-zh);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; max-width: 960px; margin: 0 auto; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }

/* ---------- 標題 ---------- */
#title {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 122, 168, 0.35), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(255, 211, 110, 0.18), transparent 50%),
    var(--bg);
  display: none;
  place-items: center;
}
#title.active { display: grid; }
.title-box { text-align: center; padding: 24px 16px; width: min(420px, 100%); }
.title-ja { font-family: var(--font-ja); color: var(--accent-2); letter-spacing: 0.2em; margin: 0; }
h1 { font-size: clamp(44px, 12vw, 72px); margin: 8px 0; letter-spacing: 0.1em; text-shadow: 0 4px 24px rgba(255, 122, 168, 0.6); }
.title-sub { color: var(--muted); margin: 0 0 32px; }
.menu { display: grid; gap: 12px; }
.btn {
  padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06); font-size: 17px;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); border-color: transparent; color: #2a0b19; font-weight: 700; }
.rating { margin-top: 28px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- 背景 ---------- */
.bg { position: absolute; inset: 0; transition: background 0.6s; background: #222; }
.bg::after {
  content: attr(data-label); position: absolute; top: 56px; right: 16px;
  font-size: 12px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.1em;
}
.bg-room {
  background:
    linear-gradient(transparent 62%, #1a1410 62%),
    radial-gradient(circle at 70% 30%, rgba(120, 170, 255, 0.35), transparent 30%),
    linear-gradient(#1c2033, #2a2433);
}
.bg-plane {
  background:
    radial-gradient(ellipse at 50% 120%, #f6b26b, transparent 60%),
    linear-gradient(#6aa7e8, #b8d8f5);
}
.bg-office {
  background:
    linear-gradient(transparent 70%, #c9b79c 70%),
    repeating-linear-gradient(90deg, #ece6da 0 120px, #e2dacb 120px 124px),
    #ece6da;
}
.bg-lounge {
  background:
    linear-gradient(transparent 68%, #5a4636 68%),
    repeating-linear-gradient(90deg, #7a8aa0 0 70px, #6a7a90 70px 74px),
    #7a8aa0;
}
.bg-studio {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 245, 210, 0.55), transparent 45%),
    linear-gradient(transparent 72%, #2b2b2b 72%),
    linear-gradient(#3a3a44, #24242c);
}
.bg-black { background: #000; }

/* ---------- 角色 ---------- */
.stage { position: absolute; inset: 0; pointer-events: none; }
.char {
  position: absolute; bottom: 30%; width: 34%; max-width: 260px; aspect-ratio: 3 / 4;
  transform: translateX(-50%); transition: left 0.35s, opacity 0.35s, filter 0.3s;
  display: grid; justify-items: center; align-content: end;
}
.char .body {
  width: 78%; aspect-ratio: 1 / 1.25; border-radius: 48% 48% 18% 18%;
  background: var(--c, #888); box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.25);
  display: grid; place-items: center; font-size: clamp(28px, 8vw, 54px); font-weight: 700;
  color: rgba(0, 0, 0, 0.55); position: relative;
}
.char .face { font-size: clamp(30px, 9vw, 60px); }
.char .tag {
  margin-top: 6px; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: #fff;
}
.char.dim { filter: brightness(0.55); }
.char.enter { opacity: 0; }

/* ---------- 頂欄 ---------- */
.topbar {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center;
  gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px;
}
.chapter-label { flex: 1; font-size: 13px; color: #fff; text-shadow: 0 1px 4px #000; }
.icon-btn {
  min-width: 40px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.45); font-size: 14px;
}

/* ---------- 對話框 ---------- */
.dialog {
  position: absolute; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 150px; padding: 22px 18px 44px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px);
  cursor: pointer; z-index: 3;
}
.speaker {
  position: absolute; top: -16px; left: 16px; padding: 4px 14px; border-radius: 999px;
  background: var(--sc, var(--accent)); color: #1a1022; font-weight: 700; font-size: 15px;
}
.line-ja { font-family: var(--font-ja); font-size: clamp(19px, 4.8vw, 24px); line-height: 2.1; }
.line-ja:empty { display: none; }
.line-zh { color: var(--muted); font-size: 15px; line-height: 1.7; margin-top: 4px; }
.line-ja:empty + .line-zh { color: var(--text); font-size: 17px; margin-top: 0; }
.dialog.narration .line-zh { font-style: normal; }
.dialog.thought .line-zh { color: #cfe3ff; }
.zh-hidden .line-ja:not(:empty) + .line-zh { visibility: hidden; }
.dialog-tools { position: absolute; right: 12px; bottom: 8px; display: flex; gap: 8px; align-items: center; }
.tool {
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); border-radius: 8px;
  padding: 2px 10px; font-size: 14px;
}
.tool[hidden] { display: none; }
.next-hint { color: var(--accent); animation: bob 1s infinite; font-size: 12px; }
.dialog.wait .next-hint { visibility: hidden; }
@keyframes bob { 50% { transform: translateY(3px); } }

ruby rt { font-size: 0.5em; color: var(--accent-2); }
.no-furigana ruby rt { visibility: hidden; }
.em { color: var(--accent); }

/* ---------- 選項 ---------- */
.choices {
  position: absolute; left: 12px; right: 12px; bottom: 190px; display: grid; gap: 10px; z-index: 4;
  max-height: calc(100% - 250px); overflow-y: auto;
}
.choice {
  text-align: left; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel-solid); font-family: var(--font-ja); font-size: clamp(17px, 4.4vw, 20px);
  line-height: 2; animation: pop 0.25s backwards;
}
.choice:nth-child(2) { animation-delay: 0.05s; }
.choice:nth-child(3) { animation-delay: 0.1s; }
.choice.wrong { opacity: 0.4; text-decoration: line-through; pointer-events: none; }
.choice.right { border-color: var(--ok); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 章節卡 ---------- */
.chapter-card {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  background: rgba(0, 0, 0, 0.85); z-index: 5; animation: fade 0.5s; cursor: pointer; padding: 16px;
}
.chapter-card .no { color: var(--accent-2); letter-spacing: 0.3em; }
.chapter-card .name { font-size: clamp(26px, 7vw, 40px); margin: 8px 0; font-weight: 700; }
.chapter-card .ja { font-family: var(--font-ja); color: var(--muted); font-size: 18px; }
@keyframes fade { from { opacity: 0; } }

/* ---------- 彈出視窗 ---------- */
.modal {
  position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.6);
  display: grid; place-items: center; padding: 16px; animation: fade 0.2s;
}
.modal-box {
  width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; border-radius: 18px;
  background: var(--panel-solid); border: 1px solid var(--line); padding: 20px 18px;
  user-select: text; -webkit-user-select: text;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.modal h2 { margin: 0 0 4px; font-size: 20px; }
.modal h3 { margin: 18px 0 6px; font-size: 14px; color: var(--accent-2); }
.badge {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: #2a0b19; font-weight: 700; margin-bottom: 8px;
}
.pattern { font-family: var(--font-ja); font-size: 22px; margin: 4px 0; }
.meaning { color: var(--muted); }
.desc { line-height: 1.8; }
.conj { font-family: var(--font-ja); background: rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 6px 10px; }
.ex { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, 0.04); border-radius: 0 8px 8px 0; }
.ex .ja { font-family: var(--font-ja); font-size: 18px; line-height: 2; }
.ex .zh { color: var(--muted); font-size: 14px; }
.ex button { float: right; }
.list { display: grid; gap: 8px; }
.list-item {
  text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.list-item .ja { font-family: var(--font-ja); }
.list-item.locked { opacity: 0.4; pointer-events: none; }
.log-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.log-item .who { font-size: 12px; color: var(--accent); }
.log-item .ja { font-family: var(--font-ja); line-height: 2; }
.log-item .zh { color: var(--muted); font-size: 14px; }
.vocab { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 15px; }
.vocab .ja { font-family: var(--font-ja); }
.result-rank { font-size: 28px; font-weight: 700; color: var(--accent-2); margin: 6px 0; }
.setting { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.switch { width: 52px; height: 30px; border-radius: 999px; border: 0; background: #444; position: relative; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { left: 25px; }

/* ---------- 提示 ---------- */
.toast {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 20;
  padding: 8px 16px; border-radius: 999px; background: var(--accent-2); color: #2a1a00;
  font-weight: 700; font-size: 14px; animation: fade 0.2s; white-space: nowrap;
}

@media (min-width: 700px) {
  .dialog { left: 24px; right: 24px; bottom: 24px; }
  .choices { left: 15%; right: 15%; }
}

/* ---------- 回答方式（按鈕／發聲） ---------- */
.choice-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #fff; text-shadow: 0 1px 4px #000; }
.seg { display: inline-flex; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line); padding: 2px; }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font-size: 13px; }
.seg button[aria-checked="true"] { background: var(--accent); color: #2a0b19; font-weight: 700; }
.seg button:disabled { opacity: 0.35; cursor: not-allowed; }
.voice-mode .choice { cursor: default; }
.mic {
  padding: 14px; border-radius: var(--radius); border: 0; background: var(--accent-2); color: #2a1a00;
  font-weight: 700; font-size: 17px;
}
.mic.on { background: var(--ng); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.25); } }
.heard {
  font-size: 14px; color: var(--text); background: var(--panel); border-radius: 10px; padding: 8px 12px;
  border: 1px solid var(--line); font-family: var(--font-ja); line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) { .mic.on, .next-hint, .choice { animation: none; } }