/* ============ MT-99 口诀掌机 · 复古掌机外壳与界面 ============
   V2.1 机身外观对齐「掌上时光 · Pocket Archive」8 色收藏系列：
   纸色桌面、注塑缝线、磨砂噪点、透明壳露电路、每壳独立 print/AB 键色。
   只动外观层；屏内页面（.page 体系）与游戏画布配色不变。 */

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

:root {
  /* 外壳与 LCD 自行管理配色，禁止浏览器自动深色转换。 */
  color-scheme: only light;
  /* 桌面（纸色档案风，参考稿 --paper/--ink） */
  --paper: #f4f2eb;
  /* 默认外壳 = 经典灰（与 [data-shell="sh_gray"] 一致） */
  --shell-light: #dcded2;    /* 机身高光侧 */
  --shell: #b9bab0;          /* 机身主色 */
  --shell-dark: #92968b;     /* 机身暗侧 */
  --shell-edge: #83887d;     /* 底缘硬边 */
  --print: #35413f;          /* 机身印字（logo/键名/铭文） */
  --btn-face: #303331;       /* 十字键 */
  --ab: #8e3553;             /* AB 键（随外壳变） */
  --ab-dark: #6e2249;
  --dcell: 46px;             /* 十字键单元格尺寸 */
  --ab-size: 58px;           /* AB 键直径 */
}

html, body { height: 100%; }

body {
  background: radial-gradient(1200px 800px at 50% 18%, #f9f7f1 0%, var(--paper) 55%, #e8e5d9 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: manipulation;
  font-family: "Press Start 2P", "PingFang SC", "Microsoft YaHei", "Heiti SC", monospace;
  user-select: none; -webkit-user-select: none;
}

#stage { transform-origin: center center; }

.hidden { display: none !important; }

/* ---------------- 机身 ---------------- */

.console {
  color: var(--print);
  width: 560px;
  /* 外壳渐变全部取自 --shell 系列变量（复古红线：禁止花哨渐变）；
     isolation 让 z-index:-1 的噪点/电路板贴在机身漆面之上、内容之下 */
  background: linear-gradient(120deg, var(--shell-light) 0%, var(--shell) 28%, var(--shell) 73%, var(--shell-dark) 100%);
  border-radius: 24px 24px 64px 24px;
  padding: 12px 24px 26px;
  box-shadow:
    inset 3px 4px 4px rgba(255,255,255,.5),
    inset -5px -5px 6px rgba(0,0,0,.16),
    2px 6px 0 var(--shell-edge),
    8px 24px 40px rgba(48,55,47,.28);
  position: relative;
  isolation: isolate;
}

/* 磨砂噪点（参考稿 SVG turbulence）：贴漆面，不遮内容 */
.console::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' opacity='.3' filter='url(%23n)' d='M0 0h120v120H0z'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* 注塑缝线：横缝 + 两端竖缝（结构在 index.html，纯装饰） */
.seam {
  height: 0; margin: 2px -24px 10px;
  border-top: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.25);
  position: relative;
}
.seam::before, .seam::after {
  content: ""; position: absolute; top: -30px; width: 1px; height: 30px;
  background: rgba(0,0,0,.14); box-shadow: 1px 0 0 rgba(255,255,255,.25);
}
.seam::before { left: 44px; }
.seam::after { right: 44px; }

/* 透明外壳（透明紫/透明蓝）：机身半透明 + 露出内部电路板 */
.console[data-shell="sh_purple"] .circuit,
.console[data-shell="sh_cyan"] .circuit { display: block; }
.circuit {
  display: none; position: absolute; z-index: -1;
  inset: 18px 20px;
  border-radius: 34px 34px 52px 34px;
  border: 2px solid rgba(228,220,255,.31);
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(211,219,239,.15) 28px 31px, transparent 31px 55px),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(211,219,239,.13) 40px 43px, transparent 43px 58px);
}
.circuit::before {
  content: ""; position: absolute; bottom: 20%; left: 37%;
  width: 82px; height: 96px;
  background: rgba(48,54,68,.55);
  border: 10px double rgba(182,182,192,.47);
  box-shadow: -158px 86px 0 -17px rgba(226,219,190,.34), 154px -36px 0 -21px rgba(226,219,190,.34);
}
.circuit::after {
  content: ""; position: absolute; inset: 58% 0 0;
  background:
    radial-gradient(circle at 4% 12%, rgba(227,225,207,.6) 0 7px, rgba(83,83,98,.4) 7px 14px, transparent 15px),
    radial-gradient(circle at 88% 40%, rgba(227,225,207,.6) 0 7px, rgba(83,83,98,.4) 7px 14px, transparent 15px);
}
/* 透明壳的屏幕外框多一圈悬浮投影（参考稿 .transparent .bezel） */
.console[data-shell="sh_purple"] .bezel,
.console[data-shell="sh_cyan"] .bezel {
  box-shadow: 0 0 0 8px rgba(36,35,49,.33), inset 2px 2px 4px rgba(255,255,255,.21), 0 2px 2px rgba(255,255,255,.5);
}

/* 外壳皮肤调色板（V2.1 八色收藏系列）：data-shell 属性覆盖整机配色变量，
   机身结构不变；颜色唯一出处在本文件，ui.js 的商店色样用探测元素读取
   --shell / --shell-dark / --shell-edge 三个值（保留旧变量名，探测逻辑不动）。
   透明紫/蓝用 rgba 机身，配合 .circuit 呈现「隐约可见电路」 */
[data-shell="sh_gray"]   { --shell-light: #dcded2; --shell: #b9bab0; --shell-dark: #92968b; --shell-edge: #83887d; --print: #35413f; --ab: #8e3553; --ab-dark: #6e2239; }
[data-shell="sh_pearl"]  { --shell-light: #fff5d9; --shell: #e3d9bd; --shell-dark: #b7a98e; --shell-edge: #a4967b; --print: #6f6254; --ab: #a34b40; --ab-dark: #7d332b; }
[data-shell="sh_teal"]   { --shell-light: #d3e8d7; --shell: #a7c6b5; --shell-dark: #7f9c8b; --shell-edge: #6d8a79; --print: #47675b; --ab: #efefeb; --ab-dark: #c2c2bb; }
[data-shell="sh_black"]  { --shell-light: #505652; --shell: #333836; --shell-dark: #1d2321; --shell-edge: #151a18; --print: #b0b7a8; --ab: #bd2e58; --ab-dark: #8e1f40; }
[data-shell="sh_red"]    { --shell-light: #da7267; --shell: #b3443d; --shell-dark: #7c2827; --shell-edge: #67201f; --print: #f4d3b4; --ab: #333638; --ab-dark: #1f2224; }
[data-shell="sh_navy"]   { --shell-light: #688eb6; --shell: #345c87; --shell-dark: #203b5b; --shell-edge: #182e48; --print: #c8d3cf; --ab: #f3cf38; --ab-dark: #b89b1e; }
[data-shell="sh_purple"] { --shell-light: rgba(199,183,226,.88); --shell: rgba(146,128,183,.85); --shell-dark: rgba(104,86,134,.88); --shell-edge: rgba(80,64,102,.9); --print: #352d51; --ab: #aa83c3; --ab-dark: #84619e; }
[data-shell="sh_cyan"]   { --shell-light: rgba(115,212,220,.88); --shell: rgba(39,158,174,.85); --shell-dark: rgba(21,96,117,.88); --shell-edge: rgba(14,66,80,.9); --print: #204458; --ab: #18b6b8; --ab-dark: #0f8a8c; }

/* 顶部品牌条：电源灯 / MT–99 印字 / 屏幕铭牌 / 电源滑钮 */
.c-top {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 6px;
}
.led {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: #503c36; border: 1px solid rgba(0,0,0,.3);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.4);
}
.led.on { background: #f66453; box-shadow: 0 0 12px 3px rgba(255,88,72,.55); }
.brand {
  font-family: "Courier New", monospace;
  font-size: 18px; font-weight: 700; font-style: italic;
  color: var(--print); letter-spacing: 1px; white-space: nowrap;
}
.brand small {
  font-size: 10px; font-style: normal; font-weight: 700;
  letter-spacing: 3px; opacity: .72; margin-left: 8px;
}
.caption {
  margin-left: auto; font-family: "Courier New", monospace;
  font-size: 9px; letter-spacing: 1px; color: var(--print); opacity: .55;
  white-space: nowrap;
}
.power {
  flex: none; margin-left: 18px; font-family: "Courier New", monospace;
  font-size: 10px; letter-spacing: 1px; color: var(--print); opacity: .6;
  white-space: nowrap;
}

/* ---------------- 屏幕 ---------------- */

.bezel {
  background: linear-gradient(135deg, #353735, #1c211f);
  border: 1px solid #171b17;
  border-radius: 12px 12px 32px 12px;
  padding: 20px 26px 22px;
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.21), 0 2px 2px rgba(255,255,255,.5);
}

.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 440;
  border-radius: 4px;
  overflow: hidden;
  background: var(--scr-bg);
  color: var(--scr-ink);
  box-shadow: inset 0 0 18px rgba(0,0,0,.35);
}

/* 主题调色板 */
.screen[data-theme="gb"] {
  color-scheme: only light;
  --scr-bg: #9bbc0f; --scr-ink: #0f380f; --scr-mid: #306230; --scr-soft: #8bac0f;
  --scr-accent: #0f380f; --scr-accent-ink: #9bbc0f;
  --scr-panel: #8bac0f;
}
.screen[data-theme="color"] {
  color-scheme: only dark;
  --scr-bg: #141a2e; --scr-ink: #eef2ff; --scr-mid: #aebce4; --scr-soft: #2a3560;
  --scr-accent: #ffd166; --scr-accent-ink: #171c30;
  --scr-panel: #1e2745;
}

/* LCD 质感：横竖双向扫描线 + 左上柔光 + 四角暗角（盖在画布与页面之上，参考稿 .lcd:after） */
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,207,.09), transparent 55%),
    repeating-linear-gradient(90deg, rgba(37,59,29,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    radial-gradient(140% 120% at 50% 0%, transparent 60%, rgba(0,0,0,.22) 100%);
}

/* ---------------- 屏内页面 ---------------- */

.page {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: 12px 14px;
  z-index: 1;
}
.page.active { display: flex; }

.page-head {
  font-size: 15px; text-align: center; padding: 4px 0 12px;
  border-bottom: 2px solid var(--scr-mid); margin-bottom: 12px;
  letter-spacing: 2px;
}
.page-foot { margin-top: auto; padding-top: 10px; }

/* 开机画面 */
#scr-boot { align-items: center; justify-content: center; }
.boot-inner { text-align: center; }
.boot-logo {
  font-size: 40px; letter-spacing: 4px; margin-bottom: 14px;
  color: var(--scr-accent); text-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
#scr-boot h1 { font-size: 22px; letter-spacing: 4px; margin-bottom: 10px; }
.boot-sub { font-size: 11px; color: var(--scr-mid); margin-bottom: 34px; }
.blink { font-size: 11px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 玩家列表 */
.player-list {
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.player-card {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--scr-mid); margin-bottom: 10px; padding: 8px 10px;
  cursor: pointer; position: relative;
}
.player-card.sel { border-color: var(--scr-ink); background: var(--scr-panel); }
.player-card.sel::before {
  content: "▶"; position: absolute; left: -14px; font-size: 10px;
}
.player-card canvas { width: 44px; height: 44px; image-rendering: pixelated; flex: none; }
.pc-info { flex: 1; min-width: 0; }
.pc-name { font-size: 13px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-meta { font-size: 10px; color: var(--scr-mid); }
.pc-del {
  font-size: 9px; padding: 6px 8px; border: 1px solid var(--scr-mid);
  color: var(--scr-mid); background: transparent; cursor: pointer; font-family: inherit;
}
.pc-del.arm { color: #fff; background: #b03a3a; border-color: #b03a3a; }

#new-player-form { border-top: 2px dashed var(--scr-mid); padding-top: 12px; margin-top: 8px; }
#inp-name {
  width: 100%; font-family: inherit; font-size: 12px;
  background: var(--scr-panel); color: var(--scr-ink);
  border: 2px solid var(--scr-mid); padding: 10px; outline: none; margin-bottom: 10px;
}
#inp-name::placeholder { color: var(--scr-ink); opacity: .55; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.avatar-grid canvas {
  width: 44px; height: 44px; image-rendering: pixelated; cursor: pointer;
  border: 2px solid transparent; background: rgba(0,0,0,.18); padding: 2px;
}
.avatar-grid canvas.sel { border-color: var(--scr-ink); background: var(--scr-accent); }

.row { display: flex; gap: 10px; }

/* 通用像素按钮 */
.mbtn {
  display: block; width: 100%;
  font-family: inherit; font-size: 13px; text-align: left;
  background: transparent; color: var(--scr-ink);
  border: 2px solid var(--scr-ink); padding: 12px 14px;
  cursor: pointer; margin-bottom: 10px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.28);
}
.mbtn.sel, .mbtn:active {
  background: var(--scr-accent); color: var(--scr-accent-ink); border-color: var(--scr-accent);
}
.mbtn.sel::before { content: "▶ "; }
.mbtn.small { font-size: 10px; padding: 9px 12px; margin-bottom: 0; }
.mbtn.ghost { border-color: var(--scr-mid); color: var(--scr-mid); }

.menu-stats {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  font-size: 11px; color: var(--scr-mid); margin-bottom: 16px;
}
.menu-stats b { color: var(--scr-ink); }

/* 档位卡片 */
.gear-list { overflow-y: auto; flex: 1; }
.gear-card {
  border: 2px solid var(--scr-mid); padding: 10px 12px; margin-bottom: 10px;
  cursor: pointer; position: relative;
}
.gear-card.sel { border-color: var(--scr-ink); background: var(--scr-panel); }
.gear-card.sel::before { content: "▶"; position: absolute; left: -14px; font-size: 10px; }
.gear-name { font-size: 13px; line-height: 1.3; margin-bottom: 6px; }
.gear-desc { font-size: 10px; line-height: 1.3; color: var(--scr-mid); margin-bottom: 6px; }
.gear-best { font-size: 10px; line-height: 1.3; color: var(--scr-mid); }
.gear-best b { color: var(--scr-ink); }

/* ---------------- 练习本选择页（V2.0 M1）：复用 .gear-card 体系 ----------------
   卡片骨架/选中态来自 .gear-card，这里只补练习本特有部件：字符方块大字符
  （× + ± 混，评审红线：题型标识禁 emoji，一律字符方块）、推荐角标、未解锁灰卡 */
.mode-list { overflow-y: auto; flex: 1; min-height: 0; }
.mode-card { display: flex; align-items: center; gap: 10px; }
.mode-card .gear-name, .mode-card .gear-desc, .mode-card .gear-best { margin-bottom: 3px; }
.mode-info { flex: 1; min-width: 0; }
.mode-glyph {
  flex: none; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 2px solid var(--scr-ink); background: var(--scr-panel);
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
/* 「推荐」角标：实色底（复古红线：不用彩色 emoji，用文字角标） */
.mode-badge {
  position: absolute; top: -2px; right: -2px;
  font-size: 8px; padding: 3px 6px;
  background: var(--scr-accent); color: var(--scr-accent-ink);
}
/* 未解锁灰卡（混合挑战）：置灰不可点，成绩行换成三册解锁进度行；仍进导航序列便于浏览 */
.mode-card.locked { opacity: .55; cursor: default; }
.mode-card.locked .mode-glyph { border-color: var(--scr-mid); color: var(--scr-mid); background: transparent; box-shadow: none; }
.mode-card.locked.sel { border-color: var(--scr-mid); background: transparent; }
.mode-progress { font-size: 9px; line-height: 1.4; color: var(--scr-mid); }
/* 统计段不内断行：折行只落在「 · 」分隔处，杜绝 320px 下「题」等孤字独占一行 */
.nb { white-space: nowrap; }

/* 成绩页 */
.records-body { flex: 1; overflow-y: auto; min-height: 0; font-size: 10px; }
.rec-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px dashed var(--scr-mid); padding: 10px 4px;
  font-size: 11px;
}
.rec-row b { font-size: 12px; }
.rec-total { margin-top: 14px; line-height: 2.1; color: var(--scr-mid); }
.rec-total b { color: var(--scr-ink); }
/* 成绩页底部返回栏（Tab 行复用上方 .atlas-tabs/.atab） */
.records-back, .shop-back { flex: none; border-top: 2px solid var(--scr-mid); padding-top: 8px; }
.records-back .mbtn, .shop-back .mbtn { margin-bottom: 0; }

/* ---------------- 成就墙（V1.1 成绩页 · 成就 Tab） ---------------- */
.achv-count { font-size: 10px; color: var(--scr-mid); text-align: center; margin-bottom: 10px; }
.achv-count b { color: var(--scr-ink); }
.achv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.achv-cell {
  display: flex; align-items: center; gap: 8px;
  border: 2px dashed var(--scr-soft); padding: 8px;
}
.achv-cell.on { border: 2px solid var(--scr-accent); background: var(--scr-panel); }
.achv-cell canvas { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.achv-info { flex: 1; min-width: 0; }
.achv-name { font-size: 10px; margin-bottom: 4px; }
.achv-cell:not(.on) .achv-name { color: var(--scr-mid); }
.achv-desc { font-size: 8px; line-height: 1.5; color: var(--scr-mid); }

/* ---------------- 排行榜（V1.1 成绩页 · 排行榜 Tab） ---------------- */
.rank-row {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--scr-mid); padding: 8px 10px; margin-bottom: 8px;
}
.rank-row.me { border-color: var(--scr-accent); background: var(--scr-panel); }
.rank-row canvas { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; margin-bottom: 5px; }
.rank-meta { font-size: 9px; color: var(--scr-mid); }
.rank-me { flex: none; font-size: 8px; padding: 2px 4px; background: var(--scr-accent); color: var(--scr-accent-ink); }
.rank-best { font-size: 9px; color: var(--scr-mid); line-height: 1.5; }
.rank-best b { color: var(--scr-ink); font-weight: normal; }

/* ---------------- 金币商店（V1.1） ---------------- */
.shop-coins { flex: none; font-size: 10px; color: var(--scr-mid); text-align: center; margin-bottom: 8px; }
.shop-coins b { color: var(--scr-ink); }
.shop-body { flex: 1; min-height: 0; overflow-y: auto; }
.shop-sec {
  font-size: 11px; letter-spacing: 2px; color: var(--scr-mid);
  border-bottom: 2px solid var(--scr-mid); padding-bottom: 4px; margin: 4px 0 8px;
}
.shop-sec:first-child { margin-top: 0; }
.shop-card { display: flex; align-items: center; gap: 10px; }
.shop-ico { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; }
.shop-ico canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.shop-info { flex: 1; min-width: 0; }
.shop-name { font-size: 12px; margin-bottom: 4px; }
.shop-passive { font-size: 9px; color: var(--scr-accent); margin-bottom: 3px; }
.shop-desc { font-size: 9px; line-height: 1.5; color: var(--scr-mid); }
.shop-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.shop-price { font-size: 10px; }
.shop-price.lack { color: var(--scr-mid); opacity: .8; }
.shop-act {
  font-size: 9px; padding: 6px 9px; white-space: nowrap;
  background: transparent; color: var(--scr-ink); border: 2px solid var(--scr-ink);
}
.gear-card.sel .shop-act { background: var(--scr-accent); color: var(--scr-accent-ink); border-color: var(--scr-accent); }
.shop-badge { font-size: 9px; padding: 4px 7px; background: var(--scr-accent); color: var(--scr-accent-ink); }
/* 迷你配色样：方块皮肤（单块）/ 掌机外壳（双色拼） */
.mini-block {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; border-width: 2px; border-style: solid; box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.mini-shell {
  width: 30px; height: 30px; flex: none;
  display: flex; flex-direction: column;
  border: 2px solid; box-shadow: 2px 2px 0 rgba(0,0,0,.25); overflow: hidden;
}
.mini-shell i { flex: 1; }

/* 游戏页 */
#scr-game { padding: 0; }
/* 画布按 480×440 逻辑分辨率渲染；手机竖屏屏区更高时用 contain 防拉伸变形，
   band 露出的是 .screen 底色（= 主题屏底色，与游戏背景同色，视觉无缝），锚定顶部让
   HUD/算式贴近掌机按键方向 */
#cv { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center top; image-rendering: pixelated; }

#countdown {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; color: var(--scr-accent);
  text-shadow: 4px 4px 0 rgba(0,0,0,.4);
  animation: pop .68s ease infinite;
}
@keyframes pop { 0% { transform: scale(1.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { opacity: 1; } }

/* 屏内弹窗（暂停/说明/设置） */
.modal {
  position: absolute; inset: 0; z-index: 35;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
/* 暂停遮罩加深一档（路线图 §4.4）：55% 遮罩覆盖范围实测已含屏底算式行
   （评审截图字色采样 155,188,15 → 74,89,13 ≈ 47%，无漏盖），但算式行亮字
   压暗后仍是全屏最亮元素，观感像「下沿没压暗」——仅暂停弹窗加深到 70% */
#ovl-pause { background: rgba(0,0,0,.7); }
.modal-box {
  width: 86%; max-height: 88%; overflow-y: auto;
  background: var(--scr-bg); border: 3px solid var(--scr-ink);
  padding: 16px; box-shadow: 6px 6px 0 rgba(0,0,0,.8);
}
.modal-title { font-size: 14px; text-align: center; margin-bottom: 16px; letter-spacing: 2px; }
.help-text { font-size: 11px; line-height: 2; }
.help-text p { margin-bottom: 10px; }

.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 11px; margin-bottom: 16px;
}
#ovl-settings .row .mbtn.small { white-space: nowrap; min-width: 64px; }
.toggle {
  font-family: inherit; font-size: 9px; padding: 6px 10px; cursor: pointer;
  background: transparent; color: var(--scr-mid); border: 2px solid var(--scr-mid);
}
.toggle.on { background: var(--scr-accent); color: var(--scr-accent-ink); border-color: var(--scr-accent); }
/* 像素风音量滑条 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; max-width: 150px; height: 20px; background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; background: var(--scr-soft); border: 1px solid var(--scr-mid);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 18px; margin-top: -6px;
  background: var(--scr-accent); border: 2px solid var(--scr-ink);
}
input[type="range"]::-moz-range-track {
  height: 8px; background: var(--scr-soft); border: 1px solid var(--scr-mid);
}
input[type="range"]::-moz-range-thumb {
  width: 10px; height: 16px; border-radius: 0;
  background: var(--scr-accent); border: 2px solid var(--scr-ink);
}

/* 结算页（V1.1 压缩：错题一览按钮入列后桌面内容超高，六格统计曾被裁切） */
.settle-body { flex: 1; overflow-y: auto; text-align: center; }
.settle-score { font-size: 24px; margin: 4px 0 2px; color: var(--scr-accent); text-shadow: 3px 3px 0 rgba(0,0,0,.3); }
.settle-badge {
  display: inline-block; font-size: 10px; padding: 4px 8px; margin-bottom: 6px;
  background: var(--scr-accent); color: var(--scr-accent-ink);
  animation: blink 1s steps(2) infinite;
}
.settle-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px;
  font-size: 10px; text-align: center; margin: 8px 0;
}
.settle-grid .k { color: var(--scr-mid); margin-bottom: 4px; font-size: 10px; }
.settle-grid .v { font-size: 13px; }
.settle-coin { font-size: 11px; margin: 4px 0 6px; }
#settle-list .mbtn { padding: 9px 12px; font-size: 12px; margin-bottom: 7px; }

/* ---------------- 图鉴页 ---------------- */

/* Tab 行（全部 81 / 错题 (n)） */
.atlas-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex: none; }
.atab {
  flex: 1; font-family: inherit; font-size: 11px; padding: 8px 4px; cursor: pointer;
  background: transparent; color: var(--scr-mid); border: 2px solid var(--scr-mid);
  white-space: nowrap;   /* 320 宽下「100 以内」「错题 (n)」禁止折成两行 */
}
.atab.sel { background: var(--scr-accent); color: var(--scr-accent-ink); border-color: var(--scr-accent); }

/* 主体（81 格 + 错题明细），手机竖屏滚动兜底 */
.atlas-body { flex: 1; min-height: 0; overflow-y: auto; }

/* 9×9 星级网格：首列/首行为因数表头，共 10×10 格 */
.atlas-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(9, 1fr);
  gap: 2px; flex: none;
}
.ag-lab {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--scr-mid);
}
.ag-cell {
  font-family: inherit; cursor: pointer; padding: 2px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent; border: 2px dashed var(--scr-soft); color: var(--scr-mid);
}
.ag-cell b { font-size: 10px; font-weight: normal; }
.ag-cell .ag-stars { font-size: 7px; line-height: 1; }
/* 星级底色渐进（复用调色板变量）：灰（虚线空格）→ 面板色 → 主题色 → 主题色+双线框 */
.ag-cell.s1 { background: var(--scr-panel); border: 2px solid var(--scr-mid); color: var(--scr-ink); }
.ag-cell.s2 { background: var(--scr-accent); border: 2px solid var(--scr-accent); color: var(--scr-accent-ink); }
.ag-cell.s3 {
  background: var(--scr-accent); border: 2px solid var(--scr-accent);
  color: var(--scr-accent-ink); box-shadow: inset 0 0 0 2px var(--scr-bg);
}
/* 错题 Tab 的高亮标记：改用格自身的墨色虚线描边（仅外描边）。
   原方案是格外侧再叠 2px outline，相邻错题格的两圈 outline 会在 2px 网格间隙
   中点正好相触、连成一条（320 小屏 gap 1px 时更明显，路线图 §4.4）；
   描边画在格框上则每格独立成框，间隙再小也不会粘连 */
.ag-cell.wrong { border: 2px dashed var(--scr-ink); }
/* 点亮/升星收集动画（PRD V1-06）：挣到后的第一次查看时错峰弹跳 + 实线描边便于定位
   （V2-M2 起知识点卡片行同享此动画） */
.ag-cell.lit-new, .atlas-kcard.lit-new {
  animation: litpop .55s ease 2 backwards;
  outline: 2px solid var(--scr-accent); outline-offset: 1px;
}
@keyframes litpop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
/* 键盘选中标记（置于 wrong / lit-new 之后，选中时实线优先） */
.ag-cell.sel { outline: 2px solid var(--scr-ink); outline-offset: 1px; }

/* ---------------- 分册图鉴（V2.0 M2）：段标题 / 禁用占位格 / 知识点卡片 ----------------
   段小标题复用 .shop-sec（加法/减法/错题分册组）；段内无档案的坐标渲染为禁用占位格；
   知识点卡片行（add100 的 5 格册，非网格）复用错题行的边框/选中体系 */
.atlas-body .shop-sec { margin-top: 10px; }
.atlas-body .shop-sec:first-child { margin-top: 0; }
.ag-cell.off { opacity: .3; cursor: default; }
.atlas-kcard {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 2px solid var(--scr-mid); color: var(--scr-ink);
  padding: 9px 10px; margin-bottom: 6px;
}
.atlas-kcard.sel { border-color: var(--scr-ink); background: var(--scr-panel); }
.ak-name { font-size: 11px; flex: 1; min-width: 0; }
.ak-meta { font-size: 9px; color: var(--scr-mid); flex: none; }

/* 错题明细列表 */
.wrong-list { flex: none; border-top: 2px solid var(--scr-mid); padding-top: 8px; margin-top: 4px; }
.wrong-empty { font-size: 10px; color: var(--scr-mid); text-align: center; padding: 14px 0; }
.wrong-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 2px solid var(--scr-mid); color: var(--scr-ink);
  padding: 7px 9px; margin-bottom: 6px;
}
.wrong-row.sel { border-color: var(--scr-ink); background: var(--scr-panel); }
.wr-eq { font-size: 12px; flex: none; }
.wr-kk { font-size: 10px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-meta { font-size: 9px; color: var(--scr-mid); flex: none; }

/* 底部统计与按钮 */
.atlas-foot { flex: none; border-top: 2px solid var(--scr-mid); padding-top: 8px; }
.atlas-stats { font-size: 9px; line-height: 1.8; color: var(--scr-mid); text-align: center; margin-bottom: 8px; }
.atlas-stats b { color: var(--scr-ink); }
.atlas-foot .row .mbtn.small { flex: 1; }

/* 主菜单置灰入口（错题练习无错题时，PRD V1-05） */
.mbtn:disabled, .mbtn.disabled { opacity: .5; border-color: var(--scr-mid); color: var(--scr-mid); box-shadow: none; cursor: default; }
.mbtn.disabled.sel, .mbtn.disabled:active { background: transparent; color: var(--scr-mid); border-color: var(--scr-mid); }
.mbtn-note { display: block; font-size: 8px; color: var(--scr-mid); margin-top: 5px; }

/* 图鉴单格详情浮层 */
.fact-kk { text-align: center; font-size: 15px; color: var(--scr-accent); margin: 4px 0 12px; letter-spacing: 2px; }
.fact-body { font-size: 10px; }
.fact-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px dashed var(--scr-mid); padding: 8px 2px;
  color: var(--scr-mid);
}
.fact-row b { font-size: 11px; font-weight: normal; color: var(--scr-ink); }

/* 主菜单问候行：像素头像 + 口诀大师徽记（PRD V1-06：大师账号头像旁挂徽记） */
#menu-greet { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.menu-avatar { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.master-badge {
  flex: none; font-size: 9px; padding: 3px 6px;
  background: var(--scr-accent); color: var(--scr-accent-ink);
}

/* 问候行「签到」按钮（V1.1）：未签带像素红点；已签禁用置灰 */
.signin-btn {
  flex: none; position: relative;
  font-family: inherit; font-size: 10px; padding: 7px 12px; cursor: pointer;
  background: transparent; color: var(--scr-ink); border: 2px solid var(--scr-ink);
  margin-left: 2px;
}
.signin-btn:active { background: var(--scr-accent); color: var(--scr-accent-ink); border-color: var(--scr-accent); }
.signin-btn:disabled { color: var(--scr-mid); border-color: var(--scr-mid); opacity: .7; cursor: default; }
.signin-btn.dot::after {
  content: ""; position: absolute; top: -5px; right: -5px;
  width: 10px; height: 10px; background: #d9483b; border: 1px solid #6e1c14;
}

/* 屏内轻提示（V1.1：签到/购买反馈，自动消失，不拦截操作） */
.screen-toast {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 45; pointer-events: none;
  max-width: 86%; padding: 8px 12px;
  font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--scr-ink); color: var(--scr-bg);
  border: 2px solid var(--scr-bg); box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}

/* 结算页「新纪录」与「消灭错题」双徽章并排时的间距 */
.settle-badge + .settle-badge { margin-left: 8px; }

/* 口诀大师一次性全屏庆祝（PRD V1-06） */
.master-ovl { background: rgba(0,0,0,.8); }
.master-box {
  width: 78%; max-height: 88%; overflow-y: auto;
  text-align: center; padding: 22px 18px;
  background: var(--scr-bg); border: 3px solid var(--scr-accent);
  box-shadow: 6px 6px 0 rgba(0,0,0,.8);
  animation: masterIn .45s ease;
}
@keyframes masterIn {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.master-crown {
  font-size: 24px; color: var(--scr-accent); letter-spacing: 8px; margin-bottom: 12px;
  animation: blink 1s steps(2) infinite;
}
.master-title { font-size: 20px; letter-spacing: 4px; margin-bottom: 10px; }
.master-sub { font-size: 11px; color: var(--scr-mid); margin-bottom: 6px; }
.master-coin { font-size: 12px; color: var(--scr-accent); margin-bottom: 16px; }
#master-close { width: 150px; margin: 0 auto; }

/* 宠物孵化弹窗（V1.1 商店）：像素宠物 + 被动说明 */
.pet-hatch { text-align: center; }
.pet-hatch canvas { width: 72px; height: 72px; image-rendering: pixelated; animation: popin .5s ease; }
.pet-hatch-name { font-size: 14px; margin: 10px 0 8px; }
.pet-hatch-passive { font-size: 10px; color: var(--scr-accent); margin-bottom: 8px; }
.pet-hatch-desc { font-size: 10px; color: var(--scr-mid); line-height: 1.8; }
@keyframes popin {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* 「成就达成」弹卡（V1.1 结算页依次弹出） */
.achv-pop { text-align: center; }
.achv-pop canvas { width: 56px; height: 56px; image-rendering: pixelated; animation: popin .45s ease; }
.achv-pop-name { font-size: 14px; margin: 10px 0 6px; }
.achv-pop-desc { font-size: 10px; color: var(--scr-mid); }

/* ---------------- 按键区 ---------------- */

.c-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding: 0 6px;
}

/* 十字键 */
.dpad {
  display: grid;
  width: calc(var(--dcell) * 3); height: calc(var(--dcell) * 3);
  grid-template-columns: repeat(3, var(--dcell)); grid-template-rows: repeat(3, var(--dcell));
  grid-template-areas: ". up ." "left c right" ". down .";
  touch-action: none;
}
.d-btn {
  background: linear-gradient(180deg, #3f4340, var(--btn-face));
  border: none; cursor: pointer; padding: 0; position: relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 3px rgba(0,0,0,.5), 0 3px 4px rgba(0,0,0,.4);
}
.d-btn:active, .d-btn.press { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.d-up    { grid-area: up;    border-radius: 8px 8px 0 0; }
.d-down  { grid-area: down;  border-radius: 0 0 8px 8px; }
.d-left  { grid-area: left;  border-radius: 8px 0 0 8px; }
.d-right { grid-area: right; border-radius: 0 8px 8px 0; }
.d-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  border: 8px solid transparent; transform: translate(-50%, -50%);
}
.d-up::after    { border-bottom-color: rgba(255,255,255,.32); margin-top: -4px; }
.d-down::after  { border-top-color: rgba(255,255,255,.32); margin-top: 4px; }
.d-left::after  { border-right-color: rgba(255,255,255,.32); margin-left: -4px; }
.d-right::after { border-left-color: rgba(255,255,255,.32); margin-left: 4px; }
.d-center {
  grid-area: c; background: var(--btn-face);
  box-shadow: inset 0 0 5px rgba(0,0,0,.6);
  position: relative;
}
.d-center::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  background: rgba(0,0,0,.25);
}

/* START / SELECT（参考稿终版：水平放直，键帽下印字） */
.mid { display: flex; flex-direction: column; gap: 14px; padding-bottom: 26px; }
.pill-row { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pill {
  width: 56px; height: 15px; border: none; cursor: pointer; border-radius: 8px;
  background: linear-gradient(180deg, #3f4340, var(--btn-face));
  outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 3px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.4);
}
.pill:active, .pill.press { transform: translateY(1px); }
.pill-row span {
  font-family: "Courier New", monospace; font-weight: 700;
  font-size: 9px; color: var(--print); letter-spacing: 2px; opacity: .85;
}

/* AB 键（颜色随外壳：海军蓝配黄键、复古红配炭黑键…）+ 四周凹槽描边 */
.ab { display: flex; gap: 18px; align-items: flex-end; }
.ab-wrap { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.a-wrap { transform: translateY(-14px); }
.b-wrap { transform: rotate(-22deg); }
.a-wrap { rotate: -22deg; }
.ab-btn {
  width: var(--ab-size); height: var(--ab-size); border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 55%), var(--ab);
  outline: 3px solid rgba(0,0,0,.18); outline-offset: 2px;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.28), inset 0 3px 2px rgba(255,255,255,.22), 0 4px 4px rgba(0,0,0,.35);
}
.ab-btn:active, .ab-btn.press { transform: translateY(2px); box-shadow: inset 0 -2px 4px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.4); }
.ab-wrap span {
  font-family: "Courier New", monospace; font-weight: 700;
  font-size: 12px; color: var(--print); letter-spacing: 1px;
}

/* 扬声器格栅（深色缝 + 右缘高光） */
.speaker {
  position: absolute; right: 22px; bottom: 12px;
  display: flex; gap: 7px; transform: rotate(-29deg);
}
.speaker i {
  width: 6px; height: 42px; border-radius: 5px;
  background: rgba(0,0,0,.28);
  box-shadow: 2px 0 0 rgba(255,255,255,.3), inset 1px 1px 1px rgba(0,0,0,.3);
}
.speaker i:first-child, .speaker i:last-child { height: 28px; margin-top: 7px; }

/* 机身细节：左下十字螺丝 / 底部耳机孔铭文（纯装饰） */
.screw {
  position: absolute; left: 26px; bottom: 24px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.16);
  box-shadow: inset 1px 2px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.35);
}
.screw::after {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 10px; height: 2px; border-radius: 1px;
  background: rgba(0,0,0,.4); transform: rotate(-35deg);
}
.jack {
  position: absolute; left: 44%; bottom: 5px;
  font-family: "Courier New", monospace; font-size: 9px;
  letter-spacing: 3px; color: var(--print); opacity: .7;
}

/* 按键防误触：禁长按菜单/选中、禁双击缩放 */
.d-btn, .pill, .ab-btn {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}

/* 主菜单列表：可滚动兜底 + 压缩行距（V1.1 起 8 项，440px 高的屏内超出可滚） */
#menu-list { overflow-y: auto; flex: 1; min-height: 0; position: relative; }
#menu-list .mbtn { padding: 8px 12px; font-size: 11px; margin-bottom: 5px; }
/* 可滚动时右下角 ▼ 提示（小屏滚动条为覆盖式自动隐藏，纯滚动条不够显眼） */
#menu-list.can-scroll::after {
  content: "▼"; position: absolute; right: 12px; bottom: 1px;
  font-size: 9px; color: var(--scr-mid); pointer-events: none;
}

/* 滚动条 */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--scr-mid); }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 手机竖屏：手柄布局（真实尺寸，大按键） ============ */
@media (orientation: portrait) and (max-width: 640px) {
  html, body { overflow: auto; overscroll-behavior: contain; }
  body {
    /* 机身纵向撑满视口（含刘海/小白条安全区），不再上下留黑边 */
    box-sizing: border-box;
    min-height: 100dvh;
    align-items: stretch;
    padding: calc(4px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right))
             calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  }
  #stage { width: 100%; flex: 1; display: flex; flex-direction: column; }

  .console {
    width: 100%;
    flex: 1;                      /* 机身吃满剩余高度 */
    display: flex; flex-direction: column;
    padding: 8px 8px 14px;        /* 侧边内边距 10→8：屏区更宽 */
  }
  .c-top { flex: none; padding: 0 2px 6px; gap: 8px; }
  .brand { font-size: 14px; }
  .brand small { font-size: 8px; letter-spacing: 2px; margin-left: 6px; }
  /* 顶部收起细小铭牌和电源印字，底部保留设计稿的格栅与螺丝。 */
  .caption, .seam, .screw, .jack { display: none; }
  .power { display: none; }
  .bezel {
    flex: 1; min-height: 0;       /* 屏幕外框吃掉机身剩余高度 */
    display: flex; flex-direction: column;
    padding: 10px 10px 12px;
    border-radius: 8px 8px 26px 8px;
  }
  .screen { flex: 1; aspect-ratio: auto; min-height: 0; }   /* 屏区充满外框（游戏画布经 object-fit 防变形） */
  .speaker { right: 18px; bottom: 20px; gap: 5px; }
  .speaker i { width: 4px; height: 30px; }
  .speaker i:first-child, .speaker i:last-child { height: 20px; margin-top: 5px; }
  .screw { display: block; width: 12px; height: 12px; left: 20px; bottom: 22px; }
  .screw::after { left: 3px; top: 5px; width: 6px; height: 1px; }
  .jack { display: block; bottom: 5px; font-size: 6px; letter-spacing: 1px; }

  /* 与设计稿一致：十字键和 AB 同排，SELECT/START 在下方居中。 */
  .c-controls {
    flex: none; display: grid; grid-template-columns: 1fr 1fr;
    grid-template-areas: "dpad ab" "mid mid";
    align-items: center; gap: 10px 12px; margin-top: 12px; padding: 0 2px;
  }
  .dpad { grid-area: dpad; }
  .ab { grid-area: ab; }
  .mid { grid-area: mid; flex-direction: row; justify-content: center; align-items: center; gap: 20px; padding-bottom: 0; }
  .pill-row { gap: 5px; }
  .pill, .ab-btn { outline-width: 2px; }
  .ab { justify-content: flex-end; align-items: flex-end; gap: clamp(12px, 4vw, 24px); }
  .a-wrap, .b-wrap { transform: none; rotate: -22deg; margin: 0; }

  /* 按键随可用宽度伸缩，避免高屏手机的大按键挤占 LCD。 */
  :root { --dcell: clamp(44px, 12vw, 52px); --ab-size: clamp(52px, 15vw, 68px); }

  /* 屏内内容压缩 + 滚动兜底 */
  .page { padding: 10px 12px; }
  .page-head { font-size: 12px; padding-bottom: 6px; margin-bottom: 8px; }
  .mbtn { padding: 8px 10px; font-size: 11px; margin-bottom: 6px; }
  .menu-stats { font-size: 10px; margin-bottom: 10px; }
  #menu-list { overflow-y: auto; flex: 1; min-height: 0; }
  .modal-box { padding: 12px; }
  .help-text { font-size: 10px; line-height: 1.8; }

  .player-list { justify-content: flex-start; }
  .player-card { padding: 7px 8px; margin-bottom: 8px; gap: 10px; }
  .player-card canvas { width: 38px; height: 38px; }
  .pc-name { font-size: 12px; margin-bottom: 4px; }
  .pc-meta { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gear-card { padding: 8px 10px; margin-bottom: 8px; }
  .gear-name { font-size: 12px; margin-bottom: 4px; }
  .gear-desc, .gear-best { margin-bottom: 4px; }
  /* 练习本选择卡小屏压缩（V2.0）：字符方块/角标/进度行同步缩小 */
  .mode-card { gap: 8px; }
  .mode-glyph { width: 24px; height: 24px; font-size: 11px; }
  .mode-badge { font-size: 7px; padding: 2px 5px; }
  .mode-progress { font-size: 8px; }

  #inp-name { font-size: 16px; } /* 避免 iOS 聚焦时页面缩放 */

  /* 结算页小屏压缩：按钮两列网格 + 收紧间距，六格统计与按钮全部进首屏 */
  .page { padding: 8px 10px; }
  .page-head { font-size: 11px; padding-bottom: 4px; margin-bottom: 6px; }
  .settle-score { font-size: 20px; margin: 2px 0 0; }
  .settle-badge { font-size: 9px; padding: 3px 7px; margin-bottom: 4px; }
  .settle-grid { gap: 4px 4px; margin: 4px 0; }
  .settle-grid .k { font-size: 9px; margin-bottom: 1px; }
  .settle-grid .v { font-size: 11px; }
  .settle-coin { font-size: 9px; margin: 1px 0; }
  .settle-body #settle-wrongfacts { padding: 5px 9px; font-size: 9px; margin: 0 0 3px; }
  #settle-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #settle-list .mbtn { margin-bottom: 0; padding: 8px 10px; font-size: 10px; }
  #settle-list .mbtn:first-child { grid-column: 1 / -1; }

  /* 图鉴页小屏压缩：格内数字/星号缩小，网格可滚动 */
  .atlas-tabs { gap: 6px; margin-bottom: 8px; }
  .atab { font-size: 9px; padding: 7px 2px; }
  .atlas-grid { gap: 1px; }
  .ag-lab { font-size: 8px; }
  .ag-cell b { font-size: 8px; }
  .ag-cell .ag-stars { font-size: 6px; }
  .wrong-row { padding: 6px 8px; gap: 6px; margin-bottom: 5px; }
  .wr-eq { font-size: 11px; }
  .wr-kk { font-size: 9px; }
  .wr-meta { font-size: 8px; }
  .atlas-stats { font-size: 8px; margin-bottom: 6px; }
  /* 分册图鉴小屏压缩（V2.0 M2）：四枚 Tab 收紧（只动图鉴页，成绩页三 Tab 不变）、
     占位格更淡、知识点卡片与段标题收紧 */
  #atlas-tabs .atab { font-size: 9px; padding: 7px 2px; }
  .ag-cell.off { opacity: .25; }
  .atlas-kcard { padding: 7px 8px; margin-bottom: 5px; }
  .ak-name { font-size: 10px; }
  .ak-meta { font-size: 8px; }
  .atlas-body .shop-sec { margin-top: 8px; }

  /* V1.1 新界面小屏压缩：签到按钮 / 成就墙单列 / 商店卡片 / 弹卡 */
  .signin-btn { font-size: 10px; padding: 7px 10px; }
  .achv-grid { grid-template-columns: 1fr; }
  .achv-cell { padding: 6px; gap: 6px; }
  .achv-cell canvas { width: 28px; height: 28px; }
  .achv-name { font-size: 9px; }
  .rank-row { padding: 6px 8px; gap: 8px; margin-bottom: 6px; }
  .rank-row canvas { width: 32px; height: 32px; }
  .rank-name { font-size: 10px; margin-bottom: 3px; }
  .rank-best { font-size: 8px; }
  .shop-card { gap: 8px; }
  .shop-ico { width: 38px; }
  .shop-ico canvas { width: 34px; height: 34px; }
  .shop-name { font-size: 11px; }
  .shop-passive, .shop-desc { font-size: 8px; }
  .shop-side { gap: 4px; }
  .mini-block, .mini-shell { width: 26px; height: 26px; }
  .mini-block { font-size: 10px; }
  .pet-hatch canvas { width: 64px; height: 64px; }
  .screen-toast { font-size: 9px; padding: 6px 10px; }
}

/* ---------------- 云存档（cloud-v1） ---------------- */

.modal-wide { max-height: 92%; }
.cloud-status { margin-bottom: 10px; }
.cloud-line { font-size: 11px; padding: 6px 8px; border: 2px dashed var(--scr-mid); color: var(--scr-mid); }
.cloud-line.st-synced { border-style: solid; color: var(--scr-accent-ink); background: var(--scr-accent); border-color: var(--scr-accent); }
.cloud-line.st-conflict, .cloud-line.st-local-error { border-style: solid; color: var(--scr-ink); background: var(--scr-soft); }
.cloud-intro { font-size: 10px; line-height: 1.8; color: var(--scr-mid); margin-bottom: 10px; }
.cloud-dim { font-size: 9px; color: var(--scr-mid); }
.cloud-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; margin-bottom: 6px;
  border: 2px solid var(--scr-mid); font-size: 11px;
}
.cloud-row .cr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-row .mbtn { flex: none; }
.cloud-conflict { font-size: 10px; line-height: 1.8; padding: 8px; margin-bottom: 10px; border: 2px solid var(--scr-ink); background: var(--scr-soft); }
.cloud-board { margin-top: 14px; }
.lb-tabs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.lb-tabs .atab { flex: none; font-size: 9px; padding: 6px 8px; }
.cloud-lb-list { font-size: 10px; }
.lb-time { color: var(--scr-mid); font-size: 9px; margin-bottom: 6px; }
.cloud-lb-list .rank-row { padding: 5px 8px; }
.rank-no { color: var(--scr-mid); }
.rank-score { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 10px; }
.lb-me { font-size: 10px; padding: 7px 8px; border-top: 2px dashed var(--scr-mid); color: var(--scr-accent-ink); }
.pc-cloud {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  font-size: 9px; background: var(--scr-accent); color: var(--scr-accent-ink);
  vertical-align: 1px;
}
.code-intro { font-size: 10px; line-height: 1.9; color: var(--scr-mid); margin-bottom: 10px; }
.code-box {
  font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.8;
  letter-spacing: 1px; padding: 12px 8px; margin-bottom: 10px;
  border: 3px solid var(--scr-ink); background: var(--scr-soft);
  word-break: break-all; text-align: center; user-select: all;
}
.code-confirm { display: flex; align-items: center; gap: 8px; font-size: 10px; margin-bottom: 12px; cursor: pointer; }
.code-confirm input { width: 14px; height: 14px; accent-color: var(--scr-accent); }
#ovl-cloud input, #ovl-code input[type="text"] {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px;
  padding: 9px 10px; margin-bottom: 10px;
  background: var(--scr-bg); color: var(--scr-ink); border: 2px solid var(--scr-mid);
}
#ovl-cloud input:focus { outline: none; border-color: var(--scr-accent); }
/* 手机竖屏：云玩家行允许换行（元信息独占一行，避免被按钮挤成竖排） */
@media (orientation: portrait) and (max-width: 640px) {
  .cloud-row { flex-wrap: wrap; row-gap: 4px; }
  .cloud-row .cloud-dim { flex-basis: 100%; }
  .cloud-conflict { font-size: 9px; }
}

/* 手机横屏：左右手柄夹住 LCD，按键保持真实触控尺寸。 */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  :root { --dcell: 44px; --ab-size: 52px; }
  body {
    padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
             calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }
  #stage { width: 100%; height: 100%; }
  .console {
    width: 100%; height: 100%; padding: 8px 12px 12px;
    display: grid; grid-template-columns: 132px minmax(0, 1fr) 132px;
    grid-template-rows: 22px minmax(0, 1fr) 40px; gap: 6px 10px;
    border-radius: 22px 22px 36px 22px;
  }
  .c-top { grid-column: 1 / -1; padding: 0 4px; }
  .brand { font-size: 14px; }
  .brand small { font-size: 8px; }
  .caption { font-size: 7px; }
  .seam, .power, .screw, .jack { display: none; }
  .bezel {
    grid-column: 2; grid-row: 2 / 4; display: flex; min-height: 0;
    padding: 8px; border-radius: 8px 8px 18px 8px;
  }
  .screen { height: 100%; aspect-ratio: auto; }
  .c-controls { display: contents; }
  .dpad { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }
  .ab { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; gap: 14px; }
  .mid { grid-column: 1; grid-row: 3; flex-direction: row; justify-content: center; gap: 12px; padding: 0; }
  .pill-row { gap: 6px; }
  .pill-row span { font-size: 7px; letter-spacing: 1px; }
  .pill { width: 48px; }
  .speaker { right: 40px; bottom: 18px; gap: 6px; }
  .speaker i { width: 4px; height: 26px; }
  .speaker i:first-child, .speaker i:last-child { height: 18px; margin-top: 4px; }
}

/* 设置使用实际焦点导航，主题选中态仍由 .sel 表示。 */
#ovl-settings button:focus, #ovl-settings input:focus {
  outline: 2px solid var(--scr-ink); outline-offset: 3px;
}

/* 保留细长键帽，用透明按钮区域扩展 START/SELECT 的触控面积。 */
@media (orientation: portrait) and (max-width: 640px),
       (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .pill { position: relative; height: 44px; background: none; outline: none; box-shadow: none; }
  .pill::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 15px;
    border-radius: 8px; background: linear-gradient(180deg, #3f4340, var(--btn-face));
    outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 3px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.4);
  }
  .pill:focus-visible { outline: 2px solid var(--print); outline-offset: 4px; }
  .pill-row { gap: 2px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .console { grid-template-rows: 22px minmax(0, 1fr) 56px; }
}