/* style.css -- the shared Star Fox HUD base.
 *
 * The theme is not centralised anywhere on this estate; every site carries its
 * own copy. This one is written fresh against the same palette and type as
 * daw.slippylabs.com rather than copied wholesale, because a DJ rig needs
 * almost none of a DAW's furniture.
 *
 * Press Start 2P is used for labels ONLY, never for digits: that font renders
 * 8 identically to S and 0 identically to O, which on a BPM or a time readout
 * is actively misleading.
 */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --hud-green: #39ff8f;
  --hud-green-dim: #1c8a52;
  --hud-orange: #ff9130;
  --hud-red: #ff4655;
  --hud-blue: #3ad7ff;
  --bg-deep: #050b10;
  --bg-panel: rgba(12, 26, 22, 0.85);
  --panel-border: rgba(57, 255, 143, 0.35);
  --text-main: #d9fbe8;
  --text-dim: #7fa695;
  --touch: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  color: var(--text-main);
  background: radial-gradient(circle at 50% 0%, #0e2a22, var(--bg-deep) 65%);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* A transform-animated layer, never background-position: the latter repaints
   the whole viewport every frame and was the single biggest source of jank
   in the sitewide performance pass. */
.starfield {
  position: fixed;
  inset: -400px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 85%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 90%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 25%, #fff 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.55;
  will-change: transform;
  animation: starfield-fly 34s linear infinite;
}
@keyframes starfield-fly {
  from { transform: translate(0, 0); }
  to   { transform: translate(-340px, 340px); }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 4px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* [hidden] is defeated by any author display rule, and a flex container will
   happily render a hidden child stacked below the fold where it is invisible
   in a screenshot but very much present in the DOM. */
[hidden] { display: none !important; }

.lbl {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: var(--hud-green-dim);
  text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.dim { color: var(--text-dim); }
.small { font-size: 0.78rem; }
.spacer { flex: 1 1 auto; }

.hud-btn {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 6px 10px;
  background: rgba(8, 22, 18, 0.9);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A shrinkable button gets squeezed below the touch minimum inside a flex
     row long before the row decides to wrap. */
  flex: 0 0 auto;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hud-btn:hover { border-color: var(--hud-green); background: rgba(20, 48, 38, 0.95); }
.hud-btn:focus-visible { outline: 2px solid var(--hud-blue); outline-offset: 2px; }
.hud-btn.on { background: var(--hud-green-dim); border-color: var(--hud-green); color: #04120c; }
.hud-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------- arm screen */

.arm {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, #0e2a22, #02060a 70%);
  padding: 20px;
}
.arm .inner { max-width: 560px; text-align: center; }
.arm h2 {
  font-family: "Press Start 2P", monospace;
  font-size: 1.5rem;
  color: var(--hud-green);
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}
.arm p { line-height: 1.65; color: var(--text-main); }
.arm .big {
  margin-top: 18px;
  min-height: 56px;
  padding: 0 26px;
  font-size: 0.7rem;
  background: var(--hud-green-dim);
  border-color: var(--hud-green);
  color: #04120c;
  font-family: "Press Start 2P", monospace;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  cursor: pointer;
}
.arm .big:hover { background: var(--hud-green); }

/* ---------------------------------------------------------- misc chrome */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 16px;
  background: rgba(8, 22, 18, 0.96);
  border: 1px solid var(--hud-orange);
  border-radius: 4px;
  max-width: min(92vw, 560px);
  font-size: 0.82rem;
}
.toast.err { border-color: var(--hud-red); }

.help {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  max-width: 520px;
  font-size: 0.84rem;
}
.help::backdrop { background: rgba(0, 0, 0, 0.7); }
.help h3 { font-family: "Press Start 2P", monospace; font-size: 0.62rem; color: var(--hud-green); }
.help ul { line-height: 1.9; padding-left: 18px; }
.help kbd {
  background: rgba(57,255,143,0.12);
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  padding: 1px 5px;
}
.help pre { white-space: pre-wrap; color: var(--text-dim); font-size: 0.76rem; }

/* The legal link lives in the statusbar, in normal flow. It used to be
   position:fixed in the bottom-right corner, where it sat on top of the
   browser's load-to-deck buttons -- the most-tapped controls on the page. */
.statusbar a, .arm a { color: var(--text-dim); text-decoration: none; }
.statusbar a:hover, .arm a:hover { color: var(--hud-green); text-decoration: underline; }

.account-chip { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; }

/* ---- perf-lite ------------------------------------------------------------
   Set on <html> by the inline snippet in the head. Drops the two effects that
   force full-viewport work every frame; the starfield stays because it is a
   compositor transform and costs essentially nothing. */
.perf-lite { --bg-panel: rgba(12, 26, 22, 0.95); }
.perf-lite .scanlines { mix-blend-mode: normal; opacity: 0.3; }
.perf-lite .starfield { animation: none; }
.perf-lite *, .perf-lite *::before, .perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}