/* ============ 深夜回廊 · MIDNIGHT CORRIDOR ============ */
:root {
  --pale: #b8c8bf;
  --dim: #5f7a6e;
  --warn: #c8a878;
  --red: #a84848;
  --font: 'MS Gothic', 'SimSun', 'Courier New', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; cursor: default; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--font); }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.hidden { display: none !important; }

/* ============ CRT 叠加 ============ */
#crt-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#crt-curve {
  position: fixed; inset: 0; z-index: 91; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,0.55) 100%);
}

/* ============ 标题画面 ============ */
#title-screen {
  position: fixed; inset: 0; z-index: 130; background: #030504;
  display: flex; align-items: center; justify-content: center;
}
.title-noise {
  position: absolute; inset: 0; opacity: 0.14; pointer-events: none;
  background-image: repeating-conic-gradient(rgba(255,255,255,0.12) 0 0.0001%, transparent 0 0.0002%);
  animation: noiseShift 0.18s steps(2) infinite;
}
@keyframes noiseShift { 50% { transform: translate(-6px, 3px) } }
.title-content { position: relative; text-align: center; animation: titleFlicker 7s infinite; }
@keyframes titleFlicker {
  0%, 100% { opacity: 1 } 92% { opacity: 1 } 93% { opacity: 0.55 }
  94% { opacity: 0.95 } 96% { opacity: 0.7 } 97% { opacity: 1 }
}
.title-jp {
  font-size: 88px; letter-spacing: 30px; text-indent: 30px; color: var(--pale);
  text-shadow: 0 0 22px rgba(140,180,160,0.45), 2px 0 0 rgba(160,60,60,0.35), -2px 0 0 rgba(60,120,160,0.35);
  font-weight: bold;
}
.title-en { margin-top: 10px; font-size: 15px; letter-spacing: 9px; color: var(--dim); }
.title-sub { margin-top: 6px; font-size: 12px; letter-spacing: 5px; color: #3d4f47; }
.title-menu { margin-top: 54px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.t-btn {
  background: none; border: none; font-family: var(--font);
  font-size: 20px; letter-spacing: 8px; color: var(--dim);
  cursor: pointer; padding: 6px 30px; transition: color 0.15s;
}
.t-btn:hover { color: var(--pale); text-shadow: 0 0 14px rgba(160,200,180,0.6); }
.title-warn { margin-top: 60px; font-size: 11.5px; line-height: 2; letter-spacing: 3px; color: #34423c; }

#how-panel {
  position: absolute; inset: 0; z-index: 5; background: rgba(2,4,3,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.how-title { font-size: 18px; letter-spacing: 6px; color: var(--pale); }
.how-grid { display: grid; grid-template-columns: repeat(2, 240px); gap: 14px 30px; font-size: 14px; color: #8fa89d; letter-spacing: 2px; }
.how-grid b { color: var(--warn); margin-right: 12px; }
.how-tip { font-size: 12.5px; line-height: 2.1; letter-spacing: 3px; color: #4a5f56; text-align: center; }

/* ============ HUD ============ */
#hud { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#rec-tag {
  position: absolute; top: 22px; right: 30px;
  font-size: 14px; letter-spacing: 3px; color: #c8d8d0; opacity: 0.8;
}
.rec-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); margin-right: 8px; animation: recBlink 1.4s steps(1) infinite;
}
@keyframes recBlink { 50% { opacity: 0.15 } }
#objective {
  position: absolute; top: 22px; left: 30px; max-width: 380px;
  font-size: 13px; letter-spacing: 2px; line-height: 1.8; color: #9fb8ac; opacity: 0.85;
}
.obj-tag { color: var(--warn); margin-right: 10px; }
#center-dot {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px;
  background: rgba(200,220,210,0.55); border-radius: 50%;
}
#interact-tip {
  position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; letter-spacing: 3px; color: #cfe0d8;
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
}
#interact-tip .key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid #cfe0d8; font-size: 13px;
  background: rgba(0,0,0,0.5);
}
#battery {
  position: absolute; bottom: 26px; right: 30px; width: 46px; height: 14px;
  border: 1px solid rgba(160,190,175,0.5); padding: 2px; opacity: 0.7;
}
#battery::after {
  content: ''; position: absolute; right: -5px; top: 4px; width: 3px; height: 6px;
  background: rgba(160,190,175,0.5);
}
#battery-fill { height: 100%; background: #8fb8a4; transition: width 0.4s; width: 100%; }
#subtitle {
  position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%);
  max-width: 72vw; text-align: center;
  font-size: 19px; letter-spacing: 3px; line-height: 2; color: #d8e4de;
  text-shadow: 0 0 10px #000, 0 2px 4px #000;
  opacity: 0; transition: opacity 0.4s;
}
#subtitle.show { opacity: 1; }

/* ============ 纸条 ============ */
#note-screen {
  position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
}
.note-paper {
  width: 420px; min-height: 300px; padding: 44px 40px 28px;
  background: linear-gradient(165deg, #cfc7ae 0%, #b8ae92 55%, #a89e82 100%);
  box-shadow: 0 0 60px rgba(0,0,0,0.9), inset 0 0 44px rgba(90,75,50,0.35);
  transform: rotate(-1.6deg);
  animation: noteIn 0.25s ease both;
}
@keyframes noteIn { from { opacity: 0; transform: rotate(-1.6deg) scale(0.92) } }
#note-text {
  font-size: 16.5px; line-height: 2.3; letter-spacing: 3px; color: #3a3226;
  white-space: pre-wrap;
}
.note-close { margin-top: 30px; text-align: right; font-size: 12px; letter-spacing: 3px; color: #6a5f48; }

/* ============ 被抓住 ============ */
#caught-screen {
  position: fixed; inset: 0; z-index: 110; background: #060707;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px;
}
.caught-static {
  position: absolute; inset: 0; opacity: 0.5;
  background-image: repeating-conic-gradient(rgba(255,255,255,0.28) 0 0.0001%, transparent 0 0.0002%);
  animation: noiseShift 0.1s steps(2) infinite;
}
.caught-text {
  position: relative; font-size: 44px; letter-spacing: 22px; text-indent: 22px; color: #c8d4ce;
  text-shadow: 3px 0 0 rgba(160,60,60,0.5), -3px 0 0 rgba(60,120,160,0.5);
  animation: caughtJitter 0.28s steps(2) infinite;
}
@keyframes caughtJitter { 50% { transform: translate(3px, -2px) } }
.caught-sub { position: relative; font-size: 14px; letter-spacing: 6px; color: #5f7a6e; animation: recBlink 1.2s steps(1) infinite; }

/* ============ 结局 ============ */
#ending-screen {
  position: fixed; inset: 0; z-index: 120; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#ending-text {
  font-size: 22px; letter-spacing: 8px; line-height: 3; color: #b8c8bf;
  text-align: center; white-space: pre-wrap;
}

#fade-overlay {
  position: fixed; inset: 0; z-index: 105; background: #000; opacity: 0;
  pointer-events: none; transition: opacity 1s ease;
}
#fade-overlay.white { background: #e8f0ea; }

@media (max-width: 800px) {
  .title-jp { font-size: 46px; letter-spacing: 14px; }
  .how-grid { grid-template-columns: 1fr; }
}