/* =====================================================================
   Playbay design tokens — Aqua Gloss
   The ONLY file allowed to contain raw colour values, font names,
   pixel sizes for type, radii, shadows, durations and z-indexes.
   Everything else references these custom properties.
   Spec: docs/design/aqua-gloss/STYLEGUIDE.md
   ===================================================================== */
/* Self-hosted fonts (SIL OFL 1.1: fonts/OFL-nunito.txt, fonts/OFL-cardo.txt, fonts/OFL.txt for Saira).
   The portal CSP allows only same-origin fonts. Chinese uses the system's CJK font: no multi-megabyte web font.
   Nunito: every UI and body word. Cardo: display headings only (19 px and up). Saira: the logo only. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/cardo-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/cardo-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/cardo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cardo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/cardo-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Saira"; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap;
  src: url("fonts/saira-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira"; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap;
  src: url("fonts/saira-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DejaVu Sans (Bitstream Vera licence, fonts/LICENSE-dejavu.txt): the front page's font where Verdana is
   missing (Android, Linux, ChromeOS, headsets). A copy already on the device is used first. */
@font-face {
  font-family: "DejaVu Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("DejaVu Sans"), local("DejaVuSans"), url("fonts/dejavu-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---------- Colour primitives (do not use directly in components) ---------- */
  /* Ink: navy text and lines */
  --pb-ink-900: #0B2A44;
  --pb-ink-800: #1D3D57;
  --pb-ink-700: #3F6079;
  --pb-ink-600: #56718A;
  --pb-ink-500: #6E8BA3;
  /* Sky: the page, panels and soft fills */
  --pb-sky-0: #FFFFFF;
  --pb-sky-50: #F2FAFF;
  --pb-sky-100: #E3F3FD;
  --pb-sky-200: #CDEAFB;
  --pb-sky-300: #A8DCFA;
  --pb-sky-400: #72C3F2;
  --pb-sky-page: #D6F0FF;
  /* Aqua: the accent */
  --pb-aqua-400: #16A5EA;
  --pb-aqua-600: #0B6CC0;
  --pb-aqua-700: #075AA0;
  /* Chrome: silver controls */
  --pb-chrome-1: #FFFFFF;
  --pb-chrome-2: #F1F6FB;
  --pb-chrome-3: #DFE9F2;
  --pb-chrome-4: #EEF4F9;
  /* Signal colours */
  --pb-green-400: #2FD25A;   /* live dot / icon only */
  --pb-green-700: #15803D;   /* live text: 5.0:1 on white */
  --pb-green-50: #E6FBEC;
  --pb-pink-400: #FF5D9E;    /* like heart only */
  --pb-pink-700: #C2185B;
  --pb-red-700: #B42318;     /* error text: 6.6:1 on white */
  --pb-red-600: #C62828;     /* destructive fill: white 5.6:1 */
  --pb-red-50: #FDECEC;
  --pb-amber-400: #FFB224;
  --pb-amber-800: #8A5300;   /* warning text: 5.8:1 on amber-50 */
  --pb-amber-50: #FFF4DC;
  --pb-blue-50: #E8F3FD;
  /* Brand (Harbor Night primitives stay: the favicon and link-preview renderer read them) */
  --pb-night-950: #0A1520;
  --pb-night-900: #0E1B2A;
  --pb-night-100: #E9F1F8;
  --pb-lantern-500: #FFC940;
  --pb-brand-muted: #4A5D72;
  --pb-white: #FFFFFF;
  --pb-media: #0D2B45;       /* behind game pictures and the game frame */

  /* ---------- Semantic colour roles (components use these) ---------- */
  --pb-bg: var(--pb-sky-page);             /* page base under the sky */
  --pb-bg-sunken: var(--pb-sky-50);        /* input wells, quiet fills */
  --pb-surface: #F7FBFE;                   /* solid panel colour (glass fallback, rings) */
  --pb-surface-raised: var(--pb-white);    /* cards inside panels, selected tiles */
  --pb-surface-hover: var(--pb-blue-50);   /* row / item hover */
  --pb-surface-selected: var(--pb-sky-100);
  --pb-border: rgb(70 120 160 / 0.18);     /* hairlines inside panels */
  --pb-border-strong: rgb(70 120 160 / 0.36);
  --pb-border-control: var(--pb-ink-500);  /* form control edges: 3.6:1 on white */
  --pb-border-glass: rgb(255 255 255 / 0.95); /* the bright rim of glass */

  --pb-text: var(--pb-ink-900);            /* 14.7:1 on white, 12.1:1 on page */
  --pb-text-secondary: var(--pb-ink-800);  /* body copy: 11.3:1 */
  --pb-text-muted: var(--pb-ink-700);      /* meta: 6.6:1 on white, 5.6:1 on page */
  --pb-text-subtle: var(--pb-ink-600);     /* hints: 5.1:1 on white — never on sky-300 or darker */
  --pb-text-on-media: var(--pb-white);

  --pb-accent: var(--pb-aqua-600);         /* links, selection, focus: 5.3:1 on white */
  --pb-accent-hover: var(--pb-aqua-700);
  --pb-accent-soft: var(--pb-sky-100);
  --pb-accent-bright: var(--pb-aqua-400);  /* icons and decoration only, never text */
  --pb-on-accent: var(--pb-white);

  --pb-live: var(--pb-green-700);          /* playing now, online, success (text) */
  --pb-live-glow: var(--pb-green-400);     /* live dot / icon */
  --pb-live-soft: var(--pb-green-50);
  --pb-like: var(--pb-pink-400);           /* heart icon */
  --pb-like-text: var(--pb-pink-700);
  --pb-danger: var(--pb-red-700);          /* error text, destructive outline */
  --pb-danger-fill: var(--pb-red-600);
  --pb-danger-soft: var(--pb-red-50);
  --pb-warning: var(--pb-amber-800);       /* pending, expiring, caution (text) */
  --pb-warning-glow: var(--pb-amber-400);
  --pb-warning-soft: var(--pb-amber-50);
  --pb-info: var(--pb-aqua-600);
  --pb-info-soft: var(--pb-blue-50);

  --pb-on-danger: var(--pb-white);
  --pb-on-identity: var(--pb-white);
  --pb-media-bg: var(--pb-media);
  --pb-media-chip: rgb(11 42 68 / 0.80);   /* labels laid over game pictures (white text) */
  --pb-focus: var(--pb-aqua-600);
  --pb-scrim: rgb(8 40 70 / 0.36);
  --pb-scrim-soft: rgb(16 82 140 / 0.12);  /* behind the categories panel */
  --pb-tip-1: #24527A;                     /* tooltip */
  --pb-tip-2: #0E3354;

  /* Logo (owner rule: the original mark; on light grounds the foam quarters are navy) */
  --pb-logo-sun: var(--pb-lantern-500);
  --pb-logo-ink: var(--pb-night-900);
  --pb-logo-muted: var(--pb-brand-muted);

  /* Player identity colours (avatars without a character picture). White text >= 4.5:1. */
  --pb-id-1: #1A7F53; --pb-id-2: #6A4FE0; --pb-id-3: #C4532B; --pb-id-4: #C2336F;
  --pb-id-5: #2F6FD6; --pb-id-6: #8A6A12; --pb-id-7: #4F5D6E; --pb-id-8: #0F7C86;

  /* Category orb colours (white icon >= 3:1). One per taxonomy slug; underscores become hyphens. */
  --pb-cat-action: #1785D3; --pb-cat-adventure: #12A574; --pb-cat-obby: #D36F17; --pb-cat-rpg: #8517D3;
  --pb-cat-simulation: #13A1AE; --pb-cat-tycoon: #AE8A13; --pb-cat-sandbox: #D37C17; --pb-cat-survival: #D34317;
  --pb-cat-horror: #4617D3; --pb-cat-shooter: #D31717; --pb-cat-fighting: #D35017; --pb-cat-racing: #1750D3;
  --pb-cat-sports: #12A543; --pb-cat-strategy: #C58516; --pb-cat-tower-defense: #C21AC2; --pb-cat-puzzle: #B417D3;
  --pb-cat-party: #D31785; --pb-cat-social: #159FC1; --pb-cat-board: #12A588; --pb-cat-rhythm: #D317B4;
  --pb-cat-arcade: #A59212; --pb-cat-educational: #43A512; --pb-cat-other: #1775D3;
  /* Semantic orbs (icons in headings, facts, notices) */
  --pb-orb-aqua: #1798D3; --pb-orb-live: #12A543; --pb-orb-pink: #D31775; --pb-orb-gold: #B38914;
  --pb-orb-violet: #6617D3; --pb-orb-teal: #12A195; --pb-orb-slate: #1775D3; --pb-orb-red: #C62828;
  --pb-discord: #5865F2; --pb-discord-hover: #4752C4; /* Discord's own blurple, for its button only */

  /* ---------- Gloss: gel buttons (white label >= 4.8:1 below the highlight) ---------- */
  --pb-gel-1: #1F84D6; --pb-gel-2: #0B6CC0; --pb-gel-3: #095EAE; --pb-gel-4: #0B6AC0;
  --pb-gel-glow: #5FD4FF; --pb-gel-edge: #08559C; --pb-gel-shadow: rgb(10 104 181 / 0.50);
  --pb-go-1: #2C9838; --pb-go-2: #187F2F; --pb-go-3: #147028; --pb-go-4: #187C2E;
  --pb-go-glow: #9BF27A; --pb-go-edge: #10621F; --pb-go-shadow: rgb(25 120 40 / 0.50);
  --pb-red-1: #E04B45; --pb-red-2: #C62828; --pb-red-3: #B21F1F; --pb-red-4: #BE2626;
  --pb-red-glow: #FFA39E; --pb-red-edge: #8F1515; --pb-red-shadow: rgb(180 30 30 / 0.45);
  --pb-gel-text-shadow: 0 1px 1px rgb(0 30 70 / 0.35);
  --pb-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.40), rgb(255 255 255 / 0.04)); /* the highlight: top 42% only */
  --pb-gloss-soft: linear-gradient(180deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.10)); /* on light chrome and orbs */
  --pb-shine: linear-gradient(105deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / 0.36) 48%, rgb(255 255 255 / 0) 60%);
  --pb-media-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0.05) 42%, rgb(255 255 255 / 0) 43%);
  --pb-media-rim: inset 0 0 0 1px rgb(255 255 255 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.55);

  /* ---------- Glass ---------- */
  --pb-glass: linear-gradient(180deg, rgb(255 255 255 / 0.88) 0%, rgb(255 255 255 / 0.66) 100%);
  --pb-glass-strong: linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(242 250 255 / 0.94) 100%);
  --pb-glass-solid: linear-gradient(180deg, #FFFFFF 0%, #F2F9FE 100%); /* where backdrop-filter is missing, and on cards */
  --pb-glass-blur: blur(18px) saturate(1.5);
  --pb-glass-well: rgb(222 238 250 / 0.6);  /* recessed area inside a panel */
  --pb-chrome: linear-gradient(180deg, var(--pb-chrome-1) 0%, var(--pb-chrome-2) 48%, var(--pb-chrome-3) 52%, var(--pb-chrome-4) 100%);
  --pb-chrome-hover: linear-gradient(180deg, var(--pb-chrome-1) 0%, var(--pb-chrome-1) 48%, var(--pb-chrome-4) 52%, var(--pb-chrome-1) 100%);
  --pb-chip-fill: linear-gradient(180deg, #FFFFFF, var(--pb-sky-50));
  --pb-tag-fill: linear-gradient(180deg, var(--pb-sky-50) 0%, var(--pb-sky-100) 50%, var(--pb-sky-200) 51%, var(--pb-sky-100) 100%);
  --pb-selected-fill: linear-gradient(180deg, var(--pb-sky-100), var(--pb-sky-200));
  --pb-live-fill: linear-gradient(180deg, #EAFFF0, #D3F8DE);
  --pb-skeleton: linear-gradient(90deg, var(--pb-sky-100) 0%, var(--pb-sky-50) 50%, var(--pb-sky-100) 100%);
  /* The sky behind every page: soft light, no pattern. */
  --pb-sky:
    radial-gradient(1100px 520px at 88% -8%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 62%),
    radial-gradient(900px 600px at -6% 18%, rgb(110 214 255 / 0.55), rgb(110 214 255 / 0) 60%),
    radial-gradient(1000px 640px at 70% 112%, rgb(148 236 186 / 0.50), rgb(148 236 186 / 0) 60%),
    radial-gradient(90px 90px at 6% 22%, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 70%),
    radial-gradient(120px 120px at 74% 62%, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #72C3F2 0%, #A8DCFA 22%, #D6F0FF 52%, #EEF9FF 100%);

  /* ---------- Typography ---------- */
  --pb-font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --pb-font-display: "Cardo", "Iowan Old Style", Georgia, serif;
  --pb-font-logo: "Saira", system-ui, sans-serif;
  --pb-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Nunito", system-ui, sans-serif;
  --pb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* build logs and codes only */
  --pb-stretch-wide: 122%;    /* wordmark only */

  --pb-text-2xs: 11px;  /* count badges only */
  --pb-text-xs: 12px;   /* tab bar, tile names, tiny chips on media */
  --pb-text-sm: 13px;   /* meta, captions, help text */
  --pb-text-md: 14px;   /* secondary UI, small buttons, chips */
  --pb-text-base: 15px; /* UI: buttons, inputs, nav */
  --pb-text-body: 16px; /* reading text */
  --pb-text-lg: 17px;   /* lead, large buttons */
  --pb-text-xl: 21px;   /* card / row titles (display) */
  --pb-text-2xl: 25px;  /* section and panel titles (display) */
  --pb-text-3xl: 32px;  /* page titles on phone (display) */
  --pb-text-4xl: 44px;  /* page titles (display) */
  --pb-text-5xl: 56px;  /* hero numbers */
  --pb-text-hero: clamp(32px, 4.1vw, 64px); /* featured game title */
  --pb-logo-md: 25.8px; /* wordmark in header */
  --pb-logo-by: 12.3px;
  --pb-logo-lg: 40px;   /* wordmark on auth / styleguide */

  --pb-weight-regular: 500; /* body copy */
  --pb-weight-medium: 700;  /* labels, links, meta emphasis */
  --pb-weight-bold: 800;    /* buttons, nav, titles in UI */
  --pb-weight-black: 900;   /* numbers in chips and stats */
  --pb-weight-display: 700; /* Cardo */

  --pb-leading-tight: 1.05;
  --pb-leading-snug: 1.2;
  --pb-leading-body: 1.55;
  --pb-tracking-display: -0.012em;

  /* ---------- Spacing (4 px base) ---------- */
  --pb-space-1: 2px;  --pb-space-2: 4px;  --pb-space-3: 6px;  --pb-space-4: 8px;
  --pb-space-5: 10px; --pb-space-6: 12px; --pb-space-7: 16px; --pb-space-8: 20px;
  --pb-space-9: 24px; --pb-space-10: 32px; --pb-space-11: 40px; --pb-space-12: 56px;

  /* ---------- Shape ---------- */
  --pb-radius-sm: 8px;    /* badges, kbd, small thumbnails, tooltips' corners */
  --pb-radius: 14px;      /* inputs, rows, list items, small panels, tiles */
  --pb-radius-media: 16px;/* game pictures inside cards */
  --pb-radius-lg: 24px;   /* panels, cards, dialogs */
  --pb-radius-xl: 30px;   /* categories panel, sheets */
  --pb-radius-pill: 999px;/* buttons, chips, tags, toggles, search, header bar */
  --pb-border-width: 1px;
  --pb-focus-ring: 3px;

  /* ---------- Elevation ---------- */
  --pb-shadow-panel: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 0 rgb(70 120 160 / 0.14), 0 10px 30px -10px rgb(16 82 140 / 0.28), 0 2px 6px rgb(16 82 140 / 0.08);
  --pb-shadow-hover: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgb(70 120 160 / 0.14), 0 22px 44px -14px rgb(16 82 140 / 0.42), 0 4px 10px rgb(16 82 140 / 0.10);
  --pb-shadow-float: inset 0 1px 0 #FFFFFF, 0 30px 70px -20px rgb(16 82 140 / 0.50), 0 0 0 1px rgb(70 120 160 / 0.14);
  --pb-shadow-control: inset 0 1px 0 #FFFFFF, 0 3px 8px -3px rgb(16 82 140 / 0.30);
  --pb-shadow-control-hover: inset 0 1px 0 #FFFFFF, 0 6px 14px -4px rgb(16 82 140 / 0.35);
  --pb-shadow-gel: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 6px 14px -4px var(--pb-gel-shadow), 0 1px 2px rgb(0 50 100 / 0.20);
  --pb-shadow-go: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 6px 16px -4px var(--pb-go-shadow), 0 1px 2px rgb(10 70 20 / 0.25);
  --pb-shadow-red: inset 0 1px 0 rgb(255 255 255 / 0.50), 0 6px 14px -4px var(--pb-red-shadow), 0 1px 2px rgb(90 10 10 / 0.25);
  --pb-shadow-well: inset 0 2px 4px rgb(16 82 140 / 0.12);
  --pb-shadow-chip: inset 0 1px 0 #FFFFFF;
  --pb-shadow-orb: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 3px 8px -3px rgb(10 40 80 / 0.45);
  --pb-shadow-tip: 0 4px 10px -2px rgb(0 30 60 / 0.40);
  --pb-shadow-icon: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
  --pb-halo: 0 0 0 4px rgb(11 108 192 / 0.18); /* soft selection halo around controls */
  --pb-halo-go: 0 0 0 4px rgb(25 120 40 / 0.20);

  /* ---------- Sizing ---------- */
  --pb-control-sm: 36px;
  --pb-control-md: 44px;  /* minimum touch target */
  --pb-control-lg: 56px;
  --pb-avatar-xs: 24px; --pb-avatar-sm: 32px; --pb-avatar-md: 40px; --pb-avatar-lg: 64px; --pb-avatar-xl: 112px;
  --pb-icon-sm: 15px; --pb-icon-md: 18px; --pb-icon-lg: 24px; --pb-icon-xl: 32px;
  --pb-orb-sm: 24px; --pb-orb-md: 30px; --pb-orb-lg: 36px; --pb-orb-xl: 72px;
  --pb-play-orb: 58px;    /* the Play button on a game card */
  --pb-header-bar: 66px;  /* the glass header pill */
  --pb-header-h: 90px;    /* header pill + its top and bottom room */
  --pb-container: 2400px; /* listings use the whole screen; this only stops 4K lines from running away */
  --pb-gutter: clamp(12px, 2.2vw, 32px);
  --pb-card-min: 290px;   /* game grid: auto-fill columns of at least this width */
  --pb-aside-w: clamp(340px, 28vw, 420px);
  --pb-readable: 72ch;
  --pb-catpanel-w: 620px;
  --pb-game-corner-w: 150px; /* the game's own top-right corner stays free in fullscreen */
  --pb-game-corner-h: 52px;

  /* ---------- Motion ---------- */
  --pb-dur-fast: 120ms;
  --pb-dur: 180ms;
  --pb-dur-slow: 260ms;
  --pb-dur-shine: 800ms;
  --pb-ease: cubic-bezier(.2, .7, .2, 1);
  --pb-ease-pop: cubic-bezier(.2, .8, .3, 1.15); /* panels opening, cards lifting: a hint of bounce */

  /* ---------- Layers ---------- */
  --pb-z-header: 20;
  --pb-z-tabbar: 30;
  --pb-z-menu: 40;
  --pb-z-shell: 50;
  --pb-z-dialog: 60;
  --pb-z-toast: 70;
}

/* Breakpoints (custom properties cannot be used in media queries; these are the only three):
   phone   < 900px
   tablet  900–1259px
   desktop >= 1260px */

@media (prefers-reduced-motion: reduce) {
  :root { --pb-dur-fast: 0ms; --pb-dur: 0ms; --pb-dur-slow: 0ms; --pb-dur-shine: 0ms; }
}

/* Chinese: the system CJK sans for every word, including headings (Cardo has no CJK). */
:lang(zh) { --pb-font: var(--pb-font-zh); --pb-font-display: var(--pb-font-zh); }

/* Jersey 15 (SIL OFL 1.1, fonts/OFL-jersey15.txt): the pixel front page's one font. */
@font-face {
  font-family: "Jersey 15"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jersey15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Pixel: the front page ----------
   Pixel art throughout: frames drawn in whole pixels (--pb-p-u), one pixel font, yellow on deep navy over a
   pixel bay. No gradients, blur or motion. */
[data-look="pixel"] {
  --pb-p-font: "Jersey 15", "DejaVu Sans", Verdana, sans-serif;
  --pb-p-scene: url("art/pixel-bay.png");  /* art/SOURCE.txt */
  --pb-p-sky: #2C6BD3;
  --pb-p-clouds: url("art/pixel-clouds.png");  /* drifts sideways, one art pixel at a time */
  --pb-p-scene-w: max(100vw, 100vh * 16 / 9);  /* the scene's drawn width (it covers the screen) */
  --pb-p-drift: 360s;
  --pb-p-water: url("art/pixel-water.png");  /* the wave flecks, sliding slowly the other way */
  --pb-p-sway: calc(var(--pb-p-scene-w) / 320 * 6);  /* the waves sway six art pixels each way */
  --pb-p-swell: 7s;
  --pb-p-frog: url("art/frog-sleep.png");  /* 8 frames of 48x40 art pixels */
  --pb-p-frog-scale: 2;
  --pb-p-frog-nap: 2.4s;
  --pb-p-frog-wake: url("art/frog-wake.png");  /* 14 frames: eyes open, "!", hop, look around, yawn, dozes off */
  --pb-p-frog-wake-time: 3.2s;
  --pb-p-social-size: 32px;  /* 16x16 pixel icons at 2x */
  --pb-p-social-discord: url("art/social-discord.svg");
  --pb-p-social-x: url("art/social-x.svg");
  --pb-p-social-telegram: url("art/social-telegram.svg");
  --pb-p-social-reddit: url("art/social-reddit.svg");
  --pb-p-stat-size: 18px;  /* 9x9 pixel icons at 2x */
  --pb-p-stat-plays: url("art/stat-plays.svg");
  --pb-p-stat-likes: url("art/stat-likes.svg");
  --pb-p-ico-size: 22px;  /* 11x11 menu icons at 2x */
  --pb-p-ico-lg: 48px;    /* 16x16 guide icons at 3x */
  --pb-p-ico-agent: url("art/ico-agent.svg");
  --pb-p-ico-bell: url("art/ico-bell.svg");
  --pb-p-ico-character: url("art/ico-character.svg");
  --pb-p-ico-games: url("art/ico-games.svg");
  --pb-p-ico-profile: url("art/ico-profile.svg");
  --pb-p-ico-report: url("art/ico-report.svg");
  --pb-p-ico-security: url("art/ico-security.svg");
  --pb-p-ico-signout: url("art/ico-signout.svg");
  --pb-p-ico-studio: url("art/ico-studio.svg");
  --pb-p-list-min: 440px;  /* list view: a column of rows per 440 px */
  --pb-p-art: calc(var(--pb-p-scene-w) / 320);  /* one art pixel of the scene on screen */
  --pb-p-axolotl: url("art/axolotl-surface.png");  /* 19 frames of 24x16 art pixels, the last one empty */
  --pb-p-axolotl-cycle: 30s;
  --pb-p-axolotl-times: 3;
  --pb-p-logo-mark: url("art/pixel-logo.svg");
  --pb-p-play-mark: url("art/pixel-play.svg");
  --pb-p-u: 3px;          /* one art pixel of every frame */

  --pb-p-ink: #0A1220;    /* outlines */
  --pb-p-panel: #16253D;
  --pb-p-panel-lit: #2A4266;
  --pb-p-panel-dark: #0D1829;
  --pb-p-well: #0F1C30;   /* inputs, picture backs */
  --pb-p-text: #F3F6FB;
  --pb-p-meta: #A8B9D1;
  --pb-p-title: #FFC940;
  --pb-p-link: #FFE08A;
  --pb-p-btn: #2A4266;
  --pb-p-btn-lit: #3F5D8A;
  --pb-p-btn-dark: #1A2B47;
  --pb-p-gold: #FFC940;
  --pb-p-gold-lit: #FFE58C;
  --pb-p-gold-dark: #C98A12;
  --pb-p-on-gold: #2A1A00;
  --pb-p-live: #9BF27A;
  --pb-p-input: #FFF8E6;
  --pb-p-on-input: #0A1220;
  --pb-p-focus: #FFFFFF;
  --pb-p-veil: rgb(5 10 20 / 0.25);  /* over the bay behind the game player's cards */

  /* Jersey 15 is crisp only on its pixel grid: 15, 20, 30 and 45 px. Sizes in between smear its strokes. */
  --pb-p-size-meta: 20px;
  --pb-p-size-small: 15px;
  --pb-p-size-price: 45px;  /* an item's price in a shop */
  --pb-p-size-body: 20px;
  --pb-p-size-title: 30px;
  --pb-p-size-feat: 30px;
  --pb-p-size-logo: 45px;
  --pb-p-size-input: 20px;
  --pb-p-leading: 1.35;
  --pb-p-bold: 400;       /* the font has one weight: hierarchy comes from size and colour */
  --pb-p-hit: 0px;        /* minimum height of anything pressable: none with a mouse */

  --pb-p-width: 1240px;
  --pb-p-gap: 24px;
  --pb-p-pad: 12px;
  --pb-p-pad-s: 6px;
  --pb-p-tile-min: 220px;
  --pb-p-list-pic: 160px;  /* picture width in the list view (phones: the smaller one) */
  --pb-p-list-pic-s: 128px;
  --pb-p-logo: 56px;     /* the pixel mark is 56 art pixels: one art pixel per screen pixel */

  /* Pixel frames: a dark outline with stepped corners, a lit top-left edge and a shaded bottom-right edge. */
  --pb-p-outline: 0 calc(-1 * var(--pb-p-u)) 0 0 var(--pb-p-ink), 0 var(--pb-p-u) 0 0 var(--pb-p-ink), calc(-1 * var(--pb-p-u)) 0 0 0 var(--pb-p-ink), var(--pb-p-u) 0 0 0 var(--pb-p-ink);
  --pb-p-frame: inset var(--pb-p-u) var(--pb-p-u) 0 0 var(--pb-p-panel-lit), inset calc(-1 * var(--pb-p-u)) calc(-1 * var(--pb-p-u)) 0 0 var(--pb-p-panel-dark), var(--pb-p-outline);
  --pb-p-btn-frame: inset var(--pb-p-u) var(--pb-p-u) 0 0 var(--pb-p-btn-lit), inset calc(-1 * var(--pb-p-u)) calc(-1 * var(--pb-p-u)) 0 0 var(--pb-p-btn-dark), var(--pb-p-outline);
  --pb-p-gold-frame: inset var(--pb-p-u) var(--pb-p-u) 0 0 var(--pb-p-gold-lit), inset calc(-1 * var(--pb-p-u)) calc(-1 * var(--pb-p-u)) 0 0 var(--pb-p-gold-dark), var(--pb-p-outline);
  --pb-p-pressed: inset var(--pb-p-u) var(--pb-p-u) 0 0 var(--pb-p-gold-dark), var(--pb-p-outline);
}
/* The shared components (buttons, fields, lists, dialogs) in the pixel look: their roles take pixel values, so
   every page built from them turns pixel without its own rules. Flat fills, square corners, pixel frames, one font. */
[data-look="pixel"] {
  --pb-bg: var(--pb-p-panel-dark);
  --pb-bg-sunken: var(--pb-p-well);
  --pb-surface: var(--pb-p-panel);
  --pb-surface-raised: var(--pb-p-panel);
  --pb-surface-hover: var(--pb-p-panel-lit);
  --pb-surface-selected: var(--pb-p-panel-lit);
  --pb-border: var(--pb-p-panel-dark);
  --pb-border-strong: var(--pb-p-ink);
  --pb-border-control: var(--pb-p-ink);
  --pb-border-glass: transparent;
  --pb-text: var(--pb-p-text);
  --pb-text-secondary: var(--pb-p-text);
  --pb-text-muted: var(--pb-p-meta);
  --pb-text-subtle: var(--pb-p-meta);
  --pb-accent: var(--pb-p-link);
  --pb-accent-hover: var(--pb-p-gold-lit);
  --pb-accent-soft: var(--pb-p-panel-lit);
  --pb-accent-bright: var(--pb-p-gold);
  --pb-on-accent: var(--pb-p-on-gold);
  --pb-live: var(--pb-p-live);
  --pb-live-glow: var(--pb-p-live);
  --pb-live-soft: #1D3B2A;
  --pb-like: #FF5A7A;
  --pb-like-text: #FF8FA6;
  --pb-danger: #FF8A80;
  --pb-danger-fill: #C62828;
  --pb-danger-soft: #3A1620;
  --pb-warning: var(--pb-p-gold);
  --pb-warning-glow: var(--pb-p-gold);
  --pb-warning-soft: #3A2E10;
  --pb-info: var(--pb-p-link);
  --pb-info-soft: var(--pb-p-panel-dark);
  --pb-media-chip: rgb(10 18 32 / 0.85);
  --pb-focus: var(--pb-p-focus);
  --pb-scrim: rgb(5 10 20 / 0.62);
  --pb-scrim-soft: rgb(5 10 20 / 0.4);
  --pb-tip-1: var(--pb-p-panel-dark);
  --pb-tip-2: var(--pb-p-panel-dark);
  --pb-logo-ink: var(--pb-p-text);

  /* Buttons: primary is gold, Play and danger keep green and red, all flat. */
  --pb-gel-1: var(--pb-p-gold); --pb-gel-2: var(--pb-p-gold); --pb-gel-3: var(--pb-p-gold); --pb-gel-4: var(--pb-p-gold);
  --pb-gel-glow: transparent; --pb-gel-edge: var(--pb-p-ink); --pb-gel-shadow: transparent;
  --pb-go-1: #2E9E3E; --pb-go-2: #2E9E3E; --pb-go-3: #2E9E3E; --pb-go-4: #2E9E3E;
  --pb-go-glow: transparent; --pb-go-edge: var(--pb-p-ink); --pb-go-shadow: transparent;
  --pb-red-1: #C62828; --pb-red-2: #C62828; --pb-red-3: #C62828; --pb-red-4: #C62828;
  --pb-red-glow: transparent; --pb-red-edge: var(--pb-p-ink); --pb-red-shadow: transparent;
  --pb-gel-text-shadow: none;
  --pb-gloss: none;
  --pb-gloss-soft: none;
  --pb-shine: none;
  --pb-media-gloss: none;
  --pb-media-rim: none;

  --pb-glass: linear-gradient(var(--pb-p-panel), var(--pb-p-panel));
  --pb-glass-strong: linear-gradient(var(--pb-p-panel), var(--pb-p-panel));
  --pb-glass-solid: linear-gradient(var(--pb-p-panel), var(--pb-p-panel));
  --pb-glass-blur: none;
  --pb-glass-well: var(--pb-p-well);
  --pb-chrome: linear-gradient(var(--pb-p-btn), var(--pb-p-btn));
  --pb-chrome-hover: linear-gradient(var(--pb-p-btn-lit), var(--pb-p-btn-lit));
  --pb-chip-fill: linear-gradient(var(--pb-p-panel-dark), var(--pb-p-panel-dark));
  --pb-tag-fill: linear-gradient(var(--pb-p-panel-dark), var(--pb-p-panel-dark));
  --pb-selected-fill: linear-gradient(var(--pb-p-panel-lit), var(--pb-p-panel-lit));
  --pb-live-fill: linear-gradient(#1D3B2A, #1D3B2A);
  --pb-skeleton: linear-gradient(90deg, var(--pb-p-panel-dark) 0%, var(--pb-p-panel-lit) 50%, var(--pb-p-panel-dark) 100%);
  --pb-sky: none;

  --pb-font: var(--pb-p-font);
  --pb-font-display: var(--pb-p-font);
  --pb-font-logo: var(--pb-p-font);
  --pb-text-2xs: 15px; --pb-text-xs: 15px; --pb-text-sm: 20px; --pb-text-md: 20px; --pb-text-base: 20px;
  --pb-text-body: 20px; --pb-text-lg: 20px; --pb-text-xl: 20px; --pb-text-2xl: 30px; --pb-text-3xl: 30px;
  --pb-text-4xl: 30px; --pb-text-5xl: 45px; --pb-text-hero: 45px;  /* the font's crisp sizes only */
  --pb-weight-regular: 400; --pb-weight-medium: 400; --pb-weight-bold: 400; --pb-weight-black: 400; --pb-weight-display: 400;
  --pb-leading-body: 1.35;
  --pb-tracking-display: 0;

  --pb-radius-sm: 0; --pb-radius: 0; --pb-radius-media: 0; --pb-radius-lg: 0; --pb-radius-xl: 0; --pb-radius-pill: 0;

  --pb-shadow-panel: var(--pb-p-frame);
  --pb-shadow-hover: var(--pb-p-frame);
  --pb-shadow-float: var(--pb-p-frame);
  --pb-shadow-control: var(--pb-p-btn-frame);
  --pb-shadow-control-hover: var(--pb-p-btn-frame);
  --pb-shadow-gel: var(--pb-p-gold-frame);
  --pb-shadow-go: inset var(--pb-p-u) var(--pb-p-u) 0 0 #6FD27E, inset calc(-1 * var(--pb-p-u)) calc(-1 * var(--pb-p-u)) 0 0 #1F6E2A, var(--pb-p-outline);
  --pb-shadow-red: inset var(--pb-p-u) var(--pb-p-u) 0 0 #E86A6A, inset calc(-1 * var(--pb-p-u)) calc(-1 * var(--pb-p-u)) 0 0 #8F1515, var(--pb-p-outline);
  --pb-shadow-well: inset 0 0 0 var(--pb-p-u) var(--pb-p-panel-dark);
  --pb-shadow-chip: none;
  --pb-shadow-orb: var(--pb-p-outline);
  --pb-shadow-tip: var(--pb-p-outline);
  --pb-shadow-icon: none;
  --pb-halo: var(--pb-p-outline);
  --pb-halo-go: var(--pb-p-outline);
}
/* Touch (phones, tablets): 44px targets, larger text, 16px inputs (smaller ones make iOS zoom in). */
@media (pointer: coarse) {
  [data-look="pixel"] { --pb-p-hit: 44px; }
}
/* Headsets (ui/app.js marks them): a laser pointer and reading at a distance. */
html.pb-xr-device [data-look="pixel"] { --pb-p-hit: 48px; --pb-p-size-title: 30px; --pb-p-size-feat: 45px; }