/* ==========================================================================
   base.css —— reset、字体、布局骨架
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;                 /* A+/A- 改这个值即可全局缩放 */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* 移动端地址栏会吃掉 100vh，用 dvh 兜底 */
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--focus); }

/* 焦点环：绝不用 outline:none —— 键盘和投屏操作全靠它 */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 消除移动端 300ms 点击延迟与双击缩放 */
button, .chip, .opt, .slot, .char {
  touch-action: manipulation;
}

/* ---------- 布局骨架 ---------- */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* 顶栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 244, 238, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}
.topbar__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 主内容区 */
#view {
  flex: 1;
  padding-top: 18px;
  padding-bottom: calc(var(--bottom-h) + 24px);
}

/* 底部固定操作区（答题时用） */
.bottombar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(246, 244, 238, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);   /* iPhone 底部小黑条 */
}
.bottombar__in {
  min-height: var(--bottom-h);
  display: flex;
  align-items: center;
  gap: 12px;
}
.bottombar[hidden] { display: none; }

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 英文一律用英文字体，字间距略大更好认 */
.en, .en-sentence {
  font-family: var(--font-en);
  letter-spacing: .2px;
}

/* 数字用等宽，防止倒计时和分数跳动 */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 正文里允许选中（孩子可能想复制例句），但交互控件不允许 */
.chip, .opt, .slot, .btn, .char, .bigchoice { user-select: none; -webkit-user-select: none; }

/* 滚动条（桌面） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* 打印（结业证书） */
@media print {
  .topbar, .bottombar, .no-print { display: none !important; }
  body { background: #fff; }
  #view { padding: 0; }
}