:root {
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Rubik', 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-r: 600;
  --fw-m: 700;
  --fw-b: 800;
  --fw-x: 900;
  --fw-d: 700;
  --fw-dx: 700;
  --text-scale: 1;
  --root-fs: 14px;
  --form-fs-min: 0px;
  --form-fs: 1em;
  --fs-2xs: 0.7857rem;
  --fs-xs: 0.8571rem;
  --fs-s: 0.9286rem;
  --fs-m: 1rem;
  --fs-l: 1.1429rem;
  --fs-xl: 1.2857rem;
  --fs-xxl: 1.4286rem;
  --fs-hero: 2.2857rem;
  --lh: 1.4;
  --lh-tight: 1.15;
  --track-title: -0.01em;
  --track-caps: 0.06em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --gap-xs: var(--sp-1);
  --gap-s: var(--sp-2);
  --gap-m: var(--sp-3);
  --gap-l: var(--sp-4);
  --gap-xl: var(--sp-5);
  --pad-sheet: var(--sp-4);

  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --target: 32px;
  --target-gap: 4px;
  --focus-inset: -3px;
  --focus-w: 3px;
  --btn-h: 40px;
  --btn-h-s: 32px;
  --icon-btn: 32px;
  --icon-stroke: 2.25;
  --icon-stroke-thin: 1.75;
  --dock-h: 56px;
  --sheet-max: 90vh;
  --sheet-w: 560px;
  --modal-w: 360px;
  --card-min: 84px;
  --hud-pill-h: 28px;
  --rail-btn: 36px;
  --ring-track: 4px;
  --bar-h: 6px;
  --bar-h-s: 4px;
  --bar-h-l: 8px;
  --switch-w: 40px;
  --switch-h: 24px;
  --switch-knob: 18px;
  --grabber-w: 32px;
  --grabber-h: 4px;
  --badge-h: 16px;
  --dot: 8px;
  --skel-h: 12px;
  --toast-spin: 18px;
  --toast-spin-w: 3px;
  --toast-spin-t: 0.8s;
  --xfer-mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  --xfer-code-fs: 1.9rem;
  --xfer-code-track: 0.08em;
  --ic-k: 0.8;
  --is-k: 0.85;
  --thumb-k: 0.85;
  --fit-min: 0.72;
  --tabs-fade: 36px;
  --tabs-solid: 40%;
  --tabs-bg: var(--surface);
  --tabs-pad: 0px;
  --row-text-min: 9rem;
  --hero-text-min: 6.5rem;

  --bg: #f6f1e7;
  --surface: #fffaf2;
  --surface-2: #f4ede1;
  --surface-3: #e7dece;
  --surface-sunk: #ebe3d3;
  --line: rgba(80, 60, 40, 0.12);
  --line-strong: #8a7d6b;
  --ink: #2a2521;
  --ink-soft: #564e46;
  --ink-faint: #6b6258;
  --accent: #2a8240;
  --accent-2: #1f6b33;
  --accent-hi: #4cb05a;
  --accent-soft: #dcf0d6;
  --accent-ink: #1f6b33;
  --on-accent: #ffffff;
  --pop: #cf3369;
  --pop-2: #a92655;
  --pop-hi: #ff7aa2;
  --pop-soft: #ffe1ea;
  --pop-ink: #a92655;
  --on-pop: #ffffff;
  --leaf: #4fae47;
  --gem: #1a7ea5;
  --gem-2: #12668a;
  --gem-hi: #5fd0f0;
  --gem-ink: #11627f;
  --on-gem: #ffffff;
  --gold: #f7c548;
  --gold-2: #d39a22;
  --gold-hi: #ffe38a;
  --gold-ink: #7d5400;
  --on-gold: #2a2521;
  --premium-1: #7c4ddf;
  --premium-2: #5b34c9;
  --on-premium: #ffffff;
  --good: #2a8240;
  --good-ink: #1f6b33;
  --good-soft: #dcf0d6;
  --warn: #e8a13a;
  --warn-ink: #8a5300;
  --warn-soft: #fff0d6;
  --danger: #c8372b;
  --danger-2: #a52a20;
  --danger-ink: #a52a20;
  --danger-soft: #ffe2dc;
  --on-danger: #ffffff;
  --info: #2f6fd6;
  --info-ink: #2257b0;
  --info-soft: #e1ebff;
  --focus: #1d5fd1;
  --focus-halo: rgba(29, 95, 209, 0.25);
  --veil: rgba(32, 24, 18, 0.5);
  --hud-glass: rgba(255, 250, 242, 0.92);
  --hud-glass-strong: rgba(255, 250, 242, 0.94);
  --hud-glass-ink: #2a2521;
  --hud-glass-line: rgba(255, 255, 255, 0.7);
  --toast-bg: rgba(42, 37, 33, 0.95);
  --toast-ink: #fffaf2;
  --tier-common: #7d8f88;
  --tier-rare: #2f6fd6;
  --tier-epic: #8a4fd1;
  --tier-legendary: #d38d14;
  --need-water: #3ba3e6;
  --need-water-2: #1c6fc0;
  --need-sun: #fdbb2d;
  --need-sun-2: #ef8a10;
  --need-food: #8fc93f;
  --need-food-2: #4f9221;
  --need-joy: #a986f7;
  --need-joy-2: #7451d9;
  --need-love: #ff6b8e;
  --need-love-2: #d8336a;
  --health: #34bf86;
  --health-2: #158a62;
  --need-water-hi: color-mix(in srgb, var(--need-water) 45%, #ffffff);
  --need-sun-hi: color-mix(in srgb, var(--need-sun) 45%, #ffffff);
  --need-food-hi: color-mix(in srgb, var(--need-food) 45%, #ffffff);
  --need-joy-hi: color-mix(in srgb, var(--need-joy) 45%, #ffffff);
  --need-love-hi: color-mix(in srgb, var(--need-love) 45%, #ffffff);
  --health-hi: color-mix(in srgb, var(--health) 45%, #ffffff);
  --orb-ink: #ffffff;
  --orb-drop: rgba(0, 0, 0, 0.22);
  --orb-shade: rgba(16, 8, 0, 0.3);
  --orb-gloss: rgba(255, 255, 255, 0.62);
  --health-low: #e8a13a;
  --health-bad: #d9452f;
  --grade: transparent;
  --grade-alpha: 0;

  --elev-1: 0 1px 2px rgba(60, 40, 20, 0.08), 0 2px 6px rgba(60, 40, 20, 0.06);
  --elev-2: 0 2px 4px rgba(60, 40, 20, 0.08), 0 6px 16px rgba(60, 40, 20, 0.1);
  --elev-3: 0 4px 10px rgba(60, 40, 20, 0.1), 0 14px 32px rgba(60, 40, 20, 0.14);
  --elev-4: 0 8px 18px rgba(60, 40, 20, 0.12), 0 28px 56px rgba(60, 40, 20, 0.2);
  --hi-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --lo-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  --clay: var(--hi-inset), var(--lo-inset), var(--elev-2);
  --clay-press: inset 0 2px 4px rgba(0, 0, 0, 0.12), var(--elev-1);
  --btn-shine: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.16);
  --shadow-sheet: 0 -10px 40px rgba(40, 25, 10, 0.2);
  --glow-accent: 0 0 0 4px rgba(42, 130, 64, 0.22);
  --text-shadow-hero: 0 2px 0 rgba(0, 0, 0, 0.12);

  --t-instant: 0.08s;
  --t-fast: 0.14s;
  --t-med: 0.28s;
  --t-slow: 0.5s;
  --t-count: 0.7s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.18, 1.4, 0.4, 1);
  --press: 0.95;
  --press-s: 0.97;
  --lift: -2px;
  --safe-top: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --safe-bottom: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-left: max(var(--safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
  --safe-right: max(var(--safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
  --bubble-bg: #fffaf2;
  --bubble-ink: #2a2521;
  --float-ink: #ffffff;
  --float-stroke: rgba(40, 30, 20, 0.55);
  --fs-float: 22px;
  --decor-hit: 44px;
  --decor-hit-pad: 8px;
  --decor-pop: 0.07;
  --decor-pop-glow: 0.45;
  --t-decor-pop: 0.6s;
  --fs-bubble: 0.95rem;
  --skel-a: #ece4d6;
  --skel-b: #f7f1e6;
  --hero-1: var(--gold-hi);
  --hero-2: var(--gold);
  --hero-3: var(--gold-2);
  --on-hero: var(--on-gold);
  --hero-glass: rgba(255, 255, 255, 0.78);
  --hero-shine: rgba(255, 255, 255, 0.6);
  --hero-ring: transparent;
}

.lc {
  --root-fs: clamp(14px, 3.9vw, 17px);
  --fs-2xs: max(12px, 0.6875rem);
  --fs-xs: max(12px, 0.75rem);
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 2rem;
  --fs-hero: 3rem;
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --target: 48px;
  --target-gap: 8px;
  --btn-h: 52px;
  --btn-h-s: 48px;
  --icon-btn: 48px;
  --dock-h: 72px;
  --modal-w: 400px;
  --card-min: 104px;
  --hud-pill-h: 40px;
  --rail-btn: 52px;
  --bar-h: 10px;
  --bar-h-s: 8px;
  --bar-h-l: 12px;
  --switch-w: 52px;
  --switch-h: 32px;
  --switch-knob: 26px;
  --grabber-w: 40px;
  --grabber-h: 5px;
  --badge-h: 20px;
  --dot: 12px;
  --skel-h: 14px;
  --ic-k: 1;
  --is-k: 1;
  --thumb-k: 1;
}

.dark {
  --bg: #17161c;
  --surface: #222029;
  --surface-2: #2c2934;
  --surface-3: #38343f;
  --surface-sunk: #1b1a21;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: #8f879b;
  --ink: #f5f0e8;
  --ink-soft: #cdc5ba;
  --ink-faint: #aaa196;
  --accent-soft: #22402a;
  --accent-ink: #84d690;
  --pop-soft: #4a2232;
  --pop-ink: #ff94b6;
  --gem-ink: #7ad6f2;
  --gold-ink: #ffd166;
  --good-ink: #84d690;
  --good-soft: #22402a;
  --warn-ink: #ffc46b;
  --warn-soft: #4a3820;
  --danger-ink: #ff8f80;
  --danger-soft: #4a2622;
  --info-ink: #93bbff;
  --info-soft: #1f2d4a;
  --focus: #93bbff;
  --focus-halo: rgba(147, 187, 255, 0.3);
  --veil: rgba(5, 4, 8, 0.66);
  --hud-glass: rgba(30, 28, 36, 0.92);
  --hud-glass-strong: rgba(30, 28, 36, 0.95);
  --hud-glass-ink: #f5f0e8;
  --hud-glass-line: rgba(255, 255, 255, 0.12);
  --toast-bg: rgba(250, 245, 236, 0.96);
  --toast-ink: #26242c;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.24);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.32);
  --elev-3: 0 4px 10px rgba(0, 0, 0, 0.34), 0 14px 32px rgba(0, 0, 0, 0.4);
  --elev-4: 0 8px 18px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.5);
  --hi-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lo-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  --clay-press: inset 0 2px 4px rgba(0, 0, 0, 0.4), var(--elev-1);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.55);
  --bubble-bg: #2f2c35;
  --bubble-ink: #f5f0e8;
  --skel-a: #2c2934;
  --skel-b: #38343f;
}

.theme-cottagecore { --accent: #5a7a3c; --accent-2: #46622e; --accent-hi: #8fae6b; --accent-soft: #e5eed8; --accent-ink: #46622e; --pop: #b05358; --pop-2: #8f3f44; --pop-hi: #e7a1a3; --pop-soft: #f6e0dd; --pop-ink: #8f3f44; --bg: #f4ecdf; --surface: #fbf5ea; --surface-2: #f2e8d8; --surface-3: #e3d5bf; --surface-sunk: #ebdfcb; --focus: #3f5f9c; --grade: #f2c99a; --grade-alpha: 0.08; --glow-accent: 0 0 0 4px rgba(90, 122, 60, 0.25); }
.theme-kawaii { --accent: #c92c7a; --accent-2: #a51f62; --accent-hi: #ff8fc1; --accent-soft: #ffe3f0; --accent-ink: #a51f62; --pop: #6b4fdb; --pop-2: #5537c0; --pop-hi: #b8a8ff; --pop-soft: #ece8ff; --pop-ink: #5537c0; --bg: #fff1f7; --surface: #fffafc; --surface-2: #ffeef5; --surface-3: #ffd9ea; --surface-sunk: #ffe4ef; --line-strong: #9a7088; --ink-soft: #5a4651; --ink-faint: #6e5864; --focus: #5537c0; --r-m: 16px; --r-l: 20px; --grade: #ffb3d9; --grade-alpha: 0.08; --glow-accent: 0 0 0 4px rgba(201, 44, 122, 0.22); }
.theme-y2k { --accent: #2f6fd6; --accent-2: #1f55b0; --accent-hi: #7ab8ff; --accent-soft: #e2efff; --accent-ink: #1f55b0; --pop: #b8259a; --pop-2: #941c7c; --pop-hi: #ff8fe0; --pop-soft: #ffe1f6; --pop-ink: #941c7c; --bg: #eef1f7; --surface: #ffffff; --surface-2: #eef1f7; --surface-3: #d9dfeb; --surface-sunk: #e3e8f1; --line-strong: #7a8499; --ink: #1f2430; --ink-soft: #485166; --ink-faint: #5a6378; --focus: #941c7c; --grade: #b9c7ff; --grade-alpha: 0.1; --glow-accent: 0 0 0 4px rgba(47, 111, 214, 0.25); }
.theme-vaporwave { --accent: #bf3394; --accent-2: #9a2777; --accent-hi: #ff71ce; --accent-soft: #ffe1f4; --accent-ink: #9a2777; --pop: #007a9e; --pop-2: #006282; --pop-hi: #5fe0ff; --pop-soft: #dcf7ff; --pop-ink: #006282; --bg: #fbe9ff; --surface: #fff6ff; --surface-2: #f9e8ff; --surface-3: #ecccf8; --surface-sunk: #f2d9fb; --line-strong: #8d6f9c; --ink: #2b2033; --ink-soft: #57466a; --ink-faint: #6a5880; --focus: #006282; --grade: #b967ff; --grade-alpha: 0.14; --glow-accent: 0 0 0 4px rgba(191, 51, 148, 0.25); }
.theme-goblincore { --accent: #5a7a33; --accent-2: #425b24; --accent-hi: #8fae5a; --accent-soft: #e3ead3; --accent-ink: #425b24; --pop: #94551f; --pop-2: #774317; --pop-hi: #d79a5c; --pop-soft: #f1e1d1; --pop-ink: #774317; --bg: #ece6d6; --surface: #f6f1e4; --surface-2: #ece5d3; --surface-3: #d9ceb3; --surface-sunk: #e2dac5; --line-strong: #7e7660; --ink-soft: #4f4a3c; --ink-faint: #625c4b; --focus: #3f5f9c; --grade: #6f7d3a; --grade-alpha: 0.1; --glow-accent: 0 0 0 4px rgba(86, 117, 48, 0.25); }

.lc.theme-kawaii { --r-m: 20px; --r-l: 28px; }

.dark.theme-cottagecore { --bg: #1a1c15; --surface: #23261d; --surface-2: #2d3125; --surface-3: #393e2f; --surface-sunk: #1e2119; --ink: #f1efe4; --ink-soft: #ccc9b6; --ink-faint: #a8a593; --line-strong: #8e9180; --accent-soft: #2f3d22; --accent-ink: #b0cf8f; --pop-soft: #45282a; --pop-ink: #eda9ab; --focus: #9fb8ff; }
.dark.theme-kawaii { --bg: #1e1520; --surface: #2a1d2c; --surface-2: #352537; --surface-3: #432f45; --surface-sunk: #24182a; --ink: #fdeef6; --ink-soft: #dcc3d3; --ink-faint: #b89eb0; --line-strong: #9e8399; --accent-soft: #4a1f36; --accent-ink: #ff9ccb; --pop-soft: #2f2a52; --pop-ink: #c0b2ff; --focus: #c0b2ff; }
.dark.theme-y2k { --bg: #121722; --surface: #1a2130; --surface-2: #232b3d; --surface-3: #2e374c; --surface-sunk: #151b27; --ink: #eef3ff; --ink-soft: #c0cadf; --ink-faint: #9aa6bf; --line-strong: #7f8ba3; --accent-soft: #1d2f52; --accent-ink: #94c0ff; --pop-soft: #45203f; --pop-ink: #ff9be4; --focus: #ff9be4; }
.dark.theme-vaporwave { --bg: #1d1328; --surface: #281a36; --surface-2: #332243; --surface-3: #402c52; --surface-sunk: #21152e; --ink: #fbeeff; --ink-soft: #dbc6e8; --ink-faint: #b7a1c6; --line-strong: #9b84ad; --accent-soft: #48203f; --accent-ink: #ff97dc; --pop-soft: #133848; --pop-ink: #78e6ff; --focus: #78e6ff; }
.dark.theme-goblincore { --bg: #1a1a12; --surface: #24241a; --surface-2: #2e2e22; --surface-3: #3a3a2c; --surface-sunk: #1e1e15; --ink: #efecdc; --ink-soft: #cbc7af; --ink-faint: #a7a38b; --line-strong: #8f8b75; --accent-soft: #2f3a1f; --accent-ink: #b9d38c; --pop-soft: #3d2a19; --pop-ink: #e6ad74; --focus: #9fb8ff; }

.theme-darkacademia { --accent: #9a6a36; --accent-2: #7d5428; --accent-hi: #c4925a; --accent-soft: #3a2c20; --accent-ink: #e0b072; --pop: #8c2f39; --pop-2: #6e1f29; --pop-hi: #c45a66; --pop-soft: #3d2023; --pop-ink: #f0939d; --bg: #1f1915; --surface: #2a221c; --surface-2: #342a22; --surface-3: #42362c; --surface-sunk: #241d18; --ink: #efe3cf; --ink-soft: #cdbda5; --ink-faint: #ad9d86; --line: rgba(255, 240, 210, 0.1); --line-strong: #998a73; --good-ink: #9fd38a; --good-soft: #2c3a22; --warn-ink: #f2c06b; --warn-soft: #45351c; --danger-ink: #ff9a8a; --danger-soft: #4a2420; --info-ink: #a8c4ff; --info-soft: #1f2a40; --gem-ink: #8fd7ee; --gold-ink: #f2c96b; --focus: #f2c96b; --focus-halo: rgba(242, 201, 107, 0.3); --veil: rgba(10, 6, 4, 0.66); --hud-glass: rgba(40, 32, 26, 0.93); --hud-glass-strong: rgba(40, 32, 26, 0.96); --hud-glass-ink: #efe3cf; --hud-glass-line: rgba(255, 240, 210, 0.12); --bubble-bg: #342a22; --bubble-ink: #efe3cf; --toast-bg: rgba(239, 227, 207, 0.96); --toast-ink: #241d18; --skel-a: #342a22; --skel-b: #42362c; --grade: #5a3a1e; --grade-alpha: 0.16; --hi-inset: inset 0 1px 0 rgba(255, 240, 210, 0.08); --lo-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.3); --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.24); --elev-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.32); --elev-3: 0 4px 10px rgba(0, 0, 0, 0.34), 0 14px 32px rgba(0, 0, 0, 0.4); --elev-4: 0 8px 18px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.5); --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.55); }
.theme-cyberneon { --accent: #00e5c7; --accent-2: #00b89f; --accent-hi: #7fffe9; --accent-soft: #0d2f33; --accent-ink: #3df5dc; --on-accent: #04121a; --pop: #ff4af2; --pop-2: #dc3ad0; --pop-hi: #ff9cf7; --pop-soft: #35143a; --pop-ink: #ff8af6; --on-pop: #04121a; --bg: #0c0f1d; --surface: #151a2e; --surface-2: #1c2340; --surface-3: #263052; --surface-sunk: #10142a; --ink: #e9f3ff; --ink-soft: #b4c5e6; --ink-faint: #8d9cc4; --line: rgba(120, 220, 255, 0.14); --line-strong: #6f84b8; --good-ink: #5cf2a6; --good-soft: #0f3326; --warn-ink: #ffd36b; --warn-soft: #3a3014; --danger-ink: #ff8c9b; --danger-soft: #45142a; --info-ink: #8fc2ff; --info-soft: #14284a; --gem-ink: #6fe0ff; --gold-ink: #ffd86b; --focus: #ffe14d; --focus-halo: rgba(255, 225, 77, 0.3); --veil: rgba(2, 4, 12, 0.72); --hud-glass: rgba(16, 22, 44, 0.93); --hud-glass-strong: rgba(16, 22, 44, 0.96); --hud-glass-ink: #e9f3ff; --hud-glass-line: rgba(120, 220, 255, 0.2); --bubble-bg: #1c2340; --bubble-ink: #e9f3ff; --toast-bg: rgba(233, 243, 255, 0.96); --toast-ink: #0c0f1d; --skel-a: #1c2340; --skel-b: #263052; --glow-accent: 0 0 18px rgba(0, 229, 199, 0.45); --grade: #3b2cff; --grade-alpha: 0.18; --hi-inset: inset 0 1px 0 rgba(120, 220, 255, 0.12); --lo-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.3); --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --elev-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.4); --elev-3: 0 4px 10px rgba(0, 0, 0, 0.44), 0 14px 32px rgba(0, 0, 0, 0.5); --elev-4: 0 8px 18px rgba(0, 0, 0, 0.5), 0 28px 56px rgba(0, 0, 0, 0.6); --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.6); }
.theme-lofi { --accent: #f2a65a; --accent-2: #d98a3d; --accent-hi: #ffc98f; --accent-soft: #3b2d2a; --accent-ink: #ffb877; --on-accent: #1d1b2b; --pop: #a59cf2; --pop-2: #8a80e0; --pop-hi: #cbc4ff; --pop-soft: #2c2847; --pop-ink: #c2bbff; --on-pop: #1d1b2b; --bg: #1d1b2b; --surface: #27243a; --surface-2: #302c47; --surface-3: #3b3656; --surface-sunk: #211f31; --ink: #f3ece4; --ink-soft: #cdc4d8; --ink-faint: #a9a0ba; --line: rgba(255, 255, 255, 0.1); --line-strong: #8d84a3; --good-ink: #9fdc9a; --good-soft: #233a2a; --warn-ink: #ffd08a; --warn-soft: #463620; --danger-ink: #ff9e94; --danger-soft: #4a2430; --info-ink: #a8c4ff; --info-soft: #232c4a; --gem-ink: #8fd7ee; --gold-ink: #ffd88a; --focus: #ffd08a; --focus-halo: rgba(255, 208, 138, 0.3); --veil: rgba(6, 5, 12, 0.66); --hud-glass: rgba(34, 31, 50, 0.93); --hud-glass-strong: rgba(34, 31, 50, 0.96); --hud-glass-ink: #f3ece4; --hud-glass-line: rgba(255, 255, 255, 0.12); --bubble-bg: #302c47; --bubble-ink: #f3ece4; --toast-bg: rgba(243, 236, 228, 0.96); --toast-ink: #1d1b2b; --skel-a: #302c47; --skel-b: #3b3656; --grade: #2b2560; --grade-alpha: 0.22; --hi-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); --lo-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.3); --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.24); --elev-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.32); --elev-3: 0 4px 10px rgba(0, 0, 0, 0.34), 0 14px 32px rgba(0, 0, 0, 0.4); --elev-4: 0 8px 18px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.5); --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.55); }

.dark,
.theme-darkacademia,
.theme-cyberneon,
.theme-lofi {
  --hero-1: var(--surface-3);
  --hero-2: var(--surface-2);
  --hero-3: var(--surface);
  --on-hero: var(--ink);
  --hero-glass: rgba(255, 255, 255, 0.08);
  --hero-shine: rgba(255, 255, 255, 0.1);
  --hero-ring: var(--gold-2);
}

.theme-cyberneon {
  --hero-ring: var(--pop);
}

.theme-darkacademia {
  --hero-ring: var(--accent-ink);
}

.theme-lofi {
  --hero-ring: var(--accent);
}

.hc {
  --accent: #1a5c2b;
  --accent-2: #134720;
  --on-accent: #ffffff;
  --pop: #9c1c4b;
  --pop-2: #7d1539;
  --on-pop: #ffffff;
  --gem: #0b5a7a;
  --gem-2: #08445d;
  --danger: #a1231a;
  --danger-2: #7f1a13;
  --premium-1: #5b2fc2;
  --premium-2: #45229a;
  --gold: #ffd257;
  --gold-2: #f2b62e;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --surface-3: #e2e2e2;
  --surface-sunk: #ebebeb;
  --line: #1a1a1a;
  --line-strong: #000000;
  --ink: #000000;
  --ink-soft: #1c1c1c;
  --ink-faint: #333333;
  --accent-ink: #14501f;
  --pop-ink: #7d1a3f;
  --gem-ink: #0b4a63;
  --gold-ink: #5c3d00;
  --good-ink: #14501f;
  --warn-ink: #5c3700;
  --danger-ink: #8a1f17;
  --info-ink: #173f80;
  --focus: #000000;
  --focus-halo: rgba(255, 214, 0, 0.9);
  --hud-glass: #ffffff;
  --hud-glass-strong: #ffffff;
  --hud-glass-ink: #000000;
  --hud-glass-line: #000000;
  --toast-bg: #000000;
  --toast-ink: #ffffff;
  --bubble-bg: #ffffff;
  --bubble-ink: #000000;
  --veil: rgba(0, 0, 0, 0.72);
}

.hc.dark,
.hc.theme-darkacademia,
.hc.theme-cyberneon,
.hc.theme-lofi {
  --accent: #7ee08a;
  --accent-2: #5fc96d;
  --on-accent: #000000;
  --pop: #ff9ec2;
  --pop-2: #ff7fae;
  --on-pop: #000000;
  --gem: #7adbf7;
  --gem-2: #4fc8ef;
  --on-gem: #000000;
  --danger: #ff9a8c;
  --danger-2: #ff7a68;
  --on-danger: #000000;
  --premium-1: #cbb2ff;
  --premium-2: #b293ff;
  --on-premium: #000000;
  --bg: #000000;
  --surface: #0b0b0b;
  --surface-2: #171717;
  --surface-3: #262626;
  --surface-sunk: #050505;
  --line: #e6e6e6;
  --line-strong: #ffffff;
  --ink: #ffffff;
  --ink-soft: #f0f0f0;
  --ink-faint: #d6d6d6;
  --accent-ink: #9bf0a8;
  --pop-ink: #ffb0c8;
  --gem-ink: #9ee6ff;
  --gold-ink: #ffe08a;
  --good-ink: #9bf0a8;
  --warn-ink: #ffd88f;
  --danger-ink: #ffb0a6;
  --info-ink: #b8d1ff;
  --focus: #ffffff;
  --focus-halo: rgba(255, 214, 0, 0.9);
  --hud-glass: #0b0b0b;
  --hud-glass-strong: #0b0b0b;
  --hud-glass-ink: #ffffff;
  --hud-glass-line: #ffffff;
  --toast-bg: #ffffff;
  --toast-ink: #000000;
  --bubble-bg: #0b0b0b;
  --bubble-ink: #ffffff;
}

.cb-protan,
.cb-deutan {
  --need-water: #0072b2;
  --need-water-2: #005485;
  --need-sun: #f0c419;
  --need-sun-2: #e69f00;
  --need-food: #8c6d3f;
  --need-food-2: #5e4522;
  --need-joy: #cc79a7;
  --need-joy-2: #9a4f7b;
  --need-love: #e66a00;
  --need-love-2: #b35300;
  --health: #005a42;
  --health-2: #00402f;
  --health-low: #e69f00;
  --health-bad: #b34700;
  --good: #0f6aa6;
  --good-ink: #0b5a8f;
  --good-soft: #dcecf8;
  --warn: #e69f00;
  --warn-ink: #7a5000;
  --danger: #b34700;
  --danger-2: #8f3900;
  --danger-ink: #8f3900;
  --tier-common: #7f7f7f;
  --tier-rare: #0072b2;
  --tier-epic: #cc79a7;
  --tier-legendary: #e69f00;
}

.cb-tritan {
  --need-water: #0a8a8a;
  --need-water-2: #066464;
  --need-sun: #f06a3c;
  --need-sun-2: #c94a1f;
  --need-food: #7a5236;
  --need-food-2: #573a25;
  --need-joy: #a64ac9;
  --need-joy-2: #7d2fa0;
  --need-love: #e0245e;
  --need-love-2: #b01747;
  --health: #005a42;
  --health-2: #00402f;
  --health-low: #f06a3c;
  --health-bad: #c4123f;
  --good: #087575;
  --good-ink: #066464;
  --good-soft: #d6f0f0;
  --warn: #f06a3c;
  --warn-ink: #9a3a14;
  --danger: #c4123f;
  --danger-2: #9c0e32;
  --danger-ink: #9c0e32;
  --tier-common: #7f7f7f;
  --tier-rare: #0a8a8a;
  --tier-epic: #a64ac9;
  --tier-legendary: #e0245e;
}

.dark.cb-protan,
.dark.cb-deutan,
.theme-darkacademia.cb-protan,
.theme-darkacademia.cb-deutan,
.theme-cyberneon.cb-protan,
.theme-cyberneon.cb-deutan,
.theme-lofi.cb-protan,
.theme-lofi.cb-deutan {
  --good-ink: #7cc0ff;
  --good-soft: #17324a;
  --warn-ink: #ffcc66;
  --danger-ink: #ffa366;
  --health: #2bb88f;
  --health-2: #1f8f6e;
}

.dark.cb-tritan,
.theme-darkacademia.cb-tritan,
.theme-cyberneon.cb-tritan,
.theme-lofi.cb-tritan {
  --good-ink: #5fdede;
  --good-soft: #0f3434;
  --warn-ink: #ffa07a;
  --danger-ink: #ff8fae;
  --health: #2bb88f;
  --health-2: #1f8f6e;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: calc(var(--root-fs) * var(--text-scale));
  -webkit-text-size-adjust: 100%;
}

html[data-platform='ios'] {
  --form-fs-min: 16px;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font);
  font-weight: var(--fw-m);
  line-height: var(--lh);
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: manual;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

[hidden] {
  display: none !important;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);
}

#probe {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

canvas.ic,
canvas.thumb {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

.i {
  width: calc(var(--is, 24px) * var(--is-k));
  height: calc(var(--is, 24px) * var(--is-k));
  flex: none;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.i.thin {
  stroke-width: var(--icon-stroke-thin);
}

.i.solid {
  fill: currentColor;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  letter-spacing: var(--track-title);
  line-height: var(--lh-tight);
}

p {
  margin: 0;
}

.num {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-variant-numeric: tabular-nums;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

.btn {
  min-height: var(--btn-h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-x);
  font-size: var(--fs-m);
  line-height: var(--lh-tight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-shadow: var(--clay);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease), filter var(--t-fast), background var(--t-fast);
  text-align: center;
  position: relative;
}

.btn:active {
  transform: scale(var(--press));
  box-shadow: var(--clay-press);
}

.btn[disabled] {
  filter: grayscale(0.6);
  opacity: 0.6;
  cursor: default;
}

.btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine), var(--elev-2);
}

.btn.secondary {
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent), var(--elev-1);
}

.btn.pop {
  background: linear-gradient(180deg, var(--pop), var(--pop-2));
  color: var(--on-pop);
  box-shadow: var(--btn-shine), var(--elev-2);
}

.btn.gem {
  background: linear-gradient(180deg, var(--gem), var(--gem-2));
  color: var(--on-gem);
  box-shadow: var(--btn-shine), var(--elev-2);
}

.btn.gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-2));
  color: var(--on-gold);
  box-shadow: var(--btn-shine), var(--elev-2);
}

.btn.premium {
  background: linear-gradient(135deg, var(--premium-1), var(--premium-2));
  color: var(--on-premium);
  box-shadow: var(--btn-shine), var(--elev-2);
}

.btn.danger {
  background: linear-gradient(180deg, var(--danger), var(--danger-2));
  color: var(--on-danger);
  box-shadow: var(--btn-shine), var(--elev-2);
}

.btn.ghost {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.ad {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.btn.small {
  min-height: var(--btn-h-s);
  padding: 0 var(--sp-4);
  font-size: var(--fs-s);
}

.btn.wide {
  width: 100%;
}

.btn .i {
  --is: 22px;
}

.icon-btn {
  width: var(--icon-btn);
  height: var(--icon-btn);
  min-width: var(--target);
  min-height: var(--target);
  border-radius: var(--r-pill);
  display: inline-grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-l);
  font-weight: var(--fw-x);
  flex: none;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}

.icon-btn:active {
  transform: scale(var(--press));
}

.icon-btn .i {
  --is: 24px;
}

#screen,
#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

#overlay {
  z-index: 22;
}

#screen.on,
#overlay.on {
  pointer-events: auto;
}

.veil {
  position: absolute;
  inset: 0;
  background: var(--veil);
}

.veil.enter {
  animation: fade var(--t-med) var(--ease);
}

.sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--sheet-w));
  max-height: var(--sheet-max);
  transform: translateX(-50%);
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}

.sheet.enter {
  animation: rise var(--t-slow) var(--ease);
}

.sheet::before {
  content: '';
  display: block;
  flex: none;
  width: var(--grabber-w);
  height: var(--grabber-h);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  margin: var(--sp-2) auto 0;
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100vw - var(--sp-6)), var(--modal-w));
  transform: translate(-50%, -50%);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-4);
  padding: var(--sp-5) var(--sp-4);
  max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - var(--sp-6));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.modal.enter {
  animation: pop var(--t-slow) var(--ease-bounce);
}

.full-screen {
  position: absolute;
  inset: 0;
  background: var(--bg);
  padding: calc(var(--safe-top) + var(--sp-3)) calc(var(--safe-right) + var(--sp-3)) calc(var(--safe-bottom) + var(--sp-3)) calc(var(--safe-left) + var(--sp-3));
  display: flex;
  flex-direction: column;
}

.full-screen.enter {
  animation: fade var(--t-med) var(--ease);
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--pad-sheet);
  flex: none;
}

.sheet-head h2 {
  flex: 1;
  font-size: var(--fs-xl);
  min-width: 0;
}

.sheet-glyph {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-s);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.sheet-head .icon-btn[data-act='back'] {
  margin-left: calc(var(--sp-2) * -1);
}

.scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0 var(--pad-sheet) var(--sp-5);
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  touch-action: pan-x;
  padding: var(--sp-1) 0 var(--sp-3);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs::before {
  content: '';
  position: sticky;
  left: calc(var(--tabs-pad) * -1);
  z-index: 1;
  flex: none;
  align-self: stretch;
  width: var(--tabs-fade);
  margin-right: calc(var(--tabs-fade) * -1 - var(--sp-2));
  background: linear-gradient(to right, var(--tabs-bg), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.tabs-more {
  position: sticky;
  right: calc(var(--tabs-pad) * -1);
  z-index: 1;
  flex: none;
  align-self: stretch;
  display: grid;
  place-items: center end;
  width: var(--tabs-fade);
  margin-left: calc(var(--tabs-fade) * -1 - var(--sp-2));
  color: var(--ink-soft);
  background: linear-gradient(to left, var(--tabs-bg) var(--tabs-solid), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.tabs.more-l::before,
.tabs.more-r > .tabs-more {
  opacity: 1;
}

.tabs.more-r > .tabs-more {
  pointer-events: auto;
}

.full-screen {
  --tabs-bg: var(--bg);
}

.tab {
  flex: none;
  min-height: var(--target);
  min-width: var(--target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
  font-size: var(--fs-s);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.tab:active {
  transform: scale(var(--press-s));
}

.tab.on {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine), var(--elev-1);
}

.card {
  background: var(--surface-2);
  border-radius: var(--r-l);
  padding: var(--sp-4);
  box-shadow: var(--clay);
  position: relative;
}

.card.flat {
  box-shadow: inset 0 0 0 1px var(--line);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--sp-2);
}

.item {
  background: var(--surface-2);
  border-radius: var(--r-m);
  padding: var(--sp-2);
  min-height: var(--target);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  position: relative;
  box-shadow: var(--clay);
  border: 2px solid transparent;
  transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast);
}

button.item:active {
  transform: scale(var(--press-s));
}

.item.on {
  border-color: var(--accent);
}

.item.locked {
  opacity: 0.72;
}

.item .name {
  line-height: var(--lh-tight);
  min-height: 2.3em;
  display: flex;
  align-items: center;
}

.tier {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--surface);
}

.tier-common { background: var(--tier-common); }
.tier-rare { background: var(--tier-rare); border-radius: 2px; transform: rotate(45deg); }
.tier-epic { background: var(--tier-epic); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; box-shadow: none; }
.tier-legendary { background: var(--tier-legendary); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; box-shadow: none; width: 13px; height: 13px; }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  min-height: var(--target);
  background: var(--surface-2);
  border-radius: var(--r-m);
  box-shadow: var(--clay);
  text-align: left;
}

button.row,
label.row {
  width: 100%;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring);
}

button.row:active {
  transform: scale(var(--press-s));
}

.row .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row small,
.muted {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.section {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-m);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.row-btns {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.row-btns > .btn {
  flex: 1 1 auto;
}

.price {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: var(--fw-x);
  font-variant-numeric: tabular-nums;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--pop);
  color: var(--on-pop);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  line-height: var(--lh-tight);
}

.tag.best {
  background: var(--gold);
  color: var(--on-gold);
}

.tag.good {
  background: var(--accent);
  color: var(--on-accent);
}

.tag.soft {
  background: var(--surface-3);
  color: var(--ink);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--target);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2) 3px 6px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  line-height: var(--lh-tight);
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--ink);
}

.status .i {
  --is: 14px;
  stroke-width: 2.75;
}

.status.great,
.status.good { background: var(--good-soft); color: var(--good-ink); }
.status.warn,
.status.low { background: var(--warn-soft); color: var(--warn-ink); }
.status.danger { background: var(--danger-soft); color: var(--danger-ink); }

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: var(--badge-h);
  height: var(--badge-h);
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--pop);
  color: var(--on-pop);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--surface);
  font-variant-numeric: tabular-nums;
}

.dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--r-pill);
  background: var(--pop);
  box-shadow: 0 0 0 2px var(--surface);
}

.bar {
  display: block;
  height: var(--bar-h);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--line);
  overflow: hidden;
  flex: 1;
  min-width: var(--sp-6);
}

.bar i {
  display: block;
  height: 100%;
  width: calc(var(--f) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: width var(--t-slow) var(--ease);
}

.bar.gold i { background: linear-gradient(90deg, var(--gold-hi), var(--gold-2)); }
.bar.gem i { background: linear-gradient(90deg, var(--gem-hi), var(--gem)); }
.bar.pop i { background: linear-gradient(90deg, var(--pop-hi), var(--pop)); }

.ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--rs, 44px);
  height: var(--rs, 44px);
  flex: none;
}

.ring > svg:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring > svg:first-child circle {
  fill: none;
  stroke-width: var(--ring-w, 4);
}

.ring .track {
  stroke: var(--surface-sunk);
}

.ring .fill {
  stroke: var(--rc, url(#g-accent));
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: calc((1 - var(--f, 0)) * 125.66);
  transition: stroke-dashoffset var(--t-slow) var(--ease);
}

.ring.gold .fill { stroke: url(#g-gold); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--ink-soft);
}

.empty b {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-l);
}

.empty .btn {
  margin-top: var(--sp-2);
}

.skel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.skel i {
  display: block;
  height: var(--skel-h);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.skel i:nth-child(3n + 2) { width: 82%; }
.skel i:nth-child(3n) { width: 64%; }

.skel.rows i {
  height: var(--target);
  border-radius: var(--r-m);
  width: 100%;
}

.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.confirm p {
  color: var(--ink-soft);
}

.confirm .row-btns {
  width: 100%;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  position: relative;
  transition: background var(--t-fast);
  flex: none;
  cursor: pointer;
}

.switch::after {
  content: '';
  position: absolute;
  top: calc((var(--switch-h) - var(--switch-knob)) / 2);
  left: calc((var(--switch-h) - var(--switch-knob)) / 2);
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--elev-1), inset 0 0 0 1px var(--line);
  transition: transform var(--t-med) var(--ease-spring);
}

.switch:checked {
  background: var(--accent);
  box-shadow: none;
}

.switch:checked::after {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}

input:where(.text),
select:where(.select),
textarea:where(.text) {
  font-size: max(var(--form-fs-min), var(--form-fs));
}

input.text,
select.select,
textarea.text {
  width: 100%;
  min-height: var(--btn-h);
  border-radius: var(--r-m);
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 0 var(--sp-3);
  font-weight: var(--fw-b);
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

input.text:focus,
select.select:focus,
textarea.text:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus-halo);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
  text-align: left;
  font-size: var(--fs-s);
}

#toast {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + var(--sp-8) + var(--sp-4));
  transform: translateX(-50%);
  z-index: 40;
  background: var(--toast-bg);
  color: var(--toast-ink);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  min-height: var(--target);
  width: max-content;
  max-width: min(calc(100vw - var(--sp-6)), 28rem);
  border-radius: var(--r-l);
  font-weight: var(--fw-b);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  box-shadow: var(--elev-3);
  animation: drop var(--t-med) var(--ease-bounce);
  pointer-events: none;
}

.toast-spin {
  flex: none;
  width: var(--toast-spin);
  height: var(--toast-spin);
  border-radius: var(--r-pill);
  border: var(--toast-spin-w) solid currentColor;
  border-top-color: transparent;
  animation: spin var(--toast-spin-t) linear infinite;
}

#toast.out {
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity var(--t-med), transform var(--t-med);
}

.glass {
  background: var(--hud-glass);
  color: var(--hud-glass-ink);
  box-shadow: inset 0 0 0 1px var(--hud-glass-line), var(--elev-2);
}

.spacer {
  flex: 1;
}

#bubble {
  position: fixed;
  z-index: 12;
  max-width: min(64vw, 280px);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-l);
  background: var(--bubble-bg);
  color: var(--bubble-ink);
  font-size: var(--fs-bubble);
  font-weight: var(--fw-b);
  box-shadow: var(--elev-2);
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: bubble var(--t-slow) var(--ease-bounce);
}

#bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
}

#bubble.out {
  opacity: 0;
  transform: translate(-50%, -90%) scale(0.92);
  transition: opacity var(--t-med), transform var(--t-med);
}

.celebrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  position: relative;
}

.celebrate .big {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-dx);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--text-shadow-hero);
}

.rewards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.reward {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-weight: var(--fw-x);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--line);
  animation: reward-in var(--t-slow) var(--ease-bounce) both;
}

.reward:nth-child(2) { animation-delay: 0.06s; }
.reward:nth-child(3) { animation-delay: 0.12s; }
.reward:nth-child(4) { animation-delay: 0.18s; }
.reward:nth-child(5) { animation-delay: 0.24s; }

.seg {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.seg > button {
  flex: 1 1 auto;
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-b);
  font-size: var(--fs-s);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--t-fast), color var(--t-fast);
}

.seg > button.on,
.seg > button[aria-checked='true'] {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine);
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-delay: 0s !important;
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

.reduce-motion .sheet.enter,
.reduce-motion .modal.enter,
.reduce-motion .veil.enter,
.reduce-motion .full-screen.enter,
.reduce-motion #toast,
.reduce-motion #bubble {
  animation: fade-in var(--t-med) linear !important;
}

.reduce-motion .skel i {
  animation: none !important;
}

@keyframes fade {
  from { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rise {
  from { transform: translate(-50%, 100%); }
}

@keyframes pop {
  from { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
}

@keyframes drop {
  from { transform: translate(-50%, -16px); opacity: 0; }
}

@keyframes bubble {
  from { transform: translate(-50%, -80%) scale(0.6); opacity: 0; }
}

@keyframes nudge {
  0%, 82%, 100% { transform: translateY(0); }
  88% { transform: translateY(-5px); }
  94% { transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes reward-in {
  from { transform: scale(0.6) translateY(6px); opacity: 0; }
}

@media (min-width: 720px) {
  :root {
    --root-fs: 15px;
    --card-min: 104px;
  }
  .lc {
    --root-fs: 16px;
    --card-min: 120px;
  }
}