/* DOM Dogfight — every game object is an absolutely positioned <div>. */
:root {
  --bg: #eef0f6; --ink: #161a24; --muted: #5a6276; --line: #c8ccd9; --link: #1b4fb8;
  --hud: #1d6b3a; --space: #04050a; --accent: #7ef0a8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #090b12; --ink: #dfe4f2; --muted: #8f98b3; --line: #2a3150; --link: #8db6ff; --hud: #7ef0a8; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; padding: 12px 16px 16px; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, sans-serif; }
a { color: var(--link); }
main { max-width: 1100px; margin: 0 auto; }
h1 { margin: 0 0 8px; font-size: 22px; }
.crumbs { margin: 0; font-size: 13px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.hud {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; margin-bottom: 6px;
  font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hud);
}
.hud b { font-variant-numeric: tabular-nums; }
.shield { display: inline-flex; gap: 8px; align-items: center; }
.bar { display: inline-block; width: 120px; height: 10px; border: 1px solid currentColor; border-radius: 3px; overflow: hidden; }
#shield-bar { display: block; height: 100%; width: 100%; background: currentColor; transition: width .15s; }
#shield-bar.low { background: #ff6b5e; }

/* The arena: a star field made of two tiled CSS gradients (moved for parallax). */
.arena {
  position: relative; overflow: hidden; height: clamp(320px, 68vh, 680px);
  border-radius: 8px; border: 1px solid var(--line); touch-action: none; user-select: none;
  background-color: var(--space);
  /* Star layers are generated in dogfight.js (random dots, two depths). */
}

/* A sprite: one frame of a 6×6 sheet. Size, sheet and frame are set from JS;
   position is a transform so moving it never triggers layout. */
.sprite {
  position: absolute; left: 0; top: 0; background-repeat: no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges; will-change: transform;
}
.sprite.hurt { filter: brightness(2.2) saturate(0); }
.sprite.enemy-missile { filter: hue-rotate(150deg) saturate(2.5) brightness(1.3); }
.sprite.shielded { filter: drop-shadow(0 0 6px #7ef0a8); }

.boom {
  position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffd36b 25%, #ff6b2a 48%, #ff2a2a00 70%);
  animation: boom .5s ease-out forwards; pointer-events: none;
}
@keyframes boom { from { transform: var(--at) scale(.2); opacity: 1; } to { transform: var(--at) scale(1.6); opacity: 0; } }

.attract {
  position: absolute; left: 0; right: 0; top: 8px; margin: 0; text-align: center; z-index: 5; pointer-events: none;
  font: 12px ui-monospace, Menlo, monospace; color: #7ef0a8; letter-spacing: .08em; animation: blink 1.6s steps(2) infinite;
}
.attract[hidden] { display: none; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .attract { animation: none; } }
.arena:focus-visible { outline-offset: 0; }

.overlay {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: #04050ad0; color: #dfe4f2; text-align: center; z-index: 10; padding: 16px;
}
.overlay[hidden] { display: none; }
.overlay .big { margin: 0; font: 700 32px ui-monospace, Menlo, monospace; color: var(--accent); }
.overlay p { margin: 0; }
.overlay button, .pad button {
  font: inherit; color: #dfe4f2; background: #1d2645; border: 1px solid #3a4778; border-radius: 8px; cursor: pointer;
}
.overlay button { padding: 8px 22px; margin-top: 10px; }

.pad { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.pad button { width: 64px; height: 52px; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button.fire { width: 96px; font-size: 15px; font-weight: 700; background: #5a1d1d; border-color: #8a3a3a; }
.pad button.on { background: #3a4778; }
@media (hover: hover) and (pointer: fine) { .pad button { height: 40px; font-size: 16px; } }

.help { color: var(--muted); font-size: 14px; }
.credit { font-size: 13px; color: var(--muted); }