/* Web mirror of DESIGN_SYSTEM.md / UiTokens.h; values shared by the v2/v3 mocks.
   Web layout values are separate from the game's fixed 1920x1080 coordinates. */
@font-face { font-family: "M PLUS 1p"; src: url("assets/MPLUS1p-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "M PLUS 1p"; src: url("assets/MPLUS1p-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  color-scheme: dark;
  --color-bg: #0E1420;
  --color-night: #03070F;
  --color-text: #FFFFFF;
  --color-dim: #C2D2E2;
  --color-accent: #2BD4E8;
  --color-accent-soft: #8FF0FB;
  --color-accent-text: #032228;
  --surface-top: rgb(38 50 70 / 78%);
  --surface-bottom: rgb(26 36 51 / 78%);
  --surface-border: rgb(215 230 245 / 30%);
  --surface-highlight: rgb(255 255 255 / 12%);
  --surface-deep: rgb(16 24 36 / 80%);
  --ghost-bg: rgb(255 255 255 / 9%);
  --ghost-border: rgb(220 235 248 / 46%);
  /* DESIGN_SYSTEM.md: button detail / UiTokens::fine. */
  --primary-top: #3FDDEE;
  --primary-middle: #22C0D6;
  --primary-bottom: #119DB3;
  --primary-foot: rgb(2 58 70 / 50%);
  --primary-spec: rgb(255 255 255 / 80%);
  --ghost-bottom: rgb(255 255 255 / 3%);
  --line-bracket: rgb(190 230 245 / 40%);
  --line-top-light: rgb(255 255 255 / 18%);
  --scrim: rgb(3 7 15 / 74%);
  --font-main: "M PLUS 1p", "Yu Gothic", sans-serif;
  --text-hero: 4.5rem;
  --text-display: 3.25rem;
  --text-title: 1.625rem;
  --text-item: 1.1875rem;
  --text-action: 1rem;
  --text-body: .875rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-panel: .8125rem;
  --radius-button: .5625rem;
  --radius-chip: .375rem;
  --button-large: 3.875rem;
  --button-normal: 2.875rem;
  --button-small: 2.25rem;
  --line: 1px;
  --focus-line: 3px;
  --duration: 150ms;
  /* Ambient motion from DESIGN_SYSTEM.md: horizon breath / car turn. */
  --motion-ambient-breath: 9s;
  --motion-ambient-drift: 28s;
  --page-width: 80rem;
  --gutter: var(--space-16);
  --hero-height: 36rem;
  --hero-copy-width: 48rem;
  --hero-media-width: 60rem;
  --hero-media-compact-width: 40rem;
  --hero-media-ratio: 16 / 9;
  --horizon-height: 12rem;
  --corner-size: 1.125rem;
  --icon-size: 1.5rem;
  --button-arrow-width: 3.75rem;
}