body,
h1 {
  margin: 0
}

body,
html,
video {
  height: 100%
}

.btn,
.btn-quit {
  cursor: pointer
}

.copy,
.hint {
  opacity: .9
}

.hud-bottom,
.hud-top {
  right: 12px;
  left: 12px
}

.btn,
.slider {
  appearance: none
}

.hero,
footer {
  text-align: center
}

:root {
  --bg: #070b12;
  --bg2: #0b111b;
  --muted: #9aa4b2;
  --accent: #baf52f;
  --accent-2: #7ee61a;
  --accent-soft: rgba(154, 255, 50, .25);
  --danger: #ef4444;
  --ok: #22c55e;
  --ring: 0 0 0 3px rgba(154, 255, 50, .25), 0 0 40px rgba(154, 255, 50, .25);
  --glow: 0 0 10px rgba(154, 255, 50, .6), 0 0 30px rgba(154, 255, 50, .35), inset 0 0 12px rgba(154, 255, 50, .25);
  --txt: #e5e7eb
}

body {
  color: var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell;
  background: radial-gradient(1200px 1200px at 80% 20%, rgba(154, 255, 50, .07), transparent 60%), radial-gradient(1000px 1000px at 20% 80%, rgba(154, 255, 50, .06), transparent 60%), linear-gradient(180deg, var(--bg) 0, var(--bg2) 100%);
  overflow-x: hidden
}

.beams::after,
.beams::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  background: conic-gradient(from 0deg at 50% 50%, rgba(154, 255, 50, .06), transparent 25%, transparent 75%, rgba(154, 255, 50, .06)), radial-gradient(50% 50% at 50% 50%, rgba(154, 255, 50, .08), transparent 60%);
  filter: blur(40px);
  animation: 36s linear infinite spin;
  pointer-events: none;
  z-index: -1
}

.beams::after {
  animation-direction: reverse;
  animation-duration: 48s;
  opacity: .7
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion:reduce) {

  .beams::after,
  .beams::before {
    animation: none
  }
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 20px
}

.hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  letter-spacing: .3px
}

.brand .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent), 0 0 36px var(--accent-2)
}

.brand .name {
  font-weight: 800;
  opacity: .95
}

h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.06;
  text-shadow: 0 0 30px rgba(154, 255, 50, .15)
}

.lead {
  color: var(--muted);
  font-size: clamp(15px, 2.3vw, 18px);
  max-width: 78ch;
  margin: 0 auto
}

.cta {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  margin-top: 10px
}

.btn {
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .12s, box-shadow .12s, filter .12s
}

.btn-primary {
  background: linear-gradient(90deg, var(--accent) 0, #d8ff6a 50%, var(--accent-2) 100%);
  color: #0a0f19;
  padding: 18px 26px;
  font-size: clamp(18px, 2.8vw, 20px);
  box-shadow: 0 10px 28px rgba(154, 255, 50, .25), 0 0 0 2px rgba(17, 24, 39, .35), inset 0 -2px 8px rgba(0, 0, 0, .25), var(--glow)
}

.btn-primary:hover {
  transform: translateY(-1px) scale(1.02);
  filter: saturate(1.05)
}

.btn-primary:active {
  transform: translateY(0) scale(.99)
}

.btn-primary:focus-visible {
  outline: 0;
  box-shadow: var(--ring)
}

.btn-secondary {
  background: rgba(255, 255, 255, .02);
  color: var(--txt);
  border: 1px solid var(--accent);
  padding: 12px 16px;
  font-weight: 800;
  border-radius: 14px
}

.btn-secondary:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08) inset
}

.btn-fullwidth {
  width: 100%;
}

.join-inline {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: nowrap
}

.input {
  background: #0f1625;
  border: 1px solid var(--accent);
  color: var(--txt);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 16px;
  width: min(340px, 86vw);
  box-shadow: inset 0 0 0 1px rgba(154, 255, 50, 0);
  transition: box-shadow .12s, border-color .12s
}

.stage,
video {
  background: #000;
  inset: 0
}

.hint,
footer {
  color: var(--muted)
}

.hint,
.pill {
  font-size: 13px
}

.input:focus {
  outline: 0;
  border-color: rgba(154, 255, 50, .45);
  box-shadow: inset 0 0 0 1px var(--accent-soft)
}

.input:invalid {
  border-color: #f59e0b
}

.stage {
  position: fixed;
  display: none
}

.hud,
.hud-bottom,
.hud-top,
.logs,
.quit,
video {
  position: absolute
}

.logs.active,
.stage.active {
  display: block
}

video {
  width: 100%;
  object-fit: contain
}

.hud {
  inset: 0
}

.hud-top {
  top: 12px;
  display: flex;
  gap: 12px;
  align-items: start;
  pointer-events: none;
  padding-right: 56px;
  z-index: 30
}

.copy,
.pill {
  align-items: center;
  gap: 8px
}

.hud-bottom,
.pill,
.quit {
  pointer-events: auto
}

.pill {
  background: rgba(15, 23, 42, .7);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--txt);
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex
}

.badge,
.log-line .ok {
  color: #86efac
}

.badge {
  background: rgba(34, 197, 94, .15);
  border: 1px solid rgba(34, 197, 94, .3)
}

.quit {
  top: 12px;
  right: 12px;
  z-index: 40
}

.btn-quit {
  background: var(--danger);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700
}

.hud-right,
.right-controls {
  margin-left: auto;
  display: flex;
  gap: 8px
}

.copy {
  display: inline-flex
}

.hud-bottom,
.left-controls {
  display: flex;
  align-items: center
}

.copy input {
  width: 300px;
  max-width: 48vw;
  font-size: 12px;
  opacity: .95
}

.hud-bottom {
  bottom: 12px;
  gap: 8px
}

.left-controls {
  gap: 10px
}

.slider {
  width: 180px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  outline: 0
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(132, 204, 22, .55)
}

.logs {
  left: 12px;
  bottom: 56px;
  width: min(700px, 80vw);
  max-height: 45vh;
  overflow: auto;
  background: rgba(15, 23, 42, .85);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  display: none
}

.log-line {
  white-space: pre-wrap;
  color: #cbd5e1
}

.log-line .warn {
  color: #fbbf24
}

.log-line .err {
  color: #fca5a5
}

footer {
  margin: 36px 0 10px;
  font-size: 13px;
  opacity: .95
}

footer a {
  color: var(--accent);
}

.lang {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px
}

.lang select {
  background: #0f1625;
  color: var(--txt);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px
}

@media (max-width:720px) {
  .join-inline {
    flex-wrap: nowrap
  }

  .slider {
    width: 140px
  }

  .copy input {
    width: 58vw
  }
}