/* ===========================================================
   Squelch — theme layer.
   Every theme is a full token set on [data-theme=…]: surface + texture,
   panels, die face + pip, CTA, danger, text, fonts, radius, squelch flavor.
   Attribute selectors (not :root) so preview tiles can be themed inline.
   Textures are generated procedurally (CSS gradients + one inline SVG noise
   filter) — no binary assets to download, nothing to lazy-load.
   =========================================================== */

/* shared generated textures */
:root {
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
  --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
  --tex-grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ============ MODERN — clean neutral Swiss (default) ============ */
[data-theme='modern'] {
  --alarm: #ff4b39;
  --felt-900: #0c0d0f;
  --felt-800: #121417;
  --felt-700: #191c20;
  --felt-600: #21252b;
  --felt-500: #2b3037;
  --line: rgba(232, 236, 242, 0.12);
  --line-strong: rgba(232, 236, 242, 0.24);
  --text: #e9edf2;
  --text-dim: #9aa3af;
  --text-faint: #6b7480;
  --bone: #f6f7f9;
  --bone-dim: #c9ced6;
  --die-1: #ffffff;
  --die-2: #eef0f3;
  --die-3: #d6dae0;
  --pip: #14171b;
  --die-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  --ember: #ff5a36;
  --ember-hot: #ff7a5c;
  --cta-ink: #1b0a05;
  --cta-shadow: #a5341c;
  --amber: #ffb648;
  --mint: #4fd1a5;
  --font-ui: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Archivo', 'Satoshi', system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --surface: radial-gradient(120% 85% at 50% -10%, #23272e 0%, #171a1e 45%, #0c0d0f 100%);
  --grain-img: var(--tex-noise);
  --grain-opacity: 0.28;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(255, 90, 54, 0.5), rgba(120, 20, 10, 0.75));
  --stamp-ink: #fff2ee;
  --stamp-line: #fff2ee;
}

/* ============ CASINO — felt, gold leaf, card red ============ */
[data-theme='casino'] {
  --alarm: #ff4a4a;
  --felt-900: #06170f;
  --felt-800: #0a2317;
  --felt-700: #0e2f1e;
  --felt-600: #133c27;
  --felt-500: #1a4b31;
  --line: rgba(226, 196, 122, 0.2);
  --line-strong: rgba(226, 196, 122, 0.42);
  --text: #f2ead6;
  --text-dim: #b6ad92;
  --text-faint: #85806c;
  --bone: #fdf7e6;
  --bone-dim: #e2c47a;
  --die-1: #fdfbf7;
  --die-2: #f6f2e9;
  --die-3: #e2dccd;
  --pip: #0d0b0a;
  --die-shadow: 0 7px 14px rgba(0, 0, 0, 0.6);
  --ember: #c62b2b;
  --ember-hot: #e34141;
  --cta-ink: #fff4ee;
  --cta-shadow: #7d1414;
  --amber: #e2c47a;
  --mint: #6ec89a;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Bebas Neue', 'Archivo', sans-serif;
  --display-weight: 400;
  --display-track: 0.02em;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --surface: radial-gradient(130% 90% at 50% -15%, #1d5637 0%, #10331f 48%, #06170f 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.4;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(198, 43, 43, 0.62), rgba(60, 6, 6, 0.82));
  --stamp-ink: #fdf7e6;
  --stamp-line: #e2c47a;
}

/* ============ RETRO — burnt orange, mustard, cream, CRT ============ */
[data-theme='retro'] {
  --alarm: #ff6a2c;
  --felt-900: #2a1408;
  --felt-800: #38200f;
  --felt-700: #472a15;
  --felt-600: #58351c;
  --felt-500: #6b4324;
  --line: rgba(245, 222, 179, 0.22);
  --line-strong: rgba(245, 222, 179, 0.44);
  --text: #f7e7c6;
  --text-dim: #cbab7f;
  --text-faint: #a08258;
  --bone: #fdf0d5;
  --bone-dim: #e8c887;
  --die-1: #fff6e0;
  --die-2: #f6e3bd;
  --die-3: #dcc191;
  --pip: #3a1c07;
  --die-shadow: 0 6px 0 -1px #8d5a2b, 0 8px 16px rgba(0, 0, 0, 0.5);
  --ember: #da5b33;
  --ember-hot: #f0703c;
  --cta-ink: #2a1002;
  --cta-shadow: #8e2f10;
  --amber: #edb230;
  --mint: #8fbf5a;
  --font-ui: 'Archivo', 'Satoshi', sans-serif;
  --font-display: 'Archivo Black', 'Archivo', sans-serif;
  --display-weight: 900;
  --display-track: -0.03em;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --surface: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    radial-gradient(120% 80% at 50% 0%, #7a4a22 0%, #4a2a13 50%, #2a1408 100%);
  --grain-img: var(--tex-grit);
  --grain-opacity: 0.42;
  --grain-blend: multiply;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(216, 84, 42, 0.66), rgba(70, 16, 4, 0.85));
  --stamp-ink: #fdf0d5;
  --stamp-line: #edb230;
}

/* ============ SPACE — void, starfield, cyan/violet glow ============ */
[data-theme='space'] {
  --alarm: #ff3f63;
  --felt-900: #04060f;
  --felt-800: #070b19;
  --felt-700: #0c1226;
  --felt-600: #131b34;
  --felt-500: #1b2647;
  --line: rgba(150, 200, 255, 0.16);
  --line-strong: rgba(150, 200, 255, 0.34);
  --text: #e6efff;
  --text-dim: #94a6c8;
  --text-faint: #6a7c9d;
  --bone: #f2f6ff;
  --bone-dim: #b9cdf0;
  --die-1: #f2f6f9;
  --die-2: #e5ecf1;
  --die-3: #ccd8e0;
  --pip: #06131a;
  --die-shadow: 0 0 22px rgba(94, 234, 255, 0.35), 0 8px 18px rgba(0, 0, 0, 0.6);
  --ember: #8b5cf6;
  --ember-hot: #a78bfa;
  --cta-ink: #0a0620;
  --cta-shadow: #4c1d95;
  --amber: #5eead4;
  --mint: #5eead4;
  --font-ui: 'Space Grotesk', 'Satoshi', sans-serif;
  --font-display: 'Space Grotesk', 'Archivo', sans-serif;
  --display-weight: 700;
  --display-track: -0.02em;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --surface: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 12%, #dff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 32% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 66% 78%, #cfe 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 88% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 20% 88%, #eef 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 52% 34%, #fff 50%, transparent 51%),
    radial-gradient(60% 45% at 74% 18%, rgba(139, 92, 246, 0.24), transparent 70%),
    radial-gradient(70% 50% at 22% 76%, rgba(94, 234, 212, 0.16), transparent 70%),
    radial-gradient(130% 90% at 50% 0%, #10183a 0%, #070b19 55%, #04060f 100%);
  --grain-img: var(--tex-noise);
  --grain-opacity: 0.18;
  --grain-blend: screen;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(244, 63, 94, 0.55), rgba(30, 5, 40, 0.86));
  --stamp-ink: #f2f6ff;
  --stamp-line: #fb7185;
}

/* ============ FOREST — moss, bark, dappled light ============ */
[data-theme='forest'] {
  --alarm: #f2643a;
  --felt-900: #0a1410;
  --felt-800: #0f1d16;
  --felt-700: #16291f;
  --felt-600: #1e3628;
  --felt-500: #274634;
  --line: rgba(198, 222, 190, 0.15);
  --line-strong: rgba(198, 222, 190, 0.32);
  --text: #e8f0e2;
  --text-dim: #a3b79b;
  --text-faint: #778a70;
  --bone: #f3f0e2;
  --bone-dim: #cdd8bd;
  --die-1: #fbf8ea;
  --die-2: #eee9d4;
  --die-3: #d3cdb2;
  --pip: #1a2415;
  --die-shadow: 0 7px 14px rgba(0, 0, 0, 0.5);
  --ember: #c86038;
  --ember-hot: #dd6c3c;
  --cta-ink: #1d0d05;
  --cta-shadow: #7d3116;
  --amber: #d8a441;
  --mint: #7fc286;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Bitter', 'Archivo', serif;
  --display-weight: 800;
  --display-track: -0.01em;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --surface: radial-gradient(50% 40% at 22% 8%, rgba(226, 240, 180, 0.14), transparent 70%),
    radial-gradient(40% 30% at 78% 26%, rgba(226, 240, 180, 0.1), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #1f3a29 0%, #14251b 50%, #0a1410 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.34;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(196, 86, 43, 0.6), rgba(30, 14, 6, 0.86));
  --stamp-ink: #f3f0e2;
  --stamp-line: #f3f0e2;
}

/* ============ MOUNTAIN — slate, granite, snow, alpine blue ============ */
[data-theme='mountain'] {
  --alarm: #ff6a4d;
  --felt-900: #0d1116;
  --felt-800: #141a21;
  --felt-700: #1c242d;
  --felt-600: #262f3a;
  --felt-500: #313d4a;
  --line: rgba(214, 228, 242, 0.14);
  --line-strong: rgba(214, 228, 242, 0.3);
  --text: #eaf1f8;
  --text-dim: #a0aebc;
  --text-faint: #74818f;
  --bone: #fbfdff;
  --bone-dim: #cddbe8;
  --die-1: #ffffff;
  --die-2: #eef4fa;
  --die-3: #cfdae5;
  --pip: #16202a;
  --die-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  --ember: #e2593f;
  --ember-hot: #f5765b;
  --cta-ink: #1a0805;
  --cta-shadow: #93331f;
  --amber: #63b3ed;
  --mint: #6dd3b3;
  --font-ui: 'Archivo', 'Satoshi', sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.025em;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --surface: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0 22%, transparent 22.5%),
    radial-gradient(120% 90% at 50% -5%, #2c3947 0%, #1a222b 50%, #0d1116 100%);
  --grain-img: var(--tex-grit);
  --grain-opacity: 0.3;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(226, 89, 63, 0.55), rgba(14, 22, 30, 0.88));
  --stamp-ink: #fbfdff;
  --stamp-line: #fbfdff;
}

/* ============ OCEAN — abyss teal, foam, caustics ============ */
[data-theme='ocean'] {
  --alarm: #ff7a55;
  --felt-900: #03151c;
  --felt-800: #06212b;
  --felt-700: #0a2f3c;
  --felt-600: #0e3e4e;
  --felt-500: #145062;
  --line: rgba(180, 235, 245, 0.16);
  --line-strong: rgba(180, 235, 245, 0.34);
  --text: #e4f6fa;
  --text-dim: #94b8c2;
  --text-faint: #6a8f99;
  --bone: #f4fbfd;
  --bone-dim: #bcdfe8;
  --die-1: #ffffff;
  --die-2: #e9f7fb;
  --die-3: #c4dfe8;
  --pip: #06222c;
  --die-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  --ember: #ff6b4a;
  --ember-hot: #ff8a6b;
  --cta-ink: #170603;
  --cta-shadow: #9c3520;
  --amber: #56d4e0;
  --mint: #5fd6a8;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --surface: radial-gradient(60% 24% at 20% 12%, rgba(120, 235, 255, 0.14), transparent 70%),
    radial-gradient(50% 20% at 70% 30%, rgba(120, 235, 255, 0.1), transparent 70%),
    radial-gradient(70% 26% at 45% 66%, rgba(120, 235, 255, 0.08), transparent 70%),
    radial-gradient(130% 95% at 50% -5%, #0d4a5c 0%, #06283340 45%, #03151c 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(255, 107, 74, 0.55), rgba(3, 21, 28, 0.88));
  --stamp-ink: #f4fbfd;
  --stamp-line: #ff8a6b;
}

/* ============ KITCHEN TABLE — oak grain + checkered placemat ============ */
[data-theme='kitchen'] {
  --alarm: #f2542d;
  --felt-900: #241505;
  --felt-800: #33200b;
  --felt-700: #422b12;
  --felt-600: #53381a;
  --felt-500: #664724;
  --line: rgba(255, 236, 202, 0.2);
  --line-strong: rgba(255, 236, 202, 0.4);
  --text: #fbeed6;
  --text-dim: #cdb28c;
  --text-faint: #a08a68;
  --bone: #fff8e8;
  --bone-dim: #ecd3a6;
  --die-1: #f9f6ee;
  --die-2: #f0ebdd;
  --die-3: #dcd4c2;
  --pip: #15120e;
  --die-shadow: 0 6px 14px rgba(0, 0, 0, 0.52);
  --ember: #d26048;
  --ember-hot: #e56545;
  --cta-ink: #2a0d05;
  --cta-shadow: #872c17;
  --amber: #e8a83c;
  --mint: #86bd6a;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Bitter', serif;
  --display-weight: 800;
  --display-track: -0.01em;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --surface: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.14) 0 3px, rgba(255, 220, 170, 0.05) 3px 9px, rgba(0, 0, 0, 0.09) 9px 13px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 40px, rgba(255, 255, 255, 0.03) 40px 84px),
    radial-gradient(120% 90% at 50% 0%, #7a4f22 0%, #4a2f12 55%, #241505 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.4;
  --grain-blend: multiply;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(204, 74, 47, 0.62), rgba(40, 14, 5, 0.86));
  --stamp-ink: #fff8e8;
  --stamp-line: #cc4a2f;
}

/* ============ RESTAURANT — white linen, brass, candlelight ============ */
[data-theme='restaurant'] {
  --alarm: #f04a2c;
  --felt-900: #241d16;
  --felt-800: #2c241c;
  --felt-700: #392f25;
  --felt-600: #3a3026;
  --felt-500: #4a3d30;
  --line: rgba(238, 226, 205, 0.2);
  --line-strong: rgba(238, 226, 205, 0.38);
  --text: #f6efe2;
  --text-dim: #c3b6a1;
  --text-faint: #93887a;
  --bone: #fffdf7;
  --bone-dim: #e6d4b0;
  --die-1: #ffffff;
  --die-2: #f8f2e6;
  --die-3: #ded3bd;
  --pip: #241d15;
  --die-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  --ember: #b03a2e;
  --ember-hot: #cc5442;
  --cta-ink: #fff6ee;
  --cta-shadow: #6f2018;
  --amber: #d9b264;
  --mint: #86b98d;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --display-weight: 900;
  --display-track: -0.01em;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  /* candlelit linen: the weave reads brighter and the pool of candlelight above
     the table is warmer, so the room is walnut and brass rather than mud */
  --surface: repeating-linear-gradient(45deg, rgba(255, 248, 230, 0.07) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 248, 230, 0.07) 0 2px, transparent 2px 6px),
    radial-gradient(112% 82% at 50% -6%, #6d5740 0%, #43362a 50%, #29211a 100%);
  --grain-img: var(--tex-noise);
  --grain-opacity: 0.22;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(224, 62, 38, 0.72), rgba(26, 12, 8, 0.92));
  --stamp-ink: #fffdf7;
  --stamp-line: #d9b264;
}

/* ============ BAR — dim amber, dark wood, neon ============ */
[data-theme='bar'] {
  --alarm: #ff5f34;
  --felt-900: #100b08;
  --felt-800: #17100b;
  --felt-700: #1f1710;
  --felt-600: #2a2016;
  --felt-500: #372a1d;
  --line: rgba(255, 205, 130, 0.17);
  --line-strong: rgba(255, 205, 130, 0.36);
  --text: #f6e3c6;
  --text-dim: #c0a37c;
  --text-faint: #8e7859;
  --bone: #fdf1dc;
  --bone-dim: #e5c48c;
  --die-1: #fff7e8;
  --die-2: #f2e2c6;
  --die-3: #d6c2a0;
  --pip: #23180c;
  --die-shadow: 0 0 18px rgba(255, 176, 60, 0.18), 0 7px 14px rgba(0, 0, 0, 0.6);
  --ember: #e14b2c;
  --ember-hot: #ff6a45;
  --cta-ink: #1e0803;
  --cta-shadow: #8c2a13;
  --amber: #ffb43c;
  --mint: #7fc9a1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Bebas Neue', 'Archivo', sans-serif;
  --display-weight: 400;
  --display-track: 0.03em;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --surface: radial-gradient(45% 26% at 82% 8%, rgba(255, 150, 60, 0.22), transparent 70%),
    radial-gradient(40% 22% at 14% 16%, rgba(80, 200, 255, 0.12), transparent 70%),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.2) 0 4px, rgba(255, 190, 120, 0.035) 4px 11px),
    radial-gradient(120% 90% at 50% 0%, #3a2818 0%, #1d140d 55%, #100b08 100%);
  --grain-img: var(--tex-grit);
  --grain-opacity: 0.36;
  --grain-blend: multiply;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(225, 75, 44, 0.62), rgba(20, 8, 4, 0.9));
  --stamp-ink: #fdf1dc;
  --stamp-line: #ffb43c;
}

/* ============ PUB — hunter green, mahogany, cream, brass ============ */
[data-theme='pub'] {
  --alarm: #f4592c;
  --felt-900: #0b1610;
  --felt-800: #102018;
  --felt-700: #162c20;
  --felt-600: #1f3a2b;
  --felt-500: #2a4a37;
  --line: rgba(240, 226, 196, 0.2);
  --line-strong: rgba(240, 226, 196, 0.4);
  --text: #f4ebd6;
  --text-dim: #bfb195;
  --text-faint: #8d8270;
  --bone: #fbf4e2;
  --bone-dim: #e3cd9c;
  --die-1: #fffaee;
  --die-2: #f4ead2;
  --die-3: #dbceae;
  --pip: #1b2016;
  --die-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  --ember: #b7472c;
  --ember-hot: #d0603f;
  --cta-ink: #fff3e9;
  --cta-shadow: #71230f;
  --amber: #ddb262;
  --mint: #82bd8c;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --display-weight: 800;
  --display-track: 0;
  --r-sm: 5px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-xl: 18px;
  --surface: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 5px, rgba(255, 230, 190, 0.03) 5px 12px),
    radial-gradient(120% 88% at 50% -5%, #27523a 0%, #14261b 52%, #0b1610 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.34;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(183, 71, 44, 0.62), rgba(11, 22, 16, 0.9));
  --stamp-ink: #fbf4e2;
  --stamp-line: #ddb262;
}

/* ============ DINER — chrome, cherry red, mint vinyl, checker ============ */
[data-theme='diner'] {
  --alarm: #ff2438;
  --felt-900: #101418;
  --felt-800: #161c22;
  --felt-700: #1e262e;
  --felt-600: #27323c;
  --felt-500: #33404c;
  --line: rgba(226, 246, 246, 0.16);
  --line-strong: rgba(226, 246, 246, 0.34);
  --text: #eff7f7;
  --text-dim: #a4b4b8;
  --text-faint: #77878b;
  --bone: #fffdfa;
  --bone-dim: #cfe3e0;
  --die-1: #ffffff;
  --die-2: #f2f8f7;
  --die-3: #d3e0de;
  --pip: #14191c;
  --die-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  --ember: #e34050;
  --ember-hot: #ff4152;
  --cta-ink: #220407;
  --cta-shadow: #8d1420;
  --amber: #57d7c4;
  --mint: #57d7c4;
  --font-ui: 'Archivo', 'Satoshi', sans-serif;
  --font-display: 'Archivo Black', 'Archivo', sans-serif;
  --display-weight: 900;
  --display-track: -0.03em;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 999px;
  --r-xl: 999px;
  --surface: repeating-conic-gradient(from 45deg at 50% 50%, rgba(255, 255, 255, 0.035) 0 25%, transparent 0 50%) 0 0 / 56px 56px,
    radial-gradient(120% 90% at 50% 0%, #2c3a46 0%, #1a2228 55%, #101418 100%);
  --grain-img: var(--tex-noise);
  --grain-opacity: 0.2;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(224, 43, 60, 0.62), rgba(16, 20, 24, 0.88));
  --stamp-ink: #fffdfa;
  --stamp-line: #fffdfa;
}

/* ============ CAMPFIRE — embers, char, night blue ============ */
[data-theme='campfire'] {
  --alarm: #ff6a2a;
  --felt-900: #0a0906;
  --felt-800: #120f0a;
  --felt-700: #1b1610;
  --felt-600: #261e15;
  --felt-500: #33271b;
  --line: rgba(255, 196, 140, 0.18);
  --line-strong: rgba(255, 196, 140, 0.36);
  --text: #f7e6d2;
  --text-dim: #c2a68a;
  --text-faint: #8d7962;
  --bone: #fdefdc;
  --bone-dim: #e9c9a0;
  --die-1: #fff6e6;
  --die-2: #f0dfc6;
  --die-3: #d2bda0;
  --pip: #1d150d;
  --die-shadow: 0 0 24px rgba(255, 140, 40, 0.22), 0 7px 14px rgba(0, 0, 0, 0.66);
  --ember: #e2542a;
  --ember-hot: #ff7a3c;
  --cta-ink: #1c0703;
  --cta-shadow: #8b2c0e;
  --amber: #ffa53c;
  --mint: #8ec98f;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Bitter', serif;
  --display-weight: 800;
  --display-track: -0.01em;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;
  --surface: radial-gradient(45% 30% at 50% 94%, rgba(255, 140, 40, 0.3), transparent 72%),
    radial-gradient(70% 40% at 50% 100%, rgba(255, 90, 20, 0.16), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, #1d2740 0%, #12100b 55%, #0a0906 100%);
  --grain-img: var(--tex-grit);
  --grain-opacity: 0.34;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(226, 84, 42, 0.66), rgba(10, 9, 6, 0.9));
  --stamp-ink: #fdefdc;
  --stamp-line: #ffa53c;
}

/* ============ SALOON — dusty leather, sun-bleached wood, tin star ============ */
[data-theme='saloon'] {
  --alarm: #f4592c;
  --felt-900: #1c1409;
  --felt-800: #261b0d;
  --felt-700: #322414;
  --felt-600: #40301b;
  --felt-500: #513e25;
  --line: rgba(240, 216, 168, 0.2);
  --line-strong: rgba(240, 216, 168, 0.4);
  --text: #f5e5c4;
  --text-dim: #c4ab83;
  --text-faint: #948062;
  --bone: #fdf2d9;
  --bone-dim: #e6c893;
  --die-1: #fff9ea;
  --die-2: #f2e5c8;
  --die-3: #d8c6a3;
  --pip: #2a1d0b;
  --die-shadow: 0 6px 13px rgba(0, 0, 0, 0.55);
  --ember: #b8412a;
  --ember-hot: #d4573b;
  --cta-ink: #fdf2d9;
  --cta-shadow: #72220f;
  --amber: #d7a648;
  --mint: #9ab86a;
  --font-ui: 'Archivo', 'Satoshi', sans-serif;
  --font-display: 'Bitter', serif;
  --display-weight: 900;
  --display-track: -0.01em;
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 11px;
  --r-xl: 15px;
  --surface: repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.18) 0 6px, rgba(255, 225, 170, 0.04) 6px 14px),
    radial-gradient(120% 90% at 50% 0%, #5c4526 0%, #2f2213 55%, #1c1409 100%);
  --grain-img: var(--tex-grit);
  --grain-opacity: 0.4;
  --grain-blend: multiply;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(184, 65, 42, 0.64), rgba(28, 20, 9, 0.9));
  --stamp-ink: #fdf2d9;
  --stamp-line: #d7a648;
}

/* ============ SPEAKEASY — ink black, deep plum, brass, art deco ============ */
[data-theme='speakeasy'] {
  --alarm: #ff3b6b;
  --felt-900: #0b0810;
  --felt-800: #120d19;
  --felt-700: #1a1324;
  --felt-600: #241a31;
  --felt-500: #32243f;
  --line: rgba(226, 198, 148, 0.2);
  --line-strong: rgba(226, 198, 148, 0.4);
  --text: #f2e8dc;
  --text-dim: #b7a795;
  --text-faint: #897d70;
  --bone: #f9f0e4;
  --bone-dim: #dfc294;
  --die-1: #fffaf1;
  --die-2: #efe4d3;
  --die-3: #cfc0ac;
  --pip: #1a1119;
  --die-shadow: 0 8px 18px rgba(0, 0, 0, 0.66);
  --ember: #a8324a;
  --ember-hot: #c94764;
  --cta-ink: #fff1f2;
  --cta-shadow: #67142a;
  --amber: #dfc294;
  --mint: #7fbf9c;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --display-weight: 900;
  --display-track: 0;
  --r-sm: 2px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 12px;
  --surface: repeating-linear-gradient(135deg, rgba(223, 194, 148, 0.06) 0 1px, transparent 1px 14px),
    radial-gradient(110% 80% at 50% -8%, #33224a 0%, #17101f 52%, #0b0810 100%);
  --grain-img: var(--tex-noise);
  --grain-opacity: 0.26;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(201, 71, 100, 0.6), rgba(11, 8, 16, 0.92));
  --stamp-ink: #f9f0e4;
  --stamp-line: #dfc294;
}

/* ============ ARCADE — CRT black, hot magenta, electric lime ============ */
[data-theme='arcade'] {
  --alarm: #ff2d78;
  --felt-900: #060410;
  --felt-800: #0b0718;
  --felt-700: #120c24;
  --felt-600: #1b1233;
  --felt-500: #251945;
  --line: rgba(180, 255, 220, 0.2);
  --line-strong: rgba(180, 255, 220, 0.4);
  --text: #eafff6;
  --text-dim: #9fc4bb;
  --text-faint: #74968f;
  --bone: #f6fffb;
  --bone-dim: #b9f4dd;
  --die-1: #ffffff;
  --die-2: #eafff7;
  --die-3: #c2e8db;
  --pip: #0d0a1c;
  --die-shadow: 0 0 20px rgba(255, 62, 165, 0.28), 0 7px 14px rgba(0, 0, 0, 0.62);
  --ember: #ff2e88;
  --ember-hot: #ff5aa3;
  --cta-ink: #14020a;
  --cta-shadow: #a01055;
  --amber: #b6ff3c;
  --mint: #56ffc2;
  --font-ui: 'Space Grotesk', 'Satoshi', sans-serif;
  --font-display: 'Bebas Neue', 'Archivo', sans-serif;
  --display-weight: 400;
  --display-track: 0.04em;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 10px;
  --surface: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
    radial-gradient(50% 30% at 20% 10%, rgba(255, 46, 136, 0.22), transparent 70%),
    radial-gradient(50% 30% at 82% 76%, rgba(86, 255, 194, 0.16), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #1d1240 0%, #0a0718 55%, #060410 100%);
  --grain-img: var(--tex-noise);
  --grain-opacity: 0.2;
  --grain-blend: screen;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(255, 46, 136, 0.6), rgba(6, 4, 16, 0.9));
  --stamp-ink: #f6fffb;
  --stamp-line: #b6ff3c;
}

/* ============ NOIR — high-contrast monochrome, venetian blinds ============ */
[data-theme='noir'] {
  --alarm: #e11d1d;
  --felt-900: #08090a;
  --felt-800: #0e0f11;
  --felt-700: #161719;
  --felt-600: #1f2124;
  --felt-500: #2b2d31;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.3);
  --text: #f2f3f4;
  --text-dim: #a5a8ac;
  --text-faint: #74777b;
  --bone: #ffffff;
  --bone-dim: #cbcdd0;
  --die-1: #ffffff;
  --die-2: #ececec;
  --die-3: #cfd0d1;
  --pip: #0b0b0c;
  --die-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
  --ember: #d9d9d9;
  --ember-hot: #ffffff;
  --cta-ink: #0b0b0c;
  --cta-shadow: #6e6e6e;
  --amber: #e8e8e8;
  --mint: #b9c6bd;
  --font-ui: 'Archivo', 'Satoshi', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --display-weight: 900;
  --display-track: -0.01em;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --surface: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.055) 0 3px, transparent 3px 26px),
    radial-gradient(120% 90% at 50% 0%, #24262a 0%, #121315 55%, #08090a 100%);
  --grain-img: var(--tex-grit);
  --grain-opacity: 0.34;
  --grain-blend: overlay;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(225, 29, 29, 0.6), rgba(0, 0, 0, 0.95));
  --stamp-ink: #ffffff;
  --stamp-line: #ffffff;
}

/* ============ BEACH — sun-bleached sand, surf, sunset coral ============ */
[data-theme='beach'] {
  --alarm: #ff5a35;
  --felt-900: #12212b;
  --felt-800: #1a2f3a;
  --felt-700: #234050;
  --felt-600: #2d5164;
  --felt-500: #3a6478;
  --line: rgba(255, 240, 214, 0.2);
  --line-strong: rgba(255, 240, 214, 0.4);
  --text: #fdf3e0;
  --text-dim: #c3bda9;
  --text-faint: #94907f;
  --bone: #fff8ea;
  --bone-dim: #f0d9a8;
  --die-1: #fffdf6;
  --die-2: #f7ecd7;
  --die-3: #ddccb0;
  --pip: #1d3340;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #f2603c;
  --ember-hot: #ff7d5b;
  --cta-ink: #240701;
  --cta-shadow: #a3341a;
  --amber: #ffc46e;
  --mint: #4fd0b0;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 26% at 50% 4%, rgba(255, 196, 110, 0.22), transparent 70%),
    repeating-linear-gradient(4deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 18px),
    radial-gradient(120% 90% at 50% 0%, #3f6f84 0%, #21414f 52%, #12212b 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.26;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(242, 96, 60, 0.62), rgba(18, 33, 43, 0.88));
  --stamp-ink: #fff8ea;
  --stamp-line: #fff8ea;
}


/* Windy Point: the overlook above Tucson. Panels in the basin's haze blues,
   type in bleached bone, the call to action in sun-warmed granite. */
[data-theme='windypoint'] {
  --alarm: #ff6a45;
  --felt-900: #1b2230;
  --felt-800: #242d3d;
  --felt-700: #2e3a4d;
  --felt-600: #3a475d;
  --felt-500: #47566e;
  --line: rgba(232, 226, 214, 0.18);
  --line-strong: rgba(232, 226, 214, 0.38);
  --text: #f4efe6;
  --text-dim: #c4bcae;
  --text-faint: #948d81;
  --bone: #fbf7ee;
  --bone-dim: #e6d9c2;
  --die-1: #fffdf6;
  --die-2: #f4efe2;
  --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #d0714a;
  --ember-hot: #e8895f;
  --cta-ink: #1f0d05;
  --cta-shadow: #8c4426;
  --amber: #f0c078;
  --mint: #6fc9b1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 26% at 50% 4%, rgba(240, 192, 120, 0.18), transparent 70%),
    repeating-linear-gradient(-6deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 16px),
    radial-gradient(120% 90% at 50% 0%, #8f9db4 0%, #4f5d75 50%, #1b2230 100%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, rgba(208, 113, 74, 0.62), rgba(27, 34, 48, 0.88));
  --stamp-ink: #fbf7ee;
  --stamp-line: #fbf7ee;
}
/* the fractal rooms — palettes pulled from Peter's artwork */
[data-theme='fractaltemple'] {
  --alarm: #ff6a45;
  --felt-900: #1c1612;
  --felt-800: #261e18;
  --felt-700: #32271f;
  --felt-600: #3f3127;
  --felt-500: #4d3c30;
  --line: rgba(232, 226, 214, 0.18);
  --line-strong: rgba(232, 226, 214, 0.38);
  --text: #f4efe6;
  --text-dim: #c4bcae;
  --text-faint: #948d81;
  --bone: #fbf7ee;
  --bone-dim: #e6d9c2;
  --die-1: #fffdf6;
  --die-2: #f4efe2;
  --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #d8793a;
  --ember-hot: #ee9250;
  --cta-ink: #1f0d05;
  --cta-shadow: #83431c;
  --amber: #f2b56a;
  --mint: #6fc9b1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 30% at 50% 4%, #c0703a44, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #4d5a6e 0%, #1c1612 70%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, #d8793a9e, #1c1612e0);
  --stamp-ink: #fbf7ee;
  --stamp-line: #fbf7ee;
}

[data-theme='goldlattice'] {
  --alarm: #ff6a45;
  --felt-900: #16140c;
  --felt-800: #201c12;
  --felt-700: #2b2618;
  --felt-600: #37301f;
  --felt-500: #443b27;
  --line: rgba(232, 226, 214, 0.18);
  --line-strong: rgba(232, 226, 214, 0.38);
  --text: #f4efe6;
  --text-dim: #c4bcae;
  --text-faint: #948d81;
  --bone: #fbf7ee;
  --bone-dim: #e6d9c2;
  --die-1: #fffdf6;
  --die-2: #f4efe2;
  --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #e0a52c;
  --ember-hot: #f2bd48;
  --cta-ink: #1f0d05;
  --cta-shadow: #86600f;
  --amber: #ffd46a;
  --mint: #6fc9b1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 30% at 50% 4%, #e0a52c44, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #35425e 0%, #16140c 70%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, #e0a52c9e, #16140ce0);
  --stamp-ink: #fbf7ee;
  --stamp-line: #fbf7ee;
}

[data-theme='filigree'] {
  --alarm: #ff6a45;
  --felt-900: #17120e;
  --felt-800: #211a14;
  --felt-700: #2c231a;
  --felt-600: #382c21;
  --felt-500: #45372a;
  --line: rgba(232, 226, 214, 0.18);
  --line-strong: rgba(232, 226, 214, 0.38);
  --text: #f4efe6;
  --text-dim: #c4bcae;
  --text-faint: #948d81;
  --bone: #fbf7ee;
  --bone-dim: #e6d9c2;
  --die-1: #fffdf6;
  --die-2: #f4efe2;
  --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #e0782c;
  --ember-hot: #f39147;
  --cta-ink: #1f0d05;
  --cta-shadow: #86431a;
  --amber: #f0c070;
  --mint: #6fc9b1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 30% at 50% 4%, #b8752e44, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #3b3128 0%, #17120e 70%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, #e0782c9e, #17120ee0);
  --stamp-ink: #fbf7ee;
  --stamp-line: #fbf7ee;
}

[data-theme='stararches'] {
  --alarm: #ff6a45;
  --felt-900: #12131f;
  --felt-800: #1a1c2c;
  --felt-700: #23263a;
  --felt-600: #2d3149;
  --felt-500: #393e59;
  --line: rgba(232, 226, 214, 0.18);
  --line-strong: rgba(232, 226, 214, 0.38);
  --text: #f4efe6;
  --text-dim: #c4bcae;
  --text-faint: #948d81;
  --bone: #fbf7ee;
  --bone-dim: #e6d9c2;
  --die-1: #fffdf6;
  --die-2: #f4efe2;
  --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #e07a45;
  --ember-hot: #f3945f;
  --cta-ink: #1f0d05;
  --cta-shadow: #853f1e;
  --amber: #f2b27a;
  --mint: #6fc9b1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 30% at 50% 4%, #6a74c844, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #2d2a4a 0%, #12131f 70%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, #e07a459e, #12131fe0);
  --stamp-ink: #fbf7ee;
  --stamp-line: #fbf7ee;
}

[data-theme='coppervortex'] {
  --alarm: #ff6a45;
  --felt-900: #1c120d;
  --felt-800: #271912;
  --felt-700: #332119;
  --felt-600: #402a1f;
  --felt-500: #4e3427;
  --line: rgba(232, 226, 214, 0.18);
  --line-strong: rgba(232, 226, 214, 0.38);
  --text: #f4efe6;
  --text-dim: #c4bcae;
  --text-faint: #948d81;
  --bone: #fbf7ee;
  --bone-dim: #e6d9c2;
  --die-1: #fffdf6;
  --die-2: #f4efe2;
  --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.45);
  --ember: #e27442;
  --ember-hot: #f58e5c;
  --cta-ink: #1f0d05;
  --cta-shadow: #873e1f;
  --amber: #f6b890;
  --mint: #6fc9b1;
  --font-ui: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Archivo', sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --surface: radial-gradient(60% 30% at 50% 4%, #c8653a44, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #4a2c1e 0%, #1c120d 70%);
  --grain-img: var(--tex-fibre);
  --grain-opacity: 0.24;
  --grain-blend: soft-light;
  --squelch-bg: radial-gradient(circle at 50% 45%, #e274429e, #1c120de0);
  --stamp-ink: #fbf7ee;
  --stamp-line: #fbf7ee;
}

/* ===========================================================
   DICE SKINS — an independent cosmetic axis from table themes.
   [data-die='…'] only touches die-face / pip / edge tokens, so any
   owned die combines with any owned table theme.
   =========================================================== */
[data-die='bone'] {
  --die-1: #fffdf6; --die-2: #f4efe2; --die-3: #ded6c4;
  --pip: #14110c;
  --die-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}
[data-die='wood'] {
  --die-1: #d9a465; --die-2: #c08a4c; --die-3: #96632f;
  --pip: #341c07;
  --die-shadow: 0 6px 13px rgba(0, 0, 0, 0.55);
  --die-face-tex: repeating-linear-gradient(96deg, rgba(60, 30, 5, 0.16) 0 2px, rgba(255, 220, 170, 0.09) 2px 6px);
}
[data-die='precision'] {
  --die-1: #f0413f; --die-2: #d92b2b; --die-3: #a81a1c;
  --pip: #fff6f2;
  --die-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}
[data-die='glow'] {
  --die-1: #3fd6f2; --die-2: #139bbb; --die-3: #075266;
  --pip: #02121a;
  --die-shadow: 0 0 18px 4px rgba(40, 215, 255, 0.55), 0 0 42px rgba(30, 190, 240, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
/* light from inside: a hot core on every face fading to a deep rim. It is the
   face BACKGROUND, under the pips — an overlay on top would grey them. */
[data-die='glow'] .die-face {
  background: radial-gradient(circle at 50% 50%, #7eeaff 0%, #2cc6ea 34%, #0f86a6 72%, #064c60 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 240, 255, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(2, 40, 55, 0.55);
}
/* GLOW FAMILY: generated by tools/glow-css.mjs from the glow block above */
[data-die='glowred'] {
  --die-1: #f23f51; --die-2: #bb131e; --die-3: #66070b;
  --pip: #1a0402;
  --die-shadow: 0 0 18px 4px rgba(255, 40, 55, 0.55), 0 0 42px rgba(240, 30, 34, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glowred'] .die-face {
  background: radial-gradient(circle at 50% 50%, #ff7e8a 0%, #ea2c38 34%, #a60f15 72%, #600609 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 162, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(55, 3, 2, 0.55);
}
[data-die='gloworange'] {
  --die-1: #f2813f; --die-2: #bb5713; --die-3: #662f07;
  --pip: #1a0f02;
  --die-shadow: 0 0 18px 4px rgba(255, 126, 40, 0.55), 0 0 42px rgba(240, 124, 30, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='gloworange'] .die-face {
  background: radial-gradient(circle at 50% 50%, #ffae7e 0%, #ea782c 34%, #a64f0f 72%, #602d06 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 187, 150, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(55, 28, 2, 0.55);
}
[data-die='glowgold'] {
  --die-1: #f2bd3f; --die-2: #bb8f13; --die-3: #664f07;
  --pip: #1a1702;
  --die-shadow: 0 0 18px 4px rgba(255, 197, 40, 0.55), 0 0 42px rgba(240, 194, 30, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glowgold'] .die-face {
  background: radial-gradient(circle at 50% 50%, #ffd97e 0%, #eab82c 34%, #a6810f 72%, #604b06 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 150, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(55, 46, 2, 0.55);
}
[data-die='glowgreen'] {
  --die-1: #3ff266; --die-2: #13bb3d; --die-3: #076621;
  --pip: #021a0b;
  --die-shadow: 0 0 18px 4px rgba(40, 255, 93, 0.55), 0 0 42px rgba(30, 240, 93, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glowgreen'] .die-face {
  background: radial-gradient(circle at 50% 50%, #7eff9b 0%, #2cea5c 34%, #0fa638 72%, #066020 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 255, 171, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(2, 55, 20, 0.55);
}
[data-die='glownuclear'] {
  --die-1: #a4f23f; --die-2: #6cbb13; --die-3: #386607;
  --pip: #0b1a02;
  --die-shadow: 0 0 18px 4px rgba(155, 255, 40, 0.55), 0 0 42px rgba(132, 240, 30, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glownuclear'] .die-face {
  background: radial-gradient(circle at 50% 50%, #c6ff7e 0%, #91ea2c 34%, #5ca60f 72%, #336006 100%);
  box-shadow: inset 0 0 0 1px rgba(211, 255, 150, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(25, 55, 2, 0.55);
}
[data-die='glowpurple'] {
  --die-1: #a53ff2; --die-2: #7813bb; --die-3: #420766;
  --pip: #14021a;
  --die-shadow: 0 0 18px 4px rgba(169, 40, 255, 0.55), 0 0 42px rgba(166, 30, 240, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glowpurple'] .die-face {
  background: radial-gradient(circle at 50% 50%, #c87eff 0%, #9e2cea 34%, #6d0fa6 72%, #3f0660 100%);
  box-shadow: inset 0 0 0 1px rgba(208, 150, 255, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(39, 2, 55, 0.55);
}
[data-die='glowpink'] {
  --die-1: #f23fb0; --die-2: #bb1377; --die-3: #66073e;
  --pip: #1a020d;
  --die-shadow: 0 0 18px 4px rgba(255, 40, 169, 0.55), 0 0 42px rgba(240, 30, 146, 0.35), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glowpink'] .die-face {
  background: radial-gradient(circle at 50% 50%, #ff7ecf 0%, #ea2c9e 34%, #a60f66 72%, #600639 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 218, 0.45), inset 0 0 calc(var(--d, 60px) * 0.18) rgba(55, 2, 29, 0.55);
}
/* /GLOW FAMILY */
/* TIE-DYE GLOW (2D): the same six folds as the 3D dice — spiral, bullseye,
   crumple, sunburst, double spiral and V-fold — one per die, each its own run
   through the rainbow, under the Glow die's hot core and deep rim. */
[data-die='glowtiedye'] {
  --die-1: #e754bd; --die-2: #8354e7; --die-3: #3bace3;
  --pip: #05030a;
  --td-core: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%);
  --td1: conic-gradient(from 20deg at 48% 52%, #e44560, #e27f37, #e3c13b, #52cc67, #3bace3, #8354e7, #e44560, #e27f37, #e3c13b, #52cc67, #3bace3, #8354e7, #e44560);
  --td2: repeating-radial-gradient(circle at 52% 48%, #e3c13b 0 7%, #e27f37 7% 14%, #e44560 14% 21%, #e754bd 21% 28%, #8354e7 28% 35%, #3bace3 35% 42%, #52cc67 42% 49%);
  --td3: radial-gradient(circle at 22% 30%, #e3c13b 0 12%, transparent 22%), radial-gradient(circle at 72% 26%, #e44560 0 10%, transparent 20%),
    radial-gradient(circle at 60% 72%, #e27f37 0 12%, transparent 22%), radial-gradient(circle at 26% 76%, #3bace3 0 10%, transparent 21%),
    radial-gradient(circle at 50% 50%, #52cc67 0 18%, transparent 30%), linear-gradient(135deg, #e754bd, #8354e7 50%, #e754bd);
  --td4: repeating-conic-gradient(from 0deg at 50% 50%, #e3c13b 0 8.33%, #52cc67 8.33% 16.66%, #3bace3 16.66% 25%, #8354e7 25% 33.33%, #e754bd 33.33% 41.66%, #e44560 41.66% 50%);
  --td5: conic-gradient(from 90deg at 30% 38%, #8354e7, #3bace3, #52cc67, #e3c13b, #e27f37, #e44560, #8354e7) top left / 100% 100%,
    conic-gradient(from 270deg at 70% 62%, #e44560, #e754bd, #8354e7, #3bace3, #52cc67, #e3c13b, #e44560);
  --td6: repeating-linear-gradient(60deg, #e27f37 0 9%, #e3c13b 9% 18%, #52cc67 18% 27%, #3bace3 27% 36%, #8354e7 36% 45%, #e754bd 45% 54%, #e44560 54% 63%);
  --die-shadow: 0 0 16px 3px rgba(255, 60, 200, 0.42), 0 0 34px rgba(31, 182, 255, 0.3), 0 7px 14px rgba(0, 0, 0, 0.55);
}
[data-die='glowtiedye'] .die-face, [data-die='glowtiedye'] .mini-die { background: var(--td-core), var(--td1); }
[data-die='glowtiedye'] .die:nth-of-type(6n+2) .die-face, [data-die='glowtiedye'] .mini-die:nth-of-type(6n+2) { background: var(--td-core), var(--td2); }
[data-die='glowtiedye'] .die:nth-of-type(6n+3) .die-face, [data-die='glowtiedye'] .mini-die:nth-of-type(6n+3) { background: var(--td-core), var(--td3); }
[data-die='glowtiedye'] .die:nth-of-type(6n+4) .die-face, [data-die='glowtiedye'] .mini-die:nth-of-type(6n+4) { background: var(--td-core), var(--td4); }
[data-die='glowtiedye'] .die:nth-of-type(6n+5) .die-face, [data-die='glowtiedye'] .mini-die:nth-of-type(6n+5) { background: var(--td-core), var(--td5); }
[data-die='glowtiedye'] .die:nth-of-type(6n) .die-face, [data-die='glowtiedye'] .mini-die:nth-of-type(6n) { background: var(--td-core), var(--td6); }
[data-die='glowtiedye'] .die-face { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 0 calc(var(--d, 60px) * 0.16) rgba(20, 0, 30, 0.45); }

[data-die='marble'] {
  --die-1: #fbfbfd; --die-2: #eceef3; --die-3: #cdd2dc;
  --pip: #1c2029;
  --die-shadow: 0 7px 15px rgba(0, 0, 0, 0.5);
  --die-face-tex: linear-gradient(120deg, transparent 38%, rgba(90, 100, 120, 0.22) 42%, transparent 46%),
    linear-gradient(200deg, transparent 60%, rgba(90, 100, 120, 0.16) 64%, transparent 68%);
}
[data-die='brass'] {
  --die-1: #f6dfa0; --die-2: #dcbb6b; --die-3: #a8843a;
  --pip: #2b1f06;
  --die-shadow: 0 6px 14px rgba(0, 0, 0, 0.58);
  --die-face-tex: linear-gradient(150deg, rgba(255, 255, 255, 0.4) 0 18%, transparent 30%);
}
[data-die='plastic'] {
  --die-1: #ffb43c; --die-2: #f09a20; --die-3: #c46f08;
  --pip: #2c1400;
  --die-shadow: 0 5px 0 -1px #8f5104, 0 7px 14px rgba(0, 0, 0, 0.5);
}
/* optional face texture overlay for skins that define one — on every face of
   the cube, so the material reads the same from any angle */
.die-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--die-face-tex, none);
  pointer-events: none;
  opacity: 0.9;
}