Made of little things.

/*
  Applet layout, not a web page.

  - No title header: the runtime frames the napplet and shows its name.
  - The canvas is the working surface; HUD and controls float over it so the
    game fills the frame at any size.
  - Tiers: tiny (<260px) numbers only · compact (260-480px) stat labels ·
    regular (480-900px) best time · wide (>900px) roomier spacing.
  - Theme: the runtime theme repaints --bg/--fg/--primary; the canvas palette
    is rebuilt from those tokens in src/game.ts.
*/

:root {
  --bg: #f4f6f8;
  --fg: #17212b;
  --primary: #2563eb;
  --surface: color-mix(in srgb, var(--bg) 88%, var(--fg));
  --surface-2: color-mix(in srgb, var(--bg) 76%, var(--fg));
  --border: color-mix(in srgb, var(--fg) 16%, transparent);
  --muted: color-mix(in srgb, var(--fg) 58%, var(--bg));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --control-h: 30px;
  --radius: 6px;
  --napplet-text-selection: none;
  color-scheme: light dark;
  font: 13px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

:where(html, body, body *) {
  -webkit-user-select: var(--napplet-text-selection, none);
  user-select: var(--napplet-text-selection, none);
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Frame ─────────────────────────────────────────────────────────────── */

.app {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
}

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

#game {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

/* HUD ───────────────────────────────────────────────────────────────── */

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 72%, transparent),
    transparent
  );
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.hud-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  white-space: nowrap;
}

.stat-key {
  display: none;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-val {
  font-size: 12px;
  font-weight: 700;
}

.stat-best {
  display: none;
}

.stat-power {
  display: inline-flex;
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary);
}

.stat-hearts {
  padding-inline: var(--space-1);
  border-color: color-mix(in srgb, #e5484d 45%, transparent);
  background: color-mix(in srgb, #e5484d 14%, transparent);
}

.hearts {
  color: #e5484d;
  letter-spacing: 1px;
  font-size: 14px;
}

.hearts.low {
  animation: heart-pulse 0.8s ease-in-out infinite;
}

@keyframes heart-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.hud-actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
  pointer-events: auto;
}

.hud-actions button {
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  cursor: pointer;
  font-size: 12px;
}

.hud-actions button:hover:not(:disabled) {
  border-color: var(--primary);
}

.hud-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Touch controls ────────────────────────────────────────────────────── */

.touch {
  position: absolute;
  inset: auto 0 0 0;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  pointer-events: none;
}

.touch-move {
  display: flex;
  gap: var(--space-2);
}

.touch-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.touch button {
  min-width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(2px);
  font-size: 20px;
  font-weight: 700;
  pointer-events: auto;
  touch-action: none;
}

.touch button.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 38%, transparent);
}

.touch-jump {
  min-width: 76px;
  font-size: 14px;
}

.touch-fire {
  min-width: 64px;
  border-color: color-mix(in srgb, #ff8a3d 55%, transparent);
  color: #b3530f;
  font-size: 13px;
}

@media (pointer: coarse), (hover: none) {
  .touch {
    display: flex;
  }
}

body.force-touch .touch {
  display: flex;
}

/* Overlay ───────────────────────────────────────────────────────────── */

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter: blur(3px);
}

.overlay-card {
  display: grid;
  gap: var(--space-2);
  width: min(280px, 100%);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}

.overlay-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.overlay-text {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.overlay-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.overlay-actions button {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}

.overlay-actions button:hover {
  border-color: var(--primary);
}

.overlay-actions .primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

.overlay-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

button:focus-visible,
#game:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Tiers ─────────────────────────────────────────────────────────────── */

@container (min-width: 260px) {
  .stat-key {
    display: inline;
  }
}

@container (min-width: 480px) {
  .stat-best {
    display: inline-flex;
  }
}

@container (min-width: 900px) {
  .hud {
    padding: var(--space-2) var(--space-3);
  }

  .hud-stats {
    gap: var(--space-2);
  }
}

@media (max-height: 240px) {
  .overlay-hint {
    display: none;
  }

  .overlay-card {
    padding: var(--space-2);
  }
}