:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #080d11;
  color: #e1ecec;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --cyan: #60d9d0;
  --red: #ed4251;
  --muted: #8c9da2;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-height: 100svh; background: #080d11; }
canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.scene-vignette, .rain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.scene-vignette {
  background:
    linear-gradient(180deg, rgba(5, 9, 12, .48), transparent 28%, transparent 73%, rgba(5, 8, 10, .68)),
    radial-gradient(ellipse at 50% 56%, transparent 18%, rgba(3, 7, 9, .25) 82%);
}
.rain {
  opacity: .2;
  background-image: repeating-linear-gradient(108deg, transparent 0 28px, rgba(139, 196, 196, .2) 29px, transparent 30px 68px);
  background-size: 100% 160px;
  animation: rainfall .7s linear infinite;
}
@keyframes rainfall { to { background-position: 0 160px; } }
.hud {
  position: fixed;
  z-index: 4;
  top: 18px;
  left: 18px;
  width: min(390px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(118, 188, 188, .23);
  border-left: 2px solid var(--cyan);
  background: rgba(5, 10, 13, .77);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}
.eyebrow, .metric-label, .status, .controls-label, .footer-note {
  font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { color: var(--cyan); }
h1 { margin: 7px 0 3px; font-size: clamp(20px, 4vw, 28px); line-height: 1; letter-spacing: -.045em; }
.subline { color: var(--muted); font-size: 11px; }
.status {
  margin-top: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(96, 217, 208, .18);
  color: var(--cyan);
  background: rgba(96, 217, 208, .06);
}
.status[data-fallback="true"] { border-color: rgba(237, 66, 81, .4); color: #ff8c93; background: rgba(237, 66, 81, .08); }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.metric { min-width: 0; }
.metric-label { display: block; color: #78898e; font-size: 8px; }
.metric-value { display: block; margin-top: 3px; color: #e2f0ed; font: 600 13px/1.2 ui-monospace, monospace; }
.controls-label { margin-top: 12px; color: #93a5a7; font-size: 8px; }
.controls-label span { color: var(--cyan); }
.compare-link {
  position: fixed;
  z-index: 4;
  top: 20px;
  right: 20px;
  color: #bac7c6;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: .12em;
  text-decoration: none;
  border: 1px solid rgba(188, 210, 207, .22);
  background: rgba(5, 10, 13, .65);
  padding: 9px 11px;
}
.compare-link:hover, .compare-link:focus-visible { color: var(--cyan); border-color: var(--cyan); }
.touch-pad {
  position: fixed;
  z-index: 4;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 46px);
  gap: 5px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.touch-pad button {
  border: 1px solid rgba(129, 202, 196, .36);
  border-radius: 3px;
  background: rgba(6, 14, 17, .76);
  color: #b8d3d0;
  font: 700 16px ui-monospace, monospace;
  touch-action: none;
}
.touch-pad button:active, .touch-pad button.pressed { color: #061012; background: var(--cyan); }
.touch-pad [data-control="up"] { grid-column: 2; grid-row: 1; }
.touch-pad [data-control="left"] { grid-column: 1; grid-row: 2; }
.touch-pad [data-control="down"] { grid-column: 2; grid-row: 2; }
.touch-pad [data-control="right"] { grid-column: 3; grid-row: 2; }
.footer-note {
  position: fixed;
  z-index: 4;
  left: 20px;
  bottom: 20px;
  color: rgba(188, 207, 205, .62);
  font-size: 8px;
}
@media (max-width: 600px) {
  .hud { top: 12px; left: 12px; width: min(350px, calc(100vw - 24px)); padding: 11px 12px; }
  .compare-link { top: auto; right: 12px; bottom: 128px; padding: 8px; font-size: 8px; }
  .touch-pad { right: 12px; bottom: 12px; transform: scale(.92); transform-origin: bottom right; }
  .footer-note { left: 12px; bottom: 20px; max-width: 45vw; line-height: 1.5; }
  .metrics { gap: 5px; }
  .metric-value { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .rain { animation: none; } }