/* ============ NIGHT WATCH: CHANNEL 6 — game console ============ */

.game-body { overflow-x: hidden; }

.stage {
  min-height: calc(100vh - 70px);
  display: flex;
  justify-content: center;
  padding: 1.25rem .75rem 3rem;
}

.console {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* ---------- HUD ---------- */
.hud {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: .6rem;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: .6rem .9rem;
  border-radius: var(--radius);
}
.hud-cell { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hud-lbl { font-size: .6rem; letter-spacing: .18em; color: var(--muted); white-space: nowrap; }
.hud-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg);
}
.hud-stab { padding: 0 .5rem; }
.stab-bar {
  height: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.5);
  border-radius: 3px;
  overflow: hidden;
}
.stab-fill {
  height: 100%; width: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transition: width .3s linear, background .3s;
}
.stab-fill.low { background: #ff2b2b; box-shadow: 0 0 12px #ff2b2b; }

/* ---------- monitor ---------- */
.monitor {
  position: relative;
  border: 2px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: #000;
  box-shadow: 0 0 0 6px rgba(0,0,0,.55), 0 20px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.9);
  overflow: hidden;
  aspect-ratio: 640 / 420;
}
#feed {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}

.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .scanlines { animation: crtflicker 4s steps(2) infinite; }
  @keyframes crtflicker { 0%,100% { opacity: .9; } 50% { opacity: 1; } 92% { opacity: .75; } }
}

.low-warning {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 80px rgba(255,43,43,.55);
  opacity: 0; transition: opacity .4s;
}
.low-warning.on { opacity: 1; animation: lowpulse 1.1s ease-in-out infinite; }
@keyframes lowpulse { 50% { opacity: .35; } }

/* ---------- toast ---------- */
.toast {
  position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: .12em;
  padding: .35rem 1rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(0,0,0,.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  text-align: center;
  max-width: 90%;
}
.toast.show { opacity: 1; }
.toast.bad { border-color: #ff2b2b; color: #ff5b5b; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,6,3,.94);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.overlay.hidden, .scare.hidden { display: none; }
.overlay-inner { text-align: center; padding: 1.5rem 1.25rem; max-width: 52ch; }
.ov-eyebrow { font-size: .65rem; letter-spacing: .28em; color: var(--accent); margin-bottom: .8rem; }
.ov-eyebrow.bad { color: #ff5b5b; }
.ov-eyebrow.ok { color: var(--accent); }
.ov-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: 1.02;
  margin-bottom: .9rem;
}
.ov-title .stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
}
.bad-title .stroke { -webkit-text-stroke: 1px #ff2b2b; }
.ov-text { font-size: .85rem; line-height: 1.55; margin-bottom: .9rem; }
.ov-text.dim { color: var(--muted); font-size: .75rem; }
.ov-legend {
  list-style: none; padding: 0; margin: 0 0 1rem;
  text-align: left; display: inline-block;
  font-size: .7rem; line-height: 1.9; letter-spacing: .05em;
  color: var(--muted);
}
.ov-legend b { color: var(--accent); }
.ov-fine { margin-top: .9rem; font-size: .6rem; letter-spacing: .22em; color: var(--muted); }

/* ---------- scare ---------- */
.scare {
  position: absolute; inset: 0; z-index: 9;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: scareflash .12s steps(2) infinite;
}
@keyframes scareflash { 50% { filter: invert(.12) brightness(1.6); } }
.scare-face {
  position: relative;
  width: 46%; aspect-ratio: 1 / 1.25;
  background: radial-gradient(ellipse at 50% 42%, rgba(214,230,210,.9) 0%, rgba(150,170,150,.5) 45%, transparent 72%);
  filter: blur(2px) contrast(1.3);
  animation: facejitter .09s steps(2) infinite;
}
@keyframes facejitter {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-6px,4px) scale(1.04); }
}
.scare-face .eye {
  position: absolute; top: 34%;
  width: 16%; height: 13%;
  background: #000; border-radius: 50%;
  box-shadow: 0 0 18px 6px #000;
}
.scare-face .eye.l { left: 26%; }
.scare-face .eye.r { right: 26%; }
.scare-face .mouth {
  position: absolute; left: 50%; top: 62%;
  transform: translateX(-50%);
  width: 22%; height: 22%;
  background: #000; border-radius: 46% 46% 50% 50%;
  box-shadow: 0 0 22px 8px #000;
}
.scare-text {
  position: absolute; bottom: 8%;
  width: 100%; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  letter-spacing: .3em;
  color: #ff2b2b;
  text-shadow: 0 0 12px rgba(255,43,43,.8);
}

/* ---------- camera buttons ---------- */
.cams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.cam-btn {
  font-family: var(--font-display);
  font-size: clamp(.8rem, 2.4vw, 1.05rem);
  letter-spacing: .1em;
  padding: .7rem .3rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  transition: color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.cam-btn .cam-no { font-size: .6rem; letter-spacing: .3em; opacity: .6; }
.cam-btn:hover { color: var(--fg); border-color: var(--accent); }
.cam-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(51,255,102,.25), inset 0 0 14px rgba(51,255,102,.08);
}
.cam-btn:active { transform: scale(.97); }

/* ---------- report panel ---------- */
.report-panel {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: .8rem .9rem 1rem;
}
.panel-lbl { font-size: .6rem; letter-spacing: .24em; color: var(--muted); margin-bottom: .5rem; }
.cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem;
  margin-bottom: .7rem;
}
.cat-btn {
  font-family: inherit;
  font-size: clamp(.55rem, 1.8vw, .68rem);
  letter-spacing: .08em;
  padding: .6rem .2rem;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.cat-btn:hover { color: var(--fg); border-color: var(--accent); }
.cat-btn.sel {
  color: #04110a;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(51,255,102,.4);
}
.report-btn {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  letter-spacing: .18em;
  padding: .75rem;
  background: rgba(255,43,43,.08);
  color: #ff5b5b;
  border: 1px solid rgba(255,43,43,.5);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
}
.report-btn:hover:not(:disabled) {
  background: rgba(255,43,43,.2);
  box-shadow: 0 0 20px rgba(255,43,43,.3);
}
.report-btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 560px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-stab { grid-column: 1 / -1; order: 3; }
  .cats { grid-template-columns: repeat(3, 1fr); }
}