:root {
  color-scheme: dark;
  --ink: #e9f1e5;
  --dim: #899087;
  --acid: #c7ff42;
  --hot: #ff4d75;
  --cyan: #62f1d2;
  --panel: #111510;
  --line: #30362e;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #070907; }

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background:
    radial-gradient(circle at 50% 10%, rgba(199,255,66,.08), transparent 31rem),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.012) 55px),
    #080a08;
}

button { font: inherit; }

.console {
  width: min(1440px, 100%);
  height: 100svh;
  min-height: 620px;
  margin: auto;
  padding: clamp(14px, 2.2vw, 34px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(11px, 1.5vw, 22px);
}

.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.brand { font: 700 clamp(21px, 2.4vw, 34px)/.82 "Arial Narrow", Impact, sans-serif; letter-spacing: -.08em; }
.brand span, .brand strong { display: block; }
.brand strong { color: var(--acid); font-weight: 700; transform: skew(-8deg); transform-origin: left; }

.status-strip { display: flex; gap: clamp(26px, 5vw, 72px); text-align: center; }
.status-strip div { min-width: 90px; }
.status-strip small, .dial-readout small { display: block; color: var(--dim); font-size: 9px; letter-spacing: .2em; margin-bottom: 5px; }
.status-strip b { font-size: clamp(17px, 2vw, 25px); font-weight: 400; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.status-strip div:last-child b { color: var(--acid); }

.icon-button { justify-self: end; border: 1px solid var(--line); color: var(--dim); background: transparent; padding: 9px 12px; font-size: 9px; letter-spacing: .1em; cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }

.receiver { min-height: 0; border: 1px solid var(--line); background: #080b09; position: relative; display: grid; grid-template-rows: auto 1fr auto; box-shadow: inset 0 0 80px rgba(0,0,0,.65); overflow: hidden; }
.receiver::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
.receiver-topline { display: flex; justify-content: space-between; padding: 11px 16px 8px; color: var(--dim); font-size: 9px; letter-spacing: .11em; border-bottom: 1px solid #1d211c; }
.receiver-topline p { margin: 0; }
#callout { color: var(--acid); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 9px var(--hot); }
#game { display: block; width: 100%; height: 100%; min-height: 260px; touch-action: none; cursor: ew-resize; }
.frequency-scale { display: flex; justify-content: space-between; padding: 7px 5.5% 10px; color: #5f665d; font-size: 9px; border-top: 1px solid #1d211c; }

.deck { display: grid; grid-template-columns: minmax(160px, .55fr) 2fr minmax(130px, .45fr); gap: clamp(18px, 4vw, 60px); align-items: center; border-top: 1px solid var(--line); padding-top: 15px; }
.dial-readout strong { font: 400 clamp(31px, 4.5vw, 60px)/1 "SFMono-Regular", Consolas, monospace; letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.dial-readout > span { color: var(--dim); font-size: 10px; margin-left: 8px; }
.lock-label { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .16em; color: var(--dim); margin-bottom: 9px; }
.lock-label b { color: var(--ink); font-weight: 400; }
.meter { position: relative; height: 13px; background: #1a1f18; border: 1px solid #353c32; overflow: visible; }
.meter i { display: block; height: 100%; width: 0%; background: var(--acid); box-shadow: 0 0 22px rgba(199,255,66,.55); transition: width .05s linear; }
.meter em { position: absolute; left: 40%; top: -5px; width: 2px; height: 21px; background: var(--ink); box-shadow: 0 0 5px #fff; }
.lock-panel p { margin: 8px 0 0; color: var(--dim); font-size: 9px; letter-spacing: .09em; }
.lock-button { justify-self: stretch; min-height: 70px; color: #0a0c09; background: var(--acid); border: 0; font: 700 17px/1 "Arial Narrow", Impact, sans-serif; letter-spacing: .08em; transform: skew(-4deg); cursor: pointer; box-shadow: 6px 6px 0 #394619; touch-action: none; }
.lock-button span { font-size: 11px; }
.lock-button:active, .lock-button.active { transform: skew(-4deg) translate(5px,5px); box-shadow: 1px 1px 0 #394619; background: var(--hot); }

footer { display: flex; justify-content: center; gap: 42px; color: #676d65; font-size: 8px; letter-spacing: .09em; }

.overlay { position: fixed; z-index: 5; inset: 0; display: grid; place-items: center; background: rgba(5,7,5,.83); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .24s ease; padding: 20px; }
.overlay.visible { opacity: 1; pointer-events: auto; }
.poster { width: min(680px, 100%); background: #e5eadf; color: #0a0d09; padding: clamp(25px, 5vw, 58px); position: relative; box-shadow: 16px 16px 0 rgba(199,255,66,.16); }
.poster::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(172deg, transparent 0 6px, #656b62 7px); }
.poster > * { position: relative; }
.eyebrow { margin: 0 0 10px; color: #646a61; font-size: 10px; letter-spacing: .23em; }
.poster h1 { font: 700 clamp(47px, 9vw, 92px)/.73 "Arial Narrow", Impact, sans-serif; letter-spacing: -.085em; margin: 0 0 28px; }
.poster h1 em { color: #ec315d; font-style: normal; margin-left: 11%; }
.intro { max-width: 550px; font-size: 12px; line-height: 1.65; }
.howto { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; margin: 25px 0; border-top: 1px solid #abb0a7; padding-top: 16px; }
.howto div { display: grid; grid-template-columns: 24px 1fr; gap: 5px; align-items: baseline; }
.howto b { color: #ec315d; font-size: 10px; }
.howto span { font: 700 12px "Arial Narrow", Impact, sans-serif; }
.howto p { grid-column: 2; margin: 0; color: #585e56; font-size: 9px; line-height: 1.45; }
.start-button { width: 100%; padding: 18px 20px; border: 0; color: #11150f; background: var(--acid); font: 700 14px "Arial Narrow", Impact, sans-serif; letter-spacing: .08em; display: flex; justify-content: space-between; cursor: pointer; }
.start-button:hover, .start-button:focus-visible { background: #d8ff79; outline: 3px solid #11150f; outline-offset: 2px; }
.best { text-align: center; color: #62685e; font-size: 9px; letter-spacing: .18em; margin: 13px 0 0; }

@media (max-width: 720px) {
  .console { min-height: 560px; padding: 12px; gap: 10px; }
  .masthead { grid-template-columns: 1fr auto; }
  .status-strip { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 8px; }
  .status-strip div { min-width: 0; }
  .icon-button { grid-column: 2; grid-row: 1; }
  .receiver-topline p:last-child { display: none; }
  #game { min-height: 210px; }
  .deck { grid-template-columns: 1fr 100px; gap: 12px; }
  .dial-readout { display: none; }
  .lock-button { min-height: 62px; }
  footer { display: none; }
  .howto { gap: 9px; }
  .howto div { display: block; }
  .howto b, .howto span { display: block; margin-bottom: 4px; }
  .howto p { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}