/* generated — edit design/tokens.json, then run `python3 design/generate.py`. Do not edit by hand. */
/* Floodlight (Clutch Night) — design tokens as CSS custom properties + a few utilities.
   Theme: <html data-theme="day|night|kids|kids-night">; no attribute = follow prefers-color-scheme
   (Day/Night). data-theme="kids" also follows the system into Kids Night. Self-hosted font, no CDN. */

@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --pr-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pr-font-latin: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pr-font-display: "Barlow Condensed", "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pr-control-pad-x: 0px;
  --pr-control-pad-y: 0px;
  --pr-chip-line: 1;
  --pr-display-size: 2.875rem;
  --pr-display-weight: 800;
  --pr-display-tracking: 0.01em;
  --pr-display-line: 0.98;
  --pr-display-family: var(--pr-font-display);
  --pr-title-size: 2rem;
  --pr-title-weight: 800;
  --pr-title-tracking: 0.01em;
  --pr-title-line: 1.02;
  --pr-title-family: var(--pr-font-display);
  --pr-headline-size: 1.375rem;
  --pr-headline-weight: 700;
  --pr-headline-tracking: 0.01em;
  --pr-headline-line: 1.1;
  --pr-headline-family: var(--pr-font-display);
  --pr-label-size: 1.188rem;
  --pr-label-weight: 800;
  --pr-label-tracking: 0.02em;
  --pr-label-line: 1.1;
  --pr-label-family: var(--pr-font-display);
  --pr-body-size: 1.062rem;
  --pr-body-weight: 400;
  --pr-body-tracking: 0.0em;
  --pr-body-line: 1.35;
  --pr-body-family: var(--pr-font);
  --pr-body-strong-size: 1.062rem;
  --pr-body-strong-weight: 600;
  --pr-body-strong-tracking: 0.0em;
  --pr-body-strong-line: 1.35;
  --pr-body-strong-family: var(--pr-font);
  --pr-caption-size: 0.8125rem;
  --pr-caption-weight: 600;
  --pr-caption-tracking: 0.01em;
  --pr-caption-line: 1.25;
  --pr-caption-family: var(--pr-font);
  --pr-micro-size: 0.6875rem;
  --pr-micro-weight: 600;
  --pr-micro-tracking: 0.03em;
  --pr-micro-line: 1.2;
  --pr-micro-family: var(--pr-font);
  --pr-card-text-weight: 800;
  --pr-card-text-line: 1.05;
  --pr-space-xxs: 2px;
  --pr-space-xs: 4px;
  --pr-space-s: 8px;
  --pr-space-m: 12px;
  --pr-space-l: 16px;
  --pr-space-xl: 20px;
  --pr-space-xxl: 24px;
  --pr-space-x3: 32px;
  --pr-space-x4: 40px;
  --pr-space-x5: 56px;
  --pr-space-x6: 72px;
  --pr-space-gutter: 16px;
  --pr-stroke-hairline: 1.0px;
  --pr-stroke-chip: 2.0px;
  --pr-stroke-tile: 2.5px;
  --pr-stroke-button: 2.5px;
  --pr-stroke-card: 3.0px;
  --pr-shadow-small: 2px 3px 0;
  --pr-shadow-medium: 3px 4px 0;
  --pr-shadow-large: 4px 6px 0;
  --pr-shadow-pressed: 0px 1px 0;
  --pr-dur-instant: 80ms;
  --pr-dur-fast: 150ms;
  --pr-dur-base: 250ms;
  --pr-dur-slow: 400ms;
  --pr-dur-slower: 600ms;
  --pr-dur-flip: 450ms;
  --pr-dur-handoff: 550ms;
  --pr-dur-stamp: 320ms;
  --pr-dur-drumroll: 1600ms;
  --pr-dur-confetti: 2400ms;
  /* springs approximated as cubic-béziers for CSS transitions */
  --pr-ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pr-ease-bouncy: cubic-bezier(0.34, 1.8, 0.5, 1);
  --pr-ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --pr-wiggle-amp: 0.6deg;
  --pr-wiggle-period: 3.2s;
  --pr-wiggle-phase: 0.37s;
  --pr-press-scale-x: 1.04;
  --pr-press-scale-y: 0.94;
  --pr-badge-family-fill: #b6f23a;
  --pr-badge-family-text: #06121e;
  --pr-badge-teen-fill: #7fd8f5;
  --pr-badge-teen-text: #06121e;
  --pr-badge-adult-fill: #ff5a36;
  --pr-badge-adult-text: #06121e;
  --pr-game-trivia: #ffb020;
  --pr-game-trivia-pastel: #ffe7b3;
  --pr-game-start-bench-cut: #b6f23a;
  --pr-game-start-bench-cut-pastel: #e6fbbf;
  --pr-game-forehead: #3dd6f5;
  --pr-game-forehead-pastel: #c8f4fd;
  --pr-game-charades: #a98bff;
  --pr-game-charades-pastel: #e4dbff;
  --pr-game-hot-takes: #ff5a36;
  --pr-game-hot-takes-pastel: #ffd3c7;
  --pr-game-most-likely-to: #ffd43b;
  --pr-game-most-likely-to-pastel: #fff3bf;
  --pr-game-bingo: #4ade80;
  --pr-game-bingo-pastel: #c9f7d9;
  --pr-game-predictions: #5aa9ff;
  --pr-game-predictions-pastel: #d3e7ff;
  --pr-game-drink-when: #ff5fa2;
  --pr-game-drink-when-pastel: #ffd3e5;
  color-scheme: light;
  --pr-bg: linear-gradient(180deg, #cfe8ff 0%, #e9f4ff 50%, #f7fbff 100%);
  --pr-bg-solid: #e9f4ff;
  --pr-surface: #ffffff;
  --pr-surface-raised: #f2f7fb;
  --pr-ink: #0b1d2e;
  --pr-outline: #0b1d2e;
  --pr-shadow: #0b1d2e;
  --pr-text-primary: #0b1d2e;
  --pr-text-secondary: #2b4257;
  --pr-text-on-surface: #0b1d2e;
  --pr-text-on-surface-secondary: #4a6075;
  --pr-accent: #0b1d2e;
  --pr-on-accent: #ffb020;
  --pr-accent-shadow: #ffb020;
  --pr-chip: #0b1d2e;
  --pr-on-chip: #ffffff;
  --pr-chip-shadow: #ffb020;
  --pr-danger: #c2410c;
  --pr-on-danger: #ffffff;
  --pr-success: #137a3c;
  --pr-on-success: #ffffff;
  --pr-warning: #ffd166;
  --pr-on-warning: #0b1d2e;
  --pr-tile-outline: #0b1d2e;
  --pr-tile-shadow: #0b1d2e;
  --pr-tile-ink: #0b1d2e;
  --pr-tile-ink-secondary: #34495c;
  --pr-accent-fill: #0b1d2e;
  --pr-wordmark: #0b1d2e;
  --pr-tile-0: #ffe7b3;
  --pr-tile-1: #d3f1fb;
  --pr-tile-2: #e6fbbf;
  --pr-tile-3: #e9e2ff;
  --pr-tile-4: #ffd9c9;
  --pr-tile-5: #fff1c2;
  --pr-tile-6: #cff7e4;
  --pr-tile-7: #ffffff;
  --pr-radius-chip: 8px;
  --pr-radius-button: 12px;
  --pr-radius-tile: 14px;
  --pr-radius-card: 18px;
  --pr-radius-sheet: 24px;
  --pr-radius-badge: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --pr-bg: radial-gradient(120% 75% at 50% 0%, #1b3d5a 0%, #0d2234 55%, #060f1a 100%);
    --pr-bg-solid: #0d2234;
    --pr-surface: #10273b;
    --pr-surface-raised: #173550;
    --pr-ink: #06121e;
    --pr-outline: #e8f1f8;
    --pr-shadow: #02070d;
    --pr-text-primary: #f4f8fb;
    --pr-text-secondary: #b9cad9;
    --pr-text-on-surface: #f4f8fb;
    --pr-text-on-surface-secondary: #aec1d2;
    --pr-accent: #ffb020;
    --pr-on-accent: #06121e;
    --pr-accent-shadow: #b6f23a;
    --pr-chip: #b6f23a;
    --pr-on-chip: #06121e;
    --pr-chip-shadow: #02070d;
    --pr-danger: #ff5a36;
    --pr-on-danger: #06121e;
    --pr-success: #4ade80;
    --pr-on-success: #06121e;
    --pr-warning: #ffd166;
    --pr-on-warning: #06121e;
    --pr-tile-outline: #e8f1f8;
    --pr-tile-shadow: #02070d;
    --pr-tile-ink: #06121e;
    --pr-tile-ink-secondary: #22384c;
    --pr-accent-fill: linear-gradient(90deg, #ffb020, #ffc94d);
    --pr-wordmark: linear-gradient(90deg, #ffb020, #ffd166);
    --pr-tile-0: #ffb020;
    --pr-tile-1: #7fd8f5;
    --pr-tile-2: #b6f23a;
    --pr-tile-3: #c9b6ff;
    --pr-tile-4: #ff8a5c;
    --pr-tile-5: #ffd166;
    --pr-tile-6: #5ee6a8;
    --pr-tile-7: #eef3f7;
    --pr-radius-chip: 8px;
    --pr-radius-button: 12px;
    --pr-radius-tile: 14px;
    --pr-radius-card: 18px;
    --pr-radius-sheet: 24px;
    --pr-radius-badge: 6px;
  }
}

[data-theme="day"] {
  color-scheme: light;
  --pr-bg: linear-gradient(180deg, #cfe8ff 0%, #e9f4ff 50%, #f7fbff 100%);
  --pr-bg-solid: #e9f4ff;
  --pr-surface: #ffffff;
  --pr-surface-raised: #f2f7fb;
  --pr-ink: #0b1d2e;
  --pr-outline: #0b1d2e;
  --pr-shadow: #0b1d2e;
  --pr-text-primary: #0b1d2e;
  --pr-text-secondary: #2b4257;
  --pr-text-on-surface: #0b1d2e;
  --pr-text-on-surface-secondary: #4a6075;
  --pr-accent: #0b1d2e;
  --pr-on-accent: #ffb020;
  --pr-accent-shadow: #ffb020;
  --pr-chip: #0b1d2e;
  --pr-on-chip: #ffffff;
  --pr-chip-shadow: #ffb020;
  --pr-danger: #c2410c;
  --pr-on-danger: #ffffff;
  --pr-success: #137a3c;
  --pr-on-success: #ffffff;
  --pr-warning: #ffd166;
  --pr-on-warning: #0b1d2e;
  --pr-tile-outline: #0b1d2e;
  --pr-tile-shadow: #0b1d2e;
  --pr-tile-ink: #0b1d2e;
  --pr-tile-ink-secondary: #34495c;
  --pr-accent-fill: #0b1d2e;
  --pr-wordmark: #0b1d2e;
  --pr-tile-0: #ffe7b3;
  --pr-tile-1: #d3f1fb;
  --pr-tile-2: #e6fbbf;
  --pr-tile-3: #e9e2ff;
  --pr-tile-4: #ffd9c9;
  --pr-tile-5: #fff1c2;
  --pr-tile-6: #cff7e4;
  --pr-tile-7: #ffffff;
  --pr-radius-chip: 8px;
  --pr-radius-button: 12px;
  --pr-radius-tile: 14px;
  --pr-radius-card: 18px;
  --pr-radius-sheet: 24px;
  --pr-radius-badge: 6px;
}

[data-theme="night"] {
  color-scheme: dark;
  --pr-bg: radial-gradient(120% 75% at 50% 0%, #1b3d5a 0%, #0d2234 55%, #060f1a 100%);
  --pr-bg-solid: #0d2234;
  --pr-surface: #10273b;
  --pr-surface-raised: #173550;
  --pr-ink: #06121e;
  --pr-outline: #e8f1f8;
  --pr-shadow: #02070d;
  --pr-text-primary: #f4f8fb;
  --pr-text-secondary: #b9cad9;
  --pr-text-on-surface: #f4f8fb;
  --pr-text-on-surface-secondary: #aec1d2;
  --pr-accent: #ffb020;
  --pr-on-accent: #06121e;
  --pr-accent-shadow: #b6f23a;
  --pr-chip: #b6f23a;
  --pr-on-chip: #06121e;
  --pr-chip-shadow: #02070d;
  --pr-danger: #ff5a36;
  --pr-on-danger: #06121e;
  --pr-success: #4ade80;
  --pr-on-success: #06121e;
  --pr-warning: #ffd166;
  --pr-on-warning: #06121e;
  --pr-tile-outline: #e8f1f8;
  --pr-tile-shadow: #02070d;
  --pr-tile-ink: #06121e;
  --pr-tile-ink-secondary: #22384c;
  --pr-accent-fill: linear-gradient(90deg, #ffb020, #ffc94d);
  --pr-wordmark: linear-gradient(90deg, #ffb020, #ffd166);
  --pr-tile-0: #ffb020;
  --pr-tile-1: #7fd8f5;
  --pr-tile-2: #b6f23a;
  --pr-tile-3: #c9b6ff;
  --pr-tile-4: #ff8a5c;
  --pr-tile-5: #ffd166;
  --pr-tile-6: #5ee6a8;
  --pr-tile-7: #eef3f7;
  --pr-radius-chip: 8px;
  --pr-radius-button: 12px;
  --pr-radius-tile: 14px;
  --pr-radius-card: 18px;
  --pr-radius-sheet: 24px;
  --pr-radius-badge: 6px;
}

[data-theme="kids"] {
  color-scheme: light;
  --pr-bg: linear-gradient(180deg, #cfe8ff 0%, #e9f4ff 50%, #f7fbff 100%);
  --pr-bg-solid: #e9f4ff;
  --pr-surface: #ffffff;
  --pr-surface-raised: #f2f7fb;
  --pr-ink: #0b1d2e;
  --pr-outline: #0b1d2e;
  --pr-shadow: #0b1d2e;
  --pr-text-primary: #0b1d2e;
  --pr-text-secondary: #2b4257;
  --pr-text-on-surface: #0b1d2e;
  --pr-text-on-surface-secondary: #4a6075;
  --pr-accent: #0b1d2e;
  --pr-on-accent: #ffb020;
  --pr-accent-shadow: #ffb020;
  --pr-chip: #0b1d2e;
  --pr-on-chip: #ffffff;
  --pr-chip-shadow: #ffb020;
  --pr-danger: #c2410c;
  --pr-on-danger: #ffffff;
  --pr-success: #137a3c;
  --pr-on-success: #ffffff;
  --pr-warning: #ffd166;
  --pr-on-warning: #0b1d2e;
  --pr-tile-outline: #0b1d2e;
  --pr-tile-shadow: #0b1d2e;
  --pr-tile-ink: #0b1d2e;
  --pr-tile-ink-secondary: #34495c;
  --pr-accent-fill: #0b1d2e;
  --pr-wordmark: #0b1d2e;
  --pr-tile-0: #ffe7b3;
  --pr-tile-1: #d3f1fb;
  --pr-tile-2: #e6fbbf;
  --pr-tile-3: #e9e2ff;
  --pr-tile-4: #ffd9c9;
  --pr-tile-5: #fff1c2;
  --pr-tile-6: #cff7e4;
  --pr-tile-7: #ffffff;
  --pr-radius-chip: 8px;
  --pr-radius-button: 12px;
  --pr-radius-tile: 14px;
  --pr-radius-card: 18px;
  --pr-radius-sheet: 24px;
  --pr-radius-badge: 6px;
}

[data-theme="kids-night"] {
  color-scheme: dark;
  --pr-bg: radial-gradient(120% 75% at 50% 0%, #1b3d5a 0%, #0d2234 55%, #060f1a 100%);
  --pr-bg-solid: #0d2234;
  --pr-surface: #10273b;
  --pr-surface-raised: #173550;
  --pr-ink: #06121e;
  --pr-outline: #e8f1f8;
  --pr-shadow: #02070d;
  --pr-text-primary: #f4f8fb;
  --pr-text-secondary: #b9cad9;
  --pr-text-on-surface: #f4f8fb;
  --pr-text-on-surface-secondary: #aec1d2;
  --pr-accent: #ffb020;
  --pr-on-accent: #06121e;
  --pr-accent-shadow: #b6f23a;
  --pr-chip: #b6f23a;
  --pr-on-chip: #06121e;
  --pr-chip-shadow: #02070d;
  --pr-danger: #ff5a36;
  --pr-on-danger: #06121e;
  --pr-success: #4ade80;
  --pr-on-success: #06121e;
  --pr-warning: #ffd166;
  --pr-on-warning: #06121e;
  --pr-tile-outline: #e8f1f8;
  --pr-tile-shadow: #02070d;
  --pr-tile-ink: #06121e;
  --pr-tile-ink-secondary: #22384c;
  --pr-accent-fill: linear-gradient(90deg, #ffb020, #ffc94d);
  --pr-wordmark: linear-gradient(90deg, #ffb020, #ffd166);
  --pr-tile-0: #ffb020;
  --pr-tile-1: #7fd8f5;
  --pr-tile-2: #b6f23a;
  --pr-tile-3: #c9b6ff;
  --pr-tile-4: #ff8a5c;
  --pr-tile-5: #ffd166;
  --pr-tile-6: #5ee6a8;
  --pr-tile-7: #eef3f7;
  --pr-radius-chip: 8px;
  --pr-radius-button: 12px;
  --pr-radius-tile: 14px;
  --pr-radius-card: 18px;
  --pr-radius-sheet: 24px;
  --pr-radius-badge: 6px;
}

@media (prefers-color-scheme: dark) {
  [data-theme="kids"] {
    color-scheme: dark;
    --pr-bg: radial-gradient(120% 75% at 50% 0%, #1b3d5a 0%, #0d2234 55%, #060f1a 100%);
    --pr-bg-solid: #0d2234;
    --pr-surface: #10273b;
    --pr-surface-raised: #173550;
    --pr-ink: #06121e;
    --pr-outline: #e8f1f8;
    --pr-shadow: #02070d;
    --pr-text-primary: #f4f8fb;
    --pr-text-secondary: #b9cad9;
    --pr-text-on-surface: #f4f8fb;
    --pr-text-on-surface-secondary: #aec1d2;
    --pr-accent: #ffb020;
    --pr-on-accent: #06121e;
    --pr-accent-shadow: #b6f23a;
    --pr-chip: #b6f23a;
    --pr-on-chip: #06121e;
    --pr-chip-shadow: #02070d;
    --pr-danger: #ff5a36;
    --pr-on-danger: #06121e;
    --pr-success: #4ade80;
    --pr-on-success: #06121e;
    --pr-warning: #ffd166;
    --pr-on-warning: #06121e;
    --pr-tile-outline: #e8f1f8;
    --pr-tile-shadow: #02070d;
    --pr-tile-ink: #06121e;
    --pr-tile-ink-secondary: #22384c;
    --pr-accent-fill: linear-gradient(90deg, #ffb020, #ffc94d);
    --pr-wordmark: linear-gradient(90deg, #ffb020, #ffd166);
    --pr-tile-0: #ffb020;
    --pr-tile-1: #7fd8f5;
    --pr-tile-2: #b6f23a;
    --pr-tile-3: #c9b6ff;
    --pr-tile-4: #ff8a5c;
    --pr-tile-5: #ffd166;
    --pr-tile-6: #5ee6a8;
    --pr-tile-7: #eef3f7;
    --pr-radius-chip: 8px;
    --pr-radius-button: 12px;
    --pr-radius-tile: 14px;
    --pr-radius-card: 18px;
    --pr-radius-sheet: 24px;
    --pr-radius-badge: 6px;
  }
}

/* ---- utilities ---- */
.pr-bg { background: var(--pr-bg-solid); background-image: var(--pr-bg); color: var(--pr-text-primary); font-family: var(--pr-font); }
.pr-display { font: var(--pr-display-weight) var(--pr-display-size)/var(--pr-display-line) var(--pr-font); letter-spacing: var(--pr-display-tracking); }
.pr-title { font: var(--pr-title-weight) var(--pr-title-size)/var(--pr-title-line) var(--pr-font); letter-spacing: var(--pr-title-tracking); }
.pr-headline { font: var(--pr-headline-weight) var(--pr-headline-size)/var(--pr-headline-line) var(--pr-font); letter-spacing: var(--pr-headline-tracking); }
.pr-body { font: var(--pr-body-weight) var(--pr-body-size)/var(--pr-body-line) var(--pr-font); }
.pr-caption { font: var(--pr-caption-weight) var(--pr-caption-size)/var(--pr-caption-line) var(--pr-font); letter-spacing: var(--pr-caption-tracking); }
.pr-wordmark { background: var(--pr-wordmark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-hard-shadow { box-shadow: var(--pr-shadow-medium) var(--pr-shadow); }
.pr-tile { position: relative; background: var(--pr-tile-fill, var(--pr-tile-0)); color: var(--pr-tile-ink);
  border: var(--pr-stroke-tile) solid var(--pr-tile-outline); border-radius: var(--pr-radius-tile);
  box-shadow: var(--pr-shadow-medium) var(--pr-tile-shadow); transform: rotate(var(--pr-tilt, 0deg)); }
.pr-tile:nth-child(8n+1) { --pr-tile-fill: var(--pr-tile-0); --pr-tilt: -1.0deg; --pr-i: 0; }
.pr-tile:nth-child(8n+2) { --pr-tile-fill: var(--pr-tile-1); --pr-tilt: 0.75deg; --pr-i: 1; }
.pr-tile:nth-child(8n+3) { --pr-tile-fill: var(--pr-tile-2); --pr-tilt: -0.5deg; --pr-i: 2; }
.pr-tile:nth-child(8n+4) { --pr-tile-fill: var(--pr-tile-3); --pr-tilt: 1.0deg; --pr-i: 3; }
.pr-tile:nth-child(8n+5) { --pr-tile-fill: var(--pr-tile-4); --pr-tilt: 0.5deg; --pr-i: 4; }
.pr-tile:nth-child(8n+6) { --pr-tile-fill: var(--pr-tile-5); --pr-tilt: -0.75deg; --pr-i: 5; }
.pr-tile:nth-child(8n+7) { --pr-tile-fill: var(--pr-tile-6); --pr-tilt: 1.25deg; --pr-i: 6; }
.pr-tile:nth-child(8n+8) { --pr-tile-fill: var(--pr-tile-7); --pr-tilt: -1.25deg; --pr-i: 7; }
.pr-tile.pr-wiggle { animation: pr-wiggle var(--pr-wiggle-period) ease-in-out infinite alternate; animation-delay: calc(var(--pr-i, 0) * var(--pr-wiggle-phase)); }
@keyframes pr-wiggle { from { transform: rotate(calc(var(--pr-tilt, 0deg) - var(--pr-wiggle-amp))); } to { transform: rotate(calc(var(--pr-tilt, 0deg) + var(--pr-wiggle-amp))); } }
.pr-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: calc(var(--pr-space-l) + var(--pr-control-pad-y)) calc(var(--pr-space-xxl) + var(--pr-control-pad-x));
  font: var(--pr-label-weight) var(--pr-label-size)/var(--pr-label-line) var(--pr-font); letter-spacing: var(--pr-label-tracking);
  background: var(--pr-accent-fill); color: var(--pr-on-accent); border: var(--pr-stroke-button) solid var(--pr-accent); border-radius: var(--pr-radius-button);
  box-shadow: var(--pr-shadow-large) var(--pr-accent-shadow); cursor: pointer; text-decoration: none;
  transition: transform var(--pr-dur-fast) var(--pr-ease-snappy), box-shadow var(--pr-dur-fast) var(--pr-ease-snappy); }
.pr-button:active { transform: scale(var(--pr-press-scale-x), var(--pr-press-scale-y)); box-shadow: var(--pr-shadow-pressed) var(--pr-accent-shadow); }
.pr-button:focus-visible, .pr-tile:focus-visible { outline: 3px solid var(--pr-text-primary); outline-offset: 4px; }
.pr-chip { display: inline-flex; gap: var(--pr-space-s); padding: calc(var(--pr-space-s) + var(--pr-control-pad-y)) calc(var(--pr-space-m) + var(--pr-control-pad-x));
  background: var(--pr-chip); color: var(--pr-on-chip); border-radius: var(--pr-radius-chip); box-shadow: var(--pr-shadow-medium) var(--pr-chip-shadow);
  font: var(--pr-caption-weight) var(--pr-caption-size)/var(--pr-chip-line) var(--pr-font); transform: rotate(-1.5deg); }
.pr-badge { display: inline-block; padding: 2px var(--pr-space-s); border: var(--pr-stroke-chip) solid #1a0b2e; border-radius: var(--pr-radius-badge);
  font: 800 0.8125rem/1.2 var(--pr-font-latin); box-shadow: var(--pr-shadow-small) #1a0b2e; transform: rotate(4.0deg); }
.pr-badge[data-age="family"] { background: var(--pr-badge-family-fill); color: var(--pr-badge-family-text); }
.pr-badge[data-age="teen"] { background: var(--pr-badge-teen-fill); color: var(--pr-badge-teen-text); }
.pr-badge[data-age="adult"] { background: var(--pr-badge-adult-fill); color: var(--pr-badge-adult-text); }

@media (prefers-reduced-motion: reduce) {
  .pr-tile.pr-wiggle { animation: none; }
  .pr-button, .pr-tile { transition: none; }
  .pr-button:active { transform: none; }
}