/* GENERATED by tools/ui/gen-tokens.mjs from shared/ui/tokens.json (ds-v3-2026-10-27) - do not edit by hand. */
/* Genesis design system (docs/UI.md §11). Load before style.css. Fonts: SIL OFL 1.1, see fonts/OFL-*.txt and CREDITS.md. */
@font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Medium"; src: url("fonts/archivo-medium.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VG5000"; src: url("fonts/vg5000.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --ds-palette-navy: #092238;
  --ds-palette-off-white: #F8F9F3;
  --ds-palette-yellow: #FED606;
  --ds-palette-pink: #FF3875;
  --ds-palette-indigo: #5552FF;
  --ds-palette-slate: #202732;
  --ds-palette-cyan: #56E3FF;
  --ds-palette-ink: #091335;
  --ds-palette-row: #31375A;
  --ds-palette-yellow-deep: #EFB217;
  --ds-palette-yellow-warm: #FFC42D;
  --ds-palette-violet-link: #AB64FF;
  --ds-palette-violet-link-hover: #B779FF;
  --ds-palette-violet-link-pressed: #6D1ACF;
  --ds-palette-purple-cta: #8400F4;
  --ds-palette-bg-indigo-deep: #111223;
  --ds-palette-bg-indigo-shape-light: #4C4A9F;
  --ds-palette-bg-indigo-shape-dark: #25226A;
  --ds-palette-bg-shop-navy: #153352;
  --ds-palette-bg-summary: #102030;
  --ds-palette-card-lavender: #C7D3F5;
  --ds-palette-card-back-blue: #366289;
  --ds-palette-hud-plate: #05111FF0;
  --ds-palette-tooltip: #0A1F3BF2;
  --ds-palette-tooltip-text: #DDDDDDB9;
  --ds-palette-white: #FFFFFF;
  --ds-palette-black: #000000;
  --ds-palette-event-circle: #963CDC;
  --ds-palette-storm-pink: #FF78DC;
  --ds-palette-zone-blue: #60A5FA;
  --ds-palette-gold: #F2B53C;
  --ds-palette-axis-x: #FF6B6B;
  --ds-palette-axis-y: #73DB73;
  --ds-palette-axis-z: #66A6FF;
  --ds-color-bg-screen: #111223;
  --ds-color-bg-shop: #153352;
  --ds-color-bg-summary: #102030;
  --ds-color-bg-lobby-scrim: #091335D9;
  --ds-color-bg-scrim: #091335B8;
  --ds-color-surface-panel: #092238F5;
  --ds-color-surface-panel-deep: #091335F0;
  --ds-color-surface-hud: #05111FF0;
  --ds-color-surface-row: #31375A;
  --ds-color-surface-card: #E4E5DF;
  --ds-color-surface-card-white: #F8F9F3;
  --ds-color-surface-card-frame: #C7D3F5;
  --ds-color-surface-tooltip: #0A1F3BF2;
  --ds-color-accent-primary: #FED606;
  --ds-color-accent-primary-deep: #EFB217;
  --ds-color-accent-secondary: #5552FF;
  --ds-color-accent-hot: #FF3875;
  --ds-color-accent-info: #56E3FF;
  --ds-color-accent-link: #AB64FF;
  --ds-color-accent-event: #963CDC;
  --ds-color-text-primary: #F8F9F3;
  --ds-color-text-on-primary: #091335;
  --ds-color-text-on-card: #091335;
  --ds-color-text-muted: #FFFFFF99;
  --ds-color-text-nav-hover: #FFFFFF;
  --ds-color-text-nav-pressed: #FFE870;
  --ds-color-text-disabled: #B2B2B280;
  --ds-color-text-locked: #FFFFFF66;
  --ds-color-text-tooltip: #DDDDDDB9;
  --ds-color-outline-ink: #091335;
  --ds-color-outline-soft: #FFFFFF33;
  --ds-color-tint-none: #FFFFFF;
  --ds-color-bg-fade-black: #000000;
  --ds-color-team-red: #FF5C5C;
  --ds-color-team-blue: #4FA3FF;
  --ds-status-ready: #4AF822;
  --ds-status-online: #3EFF2D;
  --ds-status-error: #F8225A;
  --ds-status-warn: #FFBD2D;
  --ds-status-queue: #47B8FF;
  --ds-status-in-game: #2CEDF1;
  --ds-status-offline: #808080;
  --ds-status-success-icon: #07BC0C;
  --ds-status-error-icon: #E74C3C;
  --ds-status-win: #5EFCB0;
  --ds-status-loss: #FF2A6D;
  --ds-status-countdown-last: #FFDA00;
  --ds-status-leader: #FFD347;
  --ds-status-unlock-able: #00FF00;
  --ds-status-unlock-unable: #FF0000;
  --ds-rarity-common: #F2F2ED;
  --ds-rarity-uncommon: #39FF43;
  --ds-rarity-rare: #3BCAFF;
  --ds-rarity-epic: #F22DFF;
  --ds-rarity-legendary: #FFDC34;
  --ds-rarity-freebie: #C2E7FF;
  --ds-rarity-freebie-legendary: #FFCB45;
  --ds-rarity-mythic: #FF526B;
  --ds-rarity-corrupted: #9E1AF2;
  --ds-rarity-modern-tier-silver: #FFFFFF;
  --ds-rarity-modern-tier-gold: #FFBD34;
  --ds-rarity-modern-tier-prismatic: #B57DFF;
  --ds-char-kitsu: #FF40DA;
  --ds-char-anna: #4EFAFF;
  --ds-char-chuck: #FFC847;
  --ds-char-sashimi: #49A9FF;
  --ds-char-kiddo: #FF782D;
  --ds-char-zook: #FFBD5F;
  --ds-char-skinny: #7087FF;
  --ds-char-froggy: #58FFA7;
  --ds-char-teevee: #5AFFF3;
  --ds-char-sofia: #FF453D;
  --ds-char-jiro: #55AEFF;
  --ds-char-bishop: #7351FF;
  --ds-char-eve: #1C80E5;
  --ds-char-kat: #FD5EF9;
  --ds-char-rocky: #9C8380;
  --ds-char-medusa: #46C896;
  --ds-char-nobito: #FAD23C;
  --ds-char-ink-wave: #3250A0;
  --ds-char-sparki: #FFC83C;
  --ds-char-clocksworth: #C8A05A;
  --ds-char-ji-rex: #78C850;
  --ds-char-ramhus: #5AB4DC;
  --ds-char-zoya: #4CD1A6;
  --ds-char-paul: #FFECA0;
  --ds-char-lumen: #FFC45C;
  --ds-font-display: "Archivo Black", "Arial Black", sans-serif;
  --ds-font-body: "VG5000", "Archivo Medium", sans-serif;
  --ds-font-label: "Archivo Medium", sans-serif;
  --ds-type-caption: 11px;
  --ds-type-small: 14px;
  --ds-type-body: 16px;
  --ds-type-body-l: 18px;
  --ds-type-nav: 20px;
  --ds-type-label: 22px;
  --ds-type-title-s: 28px;
  --ds-type-title: 40px;
  --ds-type-headline: 56px;
  --ds-type-hero: 80px;
  --ds-type-mega: 96px;
  --ds-type-bg-name: 640px;
  --ds-space-unit: 4px;
  --ds-space-xxs: 4px;
  --ds-space-xs: 8px;
  --ds-space-s: 12px;
  --ds-space-m: 16px;
  --ds-space-l: 24px;
  --ds-space-xl: 32px;
  --ds-space-xxl: 48px;
  --ds-space-xxxl: 64px;
  --ds-space-screen-margin-x: 48px;
  --ds-space-top-bar-height: 112px;
  --ds-space-nav-gap: 36px;
  --ds-space-list-row: 70px;
  --ds-space-table-row: 56px;
  --ds-space-grid-gap-x: 16px;
  --ds-space-grid-gap-y: 24px;
  --ds-space-tile-w: 124px;
  --ds-space-tile-h: 104px;
  --ds-space-tile-skew: 0.1;
  --ds-space-char-card-w: 76px;
  --ds-space-char-card-h: 130px;
  --ds-space-char-card-h-selected: 160px;
  --ds-space-shop-card-w: 376px;
  --ds-space-shop-card-h: 572px;
  --ds-space-shop-card-price-width: 222px;
  --ds-space-button-h: 56px;
  --ds-space-button-pad-x: 32px;
  --ds-space-button-h-small: 40px;
  --ds-space-input: 40px;
  --ds-space-chip: 36px;
  --ds-space-icon-button: 44px;
  --ds-space-tab: 44px;
  --ds-space-title-bar: 52px;
  --ds-space-toast-w: 420px;
  --ds-space-toast-h: 64px;
  --ds-space-toast-y: 140px;
  --ds-space-toast-gap: 8px;
  --ds-space-dialog-w: 720px;
  --ds-space-dialog-h: 320px;
  --ds-space-tooltip-w: 280px;
  --ds-space-build-tag-margin: 8px;
  --ds-space-dot-grid-step: 64px;
  --ds-space-dot-grid-dot: 6px;
  --ds-skew-card: -5.71deg;
  --ds-skew-chip: -8.53deg;
  --ds-skew-max: -8.53deg;
  --ds-outline-thin: 2px;
  --ds-outline-bold: 4px;
  --ds-outline-extra: 6px;
  --ds-underline-h: 8px;
  --ds-underline-offset: 10px;
  --ds-underline-extend: 8px;
  --ds-shadow-hard: 0px 4px 0 var(--ds-color-outline-ink);
  --ds-modal-frame: 12px;
  --ds-icon-xs: 16px;
  --ds-icon-s: 24px;
  --ds-icon-m: 32px;
  --ds-icon-l: 44px;
  --ds-icon-ability: 80px;
  --ds-icon-glyph: 64px;
  --ds-motion-fade-page: 500ms;
  --ds-motion-fade-selectable: 100ms;
  --ds-motion-panel-in: 200ms;
  --ds-motion-panel-out: 150ms;
  --ds-motion-panel-offset: 16px;
  --ds-motion-pop-scale: 0.96;
  --ds-motion-sheet-in: 300ms;
  --ds-motion-sheet-out: 100ms;
  --ds-motion-select: 150ms;
  --ds-motion-toast-in: 400ms;
  --ds-motion-toast-out: 250ms;
  --ds-motion-toast-ttl: 6000ms;
  --ds-motion-toast-offset: 350px;
  --ds-motion-stagger-tile: 25ms;
  --ds-motion-stagger-reward: 32ms;
  --ds-motion-stagger-card: 100ms;
  --ds-motion-stagger-max: 24;
  --ds-motion-card-flip: 500ms;
  --ds-motion-bar-fill: 400ms;
  --ds-motion-level-up: 750ms;
  --ds-motion-count-up: 1000ms;
  --ds-motion-carousel-cycle: 10000ms;
  --ds-motion-list-fade: 800ms;
  --ds-motion-hover: 71ms;
  --ds-motion-hover-scale-card: 1.025;
  --ds-motion-hover-scale-button: 1.08;
  --ds-motion-hover-scale-icon: 1.15;
  --ds-motion-press-down: 63ms;
  --ds-motion-press-up: 125ms;
  --ds-motion-press-y: 4px;
  --ds-motion-press-y-large: 8px;
  --ds-motion-tooltip-delay: 350ms;
  --ds-motion-bg-scroll: 0px;
  --ds-motion-char-switch-crossfade: 500ms;
  --ds-motion-char-switch-slide: 48px;
  --ds-motion-wipe-in: 450ms;
  --ds-motion-wipe-out: 450ms;
  --ds-motion-wipe-input-lock: 1200ms;
  --ds-motion-loading-spin: 1000ms;
  --ds-motion-max-entrance: 500ms;
  --ds-motion-instant: 10ms;
  --ds-motion-press-shade: 0.85;
  --ds-motion-hover-tint: 1.15;
  --ds-motion-dim-shade: 0.6;
  --ds-ease-enter: cubic-bezier(0.33, 1, 0.68, 1);
  --ds-ease-exit: cubic-bezier(0.11, 0, 0.5, 0);
  --ds-ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
}
/* prefers-reduced-motion: every motion duration becomes 0 (instant change, no count-up), DESIGN §11.3. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-fade-page: 0ms;
    --ds-motion-fade-selectable: 0ms;
    --ds-motion-panel-in: 0ms;
    --ds-motion-panel-out: 0ms;
    --ds-motion-sheet-in: 0ms;
    --ds-motion-sheet-out: 0ms;
    --ds-motion-select: 0ms;
    --ds-motion-toast-in: 0ms;
    --ds-motion-toast-out: 0ms;
    --ds-motion-stagger-tile: 0ms;
    --ds-motion-stagger-reward: 0ms;
    --ds-motion-stagger-card: 0ms;
    --ds-motion-card-flip: 0ms;
    --ds-motion-bar-fill: 0ms;
    --ds-motion-level-up: 0ms;
    --ds-motion-count-up: 0ms;
    --ds-motion-list-fade: 0ms;
    --ds-motion-hover: 0ms;
    --ds-motion-press-down: 0ms;
    --ds-motion-press-up: 0ms;
    --ds-motion-char-switch-crossfade: 0ms;
    --ds-motion-wipe-in: 0ms;
    --ds-motion-wipe-out: 0ms;
    --ds-motion-instant: 0ms;
  }
}