/* ============================================================
   HOLLER — 1987 SkyMall "voice-activated technology" prototype
   Beige plastic bezel + recessed CRT + segmented LED VU bar
   ============================================================ */

:root {
  --beige:        #d9c9a3;
  --beige-dark:   #a89572;
  --beige-darker: #6e5f43;
  --beige-light:  #ece0bf;
  --label:        #1a1a1a;
  --crt-navy:     #0a1230;
  --crt-navy-dim: #050918;
  --wall:         #f4f3e8;
  --runner:       #ff2e9a;
  --flag:         #ffe34a;
  --led-on:       #6dff5a;
  --led-mid:      #ffd23a;
  --led-hot:      #ff3b3b;
  --led-off:      #20240f;
  --overdrive:    #ff2020;
  --shadow:       rgba(0,0,0,.35);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, p { margin: 0; }

canvas { display: block; }

/* ---------- Body / page ---------- */
body {
  background: var(--label);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--label);
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* ---------- Screen routing ---------- */
.screen { display: none; }

body[data-state="title"]        #screen-title       { display: flex; }
body[data-state="loading"]      #screen-loading     { display: flex; }
body[data-state="denied"]       #screen-denied      { display: flex; }
body[data-state="unsupported"]  #screen-unsupported { display: flex; }
body[data-state="playing"]      #screen-playing     { display: flex; }
body[data-state="countdown"]    #screen-playing     { display: flex; }
body[data-state="finished"]     #screen-finished    { display: flex; }

#countdown { display: none; }
body[data-state="countdown"] #countdown { display: grid; }

body[data-state="countdown"] .footer,
body[data-state="playing"]   .footer { display: none; }

.screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: 720px;
}

/* ============================================================
   TITLE SCREEN
   ============================================================ */
.title-stack {
  text-align: center;
  color: var(--beige);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.logo {
  font-family: "VT323", ui-monospace, monospace;
  font-size: clamp(4rem, 18vw, 8rem);
  line-height: .9;
  letter-spacing: .04em;
  color: var(--runner);
  text-shadow:
    0 0 12px rgba(255, 46, 154, .55),
    0 0 2px rgba(255, 46, 154, .85),
    4px 4px 0 var(--crt-navy);
}

.logo-sub {
  font-family: "VT323", ui-monospace, monospace;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  letter-spacing: .25em;
  color: var(--beige-light);
}

.logo-model {
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--beige-dark);
}

.title-footnote {
  font-family: ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--beige-darker);
  text-transform: uppercase;
}

.title-instructions {
  display: grid;
  gap: .25rem;
  color: var(--led-on);
  font-family: "VT323", ui-monospace, monospace;
  font-size: clamp(1.15rem, 4vw, 1.55rem);
  letter-spacing: .08em;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 7px rgba(109, 255, 90, .55);
}

.title-instructions strong {
  color: var(--flag);
  font-weight: normal;
  text-shadow: 0 0 8px rgba(255, 227, 74, .6);
}

/* ============================================================
   BIG CHUNKY BUTTON (beige plastic key)
   ============================================================ */
.big-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 88px;
  padding: 1rem 2rem;
  background: linear-gradient(180deg, var(--beige-light), var(--beige) 55%, var(--beige-dark));
  border: 2px solid var(--beige-darker);
  border-radius: 10px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.18),
    0 6px 0 var(--beige-darker),
    0 10px 18px var(--shadow);
  color: var(--label);
  font-family: ui-monospace, monospace;
  letter-spacing: .25em;
  transition: transform .07s ease, box-shadow .07s ease;
}

.big-button:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 2px 0 var(--beige-darker),
    0 4px 10px var(--shadow);
}

.big-button__label {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .3em;
}

.big-button__sub {
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--beige-darker);
}

.big-button--small {
  min-height: 64px;
  padding: .8rem 1.4rem;
  font-size: 1rem;
}

.big-button--alt {
  background: linear-gradient(180deg, #faf3e0, #e6d6ad 55%, #b89e6e);
}

/* ============================================================
   TERMINAL BOX (loading / denied)
   ============================================================ */
.terminal-box {
  width: 100%;
  max-width: 480px;
  background: var(--crt-navy);
  border: 3px solid var(--beige-darker);
  border-radius: 6px;
  padding: 1.4rem 1.2rem;
  box-shadow:
    inset 0 0 0 2px var(--crt-navy-dim),
    inset 0 0 30px rgba(109, 255, 90, .08),
    0 8px 18px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  color: var(--led-on);
}

.terminal-box--alert {
  color: var(--led-hot);
  box-shadow:
    inset 0 0 0 2px var(--crt-navy-dim),
    inset 0 0 30px rgba(255, 59, 59, .15),
    0 8px 18px var(--shadow);
}

.terminal-line {
  font-family: "VT323", ui-monospace, monospace;
  font-size: 1.15rem;
  letter-spacing: .04em;
  line-height: 1.2;
  text-shadow: 0 0 6px currentColor;
}

.terminal-line--big {
  font-size: 1.5rem;
}

.terminal-line strong {
  color: var(--flag);
  font-weight: normal;
  text-shadow: 0 0 8px rgba(255, 227, 74, .6);
}

.terminal-rule {
  border: 0;
  border-top: 1px dashed currentColor;
  opacity: .4;
  margin: .25rem 0;
}

/* loader bar */
.loader-bar {
  margin-top: .5rem;
  width: 100%;
  height: 14px;
  background: var(--crt-navy-dim);
  border: 1px solid var(--beige-darker);
  overflow: hidden;
}

.loader-bar__fill {
  width: 0%;
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--led-on) 0 8px,
      var(--crt-navy) 8px 10px
    );
  box-shadow: 0 0 8px var(--led-on);
  transition: width .2s linear;
}

/* ============================================================
   BEZEL (the chunky beige plastic frame)
   ============================================================ */
.bezel {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 28px 26px 22px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, var(--beige-light), var(--beige) 45%, var(--beige-dark));
  border: 2px solid var(--beige-darker);
  border-radius: 18px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -4px 0 rgba(0,0,0,.18),
    inset 0 0 0 6px var(--beige),
    0 16px 28px var(--shadow),
    0 2px 0 var(--beige-darker);
}

/* corner screws */
.bezel::before,
.bezel::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f5ead0 0%, var(--beige-dark) 55%, var(--beige-darker) 100%);
  box-shadow:
    inset 0 0 0 1px var(--beige-darker),
    0 1px 1px rgba(0,0,0,.4);
}

.bezel::before { top: 8px;    left: 8px; }
.bezel::after  { top: 8px;    right: 8px; }

.bezel__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .25rem .6rem;
  color: var(--label);
  font-family: ui-monospace, monospace;
  letter-spacing: .25em;
  font-size: .72rem;
}

.bezel__model {
  padding: 2px 6px;
  border: 1px solid var(--beige-darker);
  border-radius: 3px;
  background: var(--beige-light);
  color: var(--beige-darker);
}

.bezel__name {
  flex: 1;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 1.2rem;
  letter-spacing: .4em;
  color: var(--beige-darker);
}

.bezel__led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--led-off);
  border: 1px solid var(--beige-darker);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  transition: background .1s ease, box-shadow .1s ease;
}

.bezel__led.is-overdrive {
  background: var(--overdrive);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,.4),
    0 0 8px var(--overdrive),
    0 0 16px rgba(255, 32, 32, .6);
}

/* ---------- CRT recessed screen ---------- */
.screen-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--crt-navy);
  border: 4px solid var(--crt-navy-dim);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px #000,
    inset 0 6px 14px rgba(0,0,0,.6),
    inset 0 -4px 12px rgba(0,0,0,.55),
    inset 0 0 60px rgba(0,0,0,.35);
}

#maze-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.28) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}

.phosphor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(109, 255, 90, .07) 0%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.55) 100%
  );
}

/* HUD over the CRT */
.hud {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-family: "VT323", ui-monospace, monospace;
  pointer-events: none;
  color: var(--led-on);
  text-shadow: 0 0 6px currentColor;
}

.hud--top { top: 0; }

.hud__timer {
  font-size: 1.4rem;
  letter-spacing: .1em;
}

.hud__word {
  font-size: 1.4rem;
  letter-spacing: .2em;
  color: var(--flag);
  text-shadow: 0 0 8px rgba(255, 227, 74, .6);
  opacity: 0;
  transition: opacity .12s ease;
}

.hud__word.is-visible { opacity: 1; }

/* ============================================================
   VU BAR (12 segmented LED cells, injected by JS)
   ============================================================ */
.bezel__controls {
  padding: .85rem .25rem 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: stretch;
}

.vu-bar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--crt-navy-dim);
  border: 1px solid var(--beige-darker);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
}

.vu-cell {
  height: 14px;
  background: var(--led-off);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  transition: background .04s linear, box-shadow .04s linear;
}

.vu-cell:nth-child(-n+8).is-lit {
  background: var(--led-on);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 0 6px var(--led-on);
}

.vu-cell:nth-child(9).is-lit,
.vu-cell:nth-child(10).is-lit {
  background: var(--led-mid);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 0 6px var(--led-mid);
}

.vu-cell:nth-child(11).is-lit,
.vu-cell:nth-child(12).is-lit {
  background: var(--led-hot);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 0 8px var(--led-hot);
}

.vu-bar__label {
  font-family: ui-monospace, monospace;
  font-size: .65rem;
  letter-spacing: .3em;
  color: var(--label);
  text-align: center;
}

/* ============================================================
   COUNTDOWN overlay
   ============================================================ */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 24, .82);
  place-items: center;
  z-index: 50;
  font-family: "VT323", ui-monospace, monospace;
  color: var(--runner);
}

#countdown-number {
  font-size: clamp(8rem, 30vw, 16rem);
  line-height: 1;
  text-shadow:
    0 0 20px rgba(255, 46, 154, .8),
    0 0 4px rgba(255, 46, 154, 1);
  animation: countpulse .9s ease-in-out infinite;
}

@keyframes countpulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: .75; }
}

/* ============================================================
   RESULT SCREEN
   ============================================================ */
.result-card {
  width: 100%;
  max-width: 480px;
  background: var(--beige);
  border: 2px solid var(--beige-darker);
  border-radius: 12px;
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.18),
    0 12px 22px var(--shadow);
  color: var(--label);
  text-align: center;
}

.result-card__label {
  font-family: ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .35em;
  color: var(--beige-darker);
}

.result-card__time {
  font-family: "VT323", ui-monospace, monospace;
  font-size: clamp(3.5rem, 14vw, 5.5rem);
  line-height: 1;
  color: var(--crt-navy);
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.result-card__unit {
  font-family: ui-monospace, monospace;
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--beige-darker);
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  width: 100%;
}

.stat {
  background: var(--beige-light);
  border: 1px solid var(--beige-darker);
  border-radius: 6px;
  padding: .55rem .25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

.stat__label {
  font-family: ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .25em;
  color: var(--beige-darker);
}

.stat__value {
  font-family: "VT323", ui-monospace, monospace;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--crt-navy);
}

.stat__unit {
  font-family: ui-monospace, monospace;
  font-size: .55rem;
  letter-spacing: .25em;
  color: var(--beige-darker);
}

#trace-canvas {
  width: 200px;
  height: 200px;
  background: var(--crt-navy);
  border: 3px solid var(--crt-navy-dim);
  border-radius: 4px;
  image-rendering: pixelated;
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 20px rgba(0,0,0,.5);
}

.scoreboard {
  width: 100%;
  background: var(--crt-navy);
  border: 3px solid var(--crt-navy-dim);
  border-radius: 5px;
  padding: .75rem;
  color: var(--led-on);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 24px rgba(109,255,90,.08);
}

.scoreboard__header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-shadow: 0 0 6px currentColor;
  border-bottom: 1px dashed rgba(109,255,90,.45);
  padding-bottom: .35rem;
}

.scoreboard__status {
  color: var(--flag);
  text-align: right;
}

.scoreboard__list {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: grid;
  gap: .2rem;
}

.scoreboard__row,
.scoreboard__empty {
  display: grid;
  grid-template-columns: 2.5rem 1fr 4rem;
  gap: .45rem;
  align-items: center;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 1.2rem;
  letter-spacing: .12em;
  text-align: left;
}

.scoreboard__row span:last-child {
  text-align: right;
  color: var(--flag);
}

.scoreboard__row.is-current {
  color: var(--flag);
  text-shadow: 0 0 8px rgba(255,227,74,.7);
}

.scoreboard__empty {
  grid-template-columns: 1fr;
  color: var(--beige-dark);
  text-align: center;
}

.initials-form {
  margin-top: .75rem;
  border-top: 1px dashed rgba(109,255,90,.45);
  padding-top: .65rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: stretch;
}

.initials-form[hidden] { display: none; }

.initials-form label {
  font-family: ui-monospace, monospace;
  font-size: .65rem;
  letter-spacing: .3em;
  color: var(--flag);
  text-align: center;
}

.initials-form__row {
  display: flex;
  gap: .5rem;
}

.initials-form input {
  min-width: 0;
  flex: 1;
  background: var(--crt-navy-dim);
  border: 1px solid var(--beige-darker);
  border-radius: 4px;
  color: var(--led-on);
  font-family: "VT323", ui-monospace, monospace;
  font-size: 2rem;
  letter-spacing: .35em;
  text-align: center;
  text-transform: uppercase;
  padding: .25rem .3rem;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.65);
}

.initials-form input:focus-visible {
  outline: 2px solid var(--flag);
  outline-offset: 2px;
}

.initials-form .btn-secondary {
  min-height: 0;
  margin-top: 0;
  padding: .45rem .7rem;
  font-size: .72rem;
}

.result-buttons {
  display: flex;
  gap: .75rem;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER + small links
   ============================================================ */
.footer {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: .75rem;
  pointer-events: none;
}

.footer .btn-link { pointer-events: auto; }

.btn-link {
  min-height: 44px;
  padding: .5rem 1rem;
  font-family: ui-monospace, monospace;
  font-size: .75rem;
  letter-spacing: .25em;
  color: var(--beige);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--beige-darker);
  background: transparent;
  border: 0;
}

.btn-link:hover { color: var(--beige-light); }

.btn-secondary {
  min-height: 48px;
  margin-top: .4rem;
  padding: .6rem 1.2rem;
  background: linear-gradient(180deg, var(--beige-light), var(--beige) 55%, var(--beige-dark));
  border: 2px solid var(--beige-darker);
  border-radius: 6px;
  color: var(--label);
  font-family: ui-monospace, monospace;
  font-size: .85rem;
  letter-spacing: .25em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 4px 0 var(--beige-darker),
    0 6px 12px var(--shadow);
}

.btn-secondary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 2px 0 var(--beige-darker),
    0 3px 8px var(--shadow);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 380px) {
  .bezel {
    padding: 20px 16px 16px;
    border-radius: 14px;
  }
  .bezel::before,
  .bezel::after { width: 8px; height: 8px; top: 6px; }
  .bezel::before { left: 6px; }
  .bezel::after  { right: 6px; }

  .big-button { padding: .85rem 1.4rem; }
  .big-button__label { font-size: 1.15rem; }
  .terminal-box { padding: 1.1rem .9rem; }
  .result-card { padding: 1.1rem .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  #countdown-number { animation: none; }
}