/* Copied from brand/guide/tokens.css (the source of truth: edit brand/guide/_tools/tokens.mjs, rebuild, then copy again). */
/* Blipyard design tokens v1.0 (generated by brand/guide/_tools/build-guide.mjs from tokens.mjs; edit there).
   Theme: Gummy · Midnight · Glass · Refraction. Dark is the default.
   Light: <html data-theme="light">. Follow the OS: <html data-theme="auto">.
   Fonts: /vendor/fonts/fonts.css (Righteous + Rubik, self-hosted)
   Righteous and Rubik are licensed under the SIL Open Font License 1.1. */

:root {
  color-scheme: dark;
  --by-font-display: 'Righteous', 'Rubik', system-ui, sans-serif;
  --by-font-ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --by-navy: #0b0d1a;
  --by-navy900: #07080f;
  --by-navy800: #11142b;
  --by-navy700: #151935;
  --by-navy600: #20264a;
  --by-navy500: #2c335f;
  --by-navy400: #3d4680;
  --by-gold: #ffc94d;
  --by-gold-deep: #f5a524;
  --by-gold-ink: #2a1c00;
  --by-gold-text: #8a5a00;
  --by-gold-hi: #ffe08a;
  --by-mint: #5ff2c0;
  --by-mint-deep: #22c48e;
  --by-mint-ink: #03261b;
  --by-mint-text: #0a7f57;
  --by-mint-hi: #a8fbe0;
  --by-blue: #6cc7ff;
  --by-blue-text: #1859c9;
  --by-violet: #b69cff;
  --by-violet-text: #6440d6;
  --by-pink: #ff8fd1;
  --by-danger: #ff6b7d;
  --by-danger-text: #c4223b;
  --by-warning: #ffb020;
  --by-warning-text: #9a5800;
  --by-white: #ffffff;
  --by-cream: #f7f5ef;
  --by-ink: #f3f5ff;
  --by-muted: #a9b0d0;
  --by-faint: #7c84ad;
  --by-muted-light: #535a78;
  --by-prism: linear-gradient(115deg, #5ff2c0 0%, #6cc7ff 28%, #b69cff 52%, #ff8fd1 74%, #ffc94d 100%);
  --by-prism-conic: conic-gradient(from 200deg, #5ff2c0, #6cc7ff, #b69cff, #ff8fd1, #ffc94d, #5ff2c0);
  --by-gummy-mint: linear-gradient(180deg, #a8fbe0 0%, #5ff2c0 38%, #2fd3a8 100%);
  --by-gummy-gold: linear-gradient(180deg, #ffe7a3 0%, #ffc94d 42%, #f5a524 100%);
  --by-gummy-violet: linear-gradient(180deg, #ddd0ff 0%, #b69cff 42%, #8d6cf0 100%);
  --by-gummy-coral: linear-gradient(180deg, #ffc0c8 0%, #ff6b7d 45%, #e8475c 100%);
  --by-gummy-glass: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 52%, rgba(255,255,255,.06) 100%);
  --by-aurora: radial-gradient(60% 50% at 12% -5%, var(--by-aurora-1), transparent 70%), radial-gradient(55% 45% at 92% 4%, var(--by-aurora-2), transparent 70%), radial-gradient(70% 55% at 55% 112%, var(--by-aurora-3), transparent 70%);
  --by-sheen: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.20) 44%, rgba(108,199,255,.16) 49%, rgba(255,143,209,.14) 54%, rgba(255,201,77,.10) 58%, transparent 70%);
  --by-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Ccircle cx='0.0' cy='126.3' r='0.74' fill='%23dfe6ff' fill-opacity='0.44'/%3E%3Ccircle cx='191.5' cy='210.2' r='0.63' fill='%23dfe6ff' fill-opacity='0.27'/%3E%3Ccircle cx='12.1' cy='257.3' r='0.64' fill='%23dfe6ff' fill-opacity='0.53'/%3E%3Ccircle cx='157.7' cy='33.2' r='0.64' fill='%23dfe6ff' fill-opacity='0.54'/%3E%3Ccircle cx='4.3' cy='7.4' r='0.64' fill='%23dfe6ff' fill-opacity='0.35'/%3E%3Ccircle cx='80.8' cy='19.3' r='1.19' fill='%23dfe6ff' fill-opacity='0.65'/%3E%3Ccircle cx='172.3' cy='185.9' r='0.75' fill='%23dfe6ff' fill-opacity='0.73'/%3E%3Ccircle cx='79.4' cy='33.1' r='1.16' fill='%23dfe6ff' fill-opacity='0.39'/%3E%3Ccircle cx='252.0' cy='45.6' r='0.69' fill='%23dfe6ff' fill-opacity='0.74'/%3E%3Ccircle cx='287.3' cy='86.2' r='1.38' fill='%23dfe6ff' fill-opacity='0.30'/%3E%3Ccircle cx='237.2' cy='303.2' r='0.65' fill='%23dfe6ff' fill-opacity='0.38'/%3E%3Ccircle cx='305.5' cy='69.8' r='1.31' fill='%23dfe6ff' fill-opacity='0.58'/%3E%3Ccircle cx='261.8' cy='99.0' r='0.77' fill='%23dfe6ff' fill-opacity='0.47'/%3E%3Ccircle cx='228.3' cy='263.9' r='0.57' fill='%23dfe6ff' fill-opacity='0.50'/%3E%3Ccircle cx='147.1' cy='221.8' r='1.15' fill='%23dfe6ff' fill-opacity='0.34'/%3E%3Ccircle cx='228.5' cy='164.3' r='0.99' fill='%23dfe6ff' fill-opacity='0.73'/%3E%3Ccircle cx='307.2' cy='154.2' r='1.22' fill='%23dfe6ff' fill-opacity='0.39'/%3E%3Ccircle cx='269.9' cy='70.8' r='0.95' fill='%23dfe6ff' fill-opacity='0.33'/%3E%3Ccircle cx='266.0' cy='237.3' r='1.03' fill='%23dfe6ff' fill-opacity='0.45'/%3E%3Ccircle cx='263.3' cy='48.1' r='0.76' fill='%23dfe6ff' fill-opacity='0.41'/%3E%3Ccircle cx='154.7' cy='120.4' r='0.54' fill='%23dfe6ff' fill-opacity='0.28'/%3E%3Ccircle cx='193.5' cy='284.4' r='0.69' fill='%23dfe6ff' fill-opacity='0.34'/%3E%3Ccircle cx='319.5' cy='213.0' r='1.13' fill='%23dfe6ff' fill-opacity='0.71'/%3E%3Ccircle cx='17.0' cy='172.7' r='1.20' fill='%23dfe6ff' fill-opacity='0.52'/%3E%3Ccircle cx='75.6' cy='167.9' r='1.23' fill='%23dfe6ff' fill-opacity='0.37'/%3E%3Ccircle cx='195.8' cy='129.2' r='1.28' fill='%23dfe6ff' fill-opacity='0.52'/%3E%3C/svg%3E");
  --by-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --by-s-0: 0;
  --by-s-1: 4px;
  --by-s-2: 8px;
  --by-s-3: 12px;
  --by-s-4: 16px;
  --by-s-5: 20px;
  --by-s-6: 24px;
  --by-s-8: 32px;
  --by-s-10: 40px;
  --by-s-12: 48px;
  --by-s-16: 64px;
  --by-s-20: 80px;
  --by-s-24: 96px;
  --by-r-xs: 8px;
  --by-r-sm: 12px;
  --by-r-md: 16px;
  --by-r-lg: 22px;
  --by-r-xl: 28px;
  --by-r-2xl: 36px;
  --by-r-pill: 999px;
  --by-r-blob: 42% 42% 38% 38% / 52% 52% 40% 40%;
  --by-fs-display-xl: clamp(2.5rem, 1.6713rem + 3.5359vw, 4.5rem);
  --by-lh-display-xl: 1.02;
  --by-fw-display-xl: 400;
  --by-fs-display: clamp(2rem, 1.4820rem + 2.2099vw, 3.25rem);
  --by-lh-display: 1.05;
  --by-fw-display: 400;
  --by-fs-h1: clamp(1.75rem, 1.4392rem + 1.3260vw, 2.5rem);
  --by-lh-h1: 1.1;
  --by-fw-h1: 400;
  --by-fs-h2: clamp(1.375rem, 1.1678rem + 0.8840vw, 1.875rem);
  --by-lh-h2: 1.15;
  --by-fw-h2: 700;
  --by-fs-h3: clamp(1.125rem, 1.0214rem + 0.4420vw, 1.375rem);
  --by-lh-h3: 1.25;
  --by-fw-h3: 700;
  --by-fs-body-lg: clamp(1.0625rem, 1.0366rem + 0.1105vw, 1.125rem);
  --by-lh-body-lg: 1.5;
  --by-fw-body-lg: 400;
  --by-fs-body: 1rem;
  --by-lh-body: 1.5;
  --by-fw-body: 400;
  --by-fs-small: 0.875rem;
  --by-lh-small: 1.45;
  --by-fw-small: 500;
  --by-fs-micro: 0.75rem;
  --by-lh-micro: 1.35;
  --by-fw-micro: 600;
  --by-fs-label: 0.75rem;
  --by-lh-label: 1.2;
  --by-fw-label: 700;
  --by-dur-instant: 90ms;
  --by-dur-fast: 160ms;
  --by-dur-base: 240ms;
  --by-dur-slow: 360ms;
  --by-dur-gummy: 520ms;
  --by-dur-page: 420ms;
  --by-dur-sheet: 460ms;
  --by-ease-out: cubic-bezier(.22,1,.36,1);
  --by-ease-in: cubic-bezier(.55,0,1,.45);
  --by-ease-in-out: cubic-bezier(.65,0,.35,1);
  --by-ease-gummy: cubic-bezier(.34,1.56,.64,1);
  --by-ease-squish: cubic-bezier(.3,.7,.4,1.5);
  --by-ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.6%, 1.067, 1.089 25.8%, 1.085 28.6%, 1.059 33.4%, .993 44.8%, .983 49.9%, .996 62.7%, 1.002 75%, 1);
  --by-bp-sm: 480px;
  --by-bp-md: 768px;
  --by-bp-lg: 1024px;
  --by-bp-xl: 1280px;
  --by-bp-2xl: 1536px;
  --by-max-w: 1240px;
  --by-gutter: 16px;
  --by-gutter-md: 24px;
  --by-gutter-lg: 32px;
  --by-tap: 44px;
  --by-tap-lg: 52px;
  --by-header-h: 64px;
  --by-tabbar-h: 64px;
  --by-safe-top: env(safe-area-inset-top, 0px);
  --by-safe-bottom: env(safe-area-inset-bottom, 0px);
  --by-safe-left: env(safe-area-inset-left, 0px);
  --by-safe-right: env(safe-area-inset-right, 0px);
  --by-blur-sm: 8px;
  --by-blur-md: 14px;
  --by-blur-lg: 20px;
  --by-blur-phone: 10px;
  --by-saturate: 160%;
  --by-z-base: 0;
  --by-z-raised: 10;
  --by-z-sticky: 100;
  --by-z-nav: 200;
  --by-z-overlay: 300;
  --by-z-sheet: 400;
  --by-z-modal: 500;
  --by-z-toast: 600;
  --by-z-tooltip: 700;
  --by-bg: #0b0d1a;
  --by-bg-deep: #07080f;
  --by-surface: #151935;
  --by-raised: #20264a;
  --by-line: rgba(169,176,208,.16);
  --by-line-strong: rgba(169,176,208,.28);
  --by-text: #f3f5ff;
  --by-text-muted: #a9b0d0;
  --by-text-faint: #7c84ad;
  --by-text-on-gold: #2a1c00;
  --by-text-on-mint: #03261b;
  --by-cta: #ffc94d;
  --by-cta-ink: #2a1c00;
  --by-cta-hover: #ffe08a;
  --by-cta-edge: #c98a12;
  --by-coin: #ffc94d;
  --by-coin-text: #ffc94d;
  --by-owned: #5ff2c0;
  --by-success: #5ff2c0;
  --by-success-text: #5ff2c0;
  --by-social: #b69cff;
  --by-social-text: #b69cff;
  --by-link: #6cc7ff;
  --by-info: #6cc7ff;
  --by-danger: #ff6b7d;
  --by-danger-text: #ff6b7d;
  --by-warning: #ffb020;
  --by-warning-text: #ffb020;
  --by-focus: #6cc7ff;
  --by-glass-bg: rgba(32,38,74,.52);
  --by-glass-bg-strong: rgba(21,25,53,.80);
  --by-glass-lite: linear-gradient(180deg, rgba(44,51,95,.62), rgba(21,25,53,.62));
  --by-glass-solid: #181c3b;
  --by-glass-border: rgba(255,255,255,.10);
  --by-glass-hi: rgba(255,255,255,.22);
  --by-glass-shade: rgba(0,0,0,.28);
  --by-glass-inner: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -18px 30px -18px rgba(95,242,192,.16);
  --by-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px -4px rgba(0,0,0,.45);
  --by-shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px -10px rgba(0,0,0,.6);
  --by-shadow-3: 0 4px 10px rgba(0,0,0,.35), 0 30px 60px -18px rgba(0,0,0,.75);
  --by-aurora-1: rgba(95,242,192,.16);
  --by-aurora-2: rgba(182,156,255,.20);
  --by-aurora-3: rgba(108,199,255,.10);
  --by-star: rgba(223,230,255,.55);
  --by-scrim: rgba(5,6,14,.62);
}
:root[data-theme="light"] {
  color-scheme: light;
  --by-bg: #f7f5ef;
  --by-bg-deep: #efece3;
  --by-surface: #ffffff;
  --by-raised: #f1efe8;
  --by-line: rgba(11,13,26,.10);
  --by-line-strong: rgba(11,13,26,.20);
  --by-text: #0b0d1a;
  --by-text-muted: #535a78;
  --by-text-faint: #767c98;
  --by-text-on-gold: #2a1c00;
  --by-text-on-mint: #03261b;
  --by-cta: #ffc94d;
  --by-cta-ink: #2a1c00;
  --by-cta-hover: #ffe08a;
  --by-cta-edge: #f5a524;
  --by-coin: #f5a524;
  --by-coin-text: #8a5a00;
  --by-owned: #22c48e;
  --by-success: #22c48e;
  --by-success-text: #0a7f57;
  --by-social: #8d6cf0;
  --by-social-text: #6440d6;
  --by-link: #1859c9;
  --by-info: #1859c9;
  --by-danger: #c4223b;
  --by-danger-text: #c4223b;
  --by-warning: #ffb020;
  --by-warning-text: #9a5800;
  --by-focus: #1859c9;
  --by-glass-bg: rgba(255,255,255,.62);
  --by-glass-bg-strong: rgba(255,255,255,.86);
  --by-glass-lite: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  --by-glass-solid: #ffffff;
  --by-glass-border: rgba(11,13,26,.08);
  --by-glass-hi: rgba(255,255,255,.95);
  --by-glass-shade: rgba(11,13,26,.08);
  --by-glass-inner: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -18px 30px -18px rgba(34,196,142,.12);
  --by-shadow-1: 0 1px 2px rgba(11,13,26,.08), 0 4px 12px -4px rgba(11,13,26,.12);
  --by-shadow-2: 0 2px 4px rgba(11,13,26,.06), 0 14px 32px -12px rgba(11,13,26,.22);
  --by-shadow-3: 0 4px 10px rgba(11,13,26,.08), 0 30px 60px -20px rgba(11,13,26,.32);
  --by-aurora-1: rgba(34,196,142,.16);
  --by-aurora-2: rgba(141,108,240,.14);
  --by-aurora-3: rgba(108,199,255,.16);
  --by-star: rgba(11,13,26,0);
  --by-scrim: rgba(11,13,26,.38);
}
/* force a scheme on a subtree (e.g. a light marketing band, or a dark mockup inside a light page) */
[data-scheme="dark"] {
  color-scheme: dark;
  --by-bg: #0b0d1a;
  --by-bg-deep: #07080f;
  --by-surface: #151935;
  --by-raised: #20264a;
  --by-line: rgba(169,176,208,.16);
  --by-line-strong: rgba(169,176,208,.28);
  --by-text: #f3f5ff;
  --by-text-muted: #a9b0d0;
  --by-text-faint: #7c84ad;
  --by-text-on-gold: #2a1c00;
  --by-text-on-mint: #03261b;
  --by-cta: #ffc94d;
  --by-cta-ink: #2a1c00;
  --by-cta-hover: #ffe08a;
  --by-cta-edge: #c98a12;
  --by-coin: #ffc94d;
  --by-coin-text: #ffc94d;
  --by-owned: #5ff2c0;
  --by-success: #5ff2c0;
  --by-success-text: #5ff2c0;
  --by-social: #b69cff;
  --by-social-text: #b69cff;
  --by-link: #6cc7ff;
  --by-info: #6cc7ff;
  --by-danger: #ff6b7d;
  --by-danger-text: #ff6b7d;
  --by-warning: #ffb020;
  --by-warning-text: #ffb020;
  --by-focus: #6cc7ff;
  --by-glass-bg: rgba(32,38,74,.52);
  --by-glass-bg-strong: rgba(21,25,53,.80);
  --by-glass-lite: linear-gradient(180deg, rgba(44,51,95,.62), rgba(21,25,53,.62));
  --by-glass-solid: #181c3b;
  --by-glass-border: rgba(255,255,255,.10);
  --by-glass-hi: rgba(255,255,255,.22);
  --by-glass-shade: rgba(0,0,0,.28);
  --by-glass-inner: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -18px 30px -18px rgba(95,242,192,.16);
  --by-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px -4px rgba(0,0,0,.45);
  --by-shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px -10px rgba(0,0,0,.6);
  --by-shadow-3: 0 4px 10px rgba(0,0,0,.35), 0 30px 60px -18px rgba(0,0,0,.75);
  --by-aurora-1: rgba(95,242,192,.16);
  --by-aurora-2: rgba(182,156,255,.20);
  --by-aurora-3: rgba(108,199,255,.10);
  --by-star: rgba(223,230,255,.55);
  --by-scrim: rgba(5,6,14,.62);
}
[data-scheme="light"] {
  color-scheme: light;
  --by-bg: #f7f5ef;
  --by-bg-deep: #efece3;
  --by-surface: #ffffff;
  --by-raised: #f1efe8;
  --by-line: rgba(11,13,26,.10);
  --by-line-strong: rgba(11,13,26,.20);
  --by-text: #0b0d1a;
  --by-text-muted: #535a78;
  --by-text-faint: #767c98;
  --by-text-on-gold: #2a1c00;
  --by-text-on-mint: #03261b;
  --by-cta: #ffc94d;
  --by-cta-ink: #2a1c00;
  --by-cta-hover: #ffe08a;
  --by-cta-edge: #f5a524;
  --by-coin: #f5a524;
  --by-coin-text: #8a5a00;
  --by-owned: #22c48e;
  --by-success: #22c48e;
  --by-success-text: #0a7f57;
  --by-social: #8d6cf0;
  --by-social-text: #6440d6;
  --by-link: #1859c9;
  --by-info: #1859c9;
  --by-danger: #c4223b;
  --by-danger-text: #c4223b;
  --by-warning: #ffb020;
  --by-warning-text: #9a5800;
  --by-focus: #1859c9;
  --by-glass-bg: rgba(255,255,255,.62);
  --by-glass-bg-strong: rgba(255,255,255,.86);
  --by-glass-lite: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
  --by-glass-solid: #ffffff;
  --by-glass-border: rgba(11,13,26,.08);
  --by-glass-hi: rgba(255,255,255,.95);
  --by-glass-shade: rgba(11,13,26,.08);
  --by-glass-inner: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -18px 30px -18px rgba(34,196,142,.12);
  --by-shadow-1: 0 1px 2px rgba(11,13,26,.08), 0 4px 12px -4px rgba(11,13,26,.12);
  --by-shadow-2: 0 2px 4px rgba(11,13,26,.06), 0 14px 32px -12px rgba(11,13,26,.22);
  --by-shadow-3: 0 4px 10px rgba(11,13,26,.08), 0 30px 60px -20px rgba(11,13,26,.32);
  --by-aurora-1: rgba(34,196,142,.16);
  --by-aurora-2: rgba(141,108,240,.14);
  --by-aurora-3: rgba(108,199,255,.16);
  --by-star: rgba(11,13,26,0);
  --by-scrim: rgba(11,13,26,.38);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --by-bg: #f7f5ef;
    --by-bg-deep: #efece3;
    --by-surface: #ffffff;
    --by-raised: #f1efe8;
    --by-line: rgba(11,13,26,.10);
    --by-line-strong: rgba(11,13,26,.20);
    --by-text: #0b0d1a;
    --by-text-muted: #535a78;
    --by-text-faint: #767c98;
    --by-text-on-gold: #2a1c00;
    --by-text-on-mint: #03261b;
    --by-cta: #ffc94d;
    --by-cta-ink: #2a1c00;
    --by-cta-hover: #ffe08a;
    --by-cta-edge: #f5a524;
    --by-coin: #f5a524;
    --by-coin-text: #8a5a00;
    --by-owned: #22c48e;
    --by-success: #22c48e;
    --by-success-text: #0a7f57;
    --by-social: #8d6cf0;
    --by-social-text: #6440d6;
    --by-link: #1859c9;
    --by-info: #1859c9;
    --by-danger: #c4223b;
    --by-danger-text: #c4223b;
    --by-warning: #ffb020;
    --by-warning-text: #9a5800;
    --by-focus: #1859c9;
    --by-glass-bg: rgba(255,255,255,.62);
    --by-glass-bg-strong: rgba(255,255,255,.86);
    --by-glass-lite: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
    --by-glass-solid: #ffffff;
    --by-glass-border: rgba(11,13,26,.08);
    --by-glass-hi: rgba(255,255,255,.95);
    --by-glass-shade: rgba(11,13,26,.08);
    --by-glass-inner: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -18px 30px -18px rgba(34,196,142,.12);
    --by-shadow-1: 0 1px 2px rgba(11,13,26,.08), 0 4px 12px -4px rgba(11,13,26,.12);
    --by-shadow-2: 0 2px 4px rgba(11,13,26,.06), 0 14px 32px -12px rgba(11,13,26,.22);
    --by-shadow-3: 0 4px 10px rgba(11,13,26,.08), 0 30px 60px -20px rgba(11,13,26,.32);
    --by-aurora-1: rgba(34,196,142,.16);
    --by-aurora-2: rgba(141,108,240,.14);
    --by-aurora-3: rgba(108,199,255,.16);
    --by-star: rgba(11,13,26,0);
    --by-scrim: rgba(11,13,26,.38);
  }
}

/* ==========================================================================
   Blipyard theme utilities: Gummy · Midnight · Glass · Refraction
   Everything below uses the --by-* tokens defined above. Class prefix: by-
   Performance rules baked in:
   - real backdrop-filter only on floating chrome (.by-glass): header, tab bar, sheets, modals, toasts, popovers
   - cards, tiles, rows and bubbles use .by-glass-lite (no backdrop-filter, translucent gradient + highlight)
   - blur 20px max desktop, 10px on phones; never nest two .by-glass elements
   - only transform / opacity animate; sheen and caustics are pseudo-elements moved with transform
   ========================================================================== */

/* ---------- base ---------- */
.by-root, .by-root * { box-sizing: border-box; }
.by-root {
  font-family: var(--by-font-ui); font-size: 16px; line-height: 1.5; color: var(--by-text); background: var(--by-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
  font-feature-settings: "kern"; text-rendering: optimizeLegibility;
}
.by-root :focus-visible { outline: 3px solid var(--by-focus); outline-offset: 2px; border-radius: 6px; }
.by-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.by-display { font-family: var(--by-font-display); font-weight: 400; letter-spacing: .005em; }

/* ---------- MIDNIGHT: page background ---------- */
/* Put .by-midnight on <body>. The sky is a fixed pseudo-element so phones never repaint it on scroll. */
.by-midnight { background: var(--by-bg); position: relative; isolation: isolate; }
.by-midnight::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--by-stars), var(--by-noise), var(--by-aurora), var(--by-bg);
  background-size: 320px 320px, 180px 180px, 100% 100%, 100% 100%;
}
/* optional slow caustic drift on large screens only */
.by-caustics { position: relative; overflow: hidden; }
.by-caustics::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0; opacity: .55;
  background:
    radial-gradient(18% 12% at 30% 30%, rgba(95,242,192,.10), transparent 70%),
    radial-gradient(14% 10% at 70% 60%, rgba(182,156,255,.12), transparent 70%),
    radial-gradient(12% 9% at 50% 80%, rgba(108,199,255,.10), transparent 70%);
  animation: by-caustic 24s var(--by-ease-in-out) infinite alternate;
}
@keyframes by-caustic { to { transform: translate3d(6%, -4%, 0) rotate(8deg) scale(1.08); } }
@media (max-width: 767px) { .by-caustics::after { animation: none; } }

/* ---------- GLASS ---------- */
.by-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%), var(--by-glass-bg);
  -webkit-backdrop-filter: blur(var(--by-blur-md)) saturate(var(--by-saturate));
  backdrop-filter: blur(var(--by-blur-md)) saturate(var(--by-saturate));
  border: 1px solid var(--by-glass-border);
  box-shadow: var(--by-glass-inner), var(--by-shadow-2);
  border-radius: var(--by-r-lg);
}
.by-glass--strong { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%), var(--by-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--by-blur-lg)) saturate(var(--by-saturate)); backdrop-filter: blur(var(--by-blur-lg)) saturate(var(--by-saturate)); box-shadow: var(--by-glass-inner), var(--by-shadow-3); }
.by-glass-lite {
  background: var(--by-glass-lite);
  border: 1px solid var(--by-glass-border);
  box-shadow: var(--by-glass-inner), var(--by-shadow-1);
  border-radius: var(--by-r-lg);
}
@media (max-width: 767px) {
  .by-glass, .by-glass--strong { -webkit-backdrop-filter: blur(var(--by-blur-phone)) saturate(140%); backdrop-filter: blur(var(--by-blur-phone)) saturate(140%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .by-glass, .by-glass--strong { background: var(--by-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .by-glass, .by-glass--strong, .by-glass-lite { background: var(--by-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .by-midnight::before { background: var(--by-bg); }
}

/* ---------- REFRACTION ---------- */
/* Prismatic edge: a 1px gradient border drawn with a mask, so it follows any radius. */
.by-prism-edge { position: relative; isolation: isolate; }
.by-prism-edge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: var(--by-prism);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .38; transition: opacity var(--by-dur-base) var(--by-ease-out);
}
.by-prism-edge:hover::before, .by-prism-edge:focus-visible::before, .by-prism-edge.is-active::before { opacity: .9; }
/* Chromatic sheen: a light band that sweeps once on hover / focus. */
.by-sheen { position: relative; overflow: hidden; isolation: isolate; }
.by-sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: var(--by-sheen); transform: translateX(-110%); transition: transform 0s;
}
.by-sheen:hover::after, .by-sheen:focus-visible::after, .by-tile:hover .by-sheen::after, .by-tile:focus-visible .by-sheen::after { transform: translateX(110%); transition: transform 900ms var(--by-ease-out); }
@media (hover: none) { .by-sheen::after { display: none; } }
/* Prism text: for one word per screen at most (hero, level-up). */
.by-prism-text { background: var(--by-prism); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Caustic highlight inside a glass card (static, cheap). */
.by-refract { background-image: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.10), transparent 50%), radial-gradient(60% 40% at 100% 100%, rgba(108,199,255,.10), transparent 70%); }

/* ---------- GUMMY ---------- */
.by-gummy { transition: transform var(--by-dur-gummy) var(--by-ease-spring); will-change: transform; }
.by-gummy:active { transform: scale(.95, .9) translateY(2px); transition: transform var(--by-dur-instant) var(--by-ease-out); }
@supports not (transition-timing-function: linear(0, 1)) { .by-gummy { transition-timing-function: var(--by-ease-gummy); } }
.by-jelly { animation: by-jelly var(--by-dur-gummy) var(--by-ease-out) both; }
.by-pop { animation: by-pop var(--by-dur-gummy) var(--by-ease-gummy) both; }
@keyframes by-jelly { 0% { transform: scale(1,1); } 25% { transform: scale(1.1,.88); } 45% { transform: scale(.94,1.07); } 65% { transform: scale(1.03,.97); } 82% { transform: scale(.99,1.01); } 100% { transform: scale(1,1); } }
@keyframes by-pop { 0% { opacity: 0; transform: scale(.6) translateY(8px); } 60% { opacity: 1; transform: scale(1.06) translateY(0); } 100% { transform: scale(1); } }
@keyframes by-wobble { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
@keyframes by-bob { 0%,100% { transform: translateY(0) scale(1,1); } 50% { transform: translateY(-6px) scale(.98,1.02); } }
.by-bob { animation: by-bob 3.2s var(--by-ease-in-out) infinite; }
.by-fill-mint { background: var(--by-gummy-mint); color: var(--by-text-on-mint); }
.by-fill-gold { background: var(--by-gummy-gold); color: var(--by-text-on-gold); }
.by-fill-violet { background: var(--by-gummy-violet); color: #1a0e40; }

/* ---------- BUTTONS ---------- */
.by-btn {
  --_lip: rgba(0,0,0,.25);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--by-tap); padding: 0 22px;
  border: 0; border-radius: var(--by-r-pill); font: 700 16px/1 var(--by-font-ui); letter-spacing: .01em; color: var(--by-text);
  text-decoration: none; cursor: pointer; user-select: none; white-space: nowrap; position: relative;
  transition: transform var(--by-dur-gummy) var(--by-ease-spring), box-shadow var(--by-dur-fast) var(--by-ease-out), background-color var(--by-dur-fast), filter var(--by-dur-fast);
}
@supports not (transition-timing-function: linear(0, 1)) { .by-btn { transition-timing-function: var(--by-ease-gummy), var(--by-ease-out), ease, ease; } }
.by-btn:hover { transform: translateY(-1px); }
.by-btn:active { transform: scale(.96, .92) translateY(2px); transition-duration: var(--by-dur-instant); }
.by-btn svg { width: 20px; height: 20px; flex: none; }
.by-btn--lg { min-height: var(--by-tap-lg); padding: 0 28px; font-size: 17px; }
.by-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.by-btn--primary {
  background: var(--by-gummy-gold); color: var(--by-cta-ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(170,95,0,.35), 0 3px 0 var(--by-cta-edge), 0 10px 22px -8px rgba(255,180,40,.55);
}
.by-btn--primary:hover { filter: brightness(1.05) saturate(1.05); }
.by-btn--primary:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(170,95,0,.35), 0 1px 0 var(--by-cta-edge), 0 4px 10px -6px rgba(255,180,40,.5); }
.by-btn--mint { background: var(--by-gummy-mint); color: var(--by-text-on-mint);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,110,80,.3), 0 3px 0 #1a9d74, 0 10px 22px -8px rgba(95,242,192,.5); }
.by-btn--secondary { background: var(--by-glass-lite); color: var(--by-text); box-shadow: var(--by-glass-inner), 0 0 0 1px var(--by-line-strong), var(--by-shadow-1); }
.by-btn--ghost { background: transparent; color: var(--by-text-muted); }
.by-btn--ghost:hover { color: var(--by-text); background: color-mix(in srgb, var(--by-text) 7%, transparent); }
.by-btn--danger { background: var(--by-gummy-coral); color: #2b0007; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #b8304a; }
.by-btn--icon { width: var(--by-tap); min-width: var(--by-tap); padding: 0; border-radius: 50%; }
.by-btn[disabled], .by-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; filter: saturate(.4); }

/* ---------- COIN PILL ---------- */
.by-coin { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 4px; border-radius: var(--by-r-pill);
  background: color-mix(in srgb, var(--by-coin) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--by-coin) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--by-coin-text); font: 700 15px/1 var(--by-font-ui); font-variant-numeric: tabular-nums; }
.by-coin__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--by-gummy-gold); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(170,95,0,.4); display: grid; place-items: center; }
.by-coin__icon::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 0 2px rgba(170,95,0,.45); }
.by-coin.is-earned { animation: by-jelly var(--by-dur-gummy) var(--by-ease-out); }

/* ---------- CHIPS + TABS ---------- */
.by-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--by-r-pill); border: 0; cursor: pointer;
  background: var(--by-glass-lite); box-shadow: var(--by-glass-inner), 0 0 0 1px var(--by-glass-border); color: var(--by-text-muted); font: 600 14px/1 var(--by-font-ui);
  transition: transform var(--by-dur-gummy) var(--by-ease-spring), color var(--by-dur-fast), background var(--by-dur-fast); }
.by-chip:active { transform: scale(.94, .9); transition-duration: var(--by-dur-instant); }
.by-chip[aria-pressed="true"], .by-chip.is-active { color: var(--by-text-on-mint); background: var(--by-gummy-mint); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,110,80,.25); }
.by-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--by-r-pill); background: color-mix(in srgb, var(--by-bg-deep) 70%, transparent); box-shadow: inset 0 1px 3px rgba(0,0,0,.35), inset 0 0 0 1px var(--by-glass-border); }
.by-tab { position: relative; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--by-r-pill); background: transparent; color: var(--by-text-muted); font: 600 14px/1 var(--by-font-ui); cursor: pointer; }
.by-tab[aria-selected="true"] { color: var(--by-text); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px -2px rgba(0,0,0,.4); }
/* the i-dot motif: a gold blip above the active item */
.by-idot { position: relative; }
.by-idot::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--by-coin); box-shadow: 0 0 8px var(--by-coin); }

/* ---------- CARDS + GAME TILES ---------- */
.by-card { background: var(--by-glass-lite); border: 1px solid var(--by-glass-border); box-shadow: var(--by-glass-inner), var(--by-shadow-1); border-radius: var(--by-r-xl); padding: 20px; }
.by-tile { display: block; position: relative; border-radius: var(--by-r-xl); padding: 8px 8px 14px; background: var(--by-glass-lite); box-shadow: var(--by-glass-inner), var(--by-shadow-2); color: inherit; text-decoration: none;
  transition: transform var(--by-dur-gummy) var(--by-ease-spring), box-shadow var(--by-dur-base) var(--by-ease-out); }
.by-tile:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--by-glass-inner), var(--by-shadow-3); }
.by-tile:active { transform: scale(.97, .95); transition-duration: var(--by-dur-instant); }
.by-tile__art { aspect-ratio: 4 / 3; border-radius: var(--by-r-lg); overflow: hidden; position: relative; background: var(--by-raised); }
.by-tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.by-tile__title { margin: 12px 8px 2px; font: 700 17px/1.2 var(--by-font-ui); }
.by-tile__meta { margin: 0 8px; color: var(--by-text-muted); font-size: 13px; display: flex; gap: 10px; align-items: center; }
/* Blip peeking over an edge: place inside a position:relative parent */
.by-peek { position: absolute; z-index: 3; width: 60px; height: 46px; overflow: hidden; pointer-events: none; }
.by-peek > svg { width: 60px; height: auto; display: block; transform: translateY(5px); transition: transform var(--by-dur-gummy) var(--by-ease-spring); }
.by-peek--top { top: -46px; right: 24px; }
*:hover > .by-peek > svg { transform: translateY(0); }

/* ---------- INPUTS + TOGGLES ---------- */
.by-input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--by-r-md); border: 1px solid var(--by-line); color: var(--by-text); font: 500 16px/1.2 var(--by-font-ui);
  background: color-mix(in srgb, var(--by-bg-deep) 55%, transparent); box-shadow: inset 0 2px 6px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.05);
  transition: border-color var(--by-dur-fast), box-shadow var(--by-dur-fast); }
.by-input::placeholder { color: var(--by-text-faint); }
.by-input:focus { outline: none; border-color: var(--by-focus); box-shadow: inset 0 2px 6px rgba(0,0,0,.28), 0 0 0 4px color-mix(in srgb, var(--by-focus) 25%, transparent); }
.by-input[aria-invalid="true"] { border-color: var(--by-danger); }
.by-toggle { appearance: none; -webkit-appearance: none; position: relative; width: 56px; height: 34px; border-radius: 999px; cursor: pointer; flex: none; margin: 5px 0;
  background: color-mix(in srgb, var(--by-bg-deep) 60%, transparent); box-shadow: inset 0 2px 5px rgba(0,0,0,.35), inset 0 0 0 1px var(--by-line-strong); transition: background var(--by-dur-base) var(--by-ease-out); }
.by-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50% 50% 44% 44% / 56% 56% 44% 44%;
  background: linear-gradient(180deg, #fff, #dfe3f5); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.35);
  transition: transform var(--by-dur-gummy) var(--by-ease-spring), background var(--by-dur-base); }
.by-toggle:checked { background: var(--by-gummy-mint); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,110,80,.3); }
/* when on, the knob becomes a tiny Blip face */
.by-toggle:checked::before { transform: translateX(22px);
  background: radial-gradient(1.6px 2.6px at 37% 48%, #0b0d1a 98%, transparent), radial-gradient(1.6px 2.6px at 63% 48%, #0b0d1a 98%, transparent), linear-gradient(180deg, #fff, #e8fff6); }
.by-toggle:active::before { width: 34px; }

/* ---------- SHEETS + MODALS ---------- */
.by-scrim { position: fixed; inset: 0; background: var(--by-scrim); z-index: var(--by-z-overlay); animation: by-fade var(--by-dur-base) var(--by-ease-out) both; }
.by-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--by-z-sheet); max-height: 88dvh; overflow: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(20px + var(--by-safe-bottom)); border-radius: var(--by-r-2xl) var(--by-r-2xl) 0 0; animation: by-sheet-in var(--by-dur-sheet) var(--by-ease-spring) both; }
.by-sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--by-line-strong); margin: 0 auto 14px; }
.by-modal { position: fixed; left: 50%; top: 50%; z-index: var(--by-z-modal); width: min(480px, calc(100vw - 32px)); padding: 28px; border-radius: var(--by-r-2xl);
  transform: translate(-50%, -50%); animation: by-modal-in var(--by-dur-gummy) var(--by-ease-gummy) both; }
@media (max-width: 767px) { .by-modal { left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: none; border-radius: var(--by-r-2xl) var(--by-r-2xl) 0 0; padding-bottom: calc(24px + var(--by-safe-bottom)); animation: by-sheet-in var(--by-dur-sheet) var(--by-ease-spring) both; } }
@keyframes by-fade { from { opacity: 0; } }
@keyframes by-sheet-in { from { transform: translateY(100%); } }
@keyframes by-modal-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.92); } }

/* ---------- TOASTS + TOOLTIPS ---------- */
.by-toast { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--by-r-pill); max-width: min(420px, calc(100vw - 32px)); font: 600 15px/1.3 var(--by-font-ui);
  animation: by-pop var(--by-dur-gummy) var(--by-ease-gummy) both; }
.by-toast__blip { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--by-text) 8%, transparent); }
.by-toast__blip svg { width: 30px; height: 30px; }
.by-toast--success { box-shadow: var(--by-glass-inner), inset 0 0 0 1px color-mix(in srgb, var(--by-success) 45%, transparent), var(--by-shadow-2); }
.by-toast--error { box-shadow: var(--by-glass-inner), inset 0 0 0 1px color-mix(in srgb, var(--by-danger) 50%, transparent), var(--by-shadow-2); }
.by-tooltip { position: relative; display: inline-block; padding: 7px 11px; border-radius: 10px; background: #f3f5ff; color: #0b0d1a; font: 600 13px/1.25 var(--by-font-ui); box-shadow: var(--by-shadow-2); }
.by-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }

/* ---------- AVATAR + LEVEL RING + BADGES ---------- */
.by-avatar { --size: 48px; --p: 60; position: relative; width: var(--size); height: var(--size); flex: none; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--by-owned) calc(var(--p) * 1%), color-mix(in srgb, var(--by-text) 12%, transparent) 0); }
.by-avatar > img, .by-avatar > .by-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--by-bg); background: var(--by-raised); }
.by-avatar__lvl { position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  background: var(--by-gummy-gold); color: var(--by-text-on-gold); font: 800 11px/1 var(--by-font-ui); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--by-bg), inset 0 1px 0 rgba(255,255,255,.6); }
.by-avatar--online::after { content: ""; position: absolute; left: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--by-owned); box-shadow: 0 0 0 2px var(--by-bg); }
.by-badge { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--by-gummy-coral); color: #2b0007; font: 800 11px/1 var(--by-font-ui); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--by-bg), inset 0 1px 0 rgba(255,255,255,.5); }
.by-badge.is-new { animation: by-jelly var(--by-dur-gummy) var(--by-ease-out); }
.by-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--by-coin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--by-coin) 25%, transparent); }

/* ---------- CHAT ---------- */
.by-chat { display: flex; flex-direction: column; gap: 8px; }
.by-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.by-msg--own { align-self: flex-end; flex-direction: row-reverse; }
.by-bubble { padding: 9px 13px; border-radius: 20px 20px 20px 6px; font: 400 15px/1.4 var(--by-font-ui); background: var(--by-glass-lite); box-shadow: var(--by-glass-inner), 0 0 0 1px var(--by-glass-border); }
.by-bubble__name { display: block; font: 700 12px/1.2 var(--by-font-ui); color: var(--by-text-muted); margin-bottom: 2px; }
.by-bubble--team { background: color-mix(in srgb, var(--by-social) 16%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px color-mix(in srgb, var(--by-social) 35%, transparent); }
.by-bubble--team .by-bubble__name { color: var(--by-social-text); }
.by-msg--own .by-bubble { border-radius: 20px 20px 6px 20px; background: color-mix(in srgb, var(--by-owned) 18%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb, var(--by-owned) 40%, transparent); }
.by-msg--system { align-self: center; max-width: 100%; gap: 6px; align-items: center; color: var(--by-text-muted); font: 600 13px/1.3 var(--by-font-ui); padding: 4px 12px 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--by-text) 6%, transparent); }
.by-msg--system svg { width: 22px; height: 22px; }
.by-react { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 3px; border-radius: 13px; font: 700 12px/1 var(--by-font-ui); background: color-mix(in srgb, var(--by-text) 8%, transparent); box-shadow: inset 0 0 0 1px var(--by-glass-border); }
.by-react svg { width: 20px; height: 20px; }
.by-react.is-mine { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--by-owned) 60%, transparent); }

/* ---------- LEADERBOARD ROW ---------- */
.by-lb-row { display: grid; grid-template-columns: 36px 40px 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 10px; border-radius: var(--by-r-lg);
  background: var(--by-glass-lite); box-shadow: var(--by-glass-inner), 0 0 0 1px var(--by-glass-border); }
.by-lb-row__rank { font: 400 20px/1 var(--by-font-display); text-align: center; color: var(--by-text-muted); font-variant-numeric: tabular-nums; }
.by-lb-row__rank--1, .by-lb-row__rank--2, .by-lb-row__rank--3 { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #241600; }
.by-lb-row__rank--1 { background: var(--by-gummy-gold); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 14px rgba(255,201,77,.45); }
.by-lb-row__rank--2 { background: linear-gradient(180deg, #f4f6ff, #c3c9e6 50%, #9aa2c8); box-shadow: inset 0 2px 0 rgba(255,255,255,.7); }
.by-lb-row__rank--3 { background: linear-gradient(180deg, #ffd0a8, #e79a5d 50%, #c0723a); box-shadow: inset 0 2px 0 rgba(255,255,255,.55); }
.by-lb-row__name { font: 600 15px/1.2 var(--by-font-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-lb-row__score { font: 700 16px/1 var(--by-font-ui); font-variant-numeric: tabular-nums; }
.by-lb-row.is-me { box-shadow: var(--by-glass-inner), inset 0 0 0 1.5px var(--by-owned), 0 0 22px -6px color-mix(in srgb, var(--by-owned) 60%, transparent); }

/* ---------- PROGRESS / XP ---------- */
.by-xp { --p: 40; position: relative; height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--by-bg-deep) 70%, transparent); box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 0 0 1px var(--by-glass-border); }
.by-xp__fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--p) / 100); min-width: 12px; border-radius: inherit; background: var(--by-gummy-mint);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,110,80,.3); transition: width var(--by-dur-slow) var(--by-ease-gummy); overflow: hidden; }
.by-xp__fill::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 8px, transparent 8px 18px); animation: by-stripes 1.2s linear infinite; }
/* the blip at the head of the bar (i-dot motif) */
.by-xp__fill::after { content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--by-gold, #ffc94d); box-shadow: 0 0 8px #ffc94d; }
@keyframes by-stripes { to { transform: translateX(18px); } }

/* ---------- NAV: phone tab bar + desktop header ---------- */
.by-tabbar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--by-safe-bottom)); z-index: var(--by-z-nav); height: var(--by-tabbar-h);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 6px; border-radius: 26px; }
.by-tabbar__item { position: relative; display: grid; justify-items: center; gap: 3px; min-height: var(--by-tap); padding-top: 4px; color: var(--by-text-muted); text-decoration: none; font: 600 11px/1 var(--by-font-ui); border: 0; background: none; }
.by-tabbar__item svg { width: 24px; height: 24px; transition: transform var(--by-dur-gummy) var(--by-ease-spring); }
.by-tabbar__item[aria-current="page"] { color: var(--by-text); }
.by-tabbar__item[aria-current="page"] svg { color: var(--by-owned); transform: translateY(-1px); }
.by-tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: -5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--by-coin); box-shadow: 0 0 8px var(--by-coin); }
.by-tabbar__play { width: 56px; height: 56px; margin: -22px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--by-gummy-gold); color: var(--by-cta-ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(170,95,0,.35), 0 3px 0 var(--by-cta-edge), 0 10px 22px -6px rgba(255,180,40,.6), 0 0 0 5px var(--by-bg); }
.by-header { position: sticky; top: 0; z-index: var(--by-z-sticky); height: var(--by-header-h); display: flex; align-items: center; gap: 16px; padding: 0 var(--by-gutter); padding-top: var(--by-safe-top); border-radius: 0; border-width: 0 0 1px; }
@media (min-width: 768px) { .by-tabbar { display: none; } }

/* ---------- LOADER (antenna-dot orbit) ---------- */
.by-loader { width: 56px; height: 56px; }
.by-loader .by-loader__orbit { transform-box: view-box; transform-origin: 50px 4px; animation: by-spin 1.1s linear infinite; }
.by-loader .by-loader__body { transform-box: view-box; transform-origin: 50px 90px; animation: by-squish 1.1s var(--by-ease-in-out) infinite; }
@keyframes by-spin { to { transform: rotate(360deg); } }
@keyframes by-squish { 50% { transform: scale(1.03, .97); } }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .by-root *, .by-root *::before, .by-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .by-loader .by-loader__orbit { animation: by-spin 2.4s linear infinite !important; animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
  .by-sheen::after, .by-caustics::after, .by-xp__fill::before { display: none; }
}

/* ---------- ICONS (sprite symbols use class f = gummy fill, d = solid dot) ---------- */
.by-icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
symbol[id^="i-"] .f { fill: currentColor; fill-opacity: .2; stroke: none; }
symbol[id^="i-"] .d { fill: currentColor; stroke: none; }