@font-face { font-family: 'lcd'; src: local('Courier New'); }

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  color: #cfcfcf;
  cursor: default;
}

#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1280px; height: 720px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  background: #000;
}

#game { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #000;
  z-index: 30;
  text-align: center;
}
.hidden { display: none !important; }

/* ---------- warning ---------- */
.warn-box { max-width: 720px; line-height: 1.9; font-size: 20px; }
.warn-title { color: #b00; font-size: 42px; letter-spacing: 14px; margin-bottom: 26px; animation: warnpulse 1.4s infinite; }
.warn-sub { font-size: 14px; color: #777; margin-top: 22px; }
@keyframes warnpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- menu ---------- */
#menu { background: transparent; justify-content: center; align-items: flex-start; }
.menu-left { margin-left: 90px; margin-top: 40px; text-align: left; }
.title { display: flex; flex-direction: column; margin-bottom: 46px; text-shadow: 0 0 18px rgba(255,255,255,.15); }
.t-small { font-size: 20px; letter-spacing: 9px; color: #6e2020; animation: warnpulse 4.2s infinite; }
.t-big {
  font-size: 96px; letter-spacing: 6px; font-weight: bold;
  color: #b8b4a8;
  text-shadow: 0 0 30px rgba(200,40,10,.35), 0 2px 0 #000, 0 0 8px rgba(255,120,30,.25);
  animation: titleburn 7s infinite;
}
.t-sub { font-size: 18px; letter-spacing: 11px; color: #7a0d0d; margin-top: 10px; animation: subflick 3.1s infinite; }
@keyframes titleburn {
  0%, 100% { text-shadow: 0 0 30px rgba(200,40,10,.35), 0 2px 0 #000; }
  48% { text-shadow: 0 0 46px rgba(255,80,20,.5), 0 2px 0 #000, 0 0 12px rgba(255,140,40,.3); }
  50% { text-shadow: 0 0 8px rgba(200,40,10,.2), 0 2px 0 #000; color: #948e80; }
  52% { text-shadow: 0 0 46px rgba(255,80,20,.5), 0 2px 0 #000; }
}
@keyframes subflick { 0%,92%,96%,100% { opacity: 1; } 94%, 98% { opacity: .2; } }

.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden; opacity: 0;
}
.glitch::before { color: #f33; animation: glitchA 4s infinite steps(1); }
.glitch::after  { color: #3af; animation: glitchB 4s infinite steps(1); }
@keyframes glitchA { 0%,89%,93%,100% { opacity: 0; } 90%,92% { opacity: .6; transform: translate(-4px, 2px); clip-path: inset(10% 0 55% 0); } }
@keyframes glitchB { 0%,90%,94%,100% { opacity: 0; } 91%,93% { opacity: .6; transform: translate(4px, -2px); clip-path: inset(60% 0 5% 0); } }

.menu-items { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.menu-btn {
  background: none; border: none;
  color: #cfcfcf; font-family: inherit;
  font-size: 26px; letter-spacing: 2px;
  cursor: pointer; padding: 4px 8px;
  text-align: left;
}
.menu-btn:hover { color: #fff; text-shadow: 0 0 10px #fff; }
.menu-btn.red { color: #8f1a12; }
.menu-btn.red:hover { color: #ff2a1a; text-shadow: 0 0 12px rgba(255,40,20,.8); }
.menu-hint { margin-top: 44px; color: #666; font-size: 15px; }
.menu-ver { margin-top: 8px; color: #3a3a3a; font-size: 12px; }

/* ---------- night intro ---------- */
#intro { background: #000; }
.intro-box { line-height: 1.6; }
#intro-date { color: #555; font-size: 18px; letter-spacing: 4px; }
#intro-night { font-size: 44px; letter-spacing: 6px; color: #ddd; margin: 6px 0; }
#intro-time { font-size: 22px; color: #888; }
#intro-msg { position: absolute; bottom: 120px; width: 70%; left: 15%; color: #6d6d6d; font-size: 16px; line-height: 1.7; font-style: italic; }
.intro-skip { position: absolute; bottom: 40px; width: 100%; color: #333; font-size: 13px; letter-spacing: 3px; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

#hud-time {
  position: absolute; right: 30px; top: 20px;
  text-align: right; font-size: 26px; color: #eee;
  text-shadow: 2px 2px 0 #000; line-height: 1.4;
}
#hud-time #hud-night { font-size: 16px; color: #999; }

#hint {
  position: absolute; left: 26px; bottom: 20px;
  font-size: 15px; color: rgba(200,200,200,.55);
  text-shadow: 1px 1px 0 #000; letter-spacing: 1px;
  max-width: 700px;
}

/* phone guy subtitles */
#subtitles {
  position: absolute;
  left: 50%; bottom: 64px;
  transform: translateX(-50%);
  max-width: 860px; min-width: 300px;
  padding: 12px 22px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(160,140,120,.25);
  border-radius: 4px;
  color: #cfc4ae;
  font-size: 17px; line-height: 1.55; font-style: italic;
  text-align: center;
  z-index: 20;
  cursor: pointer;
}

/* ---------- game over ---------- */
#gameover {
  gap: 12px;
  background:
    radial-gradient(ellipse at center, rgba(60,0,0,.35) 0%, rgba(0,0,0,1) 75%),
    #000;
}
.go-text {
  font-size: 54px; letter-spacing: 10px; color: #d8d2c4; margin-bottom: 4px;
  animation: gored 2.6s infinite;
}
@keyframes gored {
  0%, 100% { color: #d8d2c4; text-shadow: 0 0 14px rgba(190,20,10,.4); }
  46% { color: #d8d2c4; text-shadow: 0 0 30px rgba(220,30,15,.75); }
  50% { color: #a01810; text-shadow: 0 0 6px rgba(120,10,5,.4); }
  54% { color: #d8d2c4; text-shadow: 0 0 30px rgba(220,30,15,.75); }
}
.go-sub { color: #a3241a; font-size: 18px; margin-bottom: 30px; letter-spacing: 3px; }

/* ---------- extras ---------- */
#extras { background: transparent; justify-content: center; align-items: flex-start; }
.ex-title {
  font-size: 40px; letter-spacing: 16px; color: #8f1a12;
  margin-bottom: 34px; font-weight: bold;
  text-shadow: 0 0 18px rgba(190,30,15,.4);
}

/* ---------- win ---------- */
#win { background: #000; gap: 10px; }
.six { font-size: 96px; color: #fff; letter-spacing: 6px; animation: sixglow 2s infinite; }
@keyframes sixglow { 0%,100% { text-shadow: 0 0 24px rgba(255,255,220,.7); } 50% { text-shadow: 0 0 6px rgba(255,255,220,.2); } }
.six-sub { color: #999; font-size: 20px; margin-bottom: 34px; }

/* ---------- CRT overlay ---------- */
#crt {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: multiply;
}
#crt::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}