/* ==========================================================================
   RESIDENT EVIL: OUTBREAK PROTOCOL — UI Overlay Styles
   范围：Overlays / Start Screen / Buttons / Pause / YOU DIED（brief §5.1、5.4、5.5）
   规则：色值 100% 来自 css/design-tokens.css 变量；弹性缓动禁用。
   ========================================================================== */

/* ---------- Overlays ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
  animation: fade-in var(--motion-base) var(--ease-out);
}

.overlay.closing {
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-standard);
  pointer-events: none;
}

#screen-pause { z-index: var(--z-overlay); }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Start Screen ---------- */

#screen-start {
  flex-direction: column;
}

.start-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  margin-top: -12vh; /* 垂直重心偏上（brief 38vh 起） */
}

.game-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  /* 移动端缩放：375px 视口约 34px，>=711px 恢复 64px（内容页 .page-title 同款策略） */
  font-size: clamp(30px, 9vw, 64px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  text-align: center;
}

.title-rule {
  display: block; /* h1 内嵌 span，需块级化保持原分隔线布局 */
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto; /* 块级化后需 auto 居中，原依赖父级 text-align 仅对 inline 生效 */
  background: var(--color-danger); /* 本屏唯一红色 */
}

.game-subtitle {
  display: block; /* h1 内嵌 span，需块级化保持原独立行布局 */
  margin: 0 0 var(--space-12);
  font-size: var(--text-base);
  font-weight: var(--weight-regular); /* 原 <p> 默认不加粗，h1 内嵌后需重置 */
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.controls-line {
  margin: var(--space-8) 0 0;
  max-width: 100%;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
  text-align: center;
  padding: 0 var(--space-4);
  box-sizing: content-box;
}

.start-footer {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--text-disabled);
}

/* Non-affiliation notice — first screen of the start overlay */
.fan-notice {
  max-width: 46ch;
  margin: var(--space-5) auto 0;
  font-size: var(--text-xs);
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-align: center;
  text-wrap: balance;
}

.fan-notice strong { color: var(--color-warn-bright); }

/* ---------- Buttons ---------- */

.btn {
  min-width: 200px;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--motion-instant) var(--ease-standard),
    border-color var(--motion-instant) var(--ease-standard),
    color var(--motion-instant) var(--ease-standard),
    box-shadow var(--motion-instant) var(--ease-standard);
}

.btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-primary:active { background: var(--btn-primary-bg-active); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--btn-ghost-border);
  color: var(--btn-ghost-text);
}

.btn-ghost:hover {
  background: var(--btn-ghost-bg-hover);
}

.btn-danger {
  min-width: 220px;
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
}

.btn-danger:hover {
  background: var(--color-danger-bright);
}

.btn-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.btn-sound .icon { width: 20px; height: 20px; }

/* ---------- Pause Overlay ---------- */

.pause-panel {
  width: 320px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.pause-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.pause-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pause-buttons .btn {
  width: 100%;
  min-height: 48px;
}

.pause-hint {
  margin: var(--space-6) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}

/* ---------- YOU DIED (z-modal) ---------- */

/* 边缘径向血红暗角：复用 --overlay-hit（受击暗角上限，色相同为 danger），
   brief 要求的 0.10 alpha 由该 token 上限覆盖，不引入 token 外直色值 */
.overlay-death {
  background:
    radial-gradient(ellipse at center, transparent 30%, var(--overlay-hit) 100%),
    var(--scrim-heavy);
}

.death-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.death-title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-danger-bright);
  text-shadow: var(--shadow-glow-danger); /* 全游戏唯一血色光晕 */
}

.death-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-10);
  min-width: 280px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
}

.stat-row dt {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
}

.stat-row dd {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  color: var(--text-primary);
  text-align: right;
}

.death-footer {
  margin: var(--space-8) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ---------- Start screen archive links (inner pages) ---------- */
.archive-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.archive-links a {
  color: var(--text-secondary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.archive-links a:hover { color: var(--color-warn-bright); border-bottom-color: var(--color-warn); }

.archive-links .archive-label { color: var(--text-disabled); pointer-events: none; }

/* ---------- Touch controls (双浮动摇杆 + 动作按钮) ---------- */

/* 层级：Canvas(0) < touch(4) < HUD(10)——HUD 按钮（暂停/音量）优先命中 */
#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 4;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#touch-controls[hidden] { display: none; }

/* 浮动摇杆底座：按下位置出现，直径 = 2x 最大拖动半径 + 余量 */
.tstick {
  position: fixed;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-0) 45%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.tstick.active { opacity: 1; }

.tknob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 75%, transparent);
  border: 1px solid var(--color-primary-hover);
  transform: translate(-50%, -50%);
}

/* 动作按钮：右下角纵向排列（冲刺上、换弹下），横向避开 HUD 按钮列
   （HUD 右下两钮 40px x2 + gap + 20px 内边距 ≈ 延伸至 108px，故取 124px 起） */
.tbtn {
  position: fixed;
  right: calc(var(--space-5) + 104px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-0) 70%, transparent);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}

.tbtn .icon { width: 28px; height: 28px; }

#tbtn-shift { bottom: calc(var(--space-5) + 80px); }
#tbtn-reload { bottom: var(--space-5); }

.tbtn.pressed {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: var(--text-primary);
}

.archive-links-footer { margin-top: var(--space-4); }