/* ============================================================
   听音辨音 · n / l   移动端样式
   ============================================================ */

:root {
  --bg: #0a0e1a;
  --bg-2: #121a2e;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.1);
  --text: #e9eefb;
  --muted: #8e9cb6;
  --n: #fbbf24;
  --l: #38bdf8;
  --ok: #34d399;
  --bad: #fb7185;
  --warn: #a78bfa;
  --radius: 26px;
  --shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(120% 80% at 50% -10%, #1c2748 0%, transparent 60%),
    radial-gradient(90% 60% at 110% 110%, #1a2f45 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------- 屏幕切换 */

.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--safe-t) + 14px) 18px calc(var(--safe-b) + 14px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.is-active { display: flex; }

/* ---------------------------------------------------- 首页 */

.home-head { text-align: center; margin: 10px 0 22px; }
.home-head .kicker {
  font-size: 12px; letter-spacing: 3px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 10px;
}
.home-head h1 {
  margin: 0; font-size: 30px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(100deg, var(--n), #fff 45%, var(--l));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-head p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }

.nlmark { display: inline-flex; gap: 6px; margin-top: 14px; }
.nlmark span {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 700; font-size: 17px;
}
.nlmark .n { background: rgba(251, 191, 36, 0.16); color: var(--n); box-shadow: inset 0 0 0 1px rgba(251,191,36,.35); }
.nlmark .l { background: rgba(56, 189, 248, 0.16); color: var(--l); box-shadow: inset 0 0 0 1px rgba(56,189,248,.35); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.panel h2 {
  margin: 0 0 12px; font-size: 12px; letter-spacing: 1.6px;
  color: var(--muted); font-weight: 600; text-transform: uppercase;
}

/* 统计格 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { text-align: center; padding: 4px 0; }
.stat b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--muted); }

/* 分段选择 */
.seg { display: flex; gap: 6px; background: rgba(0,0,0,.28); padding: 4px; border-radius: 15px; }
.seg button {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  font-size: 13px; font-family: inherit; padding: 10px 4px; border-radius: 11px;
  transition: all .18s ease; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.seg + .seg { margin-top: 8px; }

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }

/* 主按钮 */
.btn-primary {
  width: 100%; border: 0; border-radius: 20px; padding: 18px;
  font-size: 17px; font-weight: 700; font-family: inherit; color: #08111f;
  background: linear-gradient(100deg, var(--n), #7dd3fc);
  box-shadow: 0 14px 34px -12px rgba(125, 211, 252, .7);
  cursor: pointer; transition: transform .12s ease;
}
.btn-primary:active { transform: scale(.975); }
.btn-primary[disabled] { opacity: .4; }

.btn-ghost {
  width: 100%; border: 1px solid var(--line); background: transparent;
  color: var(--muted); border-radius: 16px; padding: 13px;
  font-size: 14px; font-family: inherit; cursor: pointer; margin-top: 10px;
}
.btn-ghost:active { background: var(--surface); }

.footnote { font-size: 11.5px; color: #5d6a83; line-height: 1.7; text-align: center; margin: 6px 4px 0; }

/* ---------------------------------------------------- 练习页 */

.drill-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.icon-btn {
  width: 38px; height: 38px; flex: none; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 16px; display: grid; place-items: center;
  cursor: pointer;
}
.icon-btn:active { background: var(--surface-2); }

.progress-wrap { flex: 1; }
.progress-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; }
.progress-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--n), var(--l));
  border-radius: 4px; transition: width .3s ease;
}
.progress-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* 舞台 / 卡堆 */
.stage {
  position: relative; flex: 1; min-height: 0;
  display: grid; place-items: center;
  touch-action: none; /* 自己处理手势 */
}

.ghost {
  position: absolute; inset: 0; margin: auto;
  width: min(100%, 420px); height: min(100%, 460px);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
  transform: scale(.93) translateY(-16px);
  opacity: .5;
  transition: transform .28s ease, opacity .28s ease;
}
.ghost.g2 { transform: scale(.87) translateY(-30px); opacity: .26; }

.card {
  position: relative; z-index: 2;
  width: min(100%, 420px); height: min(100%, 460px);
  perspective: 1400px;
  will-change: transform;
}
.card.is-out { transition: transform .3s cubic-bezier(.4,0,1,1), opacity .3s ease; }

.card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .48s cubic-bezier(.4,.1,.2,1);
}
.card.is-revealed .card__inner { transform: rotateY(180deg); }
/* 换卡时禁止背面翻回动画，否则会看到"倒着翻回去" */
.card.no-flip .card__inner { transition: none; }

.face {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px; overflow: hidden;
  border: 1px solid var(--line);
  /* 注意：这里刻意不用 backdrop-filter —— iOS 上它与 backface-visibility 同用会导致翻转残影 */
  background: linear-gradient(165deg, rgba(38,48,72,.96), rgba(20,27,45,.96));
  box-shadow: var(--shadow);
}
.face--back { transform: rotateY(180deg); }

/* 正面：遮住字 */
.mask {
  font-size: 92px; font-weight: 300; color: rgba(255,255,255,.13);
  line-height: 1; margin-bottom: 22px; letter-spacing: 4px;
}
.speaker {
  width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-items: center; font-size: 44px;
  background: radial-gradient(circle at 30% 25%, rgba(125,211,252,.28), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  color: #dbeafe; cursor: pointer;
  transition: transform .15s ease;
}
.speaker:active { transform: scale(.93); }
.speaker.playing { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125,211,252,.4); }
  50% { box-shadow: 0 0 0 16px rgba(125,211,252,0); }
}
.card-hint { margin-top: 26px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.7; }

/* 背面：揭晓 */
.char {
  font-size: 108px; line-height: 1.05; font-weight: 500; letter-spacing: 2px;
  margin-bottom: 6px;
}
.pinyin {
  font-size: 30px; letter-spacing: 2px; color: var(--muted);
  font-family: 'Times New Roman', Georgia, serif; margin-bottom: 18px;
}
.pinyin .tone { font-weight: 700; }
.tone1 { color: #f87171; } .tone2 { color: #fbbf24; }
.tone3 { color: #4ade80; } .tone4 { color: #60a5fa; } .tone5 { color: var(--muted); }

.verdict {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.verdict.ok { background: rgba(52,211,153,.15); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(52,211,153,.3); }
.verdict.bad { background: rgba(251,113,133,.15); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(251,113,133,.3); }
.verdict.unsure { background: rgba(167,139,250,.15); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(167,139,250,.3); }

.badge-initial {
  position: absolute; top: 18px; right: 18px;
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  font-size: 22px; font-weight: 800;
}
.badge-initial.n { background: rgba(251,191,36,.16); color: var(--n); box-shadow: inset 0 0 0 1px rgba(251,191,36,.38); }
.badge-initial.l { background: rgba(56,189,248,.16); color: var(--l); box-shadow: inset 0 0 0 1px rgba(56,189,248,.38); }

.alt-note { position: absolute; bottom: 16px; font-size: 11.5px; color: #5d6a83; }

/* 复听按钮 */
.replay-row { display: flex; gap: 10px; margin-top: 20px; }
.replay-row button {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 14px; padding: 10px 16px; font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.replay-row button:active { background: var(--surface-2); }

/* 选项区 */
.answer-zone { padding-top: 16px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opt {
  border: 0; border-radius: 20px; padding: 20px 0; cursor: pointer;
  font-size: 30px; font-weight: 800; font-family: inherit;
  display: grid; place-items: center; gap: 2px;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.opt small { font-size: 11px; font-weight: 500; opacity: .75; letter-spacing: .5px; }
.opt-n { background: rgba(251,191,36,.13); color: var(--n); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.4); }
.opt-l { background: rgba(56,189,248,.13); color: var(--l); box-shadow: inset 0 0 0 1.5px rgba(56,189,248,.4); }
.opt:active { transform: scale(.96); }
.opt.correct { background: rgba(52,211,153,.2); color: #d1fae5; box-shadow: inset 0 0 0 2px var(--ok); }
.opt.wrong { background: rgba(251,113,133,.16); color: #ffe4e6; box-shadow: inset 0 0 0 2px var(--bad); opacity: .85; }
.options.is-locked .opt { pointer-events: none; }
.options.is-locked .opt:not(.correct):not(.wrong) { opacity: .3; }

.opt-unsure {
  grid-column: span 2; padding: 15px 0; font-size: 16px; font-weight: 600;
  background: rgba(167,139,250,.1); color: var(--warn);
  box-shadow: inset 0 0 0 1.5px rgba(167,139,250,.28);
}
.opt-unsure small { display: block; margin-top: 2px; }

/* 下滑提示（同时是可点按钮，桌面端不必依赖拖拽） */
.swipe-hint {
  display: block; width: 100%; margin-top: 10px; padding: 9px 0;
  border: 1px dashed rgba(255,255,255,.16); border-radius: 13px;
  background: transparent; font-family: inherit;
  text-align: center; font-size: 12.5px; color: var(--muted);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  cursor: pointer;
}
.swipe-hint.show { opacity: 1; pointer-events: auto; }
.swipe-hint.show:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.swipe-hint:active { background: var(--surface); }
.swipe-hint i { display: inline-block; animation: bob 1.3s ease-in-out infinite; font-style: normal; }

/* 未作答就想翻页时，闪一下选项提醒先作答 */
.options.nudge .opt { animation: nudge .5s ease; }
@keyframes nudge {
  0%,100% { transform: none; }
  30% { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
}
@keyframes bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

.shake { animation: shake .4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}

/* ---------------------------------------------------- 结算页 */

.result-hero { text-align: center; margin: 26px 0 20px; }
.result-hero .score { font-size: 60px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.result-hero .score small { font-size: 22px; color: var(--muted); font-weight: 500; }
.result-hero p { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

.wrong-list { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }
.wrong-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); border-radius: 14px; padding: 11px 13px;
}
.wrong-item .wc { font-size: 26px; line-height: 1; }
.wrong-item .wp { font-size: 14px; color: var(--muted); font-family: 'Times New Roman', Georgia, serif; flex: 1; }
.wrong-item .tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; }
.tag.n { background: rgba(251,191,36,.16); color: var(--n); }
.tag.l { background: rgba(56,189,248,.16); color: var(--l); }
.wrong-item .mini-play {
  border: 0; background: var(--surface-2); color: var(--text); width: 34px; height: 34px;
  border-radius: 11px; font-size: 15px; cursor: pointer;
}

.empty-note { text-align: center; color: var(--muted); font-size: 13.5px; padding: 18px 0; }

/* 小屏适配 */
@media (max-height: 700px) {
  .char { font-size: 84px; }
  .mask { font-size: 72px; }
  .speaker { width: 88px; height: 88px; font-size: 36px; }
  .opt { padding: 16px 0; font-size: 26px; }
  .card, .ghost { height: min(100%, 360px); }
  .card-hint { margin-top: 18px; }
}

/* 自动播放被拦截时的提示：悬浮 toast，不占布局空间（避免小屏被挤到要滚动） */
.audio-alert {
  position: fixed;
  left: 16px; right: 16px;
  top: calc(var(--safe-t) + 58px);
  z-index: 30;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13px;
  text-align: center;
  color: #fde68a;
  background: rgba(45, 35, 12, .96);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .45), 0 12px 30px -10px rgba(0, 0, 0, .8);
  cursor: pointer;
  animation: alertIn .25s ease;
}
.audio-alert b { text-decoration: underline; }
.audio-alert[hidden] { display: none; }
@keyframes alertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   对比辨音：两个同韵母同声调的音，分别判断声母
   ============================================================ */

.pair { display: none; }
/* 对比题不做翻转，直接换成两行选择界面 */
.card--pair .card__inner { display: none; }
.card--pair .pair {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 22px 18px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(38,48,72,.96), rgba(20,27,45,.96));
  box-shadow: var(--shadow);
}
/* 对比题的选项在卡片内，底部那排 n / l / 不确定 要收起来 */
.options.is-pair { display: none; }

.pair-head { text-align: center; margin-bottom: 18px; }
.pair-head b { display: block; font-size: 16px; letter-spacing: 1.5px; margin-bottom: 5px; }
.pair-head span { font-size: 12px; color: var(--muted); }

.pair-row {
  /* 不留 gap：否则播放区与 n/l 之间会有一条点了没反应的死区 */
  display: flex; align-items: center; gap: 0;
  padding: 11px 13px; margin-bottom: 12px;
  border-radius: 17px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease;
}
.pair-row.is-playing {
  background: rgba(125,211,252,.15);
  border-color: rgba(125,211,252,.55);
}
/*
 * 播放区整个是一个 <button>，覆盖 🔊 + 序号 + 揭晓文字那一整块。
 * 不能用普通 div 做热区：实测触摸下 div 只收到 pointerdown / mousedown，
 * pointerup 和 click 都不触发（pointerup 被 pointer capture 吃掉了），点了等于没点。
 */
.pair-play {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding-right: 10px;
  padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pair-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px;
  background: rgba(125,211,252,.16);
  border: 1px solid rgba(125,211,252,.34);
  color: #dbeafe;
  transition: transform .14s ease;
}
.pair-play:active .pair-icon { transform: scale(.92); }
.pair-no { font-size: 17px; color: var(--muted); flex: none; }

.pair-reveal {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px;
  font-size: 14px; color: var(--muted); overflow: hidden;
}
.pair-reveal b { font-size: 30px; font-weight: 500; color: var(--text); line-height: 1.1; }
.pair-reveal .pair-py { font-family: 'Times New Roman', Georgia, serif; font-size: 17px; }

.pair-ans { display: flex; gap: 8px; flex: none; }
.pair-opt {
  width: 50px; height: 46px; border-radius: 13px;
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--text);
  transition: transform .12s ease;
}
.pair-opt:active { transform: scale(.94); }
.pair-opt[data-ans="n"][aria-pressed="true"] {
  background: rgba(251,191,36,.2); color: var(--n); box-shadow: inset 0 0 0 2px var(--n);
}
.pair-opt[data-ans="l"][aria-pressed="true"] {
  background: rgba(56,189,248,.2); color: var(--l); box-shadow: inset 0 0 0 2px var(--l);
}
.pair-opt.correct { box-shadow: inset 0 0 0 2px var(--ok); color: #d1fae5; }
.pair-opt.wrong { box-shadow: inset 0 0 0 2px var(--bad); opacity: .8; }
/* 只锁作答选项；播放按钮揭晓后仍可用（正好用来对比两个音） */
.pair.is-locked .pair-opt { pointer-events: none; }
.pair.is-locked .pair-play { opacity: .7; }
.pair.is-locked .pair-opt:not(.correct):not(.wrong) { opacity: .3; }

.pair .verdict { margin-top: 4px; }
.pair-submit {
  margin-top: auto; width: 100%; padding: 15px;
  border-radius: 16px; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; color: #071018;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  transition: transform .14s ease;
}
.pair-submit:active:not(:disabled) { transform: scale(.98); }
.pair-submit:disabled { opacity: .3; cursor: default; }

/* 设置项下面的说明文字 */
.field-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }