/* 面试挑战 · 原型样式。占位美术：色块加文字，真美术到位后放进 art/ 目录会自动替换。 */
:root {
  --ink: #1d2433;
  --paper: #f4f1e8;
  --paper-2: #e9e4d6;
  --midcorp: #c8d5e0;
  --midcorp-dark: #8fa4b8;
  --accent: #e8a33d;
  --good: #3f8f52;
  --bad: #c2453b;
  --wait: #d9a92c;
  --muted: #5f6675;
  --line: 3px solid var(--ink);
  --shadow: 3px 3px 0 var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2b3242; }
body { display: flex; justify-content: center; }

#app {
  width: min(100vw, 400px);
  min-height: 100dvh;
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.screen { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 12px; }
.screen.tight { padding: 0; gap: 0; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: 26px; letter-spacing: 2px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0; line-height: 1.6; }
.muted { color: var(--muted); font-size: 13px; }
.fine { color: var(--muted); font-size: 12px; line-height: 1.5; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.center { text-align: center; }

button {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: var(--line);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.45;
}
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
button.primary { background: var(--accent); font-weight: 700; text-align: center; }
button.ghost { background: transparent; box-shadow: none; border-style: dashed; }
button.small { padding: 6px 8px; font-size: 13px; }
button.block { width: 100%; }

.card { background: #fff; border: var(--line); box-shadow: var(--shadow); padding: 12px; }
.card.locked { background: var(--paper-2); color: var(--muted); }
.tag { display: inline-block; font-size: 12px; padding: 1px 6px; border: 2px solid var(--ink); background: var(--paper); }
.tag.good { background: #d7ecd9; }
.tag.bad { background: #f3d4d0; }
.lock { font-size: 12px; color: var(--muted); }

/* 选人设：一行三个小方块，选中的那个变色，下面一条写简介 */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.persona-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px; text-align: center; }
.persona-tile .sprite { width: 72px; height: 72px; margin-bottom: 4px; }
.persona-tile .sprite .code { display: none; }
.persona-tile .nm { font-weight: 700; }
.persona-tile.on { background: var(--accent); }
.persona-tile.on .fine { color: var(--ink); }
.persona-pick h3 { margin-bottom: 4px; }
.persona-pick .row { margin-top: 8px; }

/* 标题页 */
.title-art {
  height: 180px; border: var(--line); box-shadow: var(--shadow);
  background: repeating-linear-gradient(0deg, var(--midcorp) 0 8px, #d4dfe8 8px 16px);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.title-art .big { font-size: 34px; font-weight: 800; letter-spacing: 6px; background: var(--paper); border: var(--line); padding: 4px 14px; }

/* 占位美术 */
.sprite { position: relative; flex: none; width: 96px; height: 96px; border: var(--line); background: #fff; overflow: hidden; }
.sprite img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 2; }
.sprite .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sprite .face { font-size: 20px; font-weight: 700; white-space: nowrap; }
.sprite .code { font-size: 10px; color: var(--muted); }
.sprite .name { font-size: 11px; }
.sprite.small { width: 56px; height: 56px; }
.sprite.small .face { font-size: 13px; }

.scene {
  position: relative; height: 200px; border-bottom: var(--line);
  background: linear-gradient(var(--midcorp) 0 72%, var(--midcorp-dark) 72% 100%);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 34px;
}
.scene .scene-label { position: absolute; left: 8px; top: 6px; font-size: 11px; color: var(--muted); background: rgba(255,255,255,.7); padding: 0 4px; }
.scene .desk { position: absolute; left: 10%; right: 10%; bottom: 46px; height: 14px; background: #8b6b4a; border: var(--line); }
/* 场景图还没到（用色块占位）时，面试官立绘也按裁切线裁掉下半截，裁切线对齐占位桌子的上沿（场景高 200、桌子下沿离底 46、高 14 → 桌沿在第 140 行），不悬空 */
.pixel .screen:not(.on-art) > .scene > #who > .sprite.art[style*="--cut"] { height: calc(var(--cut) * 1px); margin-top: calc(106px - var(--cut) * 1px); border: 0; }
.pixel .screen:not(.on-art) > .scene > #who > .sprite.art[style*="--cut"] img { bottom: auto; height: 96px; }
/* 人物图也没到（方块脸）时，方块的下沿同样落在桌沿上 */
.screen:not(.on-art) > .scene > #who > .sprite:not(.art) { margin-top: 7px; }
.scene .round-label { position: absolute; right: 8px; top: 6px; font-size: 12px; font-weight: 700; background: var(--paper); border: 2px solid var(--ink); padding: 0 6px; }

.panel { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; }
.nameplate { align-self: flex-start; background: var(--ink); color: var(--paper); font-size: 12px; padding: 2px 8px; }
.bubble { background: #fff; border: var(--line); padding: 10px 12px; line-height: 1.6; min-height: 52px; }
.bubble .pre { display: block; color: var(--bad); margin-bottom: 4px; }
/* 现场写代码那一轮，题目下面附的代码：深色编辑器底，长行横向滚动 */
.code { margin: 0; background: #202532; color: #f3ecd9; border: var(--line); padding: 8px 10px; font: 12px/1.5 Consolas, "Courier New", monospace; white-space: pre; overflow-x: auto; tab-size: 2; }
.options { display: flex; flex-direction: column; gap: 8px; }
.options button { width: 100%; }
.tools { display: flex; gap: 8px; }
.tools button { flex: 1; text-align: center; font-size: 13px; padding: 7px 8px; }

.timer { height: 12px; border: 2px solid var(--ink); background: #fff; position: relative; }
.timer .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); width: 100%; }
.timer.waiting .fill { background: var(--wait); }
.timer.out .fill { background: var(--bad); }
.timer .label { position: absolute; right: 4px; top: -18px; font-size: 11px; color: var(--muted); }
.relaxed-badge { font-size: 11px; color: var(--muted); }

/* 简历关 */
.resume-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--line); background: var(--paper-2); }
.deadline { font-weight: 700; font-variant-numeric: tabular-nums; }
.deadline.hurry { color: var(--bad); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.sheet { margin: 10px 14px 0; background: #fff; border: var(--line); box-shadow: var(--shadow); padding: 10px; max-height: 44dvh; overflow-y: auto; }
.sheet .who { font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin-bottom: 6px; font-size: 14px; }
.sheet .item { border-bottom: 1px dashed #bbb; padding: 6px 0; font-size: 13px; line-height: 1.5; display: flex; gap: 6px; }
.sheet .item .txt { flex: 1; }
.sheet .item .ttl { font-weight: 700; }
.sheet .item .ops { display: flex; flex-direction: column; gap: 3px; }
.sheet .item .ops button { padding: 0 6px; font-size: 11px; box-shadow: none; border-width: 2px; }
.sheet .page-break { text-align: center; font-size: 12px; color: var(--bad); margin: 6px 0; border-top: 2px dashed var(--bad); padding-top: 4px; }
.sheet .item.p2 { opacity: .55; }
.meter { margin: 8px 14px 0; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.meter .bar { flex: 1; height: 10px; border: 2px solid var(--ink); background: #fff; position: relative; }
.meter .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--midcorp-dark); }
.meter.over .bar .fill { background: var(--bad); }
.skills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.chip { font-size: 12px; padding: 4px 8px; border: 2px solid var(--ink); background: #fff; box-shadow: none; border-radius: 12px; }
.chip.on { background: var(--ink); color: var(--paper); }
.tray { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.tray button { font-size: 12px; padding: 8px; }
.tray button.in { background: var(--paper-2); }
.tray .ttl { font-weight: 700; display: block; }
.section-title { padding: 8px 14px 0; font-size: 13px; font-weight: 700; }

/* 弹层 */
#overlay { position: fixed; inset: 0; background: rgba(20,24,34,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
#overlay[hidden] { display: none; }
.sheet-modal { width: min(100vw, 400px); max-height: 82dvh; overflow-y: auto; background: var(--paper); border-top: var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sheet-modal .variant { width: 100%; font-size: 13px; }
.sheet-modal .variant.on { background: #fff6dc; border-color: var(--accent); }

/* 揭晓 */
.reveal-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.reveal-list .r { display: flex; gap: 8px; align-items: baseline; border-bottom: 1px dashed #bbb; padding: 4px 0; }
.reveal-list .r .q { flex: 1; }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.scorebar { height: 18px; border: var(--line); background: #fff; position: relative; margin: 6px 0 18px; }
.scorebar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--midcorp-dark); width: 0; transition: width 1.2s steps(12); }
.scorebar .passline { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--bad); }
.scorebar .passline span { position: absolute; top: 22px; left: -20px; font-size: 11px; color: var(--bad); white-space: nowrap; }
.letter { background: #fff; border: var(--line); box-shadow: var(--shadow); padding: 14px; line-height: 1.7; font-size: 14px; }
.letter.reject { background: #f7f1ef; }
.letter .aside { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.phone { width: 110px; height: 170px; margin: 20px auto; border: var(--line); border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; animation: buzz .25s linear infinite; }
@keyframes buzz { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.gaze { display: flex; flex-direction: column; gap: 4px; }
.gaze .g { font-size: 12px; padding: 5px 8px; border: 2px solid var(--ink); background: #fff; }
.gaze .g.high { background: #f6d68a; }
.gaze .g.mid { background: #f9e7b9; }
.gaze .g.low { background: #fdf5e1; }
.gaze .g.linger { background: #f3b48a; }
.gaze .g.skip { background: #eee; color: #999; }
.gaze .g b { font-size: 11px; margin-right: 6px; }

/* 谈薪 */
.terms { display: flex; flex-direction: column; gap: 6px; }
.term { width: 100%; font-size: 13px; }
.term .val { float: right; font-weight: 700; }
.term .detail { display: block; margin-top: 4px; color: var(--bad); }
/* offer 拆解：三块上下排，每块占满宽度（并排三栏在手机上太窄） */
.compare { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.compare .col { background: #fff; border: 2px solid var(--ink); padding: 8px 10px; }
.compare .col h3 { font-size: 13px; margin: 0 0 4px; }
.compare ul { margin: 0; padding-left: 16px; }
.compare li + li { margin-top: 2px; }

/* 结算 */
.badge { width: 72px; height: 72px; border: var(--line); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; background: #fff; }
.badge.t0 { background: #e2efd9; }
.badge.t1 { background: #e3e9f0; }
.badge.t2 { background: #f8e3a8; }
.badge.t3 { background: linear-gradient(135deg, #f6d36b, #fff3c4, #f0b73e); }
.share { background: linear-gradient(#2b3a55, #1d2433); color: var(--paper); border: var(--line); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.share .tag { color: var(--ink); }
.share .qr { width: 48px; height: 48px; background: repeating-conic-gradient(#fff 0 25%, #1d2433 0 50%) 0 0 / 8px 8px; border: 2px solid #fff; }
.share .tier-line { font-size: 22px; font-weight: 800; }
.dex { display: flex; flex-direction: column; gap: 8px; }
.dex .card h3 { font-size: 14px; margin-bottom: 4px; }
details.review { background: #fff; border: var(--line); padding: 10px; }
details.review summary { font-weight: 700; cursor: pointer; }
details.review .item { border-top: 1px dashed #bbb; padding: 6px 0; font-size: 13px; line-height: 1.55; }
.services { display: flex; flex-direction: column; gap: 6px; }
.card .fine { white-space: pre-line; }

/* 群面、笔试、泡池子 */
.seats { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.seat { display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 2px; width: 70px; text-align: center; }
.seat.active .sprite { outline: 3px solid var(--accent); }
.score-table { border-collapse: collapse; font-size: 12px; width: 100%; background: #fff; }
.score-table th, .score-table td { border: 2px solid var(--ink); padding: 3px 4px; text-align: center; }
.score-table tr.me td { background: #fff6dc; font-weight: 700; }
.score-table tr.cut td { border-bottom: 4px solid var(--bad); }
.options button.picked { background: #fff6dc; border-color: var(--accent); }
.pool { font-size: 30px; text-align: center; padding: 30px 0; background: #cfe6f2; border: var(--line); }
.pool .fine { font-size: 12px; display: block; margin-top: 8px; }

/* ================================================================ 像素版
   只在 body.pixel 下生效，上面的简约样式（颜文字版）一行不动。
   - 图一律按 2 倍整数缩放：场景底图 180×320 显示成 360×640，所以 #app 收成 360 宽。
   - 框类控件用代码画（见下面“框类控件”一节），不用九宫格素材。
   - --UI_* 变量由 app.js 按 art/manifest.json 设置，现在只用于图标、插图、计时条和分数条的填充花纹、简历纸等。
     清单里没有的图，变量就不存在，对应的背景退回纯色。
   - 清晰度：#app 和弹层按 360 宽排版，再用 zoom: var(--pz) 整体缩放，让一个美术像素正好占整数个屏幕物理像素
     （--pz 由 app.js 的 fitPixels() 按屏幕缩放比例算）。九宫格的切片值写成 calc(n * var(--d))：
     n 是 180 宽底图下的像素，底图升级到 360 宽时 --d 为 2，画宽不变。 */
:root { --d: 1; --pz: 1; }
body.pixel {
  --ink: #202532; --paper: #fff1d2; --paper-2: #e5e7de; --muted: #485264; --accent: #dbb869;
  --line: 3px solid #202532; --shadow: 0 0 0 transparent;
  color: var(--ink); background: #202532; image-rendering: pixelated;
}
.pixel #app { width: 360px; min-height: calc(100dvh / var(--pz)); zoom: var(--pz); background: #c3cdd0; }
.pixel .sheet-modal { zoom: var(--pz); }

/* 像素字体：缝合像素字体 12px 简体版（SIL OFL 1.1，协议见 fonts/OFL.txt 和 fonts/LICENSES/）。只在像素版用，颜文字版不加载。
   字体网格是 12px，一格正好是 180 宽底图下美术像素的一半（开工单 v6 的 360 宽底图里正好一格一像素）。
   规则：字号只用 12 和 24，行高用整数像素，不加粗（像素字体没有粗体，浏览器硬加粗会糊）。缺的字（emoji、个别符号）由系统字体补。 */
@font-face { font-family: "Fusion Pixel"; src: url("fonts/fusion-pixel-12px-proportional-zh_hans.woff2") format("woff2"); font-display: swap; }
body.pixel { font-family: "Fusion Pixel", "PingFang SC", "Microsoft YaHei", sans-serif; font-synthesis: none; -webkit-font-smoothing: none; }
.pixel #app *, .pixel .sheet-modal * { font-size: 12px; line-height: 18px; font-weight: 400; }
.pixel #app h1, .pixel #app h2, .pixel .sheet-modal h2, .pixel #app .title-art .big, .pixel #app .tier-line, .pixel #app .pool { font-size: 24px; line-height: 32px; }
.pixel #app .title-art .big { letter-spacing: 4px; }
/* 没有粗体，标题类文字改用调色板里的青色区分层级 */
.pixel #app .ttl, .pixel #app h3, .pixel #app b, .pixel .sheet-modal b { color: #3e6c70; }

/* 框类控件用代码画，不用九宫格素材（2026-10-24 改）：按钮、选项、标签、卡片、对话框、弹层、名牌，以及计时条和分数条的框。
   原因：素材里的框上下边比左右边厚一倍（上下 4 像素，左右 2 像素），拉成大卡片后上下两道显得很重；
   代码画的框四边一样粗，多大都清楚，换状态、换公司配色也只改变量。
   画法：2px 深色描边 + 2px 内侧高光/暗边（光从左上来）+ 四角各切掉 2px 成像素圆角；颜色全部取自美术调色板。
   2px 正好是 180 宽底图下的一个美术像素，v6 底图升到 360 宽时也保持 2px，看起来一样粗。 */
.pixel {
  --f-ol: #202532; --f-fill: #fff1d2; --f-hi: transparent; --f-lo: #e5e7de;
  --notch: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}
.pixel button, .pixel .card, .pixel .bubble, .pixel .letter, .pixel details.review, .pixel .compare .col, .pixel .gaze .g,
.pixel .sheet-modal, .pixel .chip, .pixel .nameplate, .pixel .scene .round-label, .pixel .on-art .section-title {
  border: 2px solid var(--f-ol); border-image: none; border-radius: 0; background: var(--f-fill);
  box-shadow: inset 2px 2px 0 var(--f-hi), inset -2px -2px 0 var(--f-lo); clip-path: var(--notch);
}
.pixel .gaze .g { clip-path: none; }   /* 条与条之间的视线点画在框外，不能裁 */
/* 代码块：同一种框，深色底。像素字体是比例字，但代码只靠行首缩进，每行同样几个空格照样对得齐，所以不换等宽字体 */
.pixel #app pre.code { font-family: "Fusion Pixel", Consolas, monospace; border: 2px solid #202532; background: #202532; color: #fff1d2;
  box-shadow: inset 2px 2px 0 #485264; clip-path: var(--notch); }
.pixel button:focus-visible { outline: 2px dashed #3e6c70; outline-offset: -6px; }

/* 按钮：默认、按下（高光暗边对调）、主按钮（金色）、次要、禁用 */
.pixel button { --f-lo: #c3cdd0; }
.pixel button:active { transform: none; --f-hi: #c3cdd0; --f-lo: transparent; }
.pixel button.primary { --f-fill: #dbb869; --f-hi: #fff1d2; --f-lo: #b58c58; }
.pixel button.primary:active { --f-hi: #b58c58; --f-lo: transparent; }
.pixel button.ghost { --f-fill: #e5e7de; --f-lo: #c3cdd0; }
.pixel button:disabled { opacity: 1; color: var(--muted); --f-fill: #e5e7de; --f-hi: transparent; --f-lo: transparent; }
.pixel .sheet .item .ops button { --f-fill: #e5e7de; --f-lo: transparent; }

/* 选项按钮：默认、按下、已选（青色描边）、锁定 */
.pixel .options button.picked, .pixel .sheet-modal .variant.on { --f-ol: #3e6c70; --f-hi: #63928d; --f-lo: #63928d; }

/* 技能标签：默认、已选（青底浅字）；机器扫描命中的关键词同样 */
.pixel .chip { padding: 2px 8px; }
.pixel .chip.on, .pixel .scan .chip.on { color: #fff1d2; --f-fill: #3e6c70; --f-hi: #63928d; --f-lo: transparent; }

/* 经历卡：已放进简历的变灰 */
.pixel .tray button.in { color: var(--muted); --f-fill: #e5e7de; --f-lo: transparent; }

/* 弹层和卡片 */
.pixel .sheet-modal { width: 360px; padding: 16px; }
.pixel .sheet-modal .variant { padding: 12px 14px; }
.pixel .pc-face { display: flex; justify-content: center; }
.pixel .card.locked { color: var(--muted); --f-fill: #e5e7de; --f-lo: transparent; }
.pixel .pc-face .sprite.art { width: 192px; height: 192px; }
.pixel .persona-tile .sprite { width: 80px; height: 80px; }
.pixel .persona-tile.on { background: var(--f-fill); --f-fill: #dbb869; --f-hi: #fff1d2; --f-lo: #b58c58; }
/* 卡片上的胸像（人设卡、选人设的小方块、群面座位）：立绘底边是平切的，直接放在卡片上像悬在半空，所以放进代码画的相框，平切的底边落在框沿上 */
.pixel .persona-tile .sprite.art, .pixel .pc-face .sprite.art, .pixel .seat .sprite.small.art {
  border: 2px solid var(--ink); background: #c3cdd0; box-shadow: inset 2px 2px 0 #e5e7de; clip-path: var(--notch);
}
.pixel .seat .sprite.small.art img { inset: auto; left: -22px; top: -4px; width: 96px; height: 96px; }
/* 群面（正面视角，app.js 的 groupPanelHtml）：五个座位中心在 x = 40 + 70 × i；桌沿在第 186 行，挡住腰以下。
   过渡期场景用调色板色块：墙、白板（写阶段）、椅背、桌子；人是群面小人（1024×1536）按 128×192 显示，腰落在桌沿。
   名字是桌沿上的名牌，说话的人名牌变青；观察员在右上角小窗里，只露头肩。 */
.pixel .on-art.panel-screen { background: #303746; }
.pixel .on-art .scene.panel-room { position: relative; height: 240px; padding: 0; display: block; overflow: hidden; border-bottom: 0;
  background: linear-gradient(#3d4a5f 0 6px, #587598 6px 150px, #485264 150px); }
.panel-room .board { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 150px; height: 64px; display: flex; align-items: center; justify-content: center;
  color: #202532; background: #e5e7de; border: 2px solid #202532; box-shadow: inset 2px 2px 0 #fff1d2, inset -2px -2px 0 #c3cdd0; white-space: nowrap; }
.panel-room .chair { position: absolute; left: calc(14px + var(--i) * 70px); top: 116px; width: 52px; height: 80px;
  background: #303746; border: 2px solid #202532; box-shadow: inset 2px 2px 0 #485264; clip-path: var(--notch); }
.panel-room .seat-p { position: absolute; left: calc(-24px + var(--i) * 70px); top: 90px; width: 128px; height: 192px; }
.panel-room .seat-p.active { z-index: 2; }
.panel-room .seat-p.bust { top: 70px; height: 128px; }
.panel-room .seat-p img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.panel-room .table { position: absolute; left: 0; right: 0; top: 186px; bottom: 0; z-index: 3;
  background: linear-gradient(#202532 0 2px, #dbb869 2px 8px, #b58c58 8px 44px, #8b7059 44px); }
.panel-room .plate { position: absolute; top: 20px; left: calc(40px + var(--i) * 70px); transform: translateX(-50%); padding: 0 4px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); white-space: nowrap; }
.panel-room .plate.active { color: #fff1d2; background: #3e6c70; }
.panel-room .observer { position: absolute; right: 8px; top: 8px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.panel-room .observer .face { position: relative; width: 48px; height: 48px; overflow: hidden; background: #c3cdd0; border: 2px solid #202532; box-shadow: inset 2px 2px 0 #e5e7de; clip-path: var(--notch); }
/* 头肩取小人原图的 x 262–762、y 60–560 这一块，缩到 44px：整张按 0.088 倍显示 */
.panel-room .observer .face img { position: absolute; left: -23px; top: -5px; width: 90px; height: 135px; image-rendering: auto; }
.panel-room .observer .plate { position: static; transform: none; }
.panel-room .observer.active .face { border-color: #3e6c70; box-shadow: 0 0 0 2px #dbb869; clip-path: none; }
.panel-room .observer.active .plate { color: #fff1d2; background: #3e6c70; }
.pixel .score-table { background: var(--paper); }

/* 名牌：说话人名牌、轮次标签、简历关的小节标题 */
.pixel .nameplate, .pixel .scene .round-label, .pixel .on-art .section-title { color: #fff1d2; padding: 3px 10px; --f-fill: #587598; --f-hi: #68778a; --f-lo: #485264; }

/* 立绘：有图时去掉占位框；分享卡上的小头像是 96×96 半身像，按 1 倍裁出头肩。
   群面座位将来用 32×48 的全身小人，尺寸不同，到图时另接，这里不套。 */
.pixel .sprite.art { border: 0; background: none; }
.pixel .sprite.art .ph { display: none; }
.pixel .share .sprite.small.art { border: 2px solid var(--ink); background: var(--paper-2); }
.pixel #app .share b { color: #fff1d2; }   /* 分享卡是深底，标题不用青色 */
.pixel .share .sprite.small.art img { inset: auto; left: -22px; top: -4px; width: 96px; height: 96px; }

/* 场景底图（问答、谈薪、群面、简历关）：2 倍铺满整屏，从第 --top 行开始露出，下方续上地板色。
   有 --floor 的场景，从露出部分第 --floor 行起盖一层纯色地板（上沿一道暗线），文字后面不再有木纹噪点。 */
.pixel .on-art {
  background:
    linear-gradient(transparent calc(var(--floor, 2000) * 2px), var(--floor-line, #604d43) 0 calc(var(--floor, 2000) * 2px + 2px), var(--floor-c, #8b7059) 0),
    var(--floor-c, #8b7059) var(--scene) 50% calc(var(--top) * -2px) / 360px 640px no-repeat;
}
/* v6 原图（body.hires）：场景和立绘比版面大得多，按版面尺寸平滑缩小显示；旧的小尺寸界面素材（计时条花纹、简历纸等）
   仍按整数倍硬边显示。image-rendering 会继承，所以场景容器自己用 auto，子元素改回 pixelated，立绘和几张大插图单独用 auto。 */
.pixel.hires .on-art, .pixel.hires .scene-banner, .pixel.hires .screen.monitor { image-rendering: auto; }
.pixel.hires .on-art > *, .pixel.hires .screen.monitor > * { image-rendering: pixelated; }
.pixel.hires .sprite img, .pixel.hires .badge-art, .pixel.hires .lock-ico, .pixel.hires .letter-art { image-rendering: auto; }
.sprite img.accessory { z-index: 3; pointer-events: none; }
.pixel.hires .sprite img.accessory { image-rendering: pixelated; }
.company-map { position: relative; flex: none; width: 360px; height: 640px; margin: -16px -16px 0; }
.company-map > img { display: block; width: 360px; height: 640px; image-rendering: auto; }
.company-map .map-company { position: absolute; transform: translate(-50%, -50%); width: 62px; min-height: 18px; padding: 0; border: 0; box-shadow: none; color: #303746; background: #FFF1D2; font-size: 11px; line-height: 18px; white-space: nowrap; }
.company-map .map-company:hover, .company-map .map-company:focus-visible { outline: 2px solid #DBB869; outline-offset: 2px; }
.pixel .on-art .scene { height: 240px; padding-top: 32px; border-bottom: 0; }
.pixel .on-art #who .sprite.art { width: 192px; height: 192px; }
/* 立绘裁掉自带的桌子：只露出第 --cut 行以上，再往下挪，让第 --cut 行落在露出部分的第 110 行（场景桌沿） */
.pixel .on-art #who .sprite.art[style*="--cut"] { height: calc(var(--cut) * 2px); margin-top: calc((94 - var(--cut)) * 2px); overflow: hidden; }
.pixel .on-art #who .sprite.art[style*="--cut"] img { bottom: auto; height: 192px; }
/* 硬边投影：场景的光都从左边窗户来，立绘往右下投一块影子（不模糊），人像坐在房间里，不像贴在上面。
   滤镜加在裁过的立绘框上，影子跟着裁剪后的轮廓走，不会被框切掉。 */
.pixel .on-art #who .sprite.art { filter: drop-shadow(10px 4px 0 rgba(32, 37, 50, .3)); }
.pixel .on-art .timer .label, .pixel .on-art .relaxed-badge, .pixel .on-art .panel > .fine, .pixel .on-art .seat > span, .pixel .on-art .meter {
  align-self: flex-start; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); padding: 0 4px;
}
.pixel .panel .timer { margin-top: 12px; }
.pixel .on-art .timer .label { top: -22px; }

/* 选公司页顶部：S0 城市地图 */
.pixel .scene-banner { flex: none; margin: -16px -16px 0; height: 240px; border-bottom: var(--line); background: #485264 var(--scene) 50% calc(var(--top) * -2px) / 360px 640px no-repeat; }
/* 标题页封面：正式封面没到之前用 S0 城市地图，标题牌和副标题由程序画在上方的天空里 */
.pixel .title-art.on-cover { flex: none; margin: -16px -16px 0; height: 260px; border: 0; border-bottom: var(--line); justify-content: flex-start; padding-top: 28px; gap: 8px;
  background: #485264 var(--scene) 50% calc(var(--top) * -2px) / 360px 640px no-repeat; image-rendering: auto; }
.pixel.hires .title-art.on-cover { image-rendering: auto; }
.pixel .title-art.on-cover .big { color: #fff1d2; background: #202532; border: 2px solid #fff1d2; box-shadow: 0 0 0 2px #202532, inset 2px 2px 0 #485264; padding: 6px 16px; clip-path: var(--notch); }
.pixel .title-art.on-cover .sub { color: #202532; background: #fff1d2; border: 2px solid #202532; padding: 0 8px; }

/* 笔试：S2 当九宫格，显示器边框和桌沿固定，屏幕随内容拉长；第一行压在屏幕顶上的灰条里 */
.pixel .screen.monitor { border: solid transparent; border-width: 20px 16px 54px; padding: 0 12px 14px; border-image: var(--scene) calc(21 * var(--d)) calc(8 * var(--d)) calc(27 * var(--d)) calc(8 * var(--d)) fill / 42px 16px 54px 16px stretch; }
.pixel .monitor > .row:first-child { height: 22px; }
.pixel .monitor > .row:first-child h2 { font-size: 15px; }
/* v6 的 S2 是正对显示器的构图（显示器在 640 高版面的 268–469 行，屏幕 x 17–343、y 278–462），没法直接当九宫格：
   用一个伪元素往上多伸出 --top×2 px（被裁掉），九宫格取图的上 300 行（一条房间 + 显示器上框 + 一点屏幕）、
   下 184 行（屏幕下沿、显示器底座、键盘和桌面）、左 17 列右 16 列（墙和显示器侧框），中间米色屏幕随内容拉长。
   切片按原图像素给：版面 px × --ds / 2。 */
.pixel.hires .screen.monitor { position: relative; isolation: isolate; overflow: clip; /* 不用 hidden：flex 子项设了 hidden 会被压成一屏高，内容溢出 */ border: 0; border-image: none; padding: 58px 26px 192px 26px; background: var(--floor-c); }
.pixel.hires .screen.monitor::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--top) * -2px); bottom: 0;
  border: solid transparent; border-width: 300px 16px 184px 17px;
  border-image: var(--scene) calc(300 * var(--ds) / 2) calc(16 * var(--ds) / 2) calc(184 * var(--ds) / 2) calc(17 * var(--ds) / 2) fill / 300px 16px 184px 17px stretch;
}

/* 简历关：顶部做成深色条，简历纸用 UI_resume_paper_*，页面占用刻度竖着放在纸旁边 */
.pixel .resume-head { background: var(--ink); color: var(--paper); border-bottom: 0; }
.pixel .resume-head .fine, .pixel .resume-head .relaxed-badge { color: #c3cdd0; background: none; border: 0; }
.pixel .on-art .section-title { align-self: flex-start; margin: 10px 14px 6px; }
.pixel .sheet {
  background: none; box-shadow: none; border: 6px solid var(--ink); padding: 6px 10px 8px; scrollbar-width: none;
  border-image: var(--UI_resume_paper_default) calc(22 * var(--d)) calc(26 * var(--d)) calc(4 * var(--d)) calc(4 * var(--d)) fill / 44px 52px 8px 8px repeat;
}
.pixel .sheet::-webkit-scrollbar { display: none; }
.pixel .sheet .who { margin-right: 36px; }
.pixel .sheet.over { border-width: 6px 20px 44px 6px; border-image: var(--UI_resume_paper_overflow) calc(26 * var(--d)) calc(28 * var(--d)) calc(24 * var(--d)) calc(6 * var(--d)) fill / 52px 56px 48px 12px repeat; }
.pixel .sheet-row { display: flex; gap: 6px; align-items: flex-start; margin: 10px 14px 0; }
.pixel .sheet-row .sheet { flex: 1; min-width: 0; margin: 0; height: 288px; max-height: none; }
.pixel .pmeter {
  position: relative; flex: none; width: 16px; height: 288px;
  background: var(--UI_page_meter_frame) 0 0 / 16px 288px no-repeat, linear-gradient(var(--paper), var(--paper)) 4px 12px / 8px 264px no-repeat;
}
.pixel .pmeter i { position: absolute; left: 4px; width: 8px; height: 16px; background: var(--UI_page_meter_fill, none) 0 0 / 8px 16px, #3e6c70; }
.pixel .meter { align-items: center; }
.pixel .meter .over-ico { width: 24px; height: 32px; margin: -8px 0; }

/* 计时条：框 + 三种填充（从容、在等、时间到） */
.pixel .timer { height: 20px; border: 0; background: none; }
.pixel .timer::before { content: ""; position: absolute; inset: 4px 6px; background: var(--ink); }
.pixel .timer::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); clip-path: var(--notch); }
.pixel .timer .fill { top: 4px; bottom: 4px; left: 6px; max-width: calc(100% - 12px); background: var(--UI_timer_fill_calm, none) 0 0 / 16px 12px repeat-x, var(--good); }
.pixel .timer.waiting .fill { background-image: var(--UI_timer_fill_waiting, none); background-color: var(--wait); }
.pixel .timer.out .fill { background-image: var(--UI_timer_fill_timeout, none); background-color: var(--bad); }

/* 揭晓分数条：框 + 填充 + 通过线。填充和通过线都从槽的左沿（8px）算起，两者对得上 */
.pixel .scorebar { height: 24px; border: 0; background: none; margin: 10px 0 30px; }
.pixel .scorebar::before { content: ""; position: absolute; inset: 4px 8px; background: var(--ink); }
.pixel .scorebar::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); clip-path: var(--notch); }
.pixel .scorebar .fill { top: 4px; bottom: 4px; left: 8px; max-width: calc(100% - 16px); background: var(--UI_score_fill, none) 0 0 / 16px 16px repeat-x, var(--midcorp-dark); }
.pixel .scorebar .passline { z-index: 1; top: -4px; bottom: -4px; width: 6px; margin-left: 5px; background: var(--UI_score_pass_marker, none) 0 0 / 6px 32px, var(--bad); }
.pixel .scorebar .passline span { top: 36px; }

/* HR 视线回放：每条左边叠一块光斑（三档强度），条与条之间一颗视线轨迹点 */
.pixel .gaze { gap: 14px; }
.pixel .gaze .g { position: relative; min-height: 44px; padding: 10px 10px 10px 56px; }
.pixel .gaze .g::before { content: ""; position: absolute; left: 2px; top: 50%; width: 48px; height: 48px; margin-top: -24px; background: 0 0 / 48px 48px no-repeat; }
.pixel .gaze .g.high::before, .pixel .gaze .g.linger::before { background-image: var(--UI_hr_heatspot_high, none); }
.pixel .gaze .g.mid::before { background-image: var(--UI_hr_heatspot_medium, none); }
.pixel .gaze .g.low::before { background-image: var(--UI_hr_heatspot_low, none); }
.pixel .gaze .g.skip { color: var(--muted); }
.pixel .gaze .g + .g::after { content: ""; position: absolute; left: 22px; top: -11px; width: 8px; height: 8px; background: var(--UI_hr_gaze_dot, none) 0 0 / 8px 8px; }

/* 机器扫描：命中的关键词青底，没命中的变灰（扫描光束动画看着怪，已去掉） */
.pixel .scan .chip:not(.on) { color: var(--muted); }

/* 插图：锁、感谢信、offer letter、档位徽章（徽章还没交付，到了自动用上） */
.pixel .lock-ico { width: 32px; height: 32px; vertical-align: middle; }
.pixel .letter-art { display: block; width: 160px; height: 192px; margin: 0 auto -4px; }
/* v6 的 offer / 感谢信插图是举着信的半身人物，底边平切：和卡片上的胸像一样放进相框，不再贴着信纸卡悬着 */
.pixel.hires .letter-art { margin: 0 auto; border: 2px solid var(--ink); background: #c3cdd0; box-shadow: inset 2px 2px 0 #e5e7de; clip-path: var(--notch); box-sizing: content-box; }
.pixel .badge-art { flex: none; width: 64px; height: 64px; }

/* 帧动画（等通知的手机、泡池子）：所有帧叠在一起，只显示带 on 的那一帧 */
.anim { position: relative; flex: none; margin: 0 auto; }
.anim img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.anim img.on { opacity: 1; }
.pixel.hires .anim img { image-rendering: auto; }
/* 手机：1024×1536 的原图按 160×240 显示；屏幕亮起时结果画面淡入（结果图里的手机比震动帧略大一点，淡入盖住这个跳变） */
.phone-anim { width: 160px; height: 240px; margin: 28px auto 8px; }
.phone-anim.lit img { transition: opacity .15s; }
/* 泡池子：1536×1024 的原图铺满内容宽；“你”标在中间那位头顶的箭头上方（箭头在图里水平居中，上沿约在 20% 高度处） */
.pool-anim { width: 100%; aspect-ratio: 3 / 2; }
.pool-anim .you { position: absolute; z-index: 1; left: 50%; top: 9%; transform: translateX(-50%); padding: 0 4px; font-size: 12px; line-height: 18px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); white-space: nowrap; }

/* 拼合检查页（?check=art）：每块只截问答界面的场景部分 */
.check-crop { height: 250px; overflow: hidden; margin: 0 -16px; display: flex; flex-direction: column; }

/* 结算复盘的解锁（两种画风通用）：锁住的部分用几道灰条示意；示意二维码 21×21 格 */
.locked-review .locked-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.locked-review .locked-rows i { display: block; height: 12px; background: repeating-linear-gradient(90deg, #c3cdd0 0 24px, transparent 24px 30px); opacity: .8; }
.locked-review .locked-rows i:nth-child(2) { width: 80%; }
.locked-review .locked-rows i:nth-child(3) { width: 60%; }
.locked-review .row .block { flex: 1; text-align: center; }
.review-top { display: flex; flex-direction: column; gap: 8px; }
.review-top .item { background: var(--paper); border: 2px solid var(--ink); padding: 8px 10px; font-size: 13px; line-height: 1.6; }
.fqr { display: grid; grid-template-columns: repeat(21, 1fr); width: 63px; height: 63px; padding: 4px; background: #fff; box-sizing: content-box; }
.fqr i { background: #202532; }
.share.big .fqr { width: 105px; height: 105px; }
.share.big { padding: 18px; }

/* 分享卡上的本局小成就：小卡一排三个（图标 + 名字），大卡（分享页）一行一个，带一句说明。
   徽章底色分金银铜三档，色值取自调色板；美术图（UI_ach_<id>，64×64 透明底）到了就盖在底色上，没到时中间写一个字占位。 */
.achs { display: flex; gap: 6px; }
.achs .ach { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; }
.achs .ach-ico { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; position: relative;
  border: 2px solid #fff1d2; box-shadow: inset 2px 2px 0 rgba(255,255,255,.55), inset -2px -2px 0 rgba(0,0,0,.2); clip-path: var(--notch, none); }
.achs .gold .ach-ico { background: #f0c35a; }
.achs .silver .ach-ico { background: #c3cdd0; }
.achs .bronze .ach-ico { background: #d79a63; }
.achs .ach-ico i { font-style: normal; font-weight: 800; font-size: 18px; color: #202532; }
.achs .ach-ico img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.achs.big { flex-direction: column; gap: 8px; }
.achs.big .ach { flex-direction: row; text-align: left; gap: 10px; }
.achs.big .ach-ico { width: 44px; height: 44px; }
.achs.big .ach b { flex: none; min-width: 6em; }
.achs.big .fine { color: #cfd6e4; }
.pixel #app .achs .ach-ico i { font-size: 24px; line-height: 24px; }

/* 第一次手工改简历时的操作提示：虚线框的小卡片，做完一步自动换下一条 */
.coach { margin: 8px 14px; padding: 8px 10px; background: #fff8e6; border: 2px dashed var(--ink); font-size: 13px; line-height: 1.6; }
.coach .row { margin-top: 6px; gap: 6px; }
.pixel .coach { background: #fff1d2; border-color: #202532; }

/* 成就弹窗：右下角，和 #app 的右边对齐；不挡点击，3 秒后自己消失 */
#toasts { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; z-index: 30; }
#toasts .stack { width: min(100vw, 400px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 0 12px 16px; }
/* 像素版和别的弹层一样整体按 --pz 缩放（缩放加在里层会让外层的定位对不上，最下面一张掉出屏幕） */
.pixel #toasts { zoom: var(--pz); }
.pixel #toasts .stack { width: 360px; }
.ach-toast { display: flex; align-items: center; gap: 10px; max-width: 250px; padding: 8px 12px 8px 8px; background: var(--paper); color: var(--ink);
  border: var(--line); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); animation: toast-in .35s ease-out both; }
.ach-toast.out { animation: toast-out .4s ease-in both; }
.ach-toast .ach-ico { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; position: relative; }
.ach-toast.gold .ach-ico { background: #f0c35a; }
.ach-toast.silver .ach-ico { background: #c3cdd0; }
.ach-toast.bronze .ach-ico { background: #d79a63; }
.ach-toast .ach-ico i { font-style: normal; font-weight: 800; font-size: 18px; color: #202532; }
.ach-toast .ach-ico img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.ach-toast .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.ach-toast .t b { font-size: 15px; }
.ach-toast .fine { font-size: 12px; color: var(--muted); }
/* 像素字体只用 12、24 号，不加粗 */
.pixel .ach-toast .t b { font-size: 12px; font-weight: normal; }
.pixel .ach-toast .ach-ico i { font-size: 24px; line-height: 24px; font-weight: normal; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .ach-toast, .ach-toast.out { animation-duration: .01s; } }