.glitch-flash-r { box-shadow: inset 0 0 80px rgba(255,0,0,0.2) !important; }
.glitch-flash-g { box-shadow: inset 0 0 80px rgba(0,255,0,0.15) !important; }
.glitch-flash-b { box-shadow: inset 0 0 80px rgba(0,80,255,0.15) !important; }

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-height: 700px) {
  .sector-head { padding: 2px 6px; }
  #status-bar { padding: 3px 6px; gap: 6px; }
  #status-bar .label { font-size: 0.5rem; }
  #game-layout { gap: 4px; }
  #terminal-log { font-size: 0.45rem; }
  #level-progress-wrap { margin-bottom: 2px; }
  #shield-indicator { font-size: 0.48rem; }
}

@media (max-height: 580px) {
  html, body { font-size: 12px; }
  #top-bar { padding: 2px 2px 4px; }
  #top-bar .title { font-size: 0.95rem; letter-spacing: 2px; }
  .sector-body { padding: 2px 6px 3px; gap: 2px; }
  .btn { width: 56px; height: 56px; }
  .btn .btn-icon { font-size: 1.2rem; }
  #terminal-log { height: 36px; min-height: 24px; }
  #game-layout { gap: 2px; }
  .sector-name { font-size: 0.6rem; }
  #standby-logo { font-size: 0.6rem; }
  #standby-desc { font-size: 0.5rem; line-height: 1.6; }
  #standby-prompt { font-size: 0.7rem; }
}

@media (max-height: 480px) {
  html, body { font-size: 11px; }
  #level-progress-wrap { display: none; }
  #shield-indicator { display: none; }
  #top-bar .title { font-size: 0.85rem; }
  .btn { width: 48px; height: 48px; border-width: 2px; }
  .btn .btn-icon { font-size: 1rem; }
  .btn .key-hint { display: none; }
  #terminal-log { height: 28px; min-height: 20px; }
  #status-bar { padding: 2px 4px; }
  .sector-head { padding: 1px 5px; }
  .dq-bit { width: 18px; height: 14px; font-size: 0.6rem; }
  #decrypt-active { width: 40px; height: 22px; font-size: 0.9rem; }
  #critical-icon { font-size: 1.5rem; }
  #critical-title { font-size: 0.85rem; }
  #gameover-box { padding: 15px 20px; }
  #go-title { font-size: 1.1rem; margin-bottom: 8px; }
  #go-stats { font-size: 0.48rem; line-height: 1.4; padding: 3px 5px; }
}

@media (max-height: 400px) {
  .btn { width: 42px; height: 42px; }
  .btn .btn-icon { font-size: 0.9rem; }
  #terminal-log { display: none; }
  .sector-status { font-size: 0.5rem; }
  #standby-features, #standby-hw { display: none; }
}

/* Wide screens — let buttons breathe */
@media (min-width: 520px) and (min-height: 600px) {
  .btn { width: 60px; height: 60px; }
  .btn .btn-icon { font-size: 1.3rem; }
}

/* ── Large screen / TV / monitor ─────────────────────────── */
@media (min-width: 900px) and (min-height: 700px) {
  #terminal {
    max-width: 1100px;
    padding: 10px 24px 0;
  }
}

.meta-sep {
  opacity: 0.35;
  font-size: 0.48rem;
}
.meta-b span:not(.meta-sep) { color: rgba(56,136,255,0.40); }
.meta-g span:not(.meta-sep) { color: rgba(56,255,92,0.40); }
.meta-r span:not(.meta-sep) { color: rgba(255,56,56,0.40); }

/* Active-state brightening of metadata */
.sector-meta.meta-active span:not(.meta-sep) { opacity: 1; }
.meta-b.meta-active span:not(.meta-sep) { color: rgba(56,136,255,0.7); }
.meta-g.meta-active span:not(.meta-sep) { color: rgba(56,255,92,0.7); }
.meta-r.meta-active span:not(.meta-sep) { color: rgba(255,56,56,0.7); }

/* Threat level colors */
#fw-threat.threat-low  { color: rgba(56,255,92,0.65) !important; }
#fw-threat.threat-med  { color: rgba(255,204,0,0.65) !important; }
#fw-threat.threat-high { color: rgba(255,56,56,0.75) !important; }

/* Coolant warning */
#reactor-coolant.coolant-warn { color: rgba(255,204,0,0.7) !important; }
#reactor-coolant.coolant-crit { color: rgba(255,56,56,0.75) !important; animation: metaBlink 0.4s infinite; }

@keyframes metaBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Binary rain (Decryptor background) ──────────────────── */
.sector-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.sector-rain.active { opacity: 1; }

/* Make sector-body position: relative for rain */
#sector-b .sector-body { position: relative; }
#sector-b .sector-body > *:not(.sector-rain) { position: relative; z-index: 1; }

.rain-col {
  position: absolute;
  top: -100%;
  font-size: 0.45rem;
  line-height: 1.1;
  color: rgba(56,136,255,0.12);
  font-family: 'Courier New', monospace;
  writing-mode: vertical-lr;
  animation: rainFall linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.sector-rain.active .rain-col {
  animation-play-state: running;
}

@keyframes rainFall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(300%); }
}

/* ═══════════════════════════════════════════════════════════
   VFX OVERLAYS — Particles, Flash, CRT Death, etc.
   ═══════════════════════════════════════════════════════════ */

/* ── Particle canvas ─────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 190;
  contain: strict;
}

/* ── Screen flash overlay ────────────────────────────────── */
#screen-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 180;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  display: none;
}
#screen-flash.active {
  display: block;
}

/* ── CRT death effect (game over) ────────────────────────── */
#crt-death {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 210;
  display: none;
  will-change: opacity, transform;
}
#crt-death.crt-death-active {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  animation: crtFlash 0.2s ease-out forwards;
}
#crt-death.crt-death-line {
  animation: crtCollapse 0.4s ease-in forwards;
}
#crt-death.crt-death-flicker {
  animation: crtFlicker 0.3s steps(3) forwards;
}
#crt-death.crt-death-black {
  background: #000;
  opacity: 1;
  animation: crtFadeOut 1.0s ease-out forwards;
}

@keyframes crtFlash {
  0%   { opacity: 0; }
  30%  { opacity: 0.8; }
  100% { opacity: 0.6; }
}
@keyframes crtCollapse {
  0%   { transform: scaleY(1); opacity: 0.6; background: #fff; }
  100% { transform: scaleY(0.02); opacity: 1; background: #fff; }
}
@keyframes crtFlicker {
  0%   { opacity: 1; transform: scaleY(0.02); }
  33%  { opacity: 0.3; }
  66%  { opacity: 0.8; }
  100% { opacity: 0.5; transform: scaleY(0.01); }
}
@keyframes crtFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Heartbeat red vignette pulse ────────────────────────── */
#terminal.heartbeat-pulse::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 170;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 20, 20, 0.15) 100%);
  animation: heartbeatPulse 0.35s ease-out forwards;
}
@keyframes heartbeatPulse {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Combo glow (terminal border glow that scales with combo) ── */
#terminal.combo-glow {
  border-color: var(--combo-glow-color, #38ff5c);
  transition: border-color 0.3s ease;
}

/* ── Victory confetti ────────────────────────────────────── */
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  z-index: 195;
  pointer-events: none;
  animation: confettiFall linear forwards;
  will-change: transform;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) scale(0.3); opacity: 0; }
}

/* ── Log slide-in animation ──────────────────────────────── */
.log-slide-in {
  animation: logSlideIn 0.2s ease-out;
}
@keyframes logSlideIn {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── Enhanced danger-3 (critical health) ─────────────────── */
#terminal.danger-3 {
  animation: danger3Pulse 0.5s ease-in-out infinite alternate;
}
#terminal.danger-3 #scanlines::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 0, 0, 0.02) 3px,
    rgba(255, 0, 0, 0.02) 6px
  );
}
@keyframes danger3Pulse {
  0%   { border-color: rgba(255, 56, 56, 0.3); }
  100% { border-color: rgba(255, 56, 56, 0.7); }
}

/* ── Critical overlay alarm border ───────────────────────── */
#critical-overlay {
  animation: critAlarmBorder 0.3s ease-in-out infinite alternate;
}
@keyframes critAlarmBorder {
  0%   { border-color: rgba(255, 30, 30, 0.2); }
  100% { border-color: rgba(255, 30, 30, 0.6); }
}

/* Landscape phone */
@media (orientation: landscape) and (max-height: 500px) {
  #terminal { max-width: 680px; padding: 2px 12px 0; }
  #game-layout { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(0, auto) minmax(0, 1fr); gap: 4px; }
  .sector { min-width: 0; }
  .btn { width: 48px; height: 48px; }
  .btn .btn-icon { font-size: 1rem; }
  .btn .key-hint { display: none; }
  #terminal-log { display: none; }
  #standby-desc { display: none; }
  /* Game over — ultra compact for short screens */
  #gameover-box { padding: 10px 16px; }
  #go-title { font-size: 1.1rem; margin-bottom: 6px; }
  #go-score, #go-high, #go-time, #go-level, #go-tier, #go-diff, #go-combo { font-size: 0.65rem; margin: 2px 0; }
  #go-score { font-size: 0.8rem; }
  #go-grade { font-size: 1.2rem; margin: 1px 0; }
  #go-cause { font-size: 0.55rem; margin: 2px 0 4px; padding: 2px 6px; }
  #go-stats { font-size: 0.42rem; line-height: 1.3; padding: 3px 6px; margin-bottom: 4px; }
  #go-prompt { font-size: 0.55rem; margin-top: 4px; }
  /* Victory — ultra compact for short screens */
  #victory-box { padding: 10px 16px; }
  #vic-title { font-size: 1.1rem; margin-bottom: 2px; }
  #vic-subtitle { font-size: 0.45rem; margin-bottom: 4px; }
  #vic-score, #vic-high, #vic-time, #vic-level, #vic-diff, #vic-combo { font-size: 0.65rem; margin: 2px 0; }
  #vic-score { font-size: 0.8rem; }
  #vic-grade { font-size: 1.2rem; margin: 1px 0; }
  #vic-stats { font-size: 0.42rem; line-height: 1.3; padding: 3px 6px; margin-bottom: 4px; }
  #vic-prompt { font-size: 0.55rem; margin-top: 4px; }
}