/* ============================================================
   KRONOS ZHOU · 对话式文字游戏 · 通用运行时样式
   路径：games/game-player.css
   ------------------------------------------------------------
   这份样式被三处引用，内容完全一样：
     · games/game.html              （?g=游戏id 的通用页面）
     · games/<游戏id>/<游戏id>.html （游戏文件夹里的独立页面）
     · 游戏助手里的试玩 iframe（srcdoc）

   约定：
     · 所有颜色 / 字号 / 圆角 / 宽度都走 CSS 变量（--kz-*），
       由 game-player.js 在启动时按 content.theme 写到根节点上；
       这里写的是「JS 还没跑起来时」的兜底默认值。
     · 游戏页面是全屏沉浸式的，不套站点顶栏，所以 body 一进来就是
       满屏、不滚动；界面分三层：
         舞台（背景 / 立绘 / 特效） → 世界（HUD / 对话框 / 选项）
         → 覆盖层（标题 / 存档 / 回顾 / 设置 / 结局）
     · 移动端优先保证「不挤爆」：窄屏下对话框满宽、工具栏换行、
       HUD 槽位自动折行。
   ============================================================ */

/* ------------------------------------------------------------
   1. 变量兜底
------------------------------------------------------------ */
.kzgame {
  --kz-bg: #0e1116;
  --kz-panel: #161b23;
  --kz-panel-opacity: 0.92;
  --kz-text: #e8ecf3;
  --kz-text-dim: #9aa6b8;
  --kz-accent: #e0a458;
  --kz-accent2: #5b8def;
  --kz-border: #2a3242;
  --kz-speaker: #e0a458;
  --kz-choice-bg: #1b212b;
  --kz-choice-hover: #232b38;
  --kz-choice-text: #e8ecf3;
  --kz-hud-bg: rgba(14, 17, 22, 0.72);
  --kz-hud-text: #e8ecf3;
  --kz-hud-border: #2a3242;
  --kz-bar-track: #232b38;
  --kz-danger: #e5484d;
  --kz-success: #46a758;
  --kz-warning: #f5a524;
  --kz-radius: 14px;
  --kz-font: 'Segoe UI Variable', 'Segoe UI', 'Bahnschrift', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --kz-font-dialogue: var(--kz-font);
  --kz-font-size: 18px;
  --kz-line-height: 1.9;
  --kz-letter-spacing: 0px;
  --kz-dialogue-width: min(56rem, 92vw);
  --kz-bg-blur: 0px;
  --kz-bg-dim: 0.2;
  --kz-shake-amp: 8px;
  --kz-shake-dur: 600ms;
  --kz-flash-max: 0.7;
  --kz-flash-dur: 400ms;
}

/* ------------------------------------------------------------
   2. 页面骨架：沉浸式全屏，不滚动
------------------------------------------------------------ */
html:has(body.kzgame-body),
body.kzgame-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0e1116;
  color: #e8ecf3;
}

body.kzgame-body * {
  box-sizing: border-box;
}

.kzgame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--kz-bg);
  color: var(--kz-text);
  font-family: var(--kz-font);
  font-size: var(--kz-font-size);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.kzgame * {
  box-sizing: border-box;
}

.kzgame-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa6b8;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 0.2em;
  font-size: 14px;
}

/* ------------------------------------------------------------
   3. 世界（HUD / 工具栏 / 选项 / 对话框）在舞台上方的纵向流式布局
   order 决定位置，靠 .kzgame--dlg-* 切换对话框在 上/中/下
------------------------------------------------------------ */
.kzgame-world {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.kzgame-gap {
  min-height: 0;
}
/* ------------------------------------------------------------
   纵向流式布局（order 决定谁在谁上面）
     · 顶栏 HUD / 底栏 HUD 永远贴屏幕的上、下边
     · 「选项 + 对话框」这一组在中间，靠上下两个 .kzgame-gap 撑开
   对话框在组里排后面（选项在上、对话框在下），视觉上就是
   「飘出来的选项 + 底下的大对话框」这一块。
------------------------------------------------------------ */
.kzgame-topbar { order: 1; }
.kzgame-hud-top { order: 2; }
.kzgame-gap-top { order: 3; flex: 1 1 auto; }
.kzgame-choices { order: 4; }
.kzgame-dialogue { order: 5; }
.kzgame-gap-bottom { order: 6; flex: 1 1 auto; }
.kzgame-hud-bottom { order: 7; }

/* ------------------------------------------------------------
   默认（居中）：选项 + 对话框落在「画面正中间」的横向带里，
   上下留白对称，看起来就是页面中间那一大块。
   ★ 主题里还能选「贴底 / 顶部」，见下面两组规则。
------------------------------------------------------------ */
.kzgame--dlg-center .kzgame-gap-top { flex: 1 1 auto; }
.kzgame--dlg-center .kzgame-gap-bottom { flex: 1 1 auto; }
.kzgame--dlg-center .kzgame-choices { margin-bottom: 0.75rem; }

/* 对话框贴底（主题里选「底部」）：整组沉到屏幕下方、紧贴底栏 HUD */
.kzgame--dlg-bottom .kzgame-gap-top { flex: 1 1 auto; }
.kzgame--dlg-bottom .kzgame-gap-bottom { flex: 0 0 0; }

/* 对话框在顶部：整组提到顶部 HUD 下面 */
.kzgame--dlg-top .kzgame-dialogue { order: 3; }
.kzgame--dlg-top .kzgame-choices { order: 4; }
.kzgame--dlg-top .kzgame-gap-top { order: 5; flex: 0 0 0; }
.kzgame--dlg-top .kzgame-gap-bottom { order: 6; flex: 1 1 auto; }
.kzgame--dlg-top .kzgame-hud-bottom { order: 7; }

/* ------------------------------------------------------------
   4. 舞台：背景图 / 压暗 / 立绘 / 全屏特效
------------------------------------------------------------ */
.kzgame-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--kz-bg);
}

.kzgame-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 背景切换用两层淡入，避免 background-image 突变 */
.kzgame-bg-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: blur(var(--kz-bg-blur));
  transform: scale(1.04);
  will-change: opacity;
}
.kzgame-bg-layer.is-on { opacity: 1; }

.kzgame-bg-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--kz-bg-dim);
  pointer-events: none;
}

.kzgame-sprites {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kzgame-sprite {
  position: absolute;
  bottom: 0;
  max-height: 80%;
  max-width: 42%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}
.kzgame-sprite.is-on {
  opacity: 1;
  transform: translateY(0);
}
.kzgame-sprite--left { left: 3%; }
.kzgame-sprite--center { left: 50%; transform: translateX(-50%) translateY(14px); }
.kzgame-sprite--center.is-on { transform: translateX(-50%) translateY(0); }
.kzgame-sprite--right { right: 3%; }

.kzgame-tint,
.kzgame-flash,
.kzgame-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.kzgame-tint { transition: opacity 0.4s ease; }
.kzgame-fade { background: #000; }

.kzgame-flash.is-on {
  animation: kz-flash var(--kz-flash-dur) ease-out both;
}
@keyframes kz-flash {
  0% { opacity: var(--kz-flash-max); }
  100% { opacity: 0; }
}

.kzgame-world.is-shaking {
  animation: kz-shake var(--kz-shake-dur) ease-in-out both;
}
@keyframes kz-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(calc(var(--kz-shake-amp) * -1), 0, 0); }
  20% { transform: translate3d(var(--kz-shake-amp), 0, 0); }
  30% { transform: translate3d(calc(var(--kz-shake-amp) * -0.7), calc(var(--kz-shake-amp) * 0.4), 0); }
  40% { transform: translate3d(calc(var(--kz-shake-amp) * 0.7), calc(var(--kz-shake-amp) * -0.4), 0); }
  55% { transform: translate3d(calc(var(--kz-shake-amp) * -0.5), 0, 0); }
  70% { transform: translate3d(calc(var(--kz-shake-amp) * 0.5), 0, 0); }
  85% { transform: translate3d(calc(var(--kz-shake-amp) * -0.2), 0, 0); }
}

/* ------------------------------------------------------------
   5. 顶部工具条 + 进度
------------------------------------------------------------ */
.kzgame-topbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem 0.2rem;
  flex-wrap: wrap;
}
.kzgame-topbar:empty { display: none; }

.kzgame-progress {
  font-size: 12px;
  color: var(--kz-text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kzgame-tools {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.kzgame-tool {
  appearance: none;
  border: 1px solid var(--kz-hud-border);
  background: var(--kz-hud-bg);
  color: var(--kz-hud-text);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kzgame-tool:hover {
  border-color: var(--kz-accent);
  color: var(--kz-accent);
}
.kzgame-tool.is-active {
  background: var(--kz-accent);
  border-color: var(--kz-accent);
  color: #10141c;
  font-weight: 700;
}

/* ------------------------------------------------------------
   6. HUD：玩家自定义顶栏 / 底栏
------------------------------------------------------------ */
.kzgame-hud {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.42rem 0.8rem;
  background: var(--kz-hud-bg);
  color: var(--kz-hud-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 14px;
}
.kzgame-hud-top { border-bottom: 1px solid var(--kz-hud-border); }
.kzgame-hud-bottom { border-top: 1px solid var(--kz-hud-border); }
.kzgame-hud[hidden] { display: none; }

.kzgame-hud-slot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-width: 0;
}
.kzgame-hud-slot[data-slot='left'] { flex: 1 1 auto; justify-content: flex-start; }
.kzgame-hud-slot[data-slot='center'] { flex: 0 1 auto; justify-content: center; }
.kzgame-hud-slot[data-slot='right'] { flex: 1 1 auto; justify-content: flex-end; }

.kzgame-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.kzgame-widget[hidden] { display: none; }
.kzgame-widget-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.kzgame-widget-spacer { flex: 1 1 auto; }
.kzgame-widget-icon .kzgame-widget-text { font-size: 1.35em; line-height: 1; }
.kzgame-widget-img {
  max-height: 1.9em;
  max-width: 8rem;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: middle;
}
.kzgame-widget-html img { max-height: 2em; vertical-align: middle; }

.kzgame-hud-btn {
  appearance: none;
  font: inherit;
  font-size: 0.85em;
  line-height: 1;
  padding: 0.36em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--kz-hud-border);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.kzgame-hud-btn:hover { border-color: var(--kz-accent); color: var(--kz-accent); }

.kzgame-bar-track {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 8px;
  border-radius: 999px;
  background: var(--kz-bar-track);
  overflow: hidden;
  flex: 0 0 auto;
}
.kzgame-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: var(--kz-accent);
  transition: width 0.32s ease;
}

/* ------------------------------------------------------------
   7. 对话框
------------------------------------------------------------ */
.kzgame-dialogue {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  width: var(--kz-band-width, var(--kz-dialogue-width, min(72rem, 95vw)));
  max-width: calc(100% - var(--kz-dialogue-side, 1.6rem));
  margin: 0 auto 1rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  background: var(--kz-panel);
  background: color-mix(in srgb, var(--kz-panel) calc(var(--kz-panel-opacity) * 100%), transparent);
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 10.5rem;
  cursor: pointer;
}
.kzgame-dialogue[hidden] { display: none; }

.kzgame--dlg-top .kzgame-dialogue { margin-top: 0.5rem; }
.kzgame--dlg-center .kzgame-dialogue { margin-bottom: 0.9rem; }

.kzgame--align-center .kzgame-dialogue-body { text-align: center; }

.kzgame-dialogue-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kzgame-dialogue.has-avatar.kzgame--avatar-right { flex-direction: row-reverse; }
.kzgame-dialogue.has-avatar.kzgame--avatar-none .kzgame-dialogue-avatar { display: none; }

.kzgame-dialogue-avatar {
  flex: 0 0 auto;
  width: 5.2rem;
  height: 5.2rem;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--kz-radius) - 3px);
  border: 1px solid var(--kz-border);
  background: rgba(0, 0, 0, 0.35);
}
.kzgame-dialogue-avatar[hidden] { display: none; }

.kzgame-speaker {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--kz-speaker);
  font-weight: 700;
  font-size: 0.98em;
  letter-spacing: 0.02em;
}
.kzgame-speaker[hidden] { display: none; }
.kzgame-speaker-name { min-width: 0; word-break: break-word; }
/* 「显示人物身份」勾上时，说话人右边这一小块小字 */
.kzgame-speaker-role {
  margin-left: auto;
  flex: none;
  font-weight: 400;
  font-size: 0.74em;
  letter-spacing: 0.04em;
  color: var(--kz-text-dim);
  white-space: nowrap;
}
.kzgame-speaker-role[hidden] { display: none; }

.kzgame-text {
  font-family: var(--kz-font-dialogue);
  font-size: var(--kz-font-size);
  line-height: var(--kz-line-height);
  letter-spacing: var(--kz-letter-spacing);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-height: 1.6em;
}

.kzgame-text-html img,
.kzgame-text-html table {
  max-width: 100%;
}
.kzgame-text-html table {
  border-collapse: collapse;
  margin: 0.4rem 0;
}
.kzgame-text-html th,
.kzgame-text-html td {
  border: 1px solid var(--kz-border);
  padding: 0.25rem 0.5rem;
}
.kzgame-text-html a { color: var(--kz-accent2); }
.kzgame-text-html blockquote {
  margin: 0.4rem 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--kz-border);
  color: var(--kz-text-dim);
}

/* 语气 */
.kzgame-tone-shout { font-weight: 800; letter-spacing: 0.04em; }
.kzgame-tone-whisper { opacity: 0.78; font-style: italic; }
.kzgame-tone-think { font-style: italic; color: var(--kz-text-dim); }
.kzgame-tone-system { color: var(--kz-accent2); }

/* 旁白样式 */
.kzgame-nar-narration { color: var(--kz-text); }
.kzgame-nar-system {
  color: var(--kz-accent2);
  border-left: 3px solid var(--kz-accent2);
  padding-left: 0.7rem;
}
.kzgame-nar-tip { color: var(--kz-success); }
.kzgame-nar-warning { color: var(--kz-warning); }
.kzgame-nar-quote {
  font-style: italic;
  color: var(--kz-text-dim);
  border-left: 3px solid var(--kz-border);
  padding-left: 0.8rem;
}

.kzgame-subtitle {
  margin-top: 0.25rem;
  font-size: 0.78em;
  color: var(--kz-text-dim);
  letter-spacing: 0.08em;
  animation: kz-blink 2.4s ease-in-out infinite;
  user-select: none;
}
.kzgame-subtitle[hidden] { display: none; }
@keyframes kz-blink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ------------------------------------------------------------
   「不允许打断出场动画」：打字机播放期间点击 / 空格无效。
   光标改成普通箭头（别暗示可以点），句尾挂一个会闪的打字光标，
   提示语在引擎里换成「出场动画播放中，请稍候…」。
------------------------------------------------------------ */
.kzgame-dialogue.is-typing-locked { cursor: default; }
.kzgame-dialogue.is-typing-locked .kzgame-text::after {
  content: '▌';
  margin-left: 0.08em;
  opacity: 0.8;
  animation: kz-caret 0.9s steps(1) infinite;
}
@keyframes kz-caret {
  0%, 49% { opacity: 0.8; }
  50%, 100% { opacity: 0.12; }
}

/* ------------------------------------------------------------
   「限时对话」的停留进度条：打完字（或点击显示全文）之后开始缩短，
   走完自动进入下一事件行。玩家自己点一下就立刻继续，进度条随之消失。
------------------------------------------------------------ */
.kzgame-auto-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 calc(var(--kz-radius) - 1px) calc(var(--kz-radius) - 1px);
  background: color-mix(in srgb, var(--kz-accent) 18%, transparent);
}
.kzgame-auto-bar[hidden] { display: none; }
.kzgame-auto-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--kz-accent), var(--kz-accent2));
}
.kzgame-auto-bar.is-running .kzgame-auto-bar-fill {
  animation: kz-auto-shrink var(--kz-auto-dur, 2500ms) linear forwards;
}
@keyframes kz-auto-shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .kzgame-auto-bar.is-running .kzgame-auto-bar-fill { animation: none; }
  .kzgame-dialogue.is-typing-locked .kzgame-text::after { animation: none; }
}

.kzgame-input-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.kzgame-input-row[hidden] { display: none; }

.kzgame-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.95em;
  color: var(--kz-text);
  background: var(--kz-choice-bg);
  border: 1px solid var(--kz-border);
  border-radius: calc(var(--kz-radius) - 4px);
  padding: 0.55rem 0.75rem;
  outline: none;
}
.kzgame-input:focus { border-color: var(--kz-accent); }

/* ------------------------------------------------------------
   8. 选项
------------------------------------------------------------ */
.kzgame-choices {
  position: relative;
  z-index: 5;
  /* 跟对话框同宽：选项和对话框对齐，整块看起来是「中间那一块」。
     --kz-band-width 是留给「页面级」的收口变量（见 games/game.html 里的 <style>）。 */
  width: var(--kz-band-width, var(--kz-choices-width, var(--kz-dialogue-width, min(72rem, 95vw))));
  max-width: calc(100% - var(--kz-dialogue-side, 1.6rem));
  margin: 0 auto 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.kzgame-choices[hidden] { display: none; }

.kzgame-choices-prompt {
  margin-bottom: 0.2rem;
  font-size: 0.95em;
  color: var(--kz-text-dim);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   8.1 倒计时（QTE / 限时选择共用）
   ------------------------------------------------------------
   两种显示方式由引擎按 data-mode 决定渲染哪些：
     bar   → .kzgame-timebar（一根会缩短的横条）
     digit → .kzgame-timedigit（读秒数字）
   剩余不足三成时加 is-urgent，变红 + 轻微脉动。
   ============================================================ */
.kzgame-countdown {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}

.kzgame-countdown[data-mode='bar'] { justify-content: center; }
.kzgame-countdown[data-mode='digit'] { justify-content: center; }
.kzgame-countdown[data-mode='both'] { justify-content: space-between; }

.kzgame-timebar {
  position: relative;
  flex: 1 1 auto;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--kz-border);
  overflow: hidden;
}

.kzgame-timebar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kz-accent2), var(--kz-accent));
  transition: width 0.06s linear, background 0.2s ease;
}

.kzgame-timedigit {
  flex: none;
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-size: 1.05em;
  font-weight: 700;
  color: var(--kz-text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.kzgame-countdown.is-urgent .kzgame-timebar-fill {
  background: linear-gradient(90deg, #ff6b6b, var(--kz-danger, #e5484d));
}
.kzgame-countdown.is-urgent .kzgame-timedigit {
  color: var(--kz-danger, #e5484d);
  animation: kzgame-timepulse 0.5s ease-in-out infinite;
}

@keyframes kzgame-timepulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .kzgame-countdown.is-urgent .kzgame-timedigit { animation: none; }
}

/* ============================================================
   8.2 QTE（限时按键）
   ============================================================ */
.kzgame-qte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  background: var(--kz-choice-bg);
  box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.9);
}

.kzgame-qte-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.kzgame-qte-key {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.5rem;
  border: 1px solid var(--kz-border);
  border-bottom-width: 3px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.14);
  color: var(--kz-text-dim);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

/* 已经按对的：变亮、下沉一点（像键真的被按下去） */
.kzgame-qte-key.is-done {
  background: var(--kz-accent);
  border-color: var(--kz-accent);
  color: #fff;
  border-bottom-width: 1px;
  transform: translateY(2px);
}

/* 下一个该按的：高亮 + 呼吸 */
.kzgame-qte-key.is-next {
  border-color: var(--kz-accent2);
  color: var(--kz-text);
  background: rgba(127, 127, 127, 0.28);
  animation: kzgame-keyblink 0.9s ease-in-out infinite;
}

@keyframes kzgame-keyblink {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.kzgame-qte-tip {
  font-size: 0.8em;
  color: var(--kz-text-dim);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .kzgame-qte-key.is-next { animation: none; }
}

.kzgame-choice {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1em;
  line-height: 1.55;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  background: var(--kz-choice-bg);
  color: var(--kz-choice-text);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.9);
}
.kzgame-choice:hover:not(:disabled) {
  background: var(--kz-choice-hover);
  border-color: var(--kz-accent);
  transform: translateX(3px);
}
.kzgame-choice:focus-visible {
  outline: 2px solid var(--kz-accent);
  outline-offset: 2px;
}
.kzgame-choice:disabled,
.kzgame-choice.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.kzgame-choice-key {
  flex: 0 0 auto;
  min-width: 1.35em;
  height: 1.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--kz-border);
  color: var(--kz-accent);
  font-size: 0.78em;
  font-weight: 700;
}
.kzgame-choice-text {
  flex: 1 1 auto;
  min-width: 0;
}
.kzgame-choice-hint {
  flex: 0 0 auto;
  font-size: 0.78em;
  color: var(--kz-text-dim);
  align-self: center;
}

/* ------------------------------------------------------------
   9. 飘字提示
------------------------------------------------------------ */
.kzgame-toasts {
  position: absolute;
  top: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
  width: max-content;
  max-width: 92vw;
}
.kzgame-toast {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--kz-border);
  background: rgba(8, 10, 14, 0.82);
  color: var(--kz-text);
  font-size: 0.86em;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.9);
  animation: kz-toast-in 0.24s ease both;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes kz-toast-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   10. 通用按钮
------------------------------------------------------------ */
.kzgame-btn {
  appearance: none;
  font: inherit;
  font-size: 0.92em;
  line-height: 1.2;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--kz-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--kz-text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.kzgame-btn:hover {
  border-color: var(--kz-accent);
  color: var(--kz-accent);
  transform: translateY(-1px);
}
.kzgame-btn:focus-visible {
  outline: 2px solid var(--kz-accent);
  outline-offset: 2px;
}
.kzgame-btn--primary {
  background: var(--kz-accent);
  border-color: var(--kz-accent);
  color: #10141c;
  font-weight: 700;
}
.kzgame-btn--primary:hover {
  color: #10141c;
  filter: brightness(1.08);
}
.kzgame-btn--ghost { background: transparent; color: var(--kz-text-dim); }
.kzgame-btn--danger {
  border-color: color-mix(in srgb, var(--kz-danger) 60%, var(--kz-border));
  color: var(--kz-danger);
  background: transparent;
}
.kzgame-btn--danger:hover {
  border-color: var(--kz-danger);
  color: #fff;
  background: var(--kz-danger);
}
.kzgame-btn--small {
  font-size: 0.82em;
  padding: 0.38rem 0.72rem;
}

/* ------------------------------------------------------------
   11. 覆盖层与面板
------------------------------------------------------------ */
.kzgame-overlays {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.kzgame-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: rgba(4, 6, 10, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: auto;
  pointer-events: auto;
  animation: kz-overlay-in 0.18s ease both;
}
@keyframes kz-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kzgame-panel {
  width: min(44rem, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.05rem 1.15rem 1.2rem;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  background: var(--kz-panel);
  color: var(--kz-text);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.95);
}

.kzgame-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.kzgame-panel-title {
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.kzgame-panel-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}
.kzgame-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: auto;
  min-height: 0;
  padding-right: 0.15rem;
}
.kzgame-panel-foot {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--kz-border);
}
.kzgame-panel-sub {
  font-size: 0.88em;
  color: var(--kz-text-dim);
}
.kzgame-note {
  font-size: 0.82em;
  color: var(--kz-text-dim);
  line-height: 1.7;
}

.kzgame-tab {
  appearance: none;
  font: inherit;
  font-size: 0.85em;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--kz-border);
  background: transparent;
  color: var(--kz-text-dim);
  cursor: pointer;
}
.kzgame-tab.is-active {
  border-color: var(--kz-accent);
  color: var(--kz-accent);
  background: color-mix(in srgb, var(--kz-accent) 14%, transparent);
}

/* 滚动条 */
.kzgame-panel ::-webkit-scrollbar,
.kzgame-panel-body::-webkit-scrollbar { width: 8px; }
.kzgame-panel ::-webkit-scrollbar-thumb {
  background: var(--kz-border);
  border-radius: 999px;
}

/* ------------------------------------------------------------
   12. 标题画面
------------------------------------------------------------ */
.kzgame-overlay--title { background: rgba(4, 6, 10, 0.5); }
.kzgame-panel.kzgame-title {
  width: min(46rem, 94vw);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: center;
  align-items: center;
}
.kzgame-title-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}
.kzgame-title-icon {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}
.kzgame-title-cover {
  width: min(26rem, 78vw);
  max-height: 38vh;
  object-fit: cover;
  border-radius: var(--kz-radius);
  border: 1px solid var(--kz-border);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.95);
}
.kzgame-title-cn {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}
.kzgame-title-en {
  font-size: clamp(0.68rem, 1.6vw, 0.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--kz-text-dim);
}
.kzgame-title-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.2rem;
}
.kzgame-chip {
  font-size: 0.76em;
  padding: 0.16rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--kz-border);
  color: var(--kz-text-dim);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.kzgame-title-desc {
  margin: 0.3rem 0 0;
  max-width: 36rem;
  font-size: 0.95em;
  line-height: 1.85;
  color: var(--kz-text-dim);
  text-align: left;
}
.kzgame-title-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.9rem;
}
.kzgame-title-tip {
  font-size: 0.8em;
  color: var(--kz-text-dim);
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------
   13. 存档 / 读档
------------------------------------------------------------ */
.kzgame-slot {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--kz-border);
  border-radius: calc(var(--kz-radius) - 4px);
  background: var(--kz-choice-bg);
}
.kzgame-slot-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kzgame-slot-head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.kzgame-slot-name { font-weight: 700; font-size: 0.92em; }
.kzgame-slot-time { font-size: 0.76em; color: var(--kz-text-dim); }
.kzgame-slot-group { font-size: 0.8em; color: var(--kz-accent); }
.kzgame-slot-preview {
  font-size: 0.8em;
  color: var(--kz-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kzgame-slot-actions {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   14. 回顾
------------------------------------------------------------ */
.kzgame-log {
  max-height: 58vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.3rem;
}
.kzgame-log-item {
  padding: 0.45rem 0.6rem;
  border-left: 2px solid var(--kz-border);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.03);
}
.kzgame-log-choice { border-left-color: var(--kz-accent); background: rgba(255, 255, 255, 0.06); }
.kzgame-log-speaker {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--kz-speaker);
  margin-bottom: 0.12rem;
}
.kzgame-log-text {
  font-size: 0.9em;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.kzgame-log-html { font-size: 0.9em; line-height: 1.8; }
.kzgame-log-empty {
  padding: 1.4rem 0;
  text-align: center;
  color: var(--kz-text-dim);
  font-size: 0.9em;
}

/* ------------------------------------------------------------
   15. 设置
------------------------------------------------------------ */
.kzgame-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.kzgame-field-label {
  font-size: 0.86em;
  color: var(--kz-text-dim);
}
.kzgame-range {
  width: 100%;
  accent-color: var(--kz-accent);
  background: transparent;
}
.kzgame-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92em;
  cursor: pointer;
  user-select: none;
}
.kzgame-switch input { accent-color: var(--kz-accent); width: 1rem; height: 1rem; }

/* ------------------------------------------------------------
   16. 结局收集 / 关于
------------------------------------------------------------ */
.kzgame-ending-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kzgame-ending-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--kz-border);
  border-radius: calc(var(--kz-radius) - 4px);
  background: var(--kz-choice-bg);
  opacity: 0.7;
}
.kzgame-ending-item.is-open {
  opacity: 1;
  border-color: color-mix(in srgb, var(--kz-accent) 45%, var(--kz-border));
}
.kzgame-ending-icon { font-size: 1.25em; line-height: 1.35; }
.kzgame-ending-info { min-width: 0; }
.kzgame-ending-name { font-size: 0.94em; font-weight: 700; }
.kzgame-ending-desc { font-size: 0.82em; color: var(--kz-text-dim); line-height: 1.7; }
.kzgame-ending-kind { font-size: 0.74em; color: var(--kz-text-dim); letter-spacing: 0.08em; margin-top: 0.1rem; }

.kzgame-about { display: flex; flex-direction: column; gap: 0.3rem; }
.kzgame-about-row { display: flex; gap: 0.7rem; font-size: 0.88em; }
.kzgame-about-key { flex: 0 0 4.5rem; color: var(--kz-text-dim); }
.kzgame-about-val { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.kzgame-about-desc,
.kzgame-about-note {
  margin: 0.5rem 0 0;
  font-size: 0.9em;
  line-height: 1.85;
  color: var(--kz-text-dim);
  user-select: text;
}
.kzgame-about-note {
  padding-left: 0.7rem;
  border-left: 2px solid var(--kz-border);
}

/* ------------------------------------------------------------
   17. 结局面板
------------------------------------------------------------ */
.kzgame-overlay--ending { background: rgba(2, 3, 6, 0.86); }
.kzgame-panel.kzgame-ending {
  width: min(40rem, 94vw);
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  align-items: center;
  padding: 0;
}
.kzgame-ending-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  animation: kz-rise 0.4s ease both;
}
@keyframes kz-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.kzgame-ending-badge {
  font-size: 0.82em;
  letter-spacing: 0.16em;
  padding: 0.28rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--kz-border);
  color: var(--kz-text-dim);
}
.kzgame-ending-badge--good { color: var(--kz-success); border-color: color-mix(in srgb, var(--kz-success) 60%, transparent); }
.kzgame-ending-badge--bad { color: var(--kz-danger); border-color: color-mix(in srgb, var(--kz-danger) 60%, transparent); }
.kzgame-ending-badge--hidden { color: var(--kz-accent2); border-color: color-mix(in srgb, var(--kz-accent2) 60%, transparent); }
.kzgame-ending-title {
  margin: 0;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  letter-spacing: 0.06em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}
.kzgame-ending-text {
  margin: 0;
  max-width: 34rem;
  font-family: var(--kz-font-dialogue);
  font-size: 0.98em;
  line-height: var(--kz-line-height);
  color: var(--kz-text);
  white-space: pre-wrap;
  user-select: text;
}
.kzgame-ending-stats {
  width: min(30rem, 90vw);
  margin-top: 0.4rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.kzgame-ending-stat {
  display: flex;
  gap: 0.7rem;
  font-size: 0.85em;
}
.kzgame-ending-stat-k { flex: 0 0 5.5rem; color: var(--kz-text-dim); text-align: left; }
.kzgame-ending-stat-v { flex: 1 1 auto; text-align: left; word-break: break-word; }

/* ------------------------------------------------------------
   11c. 章节开幕表演（「章节开幕表演」事件）
   全屏动画 + 章节名称 / 英文名 / 描述；四种样式靠 class 区分
------------------------------------------------------------ */
.kzgame-overlay--chapter { background: rgba(3, 4, 8, 0.94); }
.kzgame-panel.kzgame-chapter {
  position: relative;
  width: min(46rem, 94vw);
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  align-items: center;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.kzgame-chapter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  position: relative;
  z-index: 1;
}
.kzgame-chapter-label {
  font-size: 0.8em;
  letter-spacing: 0.34em;
  color: var(--kz-accent);
  opacity: 0.95;
}
.kzgame-chapter-title {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: 0.1em;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.9);
}
.kzgame-chapter-title-en {
  font-size: 0.86em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kz-text-dim);
}
.kzgame-chapter-desc {
  margin: 0.4rem 0 0;
  max-width: 34rem;
  min-height: 2.4em;
  font-family: var(--kz-font-dialogue);
  font-size: 1em;
  line-height: var(--kz-line-height);
  color: var(--kz-text);
  white-space: pre-wrap;
  opacity: 0.92;
}
.kzgame-chapter-hint {
  margin-top: 1rem;
  font-size: 0.72em;
  letter-spacing: 0.16em;
  color: var(--kz-text-dim);
  opacity: 0.5;
  animation: kz-chapter-hint 2.2s ease-in-out infinite;
}
@keyframes kz-chapter-hint {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.7; }
}
/* 一条会从中间向两边拉开的细线，四种样式公用的「开幕感」 */
.kzgame-chapter-inner::before,
.kzgame-chapter-inner::after {
  content: '';
  display: block;
  width: 5rem;
  height: 1px;
  background: var(--kz-accent);
  opacity: 0.55;
  margin: 0.15rem 0;
}

/* ---- 幕布拉开 ---- */
.kzgame-chapter-curtain { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.kzgame-chapter-half {
  position: absolute;
  top: 0; bottom: 0;
  width: 51%;
  background: #05060a;
  border-color: var(--kz-border);
}
.kzgame-chapter-half--l { left: 0; animation: kz-chapter-open-l 1.1s cubic-bezier(.6,.02,.2,1) 0.35s both; }
.kzgame-chapter-half--r { right: 0; animation: kz-chapter-open-r 1.1s cubic-bezier(.6,.02,.2,1) 0.35s both; }
@keyframes kz-chapter-open-l { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes kz-chapter-open-r { from { transform: translateX(0); } to { transform: translateX(102%); } }
.kzgame-chapter--curtain .kzgame-chapter-inner { animation: kz-rise 0.7s ease 0.9s both; }

/* ---- 缓缓淡入 ---- */
.kzgame-chapter--fade .kzgame-chapter-inner { animation: kz-chapter-fade 1.8s ease both; }
.kzgame-chapter--fade .kzgame-chapter-desc { animation: kz-chapter-fade 2.6s ease 0.4s both; }
@keyframes kz-chapter-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- 打字机（逐字由 JS 打，这里只做容器的淡入） ---- */
.kzgame-chapter--typewriter .kzgame-chapter-inner { animation: kz-rise 0.5s ease both; }
.kzgame-chapter--typewriter .kzgame-chapter-desc {
  text-align: left;
  border-left: 2px solid var(--kz-accent);
  padding-left: 0.9rem;
  min-height: 4.4em;
}

/* ---- 卷轴上卷 ---- */
.kzgame-chapter--scroll .kzgame-chapter-inner { animation: kz-chapter-scroll 1.4s cubic-bezier(.2,.7,.2,1) both; }
.kzgame-chapter--scroll .kzgame-chapter-desc { max-height: 40vh; overflow: hidden; }
@keyframes kz-chapter-scroll {
  from { opacity: 0; transform: translateY(42%) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   11b. 死亡画面（「设定死亡」事件）
   比结局更"冷"：整体压一层暗红，死亡原因单独一块高亮。
------------------------------------------------------------ */
.kzgame-overlay--death { background: rgba(6, 2, 3, 0.9); }
.kzgame-panel.kzgame-death {
  width: min(38rem, 94vw);
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  align-items: center;
  padding: 0;
}
.kzgame-death-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  animation: kz-rise 0.4s ease both;
}
.kzgame-death-icon {
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.9));
}
.kzgame-death-title {
  margin: 0;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  letter-spacing: 0.1em;
  color: var(--kz-danger);
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.9);
}
.kzgame-death-text {
  margin: 0;
  max-width: 32rem;
  font-family: var(--kz-font-dialogue);
  font-size: 0.98em;
  line-height: var(--kz-line-height);
  color: var(--kz-text-dim);
  white-space: pre-wrap;
  user-select: text;
}
/* 死亡原因：整块描边 + 底色，是这一屏里最该被看见的东西 */
.kzgame-death-cause {
  width: 100%;
  max-width: 34rem;
  text-align: left;
  padding: 0.85rem 1.05rem;
  border-radius: var(--kz-radius);
  border: 1px solid color-mix(in srgb, var(--kz-danger) 55%, transparent);
  background: color-mix(in srgb, var(--kz-danger) 12%, transparent);
}
.kzgame-death-cause-head {
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--kz-danger);
  margin-bottom: 0.35rem;
}
.kzgame-death-cause-text {
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.65;
  color: var(--kz-text);
  word-break: break-word;
}
.kzgame-death-cause-detail {
  margin-top: 0.4rem;
  font-size: 0.86em;
  line-height: 1.8;
  color: var(--kz-text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------------------------------
   18. 确认框 / 致命错误
------------------------------------------------------------ */
.kzgame-overlay--confirm { z-index: 50; }
.kzgame-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
  min-width: min(22rem, 80vw);
}
.kzgame-confirm-title { font-size: 1.05em; font-weight: 700; }
.kzgame-confirm-text { font-size: 0.92em; line-height: 1.8; color: var(--kz-text-dim); }

/* ------------------------------------------------------------
   19. 加载失败 / 提示（games/game.html 里的 #kz-game-hint 也走这一套）
------------------------------------------------------------ */
.kzgame-hint {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: #0e1116;
  font-family: 'Segoe UI Variable', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #e8ecf3;
}
.kzgame-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: #0e1116;
  color: #e8ecf3;
  font-family: 'Segoe UI Variable', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.kzgame-hint-panel {
  width: min(30rem, 92vw);
  padding: 1.8rem 1.5rem;
  text-align: center;
  border: 1px solid #2a3242;
  border-radius: 1rem;
  background: #161b23;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}
.kzgame-hint-icon { font-size: 2.2rem; margin-bottom: 0.6rem; }
.kzgame-hint-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; }
.kzgame-hint-text {
  font-size: 0.9rem;
  line-height: 1.85;
  color: #9aa6b8;
  word-break: break-word;
}
.kzgame-hint-text code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.85em;
}
.kzgame-hint-text a { color: #5b8def; }
.kzgame-hint-btn {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #2a3242;
  color: #e8ecf3;
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.kzgame-hint-btn:hover { border-color: #e0a458; color: #e0a458; }

.kzgame-noscript {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: #0e1116;
  color: #e8ecf3;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.9;
}

/* ------------------------------------------------------------
   20. 窄屏 / 移动端
------------------------------------------------------------ */
@media (max-width: 680px) {
  .kzgame {
    --kz-dialogue-width: 94vw;
  }
  .kzgame-topbar {
    padding: 0.35rem 0.5rem 0.15rem;
    gap: 0.35rem;
  }
  .kzgame-tool {
    font-size: 11px;
    padding: 0.38rem 0.5rem;
  }
  .kzgame-progress { display: none; }
  .kzgame-hud {
    font-size: 12.5px;
    padding: 0.35rem 0.55rem;
    gap: 0.35rem;
  }
  .kzgame-hud-slot { gap: 0.4rem; }
  .kzgame-bar-track { width: 72px; }
  .kzgame-dialogue {
    max-width: calc(100% - 0.9rem);
    width: calc(100% - 0.9rem);
    padding: 0.75rem 0.85rem 0.9rem;
    gap: 0.6rem;
    min-height: 7rem;
    margin-bottom: 0.5rem;
  }
  .kzgame-dialogue-avatar { width: 3.6rem; height: 3.6rem; }
  .kzgame-choices {
    width: calc(100% - 0.9rem);
    max-width: calc(100% - 0.9rem);
  }
  .kzgame-choice { padding: 0.6rem 0.7rem; font-size: 0.94em; }
  .kzgame-choice-hint { display: none; }
  .kzgame-panel {
    width: calc(100vw - 1rem);
    max-height: 92vh;
    padding: 0.9rem 0.85rem 1rem;
  }
  .kzgame-slot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .kzgame-slot-actions { justify-content: flex-end; }
  .kzgame-toasts { top: 3.4rem; }
  .kzgame-title-desc { text-align: left; }
}

@media (max-width: 400px) {
  .kzgame-tool { font-size: 10px; padding: 0.34rem 0.42rem; }
  .kzgame-ending-stat-k { flex: 0 0 4.2rem; }
}

/* 尊重系统的「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .kzgame-world.is-shaking { animation: none; }
  .kzgame-flash.is-on { animation-duration: 200ms; }
  .kzgame-sprite,
  .kzgame-choice,
  .kzgame-btn { transition: none; }
  .kzgame-subtitle { animation: none; }
}

/* ============================================================
   17. 文档类旁白：「跳出播放框」的那一层容器
   ------------------------------------------------------------
   这一行不走进对话框，而是盖一层自己的容器，把文字摆到
   信纸 / 手机屏幕 / 报纸 / 票据上。
   三种用法共用同一套样式：
     · 游戏里剧情弹出来（.kzgame-doc-stage → .kzgame-doc-panel → .kzgame-doc）
     · 「文档和资料」里重看（.kzgame-doc-view → .kzgame-doc）
     · 编辑器里点「预览」（也是 .kzgame-doc-stage）
   所以这里只写「容器长什么样」，不写它在哪个场景里。

   外观变量（作者在事件行里能调的四个 + 尺寸）：
     --kz-doc-accent   主题色（标题、强调线、印章）
     --kz-doc-surface  纸面 / 屏面色
     --kz-doc-w        宽度（不填按样式自己的宽度）
     --kz-doc-min-h    最小高度
     --kz-doc-radius   圆角
   ============================================================ */

.kzgame-doc-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2.6rem);
  overflow: auto;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(3px);
  animation: kz-doc-stage-in 0.24s ease-out both;
  font-family: var(--kz-font);
  color: var(--kz-text);
}
@keyframes kz-doc-stage-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kzgame-doc-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 100%;
  animation: kz-doc-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
@keyframes kz-doc-pop {
  from { opacity: 0; transform: translateY(1.4rem) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.kzgame-doc-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.kzgame-doc-close {
  min-width: 8rem;
  font-size: 0.95em;
}

/* ---- 容器本体 ---- */
.kzgame-doc {
  --kz-doc-accent: var(--kz-accent);
  --kz-doc-surface: #f4efe2;
  --kz-doc-radius: 0px;
  box-sizing: border-box;
  position: relative;
  width: var(--kz-doc-w, 42rem);
  max-width: 100%;
  min-height: var(--kz-doc-min-h, 0);
  max-height: min(84vh, 100%);
  overflow: auto;
  border-radius: var(--kz-doc-radius);
  color: #23201a;
  background: var(--kz-doc-surface);
  box-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
  font-size: 1rem;
  line-height: 1.85;
  text-align: left;
  animation: kz-doc-in 0.3s ease-out both;
}
@keyframes kz-doc-in {
  from { opacity: 0; transform: translateY(0.9rem); }
  to { opacity: 1; transform: translateY(0); }
}
.kzgame-doc ul { margin: 0; padding: 0; list-style: none; }
.kzgame-doc p { margin: 0 0 0.55em; }
.kzgame-doc-media {
  display: block;
  max-width: 100%;
  max-height: 46vh;
  object-fit: contain;
  margin: 0.6rem auto;
}

/* 顶部一条：左标签 / 右时间戳 —— 除了便签之外都用它 */
.kzgame-doc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.3rem 0.5rem;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: #8a7f6a;
}
.kzgame-doc-head--bar,
.kzgame-doc-head--ticket,
.kzgame-doc-head--paper {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.kzgame-doc-head--ticket { align-items: center; }
.kzgame-doc-head--ticket .kzgame-doc-kicker,
.kzgame-doc-head--ticket .kzgame-doc-ticket-dest {
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1e1a14;
}
.kzgame-doc-ticket-arrow { font-size: 1.2em; opacity: 0.6; padding: 0 0.3rem; }
.kzgame-doc-stamp { font-variant-numeric: tabular-nums; }
.kzgame-doc-kicker { font-weight: 700; }

.kzgame-doc-body { padding: 1rem 1.4rem 1.3rem; }
.kzgame-doc-title {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  font-size: 1.12em;
  font-weight: 800;
  color: #1b1811;
}
.kzgame-doc-title-icon { font-size: 0.95em; }
.kzgame-doc-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.kzgame-doc-foot { padding: 0 1.4rem 1.2rem; }
.kzgame-doc-sign {
  text-align: right;
  font-size: 0.98em;
  color: #4a4234;
}
.kzgame-doc-empty {
  color: #a09680;
  font-style: italic;
}

/* 邮件 / 票据那种「标签 : 值」的元信息行 */
.kzgame-doc-meta {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.045);
  font-size: 0.9em;
}
.kzgame-doc-row {
  display: flex;
  gap: 0.7rem;
  padding: 0.12rem 0;
}
.kzgame-doc-row-label {
  flex: 0 0 4.4em;
  color: #8a7f6a;
}
.kzgame-doc-row-value {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  color: #2b261d;
}

/* ---------------- 手写信 / 便条 ---------------- */
.kzgame-doc--letter {
  --kz-doc-surface: #f6f1e3;
  background:
    repeating-linear-gradient(180deg, rgba(120, 96, 56, 0.05) 0 1px, transparent 1px 2.05rem),
    radial-gradient(120% 90% at 12% 6%, rgba(255, 255, 255, 0.85), transparent 60%),
    var(--kz-doc-surface);
  border: 1px solid rgba(120, 96, 56, 0.28);
  font-family: 'Kaiti SC', 'KaiTi', 'STKaiti', 'Songti SC', 'SimSun', serif;
}
.kzgame-doc--letter .kzgame-doc-body { padding-top: 0.6rem; }
.kzgame-doc-salute {
  margin-bottom: 0.7rem;
  font-size: 1.06em;
  font-weight: 700;
  color: #33291a;
}
.kzgame-doc--letter .kzgame-doc-text { text-indent: 2em; }
.kzgame-doc--letter .kzgame-doc-title {
  font-size: 1.2em;
  justify-content: center;
  border-bottom: 1px dashed rgba(120, 96, 56, 0.3);
  padding-bottom: 0.45rem;
}
/* 信纸右上角一枚淡淡的邮戳 */
.kzgame-doc--letter::after {
  content: '';
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  width: 3.2rem;
  height: 3.2rem;
  border: 2px dashed rgba(150, 60, 60, 0.28);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------------- 手机短信 / 聊天记录 ---------------- */
.kzgame-doc--message {
  --kz-doc-surface: #10141b;
  width: var(--kz-doc-w, 25rem);
  color: #e6ebf3;
  background: linear-gradient(180deg, #161c26, var(--kz-doc-surface));
  border: 1px solid #2b3442;
  border-radius: var(--kz-doc-radius, 1.4rem);
  box-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  font-family: var(--kz-font);
}
.kzgame-doc--message .kzgame-doc-head {
  color: #8fa3c8;
  padding: 0.8rem 1.1rem 0.65rem;
  border-bottom: 1px solid #232c3a;
}
.kzgame-doc--message .kzgame-doc-body { padding: 0.9rem 0.95rem 1.1rem; }
.kzgame-doc-thread { display: flex; flex-direction: column; gap: 0.55rem; }
.kzgame-doc-thread-title {
  align-self: center;
  margin-bottom: 0.2rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78em;
  color: #9fb0cc;
}
.kzgame-doc-thread-gap { height: 0.35rem; }
.kzgame-doc-bubble {
  max-width: 78%;
  padding: 0.5rem 0.75rem 0.35rem;
  border-radius: 1rem;
  font-size: 0.96em;
  line-height: 1.6;
  word-break: break-word;
}
.kzgame-doc-bubble-text { white-space: pre-wrap; }
.kzgame-doc-bubble-who {
  margin-top: 0.15rem;
  font-size: 0.7em;
  opacity: 0.55;
  text-align: right;
}
.kzgame-doc-bubble.is-them {
  align-self: flex-start;
  background: #222c3b;
  border-bottom-left-radius: 0.3rem;
}
.kzgame-doc-bubble.is-me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--kz-doc-accent), color-mix(in srgb, var(--kz-doc-accent) 62%, #2b6cb0));
  color: #0c1014;
  border-bottom-right-radius: 0.3rem;
}
.kzgame-doc-bubble.is-me .kzgame-doc-bubble-who { text-align: left; }

/* ---------------- 邮件 ---------------- */
.kzgame-doc--email {
  --kz-doc-surface: #fbfbfd;
  background: var(--kz-doc-surface);
  border: 1px solid #d9dde6;
  border-top: 4px solid var(--kz-doc-accent);
  color: #23262d;
  font-family: var(--kz-font);
}
.kzgame-doc--email .kzgame-doc-head { color: #7b8496; }
.kzgame-doc--email .kzgame-doc-title { font-size: 1.24em; }
.kzgame-doc--email .kzgame-doc-meta { background: #f2f4f9; }

/* ---------------- 电子屏幕 / 终端 ---------------- */
.kzgame-doc--terminal {
  --kz-doc-surface: #060d09;
  --kz-doc-accent: #37e07a;
  background:
    repeating-linear-gradient(180deg, rgba(55, 224, 122, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 0%, rgba(55, 224, 122, 0.09), transparent 70%),
    var(--kz-doc-surface);
  border: 1px solid #1d5c37;
  color: #c9ffd9;
  font-family: 'Cascadia Mono', 'Consolas', 'SFMono-Regular', 'Menlo', monospace;
  font-size: 0.95rem;
  text-shadow: 0 0 0.35rem rgba(55, 224, 122, 0.45);
}
.kzgame-doc--terminal .kzgame-doc-head { color: #57b57e; border-bottom-color: #1d5c37; }
.kzgame-doc--terminal .kzgame-doc-head--bar .kzgame-doc-kicker { letter-spacing: 0.2em; color: #2f7a4f; }
.kzgame-doc--terminal .kzgame-doc-title { color: #7dffab; }
.kzgame-doc-screen { line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.kzgame-doc-prompt { color: #57b57e; }
.kzgame-doc-caret {
  display: inline-block;
  margin-left: 0.15em;
  animation: kz-doc-caret 1s steps(1) infinite;
}
@keyframes kz-doc-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.1; }
}

/* ---------------- 旧报纸 / 剪报 ---------------- */
.kzgame-doc--newspaper {
  --kz-doc-surface: #efe6d0;
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(255, 255, 255, 0.6), transparent 55%),
    var(--kz-doc-surface);
  border: 1px solid rgba(90, 72, 40, 0.35);
  color: #2a2419;
  font-family: 'Songti SC', 'SimSun', 'STSong', serif;
}
.kzgame-doc-head--paper {
  display: block;
  text-align: center;
  padding: 0.9rem 1.2rem 0.5rem;
}
.kzgame-doc-masthead {
  font-size: 1.9em;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: #22201a;
  border-bottom: 3px double rgba(60, 50, 30, 0.5);
  padding-bottom: 0.3rem;
}
.kzgame-doc-paperline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  font-size: 0.75em;
  color: #6d6349;
}
.kzgame-doc-headline {
  margin: 0 0 0.7rem;
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.04em;
  color: #16140f;
}
.kzgame-doc-columns { column-gap: 1.4rem; column-rule: 1px solid rgba(60, 50, 30, 0.25); }
.kzgame-doc-columns--1 { column-count: 1; }
.kzgame-doc-columns--2 { column-count: 2; }
.kzgame-doc-columns--3 { column-count: 3; }
.kzgame-doc-paragraph {
  font-size: 0.94em;
  line-height: 1.8;
  text-align: justify;
  text-indent: 2em;
}

/* ---------------- 日记 / 日志本 ---------------- */
.kzgame-doc--diary {
  --kz-doc-surface: #f3ecdb;
  background:
    repeating-linear-gradient(180deg, transparent 0 2.05rem, rgba(70, 100, 140, 0.16) 2.05rem 2.1rem),
    var(--kz-doc-surface);
  border: 1px solid rgba(120, 100, 66, 0.3);
  border-left: 3px solid rgba(160, 70, 70, 0.35);
  font-family: 'Kaiti SC', 'KaiTi', 'STKaiti', 'Songti SC', serif;
}
.kzgame-doc--diary .kzgame-doc-head { color: #7a6a4e; }
.kzgame-doc--diary .kzgame-doc-title { border-bottom: 1px solid rgba(120, 100, 66, 0.32); padding-bottom: 0.35rem; }
.kzgame-doc-page { line-height: 2.1rem; }

/* ---------------- 车票 / 通行证 / 铭牌 ---------------- */
.kzgame-doc--ticket {
  --kz-doc-surface: #f7f3e6;
  width: var(--kz-doc-w, 24rem);
  background: var(--kz-doc-surface);
  border: 1px solid rgba(110, 90, 50, 0.4);
  border-radius: var(--kz-doc-radius, 0.5rem);
  color: #241f16;
  font-family: var(--kz-font);
}
.kzgame-doc--ticket .kzgame-doc-head { color: #6b6047; }
.kzgame-doc--ticket .kzgame-doc-foot { padding-top: 0; }
.kzgame-doc-stub {
  margin: 0.6rem 1.4rem 0;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(110, 90, 50, 0.4);
}
.kzgame-doc-stub-title { font-size: 1.06em; font-weight: 800; margin-bottom: 0.3rem; }
.kzgame-doc-perf {
  overflow: hidden;
  white-space: nowrap;
  color: rgba(110, 90, 50, 0.5);
  letter-spacing: 0.5em;
  font-size: 0.9em;
}

/* ---------------- 手写纸条 / 便利贴 ---------------- */
.kzgame-doc--sticky {
  --kz-doc-surface: #ffe9a3;
  width: var(--kz-doc-w, 21rem);
  background: var(--kz-doc-surface);
  border: none;
  border-radius: var(--kz-doc-radius, 2px);
  color: #4a3c14;
  box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, 0.45);
  font-family: 'Kaiti SC', 'KaiTi', 'STKaiti', 'Comic Sans MS', cursive;
  transform: rotate(-0.7deg);
}
.kzgame-doc--sticky .kzgame-doc-body { padding: 1.6rem 1.3rem 1.1rem; }
.kzgame-doc--sticky .kzgame-doc-title { font-size: 1.14em; }
.kzgame-doc--sticky .kzgame-doc-sign { color: #6b5a24; }
.kzgame-doc--no-head { padding-top: 0.4rem; }
/* 胶带（上边一条 / 斜贴一角） */
.kzgame-doc--sticky::before {
  content: '';
  position: absolute;
  pointer-events: none;
}
.kzgame-doc-sticky--tape-top::before {
  top: -0.65rem;
  left: 50%;
  width: 6.5rem;
  height: 1.5rem;
  transform: translateX(-50%) rotate(-1.2deg);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.18);
}
.kzgame-doc-sticky--tape-corner::before {
  top: -0.7rem;
  left: -0.9rem;
  width: 4.6rem;
  height: 1.4rem;
  transform: rotate(-38deg);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.12rem 0.35rem rgba(0, 0, 0, 0.16);
}

/* ---- 作者自选字体（对应事件行里的「字体」下拉） ---- */
.kzgame-doc-font--serif { font-family: 'Songti SC', 'SimSun', 'STSong', Georgia, serif; }
.kzgame-doc-font--kai { font-family: 'Kaiti SC', 'KaiTi', 'STKaiti', serif; }
.kzgame-doc-font--hei { font-family: 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif; }
.kzgame-doc-font--mono { font-family: 'Cascadia Mono', 'Consolas', 'Menlo', monospace; }
.kzgame-doc-font--hand { font-family: 'Kaiti SC', 'KaiTi', 'Comic Sans MS', 'Segoe Print', cursive; }

/* ---------------- 「文档和资料」：卡片 + 详情 ---------------- */
.kzgame-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.7rem;
}
.kzgame-doc-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.8rem;
  text-align: left;
  font: inherit;
  color: var(--kz-text);
  background: var(--kz-choice-bg);
  border: 1px solid var(--kz-border);
  border-radius: calc(var(--kz-radius) - 4px);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.kzgame-doc-card:hover {
  transform: translateY(-2px);
  border-color: var(--kz-accent);
  background: var(--kz-choice-hover);
}
.kzgame-doc-card-icon { font-size: 1.5em; line-height: 1.1; }
.kzgame-doc-card-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kzgame-doc-card-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kzgame-doc-card-sub {
  font-size: 0.78em;
  color: var(--kz-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 还没看过的资料：右上角一个小小的「新」 */
.kzgame-doc-card.is-new { border-color: var(--kz-accent); }
.kzgame-doc-card.is-new::after {
  content: '新';
  position: absolute;
  top: -0.4rem;
  right: -0.3rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--kz-danger);
  color: #fff;
  font-size: 0.62em;
  line-height: 1.5;
}
.kzgame-doc-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.kzgame-doc-view .kzgame-doc { max-height: none; }
.kzgame-doc-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.82em;
  color: var(--kz-text-dim);
}
.kzgame-doc-count,
.kzgame-doc-empty-note {
  margin-top: 0.7rem;
  font-size: 0.85em;
  color: var(--kz-text-dim);
}

/* 工具栏上「文档和资料」右上角的小角标：有没看过的就显示「新」 */
.kzgame-tool { position: relative; }
.kzgame-tool-dot {
  position: absolute;
  top: -0.4rem;
  right: -0.35rem;
  min-width: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--kz-accent2);
  color: #0b0e13;
  font-size: 9px;
  line-height: 1.05rem;
  text-align: center;
  font-weight: 700;
}
.kzgame-tool-dot.is-new { background: var(--kz-danger); color: #fff; }

/* 窄屏：文档容器铺满，多栏退回单栏（分栏在手机上没法看） */
@media (max-width: 720px) {
  .kzgame-doc { width: 100%; font-size: 0.95rem; }
  .kzgame-doc-columns--2,
  .kzgame-doc-columns--3 { column-count: 1; }
  .kzgame-doc-masthead { font-size: 1.4em; letter-spacing: 0.16em; }
  .kzgame-doc-headline { font-size: 1.24em; }
  .kzgame-doc-grid { grid-template-columns: 1fr; }
}