/* =========================================================================
   FDT design tokens — canonical source.

   This file is the single source of truth for the --fdt-* token layer,
   consumed by every FDT web property as a Hugo Module (sites) or via
   go:embed (Go apps). Values are documented at
   design.frontierdefensetech.com. WebAwesome --wa-* bridge mappings are
   deliberately NOT here — their scoping differs per site (see
   research-library's .wa-dark scoping) and they stay site-local.
   ========================================================================= */

:root,
.wa-dark {
  /* Navy surfaces (canvas → raised) */
  --fdt-navy-900: #0A1220;
  --fdt-navy-800: #0F1A2E;
  --fdt-navy-700: #16243D;
  --fdt-navy-600: #1E3050;

  /* Fog (text + light UI) */
  --fdt-fog-100: #E8EEF7;
  --fdt-fog-200: #C5D1E2;

  /* Steel (metadata + muted UI) */
  --fdt-steel-300: #8A9BB4;
  --fdt-steel-400: #5A6D8A;

  /* Electric (single accent) */
  --fdt-electric-300: #7BA9FF;
  --fdt-electric-400: #4A8DFF;
  --fdt-electric-500: #1D6EF5;
  --fdt-electric-600: #1456C7;

  /* Semantic */
  --fdt-hostile:     #E0322C;
  --fdt-hostile-400: #EE5050;
  --fdt-neutral:     #2FA85A;
  --fdt-caution:     #F2B535;

  /* Divider / border */
  --fdt-divider: #1F3352;

  /* Glow scale (xs/sm/md/lg/xl) */
  --fdt-glow-xs: 0 0   8px  2px rgba(29, 110, 245, 0.20);
  --fdt-glow-sm: 0 0  16px  2px rgba(29, 110, 245, 0.30);
  --fdt-glow-md: 0 0  32px  4px rgba(29, 110, 245, 0.35);
  --fdt-glow-lg: 0 0  64px  8px rgba(29, 110, 245, 0.40);
  --fdt-glow-xl: 0 0 128px 16px rgba(123, 169, 255, 0.35);

  /* Typography */
  --fdt-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fdt-font-display:  'Inter Display', 'Inter', -apple-system, sans-serif;
  --fdt-font-wordmark: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --fdt-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing (4px base) */
  --fdt-space-1: 4px;
  --fdt-space-2: 8px;
  --fdt-space-3: 12px;
  --fdt-space-4: 16px;
  --fdt-space-5: 24px;
  --fdt-space-6: 32px;
  --fdt-space-7: 48px;
  --fdt-space-8: 64px;
  --fdt-space-9: 96px;

  /* Radii */
  --fdt-radius-sm: 2px;
  --fdt-radius-md: 4px;
  --fdt-radius-lg: 8px;

  /* Motion — tempo (design system § Motion).
     UI state change: 150–250ms · panel entrance/exit: 400–600ms · ambient signal: 1–2s. */
  --fdt-motion-fast:    150ms;   /* hover, focus ring, tab switch */
  --fdt-motion-base:    200ms;   /* signature "Acquire" — selection, commit */
  --fdt-motion-slow:    350ms;   /* signature "Panel slide" — drawer/sheet */
  --fdt-motion-panel:   500ms;   /* panel entrance/exit, modal in */
  --fdt-motion-ambient: 1200ms;  /* live pulse */
  --fdt-motion-sweep:   2000ms;  /* radar sweep, ambient signals */

  /* Motion — easing. UI motion uses fast-out gentle-settle; tactical is linear. */
  --fdt-ease-ui:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --fdt-ease-linear: linear;
}
/* =========================================================================
   SECTOR — single-pager stylesheet ("Capability Brief" homepage)

   Tokens follow the FDT design system contract: --fdt-* for FDT extensions.
   No bare tokens, no --color-* generics. Canonical values live at
   design.frontierdefensetech.com.

   A handful of colors are intentionally NOT tokens:
   - `--steel-500` (#3A4A66) is in the design system's own sheet but hasn't
     landed in the canon `tokens.css` module yet. Declared locally below.
   - The physical Game Boy Color plastic/label colors (#AEB4BC/#8F969F
     shell, #9DB05C label green, #060D18 bezel) describe real hardware, not
     FDT brand surfaces, so they stay literal.
   ========================================================================= */

/* Self-hosted Latin subsets — defense endpoints can't assume external
   resolution. Inter v20, Barlow Condensed v13, JetBrains Mono v24, all OFL. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-v20-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}

:root {
  /* Design-system literal not yet promoted to the canon tokens.css module. */
  --steel-500: #3A4A66;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--fdt-navy-900);
  color: var(--fdt-fog-200);
  font-family: var(--fdt-font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ── Header ───────────────────────────────────────────────────────────── */

header {
  background: var(--fdt-navy-900);
  border-bottom: 1px solid var(--fdt-divider);
  padding: 1.125rem 3.5rem;
  flex-shrink: 0;
  z-index: 10;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fdt-space-4);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 32px;
  flex-shrink: 0;
  color: var(--fdt-fog-100);
}

.brand-rule,
.meta-rule {
  display: block;
  width: 1px;
  background: var(--steel-500);
  flex-shrink: 0;
}

.brand-rule {
  height: 28px;
}

.meta-rule {
  height: 16px;
}

.brand-wordmark {
  display: block;
  font-family: var(--fdt-font-wordmark);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--fdt-fog-100);
}

.brand-wordmark-sub {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--fdt-steel-300);
}

.header-meta {
  display: flex;
  align-items: center;
  gap: var(--fdt-space-4);
}

.header-tagline {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fdt-steel-300);
}

.header-program {
  font-family: var(--fdt-font-wordmark);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--fdt-electric-400);
  text-transform: uppercase;
}

/* ── Main / console composition ──────────────────────────────────────── */

main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 3.5rem 1.5rem 4.5rem;
  overflow: hidden;
  background: var(--fdt-navy-900);
}

/* Ambient tactical-grid backdrop, faded to a soft radial vignette so it
   reads as atmosphere behind the console rather than a busy background. */
.grid-overlay {
  position: absolute;
  inset: 0;
  /* rgba(232, 238, 247, …) = --fdt-fog-100 at low alpha (var() can't carry
     partial alpha on its own without color-mix, so the raw triplet is used
     here — same convention the rest of this file follows). */
  background-image:
    linear-gradient(rgba(232, 238, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 238, 247, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 42%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 30%, transparent 75%);
  pointer-events: none;
}

/* Cartridge + console column. --console-w sizes the stack itself; the
   cartridge inside is sized with percentages + aspect-ratio instead of
   the var, because a custom property resolves at the element that uses
   it — inside the button, the var's 100% re-resolves against the
   button's own containing block (and collapses entirely in a height
   context), which shrank the peek window to a sliver. Percentage
   widths/margins/paddings all resolve against the containing block's
   width, so the 440-unit design ratios hold at every viewport. */
.console-stack {
  --console-w: min(440px, 100%);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--console-w);
  margin-top: 0.75rem;
}

/* Cartridge peeking from the top of the console. It sits in normal flow
   with a negative bottom margin pulling the console up over its base —
   the console's higher z-index then hides everything below the overlap
   line. This replaces the old clip-path-on-an-oversized-hitbox approach
   (see .cartridge-eject:hover below for why that mattered). */
.cartridge-eject {
  position: relative;
  z-index: 1;
  width: 54.09%; /* 238/440 */
  aspect-ratio: 238 / 66;
  margin-bottom: -5.91%; /* 26/440 */
  padding-top: 2.05%; /* 9/440 */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* flex default stretch would override the window's aspect-ratio */
  border: 1px solid #8F969F; /* GB cartridge shell trim — real hardware, not an FDT surface */
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #AEB4BC; /* GB cartridge shell plastic — real hardware, not an FDT surface */
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  transition:
    transform var(--fdt-motion-panel) var(--fdt-ease-ui),
    box-shadow var(--fdt-motion-panel) var(--fdt-ease-ui);
}

.cartridge-eject:hover,
.cartridge-eject:focus-visible {
  /* Slow "eject" rise. transform never affects layout, so the console
     below (positioned by the negative margin above, not by this element's
     rendered position) can't be pushed or reflowed by this — only the
     cartridge's own paint position changes. The old implementation's
     jitter came from combining transform + filter(drop-shadow) + a
     clip-path sized to a much larger invisible hit-box; this layout has
     no clip-path at all, so that failure mode doesn't apply here. */
  transform: translateY(-8px);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.5),
    var(--fdt-glow-xs);
}

.cartridge-eject:focus-visible {
  outline: 2px solid var(--fdt-electric-500);
  outline-offset: 4px;
  border-radius: var(--fdt-radius-sm);
}

.cartridge-window {
  display: block;
  width: 86.55%; /* 206/238 of the button */
  aspect-ratio: 206 / 48;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
  background: #9DB05C; /* GB cartridge label green — real hardware, not an FDT surface */
}

.cartridge-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The artwork is near-square (1115x1024) and the peek window is a wide
     4.3:1 strip; height: auto let the full-height render spill and the
     window showed the shell's rounded top corners with the title clipped
     mid-glyph. Cover + this pan puts the GRIDWATCH SECTOR title band in
     the window instead. */
  object-position: 50% 4%;
}

/* ── Console body ─────────────────────────────────────────────────────── */

.console {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  background: var(--fdt-navy-800);
  border: 1px solid var(--fdt-navy-600);
  border-radius: var(--fdt-radius-lg);
  padding: 1.25rem 1.625rem 2.125rem;
  /* Ambient electric bleed — deliberately dimmer than --fdt-glow-md so the
     console reads as "powered" without competing with the screen.
     rgba(29, 110, 245, …) = --fdt-electric-500 at low alpha. */
  box-shadow: 0 0 32px 4px rgba(29, 110, 245, 0.12);
}

.console-screw {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--steel-500);
}

.console-screw--tl { left: 10px; top: 10px; }
.console-screw--tr { right: 10px; top: 10px; }
.console-screw--bl { left: 10px; bottom: 10px; }
.console-screw--br { right: 10px; bottom: 10px; }

.console-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.console-pwr {
  display: flex;
  align-items: center;
  gap: var(--fdt-space-2);
}

.console-pwr-led {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fdt-neutral);
  animation: console-pwr-pulse 1.6s ease-in-out infinite;
}

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

.console-pwr-label {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--fdt-steel-300);
}

.console-mark {
  width: 20px;
  height: 23px;
  color: var(--fdt-steel-300);
}

.console-model {
  font-family: var(--fdt-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--fdt-steel-400);
}

/* Screen. Position/aspect-ratio replace the old approach of hand-computed
   percentages against a background SVG's viewBox — the bezel now just
   sizes itself to the canvas's native 256:224 (8:7) aspect ratio and the
   canvas/fallback/scanlines stack fills it via inset:0. */
.console-screen {
  margin-top: var(--fdt-space-4);
  background: var(--fdt-navy-900);
  border: 1px solid var(--fdt-navy-600);
  border-radius: var(--fdt-radius-md);
  padding: var(--fdt-space-4);
}

/* boot-screen.png sits behind the canvas as a background-image, not a
   foreground <img> — a <canvas> nobody has drawn to yet is transparent, so
   this shows through during the ROM fetch and (if JS never runs at all)
   indefinitely, without needing a <noscript>-wrapped <img> that some HTML
   parsers — including the one this repo's Vale lint runs through — treat
   as opaque text rather than markup once scripting is enabled. */
.console-screen-bezel {
  position: relative;
  aspect-ratio: 8 / 7;
  background: #060D18 url('/img/boot-screen.png') center / contain no-repeat; /* GB hardware bezel black — real hardware, not an FDT surface */
  border: 1px solid var(--fdt-navy-700);
  border-radius: var(--fdt-radius-sm);
  overflow: hidden;
}

#game {
  position: absolute;
  inset: 0;
}

#game canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Only rendered when JS is disabled — the canvas above stays permanently
   blank in that case, so this explains why rather than repeating the boot
   screen as inert decoration. */
.console-noscript-notice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--fdt-space-4);
  font-family: var(--fdt-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--fdt-steel-300);
  background: rgba(6, 13, 24, 0.75); /* #060D18 (GB hardware bezel) at low alpha */
}

.console-scanlines {
  position: absolute;
  inset: 0;
  /* rgba(10, 18, 32, …) = --fdt-navy-900 at low alpha. */
  background: repeating-linear-gradient(
    0deg,
    rgba(10, 18, 32, 0.35) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.console-controls {
  margin-top: var(--fdt-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--fdt-space-2);
}

.console-dpad {
  position: relative;
  width: 92px;
  height: 92px;
}

.console-dpad-v,
.console-dpad-h {
  position: absolute;
  background: var(--fdt-navy-700);
  border: 1px solid var(--fdt-navy-600);
  border-radius: 3px;
  box-sizing: border-box;
}

.console-dpad-v {
  left: 31px;
  top: 0;
  width: 30px;
  height: 92px;
}

.console-dpad-h {
  left: 0;
  top: 31px;
  width: 92px;
  height: 30px;
}

.console-dpad-center {
  position: absolute;
  left: 41px;
  top: 41px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fdt-navy-800);
  border: 1px solid var(--fdt-navy-600);
  box-sizing: border-box;
}

.console-buttons {
  display: flex;
  align-items: center;
  gap: var(--fdt-space-3);
}

.console-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fdt-navy-700);
  border: 1px solid var(--fdt-navy-600);
  box-sizing: border-box;
  font-family: var(--fdt-font-wordmark);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fdt-steel-300);
}

.console-btn--b {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  font-size: 0.75rem;
}

.console-btn--a {
  width: 46px;
  height: 46px;
  font-size: 0.8125rem;
}

.console-startselect {
  margin-top: var(--fdt-space-6);
  display: flex;
  justify-content: center;
  gap: 1.75rem;
}

.console-pill-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.console-pill {
  width: 44px;
  height: 10px;
  border-radius: 5px;
  background: var(--fdt-navy-700);
  border: 1px solid var(--fdt-navy-600);
  box-sizing: border-box;
}

.console-pill-label {
  font-family: var(--fdt-font-wordmark);
  font-weight: 700;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--fdt-steel-400);
}

.console-speaker {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 64px;
  height: 40px;
  background: repeating-linear-gradient(135deg, var(--fdt-navy-600) 0 2px, transparent 2px 9px);
}

/* ── Controls hint strip ─────────────────────────────────────────────── */

#controls-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fdt-space-4);
  padding: var(--fdt-space-5) var(--fdt-space-4);
  font-size: 0.75rem;
  color: var(--fdt-steel-300);
}

.hint-item {
  display: flex;
  align-items: center;
  gap: var(--fdt-space-2);
}

#controls-hint .key {
  font-family: var(--fdt-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fdt-fog-200);
  border: 1px solid var(--steel-500);
  border-radius: 2px;
  padding: 0.125rem 0.4375rem;
  letter-spacing: 0.06em;
}

#controls-hint .separator {
  color: var(--steel-500);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

footer {
  background: var(--fdt-navy-900);
  border-top: 1px solid var(--fdt-divider);
  padding: 1.125rem 3.5rem;
  flex-shrink: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fdt-space-4);
  font-family: var(--fdt-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  /* steel-300, not steel-400: the copyright and Privacy link are real text
     and steel-400 on navy-900 is 3.56:1 — below the AA 4.5:1 floor. */
  color: var(--fdt-steel-300);
  text-transform: uppercase;
}

.footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  letter-spacing: 0.08em;
}

.footer-link:hover {
  color: var(--fdt-electric-400);
}

/* ── Cartridge modal ──────────────────────────────────────────────────── */

.cart-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 18, 32, 0.72); /* --fdt-navy-900 at low alpha */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cart-modal-fade-in 200ms var(--fdt-ease-ui);
}

@keyframes cart-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cart-modal[hidden] {
  display: none;
}

.cart-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.cart-modal-content {
  position: relative;
  z-index: 1;
  width: 460px;
  max-width: 90vw;
  background: var(--fdt-navy-800);
  border: 1px solid var(--fdt-navy-600);
  border-radius: var(--fdt-radius-md);
  overflow: hidden;
  animation: cart-modal-pop-in 280ms var(--fdt-ease-ui);
}

@keyframes cart-modal-pop-in {
  from { transform: translateY(12px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.cart-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fdt-space-3);
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--fdt-divider);
}

.cart-modal-title {
  font-family: var(--fdt-font-wordmark);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--fdt-fog-100);
}

.cart-modal-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--steel-500);
  border-radius: var(--fdt-radius-sm);
  color: var(--fdt-steel-300);
  cursor: pointer;
  transition:
    color var(--fdt-motion-fast) var(--fdt-ease-ui),
    border-color var(--fdt-motion-fast) var(--fdt-ease-ui),
    box-shadow var(--fdt-motion-fast) var(--fdt-ease-ui);
}

.cart-modal-close:hover {
  color: var(--fdt-fog-100);
  border-color: var(--fdt-electric-500);
  box-shadow: var(--fdt-glow-xs);
}

.cart-modal-close:focus-visible {
  outline: 2px solid var(--fdt-electric-500);
  outline-offset: 2px;
}

.cart-modal-body {
  padding: 1.125rem;
}

.cart-modal-img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  background: #9DB05C; /* GB cartridge label green — real hardware, not an FDT surface */
  border-radius: 2px;
  display: block;
}

.cart-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--fdt-divider);
}

.cart-modal-download {
  font-family: var(--fdt-font-wordmark);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fdt-fog-100);
  /* electric-600, not electric-500: at this size the label needs 4.5:1 and
     fog-100 on electric-500 is 3.91:1; on electric-600 it holds 5.65:1
     (4.87:1 under the brightness(1.1) hover). */
  background: var(--fdt-electric-600);
  padding: 0.5625rem 1rem;
  border-radius: var(--fdt-radius-sm);
  box-shadow: var(--fdt-glow-sm);
  transition: filter var(--fdt-motion-fast) var(--fdt-ease-ui);
}

.cart-modal-download:hover {
  filter: brightness(1.1);
}

.cart-modal-download:focus-visible {
  outline: 2px solid var(--fdt-fog-100);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cart-modal,
  .cart-modal-content {
    animation: none;
  }
}

/* Mobile portrait */
@media only screen and (max-width: 640px) {
  header,
  footer {
    padding: 0.625rem 1rem;
  }

  main {
    padding: 1.5rem 0.75rem 3rem;
  }

  .brand-wordmark {
    font-size: 0.6875rem;
  }

  .header-tagline,
  .meta-rule {
    display: none;
  }

  .header-program {
    font-size: 0.6875rem;
  }

  #controls-hint {
    display: none;
  }
}

@media only screen and (max-device-width: 812px) and (orientation: portrait) {
  #controller {
    display: block;
  }

  main {
    padding-bottom: 210px;
  }
}

/* Mobile controller (touch devices) */
#controller {
  display: none;
  position: fixed;
  bottom: 0;
  height: 210px;
  width: 100%;
  touch-action: none;
  opacity: 0.8;
}

#controller_dpad {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 184px;
  height: 184px;
}

#controller_dpad::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: var(--fdt-navy-700);
  position: absolute;
  left: 68px;
  top: 68px;
}

#controller_left {
  position: absolute;
  left: 20px;
  top: 68px;
  width: 48px;
  height: 48px;
  background: var(--fdt-navy-800);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#controller_right {
  position: absolute;
  left: 116px;
  top: 68px;
  width: 48px;
  height: 48px;
  background: var(--fdt-navy-800);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#controller_up {
  position: absolute;
  left: 68px;
  top: 20px;
  width: 48px;
  height: 48px;
  background: var(--fdt-navy-800);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#controller_down {
  position: absolute;
  left: 68px;
  top: 116px;
  width: 48px;
  height: 48px;
  background: var(--fdt-navy-800);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#controller_a {
  position: absolute;
  bottom: 110px;
  right: 20px;
}

#controller_b {
  position: absolute;
  bottom: 80px;
  right: 100px;
}

.roundBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--fdt-fog-100);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fdt-electric-500);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.capsuleBtn {
  font-weight: 600;
  font-size: 0.625rem;
  color: var(--fdt-fog-200);
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: 64px;
  height: 32px;
  border-radius: 40px;
  background: var(--fdt-navy-800);
  border: 1px solid rgba(29, 110, 245, 0.2);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

#controller_start {
  position: absolute;
  bottom: 20px;
  right: 15px;
}

#controller_select {
  position: absolute;
  bottom: 20px;
  right: 100px;
}

.btnPressed {
  opacity: 0.5;
}

@media only screen and (max-device-width: 320px) and (orientation: portrait) {
  #controller_dpad {
    left: -5px;
    bottom: -5px;
  }

  #controller_a {
    right: 5px;
    bottom: 95px;
  }

  #controller_b {
    right: 80px;
  }

  #controller_start {
    right: 5px;
  }

  #controller_select {
    right: 80px;
  }
}

/* Landscape with touch controller */
@media only screen and (min-width: 300px) and (orientation: landscape) {
  #controller {
    bottom: 50%;
    transform: translateY(50%);
    opacity: 0.5;
  }
}

/* Too small for landscape */
@media only screen and (max-device-width: 300px) and (orientation: landscape) {
  #game::after {
    content: "PLEASE ROTATE";
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--fdt-fog-200);
  }

  #game canvas {
    display: none;
  }

  #controller {
    display: none;
  }
}

/* ── Skip link & focus ────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--fdt-space-4);
  z-index: 300;
  padding: var(--fdt-space-3) var(--fdt-space-5);
  background: var(--fdt-navy-800);
  color: var(--fdt-fog-100);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 var(--fdt-radius-md) var(--fdt-radius-md);
  text-decoration: underline;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--fdt-electric-500);
  outline-offset: 2px;
  border-radius: var(--fdt-radius-sm);
}

/* ── Reduced motion (design system § Motion / § Accessibility) ────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}