:root {
  --green: #3dff6e;
  --green-dim: #1f9a43;
  --bg: #000;
  --glow: 0 0 4px rgba(61, 255, 110, .9), 0 0 12px rgba(61, 255, 110, .45);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--green);
  font-family: var(--mono);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}
canvas#field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

.hud {
  position: fixed; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 20px; font-size: 13px; letter-spacing: .18em;
  text-shadow: var(--glow); pointer-events: none;
}
.hud-top { top: 0; }
.hud-bottom { bottom: 0; }
.hud-right { text-align: right; }

.panel {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 16px 34vh;
}
.tag { margin: 0 0 18px; font-size: 13px; letter-spacing: .2em; color: var(--green-dim); }
h1 {
  margin: 0; font-weight: 400; line-height: 1;
  font-size: clamp(48px, 14vw, 132px); letter-spacing: .14em;
  /* outlined vector lettering */
  color: transparent; -webkit-text-stroke: 1.5px var(--green);
  text-shadow: var(--glow);
}
.sub { margin: 18px 0 34px; font-size: clamp(14px, 3.6vw, 20px); letter-spacing: .32em; text-shadow: var(--glow); }

.btn {
  display: inline-block; color: var(--green); text-decoration: none;
  border: 1.5px solid var(--green); padding: 14px 26px;
  font-size: 16px; letter-spacing: .2em; background: rgba(0, 0, 0, .88);
  box-shadow: var(--glow), inset 0 0 10px rgba(61, 255, 110, .25); text-shadow: var(--glow);
  transition: background .15s, color .15s;
}
.btn:hover, .btn:focus-visible { background: var(--green); color: #000; text-shadow: none; outline: none; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.note {
  max-width: 34em; margin: 26px 0 0; font-size: 14px; line-height: 1.6; letter-spacing: .04em;
  color: #b9ffcb; background: rgba(0, 0, 0, .85); padding: 6px 10px;
}

@media (max-width: 520px) {
  .hud { font-size: 11px; letter-spacing: .12em; padding: 12px 16px; }
  .btn { font-size: 14px; padding: 13px 18px; letter-spacing: .14em; }
  .sub { letter-spacing: .2em; }
  .tag { font-size: 11px; letter-spacing: .12em; }
}

@media (max-height: 520px) {
  .panel { min-height: auto; padding: 52px 16px 24px; }
  h1 { font-size: clamp(40px, 11vh, 72px); }
  .tag { margin-bottom: 10px; }
  .sub { margin: 10px 0 18px; }
  .note { margin-top: 14px; }
  .hud-bottom { position: static; }
}