/* ═══════════════════════════════════════════════════════════════════
   DOOMSDAY TERMINAL — style.css
   Design Tokens · Layout · LED Glow · Radio · Tubes · Animations
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Palette */
  --clr-void:         #0d0d0d;
  --clr-panel-dark:   #0a0f0a;
  --clr-panel-mid:    #0d1a0d;
  --clr-border:       #1a1a1a;
  --clr-border-outer: #2a2a2a;
  --clr-border-rim:   #3a3a3a;

  --clr-green:        #32ff64;
  --clr-green-9:      rgba(50, 255, 100, 0.9);
  --clr-green-7:      rgba(50, 255, 100, 0.7);
  --clr-green-5:      rgba(50, 255, 100, 0.5);
  --clr-green-3:      rgba(50, 255, 100, 0.3);

  --clr-red:          #ff3232;
  --clr-red-9:        rgba(255, 50, 50, 0.9);
  --clr-red-5:        rgba(255, 50, 50, 0.5);

  --clr-amber:        #ffb300;
  --clr-amber-9:      rgba(255, 179, 0, 0.9);
  --clr-amber-5:      rgba(255, 179, 0, 0.5);

  /* Timing */
  --t-fast:   75ms;
  --t-glow:   0.1s ease-out;
  --t-btn:    75ms;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--clr-void);
  background-image: radial-gradient(ellipse at center, rgba(20,20,20,1) 0%, rgba(5,5,5,1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 3. FONT ──────────────────────────────────────────────────────── */
@font-face {
  font-family: 'DS';
  src: url('assets/DS-DIGIB.TTF') format('truetype');
  font-weight: bold;
  font-display: swap;
}
.ds { font-family: 'DS', monospace; }

/* ── 4. LED TEXT GLOW ─────────────────────────────────────────────── */
.led-green {
  color: var(--clr-green);
  text-shadow:
    0 0 5px  var(--clr-green-9),
    0 0 15px var(--clr-green-7),
    0 0 30px var(--clr-green-5),
    0 0 60px var(--clr-green-3);
}

.led-green-sm {
  color: var(--clr-green);
  text-shadow:
    0 0 4px var(--clr-green-9),
    0 0 10px var(--clr-green-5);
}

.led-red {
  color: var(--clr-red);
  text-shadow:
    0 0 8px  var(--clr-red-9),
    0 0 20px var(--clr-red-5);
}

.led-amber {
  color: var(--clr-amber);
  text-shadow:
    0 0 6px  var(--clr-amber-9),
    0 0 18px var(--clr-amber-5);
}

/* ── 5. TERMINAL CHASSIS ──────────────────────────────────────────── */
#terminal {
  position: relative;
  width: min(520px, 100vw);
  background-image:
    linear-gradient(135deg, rgba(35,35,35,0.98) 0%, rgba(18,18,18,0.99) 100%),
    url('assets/metal-base.jpg');
  background-size: cover, cover;
  background-blend-mode: overlay;
  border-radius: clamp(12px, 2.5vw, 22px);
  border: 5px solid var(--clr-border-outer);
  box-shadow:
    0 0 0 2px var(--clr-border),
    0 0 0 7px var(--clr-border-rim),
    0 25px 80px rgba(0,0,0,0.95),
    inset 0 2px 15px rgba(255,255,255,0.04);
  padding: clamp(16px, 4vw, 32px);
  padding-bottom: clamp(30px, 6vw, 52px);
}

/* Texture overlays via pseudo-elements */
#terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 100;
  background: url('assets/scratches.webp') center / cover;
  opacity: 0.11;
  mix-blend-mode: overlay;
}
#terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 101;
  background: url('assets/chips.webp') center / cover;
  opacity: 0.07;
  mix-blend-mode: multiply;
}

/* ── 6. INNER LAYOUT STACK ────────────────────────────────────────── */
#inner {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.5vw, 18px);
}

/* ── 7. CORNER SCREWS ─────────────────────────────────────────────── */
.screw {
  position: absolute;
  z-index: 102;
  pointer-events: none;
  width:  clamp(24px, 4.5vw, 40px);
  height: clamp(24px, 4.5vw, 40px);
}
.screw-tl { top:    clamp(8px, 1.8vw, 16px); left:  clamp(8px, 1.8vw, 16px); }
.screw-tr { top:    clamp(8px, 1.8vw, 16px); right: clamp(8px, 1.8vw, 16px); }
.screw-bl { bottom: clamp(8px, 1.8vw, 16px); left:  clamp(8px, 1.8vw, 16px); }
.screw-br { bottom: clamp(8px, 1.8vw, 16px); right: clamp(8px, 1.8vw, 16px); }

/* ── 8. NAMEPLATE ─────────────────────────────────────────────────── */
.nameplate-wrap {
  display: flex;
  justify-content: center;
}
.nameplate-img {
  width: auto;
  height: clamp(72px, 18vw, 130px);
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.np-link {
  position: absolute;
  transition: background-color 0.2s;
}
.np-link:hover { background-color: rgba(255,255,255,0.08); }
.np-1 { top: 38%; right: 3%; width: 45%; height: 12%; }
.np-2 { top: 51%; right: 3%; width: 45%; height: 12%; }
.np-3 { top: 64%; right: 3%; width: 45%; height: 12%; }
.np-4 { bottom: 5%; left: 25%; width: 50%; height: 14%; }

/* ── 9. RADIO ROW ─────────────────────────────────────────────────── */
.radio-row {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 14px);
}

/* Speaker */
.speaker-wrap {
  flex-shrink: 0;
  width:  clamp(44px, 11vw, 70px);
  height: clamp(44px, 11vw, 70px);
}
.speaker-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Radio scale container */
.radio-wrap {
  flex: 1;
  position: relative;
  height: clamp(34px, 8.5vw, 54px);
  border-radius: 4px;
  overflow: visible;
}
.radio-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 4px;
  transition: opacity 0.06s;
}

/* 10 invisible segment zones over the scale */
.radio-segments {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 5;
  pointer-events: none;
}
.seg {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.03);
}
.seg:last-child { border-right: none; }

/* Tuner red indicator line */
.tuner-line {
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--clr-red) 15%,
    var(--clr-red) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 5px  var(--clr-red-9),
    0 0 12px var(--clr-red-5);
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left 0.04s linear;
}

/* Tuner wheel (valcoder) */
.tuner-wrap {
  flex-shrink: 0;
  width:  clamp(44px, 11vw, 70px);
  height: clamp(44px, 11vw, 70px);
  cursor: grab;
  touch-action: none;
}
.tuner-wrap:active { cursor: grabbing; }
.tuner-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
}

/* ── 10. LED PANELS ───────────────────────────────────────────────── */
.led-panel {
  position: relative;
  background: linear-gradient(180deg,
    var(--clr-panel-dark) 0%,
    var(--clr-panel-mid)  50%,
    var(--clr-panel-dark) 100%
  );
  box-shadow:
    inset 0 3px 14px rgba(0,0,0,0.9),
    inset 0 -3px 14px rgba(0,0,0,0.6);
  border: 3px solid var(--clr-border);
  border-radius: 8px;
}
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.28) 2px,
    rgba(0,0,0,0.28) 4px
  );
}

/* ── 11. TIMER ────────────────────────────────────────────────────── */
.timer-panel {
  padding: clamp(4px, 1.2vw, 8px) clamp(10px, 2.5vw, 18px);
}
#timer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2px, 1vw, 6px);
  font-size: clamp(0.85rem, 3.4vw, 1.35rem);
}
.t-unit { display: flex; align-items: baseline; }
.t-lbl  { font-size: 0.6em; opacity: 0.75; margin-left: 2px; }
.digit-slot-sm {
  display: inline-block;
  width: 0.58em;
  text-align: center;
}

/* ── 12. MAIN COUNTER ─────────────────────────────────────────────── */
.counter-panel {
  padding: clamp(6px, 1.8vw, 12px) clamp(12px, 3vw, 22px);
}
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0,50,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,50,0,0.1) 1px, transparent 1px);
  background-size: 4px 4px;
}
#counter {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  font-size: clamp(1.1rem, 4.5vw, 2rem);
  overflow: hidden;
}
.digit-slot {
  display: inline-block;
  width: 0.62em;
  text-align: center;
}

/* ── 13. MAIN CONTENT ROW (tubes + center) ────────────────────────── */
.main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 20px);
}

/* ── 14. TUBES ────────────────────────────────────────────────────── */
.tube-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.tube-wrap {
  position: relative;
  width:  clamp(54px, 12vw, 110px);
  height: clamp(150px, 32vw, 320px);
}
.tube-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 10;
  pointer-events: none;
}
.tube-glow-wrap {
  position: absolute;
  top: 18%; left: 15%;
  width: 70%; height: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}
.tube-glow-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--t-glow);
}
.tube-glass-wrap {
  position: absolute;
  top: 18%; left: 22%;
  width: 56%; height: 52%;
  z-index: 30;
  pointer-events: none;
}
.tube-glass-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
}

/* Tube energy badge */
.tube-badge {
  position: relative;
  margin-top: clamp(4px, 1vw, 8px);
}
.tube-badge-bg {
  width:  clamp(56px, 12vw, 90px);
  height: clamp(28px, 6vw, 44px);
  object-fit: contain;
  display: block;
}
.tube-badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: clamp(0.85rem, 2.8vw, 1.5rem);
}

/* ── 15. CENTER COLUMN ────────────────────────────────────────────── */
.center-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 14px);
}

/* ── 16. BUTTONS ──────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 20px);
}
.btn-control {
  cursor: pointer;
  transition: transform var(--t-btn);
  background: none;
  border: none;
  padding: 0;
  outline: none;
}
.btn-control:active   { transform: scale(0.94) translateY(2px); }
.btn-control:disabled { filter: grayscale(0.6) brightness(0.6); cursor: not-allowed; }
.btn-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  width:  clamp(80px, 20vw, 160px);
  height: clamp(36px, 9vw,  70px);
}

/* ── 17. BOTTOM ROW: badges + lamp + tumbler ──────────────────────── */
.bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 12px);
}

/* Lamp ON/OFF indicator */
.lamp-wrap {
  flex-shrink: 0;
  position: relative;
  width:  clamp(36px, 8vw, 60px);
  height: clamp(36px, 8vw, 60px);
}
.lamp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
#lamp-off { opacity: 1; }
#lamp-on  { opacity: 0; }

/* Tumbler switch */
.tumbler-wrap {
  flex-shrink: 0;
  position: relative;
  width:  clamp(60px, 14vw, 100px);
  height: clamp(28px, 6.5vw, 48px);
  cursor: pointer;
}
.tumbler-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
#tumbler-off { opacity: 1; }
#tumbler-on  { opacity: 0; }

/* ── 18. MARQUEE ──────────────────────────────────────────────────── */
.marquee-panel {
  overflow: hidden;
  padding: clamp(4px, 1.2vw, 8px) 0;
}
#marquee {
  position: relative;
  z-index: 3;
  white-space: nowrap;
  font-size: clamp(0.65rem, 2.4vw, 1rem);
  letter-spacing: 0.08em;
}

/* ── 19. RADIO SCALE STATES ───────────────────────────────────────── */

/* Radio-OFF: всегда виден, базовый слой */
.radio-off-img {
  position: absolute;
  inset: 0;
  opacity: 1 !important;
  animation: none !important;
}

/* Radio-ON: поверх, по умолчанию скрыт */
.radio-on-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.06s;
}

/* OFF state: Radio-ON скрыт */
.radio-wrap.state-off .radio-on-img { opacity: 0; animation: none; }

/* FLICKER state (50-52%): редкие вспышки */
.radio-wrap.state-flicker .radio-on-img { opacity: 1; }

/* JITTER state (52-80%): мигание, интенсивность растёт с зарядом */
.radio-wrap.state-jitter .radio-on-img {
  animation: radio-jitter 0.18s infinite;
}

/* SOLID state (80-100%): стабильно горит */
.radio-wrap.state-solid .radio-on-img { opacity: 1; animation: none; }

@keyframes radio-jitter {
  0%   { opacity: 0.3; }
  15%  { opacity: 1;   }
  30%  { opacity: 0.5; }
  50%  { opacity: 1;   }
  70%  { opacity: 0.7; }
  85%  { opacity: 1;   }
  100% { opacity: 0.4; }
}

/* ── 20. TUBE GLITCH (< 50% charge while powered) ────────────────── */
.tube-glitch .tube-glow-img {
  animation: tube-flicker 0.25s infinite;
}
@keyframes tube-flicker {
  0%, 100% { opacity: var(--glow-base, 0); }
  33%       { opacity: calc(var(--glow-base, 0) * 0.4); }
  66%       { opacity: calc(var(--glow-base, 0) * 1.2); }
}

/* ── 21. CRITICAL STATE (siren) ───────────────────────────────────── */
body.critical-alert {
  animation: body-red-flash 0.35s infinite;
}
@keyframes body-red-flash {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.4) sepia(0.5) hue-rotate(-15deg); }
}

/* ── 22. POWER-OFF DIMMING ────────────────────────────────────────── */
.powered-gate {
  transition: opacity 0.4s ease, filter 0.4s ease;
}
body.power-off .powered-gate {
  opacity: 0.3;
  filter: grayscale(0.8);
  pointer-events: none;
}

/* ── 23. SCROLLBAR ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--clr-void); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }