/* 秋招模拟器 · 全局样式。配色取自素材：暖米色、木棕、藏青、红、绿。 */
:root {
  --bg: #2a1e1a;          /* 页面底：深棕 */
  --paper: #fbefd2;       /* 对话框底：米色 */
  --paper2: #f3dfae;
  --ink: #3a2418;         /* 文字：深棕 */
  --muted: #8a6a4a;
  --wood: #a9622b;
  --navy: #1c2b4d;
  --red: #c8442f;
  --green: #3d8a4a;
  --gold: #e8a317;
  --line: #5b3320;        /* 像素描边 */
  --shadow: #1a0f0a;
  --font: 'DotGothic16', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.7; }
/* 底：深棕上一层很淡的像素格，像游戏机外壳 */
body { min-height: 100vh; background-image: linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
  linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px;
  -webkit-tap-highlight-color: transparent; }
/* 一列，像掌机屏幕；电脑上也不会拉得太宽 */
#app { max-width: 640px; margin: 0 auto; padding-block: 14px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
img { image-rendering: pixelated; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }

/* ---------- 通用组件 ---------- */
.stage { position: relative; width: 100%; border: 4px solid var(--shadow); box-shadow: 5px 5px 0 var(--shadow); background: #000; line-height: 0; }
.stage > img.scene-img { width: 100%; display: block; }
.panel { margin-top: 16px; padding: 14px 16px 16px; background: var(--paper); color: var(--ink); border: 4px solid var(--line); box-shadow: inset 0 -4px 0 var(--paper2), inset 0 3px 0 #fffaf0, 5px 5px 0 var(--shadow); }
.panel .who { display: inline-block; margin: -30px 0 8px -6px; padding: 0 12px; background: var(--line); color: var(--paper); font-size: 14px; border: 2px solid var(--shadow); }
.panel p { margin: 0 0 10px; }
.typed { min-height: 3.4em; white-space: pre-wrap; word-break: break-word; }
.hint { color: var(--muted); font-size: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* 按钮：上亮下暗的像素斜面，按下去整块下沉 */
.btn { padding: 8px 20px; min-height: 44px; background: var(--navy); color: #fbefd2; border: 3px solid var(--shadow); user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.16), 3px 3px 0 var(--shadow); }
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--gold); color: #2a1e1a; outline: none; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 0 4px 0 rgba(0,0,0,.28), 1px 1px 0 var(--shadow); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.red { background: var(--red); } .btn.green { background: var(--green); } .btn.ghost { background: var(--paper2); color: var(--ink); }
.btn.big { min-height: 56px; font-size: 22px; padding: 10px 28px; letter-spacing: .06em; }

.options { display: grid; gap: 10px; margin-top: 12px; }
.opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 8px 12px; min-height: 44px;
  background: var(--paper2); border: 3px solid var(--line); box-shadow: 3px 3px 0 var(--line); }
.opt .n { flex: none; width: 22px; text-align: center; background: var(--line); color: var(--paper); font-size: 14px; margin-top: 2px; }
.opt:hover, .opt:focus-visible { background: #ffe9a6; outline: none; }
.opt.sel { background: var(--gold); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.opt.mini { min-height: 36px; padding: 4px 10px; }

/* ---------- 框架图（带洞） ---------- */
.frame { position: relative; width: 100%; line-height: 0; }
.frame-hole { position: absolute; overflow: hidden; z-index: 1; line-height: 1.5; }
.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; image-rendering: pixelated; }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.frame-hole.content { padding: 2%; overflow: auto; color: var(--ink); background: var(--paper); font-size: clamp(12px, 2.2vw, 18px); line-height: 1.5; }

/* 表情气泡（叠在视频窗口右上） */
.react { position: absolute; right: 2%; top: 3%; width: clamp(34px, 9%, 84px); z-index: 3; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); animation: pop .25s steps(4); }
@keyframes pop { from { transform: scale(.3); } to { transform: scale(1); } }
.glitch { animation: glitch .6s steps(2) infinite; }
@keyframes glitch { 0% { transform: translate(0,0); filter: none; } 25% { transform: translate(-2%,1%); filter: hue-rotate(60deg); } 50% { transform: translate(2%,-1%); filter: saturate(2.4); } 75% { transform: translate(-1%,-2%); filter: hue-rotate(-50deg); } 100% { transform: translate(0,0); filter: none; } }

/* 印章 */
/* 注意：印章不要加 rotate()，带旋转的像素图在部分浏览器里会让渲染卡死 */
.stamp { position: absolute; left: 50%; top: 50%; width: 26%; transform: translate(-50%, -50%); z-index: 5; text-align: center; animation: slam .35s cubic-bezier(.2,1.6,.4,1) both; }
.stamp .stamp-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(28px, 7vw, 64px); letter-spacing: 6px; text-shadow: 2px 2px 0 rgba(0,0,0,.25); line-height: 1; }
.stamp.pass .stamp-text { color: #2f7a3a; } .stamp.fail .stamp-text { color: #b8352a; }
@keyframes slam { from { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.shake { animation: shake .4s steps(6); }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,3px); } 40% { transform: translate(5px,-4px); } 60% { transform: translate(-4px,-3px); } 80% { transform: translate(4px,4px); } }

/* 横幅（阶段开场、标题） */
.banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78%; padding: 14px 18px; text-align: center;
  background: rgba(251,239,210,.96); border: 4px solid var(--line); box-shadow: 5px 5px 0 var(--shadow); line-height: 1.4; z-index: 4; }
.banner h2 { margin: 0 0 4px; font-size: clamp(22px, 5vw, 40px); }
.banner small { color: var(--muted); font-size: clamp(12px, 2.4vw, 16px); }

/* 进场：往上冒一点，分几格动，像素感 */
@keyframes m7in { from { transform: translateY(10px); opacity: 0; } }

.pill { display: inline-block; padding: 0 10px; margin: 0 6px 6px 0; border: 2px solid var(--line); background: var(--paper2); font-size: 14px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  #app { padding-block: 10px 40px; }
  .panel { padding: 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .glitch, .stamp, .react, .shake { animation: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }