Made of little things.

:root {
  --bg: #05070c;
  --ink: #e9eef7;
  --ink-dim: #9aa6b8;
  --accent: #ffd400;
  --danger: #ff5a4f;
  --control-h: 28px;
  --napplet-text-selection: none;
  color-scheme: dark;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  user-select: var(--napplet-text-selection);
  -webkit-user-select: var(--napplet-text-selection);
}

.app {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.stage {
  position: absolute;
  inset: 0;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hud {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.status[hidden] {
  display: none;
}

.status {
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-dim);
  background: rgb(0 0 0 / 0.45);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status[data-state='error'] {
  color: var(--danger);
}

.badge {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  flex: none;
}

/* ---- Asset pack panel (download failed / side-load) ---- */

.pack-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #1b2a44, var(--bg) 70%);
  overflow: auto;
}

.pack-panel[hidden] {
  display: none;
}

.pack-title {
  margin: 0;
  font: italic 800 clamp(18px, 6vw, 40px) / 1.1 Verdana, Arial, sans-serif;
  color: var(--accent);
  text-shadow: 0 2px 0 #b55d00;
}

.pack-message {
  margin: 0;
  max-width: 36em;
  color: var(--ink);
  line-height: 1.4;
}

.pack-message[data-state='error'] {
  color: #ffb3ad;
}

.pack-link[hidden],
.pack-levels[hidden] {
  display: none;
}

.pack-levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 34em);
}

.pack-button[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pack-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 34em);
}

.pack-link-label {
  color: var(--ink);
  font-size: 0.9em;
  opacity: 0.8;
}

.pack-link-row {
  display: flex;
  gap: 8px;
}

.pack-link-input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #3a4b68;
  border-radius: 8px;
  background: #0d1422;
  color: var(--ink);
  font: 0.9em ui-monospace, Menlo, Consolas, monospace;
}

.pack-link-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pack-button[hidden] {
  display: none;
}

.pack-button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #3a4b68;
  border-radius: 8px;
  background: #1a2335;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pack-button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #111;
}

/* Short frames: start at the top (centering would clip it) and drop the extras. */
@media (max-height: 320px) {
  .pack-panel {
    justify-content: flex-start;
    gap: 6px;
    padding: 8px;
  }

  .pack-title {
    font-size: 18px;
  }

  .pack-message {
    font-size: 12px;
  }

  .pack-link-label {
    display: none;
  }
}

.pack-button:disabled,
.pack-link-input:disabled {
  opacity: 0.5;
  cursor: progress;
}

.pack-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Screens (original 640x480 stage, letterboxed) ---- */

.screens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --hud-scale: 1;
  font-family: Verdana, Arial, 'Helvetica Neue', sans-serif;
}

.stage640 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 480px;
  transform-origin: 50% 50%;
  background: #000;
}

.stage640[hidden] {
  display: none;
}

.fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.screen-button,
.select-page {
  position: absolute;
  inset: 0;
  width: 640px;
  height: 480px;
  border: 0;
  padding: 0;
  margin: 0;
  background: #2b2f36 center / 640px 480px no-repeat;
  color: var(--ink);
  cursor: pointer;
}

.select-page {
  cursor: default;
  background-color: #33373e;
}

.screen-button:focus-visible,
.level-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.level-button {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent center / 100% 100% no-repeat;
  cursor: pointer;
}

.level-button[aria-disabled='true'] {
  cursor: not-allowed;
}

/* HTML stand-ins when the original bitmaps are not bundled. */
.fallback-title {
  display: block;
  font: italic 900 64px/1 Verdana, Arial, sans-serif;
  letter-spacing: -0.02em;
  color: #e8ecf2;
  text-shadow: 0 3px 0 #6a7280, 0 6px 18px rgb(0 0 0 / 0.6);
}

.fallback-hint {
  display: block;
  margin-top: 24px;
  font: italic 700 18px Verdana, Arial, sans-serif;
  color: #fff;
}

/*
 * Title screen: switch asset packs (side-load another .ssrcpack). Stage px,
 * counter-scaled so it stays readable and tappable (~28px tall) in small frames.
 */
.title-pack-button {
  --grow: max(1, calc(0.95 / var(--stage-scale, 1)));
  position: absolute;
  left: 50%;
  top: 316px;
  transform: translateX(-50%) scale(var(--grow));
  transform-origin: 50% 0;
  min-height: 30px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 15px;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  font: italic 700 13px Verdana, Arial, sans-serif;
  cursor: pointer;
}

/* The original title art paints "Click to Start" along its bottom edge. */
.title-pack-button.over-art {
  left: auto;
  right: 12px;
  top: auto;
  /* Clear of the "original assets" badge when the stage fills the frame height. */
  bottom: 30px;
  transform: scale(var(--grow));
  transform-origin: 100% 100%;
  background: rgb(0 0 0 / 0.55);
}

.title-pack-button:hover {
  background: rgb(0 0 0 / 0.6);
}

.title-pack-button:disabled {
  opacity: 0.5;
  cursor: progress;
}

.title-pack-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fallback-heading {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  margin: 0;
  text-align: center;
  font: italic 900 30px Verdana, Arial, sans-serif;
  text-transform: uppercase;
  color: #e8ecf2;
}

.level-button.fallback {
  border-radius: 14px;
  background: linear-gradient(#d9dde3, #9aa1ab);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgb(0 0 0 / 0.5);
  font: italic 900 22px Verdana, Arial, sans-serif;
  text-transform: uppercase;
  color: #1c4fd0;
}

.level-button.fallback[aria-disabled='true'] {
  color: #4a4f57;
  filter: grayscale(1);
}

.fallback-rule {
  position: absolute;
  left: 336px;
  width: 280px;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: #f2f4f7;
}

.fallback-help {
  padding: 30px 60px;
  text-align: left;
  font-size: 16px;
}

.fallback-help kbd {
  display: inline-block;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #d9dde3;
  color: #222;
  font: 700 13px Verdana, Arial, sans-serif;
  text-align: center;
}

.loading-page {
  position: absolute;
  inset: 0;
  background: #000;
}

.loading-text {
  position: absolute;
  left: 173px;
  top: 206px;
  width: 318px;
  height: 44px;
  font: italic 700 24px Verdana, Arial, sans-serif;
  color: #fff;
}

/* ---- Race HUD (anchored to the frame's corners, scaled like the stage) ---- */

.hud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.7);
}

.hud-timer,
.hud-counter {
  position: absolute;
  top: calc(50px * var(--hud-scale) - 0.6em);
  font: 400 calc(30px * var(--hud-scale)) / 1 Verdana, Arial, sans-serif;
  letter-spacing: 0.18em;
  white-space: pre;
}

.hud-timer {
  left: calc(25px * var(--hud-scale));
}

.hud-counter {
  right: calc(14px * var(--hud-scale));
}

.hud-counter .score {
  color: #ff2a1a;
}

.hud-counter .goal {
  color: #2bff3a;
}

.hud-text {
  position: absolute;
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
  white-space: nowrap;
}

.hud-text[data-anchor='left'] {
  transform: translate(-50%, -50%);
}

.hud-text[data-anchor='right'] {
  transform: translate(50%, -50%);
}

.hud-text[data-anchor='center'] {
  transform: translateX(-50%);
  text-align: center;
}

.hud-text .score {
  color: #ff2a1a;
}

.hud-text .goal {
  color: #2bff3a;
}

/* ---- Touch controls (coarse pointers only) ---- */

.touch-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

@media (pointer: coarse) {
  .touch-layer.active {
    display: block;
  }
}

.touch-group {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.touch-group.left {
  left: max(12px, env(safe-area-inset-left));
}

.touch-group.right {
  right: max(12px, env(safe-area-inset-right));
  align-items: flex-end;
}

.touch-pad {
  width: clamp(48px, 16vmin, 84px);
  height: clamp(48px, 16vmin, 84px);
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.55);
  background: rgb(10 14 22 / 0.35);
  color: #fff;
  font-size: clamp(16px, 5vmin, 26px);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-pad.held {
  background: rgb(255 212 0 / 0.55);
  color: #000;
}

.touch-pad.handbrake {
  width: clamp(40px, 12vmin, 64px);
  height: clamp(40px, 12vmin, 64px);
  font-size: clamp(13px, 4vmin, 20px);
}

.touch-pad.menu {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font-size: 13px;
  pointer-events: auto;
}

/* Controller focus where :focus-visible does not follow a scripted focus. */
.pad-focus:not(:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Local play keeps the original arcade scene and app-owned HUD colors. */
.local-select-button {
  position: absolute;
  top: 8px;
  right: 14px;
  padding: 12px;
  border: 2px solid #ffcf33;
  background: #202530;
  color: #fff;
  font: bold 16px Verdana, sans-serif;
  cursor: pointer;
}
.local-layer { position: absolute; inset: 0; pointer-events: none; }
.local-player { position: absolute; box-sizing: border-box; border: 1px solid #ffffff40; }
.local-player-label {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px; background: #141820dd; color: var(--player-color);
  border-left: 4px solid var(--player-color); font: bold 14px Verdana, sans-serif;
}
.local-menu { position: absolute; right: 4px; bottom: 4px; width: 44px; height: 44px; }
.local-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(85%, 420px); padding: 12px; box-sizing: border-box;
  background: #141820ee; color: white; font-size: 16px; text-align: center;
}
.local-pause {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap;
  align-content: center; align-items: center; justify-content: center;
  gap: 8px; padding: 8px; background: #0009; color: #fff;
}
.local-pause strong { width: 100%; text-align: center; }
.local-pause button, .local-menu {
  min-height: 44px; padding: 8px 12px; border: 1px solid #ffcf33;
  background: #202530; color: #fff; cursor: pointer;
}
.local-pause[hidden], .local-status[hidden] { display: none; }
.local-pause button:focus-visible, .local-menu:focus-visible, .local-select-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }