/* 诗城守卫 — 样式
 * 主题：宣纸 · 墨 · 朱砂 · 鎏金
 */
:root {
  --paper: #f3ede2;
  --paper-2: #ebe3d4;
  --ink: #24211d;
  --ink-2: #4a4540;
  --ink-3: #8a8278;
  --line: rgba(36, 33, 29, .12);
  --red: #b23a2c;
  --red-2: #d05445;
  --gold: #b8912f;
  --green: #3f7a52;
  --shadow: 0 10px 30px rgba(60, 48, 30, .12);
  --r: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* 宣纸纹理 */
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(180, 160, 120, .10), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(150, 170, 160, .10), transparent 46%),
    repeating-linear-gradient(0deg, rgba(120, 100, 70, .022) 0 1px, transparent 1px 4px);
}

#field {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  width: 100%;
  height: 0;            /* 关键：避免 canvas 尺寸反哺布局造成放大 */
  min-height: 0;
  max-height: 100%;
  display: block;
  touch-action: none;
}

/* ================= HUD ================= */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: linear-gradient(180deg, rgba(243, 237, 226, .96), rgba(243, 237, 226, 0));
  pointer-events: none;
}
#hud > * { pointer-events: auto; }
.hud-left { flex: 0 0 auto; }
.hud-stage {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hud-wave { font-size: 11px; color: var(--ink-3); margin-top: 1px; letter-spacing: .04em; }
.hud-wave.warn { color: var(--red); font-weight: 600; }

.hud-castle { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.hpbar {
  width: 100%; max-width: 180px; height: 9px;
  background: rgba(36, 33, 29, .10);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}
.hpbar > i {
  display: block; height: 100%; width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8c2f24, #cf5a48);
  transition: width .28s ease;
}
.hpbar > i.low { background: linear-gradient(90deg, #a8231a, #e0603f); }
#hud-hp-text { font-size: 10px; color: var(--ink-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-score { text-align: right; line-height: 1; }
.hud-score b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hud-score small { font-size: 10px; color: var(--ink-3); margin-left: 2px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .6);
  color: var(--ink-2);
  font-size: 11px; letter-spacing: 1px;
  display: grid; place-items: center;
  cursor: pointer;
}
.icon-btn:active { transform: scale(.94); }

/* ================= 场景通用 ================= */
.scene {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
  animation: fadeIn .22s ease;
}
.scene::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(120, 100, 70, .025) 0 1px, transparent 1px 4px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.page {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(16px + var(--safe-b));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0 14px;
  flex: 0 0 auto;
}
.page-head h2 {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 20px; font-weight: 700; letter-spacing: .12em; margin: 0;
  flex: 1 1 auto;
}
.page-tag {
  font-size: 11px; color: var(--gold);
  border: 1px solid rgba(184, 145, 47, .4);
  border-radius: 99px; padding: 3px 10px;
  background: rgba(184, 145, 47, .08);
  letter-spacing: .06em;
  white-space: nowrap;
}
.back-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7);
  font-size: 22px; line-height: 1; color: var(--ink-2);
  display: grid; place-items: center; padding-bottom: 3px;
  cursor: pointer;
}
.back-btn:active { transform: scale(.94); }
.mini-btn {
  font-size: 11px; color: var(--ink-3); background: none;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; cursor: pointer;
}
.mini-btn:active { background: rgba(0, 0, 0, .04); }

/* ================= 主菜单 ================= */
#scene-menu { background: transparent; }
#scene-menu::after { display: none; }
.menu-wrap {
  position: relative; z-index: 2;
  margin: auto;
  width: 100%;
  max-width: 420px;
  padding: 0 26px calc(24px + var(--safe-b));
  display: flex; flex-direction: column;
  animation: slideUp .4s cubic-bezier(.2, .8, .3, 1);
}
.brand { text-align: center; margin-bottom: 26px; }
.seal {
  width: 54px; height: 54px; margin: 0 auto 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #b23a2c, #8f2b20);
  color: #f7ece0;
  font-family: "Songti SC", "SimSun", serif;
  font-size: 28px; font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(150, 50, 36, .3), inset 0 0 0 2px rgba(255, 255, 255, .18);
  transform: rotate(-3deg);
}
.brand h1 {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 38px; letter-spacing: .22em; margin: 0 0 6px;
  font-weight: 700; color: var(--ink);
  text-indent: .22em;
}
.brand .sub {
  margin: 0; font-size: 12px; letter-spacing: .3em;
  color: var(--ink-3); text-indent: .3em;
}

.panel-menu { display: flex; flex-direction: column; gap: 10px; }
.mbtn {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(36, 33, 29, .1);
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(80, 60, 30, .05);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .2s ease;
}
.mbtn:active { transform: scale(.982); }
.mbtn .mb-t { font-size: 16px; font-weight: 600; letter-spacing: .1em; }
.mbtn .mb-s { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.mbtn.primary {
  background: linear-gradient(145deg, #2b2823, #3d3830);
  border-color: transparent;
  color: #f6efe2;
  box-shadow: 0 8px 22px rgba(40, 32, 20, .28);
}
.mbtn.primary .mb-s { color: rgba(246, 239, 226, .62); }

.menu-foot {
  margin-top: 18px; text-align: center;
  font-size: 12px; color: var(--ink-3); letter-spacing: .06em;
}
.menu-foot .dot { margin: 0 6px; opacity: .5; }
.menu-foot .link { border-bottom: 1px dashed var(--ink-3); cursor: pointer; }

/* ================= 关卡列表 ================= */
.stage-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.stage-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(36, 33, 29, .09);
  box-shadow: 0 2px 10px rgba(80, 60, 30, .045);
  cursor: pointer;
  overflow: hidden;
}
.stage-card:active { transform: scale(.988); }
.stage-card.locked { opacity: .5; cursor: not-allowed; }
.stage-card.locked:active { transform: none; }
.stage-no {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: "Songti SC", "SimSun", serif;
  font-size: 18px; font-weight: 700;
  color: var(--red);
  border-radius: 12px;
  background: rgba(178, 58, 44, .07);
  border: 1px solid rgba(178, 58, 44, .18);
}
.stage-info { flex: 1 1 auto; min-width: 0; }
.stage-name {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 16px; font-weight: 700; letter-spacing: .08em;
  display: flex; align-items: center; gap: 8px;
}
.stage-name em {
  font-style: normal; font-size: 10px; font-weight: 400;
  color: var(--gold); border: 1px solid rgba(184, 145, 47, .35);
  border-radius: 4px; padding: 1px 5px; letter-spacing: .04em;
}
.stage-desc { font-size: 11px; color: var(--ink-3); margin-top: 3px; letter-spacing: .03em; }
.stage-stars { flex: 0 0 auto; font-size: 13px; letter-spacing: 2px; color: rgba(36, 33, 29, .16); }
.stage-stars b { color: var(--gold); font-weight: 400; }
.stage-lock { flex: 0 0 auto; font-size: 15px; color: var(--ink-3); }

/* ================= 对抗模式 ================= */
.duel-intro {
  padding: 16px 18px;
  border-radius: var(--r);
  background: linear-gradient(140deg, rgba(43, 40, 35, .94), rgba(64, 58, 48, .94));
  color: #efe6d6;
  margin-bottom: 16px;
}
.duel-intro p { margin: 0; font-size: 13px; line-height: 1.8; letter-spacing: .04em; color: rgba(239, 230, 214, .8); }
.duel-list { display: flex; flex-direction: column; gap: 10px; }
.duel-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: var(--r);
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(36, 33, 29, .09);
  cursor: pointer;
}
.duel-card:active { transform: scale(.988); }
.duel-face {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: "Songti SC", "SimSun", serif;
  font-size: 20px; font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #b8912f, #8d6c1c);
}
.duel-card:nth-child(2) .duel-face { background: linear-gradient(145deg, #4a7a68, #2f5a4a); }
.duel-card:nth-child(3) .duel-face { background: linear-gradient(145deg, #b23a2c, #85241a); }
.duel-info { flex: 1 1 auto; }
.duel-name { font-size: 16px; font-weight: 600; letter-spacing: .08em; }
.duel-desc { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.duel-tip {
  margin-top: 16px; font-size: 11px; color: var(--ink-3);
  line-height: 1.8; letter-spacing: .03em; text-align: center;
}

/* ================= 排行榜 ================= */
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(36, 33, 29, .07);
}
.rank-row.me { border-color: rgba(184, 145, 47, .45); background: rgba(184, 145, 47, .07); }
.rank-no {
  width: 26px; flex: 0 0 auto; text-align: center;
  font-family: "Songti SC", "SimSun", serif;
  font-size: 15px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(1) .rank-no { color: #b8912f; font-size: 18px; }
.rank-row:nth-child(2) .rank-no { color: #8a8a8a; font-size: 17px; }
.rank-row:nth-child(3) .rank-no { color: #a06a3c; font-size: 16px; }
.rank-main { flex: 1 1 auto; min-width: 0; }
.rank-name { font-size: 14px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-meta { font-size: 10px; color: var(--ink-3); margin-top: 3px; letter-spacing: .03em; }
.rank-score {
  flex: 0 0 auto; font-size: 17px; font-weight: 700;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.empty-tip { text-align: center; color: var(--ink-3); font-size: 12px; padding: 40px 0; line-height: 2; }

/* ================= 荣誉 ================= */
.honor-head {
  padding: 20px; border-radius: var(--r);
  background: linear-gradient(145deg, #2b2823, #423b31);
  color: #f4ead8;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.honor-emblem {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(212, 178, 96, .5);
  background: radial-gradient(circle at 35% 30%, rgba(212, 178, 96, .28), transparent 70%);
  font-family: "Songti SC", "SimSun", serif;
  font-size: 24px; color: #e6c67a;
}
.honor-t { font-size: 11px; color: rgba(244, 234, 216, .6); letter-spacing: .2em; }
.honor-n {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 26px; letter-spacing: .18em; margin-top: 4px; color: #f0d79b;
}
.honor-next { font-size: 10px; color: rgba(244, 234, 216, .5); margin-top: 6px; letter-spacing: .04em; }

.sec-title {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 14px; letter-spacing: .16em; font-weight: 700;
  margin: 4px 0 10px; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 18px; }
.badge {
  display: flex; gap: 10px; align-items: center;
  padding: 11px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px dashed rgba(36, 33, 29, .14);
  opacity: .48;
}
.badge.got { opacity: 1; border-style: solid; border-color: rgba(184, 145, 47, .4); background: rgba(184, 145, 47, .08); }
.badge-ic {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(36, 33, 29, .06); font-size: 14px; color: var(--ink-3);
}
.badge.got .badge-ic { background: linear-gradient(145deg, #d8b45e, #b8912f); color: #fff; }
.badge-tx b { display: block; font-size: 12px; letter-spacing: .04em; }
.badge-tx span { font-size: 9px; color: var(--ink-3); line-height: 1.4; display: block; margin-top: 2px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding-bottom: 20px; }
.stat-cell {
  padding: 14px 8px; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(36, 33, 29, .07);
}
.stat-cell b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.stat-cell span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 4px; letter-spacing: .06em; }

/* ================= 弹层 ================= */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(30, 26, 20, .42);
  backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.dialog {
  width: 100%; max-width: 340px;
  padding: 24px 22px calc(20px + var(--safe-b) * .4);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(30, 22, 10, .3);
  text-align: center;
  animation: slideUp .28s cubic-bezier(.2, .8, .3, 1);
  max-height: calc(100% - 20px);
  overflow-y: auto;
}
.dialog h3 {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 22px; letter-spacing: .16em; margin: 0 0 6px;
}
.dk-sub { font-size: 12px; color: var(--ink-3); margin: 0 0 18px; letter-spacing: .04em; }
.dbtn {
  display: block; width: 100%;
  padding: 13px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7);
  font-size: 14px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink); margin-top: 9px; cursor: pointer;
}
.dbtn:active { transform: scale(.985); }
.dbtn:disabled { opacity: .35; }
.dbtn.primary {
  background: linear-gradient(145deg, #2b2823, #3d3830);
  color: #f6efe2; border-color: transparent;
}
.dbtn.ghost { background: none; border-color: transparent; color: var(--ink-3); font-weight: 400; }

.res-seal {
  width: 62px; height: 62px; margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-family: "Songti SC", "SimSun", serif;
  font-size: 32px; font-weight: 700; color: #f9efe1;
  background: linear-gradient(145deg, #b23a2c, #8a2a1f);
  box-shadow: 0 8px 22px rgba(150, 50, 36, .3);
  transform: rotate(-4deg);
  animation: stamp .5s cubic-bezier(.2, 1.4, .4, 1);
}
.res-seal.lose { background: linear-gradient(145deg, #55504a, #332f2a); box-shadow: 0 8px 22px rgba(40, 36, 30, .3); }
@keyframes stamp { 0% { transform: scale(1.8) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }

.stars { font-size: 26px; letter-spacing: 6px; color: rgba(36, 33, 29, .14); margin: 4px 0 16px; }
.stars b { color: var(--gold); font-weight: 400; }
.res-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-bottom: 18px;
}
.res-stat {
  padding: 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
}
.res-stat b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.res-stat span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 3px; letter-spacing: .05em; }

/* ================= 答题面板 ================= */
#quiz {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  padding: 12px 14px calc(10px + var(--safe-b));
  background: linear-gradient(180deg, rgba(247, 242, 233, .82), #f7f2e9 18%, #f3ede2);
  border-top: 1px solid rgba(36, 33, 29, .1);
  box-shadow: 0 -8px 26px rgba(70, 55, 30, .07);
}
.quiz-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 9px;
  min-height: 20px;
}
.badge {
  font-size: 10px; padding: 3px 8px; border-radius: 5px;
  letter-spacing: .06em; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.subj { background: rgba(36, 33, 29, .07); color: var(--ink-2); }
.badge.attr { background: rgba(63, 127, 168, .12); color: #2f6a8c; border-color: rgba(63, 127, 168, .25); }
.badge.eff { background: rgba(178, 58, 44, .08); color: var(--red); border-color: rgba(178, 58, 44, .2); }
.combo {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--gold); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(1.3); } to { transform: scale(1); } }

.q-text {
  font-family: "Songti SC", "SimSun", "Noto Serif SC", serif;
  font-size: 16px; line-height: 1.65;
  letter-spacing: .03em;
  color: var(--ink);
  margin-bottom: 11px;
  min-height: 48px;
  display: flex; align-items: center;
}

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt {
  position: relative;
  padding: 11px 12px 11px 30px;
  border-radius: 10px;
  border: 1px solid rgba(36, 33, 29, .13);
  background: rgba(255, 255, 255, .8);
  font-size: 14px; line-height: 1.35;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .1s;
  min-height: 46px;
  display: flex; align-items: center;
  word-break: break-word;
}
.opt::before {
  content: attr(data-k);
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--ink-3);
  width: 14px; height: 14px; line-height: 14px; text-align: center;
  border: 1px solid var(--line); border-radius: 4px;
}
.opt:active { transform: scale(.98); background: rgba(36, 33, 29, .05); }
.opt.right {
  background: rgba(63, 122, 82, .14);
  border-color: rgba(63, 122, 82, .55);
  color: #2c5a3a;
}
.opt.right::before { border-color: rgba(63, 122, 82, .5); color: #2c5a3a; }
.opt.wrong {
  background: rgba(178, 58, 44, .11);
  border-color: rgba(178, 58, 44, .5);
  color: #8f2b20;
}
.opt.wrong::before { border-color: rgba(178, 58, 44, .5); color: #8f2b20; }
.opt.dim { opacity: .45; }

.quiz-bottom {
  display: flex; align-items: center; gap: 10px;
  margin-top: 9px;
}
.hint { font-size: 10px; color: var(--ink-3); letter-spacing: .03em; flex: 1 1 auto; }
.skip-btn {
  font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line); background: none;
  border-radius: 99px; padding: 5px 12px; cursor: pointer;
  letter-spacing: .04em;
}
.skip-btn:active { background: rgba(0, 0, 0, .04); }

/* ================= 提示条 ================= */
.toast {
  position: absolute;
  left: 50%; top: 22%;
  transform: translate(-50%, -8px);
  z-index: 30;
  padding: 9px 18px;
  border-radius: 99px;
  background: rgba(43, 40, 35, .92);
  color: #f4ead8;
  font-size: 13px; letter-spacing: .08em;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 竖屏优先 ================= */
/* 超窄屏 */
@media (max-width: 340px) {
  .q-text { font-size: 15px; }
  .opt { font-size: 13px; }
  .brand h1 { font-size: 32px; }
}

/* 横屏时提示竖屏游玩（手机） */
#rotate-tip {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--paper);
  text-align: center;
  padding: 24px;
}
#rotate-tip .rt-icon {
  width: 58px; height: 92px;
  border: 2px solid var(--ink-2);
  border-radius: 10px;
  position: relative;
  animation: rtTilt 2.4s ease-in-out infinite;
}
#rotate-tip .rt-icon::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: var(--ink-2);
  border-radius: 2px;
}
@keyframes rtTilt {
  0%, 40% { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}
#rotate-tip b {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 18px; letter-spacing: .14em; color: var(--ink);
}
#rotate-tip span { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }

@media (orientation: landscape) and (max-height: 520px) {
  #rotate-tip { display: flex; }
}

/* ================= 对战 HUD ================= */
#duelhud {
  position: absolute;
  top: calc(46px + env(safe-area-inset-top, 0px));
  left: 14px; right: 14px;
  z-index: 7;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(247, 242, 233, .82);
  border: 1px solid rgba(36, 33, 29, .1);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(70, 55, 30, .07);
}
.duel-row { display: flex; align-items: center; gap: 7px; }
.duel-row + .duel-row { margin-top: 5px; }
.duel-lab {
  font-size: 10px; flex: 0 0 auto; width: 14px; text-align: center;
  color: #3f7a52; font-weight: 700;
}
.duel-lab.foe { color: var(--red); }
.duel-bar {
  flex: 1 1 auto; height: 6px; border-radius: 99px;
  background: rgba(36, 33, 29, .1); overflow: hidden;
}
.duel-bar > i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #3f7a52, #6aa87c);
  border-radius: 99px; transition: width .25s ease;
}
.duel-bar.foe > i { background: linear-gradient(90deg, #8c2f24, #cf5a48); }
.duel-num {
  flex: 0 0 auto; width: 30px; text-align: right;
  font-size: 10px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.duel-log { margin-top: 6px; }
.duel-log div {
  font-size: 10px; color: var(--ink-3); line-height: 1.6;
  letter-spacing: .02em;
  display: flex; gap: 6px;
  animation: fadeIn .2s ease;
}
.duel-log div:first-child { color: var(--ink-2); }
.duel-log div.no { color: rgba(178, 58, 44, .75); }
.duel-log b { color: var(--red); font-weight: 700; margin-left: auto; }

/* ================= 答题倒计时 ================= */
.q-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.q-timer-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 99px;
  background: rgba(36, 33, 29, .09);
  overflow: hidden;
}
.q-timer-track > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3f7a52, #6aa87c);
  transform-origin: left center;
  transition: background .25s;
}
.q-timer-track > i.warn { background: linear-gradient(90deg, #b8912f, #d8b45e); }
.q-timer-track > i.danger {
  background: linear-gradient(90deg, #a8231a, #e0603f);
  animation: timerPulse .6s ease-in-out infinite;
}
@keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
#q-timer-num {
  flex: 0 0 auto;
  width: 22px;
  text-align: right;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
#q-timer-num.danger { color: var(--red); font-weight: 700; }

/* ================= 错题本 ================= */
.wrong-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.wrong-actions .mini-btn {
  flex: 1 1 auto;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: .06em;
}
.wrong-actions .mini-btn.primary {
  background: linear-gradient(145deg, #2b2823, #3d3830);
  color: #f6efe2;
  border-color: transparent;
  font-weight: 600;
}
.wrong-list { display: flex; flex-direction: column; gap: 9px; padding-bottom: 20px; }
.wrong-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(36, 33, 29, .08);
}
.wrong-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.wrong-count-tag {
  margin-left: auto;
  font-size: 10px;
  color: var(--red);
  background: rgba(178, 58, 44, .08);
  border-radius: 99px;
  padding: 2px 7px;
  letter-spacing: .02em;
}
.wrong-q {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 7px;
  word-break: break-word;
}
.wrong-a {
  font-size: 12px;
  color: #2c5a3a;
  line-height: 1.5;
  display: flex;
  gap: 6px;
}
.wrong-a span { color: var(--ink-3); flex: 0 0 auto; }
.wrong-a b { font-weight: 600; }

/* ================= 复习弹层 ================= */
.dialog.review { text-align: left; }
.rv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rv-progress {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rv-q {
  font-family: "Songti SC", "SimSun", serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 16px;
  min-height: 52px;
  letter-spacing: .02em;
}
.rv-ans {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(178, 58, 44, .07);
  border: 1px solid rgba(178, 58, 44, .18);
  margin-bottom: 8px;
}
.rv-ans span {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.rv-ans b {
  font-size: 14px;
  font-weight: 600;
  color: #8f2b20;
  line-height: 1.4;
  word-break: break-word;
}
.rv-ans.ok {
  background: rgba(63, 122, 82, .09);
  border-color: rgba(63, 122, 82, .25);
}
.rv-ans.ok b { color: #2c5a3a; }
.rv-nav {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.rv-nav .dbtn { margin-top: 0; }
.review-btn {
  background: rgba(184, 145, 47, .12) !important;
  border-color: rgba(184, 145, 47, .45) !important;
  color: var(--gold) !important;
}

.hidden { display: none !important; }

/* ---------------- 登录 / 注册 ---------------- */
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.auth-tab {
  flex: 1;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
  background: rgba(42, 36, 28, .05);
  border: 1px solid rgba(42, 36, 28, .16);
  border-radius: 12px;
}
.auth-tab.active {
  color: var(--paper);
  background: var(--red);
  border-color: var(--red);
}
.auth-form { display: flex; flex-direction: column; }
.auth-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.auth-field span {
  flex: 0 0 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.auth-field input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(42, 36, 28, .22);
  border-radius: 10px;
  outline: none;
  -webkit-appearance: none;
}
.auth-field input:focus {
  border-color: var(--red);
  background: #fff;
}
.auth-form .dbtn { margin-top: 6px; }
.auth-note {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}
.auth-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(42, 36, 28, .15);
  border-radius: 14px;
}
.auth-face {
  flex: 0 0 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--paper);
  background: var(--red);
  border-radius: 12px;
}
.auth-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.auth-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-3);
}

/* ---------------- 排行榜切换 ---------------- */
.rank-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.rank-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-2);
  background: rgba(42, 36, 28, .05);
  border: 1px solid rgba(42, 36, 28, .16);
  border-radius: 10px;
}
.rank-tab.active {
  color: var(--paper);
  background: var(--red);
  border-color: var(--red);
}
.rank-row.me {
  background: rgba(178, 58, 44, .09);
  border-color: rgba(178, 58, 44, .28);
}
.empty-tip .link { color: var(--red); font-weight: 600; }