/* Futuristic HUD over the 3D scene: cyan lines on dark glass, Orbitron for headings, Exo 2 for everything else. */
:root {
  --cyan: #58e6ff;
  --violet: #9b7bff;
  --magenta: #ff4fd8;
  --amber: #ffb547;
  --red: #ff5a4f;
  --ink: #eaf6ff;
  --dim: #92a9cc;
  --glass: rgba(6, 11, 30, 0.6);
  --line: rgba(88, 230, 255, 0.34);
  --display: 'Orbitron', 'Exo 2', system-ui, sans-serif;
  --ui: 'Exo 2', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #03050c; color: var(--ink); font-family: var(--ui); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: fixed; inset: 0; pointer-events: none; }

.title { position: fixed; top: 34px; left: 42px; pointer-events: none; animation: arrive 1.4s 0.4s var(--ease) both; }
.logo { margin: 0; font: 900 clamp(40px, 5.2vw, 78px) / 0.9 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.logo span { display: block; }
.logo .a { color: #ffffff; text-shadow: 0 0 22px rgba(88, 230, 255, 0.6), 0 0 2px #ffffff; }
.logo .b {
  background: linear-gradient(90deg, var(--cyan), var(--violet) 55%, var(--magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(155, 123, 255, 0.55));
}
.tagline { margin: 16px 0 0; font: 600 13px var(--ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }

/* Glass panels with clipped corners. */
.panel {
  position: fixed; padding: 20px 22px 18px; background: var(--glass); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.eyebrow { margin: 0 0 6px; font: 700 11px var(--display); letter-spacing: 0.32em; text-transform: uppercase; color: var(--cyan); }
.panel h2, .panel h3 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; }
.panel dl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px 16px; margin: 14px 0 0; }
.panel dt { font: 600 11px var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.panel dd { margin: 0; font: 600 15px var(--ui); }

.bars { display: inline-flex; gap: 5px; }
.bars i { width: 18px; height: 10px; transform: skewX(-20deg); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.bars i.on { border-color: transparent; background: var(--cyan); box-shadow: 0 0 10px rgba(88, 230, 255, 0.8); }
.bars.threat i.on { background: var(--amber); box-shadow: 0 0 10px rgba(255, 181, 71, 0.8); }
.bars.threat.high i.on { background: var(--red); box-shadow: 0 0 10px rgba(255, 90, 79, 0.8); }

.ship-panel { left: 42px; bottom: 38px; width: 300px; animation: arrive 1s 1.4s var(--ease) both; }
.ship-panel h3 { font-size: 20px; }
.ship-panel .small { margin: 14px 0 0; font: 500 13px/1.4 var(--ui); color: var(--dim); }

.destination { right: 42px; bottom: 38px; width: 360px; animation: arrive 1s 1.2s var(--ease) both; }
.destination h2, .arrival h2 { font-size: 34px; font-weight: 800; text-shadow: 0 0 18px rgba(88, 230, 255, 0.35); }
.destination .kind, .arrival .kind { margin: 4px 0 0; font: 700 13px var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--tint); }
.destination .blurb, .arrival .blurb { margin: 12px 0 0; font: 500 15px/1.5 var(--ui); color: #cfdcf0; }

/* In orbit after a trip. */
.arrival { left: 42px; bottom: 38px; width: 360px; animation: arrive 0.9s var(--ease) both; }
.step.wide { width: auto; padding: 0 16px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }

/* The white-out when diving through the clouds, down or up. */
#flash { position: fixed; inset: 0; z-index: 20; background: #f4fbff; opacity: 0; pointer-events: none; }

/* --- On a planet's surface ---------------------------------------------------------------------------------- */
.surface-hud :is(.sf-place, .sf-vitals, .sf-pouch, .sf-zaps, .sf-goal, .sf-leave, .sf-cross, .sf-weapon, .sf-help, .sf-compass) { opacity: 0; transition: opacity 0.6s, transform 0.12s; }
.surface-hud.on :is(.sf-place, .sf-vitals, .sf-pouch, .sf-zaps, .sf-goal, .sf-leave, .sf-cross, .sf-weapon, .sf-help, .sf-compass) { opacity: 1; }
.surface-hud.down :is(.sf-cross, .sf-weapon) { opacity: 0; }
.surface-hud kbd {
  display: inline-block; min-width: 26px; padding: 3px 7px; border: 1px solid var(--cyan); border-bottom-width: 3px; border-radius: 4px;
  background: rgba(6, 11, 30, 0.7); color: var(--cyan); font: 800 12px/1.2 var(--display); text-align: center; letter-spacing: 0.04em;
}

/* Health, and armour above it, like Fortnite's: skewed bars with the number beside them. A white chip shows what was just
   lost, then drains away. */
.sf-vitals { position: fixed; left: 40px; bottom: 34px; display: grid; gap: 7px; pointer-events: none; }
.vital { display: grid; grid-template-columns: 22px 270px 44px; align-items: center; gap: 10px; }
.vital svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0, 10, 30, 0.8)); }
.vital .bar { position: relative; height: 18px; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(6, 11, 30, 0.6); transform: skewX(-20deg); overflow: hidden; }
.vital .bar i { position: absolute; top: 2px; bottom: 2px; left: 2px; max-width: calc(100% - 4px); }
.vital .bar .ghost { background: rgba(255, 255, 255, 0.85); }
.vital .bar .fill { transition: width 0.12s; }
.vital b { font: 900 20px var(--display); color: #ffffff; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); }
.vital.health svg path { fill: #6fe36a; }
.vital.health .fill { background: linear-gradient(90deg, #2fae4a, #7af06a); box-shadow: 0 0 10px rgba(111, 227, 106, 0.6); }
.vital.health.low .fill { background: linear-gradient(90deg, #c01f2e, #ff5a4f); box-shadow: 0 0 12px rgba(255, 60, 60, 0.8); }
.vital.health.low { animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.35); } }
.vital.armor .bar { height: 12px; }
.vital.armor b { font-size: 15px; }
.vital.armor svg path { fill: #62c4ff; }
.vital.armor .fill { background: linear-gradient(90deg, #2a7fe0, #62d6ff); box-shadow: 0 0 10px rgba(98, 196, 255, 0.6); }
.vital.armor.empty { opacity: 0.55; }

/* The pouch of Zing berries, beside the bars. */
.sf-pouch { position: fixed; left: 424px; bottom: 36px; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border: 1px solid rgba(255, 111, 154, 0.7); background: rgba(6, 11, 30, 0.55); pointer-events: none; }
.sf-pouch svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 79, 123, 0.9)); }
.sf-pouch svg path { fill: #ff5c86; }
.sf-pouch b { font: 900 22px var(--display); color: #ffffff; }
.sf-pouch small { font: 700 12px var(--display); color: var(--dim); }
.surface-hud.on .sf-pouch.empty { opacity: 0.5; }
/* Under the water, by the pilot: a ring that empties as your air runs out, round the seconds left; red once you're low. */
.sf-air { position: fixed; left: calc(50% - 270px); top: calc(50% - 160px); width: 76px; height: 76px; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.surface-hud.on .sf-air.on { opacity: 1; }
.sf-air svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(95, 244, 255, 0.7)); }
.sf-air circle { fill: rgba(6, 11, 30, 0.45); stroke-width: 6; }
.sf-air .track { stroke: rgba(6, 11, 30, 0.6); }
.sf-air .ring { fill: none; stroke: #5ff4ff; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; }
.sf-air b { margin-top: -6px; font: 900 26px var(--display); color: #ffffff; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); }
.sf-air small { position: absolute; bottom: 15px; font: 700 10px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #bff8ff; }
.sf-air.low .ring { stroke: #ff4f5a; }
.sf-air.low svg { filter: drop-shadow(0 0 9px rgba(255, 60, 60, 0.95)); }
.sf-air.low small { color: #ffb0b0; }
.sf-air.low { animation: gasp 0.5s ease-in-out infinite; }
.sf-air.out b { color: #ff6a6a; }
@keyframes gasp { 50% { transform: scale(1.12); filter: brightness(1.4); } }

.sf-zaps { position: fixed; top: 116px; left: 40px; margin: 0; font: 700 12px var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); pointer-events: none; }
.sf-zaps b { display: inline-block; margin-left: 8px; font: 900 18px var(--display); color: #ffd66b; text-shadow: 0 0 10px rgba(255, 170, 50, 0.6); }
.sf-zaps b.bump { animation: bump 0.35s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); color: #ffffff; } }

/* The goal, under the zap count: a gold edge and plain words. */
.sf-goal { position: fixed; top: 150px; left: 40px; max-width: 290px; padding: 8px 12px 9px; border-left: 3px solid #ffc94a; background: linear-gradient(90deg, rgba(6, 11, 30, 0.55), rgba(6, 11, 30, 0)); pointer-events: none; }
.sf-goal .eyebrow { margin: 0 0 3px; color: #ffc94a; }
.sf-goal .text { margin: 0; font: 700 14px/1.35 var(--ui); color: #ffffff; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); }

/* The crosshair: four ticks and a dot. It kicks out on a hit, and turns red and spins on a pop. */
.sf-cross { position: fixed; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; }
.sf-cross i { position: absolute; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 3px rgba(0, 0, 0, 0.7); transition: background 0.1s; }
.sf-cross i:nth-child(1) { top: 2px; left: 17px; width: 2px; height: 9px; }
.sf-cross i:nth-child(2) { bottom: 2px; left: 17px; width: 2px; height: 9px; }
.sf-cross i:nth-child(3) { top: 17px; left: 2px; width: 9px; height: 2px; }
.sf-cross i:nth-child(4) { top: 17px; right: 2px; width: 9px; height: 2px; }
.sf-cross b { position: absolute; top: 16px; left: 16px; width: 4px; height: 4px; border-radius: 50%; background: #9dff6a; box-shadow: 0 0 6px #9dff6a; }
.sf-cross.hit { transform: scale(1.3); }
.sf-cross.hit i { background: #fff6b0; }
.sf-cross.pop { transform: scale(1.5) rotate(45deg); }
.sf-cross.pop i { background: #ff5a4f; }

/* The weapon bar: four slots, each gun in its rarity's colour, the one in hand raised and outlined; then its name and
   stats, and the blade. */
.sf-weapon {
  --rarity: #b8c2cf; position: fixed; right: 40px; bottom: 30px; min-width: 270px; padding: 10px 16px 12px 22px; text-align: right; pointer-events: none;
  border: 1px solid var(--rarity); border-right-width: 4px; background: linear-gradient(270deg, color-mix(in srgb, var(--rarity) 30%, rgba(6, 11, 30, 0.5)), rgba(6, 11, 30, 0.7) 70%); backdrop-filter: blur(6px);
}
.sf-weapon .slots { display: flex; justify-content: flex-end; gap: 7px; margin: 4px 0 10px; }
.sf-weapon .slot {
  position: relative; display: grid; place-items: center; width: 58px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(160deg, color-mix(in srgb, var(--rarity) 65%, transparent), rgba(6, 11, 30, 0.7)); transform: skewX(-8deg); transition: transform 0.12s;
}
.sf-weapon .slot.on { border: 2px solid #ffffff; transform: skewX(-8deg) translateY(-6px) scale(1.08); box-shadow: 0 0 14px var(--rarity); }
.sf-weapon .slot.empty { border-style: dashed; background: rgba(6, 11, 30, 0.35); }
.sf-weapon .slot svg { width: 44px; height: 22px; fill: #ffffff; transform: skewX(8deg); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.sf-weapon .slot small { position: absolute; top: 1px; left: 5px; font: 800 10px var(--display); color: #ffffff; text-shadow: 0 1px 2px #000; }
.sf-weapon .name { display: block; font: 900 16px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rarity); text-shadow: 0 0 12px color-mix(in srgb, var(--rarity) 70%, transparent); }
.sf-weapon .stats { display: block; margin-top: 2px; font: 600 12px var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: #cfdcf0; }
.sf-weapon .melee { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.2); font: 700 12px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: #bff6ff; }
.sf-weapon .melee kbd { margin-right: 6px; }

/* A red flash round the edges when something bites, and the knocked-out screen. */
/* Speed lines round the edges of the screen (see hud.speed), flickering to a new pattern as they go. */
.sf-speed {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  --turn: 0deg;
  background: repeating-conic-gradient(from var(--turn) at 50% 50%, transparent 0deg 3.1deg, rgba(255, 255, 255, 0.55) 3.2deg 3.4deg, transparent 3.5deg 7.3deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.55) 60%, #000 88%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.55) 60%, #000 88%);
  transition: opacity 0.3s;
}
.sf-hurt { position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 30, 50, 0.55)); opacity: 0; pointer-events: none; }
.sf-hurt.on { animation: hurt 0.45s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
.sf-down { position: fixed; inset: 0; display: grid; place-content: center; background: rgba(40, 0, 10, 0.45); text-align: center; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.surface-hud.down .sf-down { opacity: 1; }
.sf-down h2 { margin: 0; font: 900 48px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; text-shadow: 0 0 20px rgba(255, 60, 80, 0.8); }
.sf-down p { margin: 8px 0 0; font: 600 16px var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: #ffd6dc; }

/* Damage numbers floating up off whatever got hit (positioned by fx.ts). */
.fx-num { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; font: 900 24px var(--display); color: #fff6b0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.35); }
.fx-num.pop { font-size: 32px; color: #ffb347; }
.fx-num.hurt { font-size: 22px; color: #ff5a5a; }
.fx-num.crit { font-size: 30px; color: #fff27a; }
.fx-num.heal { color: #7af06a; }
.sf-place { position: fixed; top: 30px; left: 40px; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 20, 40, 0.75), 0 2px 12px rgba(0, 20, 40, 0.6); }
.sf-place h2 { margin: 0; font: 900 34px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; }
.sf-place .eyebrow { color: #ffffff; opacity: 0.85; }
.sf-kind { margin: 4px 0 0; font: 700 13px var(--ui); letter-spacing: 0.24em; text-transform: uppercase; }
.sf-leave {
  position: fixed; top: 30px; right: 40px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(6, 11, 30, 0.45); cursor: pointer;
  color: #ffffff; font: 800 12px var(--display); letter-spacing: 0.24em; text-transform: uppercase; backdrop-filter: blur(6px); transition: background 0.2s;
}
.sf-leave:hover { background: rgba(6, 11, 30, 0.7); }

/* "Press E to ...", and the tutorial's tips, at the bottom of the screen. */
.surface-hud .sf-prompt { position: fixed; left: 50%; bottom: 150px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px; transform: translateX(-50%); background: rgba(6, 11, 30, 0.65); border: 1px solid var(--line); font: 700 14px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.surface-hud.on .sf-prompt.on { opacity: 1; }
.sf-tip { position: fixed; left: 50%; bottom: 64px; display: flex; align-items: center; gap: 14px; max-width: min(640px, 70vw); padding: 12px 18px; transform: translateX(-50%); border: 1px solid rgba(255, 201, 74, 0.7); border-left-width: 4px; background: rgba(6, 11, 30, 0.7); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.surface-hud.on .sf-tip.on { opacity: 1; }
.sf-tip .keys { display: flex; gap: 5px; flex: none; }
.sf-tip .keys kbd { border-color: #ffc94a; color: #ffc94a; }
.sf-tip p { margin: 0; font: 700 15px/1.35 var(--ui); color: #ffffff; }
.sf-toast { position: fixed; bottom: 200px; left: 50%; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 7px 16px; transform: translateX(-50%); background: rgba(6, 11, 30, 0.6); border: 1px solid rgba(125, 255, 176, 0.7); font: 800 13px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: #7dffb0; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.sf-toast.on { opacity: 1; animation: banner 0.5s var(--ease); }
.sf-help { position: fixed; left: 50%; bottom: 14px; margin: 0; transform: translateX(-50%); white-space: nowrap; font: 600 11px var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); pointer-events: none; }

/* The compass: headings and ticks that slide as you turn, and markers with distances pinned to the ends. */
.sf-compass {
  position: fixed; top: 22px; left: 50%; width: min(540px, 48vw); height: 50px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(6, 11, 30, 0.42) 18%, rgba(6, 11, 30, 0.42) 82%, transparent);
}
.sf-compass::after { content: ''; position: absolute; top: 0; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #ffffff; }
.sf-compass > * { position: absolute; left: 0; will-change: transform, opacity; }
.sf-compass .dir { top: 9px; font: 800 13px var(--display); letter-spacing: 0.06em; color: #cfdcf0; text-shadow: 0 1px 4px rgba(0, 10, 30, 0.9); }
.sf-compass .dir.main { top: 7px; font-size: 17px; color: #ffffff; }
.sf-compass .tick { top: 13px; width: 2px; height: 9px; background: rgba(255, 255, 255, 0.55); }
.sf-compass .mark { top: 26px; display: flex; flex-direction: column; align-items: center; }
.sf-compass .mark[hidden] { display: none; }
.sf-compass .mark svg { width: 22px; height: 22px; filter: drop-shadow(0 0 5px currentColor); }
.sf-compass .mark path { fill: currentColor; stroke: rgba(0, 10, 30, 0.8); stroke-width: 1; }
.sf-compass .mark b { margin-top: 1px; font: 800 12px var(--ui); letter-spacing: 0.06em; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 10, 30, 0.95); white-space: nowrap; }
.sf-compass .mark.ship { color: var(--cyan); }
.sf-compass .mark.boss { color: #c56bff; }
.sf-compass .mark.loot { color: #ffc94a; }
.sf-compass .mark.flag { color: #7dffb0; }
.sf-compass .mark.trail { color: #f2e6c8; }
.sf-compass .mark.place { color: #ff7ad9; }
.sf-compass .mark.key { color: #ffd24a; }

/* King Chomp's health across the top: purple, then red once it's angry. */
.sf-boss { position: fixed; top: 104px; left: 50%; width: min(560px, 56vw); transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.surface-hud.on .sf-boss.on { opacity: 1; }
.sf-boss .eyebrow { margin: 0; color: #ffffff; opacity: 0.85; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); }
.sf-boss h3 { margin: 2px 0 8px; font: 900 24px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; text-shadow: 0 0 16px rgba(176, 77, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.6); }
.sf-boss .bar { height: 16px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(6, 11, 30, 0.55); transform: skewX(-20deg); }
.sf-boss .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a27b0, #c56bff); box-shadow: 0 0 12px rgba(176, 77, 255, 0.8); transition: width 0.15s; }
.sf-boss.angry h3 { text-shadow: 0 0 16px rgba(255, 60, 60, 0.95), 0 2px 8px rgba(0, 0, 0, 0.6); }
/* A race's clock, across the top while you race. */
.sf-race { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.surface-hud.on .sf-race.on { opacity: 1; }
.sf-race .eyebrow { margin: 0; color: #ffc94a; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); }
.sf-race h3 { margin: 0; font: 900 34px var(--display); letter-spacing: 0.06em; color: #ffffff; text-shadow: 0 0 14px rgba(88, 230, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6); }
.sf-race .line { margin: 2px 0 0; font: 700 13px var(--ui); color: #ffffff; text-shadow: 0 1px 6px rgba(0, 20, 40, 0.8); }
.sf-boss.angry .bar i { background: linear-gradient(90deg, #c01f2e, #ff5a4f); box-shadow: 0 0 14px rgba(255, 60, 60, 0.9); }

/* The big message for beating a boss and picking up its loot. */
.sf-banner { position: fixed; top: 22%; left: 50%; width: min(820px, 92vw); transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.8s; pointer-events: none; }
.sf-banner.on { opacity: 1; animation: banner 0.7s var(--ease); }
@keyframes banner { from { opacity: 0; transform: translateX(-50%) scale(1.5); } }
.sf-banner h2 { margin: 0; font: 900 46px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #ffd66b; text-shadow: 0 0 26px rgba(255, 170, 50, 0.85), 0 3px 0 rgba(60, 20, 0, 0.6); }
.sf-banner p { margin: 10px 0 0; font: 700 16px var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 20, 40, 0.9); }

/* On a trip, or in the blueprint, the map's overlay fades away. !important because the panels' entry animations hold
   their opacity. */
.title, .ship-panel, .destination, .hint, #labels, .pilot-chip { transition: opacity 0.45s; }
body:is(.flying, .inspecting, .choosing) :is(.title, .ship-panel, .destination, .hint, #labels, .pilot-chip) { opacity: 0 !important; pointer-events: none; }

/* The ship's own label on the map, and the blueprint button in its panel. */
.planet-label .sub { font: 600 10px var(--ui); letter-spacing: 0.18em; color: var(--dim); }
.ship-label.on { opacity: 1; color: var(--cyan); text-shadow: 0 0 10px rgba(88, 230, 255, 0.8), 0 0 4px #000; }
.blueprint-button {
  width: 100%; margin-top: 14px; padding: 10px; border: 1px solid var(--line); background: rgba(88, 230, 255, 0.08); cursor: pointer;
  color: var(--cyan); font: 700 12px var(--display); letter-spacing: 0.26em; text-transform: uppercase; transition: background 0.2s;
}
.blueprint-button:hover { background: rgba(88, 230, 255, 0.2); }

/* --- The hangar: the ship's blueprint, white ink on blue grid paper (the paper and drawing are in the canvas), with
   the ships along the top and the workbench along the bottom ------------------------------------------------------ */
.blueprint { --ink: #eaf6ff; --ink-dim: #9ccbff; --gold: #ffc94a; --paper: #0d3a78; position: fixed; inset: 0; z-index: 5; color: var(--ink); cursor: grab; user-select: none; }
.blueprint:active { cursor: grabbing; }
.blueprint :is(.bp-head, .bp-callout, .bp-leaders, .bp-dim, .bp-titleblock, .bp-close, .bp-hint, .bp-ships, .bp-fly, .bp-bench) { opacity: 0; transition: opacity 0.45s, border-color 0.2s, background 0.2s; }
.blueprint.ready :is(.bp-head, .bp-callout, .bp-leaders, .bp-dim, .bp-titleblock, .bp-close, .bp-hint, .bp-ships, .bp-fly, .bp-bench) { opacity: 1; }
.blueprint.ready.painting .bp-dim { opacity: 0; }
.blueprint .bars i { border-color: rgba(234, 246, 255, 0.35); background: rgba(234, 246, 255, 0.06); }
.blueprint .bars i.on { background: var(--ink); box-shadow: 0 0 8px rgba(234, 246, 255, 0.5); }
.blueprint .bars.power { gap: 3px; }
.blueprint .bars.power i { width: 11px; }
.blueprint .bars.power i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 201, 74, 0.6); }

.bp-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bp-leaders path { fill: none; stroke: rgba(234, 246, 255, 0.75); stroke-width: 1.2; }
.bp-leaders circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.bp-leaders text { fill: var(--ink); font: 700 9px var(--display); text-anchor: middle; }
.bp-leaders .far path { stroke: rgba(234, 246, 255, 0.4); stroke-dasharray: 4 4; }
.bp-leaders .far circle { stroke: rgba(234, 246, 255, 0.5); }
.bp-leaders .on path { stroke: var(--gold); stroke-width: 1.8; }
.bp-leaders .on circle { stroke: var(--gold); }
.bp-leaders .on text { fill: var(--gold); }

.bp-head { position: absolute; top: 34px; left: 44px; }
.bp-head h2 { margin: 0; font: 900 30px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.bp-class { margin: 4px 0 0; font: 700 12px var(--ui); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-dim); }
.bp-blurb { max-width: 290px; margin: 8px 0 0; font: 500 13px/1.4 var(--ui); color: #d6e8ff; }
.bp-power { display: flex; align-items: center; gap: 10px; }
.bp-power b { font: 800 12px var(--display); letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; }
.bp-head dl, .bp-callout dl { display: grid; grid-template-columns: auto 1fr; align-items: center; margin: 0; }
.bp-head dl { gap: 7px 14px; margin-top: 14px; }
.blueprint dt { font: 600 10px var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.blueprint dd { margin: 0; }

.bp-callout { position: absolute; width: 250px; padding: 10px 12px 12px; border: 1px solid rgba(234, 246, 255, 0.45); background: rgba(8, 36, 84, 0.55); }
.bp-callout.left { left: 44px; }
.bp-callout.right { right: 44px; }
.bp-callout.empty { border-style: dashed; }
.bp-callout.on { border-color: var(--gold); background: rgba(10, 46, 104, 0.85); }
.bp-callout.slot { cursor: pointer; }
.bp-meta { margin: 6px 0 0; font: 700 10px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.bp-tag { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 10px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.bp-tag b { color: var(--ink); }
.bp-callout h4 { margin: 0; font: 800 14px var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.bp-text { margin: 5px 0 0; font: 500 13px/1.4 var(--ui); color: #d6e8ff; }
.bp-callout dl { gap: 5px 12px; margin-top: 8px; }

.bp-dim { position: absolute; margin: 0; padding: 2px 8px; transform: translate(-50%, -50%); background: var(--paper); white-space: nowrap; font: 700 11px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: #cfe6ff; pointer-events: none; }

.bp-titleblock { position: absolute; right: 44px; bottom: 38px; width: 250px; border: 1.5px solid rgba(234, 246, 255, 0.7); background: rgba(8, 36, 84, 0.55); }
.tb-maker { margin: 0; padding: 8px 12px; border-bottom: 1px solid rgba(234, 246, 255, 0.5); font: 800 13px var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.bp-titleblock dl { display: grid; grid-template-columns: 80px 1fr; margin: 0; }
.bp-titleblock :is(dt, dd) { padding: 6px 12px; border-top: 1px solid rgba(234, 246, 255, 0.22); font: 600 11px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; }
.bp-titleblock :is(dt, dd):nth-child(-n + 2) { border-top: 0; }
.bp-titleblock dt { border-right: 1px solid rgba(234, 246, 255, 0.22); }

.bp-close {
  position: absolute; top: 34px; right: 44px; padding: 12px 18px; border: 1px solid rgba(234, 246, 255, 0.7); background: rgba(8, 36, 84, 0.6); cursor: pointer;
  color: var(--ink); font: 800 12px var(--display); letter-spacing: 0.26em; text-transform: uppercase; transition: background 0.2s;
}
.bp-close:hover { background: rgba(234, 246, 255, 0.15); }
/* The ships, along the top: the one you're looking at outlined in gold, the one you fly labelled, locked ones dashed. */
.bp-ships { position: absolute; top: 30px; left: 50%; display: flex; gap: 10px; transform: translateX(-50%); }
.bp-ships button {
  display: grid; justify-items: center; gap: 3px; min-width: 150px; padding: 9px 16px 8px; border: 1px solid rgba(234, 246, 255, 0.45); background: rgba(8, 36, 84, 0.55);
  color: var(--ink); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.bp-ships button:hover { background: rgba(234, 246, 255, 0.12); transform: translateY(-2px); }
.bp-ships b { font: 800 13px var(--display); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.bp-ships small { font: 700 10px var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); }
.bp-ships button.on { border-color: var(--gold); background: rgba(10, 46, 104, 0.9); box-shadow: 0 0 16px rgba(255, 201, 74, 0.25); }
.bp-ships button.flying small { color: var(--gold); }
.bp-ships button.locked { border-style: dashed; color: rgba(234, 246, 255, 0.55); }
.bp-fly { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); text-align: center; }
.bp-fly .launch { min-width: 260px; padding: 12px 26px; font-size: 14px; letter-spacing: 0.24em; cursor: pointer; }
.bp-flying, .bp-lock { margin: 0; font: 700 11px var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.bp-lock { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px dashed rgba(255, 201, 74, 0.7); background: rgba(8, 36, 84, 0.6); color: var(--ink); letter-spacing: 0.14em; }
.bp-lock b { color: var(--gold); letter-spacing: 0.24em; }

/* The workbench, along the bottom: a tab for each slot (and the paint), then a card for every part that fits it. */
.bp-bench { position: absolute; left: 50%; bottom: 44px; width: min(760px, calc(100vw - 620px)); min-width: 520px; transform: translateX(-50%); }
.bp-tabs { display: flex; gap: 4px; }
.bp-tabs button {
  flex: 1; padding: 8px 6px; border: 1px solid rgba(234, 246, 255, 0.4); border-bottom: 0; background: rgba(8, 36, 84, 0.5); cursor: pointer;
  color: var(--ink-dim); font: 800 11px var(--display); letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.2s, color 0.2s;
}
.bp-tabs button:hover { color: var(--ink); }
.bp-tabs button.on { border-color: var(--gold); background: rgba(10, 46, 104, 0.92); color: var(--gold); }
/* As tall as a row of cards on every tab, so the tabs don't jump about. */
.bp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; min-height: 156px; padding: 10px; border: 1px solid var(--gold); background: rgba(8, 36, 84, 0.8); }
.bp-card {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 8px; border: 1px solid rgba(234, 246, 255, 0.4); background: rgba(234, 246, 255, 0.04);
  color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.bp-card b { font: 800 12px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.bp-cost { display: flex; align-items: center; gap: 7px; min-height: 12px; }
.bp-cost em { font: 700 10px var(--display); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.bp-boost { font: 700 12px var(--ui); color: #7dffb0; }
.bp-about { flex: 1; font: 500 12px/1.35 var(--ui); color: #d6e8ff; }
.bp-card small { margin-top: 2px; font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.bp-card.ready:hover { border-color: var(--ink); background: rgba(234, 246, 255, 0.14); transform: translateY(-2px); }
.bp-card.ready small { color: var(--ink); }
.bp-card.fitted { border: 2px solid var(--gold); background: rgba(255, 201, 74, 0.12); cursor: default; }
.bp-card.fitted small { color: var(--gold); }
.bp-card.short small { color: #ff9a8a; }
.bp-card.missing { border-style: dashed; }
.bp-card.missing > :not(small) { opacity: 0.45; }
.bp-card.missing small { color: var(--ink); }
.bp-card:disabled:not(.fitted) { cursor: not-allowed; }
.bp-paint { grid-column: 1 / -1; align-self: center; display: grid; gap: 10px; }
.bp-paint p { display: flex; align-items: center; gap: 9px; margin: 0; }
.bp-paint span { width: 74px; font: 700 10px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.bp-paint button { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: var(--c); cursor: pointer; transition: transform 0.15s; }
.bp-paint button:hover { transform: scale(1.12); }
.bp-paint button.on { border-color: #ffffff; box-shadow: 0 0 0 3px var(--gold); }
.bp-paint button:disabled { cursor: not-allowed; opacity: 0.5; }

.bp-hint { position: absolute; left: 50%; bottom: 18px; margin: 0; transform: translateX(-50%); font: 600 11px var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); pointer-events: none; }
/* The scan line that sweeps across as the ship turns into its blueprint, and back. */
.bp-scan {
  position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; background: #d8fbff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 16px 4px rgba(88, 230, 255, 0.9), 0 0 70px 16px rgba(88, 230, 255, 0.35);
}
.destination .unknown { font: 800 15px var(--display); letter-spacing: 0.4em; color: var(--magenta); text-shadow: 0 0 10px rgba(255, 79, 216, 0.7); }
.actions { display: flex; gap: 10px; margin-top: 18px; }
.actions button { cursor: pointer; }
.step { width: 50px; border: 1px solid var(--line); background: rgba(88, 230, 255, 0.06); color: var(--cyan); font: 700 24px/1 var(--display); transition: background 0.2s; }
.step:hover { background: rgba(88, 230, 255, 0.18); }
.launch {
  flex: 1; padding: 15px 10px; border: 0; color: #03101a; font: 900 17px var(--display); letter-spacing: 0.34em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: filter 0.2s;
}
.launch:hover { filter: brightness(1.18); }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Planet names under each planet in the scene. */
.planet-label {
  position: absolute; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 6px; border: 0; background: none; color: var(--ink); opacity: 0.7;
  font: 700 12px var(--display); letter-spacing: 0.26em; text-transform: uppercase; text-shadow: 0 0 6px #000, 0 0 12px #000;
  transition: opacity 0.2s, color 0.2s;
}
.planet-label:hover, .planet-label.on { opacity: 1; color: var(--cyan); text-shadow: 0 0 10px rgba(88, 230, 255, 0.8), 0 0 4px #000; }
.planet-label.locked b { color: var(--dim); }
.planet-label.locked::after { content: 'Locked'; font: 600 9px var(--ui); letter-spacing: 0.2em; color: var(--amber); }
.planet-label.beaten b { color: #8f99a8; }
.planet-label.beaten .pips { filter: grayscale(1); opacity: 0.6; }
.planet-label.beaten::after { content: 'Beaten'; font: 600 9px var(--ui); letter-spacing: 0.2em; color: #8f99a8; }
dd.locked { color: var(--amber); }
.pips { display: flex; gap: 4px; }
.pips i { width: 6px; height: 6px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.25); }
.pips i.on { background: var(--amber); box-shadow: 0 0 6px rgba(255, 181, 71, 0.9); }

.hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; font: 600 12px var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); opacity: 0.8; pointer-events: none; }

#error { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; max-width: 80vw; padding: 12px 18px; background: #c62f3e; color: #ffffff; font: 600 15px var(--ui); }

@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .title, .ship-panel, .destination { animation: none; }
}

/* --- Open space: the battle panel on the map, and the space battle itself ----------------------------------------- */
@keyframes arrive-centre { from { opacity: 0; transform: translate(-50%, 14px); } }
.battle-panel { left: 50%; bottom: 52px; width: 380px; transform: translateX(-50%); border-color: rgba(255, 90, 79, 0.5); animation: arrive-centre 1s 1.6s var(--ease) both; }
.battle-panel .eyebrow { color: #ff7a6a; }
.battle-panel h3 { font-size: 20px; }
.battle-panel .blurb { margin: 8px 0 0; font: 500 13px/1.45 var(--ui); color: #cfdcf0; }
.battle-panel .record { margin: 8px 0 0; font: 600 12px var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.battle-panel .record b { color: #ffffff; font-family: var(--display); }
.battle-panel h3 small { font: 700 12px var(--display); letter-spacing: 0.16em; color: #7dffb0; }
.battle-panel .record .bars { margin: 0 6px; vertical-align: -1px; }
.battle-panel .record .bars i { width: 12px; height: 8px; }
.battle-panel .actions { margin-top: 14px; }
.battle-panel .fight { flex: 1; width: auto; margin-top: 0; }
.battle-panel .locked { flex: 1; display: grid; place-items: center; margin: 0; padding: 0 8px; border: 1px dashed rgba(255, 90, 79, 0.55); font: 700 10px/1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: #ff9a8a; }
.fight {
  width: 100%; margin-top: 14px; padding: 12px 10px; border: 0; cursor: pointer; color: #1a0306; font: 900 14px var(--display); letter-spacing: 0.28em; text-transform: uppercase;
  background: linear-gradient(90deg, #ff5a4f, #ff9a3c); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: filter 0.2s;
}
.fight:hover { filter: brightness(1.15); }
.battle-panel { transition: opacity 0.45s; }
body:is(.flying, .inspecting, .battling, .choosing) .battle-panel, body.battling :is(.title, .ship-panel, .destination, .hint, #labels, .pilot-chip) { opacity: 0 !important; pointer-events: none; }

.battle-hud .bt-foe { position: fixed; top: 26px; left: 50%; width: min(460px, 50vw); transform: translateX(-50%); text-align: center; pointer-events: none; }
.bt-foe .eyebrow { margin: 0; color: #ff8a7a; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); }
.bt-foe h3 { margin: 2px 0 8px; font: 900 22px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; text-shadow: 0 0 14px rgba(255, 60, 60, 0.9); }
.bt-bar { position: relative; height: 12px; margin-top: 4px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(6, 11, 30, 0.55); transform: skewX(-20deg); }
.bt-bar i { display: block; height: 100%; transition: width 0.15s; }
.bt-bar.shield { height: 9px; }
.bt-bar.shield i { background: linear-gradient(90deg, #2a7fe0, #62d6ff); box-shadow: 0 0 10px rgba(98, 196, 255, 0.7); }
.bt-bar.hull i { background: linear-gradient(90deg, #c01f2e, #ff5a4f); box-shadow: 0 0 10px rgba(255, 60, 60, 0.8); }
.bt-gun { position: fixed; right: 40px; bottom: 30px; min-width: 230px; padding: 10px 16px 12px; text-align: right; border: 1px solid rgba(141, 255, 90, 0.6); border-right-width: 4px; background: rgba(6, 11, 30, 0.55); backdrop-filter: blur(6px); pointer-events: none; }
.bt-gun .eyebrow { margin: 0 0 2px; color: #ffffff; }
.bt-gun b { display: block; font: 900 17px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: #8dff5a; }
.bt-gun span { display: block; margin-top: 2px; font: 600 12px var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: #cfdcf0; }
.bt-fuel { margin-top: 9px; }
.bt-fuel small { display: block; margin-bottom: 3px; font: 700 10px var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.bt-bar.fuel i { background: linear-gradient(90deg, #ffb547, #ffe07a); box-shadow: 0 0 10px rgba(255, 181, 71, 0.7); }

/* The reticle; a gold diamond where to shoot to hit the raider; red brackets round it, or an arrow at the edge of the
   screen pointing to it when it's out of sight. */
.bt-reticle { position: fixed; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; }
.bt-reticle i { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); transition: transform 0.1s, border-color 0.1s; }
.bt-reticle b { position: absolute; top: 19px; left: 19px; width: 6px; height: 6px; border-radius: 50%; background: #8dff5a; box-shadow: 0 0 6px #8dff5a; }
.bt-reticle.hit i { border-color: #fff27a; transform: scale(1.2); }
.bt-reticle.shield i { border-color: #62d6ff; transform: scale(1.15); }
.bt-reticle.kill i { border-color: #ff5a4f; transform: scale(1.5); }
.bt-lead { position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #ffc94a; box-shadow: 0 0 8px rgba(255, 201, 74, 0.9); opacity: 0; pointer-events: none; }
.bt-lead.on { opacity: 1; }
.bt-brackets, .bt-arrow { position: fixed; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bt-brackets.on, .bt-arrow.on { opacity: 1; }
.bt-brackets i { position: absolute; width: 14px; height: 14px; border: 2px solid #ff5a4f; }
.bt-brackets i:nth-child(1) { left: -28px; top: -28px; border-right: 0; border-bottom: 0; }
.bt-brackets i:nth-child(2) { left: 14px; top: -28px; border-left: 0; border-bottom: 0; }
.bt-brackets i:nth-child(3) { left: -28px; top: 14px; border-right: 0; border-top: 0; }
.bt-brackets i:nth-child(4) { left: 14px; top: 14px; border-left: 0; border-top: 0; }
.bt-arrow i { position: absolute; left: -12px; top: -12px; width: 0; height: 0; border-left: 24px solid #ff5a4f; border-top: 12px solid transparent; border-bottom: 12px solid transparent; filter: drop-shadow(0 0 6px rgba(255, 60, 60, 0.9)); transform-origin: 12px 12px; }
.bt-brackets b, .bt-arrow b { position: absolute; top: 34px; left: 0; transform: translateX(-50%); font: 800 11px var(--display); color: #ff8a7a; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.bt-arrow b { top: 18px; }
/* The other enemies: small red diamonds, gold for the ace while it waits its turn. */
.bt-other { position: fixed; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #ff5a4f; box-shadow: 0 0 6px rgba(255, 60, 60, 0.8); opacity: 0; pointer-events: none; }
.bt-other.on { opacity: 0.9; }
.bt-other.waiting { border-color: #ffc94a; box-shadow: 0 0 6px rgba(255, 201, 74, 0.8); }
.bt-warn { position: fixed; top: 30%; left: 50%; margin: 0; transform: translateX(-50%); font: 900 20px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #ff5a4f; text-shadow: 0 0 14px rgba(255, 60, 60, 0.9), 0 2px 4px rgba(0, 0, 0, 0.95); opacity: 0; pointer-events: none; }
.bt-warn.on { opacity: 1; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.sf-hurt.shielded { background: radial-gradient(ellipse at center, transparent 45%, rgba(60, 200, 255, 0.5)); }

/* --- Pilots: who's playing (top right on the map), picking or making one, and the scoreboard --------------------- */
.helmet { display: block; overflow: visible; }
.pilot-chip {
  position: fixed; top: 222px; left: 42px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); color: var(--ink); text-align: left;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: arrive 1s 1s var(--ease) both;
}
.pilot-chip:empty { display: none; }

/* Dev tools: a small chip bottom right of the title screen, and the model lab it opens over everything. */
.dev-chip { position: fixed; right: 18px; bottom: 16px; padding: 6px 12px; border: 1px solid var(--line); background: var(--glass); color: var(--cyan); font: 700 11px var(--display); letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; transition: opacity 0.45s, background 0.2s; }
.dev-chip:hover { background: rgba(20, 40, 80, 0.7); }
body:is(.flying, .inspecting, .battling, .choosing) .dev-chip { opacity: 0; pointer-events: none; }
.lab { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 22px 30px 24px; background: radial-gradient(120% 90% at 50% 0%, rgba(30, 50, 110, 0.96), rgba(3, 5, 12, 0.98)); }
.lab[hidden] { display: none; }
.lab header { display: flex; align-items: center; gap: 18px; }
.lab header .eyebrow { margin: 0; }
.lab h2 { margin: 0; font: 900 26px var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.lab .close { margin-left: auto; padding: 8px 18px; border: 1px solid var(--line); background: rgba(88, 230, 255, 0.06); color: var(--cyan); font: 700 12px var(--display); letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; }
.lab .stage { position: relative; min-height: 0; }
.lab canvas { width: 100%; height: 100%; display: block; border: 1px solid var(--line); }
/* The names under the stands, placed by lab.ts. */
.lab .tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lab .tags p { position: absolute; left: 0; top: 0; margin: 0; padding: 3px 10px 4px; background: rgba(6, 11, 30, 0.62); text-align: center; white-space: nowrap; }
.lab .tags b { display: block; font: 800 14px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; }
.lab .tags small { font-size: 12px; color: #c8d8f0; }
.lab .tags p.row { padding: 5px 12px; background: rgba(6, 11, 30, 0.78); font: 800 12px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.lab .wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 700 13px var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.lab .wait[hidden] { display: none; }
.lab .moves { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lab .moves[hidden] { display: none; }
.lab .moves button { padding: 6px 12px; border: 1px solid var(--line); background: rgba(6, 11, 30, 0.72); color: var(--ink); font: 700 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.lab .moves button.on { background: rgba(88, 230, 255, 0.22); color: var(--cyan); }
.lab :is(.picks, .play) { display: flex; gap: 8px; }
.lab :is(.picks, .play) button { padding: 8px 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 12px var(--display); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.lab :is(.picks, .play) button.on { background: rgba(88, 230, 255, 0.16); color: var(--cyan); }
.lab footer { display: flex; align-items: center; gap: 14px; font: 700 12px var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.pilot-chip:hover { background: rgba(20, 40, 80, 0.7); }
.pilot-chip .helmet { width: 46px; height: 46px; }
.pilot-chip span { display: grid; }
.pilot-chip small { font: 700 10px var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); }
.pilot-chip b { font: 800 17px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.pilot-chip em { margin-left: 6px; font: 900 18px var(--display); font-style: normal; color: #ffd66b; text-shadow: 0 0 10px rgba(255, 170, 50, 0.6); }

.pilots {
  position: fixed; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 40px;
  background: radial-gradient(ellipse at center, rgba(8, 14, 40, 0.55), rgba(3, 5, 12, 0.85)); animation: fade 0.35s ease-out;
}
.pilots[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.pl-panel {
  position: relative; max-height: calc(100vh - 80px); overflow: auto; padding: 24px 26px 22px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); animation: arrive 0.5s var(--ease) both;
}
.pl-panel h2 { margin: 0 0 18px; font: 900 34px var(--display); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 0 18px rgba(88, 230, 255, 0.35); }
.pl-who { width: min(620px, 56vw); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pl-card { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(88, 230, 255, 0.28); background: rgba(88, 230, 255, 0.05); transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.pl-card:hover { border-color: var(--cyan); background: rgba(88, 230, 255, 0.12); transform: translateY(-3px); }
.pl-card.on { border-color: #ffd66b; box-shadow: 0 0 18px rgba(255, 201, 74, 0.35); }
.pl-pick, .pl-new { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 12px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.pl-pick .helmet { width: 92px; height: 92px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.pl-pick b, .pl-new b { font: 800 16px var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.pl-pick span { font: 900 15px var(--display); color: #ffd66b; }
.pl-edit { padding: 7px; border: 0; border-top: 1px solid rgba(88, 230, 255, 0.2); background: rgba(0, 0, 0, 0.2); color: var(--dim); cursor: pointer; font: 700 10px var(--display); letter-spacing: 0.26em; text-transform: uppercase; }
.pl-edit:hover { color: var(--cyan); }
.pl-new { justify-content: center; min-height: 172px; border: 1px dashed rgba(88, 230, 255, 0.5); }
.pl-new i { font: 300 64px/1 var(--ui); font-style: normal; color: var(--cyan); }
.pl-close.step.wide { margin-top: 18px; padding: 12px 18px; }

.pl-board { width: min(420px, 36vw); }
.pl-ranks { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pl-ranks li { display: grid; grid-template-columns: 26px 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); }
.pl-ranks li:first-child { border-color: rgba(255, 214, 107, 0.6); background: rgba(255, 214, 107, 0.08); }
.pl-ranks .rank { font: 900 18px var(--display); color: var(--dim); text-align: center; }
.pl-ranks li:first-child .rank { color: #ffd66b; }
.pl-ranks .helmet { width: 44px; height: 44px; }
.pl-ranks .who { display: grid; min-width: 0; }
.pl-ranks .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.pl-ranks .who small { font: 600 11px var(--ui); letter-spacing: 0.08em; color: var(--dim); }
.pl-ranks em { font: 900 20px var(--display); font-style: normal; color: #ffd66b; }
.pl-ranks .empty { display: block; color: var(--dim); font: 600 14px var(--ui); }
.pl-records { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.pl-records dt { font: 700 13px var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.pl-records dt.unknown { letter-spacing: 0.4em; color: var(--magenta); }
.pl-records dd { margin: 0; font: 800 15px var(--display); color: #ffffff; text-align: right; }
.pl-records dd small { margin-left: 6px; font: 600 12px var(--ui); letter-spacing: 0.06em; color: var(--dim); text-transform: uppercase; }

.pl-editor { display: grid; grid-template-columns: 220px 1fr; gap: 6px 30px; width: min(760px, 92vw); }
.pl-editor .eyebrow { grid-column: 1 / -1; }
.pl-preview .helmet { width: 220px; height: 220px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); }
.pl-fields { display: grid; gap: 14px; align-content: start; }
.pl-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; }
.pl-row > span { font: 700 11px var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.pl-row input { padding: 10px 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: #ffffff; font: 800 20px var(--display); letter-spacing: 0.08em; text-transform: uppercase; outline: none; }
.pl-row input:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(88, 230, 255, 0.35); }
.pl-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-swatches button { width: 32px; height: 32px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: var(--c); cursor: pointer; transition: transform 0.15s; }
.pl-swatches button:hover { transform: scale(1.12); }
.pl-swatches button.on { border-color: #ffffff; box-shadow: 0 0 0 3px var(--cyan); }
.pl-toppers { display: flex; gap: 8px; }
.pl-toppers button { display: grid; justify-items: center; gap: 2px; padding: 6px 8px 5px; border: 1px solid rgba(88, 230, 255, 0.25); background: rgba(88, 230, 255, 0.04); color: var(--dim); cursor: pointer; }
.pl-toppers button.on { border-color: var(--cyan); background: rgba(88, 230, 255, 0.16); color: #ffffff; }
.pl-toppers .helmet { width: 50px; height: 50px; }
.pl-toppers small { font: 700 9px var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.pl-editor .actions { margin-top: 6px; }
.pl-delete { justify-self: start; padding: 6px 0; border: 0; background: none; color: #ff8a7a; cursor: pointer; font: 700 11px var(--display); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }
.pl-delete:hover { opacity: 1; text-decoration: underline; }

/* --- Touchscreens (controls.ts) ------------------------------------------------------------------------------------ */
/* No zooming in on a double tap, nothing scrolling under the game, and on a touchscreen no selecting text or callouts on
   a long press (except in the name box). */
html { touch-action: manipulation; }
#scene { touch-action: none; }
body[data-input="touch"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body[data-input="touch"] input { -webkit-user-select: text; user-select: text; }
/* The stick (waiting bottom left, it jumps to wherever your thumb comes down on that side of the screen) and the
   buttons, bottom right: Fire (big and red: drag it to aim as you fire), Jump, Slide, the blade and your ride, with a
   second Fire on the left. In a battle, Fire and Boost. A finger anywhere else looks round. */
.touch { position: fixed; inset: 0; z-index: 1; touch-action: none; }
.touch[hidden] { display: none; }
.tc-stick { position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity 0.2s; }
.tc-stick.idle { opacity: 0.5; }
.tc-stick .ring { position: absolute; left: -66px; top: -66px; width: 132px; height: 132px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: radial-gradient(circle, rgba(6, 11, 30, 0.12), rgba(6, 11, 30, 0.45)); }
.tc-stick .knob { position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; border-radius: 50%; background: rgba(234, 246, 255, 0.85); box-shadow: 0 0 14px rgba(88, 230, 255, 0.7); }
.tc-stick b { position: absolute; left: -60px; top: -100px; width: 120px; font: 800 11px var(--display); letter-spacing: 0.22em; text-align: center; text-transform: uppercase; color: #ffd66b; text-shadow: 0 0 8px rgba(255, 170, 50, 0.8); opacity: 0; transition: opacity 0.15s; }
.tc-stick.sprinting b { opacity: 1; }
.tc-stick.sprinting .ring { border-color: #ffd66b; box-shadow: 0 0 14px rgba(255, 170, 50, 0.5); }
.tc { position: absolute; display: grid; place-content: center; justify-items: center; gap: 1px; width: 72px; height: 72px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: rgba(6, 11, 30, 0.42); color: #ffffff; backdrop-filter: blur(4px); transition: transform 0.08s, background 0.08s; }
.tc svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 10, 30, 0.8)); }
.tc small { font: 800 9px var(--display); letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 10, 30, 0.9); }
.tc.down { transform: scale(0.92); background: rgba(88, 230, 255, 0.4); }
.tc.fire { right: 118px; bottom: 118px; width: 108px; height: 108px; border-color: #ff6a5a; background: rgba(120, 20, 20, 0.35); }
.tc.fire svg { width: 40px; height: 40px; }
.tc.fire.down { background: rgba(255, 90, 79, 0.55); }
.tc.fire.left { right: auto; left: 36px; bottom: 300px; width: 74px; height: 74px; }
.tc.fire.left svg { width: 30px; height: 30px; }
.tc.jump, .tc.boost { right: 24px; bottom: 38px; width: 88px; height: 88px; }
.tc.slide { right: 32px; bottom: 166px; }
.tc.blade { right: 252px; bottom: 32px; }
.tc.ride { right: 254px; bottom: 150px; width: 66px; height: 66px; }
.touch[data-context="battle"] :is(.jump, .slide, .blade, .ride), .touch:not([data-context="battle"]) .boost, .touch:not([data-ride]) .ride { display: none; }
/* The HUD makes room for thumbs: health and the guns along the bottom in the middle (tap a gun to switch to it, or the
   berries to eat one), what you can do over the buttons (tap it to do it), and no help line. */
body[data-input="touch"] .sf-help { display: none; }
body[data-input="touch"] .sf-vitals { left: 50%; bottom: 8px; transform: translateX(-50%) scale(0.78); transform-origin: 50% 100%; }
body[data-input="touch"] .sf-weapon { right: auto; left: 50%; bottom: 52px; z-index: 2; min-width: 0; padding: 0; border: 0; background: none; backdrop-filter: none; transform: translateX(-50%); }
body[data-input="touch"] .sf-weapon :is(.name, .stats, .melee) { display: none; }
body[data-input="touch"] .sf-weapon .slots { margin: 6px 0 0; pointer-events: auto; touch-action: none; }
body[data-input="touch"] .sf-pouch { left: auto; right: calc(50% + 140px); bottom: 54px; z-index: 2; pointer-events: auto; touch-action: none; }
body[data-input="touch"] .sf-pouch kbd { display: none; }
body[data-input="touch"] .surface-hud .sf-prompt { left: auto; right: 24px; bottom: 286px; z-index: 2; padding: 13px 20px; transform: none; border-color: rgba(255, 255, 255, 0.75); touch-action: none; }
body[data-input="touch"] .surface-hud.on .sf-prompt.on { pointer-events: auto; }
body[data-input="touch"] .sf-prompt .keys { display: none; }
body[data-input="touch"] .sf-tip { bottom: 116px; max-width: min(520px, calc(100vw - 660px)); }
body[data-input="touch"] .sf-toast { top: 30%; bottom: auto; }
body[data-input="touch"] .sf-leave { z-index: 2; }
body[data-input="touch"] .bt-gun { top: 92px; right: 24px; bottom: auto; transform: scale(0.85); transform-origin: 100% 0; }
/* Held upright, a tablet's too narrow for the stick, the buttons and the HUD: it asks to be turned on its side. (Under
   the error banner, so that still shows.) */
.sideways { display: none; }
@media (orientation: portrait) {
  body[data-input="touch"] .sideways { position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 20px; background: radial-gradient(120% 90% at 50% 30%, rgba(30, 50, 110, 0.97), rgba(3, 5, 12, 0.99)); }
}
.sideways svg { width: 96px; height: 96px; fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(88, 230, 255, 0.6)); animation: sideways 2.4s var(--ease) infinite; }
.sideways b { font: 800 18px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: #ffffff; }
@keyframes sideways { 0%, 25% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }

/* --- Signing in (pilots.ts): the accounts signed in on this device, the sign-in form, and bringing a pilot's progress. */
.pl-new small, .pl-badge { font: 700 9px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); text-align: center; }
.pl-badge { color: var(--cyan); }
.pl-badge.local { color: var(--dim); }
.pl-key i svg { width: 54px; height: 54px; fill: var(--cyan); filter: drop-shadow(0 0 10px rgba(88, 230, 255, 0.6)); }
.pl-online { border-color: rgba(88, 230, 255, 0.55); }
.pl-actions { display: grid; grid-template-columns: 1fr 1fr; }
.pl-actions .pl-edit + .pl-edit { border-left: 1px solid rgba(88, 230, 255, 0.2); }
.pl-problem { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid #ff5a4f; background: rgba(255, 90, 79, 0.12); color: #ffc2bd; font: 600 14px/1.4 var(--ui); }
.pl-problem.small { font-size: 12px; }
.pl-blurb { margin: -8px 0 18px; color: #cfdcf0; font: 500 15px/1.45 var(--ui); }
.pl-signin { display: grid; gap: 14px; width: min(520px, 92vw); }
.pl-signin h2 { margin-bottom: 8px; }
.pl-signin .pl-row { grid-template-columns: 96px 1fr; }
.pl-signin .actions { display: flex; gap: 10px; margin-top: 4px; }
.pl-signin input[type=password] { text-transform: none; letter-spacing: 0.2em; }
.pl-bring { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-bring button { display: grid; justify-items: center; gap: 2px; min-width: 76px; padding: 6px 8px 5px; border: 1px solid rgba(88, 230, 255, 0.25); background: rgba(88, 230, 255, 0.04); color: var(--dim); cursor: pointer; font: 700 10px var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.pl-bring button.on { border-color: var(--cyan); background: rgba(88, 230, 255, 0.16); color: #ffffff; }
.pl-bring .helmet { width: 40px; height: 40px; }
.pl-bring b { font: 800 11px var(--display); letter-spacing: 0.06em; color: #ffffff; }
.pl-bring small { font: 800 10px var(--display); color: #ffd66b; }

/* --- The admin page (admin.ts): the players' accounts. Unlike the game, it scrolls: the page, with the panel as tall as
   it needs (not held to the window like the game's, which squeezed the table of how they've played down to a row). */
html:has(body.admin), body.admin { height: auto; min-height: 100%; overflow: auto; }
body.admin { background: radial-gradient(120% 80% at 50% 0%, #142a5c, #03050c 70%); }
.ad { display: grid; justify-items: center; padding: 40px 16px 60px; }
.ad-panel { display: grid; gap: 18px; width: min(900px, 100%); max-height: none; }
.ad-panel h2 { margin: 0; }
.ad-panel .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-made { display: grid; gap: 6px; padding: 14px 18px; border: 1px solid rgba(255, 214, 107, 0.7); border-left-width: 4px; background: rgba(255, 214, 107, 0.08); }
.ad-made .eyebrow { margin: 0 0 4px; color: #ffd66b; }
.ad-made p { display: flex; gap: 14px; align-items: baseline; margin: 0; }
.ad-made span { width: 90px; font: 700 11px var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.ad-made b { font: 800 24px var(--display); letter-spacing: 0.06em; color: #ffffff; user-select: all; }
.ad-made small { color: var(--dim); font: 500 13px var(--ui); }
.ad-add { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid rgba(88, 230, 255, 0.28); background: rgba(88, 230, 255, 0.05); }
.ad-add .eyebrow { margin: 0; }
.ad-add .pl-row, .ad-panel form .pl-row { grid-template-columns: 96px 1fr; }
.ad-add input { text-transform: none; }
.ad-list { width: 100%; border-collapse: collapse; font: 600 15px var(--ui); }
.ad-list th { padding: 8px 10px; border-bottom: 1px solid rgba(88, 230, 255, 0.3); font: 700 11px var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); text-align: left; }
.ad-list td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ad-list td b { font: 800 15px var(--display); letter-spacing: 0.06em; }
.ad-list td i { color: var(--dim); }
.ad-do { display: flex; gap: 6px; justify-content: flex-end; }
.ad-do .pl-edit { border: 1px solid rgba(88, 230, 255, 0.3); }
.ad-do .ad-delete:hover { color: #ff8a7a; }
.ad-none { color: var(--dim); text-align: center; }
.ad-sub { margin: 10px 0 -8px; }
.ad-scroll { overflow-x: auto; }
.ad-stats { white-space: nowrap; }
.ad-stats th { white-space: normal; vertical-align: bottom; }
.ad-stats :is(th, td):not(:first-child) { text-align: right; }
.ad-stats td small { display: block; margin-top: 2px; color: var(--dim); font: 500 12px var(--ui); white-space: normal; }
.ad-note { color: var(--dim); font: 500 13px var(--ui); }
@media (max-width: 640px) {
  .ad-list th:nth-child(4), .ad-list td:nth-child(4) { display: none; }
}

/* --- Playing together (friends.ts): each other player's name over their head, edged in their trim's colour, and their
   mark on the compass, in that colour, with their name. */
.sf-friend { position: fixed; left: 0; top: 0; padding: 3px 9px 4px; border-left: 3px solid var(--accent); background: rgba(6, 11, 30, 0.55); white-space: nowrap; pointer-events: none; will-change: transform; }
.sf-friend[hidden] { display: none; }
.sf-friend b { font: 800 13px var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 10, 30, 0.9); }
.sf-compass .mark.friend b { color: #ffffff; }

/* --- Smaller screens: the panels and the HUD shrink to fit, so the planets (and the planet you're on) stay in view. --- */
/* A tablet or a small laptop: the map's panels a little smaller, without the small print. */
@media (max-width: 1280px), (max-height: 820px) {
  .title { top: 26px; left: 30px; }
  .tagline { font-size: 11px; }
  .pilot-chip { top: 192px; left: 30px; }
  .ship-panel { left: 30px; bottom: 26px; width: 264px; }
  .ship-panel .small, .battle-panel .blurb, .destination .blurb { display: none; }
  .ship-panel dl { gap: 7px 14px; margin-top: 10px; }
  .battle-panel { bottom: 40px; width: 330px; }
  .destination { right: 30px; bottom: 26px; width: 320px; }
  .destination h2, .arrival h2 { font-size: 28px; }
  .arrival { left: 30px; bottom: 26px; width: 330px; }
  .arrival .blurb { font-size: 14px; }
}

/* A phone on its side: the title small, the pilot top right, three short panels along the bottom (only what you need
   to pick and go: each planet's threat is under it), and a smaller "Who's playing?". */
@media (max-height: 520px) {
  .title { top: 12px; left: 16px; }
  .logo { font-size: 28px; }
  .tagline, .hint { display: none; }
  .pilot-chip { top: 68px; left: 16px; gap: 8px; padding: 5px 12px 5px 6px; }
  .pilot-chip .helmet { width: 34px; height: 34px; }
  .pilot-chip small { font-size: 8px; }
  .pilot-chip b { font-size: 14px; }
  .pilot-chip em { font-size: 14px; }
  .dev-chip { top: 12px; right: 16px; bottom: auto; padding: 4px 9px; font-size: 9px; }
  .panel { padding: 10px 12px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
  .eyebrow { margin-bottom: 3px; font-size: 9px; letter-spacing: 0.22em; }
  .panel dl { gap: 4px 10px; margin-top: 6px; }
  .panel dt { font-size: 9px; }
  .panel dd { font-size: 12px; }
  .ship-panel { left: 12px; bottom: 12px; width: min(200px, 24vw); }
  .ship-panel dl, .destination .extra { display: none; }
  .ship-panel h3, .battle-panel h3 { font-size: 15px; }
  .blueprint-button { margin-top: 8px; padding: 8px 4px; font-size: 10px; letter-spacing: 0.16em; }
  .battle-panel { bottom: 12px; width: min(260px, 31vw); }
  .battle-panel .eyebrow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .battle-panel .record { margin-top: 4px; font-size: 10px; }
  .battle-panel .locked { font-size: 9px; }
  .destination { right: 12px; bottom: 12px; width: min(260px, 31vw); }
  .destination h2, .arrival h2 { font-size: 22px; }
  .destination .kind, .arrival .kind { margin-top: 2px; font-size: 10px; }
  .destination .unknown { font-size: 12px; }
  .arrival { left: 12px; bottom: 12px; width: min(300px, 40vw); }
  .arrival .blurb { margin-top: 6px; font-size: 12px; }
  .actions, .battle-panel .actions { gap: 6px; margin-top: 8px; }
  .step { width: 34px; font-size: 18px; }
  .step.wide { padding: 0 10px; font-size: 10px; }
  .launch { padding: 9px 6px; font-size: 12px; letter-spacing: 0.24em; }
  .fight { padding: 8px 6px; font-size: 11px; letter-spacing: 0.2em; }
  .planet-label { font-size: 10px; letter-spacing: 0.2em; }
  .planet-label .sub { display: none; }

  .pilots { gap: 12px; padding: 12px; }
  .pl-panel { max-height: calc(100vh - 24px); padding: 14px 16px 12px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
  .pl-panel h2 { margin-bottom: 10px; font-size: 22px; }
  .pl-who { width: min(560px, 58vw); }
  .pl-cards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .pl-pick, .pl-new { gap: 4px; padding: 10px 8px 8px; }
  .pl-pick .helmet { width: 58px; height: 58px; }
  .pl-pick b, .pl-new b { font-size: 13px; }
  .pl-new { min-height: 118px; }
  .pl-new i { font-size: 40px; }
  .pl-key i svg { width: 34px; height: 34px; }
  .pl-close.step.wide { margin-top: 10px; padding: 9px 14px; }
  .pl-board { width: min(320px, 36vw); }
  .pl-ranks { gap: 6px; margin-bottom: 12px; }
  .pl-ranks li { grid-template-columns: 20px 32px 1fr auto; gap: 8px; padding: 5px 8px 5px 6px; }
  .pl-ranks .helmet { width: 32px; height: 32px; }
  .pl-ranks .rank { font-size: 14px; }
  .pl-ranks .who b { font-size: 13px; }
  .pl-ranks em { font-size: 15px; }
  .pl-records { gap: 5px 12px; }
  .pl-records dt { font-size: 11px; }
  .pl-records dd { font-size: 12px; }
  .pl-editor { grid-template-columns: 130px 1fr; gap: 4px 18px; }
  .pl-preview .helmet { width: 130px; height: 130px; }
  .pl-fields { gap: 8px; }
  .pl-row input { padding: 7px 10px; font-size: 16px; }
  .pl-swatches button { width: 26px; height: 26px; }
  .pl-toppers .helmet { width: 36px; height: 36px; }
  .pl-blurb { margin: -4px 0 10px; font-size: 13px; }
  .pl-signin { gap: 10px; }
}

/* On the ground, on a phone on its side: where you are, your score and the goal small and up in the corner, the
   compass and the boss's health smaller, and on a touchscreen the buttons a size down and the how-tos up under the
   compass, as wide as there's room for between the goal and the far side. */
@media (max-height: 520px) {
  .sf-place { top: 10px; left: 16px; }
  .sf-place .eyebrow { display: none; }
  .sf-place h2 { font-size: 20px; }
  .sf-kind { margin-top: 2px; font-size: 9px; }
  .sf-zaps { top: 54px; left: 16px; font-size: 9px; }
  .sf-zaps b { font-size: 14px; }
  .sf-goal { top: 74px; left: 16px; max-width: 190px; padding: 5px 9px 6px; }
  .sf-goal .eyebrow { margin-bottom: 1px; }
  .sf-goal .text { font-size: 12px; line-height: 1.3; }
  .sf-compass { top: 8px; transform: translateX(-50%) scale(0.82); transform-origin: 50% 0; }
  .sf-leave { top: 10px; right: 16px; padding: 8px 12px; font-size: 10px; }
  .sf-boss { top: 52px; width: min(420px, 50vw); }
  .sf-boss h3 { margin-bottom: 4px; font-size: 16px; }
  .sf-boss .bar { height: 12px; }
  .sf-race { top: 52px; }
  .sf-race h3 { font-size: 24px; }
  .sf-banner { top: 16%; }
  .sf-banner h2 { font-size: 30px; }
  .sf-banner p { margin-top: 6px; font-size: 12px; }
  .sf-air { left: 16%; top: 30%; }
  .sf-tip p { font-size: 13px; }
  .sf-toast { font-size: 11px; }
  body[data-input="touch"] .sf-tip { top: 64px; bottom: auto; gap: 10px; max-width: min(440px, calc(100vw - 440px)); padding: 7px 12px; }
  body[data-input="touch"] .sf-toast { top: 36%; }
  .tc { width: 58px; height: 58px; }
  .tc svg { width: 24px; height: 24px; }
  .tc.fire { right: 90px; bottom: 90px; width: 86px; height: 86px; }
  .tc.fire svg { width: 32px; height: 32px; }
  .tc.fire.left { left: 14px; bottom: 14px; width: 56px; height: 56px; }
  .tc.fire.left svg { width: 24px; height: 24px; }
  .tc.jump, .tc.boost { right: 16px; bottom: 22px; width: 70px; height: 70px; }
  .tc.slide { right: 20px; bottom: 116px; }
  .tc.blade { right: 190px; bottom: 16px; }
  .tc.ride { right: 190px; bottom: 96px; width: 54px; height: 54px; }
  body[data-input="touch"] .surface-hud .sf-prompt { right: 16px; bottom: 190px; padding: 9px 14px; font-size: 12px; }
  body[data-input="touch"] .sf-vitals { bottom: 4px; transform: translateX(-50%) scale(0.62); }
  body[data-input="touch"] .sf-weapon { bottom: 38px; transform: translateX(-50%) scale(0.8); transform-origin: 50% 100%; }
  body[data-input="touch"] .sf-pouch { right: calc(50% + 116px); bottom: 42px; transform: scale(0.85); transform-origin: 100% 100%; }
}

/* A smaller phone still (on its side, under 720 wide): the panels' words smaller still, the mission without its threat,
   and the gun slots smaller, with the blade and the ride buttons nearer the right. */
@media (max-height: 520px) and (max-width: 720px) {
  .ship-panel { width: 26vw; }
  .battle-panel, .destination { width: 30vw; }
  .ship-panel h3, .battle-panel h3 { font-size: 13px; }
  .destination h2, .arrival h2 { font-size: 19px; }
  .blueprint-button { font-size: 9px; letter-spacing: 0.1em; }
  .battle-panel .record { display: none; }
  .launch { letter-spacing: 0.16em; }
  .fight { letter-spacing: 0.12em; }
  body[data-input="touch"] .sf-weapon { transform: translateX(-50%) scale(0.7); }
  body[data-input="touch"] .sf-pouch { right: calc(50% + 100px); }
  .tc.blade { right: 160px; }
  .tc.ride { right: 180px; bottom: 100px; }
}
@media (max-height: 520px) {
  .battle-hud .bt-foe { width: min(380px, 44vw); }
}

/* The hangar on a phone on its side: the ship's name and its power top left, the ships across the top and the way back
   top right, the drawing on the left (blueprint.ts moves it over) and the workbench down the right, its cards scrolling;
   no callouts, measurements or title block (the cards say what each part does). */
@media (max-height: 520px) {
  .blueprint :is(.bp-callout, .bp-leaders, .bp-dim, .bp-titleblock, .bp-hint, .bp-class, .bp-blurb) { display: none; }
  .bp-head { top: 10px; left: 16px; }
  .bp-head h2 { font-size: 17px; }
  .bp-head dl { gap: 4px 10px; margin-top: 6px; }
  .bp-head dl > :not(:nth-last-child(-n + 2)) { display: none; }
  .blueprint dt { font-size: 9px; }
  .bp-power b { font-size: 10px; }
  .bp-close { top: 10px; right: 16px; padding: 8px 12px; font-size: 10px; letter-spacing: 0.18em; }
  .bp-ships { top: 8px; gap: 6px; }
  .bp-ships button { gap: 1px; min-width: 0; padding: 5px 10px 4px; }
  .bp-ships b { font-size: 10px; }
  .bp-ships small { font-size: 8px; }
  .bp-fly { top: auto; left: 16px; bottom: 14px; transform: none; text-align: left; }
  .bp-fly .launch { min-width: 0; padding: 9px 18px; font-size: 11px; }
  .bp-flying, .bp-lock { font-size: 9px; }
  .bp-lock { padding: 5px 10px; }
  .bp-bench { left: auto; right: 12px; top: 58px; bottom: 12px; display: flex; flex-direction: column; width: min(400px, 46vw); min-width: 0; transform: none; }
  .bp-tabs button { padding: 6px 2px; font-size: 9px; letter-spacing: 0.08em; }
  .bp-cards { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; padding: 8px; }
  .bp-card { gap: 3px; padding: 7px 8px 6px; }
  .bp-card b { font-size: 10px; }
  .bp-boost, .bp-about { font-size: 11px; }
  .bp-card small { font-size: 9px; }
  .bp-paint p { flex-wrap: wrap; gap: 6px; }
  .bp-paint span { width: 72px; flex: none; }
  .bp-paint button { width: 26px; height: 26px; }
}
@media (max-height: 520px) and (max-width: 720px) {
  .bp-head h2 { font-size: 14px; }
  .bp-ships b { font-size: 9px; letter-spacing: 0.06em; }
  .bp-close { font-size: 9px; letter-spacing: 0.12em; }
}