:root {
  --ink: #101715;
  --lake: #132522;
  --lake-2: #203a34;
  --phosphor: #9ff58d;
  --phosphor-hot: #d7ffb5;
  --amber: #efb454;
  --copper: #a86c3f;
  --cream: #d8cfb0;
  --paper: #c2b993;
  --bakelite: #2d201b;
  --line: rgba(216, 207, 176, .25);
  --shadow: #080d0c;
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 12% 15%, rgba(101, 160, 137, .08), transparent 28rem),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.018) 80px),
    var(--ink);
  font-family: var(--mono);
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.topbar {
  height: 72px;
  padding: 0 clamp(20px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 16, 14, .88);
  backdrop-filter: blur(14px);
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 700 14px/1 var(--display); letter-spacing: .12em; }
.brand b { color: var(--phosphor); }
.brand-mark { width: 30px; display: flex; align-items: center; gap: 3px; }
.brand-mark i { width: 7px; background: var(--phosphor); box-shadow: 0 0 9px rgba(159,245,141,.4); }
.brand-mark i:nth-child(1) { height: 10px; }
.brand-mark i:nth-child(2) { height: 22px; }
.brand-mark i:nth-child(3) { height: 15px; }
.topbar nav { display: flex; align-items: center; gap: 30px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.topbar nav a { color: var(--paper); text-decoration: none; }
.topbar nav a:hover { color: var(--phosphor); }
.station-live { color: var(--phosphor); display: flex; align-items: center; gap: 8px; }
.station-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; animation: pulse 1.8s infinite; }

.hero {
  min-height: min(900px, 100vh);
  padding: 148px clamp(22px, 6vw, 96px) 80px;
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(10,16,14,.94) 0%, rgba(10,16,14,.82) 34%, rgba(10,16,14,.17) 72%, rgba(10,16,14,.2)),
    linear-gradient(0deg, var(--ink), transparent 24%),
    url("../assets/images/waveband-station.png") 68% center / cover no-repeat;
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(5,10,9,.08) 4px); pointer-events:none; }
.hero-copy { max-width: 650px; }
.eyebrow { color: var(--amber); font: 700 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; margin: 0; }
h1 { margin: 20px 0 28px; font-size: clamp(58px, 8.5vw, 128px); line-height: .79; letter-spacing: -.035em; }
h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--phosphor); text-shadow: 0 0 24px rgba(159,245,141,.12); }
.lede { max-width: 580px; color: #c8c4ad; font-size: clamp(13px, 1.3vw, 16px); line-height: 1.85; }
.lede strong { color: var(--phosphor); }
.hero-cta { display: inline-flex; gap: 32px; align-items: center; margin-top: 30px; padding: 16px 18px; border: 1px solid rgba(159,245,141,.5); text-decoration: none; color: var(--phosphor); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: rgba(20,42,35,.45); }
.hero-cta:hover { background: var(--phosphor); color: var(--ink); }
.hero-stamp { position: absolute; right: 4vw; bottom: 70px; width: 108px; aspect-ratio: 1; border: 1px solid rgba(216,207,176,.5); border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(-7deg); color: rgba(216,207,176,.75); }
.hero-stamp span, .hero-stamp small { font-size: 8px; letter-spacing: .18em; }
.hero-stamp strong { font: 50px/.8 var(--display); }

.game-section { max-width: 1440px; margin: auto; padding: 100px clamp(14px, 4vw, 64px); }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin: 0 auto 34px; max-width: 1240px; }
.section-intro h2, .protocol h2 { font-size: clamp(40px, 6vw, 80px); line-height: .9; }
.section-intro > p { color: var(--paper); max-width: 570px; font-size: 12px; line-height: 1.8; }

.receiver {
  max-width: 1240px;
  margin: auto;
  position: relative;
  padding: 22px;
  border: 2px solid #554b3c;
  border-radius: 18px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.06), transparent 16% 80%, rgba(0,0,0,.2)),
    repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
    #57513e;
  box-shadow: 0 35px 80px rgba(0,0,0,.55), inset 0 0 0 4px #2a2820, inset 0 0 0 6px #736c55;
  overflow: hidden;
}
.receiver-top { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 8px 14px; color: #22231d; }
.plate { font-size: 8px; letter-spacing: .08em; background: #b6a97f; border: 1px solid #292b24; padding: 5px 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.plate span { opacity: .55; }
.vent { height: 10px; width: 45%; background: repeating-linear-gradient(90deg, #282820 0 4px, transparent 4px 10px); opacity: .65; }
.power-lamp { font-size: 8px; display: flex; align-items: center; gap: 7px; color: #1e201b; }
.power-lamp i { width: 10px; height: 10px; border-radius: 50%; background: #5c3520; box-shadow: inset 1px 1px 3px #160b06; }
.receiver.is-running .power-lamp i { background: var(--amber); box-shadow: 0 0 12px var(--amber), inset 1px 1px 2px white; }
.receiver-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(230px, .9fr); gap: 18px; }
.crt-wrap { min-width: 0; padding: 16px 16px 10px; border-radius: 12px; background: #181714; box-shadow: inset 0 0 20px #000, 0 1px 0 rgba(255,255,255,.15); }
.crt-bezel { position: relative; aspect-ratio: 1.7; overflow: hidden; border: 9px solid #302d26; border-radius: 12% / 18%; background: #06120d; box-shadow: inset 0 0 32px #000, 0 0 0 1px #6c6653; }
#scope { width: 100%; height: 100%; display: block; filter: contrast(1.1); }
.scanlines { position: absolute; inset: 0; pointer-events: none; opacity: .23; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); }
.scope-labels { position: absolute; inset: 12px 18px auto; display: flex; justify-content: space-between; color: rgba(159,245,141,.45); font-size: 8px; }
.scope-state { position: absolute; right: 18px; bottom: 13px; color: var(--phosphor); font-size: 10px; letter-spacing: .12em; text-shadow: 0 0 8px currentColor; }
.crt-caption { display: flex; justify-content: space-between; margin-top: 10px; color: #716c57; font-size: 8px; letter-spacing: .16em; }
.serial { color: #a97a4d; }

.instrument-panel { padding: 15px; border-radius: 7px; color: #25241d; background: linear-gradient(135deg, #c9c09f, #9e9576); box-shadow: inset 0 0 0 2px #ded5b4, inset 0 0 18px rgba(36,32,20,.25); }
.channel-readout { border-bottom: 1px solid rgba(40,39,31,.35); padding-bottom: 12px; }
.channel-readout > span, .meter-label { font-size: 8px; letter-spacing: .16em; }
.channel-readout strong { display: block; font: 58px/.9 var(--display); letter-spacing: -.04em; }
.channel-readout strong small { font: 13px var(--mono); opacity: .5; margin-left: 4px; }
.channel-readout p { margin: 8px 0 0; min-height: 28px; font-size: 10px; line-height: 1.4; letter-spacing: .08em; }
.magic-eye { margin: 18px auto 8px; width: min(126px, 80%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0d1c15 0 20%, #13271c 21% 42%, #090d0b 43% 100%); border: 9px solid #25251e; box-shadow: inset 0 0 18px #000, 0 0 0 1px #e6dcb8; position: relative; overflow: hidden; }
.magic-eye::before, .magic-eye::after { content:""; position:absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from -35deg, transparent 0 calc(45% - var(--eye, 0%)), rgba(159,245,141,.85) calc(48% - var(--eye, 0%)) calc(52% + var(--eye, 0%)), transparent calc(55% + var(--eye, 0%))); filter: blur(2px); }
.magic-eye::after { transform: rotate(180deg); }
.eye-core { position: absolute; inset: 39%; border-radius: 50%; background: #cbffab; box-shadow: 0 0 20px var(--phosphor); opacity: calc(.15 + var(--strength, 0)); }
.meter-label { text-align: center; display: block; }
.mini-meter { margin-top: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 8px; }
.meter-track { height: 8px; background: #4b4a3b; border: 1px solid #333229; }
.meter-track i { display: block; height: 100%; width: 0; background: var(--phosphor); box-shadow: 0 0 6px #6dff77; }
.readings { margin: 20px 0 0; border-top: 1px solid rgba(40,39,31,.35); }
.readings div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(40,39,31,.22); }
.readings dt { font-size: 8px; letter-spacing: .12em; }
.readings dd { margin: 0; font-weight: 700; font-size: 12px; }

.tuner-deck { margin-top: 18px; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 26px; background: #1f1d18; border-radius: 8px; box-shadow: inset 0 0 18px #090908, 0 1px 0 rgba(255,255,255,.13); }
.frequency-header { display: flex; justify-content: space-between; color: #a59d82; font-size: 8px; letter-spacing: .12em; }
.frequency-header strong { color: var(--amber); font-size: 14px; }
.frequency-scale { height: 64px; position: relative; margin: 8px 12px 0; border: 1px solid #625d4c; background: linear-gradient(#d9cca1, #a99c75); color: #25231b; box-shadow: inset 0 3px 8px rgba(0,0,0,.25); }
.ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #504b3b 0 1px, transparent 1px 1.25%); opacity: .65; clip-path: polygon(0 0,100% 0,100% 32%,0 32%); }
.frequency-scale > span { position: absolute; bottom: 8px; transform: translateX(-50%); font: 9px var(--mono); }
.frequency-scale > span:first-of-type { transform: none; }
.frequency-scale > span:last-of-type { transform: translateX(-100%); }
.needle { position: absolute; z-index: 2; left: 43%; top: -6px; bottom: -6px; width: 2px; background: #b22e25; box-shadow: 0 0 2px #fff; transition: left .05s linear; }
.ghost-band { position: absolute; left: 40%; top: 0; bottom: 0; width: 8%; opacity: 0; background: rgba(94, 164, 92, .22); border-inline: 1px dashed rgba(33,74,42,.55); transition: opacity .3s; }
.receiver.is-locking .ghost-band { opacity: 1; }
.control-cluster { display: flex; align-items: center; gap: 12px; }
.tune-button, .main-knob, .overlay-card button { font-family: var(--mono); cursor: pointer; color: var(--cream); }
.tune-button { width: 72px; height: 72px; border: 1px solid #0a0a09; border-radius: 7px; background: linear-gradient(#4a3328, #231915); box-shadow: inset 0 0 0 2px #5d4232, 0 4px 0 #0d0b09; }
.tune-button span { display: block; color: var(--amber); font-size: 20px; }
.tune-button small, .main-knob small { display:block; margin-top: 4px; font-size: 7px; letter-spacing: .12em; opacity: .7; }
.tune-button:active, .tune-button.active { transform: translateY(3px); box-shadow: inset 0 0 8px #000, 0 1px 0 #0d0b09; }
.main-knob { width: 96px; height: 96px; border: 4px dashed #44382c; border-radius: 50%; background: repeating-conic-gradient(#99613a 0 5deg, #c18151 5deg 10deg); box-shadow: inset 0 0 0 10px rgba(43,28,20,.55), 0 6px 0 #0c0b09, 0 0 0 2px #ad8d62; text-shadow: 0 1px #000; }
.main-knob:hover { filter: brightness(1.15); }
.key-hint { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; padding-top: 4px; color: #8e8872; font-size: 9px; }
kbd { display:inline-grid; place-items:center; min-width: 22px; height: 22px; margin-right: 4px; border: 1px solid #5a5545; border-radius: 3px; background: #2c2a23; box-shadow: 0 2px #0b0b09; color: #bbb397; font: 9px var(--mono); }
.key-hint strong { color: var(--phosphor); font-weight: 400; letter-spacing: .05em; }
.receiver-screws { position: absolute; inset: 10px; pointer-events: none; }
.receiver-screws i { position:absolute; width: 7px; height: 7px; border-radius: 50%; background: #24231d; box-shadow: inset 1px 1px #827a61; }
.receiver-screws i:nth-child(1) { left:0; top:0 }.receiver-screws i:nth-child(2) { right:0; top:0 }.receiver-screws i:nth-child(3) { left:0; bottom:0 }.receiver-screws i:nth-child(4) { right:0; bottom:0 }

.game-overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(7,13,11,.79); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; transition: .3s; }
.game-overlay.is-visible { opacity: 1; visibility: visible; }
.overlay-card { width: min(100%, 520px); min-width: 0; padding: clamp(26px,5vw,52px); border: 1px solid rgba(216,207,176,.35); background: #14221d; box-shadow: 12px 12px 0 rgba(0,0,0,.28), inset 0 0 35px rgba(159,245,141,.04); text-align: center; overflow-wrap: anywhere; }
.overlay-card h2 { margin: 14px 0 20px; font-size: clamp(37px, 5vw, 62px); line-height: .9; }
.overlay-card p:not(.eyebrow) { color: #bcb79f; font-size: 11px; line-height: 1.8; }
.overlay-card button { margin: 12px 0; padding: 16px 22px; border: 1px solid var(--phosphor); background: var(--phosphor); color: var(--ink); text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.overlay-card button:hover { background: transparent; color: var(--phosphor); }
.overlay-card > small { display:block; color: #77735f; font-size: 8px; }

.protocol { max-width: 1240px; margin: 0 auto; padding: 70px clamp(22px,4vw,64px) 130px; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,8vw,120px); }
.protocol ol { list-style: none; margin:0; padding:0; border-top: 1px solid var(--line); }
.protocol li { display:grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 25px 0; border-bottom:1px solid var(--line); }
.protocol li > span { color:var(--amber); font-size:11px; }
.protocol h3 { font-size: 22px; letter-spacing:.03em; }
.protocol li p { margin:9px 0 0; color:#918d7a; font-size:10px; line-height:1.7; }
.field-note { max-width: 1110px; margin: 0 auto 130px; padding: 44px clamp(24px,6vw,70px); position:relative; border:1px solid rgba(239,180,84,.35); background: #1d211a; overflow:hidden; }
.note-number { position:absolute; right:-8px; bottom:-34px; color:rgba(239,180,84,.07); font: 220px/.8 var(--display); }
.field-note blockquote { position:relative; max-width:760px; margin:0; font: clamp(25px,4vw,45px)/1.15 var(--display); text-transform:uppercase; }
.field-note p { color:var(--amber); font-size:9px; margin:24px 0 0; }
footer { padding:38px clamp(22px,5vw,78px); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
footer > p { color:#767262; font-size:8px; text-align:center; }
footer nav { justify-self:end; display:flex; gap:18px; }
footer nav a { color:#8e8977; font-size:8px; text-transform:uppercase; text-decoration:none; }

.legal { min-height: calc(100vh - 72px); padding: 150px 22px 80px; }
.legal article { max-width: 760px; margin:auto; }
.legal h1 { font-size: clamp(48px,8vw,90px); }
.legal h2 { margin-top:38px; font-size:26px; }
.legal p, .legal li { color:#aaa58f; font-size:12px; line-height:1.8; }
.back-link { display:inline-block; margin-bottom:32px; color:var(--phosphor); font-size:10px; text-transform:uppercase; text-decoration:none; }

@keyframes pulse { 50% { opacity:.3; } }
@media (max-width: 820px) {
  .topbar nav a { display:none; }
  .hero { min-height: 760px; background-position: 58% center; }
  .hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(10,16,14,.88), rgba(10,16,14,.35)); }
  .hero-stamp { display:none; }
  .section-intro, .protocol { grid-template-columns:1fr; }
  .receiver-grid { grid-template-columns:1fr; }
  .instrument-panel { display:grid; grid-template-columns:1fr 120px; gap:0 20px; }
  .magic-eye { grid-column:2; grid-row:1 / span 2; margin:0; align-self:center; }
  .meter-label { display:none; }
  .mini-meter, .readings { grid-column:1/-1; }
  .readings { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .readings div { display:block; }
  .readings dd { margin-top:5px; }
  .tuner-deck { grid-template-columns:1fr; }
  .control-cluster { justify-content:center; }
  .key-hint { flex-direction:column; gap:10px; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer nav { justify-self:center; }
}
@media (max-width: 520px) {
  .topbar { height:62px; padding-inline:16px; }
  .topbar .station-live { font-size:0; }
  .hero { min-height:700px; padding:120px 20px 60px; background-position:61% center; }
  h1 { font-size:58px; }
  .game-section { width:100%; max-width:100vw; padding:72px 8px; overflow:hidden; }
  .section-intro { padding-inline:12px; }
  .receiver { width:100%; max-width:100%; min-width:0; padding:13px; border-radius:12px; }
  .receiver-top { padding-left:4px; }
  .vent { display:none; }
  .crt-wrap { padding:9px; }
  .crt-bezel { border-width:6px; }
  .instrument-panel { grid-template-columns:1fr 92px; padding:12px; }
  .channel-readout strong { font-size:46px; }
  .tuner-deck { padding:12px; }
  .frequency-scale { margin-inline:0; }
  .tune-button { width:62px; height:62px; }
  .main-knob { width:80px; height:80px; }
  .game-overlay { padding:12px; }
  .overlay-card { width:calc(100vw - 44px); max-width:calc(100vw - 44px); padding:30px 18px; }
  .overlay-card h2 { font-size:32px; }
  .protocol { padding-bottom:90px; }
  .field-note { margin-inline:14px; margin-bottom:90px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}