:root {
  --green: #39ff6a;
  --green-dim: #0c4a1d;
  --bg: #000;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--green); font-family: var(--mono); overflow: hidden; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body.hover #stage { cursor: pointer; }

#enter {
  position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: #000; transition: opacity .8s ease;
}
#enter.gone { opacity: 0; pointer-events: none; }
#enter button, .panel form button {
  font: inherit; letter-spacing: .35em; color: var(--green); background: transparent;
  border: 1px solid var(--green); padding: 14px 28px; cursor: pointer;
  text-shadow: 0 0 10px var(--green); box-shadow: 0 0 18px rgba(57,255,106,.25), inset 0 0 12px rgba(57,255,106,.15);
  transition: background .2s, color .2s;
}
#enter button:hover, #enter button:focus-visible, .panel form button:hover, .panel form button:focus-visible { background: var(--green); color: #000; outline: none; }
#enter p { margin: 0; font-size: 12px; letter-spacing: .3em; opacity: .5; }

#mute {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 5;
  font: inherit; font-size: 11px; letter-spacing: .25em; color: var(--green); background: transparent; border: 0; opacity: .6; cursor: pointer; padding: 8px;
}
#mute:hover { opacity: 1; }

#fallback { position: fixed; left: -9999px; }
#fallback:focus-within { left: 16px; top: 16px; z-index: 20; display: grid; gap: 8px; background: #000; padding: 12px; border: 1px solid var(--green); }
#fallback a { color: var(--green); }

.panel {
  position: fixed; z-index: 15; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  background: rgba(0, 8, 2, .92); border: 1px solid var(--green);
  box-shadow: 0 0 40px rgba(57,255,106,.25), inset 0 0 30px rgba(57,255,106,.08);
  padding: 32px 28px 28px; backdrop-filter: blur(6px);
  animation: pop .25s ease-out;
}
.panel[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }
.panel h2 { margin: 0; font-size: clamp(22px, 5vw, 32px); letter-spacing: .18em; text-shadow: 0 0 14px var(--green); }
.panel .sub { margin: 6px 0 22px; opacity: .6; font-size: 13px; letter-spacing: .15em; }
.close { position: absolute; top: 8px; right: 12px; font: inherit; font-size: 28px; line-height: 1; color: var(--green); background: none; border: 0; cursor: pointer; padding: 6px 10px; }

#listenLinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#listenLinks a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--green); text-decoration: none; border: 1px solid var(--green-dim); padding: 14px 16px;
  letter-spacing: .12em; font-size: 14px; transition: background .15s, border-color .15s, transform .15s;
}
#listenLinks a::after { content: "\2197"; opacity: .6; }
#listenLinks a:hover, #listenLinks a:focus-visible { background: rgba(57,255,106,.12); border-color: var(--green); transform: translateX(4px); outline: none; }

#signupForm { display: grid; gap: 12px; }
#signupForm input {
  font: inherit; font-size: 16px; color: var(--green); background: #000; border: 1px solid var(--green-dim);
  padding: 14px 16px; letter-spacing: .08em; width: 100%;
}
#signupForm input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 14px rgba(57,255,106,.3); }
#signupMsg { min-height: 1.4em; margin: 14px 0 0; font-size: 13px; letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linklist a, .linklist .soon {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--green); text-decoration: none; border: 1px solid var(--green-dim); padding: 14px 16px; letter-spacing: .12em; font-size: 14px;
  transition: background .15s, border-color .15s, transform .15s;
}
.linklist a::after { content: "\2197"; opacity: .6; }
.linklist a:hover, .linklist a:focus-visible { background: rgba(57,255,106,.12); border-color: var(--green); transform: translateX(4px); outline: none; }
.linklist .soon { opacity: .5; }
.linklist .note { display: block; font-size: 10px; letter-spacing: .2em; opacity: .6; margin-top: 3px; }

.k7 { display: block; width: 100%; height: 220px; margin: 6px 0 0; border: 1px solid var(--green-dim); background: radial-gradient(circle at 50% 45%, rgba(57,255,106,.14), transparent 70%); }
.k7[hidden] { display: none; }