/* fx.css — Homeworld AAA visual system (presentation only; loads after style.css).
   Owner: visual-system pass, 2026-09-23 · Stardate 2026.266. style.css stays
   byte-stable (contracts pin its text) — everything here is an override.

   Laws this file keeps: zero external requests (Geist + Geist Mono come from
   hw-tokens.css), prefers-reduced-motion honoured (every reveal lives inside a
   no-preference block), no text under 11px, and no DOM the engine needs is
   hidden. Generated emoji slots are repainted with the sprite's glyphs by CSS
   alone: a masked span, or ::first-letter{font-size:0} for a leading emoji in
   generated text, plus a masked ::before. The --ico-* sources below are
   generated from the same definitions as the inline <symbol> sprite in
   index.html, so the two sets never drift. */

/* ---- icon mask sources (generated with the sprite) ---- */
:root{
  --ico-scrap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M9.58 5.54L10.52 5.26L10.42 2.94L13.58 2.94L13.48 5.26L14.86 5.72L15.72 6.19L17.29 4.47L19.53 6.71L17.81 8.28L18.46 9.58L18.74 10.52L21.06 10.42L21.06 13.58L18.74 13.48L18.28 14.86L17.81 15.72L19.53 17.29L17.29 19.53L15.72 17.81L14.42 18.46L13.48 18.74L13.58 21.06L10.42 21.06L10.52 18.74L9.14 18.28L8.28 17.81L6.71 19.53L4.47 17.29L6.19 15.72L5.54 14.42L5.26 13.48L2.94 13.58L2.94 10.42L5.26 10.52L5.72 9.14L6.19 8.28L4.47 6.71L6.71 4.47L8.28 6.19Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-signal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M4 10.5A8.5 8.5 0 0 0 13.5 20Z'/%3E%3Cpath d='M8.6 15.4 14 10'/%3E%3Ccircle cx='14.6' cy='9.4' r='1.3' fill='%23000' stroke='none'/%3E%3Cpath d='M16.4 5.6a4.2 4.2 0 0 1 2 2'/%3E%3Cpath d='M16.8 2.4a7.4 7.4 0 0 1 4.8 4.8'/%3E%3Cpath d='M7.5 19.8 6 22h6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M13.6 2.5 4.8 13.6h6.3l-1.5 7.9 9.6-11.6h-6.4Z'/%3E%3C/g%3E%3C/svg%3E");
  --ico-scrapworks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M3 21V11.2l5 3v-3l5 3V6.5h3V3h3.2v18Z'/%3E%3Cpath d='M6.5 17.5h2M11 17.5h2M16 17.5h1.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-signalArray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 22 12 11l3.4 11'/%3E%3Cpath d='M9.8 18h4.4M10.8 14.5h2.4'/%3E%3Cpath fill='%23000' fill-opacity='.22' d='M6.2 5.4a5.8 5.8 0 0 0 11.6 0Z'/%3E%3Cpath d='M12 5.4V2.5'/%3E%3Cpath d='M18.6 1.9a4 4 0 0 1 2.2 2.2'/%3E%3C/g%3E%3C/svg%3E");
  --ico-sparkCore:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.3' fill='%23000' fill-opacity='.22'/%3E%3Cellipse cx='12' cy='12' rx='9.4' ry='3.6' transform='rotate(30 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='9.4' ry='3.6' transform='rotate(-30 12 12)'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-storage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M5 6.5c0-1.4 3.1-2.6 7-2.6s7 1.2 7 2.6v11c0 1.4-3.1 2.6-7 2.6s-7-1.2-7-2.6Z'/%3E%3Cpath d='M5 6.5c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6'/%3E%3Cpath d='M5 12c0 1.4 3.1 2.6 7 2.6s7-1.2 7-2.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-aegisGrid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12 2.6 19.6 5.5v5.8c0 4.6-3.2 8.3-7.6 10.1-4.4-1.8-7.6-5.5-7.6-10.1V5.5Z'/%3E%3Cpath d='M12 6.2v12.4M7.4 11h9.2'/%3E%3C/g%3E%3C/svg%3E");
  --ico-shipyard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21V4.5h17V21'/%3E%3Cpath d='M3.5 8.5h17'/%3E%3Cpath d='M12 8.5v3'/%3E%3Cpath fill='%23000' fill-opacity='.22' d='M6.5 14.5h11l-2.2 3.5H8.7Z'/%3E%3C/g%3E%3C/svg%3E");
  --ico-researchBay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.3 2.8h5.4'/%3E%3Cpath d='M10.4 2.8v5.5L5.2 18.2A1.9 1.9 0 0 0 6.9 21h10.2a1.9 1.9 0 0 0 1.7-2.8l-5.2-9.9V2.8'/%3E%3Cpath fill='%23000' fill-opacity='.22' stroke='none' d='M7.4 14h9.2l2.2 4.2a1.9 1.9 0 0 1-1.7 2.8H6.9a1.9 1.9 0 0 1-1.7-2.8Z'/%3E%3Ccircle cx='11' cy='16.8' r='.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='13.8' cy='18.3' r='.7' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-beacon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M9.2 21.2 10.8 10h2.4l1.6 11.2Z'/%3E%3Cpath d='M7.5 21.2h9'/%3E%3Ccircle cx='12' cy='7' r='2.1' fill='%23000' stroke='none'/%3E%3Cpath d='M12 2v1.3M7.3 3.8l.9.9M16.7 3.8l-.9.9M5.2 7h1.4M17.4 7h1.4'/%3E%3C/g%3E%3C/svg%3E");
  --ico-homeworld:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5.6' fill='%23000' fill-opacity='.22'/%3E%3Cpath d='M2.7 15.1c-.9-2.1 3.3-5.3 9.4-7.2 6.1-1.9 11.2-1.6 11.9.5'/%3E%3Cpath d='M21.4 9.9c.5 2.1-3.6 5.1-9.4 6.9'/%3E%3C/g%3E%3C/svg%3E");
  --ico-dock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5V10l9-5.8 9 5.8v10.5'/%3E%3Cpath fill='%23000' fill-opacity='.22' d='M7 20.5v-6h10v6Z'/%3E%3Cpath d='M1.8 20.5h20.4'/%3E%3Cpath d='M9.5 17.5h5'/%3E%3C/g%3E%3C/svg%3E");
  --ico-starmap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='5.4'/%3E%3Ccircle cx='12' cy='12' r='9.3' stroke-dasharray='2.4 2.6'/%3E%3Ccircle cx='18.7' cy='7.4' r='1.6' fill='%23000' stroke='none'/%3E%3Ccircle cx='7.1' cy='14.1' r='1.1' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-stats:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5h17'/%3E%3Crect x='5' y='12' width='3' height='6' rx='.6' fill='%23000' fill-opacity='.22'/%3E%3Crect x='10.5' y='7.5' width='3' height='10.5' rx='.6' fill='%23000' fill-opacity='.22'/%3E%3Crect x='16' y='4' width='3' height='14' rx='.6' fill='%23000' fill-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
  --ico-probe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9.4' y='9.4' width='5.2' height='5.2' rx='1' transform='rotate(45 12 12)' fill='%23000' fill-opacity='.22'/%3E%3Cpath fill='%23000' fill-opacity='.22' d='M2.5 10.3h4.6v3.4H2.5ZM16.9 10.3h4.6v3.4h-4.6Z'/%3E%3Cpath d='M7.1 12h1.6M15.3 12h1.6'/%3E%3Cpath d='M12 8.3V4.6'/%3E%3Ccircle cx='12' cy='3.6' r='1' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-corvette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12 2.4 17.6 17 12 14.4 6.4 17Z'/%3E%3Cpath d='M10.2 17.2 12 21l1.8-3.8'/%3E%3C/g%3E%3C/svg%3E");
  --ico-hauler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M2.5 13.2h17.8l-2.6 4.3H5.3Z'/%3E%3Cpath d='M5.5 13.2V9.4h3.8v3.8M9.3 13.2V8.2h3.8v5M13.1 13.2V9.9h3.6v3.3'/%3E%3C/g%3E%3C/svg%3E");
  --ico-cruiser:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M2.2 14.8 15.6 8.4l6.2 3.2-5 4.4Z'/%3E%3Cpath d='M13.4 9.5V6.6h2.6v2.4'/%3E%3Cpath d='M2.2 14.8v-2.8'/%3E%3Cpath d='M7 13.4l7.4-3.4'/%3E%3C/g%3E%3C/svg%3E");
  --ico-raid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12 2.8a7.2 7.2 0 0 0-7.2 7.2c0 2.6 1.4 4.3 3 5.1v3.4h8.4v-3.4c1.6-.8 3-2.5 3-5.1A7.2 7.2 0 0 0 12 2.8Z'/%3E%3Ccircle cx='9.3' cy='10.4' r='1.5' fill='%23000' stroke='none'/%3E%3Ccircle cx='14.7' cy='10.4' r='1.5' fill='%23000' stroke='none'/%3E%3Cpath d='M10.2 18.5v2.6M12 18.5v2.6M13.8 18.5v2.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-bastion:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M4.5 19.5V9l3.6 3.1L12 5.5l3.9 6.6L19.5 9v10.5Z'/%3E%3Cpath d='M3 19.5h18'/%3E%3Ccircle cx='12' cy='5.4' r='1' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-derelict:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M4 8 12 3.5 20 8v8l-8 4.5L4 16Z'/%3E%3Cpath d='M4 8l8 4.5L20 8M12 12.5v8'/%3E%3C/g%3E%3C/svg%3E");
  --ico-sound:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M3.8 9.3h3.6L12 5.4v13.2l-4.6-3.9H3.8Z'/%3E%3Cpath d='M15.4 9a4.2 4.2 0 0 1 0 6'/%3E%3Cpath d='M18 6.4a7.8 7.8 0 0 1 0 11.2'/%3E%3C/g%3E%3C/svg%3E");
  --ico-save:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M4.8 3.5h11.4l3 3v14H4.8Z'/%3E%3Cpath d='M8 3.5v5h7.6v-5'/%3E%3Cpath d='M8 20.5v-6h8v6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12 6.4C10 4.8 7.2 4.3 3.8 4.7v13.6c3.4-.4 6.2.1 8.2 1.7 2-1.6 4.8-2.1 8.2-1.7V4.7c-3.4-.4-6.2.1-8.2 1.7Z'/%3E%3Cpath d='M12 6.4V20'/%3E%3C/g%3E%3C/svg%3E");
  --ico-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M8 5.2v13.6L18.8 12Z'/%3E%3C/g%3E%3C/svg%3E");
  --ico-newgame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='13.5' r='6.4' fill='%23000' fill-opacity='.22'/%3E%3Cpath d='M5 11.8c3.5 1 7.4 1 10.9-.6'/%3E%3Cpath d='M18.5 2.5v5M16 5h5'/%3E%3C/g%3E%3C/svg%3E");
  --ico-ftl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h10M4.5 7.5h6M4.5 16.5h6'/%3E%3Cpath fill='%23000' fill-opacity='.22' d='M13.5 5.5 20.5 12l-7 6.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --ico-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.5' cy='12' r='1.7' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-propulsion:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12 2.8c1.1 3.6 5.2 5.6 5.2 10.2a5.2 5.2 0 0 1-10.4 0c0-2.7 1.6-4.1 2.6-5.7.3 1.9 1.2 2.9 2.3 3.3C11 8.3 11 5.4 12 2.8Z'/%3E%3C/g%3E%3C/svg%3E");
  --ico-hulls:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M14.6 3.6a4.4 4.4 0 0 0-5 5.9L3.4 15.7l2.4 2.4L12 11.9a4.4 4.4 0 0 0 5.9-5l-2.6 2.6-2.4-.7-.7-2.4Z'/%3E%3C/g%3E%3C/svg%3E");
  --ico-weapons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12.00 2.40L13.68 7.93L18.79 5.21L16.07 10.32L21.60 12.00L16.07 13.68L18.79 18.79L13.68 16.07L12.00 21.60L10.32 16.07L5.21 18.79L7.93 13.68L2.40 12.00L7.93 10.32L5.21 5.21L10.32 7.93Z'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-salvage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M5.5 3.5v8.3a6.5 6.5 0 0 0 13 0V3.5h-4.2v8.3a2.3 2.3 0 0 1-4.6 0V3.5Z'/%3E%3Cpath d='M5.5 7.4h4.2M14.3 7.4h4.2'/%3E%3C/g%3E%3C/svg%3E");
  --ico-build:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M13.8 3.8 20.2 10.2 18 12.4 11.6 6Z'/%3E%3Cpath d='M12.8 9.2 4.3 17.7l2 2 8.5-8.5'/%3E%3C/g%3E%3C/svg%3E");
  --ico-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.6' y='10.6' width='12.8' height='9.8' rx='1.6' fill='%23000' fill-opacity='.22'/%3E%3Cpath d='M8.4 10.6V7.8a3.6 3.6 0 0 1 7.2 0v2.8'/%3E%3C/g%3E%3C/svg%3E");
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23000' fill-opacity='.22' stroke='none'/%3E%3Cpath d='M7.5 12.4l3 3 6-6.4'/%3E%3C/g%3E%3C/svg%3E");
  --ico-pending:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5' stroke-dasharray='3 2.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-warning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M12 3.2 21.2 19.6H2.8Z'/%3E%3Cpath d='M12 9.4v4.6'/%3E%3Ccircle cx='12' cy='16.9' r='1' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --ico-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23000' fill-opacity='.22' stroke='none'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2'/%3E%3C/g%3E%3C/svg%3E");
  --ico-ruins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-opacity='.22' d='M3 20.5h18l-3-6.5-3.5 2.6L11 10.5l-4.2 5L5.2 13Z'/%3E%3Cpath d='M8.5 6.5l1.2-2M15 7.3l1.6-1'/%3E%3C/g%3E%3C/svg%3E");
  --ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5'/%3E%3C/g%3E%3C/svg%3E");
  --ico-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M11 6.5 5.5 12 11 17.5'/%3E%3C/g%3E%3C/svg%3E");
  --ico-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.58 5.54L10.52 5.26L10.45 3.13L13.55 3.13L13.48 5.26L14.86 5.72L15.72 6.19L17.18 4.64L19.36 6.82L17.81 8.28L18.46 9.58L18.74 10.52L20.87 10.45L20.87 13.55L18.74 13.48L18.28 14.86L17.81 15.72L19.36 17.18L17.18 19.36L15.72 17.81L14.42 18.46L13.48 18.74L13.55 20.87L10.45 20.87L10.52 18.74L9.14 18.28L8.28 17.81L6.82 19.36L4.64 17.18L6.19 15.72L5.54 14.42L5.26 13.48L3.13 13.55L3.13 10.45L5.26 10.52L5.72 9.14L6.19 8.28L4.64 6.82L6.82 4.64L8.28 6.19Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --ico-momentum:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5.5-5.5 4 4L21 7'/%3E%3Cpath d='M15.5 7H21v5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================
   1 · FOUNDATIONS — tokens, type, atmosphere
   ========================================================= */
:root{
  color-scheme:dark;
  /* style.css reads these two; remapping them moves the whole deck to Geist.
     Numbers and small labels opt back into Geist Mono below. */
  --sans:var(--hw-body);
  --mono:var(--hw-body);
  --num:var(--hw-mono);
  --muted:var(--hw-dim);
  --text:var(--hw-ink);
  --bg:var(--hw-bg);
  --panel:#11132a;
  --panel2:#171a36;

  --fx-edge:rgba(150,170,255,.16);
  --fx-edge-hot:rgba(34,211,238,.55);
  --fx-glass:linear-gradient(180deg,rgba(30,34,72,.6) 0%,rgba(14,16,36,.82) 100%);
  --fx-glass-raised:linear-gradient(180deg,rgba(40,44,90,.7) 0%,rgba(17,19,42,.9) 100%);
  --fx-glass-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px -12px rgba(0,0,0,.6);
  --fx-strip-h:64px;
  --fx-scrap:var(--hw-scrap);
  --fx-signal:var(--hw-signal);
  --fx-spark:var(--hw-spark);
  --fx-danger:#fb7185;
  --fx-ok:#4ade80;
}
html{scrollbar-color:rgba(125,140,220,.45) #070812;scroll-padding-top:calc(var(--fx-strip-h) + 18px)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#070812}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(34,211,238,.35),rgba(167,139,250,.35));border-radius:10px;border:3px solid #070812}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(34,211,238,.6),rgba(167,139,250,.6))}
::selection{background:rgba(167,139,250,.38);color:#fff}

body{
  background:#05060e;
  color:var(--hw-ink);
  font-family:var(--hw-body);
  font-size:16px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
/* the atmosphere: a quiet star grid under two deep nebulae and a vignette */
body::before{
  z-index:-1;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 72% 12%,rgba(199,210,254,.5),transparent 60%),
    radial-gradient(1px 1px at 88% 64%,rgba(125,211,252,.45),transparent 60%),
    radial-gradient(1px 1px at 34% 78%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1px 1px at 56% 44%,rgba(196,181,253,.4),transparent 60%),
    linear-gradient(rgba(34,211,238,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.028) 1px,transparent 1px);
  background-size:520px 420px,640px 520px,580px 460px,700px 560px,460px 380px,48px 48px,48px 48px;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 45% at 85% -5%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(55% 40% at 5% 105%,rgba(8,145,178,.16),transparent 70%),
    radial-gradient(90% 70% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,#070817 0%,#05060e 100%);
}

.wrap{max-width:1120px;padding:16px 18px 64px}
h1,h2,h3,h4{font-family:var(--hw-display);letter-spacing:-.005em}
a{color:var(--hw-cyan-soft)}
.sr-only{position:absolute!important}

/* one icon system: inline sprite (.ico) + CSS masks (generated emoji slots) */
.ico{display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;fill:none;overflow:visible}
.ico-inline{width:1.05em;height:1.05em;margin:0 .22em 0 .05em;vertical-align:-.17em;color:var(--hw-cyan-soft)}
.c-scrapIco{color:var(--fx-scrap)} .c-signalIco{color:var(--fx-signal)} .c-sparkIco{color:var(--fx-spark)}
.scard .plate-sil,
.yardRow .yrHead>span:first-child,
.resRow .yrHead>span:first-child,
.dockHullHead>span:first-child{
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
  background-color:currentColor;font-size:0!important;line-height:0;color:inherit;
}

/* focus: one ring everywhere */
:where(button,a,summary,select,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--hw-gold);outline-offset:2px}

/* =========================================================
   2 · SHELL — header, footer
   ========================================================= */
.wrap>header{align-items:center;border-bottom:1px solid var(--fx-edge);padding:4px 0 12px;margin-bottom:14px}
h1{font-family:var(--hw-display);font-weight:800;font-size:1.3rem;letter-spacing:.02em;text-shadow:0 0 22px rgba(34,211,238,.35)}
.tag{font-size:.8rem;color:var(--hw-dim);letter-spacing:.02em}
.navlinks{gap:6px;font-family:var(--hw-display);font-size:.75rem;font-weight:600;letter-spacing:.08em}
.navlinks a{padding:8px 11px;border:1px solid transparent;border-radius:999px;color:var(--hw-ink-2)}
.navlinks a:hover,.navlinks a:focus-visible{text-decoration:none;border-color:var(--fx-edge);background:rgba(255,255,255,.04);color:var(--hw-cyan-soft)}
/* one brand on the title screen: the hero carries it, the header steps aside
   (kept in the accessibility tree — the h1 still names the page) */
.wrap:has(#title.active)>header{border-bottom-color:transparent;justify-content:flex-end;margin-bottom:0}
.wrap:has(#title.active)>header>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{font-family:var(--hw-display);font-size:.75rem;line-height:1.7;color:var(--hw-dim);border-top:1px solid var(--fx-edge);letter-spacing:.02em}
footer b{font-family:var(--num);font-weight:600;color:var(--hw-ink-2)}
footer .workingTitle{color:var(--hw-dim);font-style:italic}

/* =========================================================
   3 · BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--hw-display);font-weight:650;font-size:.86rem;letter-spacing:.05em;
  color:var(--hw-ink);text-decoration:none;
  background:linear-gradient(180deg,rgba(40,44,86,.75),rgba(20,22,46,.85));
  border:1px solid rgba(150,170,255,.24);border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px -8px rgba(0,0,0,.7);
  transition:transform var(--hw-dur-fast) var(--hw-ease),box-shadow var(--hw-dur) var(--hw-ease),border-color var(--hw-dur) var(--hw-ease),background var(--hw-dur) var(--hw-ease);
}
/* the engine hides controls with the [hidden] attribute — a display value
   above must never resurrect them (CONTINUE with no save, a finished board's
   CLOSE, a maxed RESEARCH button) */
.btn[hidden],.tab[hidden],summary[hidden]{display:none!important}
.btn:hover{border-color:rgba(125,223,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(34,211,238,.12),0 8px 22px -8px rgba(34,211,238,.45)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  color:#fff;border-color:rgba(125,223,255,.7);
  background:linear-gradient(135deg,rgba(34,211,238,.42) 0%,rgba(99,102,241,.38) 55%,rgba(124,58,237,.45) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(34,211,238,.18),0 10px 26px -10px rgba(34,211,238,.6);
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(125,223,255,.35),0 12px 30px -8px rgba(34,211,238,.7)}
.btn.small{font-size:.75rem;padding:8px 13px;border-radius:9px}
.btn.danger{color:#fecdd3;border-color:rgba(251,113,133,.42);background:linear-gradient(180deg,rgba(76,20,36,.55),rgba(30,12,22,.8))}
.btn.danger:hover{border-color:var(--fx-danger);box-shadow:0 0 18px -4px rgba(251,113,133,.55)}
/* a disabled control stays readable: dim ink, dashed edge, no ghosting */
.btn:disabled,.btn:disabled:hover{
  opacity:1;color:#9aa3c7;cursor:not-allowed;transform:none;text-shadow:none;
  background:rgba(255,255,255,.025);border:1px dashed rgba(142,152,187,.38);box-shadow:none;
}
.btn.on{border-color:var(--hw-cyan);color:var(--hw-cyan-soft);background:linear-gradient(180deg,rgba(34,211,238,.2),rgba(34,211,238,.06))}

/* =========================================================
   4 · TITLE — the cinematic hero
   ========================================================= */
#title{padding:14px 0 30px}
#title .titleHero{
  width:min(100%,820px);height:clamp(220px,27vw,300px);margin:0 auto 20px;border-radius:26px;
  border:1px solid rgba(125,223,255,.22);
  background:
    radial-gradient(42% 60% at 50% 50%,rgba(124,58,237,.34),transparent 70%),
    radial-gradient(70% 90% at 18% 110%,rgba(8,145,178,.22),transparent 70%),
    radial-gradient(60% 80% at 92% -10%,rgba(167,139,250,.2),transparent 70%),
    linear-gradient(180deg,#0b0c22 0%,#05060e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 80px rgba(34,211,238,.06),0 30px 80px -30px rgba(124,58,237,.55),0 0 0 1px rgba(0,0,0,.4);
}
#title .titleHero::before{opacity:.8}
#title .titleNebula{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(30% 22% at 30% 40%,rgba(34,211,238,.13),transparent 70%),radial-gradient(34% 26% at 70% 62%,rgba(167,139,250,.16),transparent 70%)}
#title .titleHalo{position:absolute;z-index:1;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(167,139,250,.42) 0%,rgba(124,58,237,.18) 30%,rgba(34,211,238,.06) 52%,transparent 70%)}
#title .titleWorld{width:124px;height:124px;
  background:radial-gradient(circle at 31% 27%,#efe3ff 0 3%,#b69cff 10%,#8b5cf6 22%,#5b21b6 46%,#2a1260 70%,#0e0822 100%);
  box-shadow:inset -14px -18px 30px rgba(3,2,14,.72),inset 6px 6px 18px rgba(237,233,254,.25),0 0 26px rgba(167,139,250,.8),0 0 80px rgba(124,58,237,.45),0 0 140px rgba(34,211,238,.18)}
#title .titleWorld::before{inset:-16px;border-color:rgba(167,139,250,.5)}
#title .titleWorld::after{height:13px;top:40%;border-top-color:rgba(224,231,255,.3)}
#title .titleWorld span{width:15px;height:9px;box-shadow:26px 44px 0 -3px #22d3ee,56px 14px 0 -4px #fbbf24}
#title .titleOrbitOne{width:470px;height:150px}
#title .titleOrbitTwo{width:610px;height:206px}
#title .titleOrbitThree{width:760px;height:268px}
#title .titleReadout{font-family:var(--num);font-size:.6875rem;letter-spacing:.18em;color:rgba(203,213,245,.7);bottom:14px}
#title .titleReadoutLeft{left:20px}
#title .titleReadoutRight{right:20px;color:rgba(125,223,255,.8)}
#title .titleBrand{margin:0 auto 22px}
#title .big{
  font-family:var(--hw-display);font-weight:800;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(2.2rem,6.4vw,4.3rem);color:#7ddfff;text-shadow:none;word-spacing:.08em;
  background:linear-gradient(180deg,#e0f7ff 0%,#7ddfff 45%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(34,211,238,.35));
}
#title .big span{background:linear-gradient(180deg,#f1ecff 0%,#c4b5fd 45%,#8b5cf6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#title p.sub{font-family:var(--hw-display);font-size:1.02rem;color:var(--hw-ink-2);letter-spacing:.01em;margin:12px 0 6px}
#title p.motto{font-family:var(--num);font-size:.8rem;letter-spacing:.32em;color:var(--hw-gold-soft);margin:10px 0 0}
/* one equal-width command stack, one obvious first choice */
#title .titleMenu{width:min(100%,360px);margin:0 auto;gap:10px;align-items:stretch}
#title .titleMenu .cta{width:100%;min-height:52px;justify-content:flex-start;padding:10px 18px;gap:12px;flex-wrap:wrap;text-align:left}
#title .titleMenu .cta .ico{width:22px;height:22px;color:var(--hw-cyan-soft)}
#title .titleMenu .ctaMain{font-size:.92rem;font-weight:700;letter-spacing:.07em}
#title .titleMenu .ctaSub{flex:1 1 auto;text-align:right;font-weight:500;font-size:.78rem;letter-spacing:.01em;color:var(--hw-ink-2);text-transform:none}
#title .titleMenu .cta.primary{min-height:60px}
#title .titleMenu .cta.primary .ico{color:#fff}
#title .titleMenu .cta.primary .ctaSub{color:rgba(240,249,255,.86)}
/* a saved colony makes CONTINUE the first choice; NEW GAME steps back */
#title #btnContinue:not([hidden])~#btnNew{color:var(--hw-ink);border-color:rgba(150,170,255,.3);background:linear-gradient(180deg,rgba(40,44,86,.75),rgba(20,22,46,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
#title .titleMenu .ctaLink{margin-top:4px}
#title .titleMenu .ctaLink:hover{text-decoration:none}
#title .titleTelemetry{width:min(100%,560px);margin:26px auto 0;gap:8px}
#title .titleTelemetry>div{padding:10px 10px;border-radius:12px;border-color:var(--fx-edge);background:rgba(255,255,255,.025);box-shadow:none}
#title .titleTelemetry span{font-family:var(--num);font-size:.6875rem;letter-spacing:.16em;color:var(--hw-dim)}
#title .titleTelemetry b{font-family:var(--hw-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--hw-cyan-soft)}
#title .titleTelemetry small{font-family:var(--num);font-size:.6875rem;letter-spacing:.06em;color:#b6a8f0;white-space:normal}
#title .plaque{display:block;width:min(100%,560px);margin:18px auto 0;font-family:var(--hw-body);font-size:.84rem;line-height:1.6;color:var(--hw-ink-2);border-color:rgba(242,201,109,.28);border-radius:14px;background:rgba(242,201,109,.04);padding:12px 18px}
#title .plaque b{color:var(--hw-gold-soft)}
#title p.gameVersion{margin:18px 0 0;font-family:var(--num);font-size:.6875rem;letter-spacing:.12em;color:#8791b5}
#title p.gameVersion b{color:#9fb6e8;font-weight:600}

/* =========================================================
   5 · HOW TO PLAY — sticky back + jump list, readable prose
   ========================================================= */
.howto{max-width:720px;font-family:var(--hw-body);font-size:1rem;line-height:1.7;color:var(--hw-ink-2);padding:0 0 20px}
.howto h3{font-family:var(--hw-display);font-weight:700;font-size:1.02rem;letter-spacing:.06em;color:var(--hw-cyan-soft);margin:30px 0 8px;scroll-margin-top:0}
.howto b{color:var(--hw-ink)}
.howto p+p,.howto ul+p,.howto p+ul,.howto p+details{margin-top:12px}
.howto .howList li::before{color:var(--hw-violet)}
.howBar{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:10px;margin:0 -6px 6px;padding:8px 6px;
  background:linear-gradient(180deg,rgba(7,8,20,.96),rgba(7,8,20,.86));backdrop-filter:blur(12px);border-bottom:1px solid var(--fx-edge)}
#how .howBack{margin:0;flex:0 0 auto}
#how .howBack .btn{min-height:40px}
.howJump{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 24px 2px 0;min-width:0;flex:1 1 auto;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.howJump::-webkit-scrollbar{display:none}
/* desktop: the jump list becomes a sticky contents rail beside the prose */
@media (min-width:1000px){
  .howto{max-width:1000px;display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:44px;align-items:start}
  .howto>*{grid-column:2}
  .howto>.howBar{grid-column:1;grid-row:1 / span 80;position:sticky;top:18px;flex-direction:column;align-items:stretch;gap:12px;margin:26px 0 0;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .howto>.howBar .howJump{flex-direction:column;gap:3px;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none}
  .howto>.howBar .howJump a{border-color:transparent;background:none;border-radius:8px;padding:6px 10px;white-space:normal}
  .howto>.howBar .howJump a:hover,.howto>.howBar .howJump a:focus-visible{border-color:var(--fx-edge);background:rgba(255,255,255,.04)}
  #how .howBack .btn{width:100%;justify-content:flex-start}
}
.howJump a{flex:0 0 auto;font-family:var(--hw-display);font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--hw-ink-2);text-decoration:none;padding:7px 11px;border:1px solid var(--fx-edge);border-radius:999px;background:rgba(255,255,255,.03);white-space:nowrap}
.howJump a:hover{border-color:var(--fx-edge-hot);color:var(--hw-cyan-soft)}
.updates{border-color:var(--fx-edge);border-radius:14px;background:var(--fx-glass);padding:2px 16px}
.updates>summary{font-family:var(--hw-display);font-weight:650;font-size:.84rem;letter-spacing:.04em;color:var(--hw-cyan-soft);padding:12px 2px}
.updates .howList{font-size:.92rem}

/* =========================================================
   6 · THE COMMAND STRIP — resources + cycle, one sticky bar
   ========================================================= */
.cmdStrip{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:stretch;gap:10px;
  margin:0 0 10px;padding:8px;
  background:linear-gradient(180deg,rgba(20,23,50,.88),rgba(9,10,24,.94));
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(150,170,255,.2);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35);
}
#commandStrip #resBar{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
#resBar .res{
  --rc:var(--fx-scrap);
  position:relative;min-width:0;display:flex;align-items:center;gap:9px;padding:6px 10px 6px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(150,170,255,.14);border-radius:12px;
}
#resBar .res.r-signal{--rc:var(--fx-signal)}
#resBar .res.r-spark{--rc:var(--fx-spark)}
#resBar .res .ricon{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;font-size:1rem;color:var(--rc);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc) 26%,transparent),color-mix(in srgb,var(--rc) 6%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 35%,transparent)}
#resBar .res .ricon .ico{width:19px;height:19px}
#resBar .rnums{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"name rate" "amt cap";align-items:baseline;column-gap:5px;row-gap:1px;font-family:var(--num);line-height:1.15}
#resBar .rnums .rname{grid-area:name;font-family:var(--num);font-size:.6875rem;letter-spacing:.16em;color:var(--hw-dim)}
#resBar .rnums b{grid-area:amt;font-size:1.12rem;font-weight:650;color:var(--rc);letter-spacing:-.01em}
#resBar .rnums .cap{grid-area:cap;margin:0;font-size:.72rem;color:#8f99bd;white-space:nowrap}
#resBar .rnums .rate{grid-area:rate;justify-self:end;font-size:.6875rem;color:var(--fx-ok);white-space:nowrap}
#resBar .res.full{border-color:color-mix(in srgb,var(--fx-danger) 55%,transparent);box-shadow:inset 0 0 18px -8px rgba(251,113,133,.6)}
#resBar .res.full .rate{color:var(--fx-danger)}

#commandBar #cycleRow{position:static;display:flex;align-items:stretch;gap:6px;flex:0 0 auto;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;flex-wrap:nowrap}
#commandBar #cycleRow .cycchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:64px;padding:4px 10px;
  font-family:var(--num);font-size:.6875rem;letter-spacing:.16em;color:var(--hw-dim);line-height:1.1;
  background:rgba(255,255,255,.03);border:1px solid rgba(150,170,255,.14);border-radius:12px}
#commandBar #cycleRow .cycchip b{font-size:1.2rem;letter-spacing:-.01em;color:var(--hw-cyan-soft);font-weight:650}
#commandBar #cycleRow #btnCycle{min-height:48px;padding:0 20px;font-size:.92rem;letter-spacing:.08em;border-radius:12px}
#commandBar #cycleRow #btnCycle10{min-height:48px;padding:0 14px;font-size:.8rem;border-radius:12px}
/* the MORE menu */
.cmdMore{position:relative;display:flex}
#commandBar #cycleRow .cmdMore>summary{list-style:none;cursor:pointer;min-height:48px;min-width:48px;padding:0 12px;border-radius:12px;font-size:.72rem;gap:6px;user-select:none;white-space:nowrap}
.cmdMore>summary::-webkit-details-marker{display:none}
.cmdMore>summary .ico{width:18px;height:18px}
.cmdMore[open]>summary{border-color:var(--fx-edge-hot);background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(34,211,238,.05))}
/* a lit dot on MORE when the Deck's sound is on */
.cmdMore:has(#soundToggle[aria-pressed="true"])>summary::after{content:'';position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--hw-cyan);box-shadow:0 0 8px var(--hw-cyan)}
.cmdMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;display:grid;gap:6px;min-width:210px;padding:8px;
  background:linear-gradient(180deg,rgba(24,27,58,.97),rgba(11,12,28,.98));border:1px solid rgba(150,170,255,.24);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -16px rgba(0,0,0,.9)}
#commandBar #cycleRow .cmdMenu .btn{width:100%;min-height:44px;justify-content:flex-start;padding:0 14px;font-size:.76rem;white-space:nowrap}
#commandBar .cmdMenu #btnNewGame{margin-top:4px}

/* status pills under the strip */
#commandBar #buildStatus,#commandBar #defenseStatus,#commandBar #momChip{
  position:relative;margin:0 0 8px;padding:8px 12px 8px 40px;font-family:var(--hw-display);font-size:.82rem;font-weight:500;line-height:1.45;border-radius:12px;letter-spacing:.01em
}
#commandBar #buildStatus{color:#fde68a;border:1px solid rgba(251,191,36,.34);background:linear-gradient(90deg,rgba(251,191,36,.1),rgba(251,191,36,.02))}
#commandBar #buildStatus.idle{color:var(--hw-dim);border:1px dashed rgba(150,170,255,.2);background:transparent}
#commandBar #defenseStatus{color:#f5d0fe;border:1px solid rgba(244,114,182,.34);background:linear-gradient(90deg,rgba(244,114,182,.1),rgba(244,114,182,.02))}
#commandBar #defenseStatus.alert{color:#fecdd3;border-color:rgba(251,113,133,.7);background:linear-gradient(90deg,rgba(251,113,133,.18),rgba(251,113,133,.04))}
#commandBar #momChip{color:#fde68a;border:1px solid rgba(251,191,36,.45);background:rgba(251,191,36,.07)}
/* the leading emoji of a generated status becomes a sprite glyph */
#buildStatus::before,#defenseStatus::before,#momChip::before,.crewStatus::before{
  content:'';position:absolute;left:13px;top:50%;width:17px;height:17px;margin-top:-8.5px;background-color:currentColor;
  -webkit-mask:var(--i,var(--ico-build)) center/contain no-repeat;mask:var(--i,var(--ico-build)) center/contain no-repeat
}
#buildStatus.idle::before{--i:var(--ico-pending);opacity:.7}
#buildStatus:not(.idle)::first-letter,#defenseStatus::first-letter,.crewStatus:not(.idle)::first-letter{font-size:0}
#defenseStatus{--i:var(--ico-aegisGrid)}
#defenseStatus.alert{--i:var(--ico-warning)}
#momChip{--i:var(--ico-momentum)}

/* =========================================================
   7 · TABS — a segmented rail
   ========================================================= */
#tabs{gap:4px;padding:4px;margin:4px 0 14px;background:rgba(255,255,255,.025);border:1px solid var(--fx-edge);border-radius:14px;width:max-content;max-width:100%}
.tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 16px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--hw-dim);font-family:var(--hw-display);font-weight:650;font-size:.78rem;letter-spacing:.07em;white-space:nowrap;transition:color var(--hw-dur),background var(--hw-dur),border-color var(--hw-dur)}
.tab .ico{width:17px;height:17px}
.tab:hover{color:var(--hw-ink)}
.tab[aria-selected="true"]{color:#fff;border-color:rgba(125,223,255,.45);background:linear-gradient(180deg,rgba(34,211,238,.2),rgba(99,102,241,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px -8px rgba(34,211,238,.6)}
.tab[aria-selected="true"] .ico{color:var(--hw-cyan-soft)}

/* =========================================================
   8 · COLONY HEADING + THE PLANET PLATE
   ========================================================= */
.colonyHeading{margin:6px 0 10px;align-items:flex-end}
.colonyHeading .eyebrow{font-family:var(--num);font-size:.6875rem;letter-spacing:.2em;color:var(--hw-cyan-soft)}
.colonyHeading h2{font-family:var(--hw-display);font-weight:750;font-size:1.55rem;letter-spacing:-.02em;color:#fff;margin:2px 0 0}
.colonyJumps a{display:inline-flex;align-items:center;gap:6px;font:650 .72rem var(--hw-display);letter-spacing:.07em;color:var(--hw-ink-2);padding:9px 12px;border-color:var(--fx-edge);border-radius:999px;background:rgba(255,255,255,.03)}
.colonyJumps a .ico{width:15px;height:15px;color:var(--hw-cyan-soft)}
.colonyJumps a:hover{border-color:var(--fx-edge-hot);color:#fff}
.colonyHint{font-size:.9rem;color:var(--hw-ink-2);margin-bottom:12px}
/* one offset mechanism: html scroll-padding (tracks the strip height) lands jump
   targets and keyboard focus just below the sticky strip */
#structGrid,#beaconPanel,#homeworldReference,#yardPanel,#researchPanel{scroll-margin-top:0}

#scene{
  position:relative;overflow:hidden;margin-bottom:16px;border-radius:22px;
  border:1px solid rgba(125,223,255,.2);
  background:#05060f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 60px -30px rgba(124,58,237,.7),0 0 0 1px rgba(0,0,0,.45);
}
#scene::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(5,6,14,0) 70%,rgba(5,6,14,.55) 100%),radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(0,0,0,.45) 100%)}
#viewHome #planetScene{height:clamp(200px,30vw,340px)}
#scene[data-glow="3"],#scene[data-glow="4"]{border-color:rgba(125,223,255,.34)}
#scene[data-glow="5"]{border-color:rgba(253,224,71,.5)}
.sceneHud{position:absolute;left:16px;top:12px;z-index:2;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.sceneHudTag{font-family:var(--num);font-size:.6875rem;letter-spacing:.22em;color:rgba(203,213,245,.78)}
.sceneHudName{font-family:var(--hw-display);font-weight:800;font-size:1.05rem;letter-spacing:.14em;color:#fff;text-shadow:0 0 18px rgba(167,139,250,.7)}
/* city lights: warm, and brighter as the colony grows */
#cityLights circle{r:2.4px;fill:#fde68a}
#cityLights circle.on{opacity:.9}
#cityLights{filter:drop-shadow(0 0 3px rgba(253,224,71,.85))}
#scene[data-glow="4"] #cityLights circle.on,#scene[data-glow="5"] #cityLights circle.on{opacity:1;fill:#fef3c7}
/* structures read at a glance: tier light rises with the plate tier */
#planetScene [id^="sg-"]{transition:filter .6s var(--hw-ease)}
#planetScene [id^="sg-"][data-tier="1"]{filter:drop-shadow(0 0 2px rgba(125,223,255,.35))}
#planetScene [id^="sg-"][data-tier="2"]{filter:drop-shadow(0 0 3px rgba(125,223,255,.55))}
#planetScene [id^="sg-"][data-tier="3"]{filter:drop-shadow(0 0 4px rgba(196,181,253,.7))}
#planetScene [id^="sg-"][data-tier="4"]{filter:drop-shadow(0 0 5px rgba(253,224,71,.75))}
#planetScene g.building{filter:drop-shadow(0 0 4px rgba(251,191,36,.8))}
#planetScene g.building .scaffold rect{stroke-width:2}

/* =========================================================
   9 · GLASS PANELS
   ========================================================= */
.scard,#yardPanel,#researchPanel,#beaconPanel,.homeworldReference,#milestonePanel,#logPanel,#statsPanel,.maptwo section,
.dockHull,.dockFlights,#playModeBridge,#campaignSpine,#worldPanel,#battleBrief,#systemsBrief,#influenceStory{
  background:var(--fx-glass);border:1px solid var(--fx-edge);border-radius:var(--hw-radius-lg);box-shadow:var(--fx-glass-shadow);
}
#yardPanel,#researchPanel,#beaconPanel,#milestonePanel,#logPanel,#statsPanel,.maptwo section,#worldPanel,#battleBrief,#systemsBrief,#influenceStory,#playModeBridge,#campaignSpine{padding:16px}
#battleBrief{border-top:2px solid rgba(251,113,133,.45)}
#systemsBrief,#influenceStory{border-top:2px solid rgba(167,139,250,.45)}
#campaignSpine,#worldPanel{border-top:2px solid rgba(34,211,238,.4)}
#beaconPanel{border-top:2px solid rgba(253,224,71,.5);background:linear-gradient(180deg,rgba(60,48,12,.28),rgba(14,16,36,.84))}
#yardPanel h2,#researchPanel h2,#viewMap h2,#beaconPanel h2,#statsPanel h2,.twocol h2,.briefHead h2,.modeBridgeHead h2,#worldPanel h2,.dockFlights h2{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--hw-display);font-weight:750;font-size:.9rem;letter-spacing:.1em;
  border-bottom:1px solid var(--fx-edge);padding-bottom:10px;margin-bottom:12px
}
#yardPanel h2 .ico,#researchPanel h2 .ico,#beaconPanel h2 .ico,#statsPanel h2 .ico,.briefHead h2 .ico,.modeBridgeHead h2 .ico,#worldPanel h2 .ico{width:20px;height:20px}
.panelSub{font-family:var(--num);font-size:.72rem;font-weight:500;letter-spacing:.02em;color:var(--hw-dim);margin-left:0}
.crewStatus{position:relative;font-family:var(--hw-display);font-size:.82rem;padding:8px 12px 8px 40px;border-radius:11px;color:#fde68a;border:1px solid rgba(251,191,36,.34);background:rgba(251,191,36,.06)}
.crewStatus.idle{color:var(--hw-dim);border:1px dashed rgba(150,170,255,.2);background:transparent}
.crewStatus.idle::before{--i:var(--ico-pending)}
#yardStatus{--i:var(--ico-shipyard)} #researchStatus{--i:var(--ico-researchBay)} #beaconStatus{--i:var(--ico-beacon)} #fleetSlots{--i:var(--ico-starmap)}
#fleetSlots::first-letter{font-size:inherit}
#fleetSlots.crewStatus{padding-left:40px}
.hangar{font-family:var(--hw-display);font-size:.84rem;color:var(--hw-ink-2);margin-bottom:10px}

/* =========================================================
   10 · STRUCTURE CARDS — hierarchy, art plate, states
   ========================================================= */
#structGrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:18px}
.scard{
  --tint:var(--hw-cyan);
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:0 0 14px;
  transition:border-color var(--hw-dur),box-shadow var(--hw-dur),transform var(--hw-dur) var(--hw-ease-out);
}
.scard:hover{border-color:rgba(150,170,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -14px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--tint) 16%,transparent)}
#card-scrapworks{--tint:var(--fx-scrap);--i:var(--ico-scrapworks)}
#card-signalArray{--tint:var(--fx-signal);--i:var(--ico-signalArray)}
#card-sparkCore{--tint:var(--fx-spark);--i:var(--ico-sparkCore)}
#card-storage{--tint:#a78bfa;--i:var(--ico-storage)}
#card-aegisGrid{--tint:#f472b6;--i:var(--ico-aegisGrid)}
#card-shipyard{--tint:#7dd3fc;--i:var(--ico-shipyard)}
#card-researchBay{--tint:#67e8f9;--i:var(--ico-researchBay)}
/* the header rides on the plate */
.scard>header{grid-area:1/1;z-index:2;align-self:start;padding:13px 14px 0;gap:8px}
.scard .sicon{display:none}
.scard h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--hw-display);font-weight:750;font-size:1.06rem;letter-spacing:-.005em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.scard .lvl,.resRow .lvl{margin:0;font-family:var(--num);font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--tint,var(--hw-cyan));padding:3px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tint,var(--hw-cyan)) 45%,transparent);background:color-mix(in srgb,var(--tint,var(--hw-cyan)) 12%,rgba(5,6,14,.6))}
.scard .splate{grid-area:1/1;height:118px;margin:0;border:0;border-bottom:1px solid var(--fx-edge);border-radius:0;
  background:radial-gradient(120% 140% at 85% 60%,color-mix(in srgb,var(--tint) 10%,transparent),transparent 60%),linear-gradient(180deg,#0d0f26 0%,#090a1a 100%)}
.scard .splate::before{opacity:1;background:radial-gradient(38% 70% at 80% 58%,color-mix(in srgb,var(--tint) calc(var(--glow,0) * 1%),transparent),transparent 75%)}
.scard .splate::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.scard .plate-sil{position:absolute;left:auto;right:18px;bottom:auto;top:50%;transform:translateY(-38%);width:64px;height:64px;opacity:.32;color:#aab3d6;filter:none}
.scard .plate-label{top:auto;bottom:10px;left:14px;font-family:var(--num);font-size:.6875rem;letter-spacing:.2em;color:var(--hw-dim)}
.scard .plate-bars{bottom:13px;right:auto;left:auto;right:92px;gap:3px}
.scard .plate-bars i{width:12px;height:4px;border-radius:2px}
.splate[data-tier="0"]{--glow:0}
.splate[data-tier="1"]{--glow:18}
.splate[data-tier="2"]{--glow:30}
.splate[data-tier="3"]{--glow:44}
.splate[data-tier="4"]{--glow:62}
.scard .splate[data-tier]{box-shadow:none}
.scard .splate:not([data-tier="0"]) .plate-sil{opacity:1;color:var(--tint)}
.scard .splate:not([data-tier="0"]) .plate-label{color:var(--tint)}
.scard .splate[data-tier="4"] .plate-label{color:var(--hw-gold-soft)}
.scard .splate .plate-bars i{background:rgba(142,152,187,.28)}
.scard .splate[data-tier="1"] .plate-bars i:nth-child(-n+1),
.scard .splate[data-tier="2"] .plate-bars i:nth-child(-n+2),
.scard .splate[data-tier="3"] .plate-bars i:nth-child(-n+3),
.scard .splate[data-tier="4"] .plate-bars i{background:var(--tint);box-shadow:0 0 6px var(--tint)}
.scard[data-tier="3"],.scard[data-tier="4"]{border-color:color-mix(in srgb,var(--tint) 34%,transparent)}
.scard>.stag,.scard>.seffect,.scard>.scost,.scard>.why,.scard>.build{margin-left:14px;margin-right:14px}
.scard .stag{font-size:.86rem;line-height:1.5;color:var(--hw-ink-2);margin-top:4px}
.scard .seffect{font-family:var(--hw-display);font-size:.84rem;font-weight:600;color:var(--fx-ok);padding:7px 10px;border-radius:10px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.16)}
.scard .seffect .next{color:var(--hw-dim);font-weight:500}
.scard .seffect:empty{display:none}
.scard .scost{font-family:var(--hw-display);font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--hw-dim);line-height:2}
.scard .why{font-family:var(--hw-display);font-size:.78rem;font-weight:500;color:#fda4af;min-height:0}
.scard .why:empty{display:none}
.scard .build{margin-top:6px;min-height:44px;font-size:.82rem}
.scard .build:not(:disabled){color:#fff;border-color:color-mix(in srgb,var(--tint) 65%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 32%,rgba(20,22,46,.9)),rgba(20,22,46,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px color-mix(in srgb,var(--tint) 80%,transparent)}
.scard.maxed .scost{color:var(--hw-gold-soft);letter-spacing:.16em;font-family:var(--num)}
/* UNDER CONSTRUCTION — the card whose structure is on the crew's hands right now */
.scard::after{content:none}
.wrap:has(#sg-scrapworks.building) #card-scrapworks,
.wrap:has(#sg-signalArray.building) #card-signalArray,
.wrap:has(#sg-sparkCore.building) #card-sparkCore,
.wrap:has(#sg-storage.building) #card-storage,
.wrap:has(#sg-aegisGrid.building) #card-aegisGrid,
.wrap:has(#sg-shipyard.building) #card-shipyard,
.wrap:has(#sg-researchBay.building) #card-researchBay{--building:1;border-color:rgba(251,191,36,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(251,191,36,.25),0 16px 40px -16px rgba(251,191,36,.45)}
.wrap:has(#sg-scrapworks.building) #card-scrapworks::after,
.wrap:has(#sg-signalArray.building) #card-signalArray::after,
.wrap:has(#sg-sparkCore.building) #card-sparkCore::after,
.wrap:has(#sg-storage.building) #card-storage::after,
.wrap:has(#sg-aegisGrid.building) #card-aegisGrid::after,
.wrap:has(#sg-shipyard.building) #card-shipyard::after,
.wrap:has(#sg-researchBay.building) #card-researchBay::after{
  content:'UNDER CONSTRUCTION';position:absolute;top:14px;right:12px;z-index:3;font-family:var(--num);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  color:#1b1405;background:linear-gradient(135deg,#fde68a,#fbbf24);padding:4px 8px;border-radius:6px;box-shadow:0 4px 14px -4px rgba(251,191,36,.8)
}
.wrap:has(#sg-scrapworks.building) #card-scrapworks .splate,
.wrap:has(#sg-signalArray.building) #card-signalArray .splate,
.wrap:has(#sg-sparkCore.building) #card-sparkCore .splate,
.wrap:has(#sg-storage.building) #card-storage .splate,
.wrap:has(#sg-aegisGrid.building) #card-aegisGrid .splate,
.wrap:has(#sg-shipyard.building) #card-shipyard .splate,
.wrap:has(#sg-researchBay.building) #card-researchBay .splate{
  background:repeating-linear-gradient(-45deg,rgba(251,191,36,.1) 0 12px,rgba(251,191,36,0) 12px 24px),linear-gradient(180deg,#15120a 0%,#0b0a14 100%);background-size:34px 34px,auto
}
.wrap:has(#sg-scrapworks.building) #card-scrapworks .why,
.wrap:has(#sg-signalArray.building) #card-signalArray .why,
.wrap:has(#sg-sparkCore.building) #card-sparkCore .why,
.wrap:has(#sg-storage.building) #card-storage .why,
.wrap:has(#sg-aegisGrid.building) #card-aegisGrid .why,
.wrap:has(#sg-shipyard.building) #card-shipyard .why,
.wrap:has(#sg-researchBay.building) #card-researchBay .why{display:none}
.wrap:has(#sg-scrapworks.building) #card-scrapworks .plate-sil,
.wrap:has(#sg-signalArray.building) #card-signalArray .plate-sil,
.wrap:has(#sg-sparkCore.building) #card-sparkCore .plate-sil,
.wrap:has(#sg-storage.building) #card-storage .plate-sil,
.wrap:has(#sg-aegisGrid.building) #card-aegisGrid .plate-sil,
.wrap:has(#sg-shipyard.building) #card-shipyard .plate-sil,
.wrap:has(#sg-researchBay.building) #card-researchBay .plate-sil{color:var(--hw-gold);opacity:1}

/* cost chips: the generated emoji hides, a sprite glyph takes its place */
.scost .c-scrap,.scost .c-signal,.scost .c-spark,.siteFacts .c-scrap,.siteFacts .c-signal,.siteFacts .c-spark{
  --rc:var(--fx-scrap);
  position:relative;display:inline-block;font-family:var(--num);font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;
  padding:1px 8px 1px 18px;margin:1px 0;border-radius:999px;color:var(--rc);
  background:color-mix(in srgb,var(--rc) 11%,transparent);border:1px solid color-mix(in srgb,var(--rc) 30%,transparent)
}
.scost .c-signal,.siteFacts .c-signal{--rc:var(--fx-signal)}
.scost .c-spark,.siteFacts .c-spark{--rc:var(--fx-spark)}
.scost .c-scrap::first-letter,.scost .c-signal::first-letter,.scost .c-spark::first-letter,
.siteFacts .c-scrap::first-letter,.siteFacts .c-signal::first-letter,.siteFacts .c-spark::first-letter{font-size:0}
.scost .c-scrap::before,.scost .c-signal::before,.scost .c-spark::before,
.siteFacts .c-scrap::before,.siteFacts .c-signal::before,.siteFacts .c-spark::before{
  content:'';position:absolute;left:6px;top:50%;width:12px;height:12px;margin-top:-6px;background-color:currentColor;
  -webkit-mask:var(--ico-scrap) center/contain no-repeat;mask:var(--ico-scrap) center/contain no-repeat
}
.scost .c-signal::before,.siteFacts .c-signal::before{-webkit-mask-image:var(--ico-signal);mask-image:var(--ico-signal)}
.scost .c-spark::before,.siteFacts .c-spark::before{-webkit-mask-image:var(--ico-spark);mask-image:var(--ico-spark)}

/* =========================================================
   11 · SHIPYARD / RESEARCH / DOCK rows
   ========================================================= */
.panelRows{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.yardRow,.resRow{background:var(--fx-glass-raised);border:1px solid var(--fx-edge);border-radius:14px;padding:12px;gap:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.yrHead{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-family:var(--hw-display);font-size:.95rem}
.yrHead b{font-weight:750;color:#fff}
.yardRow .yrHead>span:first-child,.resRow .yrHead>span:first-child{display:inline-block;width:26px;height:26px;color:var(--tint,var(--hw-cyan-soft))}
#yr-probe{--i:var(--ico-probe);--tint:#7dd3fc} #yr-corvette{--i:var(--ico-corvette);--tint:#22d3ee}
#yr-hauler{--i:var(--ico-hauler);--tint:#fbbf24} #yr-cruiser{--i:var(--ico-cruiser);--tint:#c4b5fd}
#rr-propulsion{--i:var(--ico-propulsion);--tint:#fb923c} #rr-hulls{--i:var(--ico-hulls);--tint:#7dd3fc}
#rr-weapons{--i:var(--ico-weapons);--tint:#fb7185} #rr-salvage{--i:var(--ico-salvage);--tint:#fbbf24}
#rr-aegis{--i:var(--ico-aegisGrid);--tint:#f472b6}
.fcmeta{font-family:var(--num);font-size:.6875rem;letter-spacing:.04em;color:var(--hw-dim)}
.yardRow .stag,.resRow .seffect{font-family:var(--hw-body);font-size:.88rem;line-height:1.5;color:var(--hw-ink-2)}
.resRow .seffect{color:#bbf7d0}
.yardRow .scost,.resRow .scost{font-family:var(--hw-display);font-size:.76rem;color:var(--hw-dim);line-height:2}
.yrOrder input,.fcrow input{font-family:var(--num);background:#070812;border-color:rgba(150,170,255,.28);border-radius:10px}
.yrLock{position:relative;padding-left:20px}
.yrLock:not(:empty)::first-letter{font-size:0}
.yrLock:not(:empty)::before{content:'';position:absolute;left:0;top:.15em;width:14px;height:14px;background-color:currentColor;-webkit-mask:var(--ico-lock) center/contain no-repeat;mask:var(--ico-lock) center/contain no-repeat}
.yardRow.lockedRow{opacity:1}
.yardRow.lockedRow>*{opacity:.72}
.yardRow.lockedRow .yrLock{opacity:1;color:#fda4af}
.why{font-family:var(--hw-display);font-size:.76rem;color:#fda4af}

.dockIntro .eyebrow{font-family:var(--num);font-size:.6875rem;letter-spacing:.2em}
.dockIntro h2{font-family:var(--hw-display);font-weight:750;font-size:1.3rem;letter-spacing:.04em;color:#fff}
.dockIntro p:not(.eyebrow){font-size:.9rem;color:var(--hw-ink-2)}
.dockSummary{font-family:var(--num);font-size:.75rem;border-radius:12px;padding:10px 12px;border-color:rgba(34,211,238,.3)}
.dockHull{padding:14px}
.dockHullHead{gap:10px}
.dockHullHead>span:first-child{width:28px;height:28px;color:var(--tint,var(--hw-cyan-soft))}
#dockReadout .dockHull:nth-child(1){--i:var(--ico-probe);--tint:#7dd3fc}
#dockReadout .dockHull:nth-child(2){--i:var(--ico-corvette);--tint:#22d3ee}
#dockReadout .dockHull:nth-child(3){--i:var(--ico-hauler);--tint:#fbbf24}
#dockReadout .dockHull:nth-child(4){--i:var(--ico-cruiser);--tint:#c4b5fd}
.dockHull h3{font-family:var(--hw-display);font-weight:750;font-size:1rem;color:#fff}
.dockMeta{font-size:.78rem;line-height:1.5;color:var(--hw-ink-2)}
.dockFacts div{background:rgba(5,6,14,.5);border-color:var(--fx-edge);border-radius:9px;padding:7px 8px}
.dockFacts dt{font-family:var(--num);font-size:.6875rem;letter-spacing:.04em;color:var(--hw-dim)}
.dockFacts dd{font-family:var(--num);font-size:1.05rem;font-weight:650;color:var(--tint,var(--hw-cyan-soft))}
.dockFlight{font-family:var(--hw-display);font-size:.84rem}
.dockBoundary{font-family:var(--hw-display);font-size:.8rem;border-radius:12px}

/* =========================================================
   12 · BEACON, RESTORATION, LOG, STATS
   ========================================================= */
#beaconPanel h2{color:var(--hw-gold-soft)}
#beaconBody .stag{font-size:.9rem;color:var(--hw-ink-2)}
.beaconStage{font-family:var(--hw-display);font-weight:750;font-size:1.05rem;color:var(--hw-gold-soft)}
.beaconReqs li,#milestones li{position:relative;padding:5px 0 5px 26px;font-family:var(--hw-display);font-size:.86rem;line-height:1.45;color:var(--hw-ink-2)}
.beaconReqs li::first-letter,#milestones li::first-letter{font-size:0}
.beaconReqs li::before,#milestones li::before{content:'';position:absolute;left:0;top:7px;width:17px;height:17px;background-color:#8f99bd;
  -webkit-mask:var(--ico-pending) center/contain no-repeat;mask:var(--ico-pending) center/contain no-repeat}
.beaconReqs li.done,#milestones li.done{color:#bbf7d0}
.beaconReqs li.done::before,#milestones li.done::before{background-color:var(--fx-ok);-webkit-mask-image:var(--ico-check);mask-image:var(--ico-check)}
#milestones li.locked{color:#8f99bd}
#milestones li.locked::before{-webkit-mask-image:var(--ico-lock);mask-image:var(--ico-lock);background-color:#6f79a0}
.twocol{gap:14px}
.twocol h2{color:var(--hw-violet)}
#log{font-family:var(--hw-body);font-size:.8rem;line-height:1.6;max-height:240px;color:var(--hw-ink-2)}
#log .cyc{font-family:var(--num);color:#8791b5}
#log .good{color:#86efac} #log .info{color:var(--hw-cyan-soft)} #log .warn{color:#fcd34d} #log .bad{color:#fda4af}
.statRow{font-family:var(--hw-display);font-size:.84rem;border-bottom:1px dashed rgba(150,170,255,.14);padding:7px 0}
.statRow b{font-family:var(--num);color:var(--hw-cyan-soft);font-weight:600}
.endlessNote,.finaleEndless{font-family:var(--hw-display);font-size:.84rem}

/* =========================================================
   13 · EXPLORE THE UNIVERSE (the folded reference)
   ========================================================= */
.homeworldReference{padding:0 16px}
.homeworldReference>summary{font:750 .9rem var(--hw-display);letter-spacing:.12em;color:var(--hw-cyan-soft);padding:18px 0}
.homeworldReference>summary span{font:400 .86rem var(--hw-body);letter-spacing:0;color:var(--hw-ink-2)}
.briefStamp{font-family:var(--num);font-size:.6875rem;letter-spacing:.14em;border-radius:999px;color:var(--hw-gold-soft)}
.briefIntro{font-size:.9rem;line-height:1.6;color:var(--hw-ink-2)}
.briefCard,.modeCard{background:rgba(5,6,14,.45);border-radius:14px;padding:12px}
.briefCard h3,.modeCard h3{font-family:var(--hw-display);font-weight:750;font-size:.8rem;letter-spacing:.1em}
.briefCard p,.modeCard p{font-size:.84rem;line-height:1.55;color:var(--hw-ink-2)}
.briefIcon,.modeIcon,.spineGlyph{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:10px;font-size:0;color:var(--hw-cyan-soft);border:1px solid rgba(125,223,255,.3);background:rgba(34,211,238,.06);filter:none}
.briefIcon .ico,.modeIcon .ico,.spineGlyph .ico{width:20px;height:20px}
.briefMeta,.modeMeta{font-family:var(--num);font-size:.6875rem;letter-spacing:.08em}
.briefFoot,.modeBoundary,.spineBoundary,.worldNote,.battleNote{font-family:var(--hw-body);font-size:.84rem;line-height:1.6;color:var(--hw-ink-2)}
.modeLink,.spineNode a{font-family:var(--hw-display);font-weight:650;font-size:.72rem;letter-spacing:.06em;min-height:36px;padding:7px 11px;border-radius:9px}
.spineNode{min-height:0;padding:12px 10px 11px;border-radius:14px;background:rgba(5,6,14,.55)}
.spineNode::before{font-family:var(--num);font-size:.6875rem;color:rgba(203,213,245,.6)}
.spineEyebrow{font-family:var(--num);font-size:.6875rem;letter-spacing:.14em}
.spineNode h3{font-family:var(--hw-display);font-weight:750;font-size:.9rem}
.spineNode p{font-size:.8rem;line-height:1.5;color:var(--hw-ink-2)}
.spineStatus{font-family:var(--num);font-size:.6875rem;line-height:1.4;letter-spacing:.04em}
#campaignSpine::before{top:176px}
.worldState{font-family:var(--num);font-size:.6875rem}
.worldNode h3{font-family:var(--hw-display);font-size:.9rem}
.worldMeta{font-family:var(--hw-body);font-size:.78rem;color:var(--hw-ink-2)}
.worldWitnessTitle{font-family:var(--hw-display);font-size:.75rem}
.worldWitnessCycle{font-family:var(--num);font-size:.6875rem}
.worldWitnessDetail{font-size:.75rem;color:var(--hw-ink-2)}
.battleSummary{font-family:var(--hw-display);font-size:.8rem}
.battleControls label{font-family:var(--num);font-size:.6875rem}
.battleControls select{font-family:var(--hw-display);font-size:.82rem;min-height:40px;border-radius:9px;background:#0d0f24}
.battleFleetSource{font-size:.78rem}
.battleCell{border-radius:11px;background:rgba(5,6,14,.55)}
.battleCellLabel{font-family:var(--num);font-size:.6875rem;letter-spacing:.08em}
.battleCellValue{font-family:var(--num);font-size:.84rem}
.battleCellDetail{font-size:.75rem;color:var(--hw-ink-2)}
.battleBranchesTitle{font-family:var(--num);font-size:.6875rem}
.battleBranch{font-family:var(--hw-display);font-size:.72rem}

/* =========================================================
   14 · STARMAP — sprite glyphs on the nodes, readable list
   ========================================================= */
#mapWrap,#mapWrap.mapBoard{border-radius:22px;border-color:rgba(125,223,255,.24);box-shadow:inset 0 0 80px rgba(34,211,238,.06),0 26px 60px -30px rgba(124,58,237,.6)}
.mapsite text:first-of-type{display:none}
.mapsite.k-derelict .siteCore{fill:url(#mp-derelict)}
.mapsite.k-outpost .siteCore{fill:url(#mp-outpost)}
.mapsite.k-bastion .siteCore{fill:url(#mp-bastion)}
.mapsite .siteCore{transition:stroke-width var(--hw-dur)}
.mapsite:hover .siteCore{stroke-width:2.6}
.mapsite text{font-family:var(--hw-display);font-weight:600;letter-spacing:.06em;fill:#b8c1e3}
#mapHome text{font-family:var(--num);font-size:11px}
.btn.sitebtn{position:relative;display:block;width:100%;text-align:left;padding:10px 12px 10px 36px;font-size:.78rem;letter-spacing:.02em;min-height:42px}
.sitebtn::first-letter{font-size:0}
.sitebtn::before{content:'';position:absolute;left:11px;top:50%;width:17px;height:17px;margin-top:-8.5px;background-color:currentColor;-webkit-mask:var(--ico-derelict) center/contain no-repeat;mask:var(--ico-derelict) center/contain no-repeat}
.sitebtn.k-derelict::before{background-color:#7dd3fc}
.sitebtn.k-outpost::before{-webkit-mask-image:var(--ico-raid);mask-image:var(--ico-raid);background-color:#fb7185}
.sitebtn.k-bastion::before{-webkit-mask-image:var(--ico-bastion);mask-image:var(--ico-bastion);background-color:#d8b4fe}
.ringGroup h3{font-family:var(--num);font-size:.6875rem;letter-spacing:.14em}
#sitePanel h3{font-family:var(--hw-display);font-weight:750;font-size:1.05rem}
.siteKind{font-size:.86rem;color:var(--hw-ink-2)}
.siteFacts{font-family:var(--hw-display);font-size:.82rem;line-height:1.9;color:var(--hw-ink-2)}
.composer h4{font-family:var(--num);font-size:.6875rem;letter-spacing:.16em}
.fcrow label{font-family:var(--hw-display);font-size:.84rem}
.launchMath{font-family:var(--num);font-size:.75rem}
.launchAction{font-family:var(--hw-display);font-size:.78rem;border-radius:0 9px 9px 0}
.mapHint{font-family:var(--hw-body);font-size:.86rem;color:var(--hw-ink-2)}
.missionRow{font-family:var(--hw-display);font-size:.82rem;border-radius:11px;padding:8px 10px;background:rgba(251,191,36,.04);border-color:rgba(251,191,36,.28)}
#fleetSlots{margin:0 0 12px}

/* =========================================================
   15 · OVERLAYS — shared glass box
   ========================================================= */
#overlay,#reportOverlay,#portOverlay,#resetOverlay,#boardOverlay,#theaterOverlay{background:radial-gradient(80% 70% at 50% 40%,rgba(20,18,50,.86),rgba(3,4,10,.95));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#overlay .box,#reportOverlay .repBox,.portBox,#resetOverlay .resetBox,.boardBox,.theaterBox,.finaleBox{
  background:linear-gradient(180deg,rgba(26,29,64,.96),rgba(11,12,28,.98));border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.5),0 0 60px -10px rgba(34,211,238,.18)
}
#overlay .box{border-color:rgba(125,223,255,.45);max-width:520px}
#overlay h2,#reportOverlay h2,.portBox h2{font-family:var(--hw-display);font-weight:800;letter-spacing:.14em}
#overlay p{font-size:.98rem;line-height:1.7;color:var(--hw-ink-2)}
#resetOverlay h2{font-family:var(--hw-display);font-weight:800}
#resetOverlay p{color:var(--hw-ink-2)}
.portHint{font-size:.88rem;color:var(--hw-ink-2)}
#portText{font-family:var(--num);font-size:.75rem;background:#05060e;border-radius:10px}
.portMsg{font-family:var(--hw-display);font-size:.8rem}
.finaleBox h2{font-family:var(--hw-display);font-weight:800}
.finaleText{font-size:.98rem;color:var(--hw-ink-2)}
.finaleThesis{font-family:var(--hw-display);font-weight:750;font-size:1.15rem}

/* =========================================================
   16 · THE BATTLE DECK — fixed modal, own-scroll tape, pinned transport
   ========================================================= */
.theaterBox{
  width:min(100%,780px);max-width:780px;height:min(860px,calc(100dvh - 32px));max-height:none;padding:16px 18px 0;
  display:flex;flex-direction:column;gap:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border-color:rgba(125,223,255,.5)
}
.theaterBox>*{flex:0 0 auto}
.theaterStage{position:relative;margin:0 0 10px}
.theaterCanvas{
  aspect-ratio:16/9;width:auto;max-width:100%;height:min(39vh,390px,calc((min(100vw,780px) - 64px) * .5625));margin:0 auto;border-radius:16px;border-color:rgba(125,223,255,.25);
  background:
    radial-gradient(60% 50% at 78% 22%,rgba(124,58,237,.3),transparent 70%),
    radial-gradient(70% 60% at 12% 110%,rgba(34,211,238,.18),transparent 70%),
    radial-gradient(120% 100% at 50% 100%,#1a1f46 0%,#070a16 70%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6)
}
.theaterCanvas .t-bg{background-image:radial-gradient(1.2px 1.2px at 20% 30%,#fff9,transparent),radial-gradient(1px 1px at 70% 20%,#fff7,transparent),radial-gradient(1px 1px at 40% 70%,#fff6,transparent),radial-gradient(1.2px 1.2px at 85% 55%,#fff8,transparent),radial-gradient(1px 1px at 58% 12%,#c7d2fe,transparent),radial-gradient(1px 1px at 8% 62%,#a5f3fc,transparent)}
.theaterCanvas .t-homeworld{left:5%;bottom:9%;width:clamp(48px,11%,84px);height:auto;aspect-ratio:1;border:0;
  background:radial-gradient(circle at 32% 28%,#d8b4fe 0 4%,#8b5cf6 22%,#4c1d95 55%,#140b30 100%);box-shadow:inset -8px -10px 18px rgba(0,0,0,.6),0 0 22px rgba(167,139,250,.7),0 0 60px rgba(34,211,238,.25)}
.theaterCanvas .t-ship{font-size:clamp(1.6rem,4.2vw,2.5rem)}
.theaterCanvas .t-raiders{font-size:clamp(1.3rem,3.4vw,2rem)}
.theaterCanvas .t-grid{font-size:clamp(1.5rem,3.8vw,2.3rem)}
.theaterMeters{margin:8px 0 0;gap:5px}
.theaterMeters .tMeter{height:6px;border-radius:4px;background:rgba(150,170,255,.12)}
.theaterRoster{margin:8px 0 0;gap:12px}
.theaterRoster .tok{font-size:1.15rem}
.theaterBeat{font-family:var(--num);font-size:.6875rem;letter-spacing:.2em;color:#c4b5fd;margin:2px 0 2px}
#theaterTitle{font-family:var(--hw-display);font-weight:800;font-size:1.45rem;letter-spacing:.02em;color:#fff;margin:0 0 4px;text-shadow:0 0 22px rgba(34,211,238,.4)}
.theaterCaption{font-size:.95rem;line-height:1.5;color:var(--hw-ink-2);min-height:0;margin:0 0 8px}
.theaterWitness{font-family:var(--hw-body);font-size:.86rem;line-height:1.5;min-height:0;margin:0 0 8px;padding:8px 12px;border-radius:12px;color:#fde68a;border-style:solid;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.05)}
.theaterWitness[hidden]{display:none}
.theaterOpen{font-family:var(--hw-display);font-size:.84rem;border-radius:12px;margin:0 0 8px}
/* the tape takes whatever height is left, and scrolls on its own */
.theaterTapeWrap{flex:1 1 auto;min-height:88px;display:flex;flex-direction:column;margin:0 0 10px}
.theaterTapeLabel{flex:0 0 auto;font-family:var(--num);font-size:.6875rem;letter-spacing:.16em;color:#c4b5fd;text-align:left;margin:0 0 5px}
.theaterTape{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;font-family:var(--num);font-size:.75rem;line-height:1.65;padding:9px 12px 9px 34px;border-radius:12px;border-color:rgba(150,170,255,.18);background:rgba(3,4,10,.6)}
.theaterTape li:last-child{color:var(--hw-cyan-soft)}
/* the pinned transport dock */
.theaterDock{position:sticky;bottom:0;z-index:6;display:flex;align-items:stretch;gap:8px;margin:0 -18px;padding:10px 18px 14px;border-top:1px solid var(--fx-edge);background:linear-gradient(180deg,rgba(15,16,38,.94),rgba(11,12,28,.99))}
.theaterBtns{flex:1 1 auto;display:flex;gap:8px;justify-content:flex-end;flex-wrap:nowrap}
.theaterBtns .btn{min-height:48px;padding:0 16px}
.theaterBtns #theaterNext{flex:1 1 auto;max-width:240px}
.theaterSettings{position:static;display:flex}
.theaterSettings>summary{list-style:none;cursor:pointer;min-height:48px;min-width:48px;padding:0 12px;gap:7px}
.theaterSettings>summary::-webkit-details-marker{display:none}
.theaterSettings>summary .ico{width:18px;height:18px}
.theaterSettings[open]>summary{border-color:var(--fx-edge-hot);color:var(--hw-cyan-soft)}
.theaterSettingsPanel{position:absolute;left:18px;bottom:calc(100% + 8px);z-index:5;width:min(100%,420px);display:grid;gap:10px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(28,31,68,.98),rgba(12,13,30,.99));border:1px solid rgba(150,170,255,.26);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.95)}
.theaterSkipPref,.theaterWitnessPref{justify-content:flex-start;margin:0;font-family:var(--hw-display);font-size:.84rem;color:var(--hw-ink-2)}
.theaterWitnessPref{color:#fde68a}
.theaterPace{justify-content:flex-start;margin:0}
.theaterPaceLabel{font-family:var(--num);font-size:.6875rem;letter-spacing:.16em;min-width:52px}

/* =========================================================
   17 · REPORTS — banners, loot callouts
   ========================================================= */
#reportOverlay .repBox{max-width:660px;padding:22px 22px 18px}
.repCard{--band:#8b95c9;position:relative;overflow:hidden;padding:0 14px 12px;margin-bottom:12px;border-radius:16px;border:1px solid color-mix(in srgb,var(--band) 40%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--band) 9%,rgba(17,19,42,.94)),rgba(12,13,30,.96))}
.repCard.rep-win{--band:#4ade80}
.repCard.rep-loss{--band:#fb7185}
.repCard.rep-scout{--band:#22d3ee}
.repCard.rep-ruins{--band:#a8a29e}
.repCard>h3{position:relative;margin:0 -14px 10px;padding:12px 14px 12px 46px;font-family:var(--hw-display);font-weight:800;font-size:.95rem;letter-spacing:.06em;color:#fff;
  background:linear-gradient(90deg,color-mix(in srgb,var(--band) 34%,transparent),color-mix(in srgb,var(--band) 6%,transparent) 70%);border-bottom:1px solid color-mix(in srgb,var(--band) 35%,transparent)}
.repCard>h3::first-letter{font-size:0}
.repCard>h3::before{content:'';position:absolute;left:14px;top:50%;width:22px;height:22px;margin-top:-11px;background-color:var(--band);
  -webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat;filter:drop-shadow(0 0 6px var(--band))}
.repCard.rep-loss>h3::before{-webkit-mask-image:var(--ico-cross);mask-image:var(--ico-cross)}
.repCard.rep-scout>h3::before{-webkit-mask-image:var(--ico-probe);mask-image:var(--ico-probe)}
.repCard.rep-ruins>h3::before{-webkit-mask-image:var(--ico-ruins);mask-image:var(--ico-ruins)}
.repLine{font-family:var(--hw-body);font-size:.86rem;line-height:1.55;color:var(--hw-ink-2);padding:2px 0}
.repMath{font-family:var(--num);font-size:.78rem;color:var(--hw-cyan-soft)}
.repGood{color:#bbf7d0}
.repCard .repLine.repGood{margin:6px 0;padding:7px 10px 7px 34px;position:relative;border-radius:10px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.24);font-family:var(--hw-display);font-weight:600}
.repCard .repLine.repGood::before{content:'';position:absolute;left:10px;top:50%;width:16px;height:16px;margin-top:-8px;background-color:#4ade80;-webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat}
.repCard .repLine.repBad{color:#fecdd3}
.repCard .repLine.repWarn{color:#fde68a}
.repTape{border-radius:11px;border-color:var(--fx-edge)}
.repTape>summary{font-family:var(--num);font-size:.6875rem;letter-spacing:.14em;padding:8px 10px}
.repTapeList{font-family:var(--num);font-size:.72rem}
.repChoiceBtns .btn{min-height:44px}
#reportBtn{min-width:160px}

/* =========================================================
   18 · BOARDING — clamped grid, coordinates, pinned turn controls
   ========================================================= */
.boardBox{max-width:880px;padding:18px 20px 0;border-color:rgba(196,181,253,.55)}
.boardBox h2{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--hw-display);font-weight:800;font-size:1.15rem;letter-spacing:.14em}
.boardBox h2 .ico{width:22px;height:22px}
.boardSub{font-family:var(--hw-display);font-size:.84rem;color:var(--hw-ink-2)}
.bIntentHead{font-family:var(--num);font-size:.6875rem}
.bIntentRow{font-family:var(--hw-display);font-size:.8rem}
.boardHint,.boardLog{font-family:var(--hw-body);font-size:.8rem;color:var(--hw-ink-2)}
.bmarineBtn{font-family:var(--hw-display);font-size:.75rem;border-radius:10px}
/* cell size follows the viewport so END TURN is always on screen */
.boardGrid{--cell:clamp(32px,min(calc((100dvh - 470px) / 6.4),calc((100vw - 84px) / 6.6)),62px);grid-template-columns:repeat(6,var(--cell));grid-auto-rows:var(--cell);gap:5px;justify-content:center;padding:18px 0 0 22px;margin:0 auto 12px;width:max-content;max-width:100%}
.bcell{position:relative;min-height:0;aspect-ratio:auto;width:var(--cell);height:var(--cell);font-size:calc(var(--cell) * .44);border-radius:9px;background:#0b0f22}
/* row / column coordinates (R1–R6, C1–C6), matching the intent panel's words */
.bcell[data-y="0"]::before,.bcell[data-x="0"]::after{position:absolute;font-family:var(--num);font-size:.6875rem;font-weight:600;color:#8f99bd;pointer-events:none;line-height:1}
.bcell[data-y="0"]::before{top:-16px;left:50%;transform:translateX(-50%)}
.bcell[data-x="0"]::after{left:-22px;top:50%;transform:translateY(-50%)}
.bcell[data-y="0"][data-x="0"]::before{content:'C1'} .bcell[data-y="0"][data-x="1"]::before{content:'C2'} .bcell[data-y="0"][data-x="2"]::before{content:'C3'}
.bcell[data-y="0"][data-x="3"]::before{content:'C4'} .bcell[data-y="0"][data-x="4"]::before{content:'C5'} .bcell[data-y="0"][data-x="5"]::before{content:'C6'}
.bcell[data-x="0"][data-y="0"]::after{content:'R1'} .bcell[data-x="0"][data-y="1"]::after{content:'R2'} .bcell[data-x="0"][data-y="2"]::after{content:'R3'}
.bcell[data-x="0"][data-y="3"]::after{content:'R4'} .bcell[data-x="0"][data-y="4"]::after{content:'R5'} .bcell[data-x="0"][data-y="5"]::after{content:'R6'}
.boardBtns{position:sticky;bottom:0;z-index:4;margin:0 -20px;padding:12px 20px 16px;background:linear-gradient(180deg,rgba(11,12,28,.6),rgba(11,12,28,.98) 30%);border-top:1px solid var(--fx-edge)}
.boardBtns .btn{min-height:46px}
@media (max-width:700px) and (max-height:820px){.boardBtns{position:static;margin-top:8px}}
.boardOutcome{border-radius:14px}
.boardIntent:empty{display:none}
.boardOutcome h3{font-family:var(--hw-display);font-weight:750;font-size:.95rem}
@media (min-width:900px){
  .boardBox{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-content:start}
  .boardBox>*{grid-column:1 / -1}
  .boardBox>.boardGrid{grid-column:1;grid-row:3 / span 6;align-self:start;margin:0}
  .boardBox>.boardIntent,.boardBox>.boardParty,.boardBox>.boardHint,.boardBox>.boardLog,.boardBox>.boardOutcome,.boardBox>.theaterSkipPref{grid-column:2}
  .boardBox>.theaterSkipPref{justify-content:flex-start}
  .boardGrid{--cell:clamp(42px,calc((100dvh - 300px) / 6.6),70px)}
}

/* =========================================================
   19 · MINIMUM TEXT — nothing under 11px, anywhere
   ========================================================= */
.rnums .rname,.modeMeta,.modeLink,.spineNode::before,.spineEyebrow,.spineNode a,.spineStatus,
.splate .plate-label,.dockIntro .eyebrow,.dockFacts dt,.fcmeta,.ringGroup h3,.worldState,.worldWitnessCycle,
.battleControls label,.battleCellLabel,.battleBranchesTitle,.briefStamp,.briefMeta,.theaterBeat,.theaterTapeLabel,
.theaterPaceLabel,.repTape>summary,.bIntentHead,.colonyHeading .eyebrow,#title .titleReadout,#title .titleTelemetry span,#title .titleTelemetry small{font-size:max(.6875rem,11px)}
.modeBoundary,.spineNode p,.spineBoundary,.dockMeta,.launchAction,.worldMeta,.worldWitnessTitle,.worldWitnessDetail,.battleSummary,
.battleFleetSource,.battleCellDetail,.battleBranch,.battleNote,.briefCard h3,.theaterTape,.theaterOpen,.repTapeList,.bmarineBtn,
.boardHint,.boardLog,#tabs .tab,.colonyJumps a{font-size:max(.72rem,11.5px)}

/* =========================================================
   20 · MOTION — staged reveals (only when motion is welcome)
   ========================================================= */
@keyframes fxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxBloom{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fxStage{from{opacity:0;transform:scale(.4)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes fxSat{from{transform:rotate(-70deg)}to{transform:rotate(290deg)}}
@keyframes fxHazard{from{background-position:0 0,0 0}to{background-position:34px 0,0 0}}
@keyframes fxHalo{0%,100%{opacity:.85}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  #title.active .titleHero{animation:fxFade .9s var(--hw-ease-out) both}
  #title.active .titleWorld,#title.active .titleHalo{animation:fxBloom 1.1s var(--hw-ease-out) both}
  #title.active .titleHalo{animation:fxBloom 1.1s var(--hw-ease-out) both,fxHalo 6s ease-in-out 1.1s infinite}
  #title.active .titleBrand{animation:fxRise .8s var(--hw-ease-out) .12s both}
  #title.active .titleMenu>*{animation:fxRise .6s var(--hw-ease-out) both}
  #title.active .titleMenu>:nth-child(1){animation-delay:.24s} #title.active .titleMenu>:nth-child(2){animation-delay:.3s}
  #title.active .titleMenu>:nth-child(3){animation-delay:.36s} #title.active .titleMenu>:nth-child(4){animation-delay:.42s}
  #title.active .titleMenu>:nth-child(5){animation-delay:.48s}
  #title.active .titleTelemetry,#title.active .plaque,#title.active .gameVersion{animation:fxRise .7s var(--hw-ease-out) .56s both}
  #how.active .howto>*:not(.howBar){animation:fxRise .6s var(--hw-ease-out) both}
  #game.active #commandBar>*,#game.active>#tabs{animation:fxRise .55s var(--hw-ease-out) both}
  #game.active #buildStatus{animation-delay:.08s}
  #game.active>#tabs{animation-delay:.12s}
  #viewHome:not([hidden])>.colonyHeading,#viewHome:not([hidden])>.colonyHint{animation:fxRise .55s var(--hw-ease-out) .1s both}
  #viewHome:not([hidden])>#scene{animation:fxRise .7s var(--hw-ease-out) .16s both}
  #viewHome:not([hidden]) .scard{animation:fxRise .6s var(--hw-ease-out) both}
  #viewHome:not([hidden]) .scard:nth-child(1){animation-delay:.22s} #viewHome:not([hidden]) .scard:nth-child(2){animation-delay:.27s}
  #viewHome:not([hidden]) .scard:nth-child(3){animation-delay:.32s} #viewHome:not([hidden]) .scard:nth-child(4){animation-delay:.37s}
  #viewHome:not([hidden]) .scard:nth-child(5){animation-delay:.42s} #viewHome:not([hidden]) .scard:nth-child(6){animation-delay:.47s}
  #viewHome:not([hidden]) .scard:nth-child(7){animation-delay:.52s}
  #viewDock:not([hidden])>*,#viewMap:not([hidden])>*,#viewStats:not([hidden])>*{animation:fxRise .55s var(--hw-ease-out) both}
  #viewMap:not([hidden])>*:nth-child(2),#viewDock:not([hidden])>*:nth-child(2){animation-delay:.06s}
  #viewMap:not([hidden])>*:nth-child(n+3),#viewDock:not([hidden])>*:nth-child(n+3){animation-delay:.12s}
  #planetScene .stage.on{transform-box:fill-box;transform-origin:50% 100%;animation:fxStage .7s var(--hw-ease-out) both}
  #planetScene .ps-satOrbit{transform-origin:320px 660px;animation:fxSat 140s linear infinite}
  .wrap:has(#sg-scrapworks.building) #card-scrapworks .splate,
  .wrap:has(#sg-signalArray.building) #card-signalArray .splate,
  .wrap:has(#sg-sparkCore.building) #card-sparkCore .splate,
  .wrap:has(#sg-storage.building) #card-storage .splate,
  .wrap:has(#sg-aegisGrid.building) #card-aegisGrid .splate,
  .wrap:has(#sg-shipyard.building) #card-shipyard .splate,
  .wrap:has(#sg-researchBay.building) #card-researchBay .splate{animation:fxHazard 1.6s linear infinite}
  #theaterOverlay.show .theaterBox,#reportOverlay.show .repBox,#overlay.show .box{animation:fxRise .45s var(--hw-ease-out) both}
  .repCard{animation:fxRise .5s var(--hw-ease-out) both}
  .repCard:nth-child(2){animation-delay:.08s} .repCard:nth-child(3){animation-delay:.16s} .repCard:nth-child(n+4){animation-delay:.24s}
}
@media (prefers-reduced-motion:reduce){
  .btn,.tab,.scard,.spineNode{transition:none}
  .btn:active{transform:none}
  #planetScene .ps-satOrbit{transform:rotate(-12deg);transform-origin:320px 660px}
}

/* =========================================================
   21 · RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  #commandBar #cycleRow .cycchip{min-width:58px;padding:4px 8px}
  #commandBar #cycleRow #btnCycle{padding:0 14px}
  .cmdMore .cmdMoreLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:860px){
  :root{--fx-strip-h:122px}
  .cmdStrip{flex-wrap:wrap}
  #commandStrip #resBar{flex:1 1 100%}
  #commandBar #cycleRow{flex:1 1 100%}
  #commandBar #cycleRow #btnCycle{flex:1 1 auto}
}
@media (max-width:700px){
  .theaterBtns{flex-wrap:wrap}
  .theaterSettingsLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .boardBox{padding:14px 12px 0}
  #boardOverlay{padding:8px}
  .boardBtns{margin:0 -12px;padding:10px 12px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .boardBtns .btn{min-height:44px;padding:0 8px;font-size:.78rem}
  .boardBtns #boardEndTurn,.boardBtns #boardClose{grid-column:1 / -1}
}
@media (max-width:640px){
  .wrap{padding:10px 12px 48px}
  #cycleRow .btn{flex:0 0 auto}
  .cycchip{width:auto}
  #structGrid{grid-template-columns:minmax(0,1fr)}
  .twocol{grid-template-columns:minmax(0,1fr)}
  #title .titleTelemetry{grid-template-columns:1fr;max-width:340px}
  #title .titleTelemetry>div{display:grid;grid-template-columns:78px 1fr;align-items:baseline;text-align:left;column-gap:8px}
  #title .titleTelemetry span{grid-row:span 2}
  #title .titleTelemetry small{grid-column:2}
  #title .titleOrbitOne{width:330px;height:108px}
  #title .titleOrbitTwo{width:430px;height:146px}
  #title .titleOrbitThree{width:540px;height:190px}
  #title .titleWorld{width:96px;height:96px}
  #title .titleHalo{width:230px;height:230px}
  #title .big{letter-spacing:-.03em}
  .scard .splate{height:104px}
  .scard .plate-sil{width:56px;height:56px;right:14px}
  .scard .plate-bars{right:80px}
}
@media (max-width:560px){
  :root{--fx-strip-h:96px}
  html{scroll-padding-top:calc(var(--fx-strip-h) + 14px)}
  .cmdStrip{gap:5px;padding:5px;border-radius:14px;margin-bottom:8px}
  #commandStrip #resBar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #resBar .res{padding:4px 6px;gap:0;border-radius:10px}
  #resBar .res .ricon{display:none}
  #resBar .rnums{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"amt cap" "rate rate";column-gap:3px;row-gap:0;overflow-wrap:normal}
  #resBar .rnums .rname{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #resBar .rnums b{display:inline;font-size:.95rem}
  #resBar .rnums .cap{font-size:.6875rem;margin:0;align-self:baseline}
  #resBar .rnums .rate{justify-self:start;font-size:.6875rem;padding-left:15px;position:relative}
  #resBar .rnums .rate::before{content:'';position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;background-color:var(--rc);-webkit-mask:var(--ico-scrap) center/contain no-repeat;mask:var(--ico-scrap) center/contain no-repeat}
  #resBar .r-signal .rnums .rate::before{-webkit-mask-image:var(--ico-signal);mask-image:var(--ico-signal)}
  #resBar .r-spark .rnums .rate::before{-webkit-mask-image:var(--ico-spark);mask-image:var(--ico-spark)}
  #commandBar #cycleRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:5px;padding:0}
  #commandBar #cycleRow .btn{width:auto;white-space:nowrap}
  #commandBar #cycleRow .cycchip{width:auto;min-width:0;flex-direction:row;gap:4px;padding:0 8px;font-size:.6875rem;letter-spacing:.08em}
  #commandBar #cycleRow .cycchip b{font-size:.95rem}
  #commandBar #cycleRow #btnCycle{min-height:40px;padding:0 10px;font-size:.8rem;letter-spacing:.06em}
  #commandBar #cycleRow #btnCycle10{min-height:40px;padding:0 10px;font-size:.72rem}
  #commandBar #cycleRow .cmdMore>summary{min-height:40px;min-width:42px;padding:0 10px}
  .cmdMenu{min-width:200px}
  #commandBar #buildStatus,#commandBar #defenseStatus,#commandBar #momChip{font-size:.78rem;padding:6px 10px 6px 34px;margin-bottom:6px}
  #buildStatus::before,#defenseStatus::before,#momChip::before{left:10px;width:15px;height:15px;margin-top:-7.5px}
  #tabs{width:100%;gap:3px;padding:3px}
  #tabs .tab{flex:1 1 auto;min-width:0;padding:8px 4px;gap:5px;font-size:.6875rem;letter-spacing:.03em;min-height:44px}
  #tabs .tab .ico{width:15px;height:15px}
  .colonyHeading{margin:4px 0 8px}
  .colonyHeading h2{font-size:1.2rem}
  .colonyJumps{gap:5px}
  .colonyJumps a{padding:8px 10px;font-size:.6875rem}
  .colonyHint{font-size:.84rem;margin-bottom:10px}
  #viewHome #planetScene{height:clamp(170px,48vw,210px)}
  .sceneHud{left:12px;top:9px}
  .sceneHudName{font-size:.9rem}
  .theaterBox{padding:12px 12px 0;height:calc(100dvh - 16px);border-radius:18px}
  .theaterDock{margin:0 -12px;padding:8px 12px 10px}
  .theaterSettingsPanel{left:12px;width:calc(100% - 24px)}
  #theaterOverlay{padding:8px}
  #theaterTitle{font-size:1.2rem}
  .theaterDock{align-items:flex-start}
  .theaterBtns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .theaterBtns .btn{padding:0 12px;font-size:.8rem;min-height:46px}
  .theaterBtns #theaterNext{max-width:none}
  .theaterBtns #theaterSkipAll{grid-column:1 / -1;min-height:42px}
  .theaterSettings>summary{min-height:46px}
  .mapsite text:last-of-type{display:none}
  .mapsite.sel text:last-of-type{display:inline;font-size:22px;font-weight:700}
  #mapHome text{font-size:22px}
}
@media (max-width:420px){
  .wrap>header{padding:0 0 8px;margin-bottom:10px;gap:4px 6px;flex-wrap:wrap}
  .wrap>header .navlinks{margin-left:auto}
  h1{font-size:.98rem;white-space:nowrap}
  header .tag{display:none}
  .navlinks{gap:2px}
  .navlinks{flex:0 0 auto}
  .navlinks a{padding:6px 5px;font-size:.6875rem;letter-spacing:.04em}
  #title{padding-top:4px}
  #title .titleMenu .ctaSub{flex-basis:100%;text-align:left;margin-left:34px}
  #title .titleMenu .cta{row-gap:0}
  .colonyHint{display:none}
}
@media (max-width:400px){
  #tabs .tab{flex-direction:column;gap:3px;padding:6px 2px;min-height:48px;line-height:1.1}
  #tabs .tab .ico{width:16px;height:16px}
  #title .titleReadoutRight{display:none}
  #title p.motto{letter-spacing:.18em}
}
@media (max-width:360px){
  .wrap>header{flex-wrap:wrap}
  #commandBar #cycleRow .cycchip{flex-direction:column;gap:0;padding:0 5px;letter-spacing:.04em;line-height:1.05}
  #commandBar #cycleRow .cycchip b{font-size:.84rem}
  .colonyJumps a{padding:8px 8px}
  .colonyJumps a .ico{display:none}
  .colonyHeading h2{font-size:1.05rem}
  #commandBar #cycleRow .cycchip{padding:0 6px}
  #commandBar #cycleRow #btnCycle{font-size:.72rem;letter-spacing:.01em;padding:0 6px;gap:4px}
  #commandBar #cycleRow #btnCycle10{font-size:.6875rem;letter-spacing:.01em;padding:0 6px;gap:4px}
  #commandBar #cycleRow .cmdMore>summary{min-width:38px;padding:0 8px}
  .theaterBtns .btn{white-space:nowrap;font-size:.74rem;padding:0 8px}
  #resBar .rnums b{font-size:.88rem}
  .mapsite.sel text:last-of-type,#mapHome text{font-size:25px}
}
/* short screens hand the viewport back to focus and dialogs */
@media (max-height:700px){
  .cmdStrip{position:relative}
  html{scroll-padding-top:16px}
  .howBar{position:relative}
}
.ico-up{transform:rotate(-90deg)} .ico-down{transform:rotate(90deg)}