/* ==========================================================================
   dawg4037.com — CRT terminal
   A physical monitor: curved glass, phosphor bloom, aperture grille,
   scanlines, rolling refresh bar, degauss on power-on.
   ========================================================================== */

:root {
  --p:      #39FF6A;              /* green phosphor */
  --p-dim:  #1E8F3C;
  --p-glow: rgba(57,255,106,.55);
  --p-amber:#FFB000;
}

/* ---------------------------------------------------------------- monitor */
.crt {
  position: relative;
  background: linear-gradient(180deg,#3A3F44 0%,#2A2E33 6%,#23272B 55%,#1B1E22 100%);
  border: 1px solid #14171A;
  border-radius: 22px 22px 16px 16px;
  padding: 26px 26px 0;
  box-shadow:
    0 40px 70px -30px rgba(10,14,18,.65),
    0 2px 0 rgba(255,255,255,.09) inset,
    0 -2px 0 rgba(0,0,0,.5) inset;
}
.crt::before {                     /* moulding seam */
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 16px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- glass */
.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 26px / 34px;       /* tube curvature */
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 45%, #0B140E 0%, #050906 65%, #020403 100%);
  box-shadow:
    0 0 0 10px #17191C,
    0 0 0 11px #0D0F11,
    0 14px 26px rgba(0,0,0,.6) inset,
    0 0 60px rgba(57,255,106,.06) inset;
  animation: crt-flicker 5.2s infinite steps(1, end);
}
@keyframes crt-flicker {
  0%,96%,100% { filter: brightness(1); }
  97%         { filter: brightness(1.06); }
  98%         { filter: brightness(.94); }
  99%         { filter: brightness(1.03); }
}

.screen-inner {
  position: absolute; inset: 0;
  padding: 34px 38px;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(11px, 1.35vw, 15px);
  line-height: 1.55;
  color: var(--p);
  text-shadow: 0 0 1px var(--p), 0 0 7px var(--p-glow), 0 0 22px rgba(57,255,106,.22);
  white-space: pre-wrap;
  overflow: hidden;
  transform: scale(1.006);
}
.screen-inner .dim  { color: var(--p-dim);  text-shadow: 0 0 5px rgba(30,143,60,.4); }
.screen-inner .warn { color: var(--p-amber); text-shadow: 0 0 7px rgba(255,176,0,.5); }
.screen-inner .hi   { color: #CFFFE0;        text-shadow: 0 0 8px var(--p-glow); }

.cursor {
  display: inline-block;
  width: .62em; height: 1.02em;
  vertical-align: -.16em;
  background: var(--p);
  box-shadow: 0 0 8px var(--p-glow);
  animation: crt-blink 1.06s steps(1, end) infinite;
}
@keyframes crt-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ---------------------------------------------------------------- overlays */
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px,
    rgba(0,0,0,.30) 2px, rgba(0,0,0,.30) 3px
  );
  mix-blend-mode: multiply;
  opacity: .9;
}
.mask {                             /* aperture grille */
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    rgba(255,0,0,.055) 0px,
    rgba(0,255,0,.055) 1px,
    rgba(0,0,255,.055) 2px,
    rgba(0,0,0,0) 3px
  );
}
.roll {
  position: absolute; left: 0; right: 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.035), rgba(255,255,255,0));
  animation: crt-roll 7.5s linear infinite;
}
@keyframes crt-roll { from { top: -25%; } to { top: 105%; } }

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 110% at 50% 45%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
}
.glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 46%);
}

/* ---------------------------------------------------------------- power-on */
.screen.booting .screen-inner { animation: crt-degauss 1.1s ease-out; }
@keyframes crt-degauss {
  0%   { transform: scaleY(.004) scaleX(1.2); filter: brightness(3); }
  35%  { transform: scaleY(.05)  scaleX(1.05); filter: brightness(2); }
  70%  { transform: scaleY(1.02) scaleX(1);    filter: brightness(1.25); }
  100% { transform: scale(1.006);              filter: brightness(1); }
}

/* ---------------------------------------------------------------- chin */
.chin {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 6px 18px;
}
.badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  color: #7B848B;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.badge span { color: #4E565C; font-weight: 400; letter-spacing: .14em; }

.controls { display: flex; align-items: center; gap: 14px; }
.knob {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4C5359, #22262A);
  box-shadow: 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.07) inset;
}
.pwr {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px;
  border: 0; background: none; cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #6E777D;
}
.pwr:hover { color: #AEB6BB; }
.led-pwr {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1E8F3C;
  box-shadow: 0 0 7px #39FF6A, 0 0 2px #39FF6A inset;
}
.led-pwr.off { background: #2A2E33; box-shadow: none; }

/* ---------------------------------------------------------------- stand */
.stand {
  width: 34%; height: 16px; margin: 0 auto;
  background: linear-gradient(180deg,#23272B,#171A1D);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.6);
}
.base {
  width: 52%; height: 11px; margin: 0 auto;
  background: linear-gradient(180deg,#2A2E33,#14171A);
  border-radius: 8px;
  box-shadow: 0 16px 26px -12px rgba(0,0,0,.55);
}

@media (prefers-reduced-motion: reduce) {
  .screen, .roll, .cursor { animation: none; }
  .screen.booting .screen-inner { animation: none; }
}