*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(216,177,92,.3); }

:root {
  color-scheme: dark;
  --bg:          radial-gradient(150% 110% at 50% -12%, #2a2013 0%, #17110a 52%, #0d0906 100%);
  --panel:       #1a140c;
  --panel-2:     #221a10;
  --panel-3:     #1d160d;
  --border:      #3a2d1c;
  --border-hi:   #4a3a22;
  --gold:        #d8b15c;
  --gold-bright: #f1d089;
  --gold-grad:   linear-gradient(180deg, #e7bd62, #b9842f);
  --gold-ring:   conic-gradient(from 220deg, #8a6a2e, #f1d089, #8a6a2e, #f1d089, #8a6a2e);
  --fg:          #ece0c8;
  --fg-dim:      #cdb98c;
  --muted:       #9d8a6a;
  --muted-2:     #8a7350;
  --muted-3:     #7c6b4e;
  --jade:        #7bb487;
  --jade-bg:     rgba(123,180,135,.13);
  --jade-ring:   rgba(123,180,135,.5);
  --gold-bg:     rgba(216,177,92,.13);
  --ember:       #cf6a44;
  --ember-bg:    rgba(207,106,68,.14);
  --ember-ring:  rgba(207,106,68,.5);
  --harm-cond:   #df8a63;
  --harm-cond-bg: rgba(207,106,68,.16);
  --harm-cond-bd: rgba(207,106,68,.4);
  --buff-cond:   #b9a7e6;
  --buff-cond-bg: rgba(154,134,201,.16);
  --buff-cond-bd: rgba(154,134,201,.4);
  --hp-high:     #7bb487;
  --hp-mid:      #d8b15c;
  --hp-low:      #cf6a44;
  --font-heading: Cinzel, Georgia, serif;
  --font-body: Spectral, Georgia, serif;

  /* Player display theme tokens. Classic is the only curated theme today; future
     themes should override these variables under html[data-theme="<name>"]. */
  --display-bg: var(--bg);
  --display-accent: #d8b15c;
  --display-accent-bright: #f1d089;
  --display-title: #f1d089;
  --display-title-shadow: 0 0 38px rgba(216,177,92,.32);
  --display-heading: #f4ead3;
  --display-text: #efe4cd;
  --display-copy: #d4bc88;
  --display-muted: #9d8a6a;
  --display-muted-2: #8a7350;
  --display-muted-3: #7c6b4e;
  --display-faint: #6f5d40;
  --display-page-inset-shadow: inset 0 0 200px rgba(0,0,0,.7);
  --display-header-border: #34281a;

  --display-spotlight-bg: linear-gradient(180deg,#241a0f,#160f08);
  --display-spotlight-border: #5a4626;
  --display-spotlight-shadow: 0 0 0 1px rgba(216,177,92,.18), 0 20px 60px rgba(0,0,0,.5);
  --display-portrait-ring: conic-gradient(from 220deg,#8a6a2e,#f1d089,#8a6a2e,#f1d089,#8a6a2e);
  --display-portrait-ring-hot: conic-gradient(from 220deg,#f1d089,#fff8d0,#f1d089,#fff8d0,#f1d089);
  --display-portrait-drop-shadow: 0 0 0 3px rgba(241,208,137,.55);
  --display-portrait-bg-large: repeating-linear-gradient(45deg,#241a0f,#241a0f 7px,#1d160c 7px,#1d160c 14px);
  --display-portrait-bg-small: repeating-linear-gradient(45deg,#211810,#211810 5px,#1a130b 5px,#1a130b 10px);
  --display-portrait-border: #0d0906;
  --display-portrait-initial: #e9d6a8;
  --display-portrait-initial-small: #d9c8a4;

  --display-rule-bg: rgba(154,134,201,.08);
  --display-rule-bg-strong: rgba(154,134,201,.1);
  --display-rule-border: rgba(154,134,201,.28);
  --display-rule-border-strong: rgba(154,134,201,.32);
  --display-rule-title: #d9cef0;
  --display-rule-text: #c9bce6;

  --display-row-bg: rgba(28,21,12,.55);
  --display-row-bg-active: linear-gradient(180deg,#2a2110,#1c150c);
  --display-row-border: #2e2417;
  --display-row-border-active: #b58a3a;
  --display-row-shadow-active: 0 0 0 1px rgba(216,177,92,.3), 0 10px 36px rgba(216,177,92,.16);
  --display-row-ring-active: conic-gradient(from 220deg,#8a6a2e,#f1d089,#8a6a2e);
  --display-turn-bg: linear-gradient(180deg,#e7bd62,#b9842f);
  --display-turn-fg: #1c1407;
  --display-defeated: #7c4a3a;

  --display-lair-row-bg: rgba(22,15,38,.85);
  --display-lair-row-border: #4a3a6e;
  --display-lair-row-shadow: 0 0 0 1px rgba(154,110,230,.14);
  --display-lair-icon: #8c6cc8;
  --display-lair-token-bg: rgba(100,60,180,.22);
  --display-lair-title: #c0a8f8;
  --display-lair-badge-bg: linear-gradient(180deg,#8c6cc8,#5c3fa8);
  --display-lair-badge-fg: #160f26;
  --display-callout-bg: rgba(60,40,8,.88);
  --display-callout-border: #8a6520;
  --display-callout-shadow: 0 0 0 1px rgba(216,177,92,.22), 0 8px 32px rgba(0,0,0,.4);

  --display-toggle-bg: #15100a;
  --display-toggle-bg-active: rgba(216,177,92,.13);
  --display-toggle-border: #41331f;
  --display-round-bg: radial-gradient(circle at 50% 32%, #2c2212, #120d07);
  --display-round-border: #6e5527;
  --display-round-shadow: inset 0 0 30px rgba(0,0,0,.7), 0 0 30px rgba(216,177,92,.18);

  --display-overlay-backdrop: rgba(5,3,1,.92);
  --display-overlay-bg: #0d0a06;
  --display-overlay-border: #6e5527;
  --display-overlay-shadow: 0 0 60px rgba(201,162,74,.2);
  --display-overlay-divider: #2a1f14;
  --display-loot-row-bg: rgba(201,162,74,.05);
  --display-loot-row-border: #3a2d1c;
  --display-loot-row-text: #e9d6a8;
  --display-loot-row-desc: #b8a88a;
  --display-loot-hidden-bg: rgba(50,40,30,.4);
  --display-loot-hidden-border: #2a1f14;
  --display-loot-hidden-text: #6a5a3a;
  --display-loot-hidden-meta: #5a4a32;

  /* Root tokens added for whole-app theming (2026-07-02 spec) */
  --panel-4: #15100a;
  --panel-5: #0f0b07;
  --panel-blue: #111c28;
  --border-gold: #6e5527;
  --gold-dim: #c9a24a;
  --hp-mid-soft: #d9b56f;
  --fg-warm: #e9d6a8;
  --fg-soft: #c4b48e;
  --ally: #d8b15c;            /* npc/ally identity — distinct from accent gold */
  --teal: #69c4cf;
  --teal-bright: #79cbd6;
  --lavender: #b9a7e6;
  --lavender-bright: #d9cef0;
  --lavender-soft: #c9bce6;
  --blue-soft: #cdd8ec;
  --edition-2014: #c9a24a;
  --edition-2014-ring: #6e5527;
  --edition-2024: #5b9bd5;
  --edition-2024-ring: #3a6a99;
  --danger: #e87070;
  --danger-deep: #8b2020;
  --rarity-common: #9d8a6a;
  --rarity-uncommon: #5ba85b;
  --rarity-rare: #5b9dd9;
  --rarity-very-rare: #9b5bd9;
  --rarity-legendary: #e8902a;
  --rarity-artifact: #e84a2a;

  /* Added in Task 4 (dm.tsx/dm-shared.tsx migration) — no exact/near match in the
     Mapping Table; preserved exactly so classic stays pixel-identical. */
  --gold-active: #b58a3a;      /* bright active-state gold border (Next Turn CTA, active lair row) */
  --gold-ring-dark: #8a6a2e;   /* dark stop of the d20-badge radial highlight, matches --gold-ring's dark stop */
}

html[data-theme="classic"] {
  color-scheme: dark;
}

html[data-theme="moonlit"] {
  color-scheme: dark;
  --bg: radial-gradient(150% 110% at 50% -12%, #16233c 0%, #0a111f 52%, #05080f 100%);
  --panel: #101a2c;  --panel-2: #14213a;  --panel-3: #0e1726;
  --panel-4: #0c1522; --panel-5: #080e18; --panel-blue: #0e2030;
  --border: #22314e;  --border-hi: #2e4166;  --border-gold: #2b5f6e;
  --gold: #3fd0e4;  --gold-bright: #8ee9f5;  --gold-dim: #38a9bb;
  --gold-grad: linear-gradient(180deg, #f5a94b, #e07b28);
  --gold-ring: conic-gradient(from 220deg, #1f6a7a, #8ee9f5, #1f6a7a, #8ee9f5, #1f6a7a);
  --fg: #e4edf7;  --fg-dim: #b9c8dc;  --fg-warm: #d7e6f2;  --fg-soft: #a9bcd2;
  --muted: #8fa3bd;  --muted-2: #7488a4;  --muted-3: #63758f;
  --jade: #6fd0a0;  --jade-bg: color-mix(in srgb, #6fd0a0 13%, transparent);  --jade-ring: color-mix(in srgb, #6fd0a0 50%, transparent);
  --ally: #f5b95a;
  --gold-bg: color-mix(in srgb, #3fd0e4 13%, transparent);
  --ember: #f07850;  --ember-bg: color-mix(in srgb, #f07850 14%, transparent);  --ember-ring: color-mix(in srgb, #f07850 50%, transparent);
  --harm-cond: #f39a78;  --harm-cond-bg: color-mix(in srgb, #f07850 16%, transparent);  --harm-cond-bd: color-mix(in srgb, #f07850 40%, transparent);
  --buff-cond: #b9aaf0;  --buff-cond-bg: color-mix(in srgb, #9a86dd 16%, transparent);  --buff-cond-bd: color-mix(in srgb, #9a86dd 40%, transparent);
  --hp-high: #6fd0a0;  --hp-mid: #f5b95a;  --hp-mid-soft: #f0cb90;  --hp-low: #f07850;
  --teal: #57c9d8;  --teal-bright: #8adfe9;
  --lavender: #b9aaf0;  --lavender-bright: #ded4fa;  --lavender-soft: #cec2f2;
  --blue-soft: #cfe0f2;
  --edition-2014: #d9a862;  --edition-2014-ring: #6e5a30;
  --edition-2024: #6aabe0;  --edition-2024-ring: #3a6a99;
  --danger: #f08585;  --danger-deep: #8b2a35;
  --rarity-common: #8fa3bd;  --rarity-uncommon: #62c48a;  --rarity-rare: #64a7e8;
  --rarity-very-rare: #a874e8;  --rarity-legendary: #f0952f;  --rarity-artifact: #f0552f;
  --font-heading: Fredoka, "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", Verdana, sans-serif;

  /* Rule-5 tokens added in Task 4 (dm.tsx/dm-shared.tsx migration) have no Moonlit
     value in the design spec's block; derived here to match the classic relationship:
     --gold-active mirrors --display-row-border-active (active-state gold border,
     Next Turn CTA + active lair row); --gold-ring-dark mirrors --gold-ring's dark
     stop (d20-badge radial highlight). */
  --gold-active: #e08a3a;      /* = --display-row-border-active below (warm-orange active state, matches --gold-grad) */
  --gold-ring-dark: #1f6a7a;   /* = --gold-ring's dark stop (teal-cyan, matches --gold) */

  /* display board */
  --display-accent: #3fd0e4;
  --display-accent-bright: #8ee9f5;
  --display-title: #8ee9f5;
  --display-title-shadow: 0 0 38px color-mix(in srgb, #3fd0e4 35%, transparent);
  --display-heading: #eaf3fb;
  --display-text: #e4edf7;
  --display-copy: #b9cbdf;
  --display-muted: #8fa3bd;  --display-muted-2: #7488a4;  --display-muted-3: #63758f;
  --display-faint: #4d5f78;
  --display-header-border: #22314e;
  --display-spotlight-bg: linear-gradient(180deg, #14213a, #0a111f);
  --display-spotlight-border: #35507a;
  --display-spotlight-shadow: 0 0 0 1px color-mix(in srgb, #3fd0e4 20%, transparent), 0 20px 60px rgba(0,0,0,.5);
  --display-portrait-ring: conic-gradient(from 220deg, #1f6a7a, #8ee9f5, #1f6a7a, #8ee9f5, #1f6a7a);
  --display-portrait-ring-hot: conic-gradient(from 220deg, #8ee9f5, #e6fbff, #8ee9f5, #e6fbff, #8ee9f5);
  --display-portrait-drop-shadow: 0 0 0 3px color-mix(in srgb, #8ee9f5 55%, transparent);
  --display-portrait-bg-large: repeating-linear-gradient(45deg, #14213a, #14213a 7px, #101a2c 7px, #101a2c 14px);
  --display-portrait-bg-small: repeating-linear-gradient(45deg, #121d33, #121d33 5px, #0e1726 5px, #0e1726 10px);
  --display-portrait-border: #05080f;
  --display-portrait-initial: #cfe6f2;
  --display-portrait-initial-small: #b6d2e4;
  --display-rule-bg: color-mix(in srgb, #b9aaf0 8%, transparent);
  --display-rule-bg-strong: color-mix(in srgb, #b9aaf0 10%, transparent);
  --display-rule-border: color-mix(in srgb, #b9aaf0 28%, transparent);
  --display-rule-border-strong: color-mix(in srgb, #b9aaf0 32%, transparent);
  --display-rule-title: #ded4fa;
  --display-rule-text: #cec2f2;
  --display-row-bg: rgba(13,20,34,.6);
  --display-row-bg-active: linear-gradient(180deg, #17263f, #0e1726);
  --display-row-border: #1d2b45;
  --display-row-border-active: #e08a3a;
  --display-row-shadow-active: 0 0 0 1px color-mix(in srgb, #f5a94b 30%, transparent), 0 10px 36px color-mix(in srgb, #f5a94b 16%, transparent);
  --display-row-ring-active: conic-gradient(from 220deg, #8a5a1e, #f5c98b, #8a5a1e);
  --display-turn-bg: linear-gradient(180deg, #f5a94b, #e07b28);
  --display-turn-fg: #1c1207;
  --display-defeated: #6b4a55;
  --display-lair-row-bg: rgba(20,16,42,.85);
  --display-lair-row-border: #45396e;
  --display-lair-row-shadow: 0 0 0 1px color-mix(in srgb, #9a86dd 14%, transparent);
  --display-lair-icon: #9a86dd;
  --display-lair-token-bg: color-mix(in srgb, #7050c8 22%, transparent);
  --display-lair-title: #cabcf8;
  --display-lair-badge-bg: linear-gradient(180deg, #9a86dd, #6248b8);
  --display-lair-badge-fg: #120e26;
  --display-callout-bg: rgba(8,28,40,.9);
  --display-callout-border: #2b6f80;
  --display-callout-shadow: 0 0 0 1px color-mix(in srgb, #3fd0e4 22%, transparent), 0 8px 32px rgba(0,0,0,.4);
  --display-toggle-bg: #0c1522;
  --display-toggle-bg-active: color-mix(in srgb, #3fd0e4 13%, transparent);
  --display-toggle-border: #2a3d5e;
  --display-round-bg: radial-gradient(circle at 50% 32%, #14283e, #070d16);
  --display-round-border: #2b5f6e;
  --display-round-shadow: inset 0 0 30px rgba(0,0,0,.7), 0 0 30px color-mix(in srgb, #3fd0e4 18%, transparent);
  --display-overlay-backdrop: rgba(2,4,8,.92);
  --display-overlay-bg: #070d16;
  --display-overlay-border: #2b5f6e;
  --display-overlay-shadow: 0 0 60px color-mix(in srgb, #3fd0e4 20%, transparent);
  --display-overlay-divider: #16233c;
  --display-loot-row-bg: color-mix(in srgb, #f5b95a 5%, transparent);
  --display-loot-row-border: #22314e;
  --display-loot-row-text: #f0d7ab;
  --display-loot-row-desc: #a5b6c9;
  --display-loot-hidden-bg: rgba(18,28,44,.5);
  --display-loot-hidden-border: #16233c;
  --display-loot-hidden-text: #5a7089;
  --display-loot-hidden-meta: #4a5d74;
}

html[data-theme="ksdigital"] {
  color-scheme: light;
  --bg: radial-gradient(150% 110% at 50% -12%, #f4ecdf 0%, #faf6f0 52%, #f1ede4 100%);
  --panel: #fffdf9;  --panel-2: #ffffff;  --panel-3: #f6f1e8;
  --panel-4: #efe6d6; --panel-5: #e8dcc6; --panel-blue: #e9eef9;
  --border: #ddd3c2;  --border-hi: #c9bba0;  --border-gold: #4a52a0;
  --gold: #0a1355;  --gold-bright: #2b3285;  --gold-dim: #3a4090;
  --gold-grad: linear-gradient(180deg, #2b3285, #0a1355);
  --gold-ring: conic-gradient(from 220deg, #0a1355, #2b3285, #0a1355, #2b3285, #0a1355);
  --fg: #141827;  --fg-dim: #3a3f55;  --fg-warm: #23283f;  --fg-soft: #565c73;
  --muted: #6a7086;  --muted-2: #5b6178;  --muted-3: #454a63;
  --jade: #07604f;  --jade-bg: color-mix(in srgb, #07604f 13%, transparent);  --jade-ring: color-mix(in srgb, #07604f 45%, transparent);
  --ally: #b8005c;
  --gold-bg: color-mix(in srgb, #0a1355 10%, transparent);
  --ember: #c2341e;  --ember-bg: color-mix(in srgb, #c2341e 12%, transparent);  --ember-ring: color-mix(in srgb, #c2341e 45%, transparent);
  --harm-cond: #ca4027;  --harm-cond-bg: color-mix(in srgb, #c2341e 14%, transparent);  --harm-cond-bd: color-mix(in srgb, #c2341e 36%, transparent);
  --buff-cond: #5a3ec2;  --buff-cond-bg: color-mix(in srgb, #714eea 12%, transparent);  --buff-cond-bd: color-mix(in srgb, #714eea 34%, transparent);
  --hp-high: #07604f;  --hp-mid: #956809;  --hp-mid-soft: #8a6512;  --hp-low: #c2341e;
  --teal: #0d7a8a;  --teal-bright: #087c8d;
  --lavender: #5a3ec2;  --lavender-bright: #4a2fa8;  --lavender-soft: #6b4fd0;
  --blue-soft: #2a4a8f;
  --edition-2014: #8f6b0e;  --edition-2014-ring: #7a5d1f;
  --edition-2024: #2c5aa0;  --edition-2024-ring: #244a80;
  --danger: #cf2e2e;  --danger-deep: #8b1a1a;
  --rarity-common: #6a7086;  --rarity-uncommon: #1f7a3d;  --rarity-rare: #2a6fc2;
  --rarity-very-rare: #7a3ec2;  --rarity-legendary: #a2610f;  --rarity-artifact: #b0301a;
  --font-heading: "Schibsted Grotesk", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  /* Rule-5 tokens (see the Moonlit block above for provenance): --gold-active is the
     magenta hot/active-state border (Next Turn CTA + active lair row); --gold-ring-dark
     mirrors --gold-ring's dark stop (d20-badge radial highlight). */
  --gold-active: #f00069;
  --gold-ring-dark: #0a1355;

  /* KSD is the app's first LIGHT curated theme. Every --display-* token that
     the Moonlit block above overrides is overridden here too — including
     --display-page-inset-shadow, which Moonlit leaves at the :root default (a heavy
     black inset) because it still reads fine on a dark background; on this light
     cream page that default would ruin it, so it is neutralized below even though
     Moonlit has no equivalent line. */
  --display-page-inset-shadow: none;

  /* display board */
  --display-accent: #0a1355;
  --display-accent-bright: #2b3285;
  --display-title: #0a1355;
  --display-title-shadow: none;
  --display-heading: #1a1f38;
  --display-text: #141827;
  --display-copy: #3a3f55;
  --display-muted: #6a7086;  --display-muted-2: #5b6178;  --display-muted-3: #454a63;
  --display-faint: #3a3f55;
  --display-header-border: #ddd3c2;
  --display-spotlight-bg: linear-gradient(180deg, #ffffff, #fffdf9);
  --display-spotlight-border: #ddd3c2;
  --display-spotlight-shadow: 0 0 0 1px color-mix(in srgb, #0a1355 10%, transparent), 0 20px 60px rgba(10,19,85,.12);
  --display-portrait-ring: conic-gradient(from 220deg, #0a1355, #2b3285, #0a1355, #2b3285, #0a1355);
  --display-portrait-ring-hot: conic-gradient(from 220deg, #2b3285, #f00069, #2b3285, #f00069, #2b3285);
  --display-portrait-drop-shadow: 0 0 0 3px color-mix(in srgb, #f00069 45%, transparent);
  --display-portrait-bg-large: repeating-linear-gradient(45deg, #f4ecdf, #f4ecdf 7px, #faf6f0 7px, #faf6f0 14px);
  --display-portrait-bg-small: repeating-linear-gradient(45deg, #f1ede4, #f1ede4 5px, #f6f1e8 5px, #f6f1e8 10px);
  --display-portrait-border: #ddd3c2;
  --display-portrait-initial: #0a1355;
  --display-portrait-initial-small: #2b3285;
  --display-rule-bg: color-mix(in srgb, #714eea 8%, transparent);
  --display-rule-bg-strong: color-mix(in srgb, #714eea 10%, transparent);
  --display-rule-border: color-mix(in srgb, #714eea 28%, transparent);
  --display-rule-border-strong: color-mix(in srgb, #714eea 32%, transparent);
  --display-rule-title: #4a2fa8;
  --display-rule-text: #5a3ec2;
  --display-row-bg: rgba(255,253,249,.85);
  --display-row-bg-active: linear-gradient(180deg, #ffffff, #fef0f5);
  --display-row-border: #ddd3c2;
  --display-row-border-active: #f00069;
  --display-row-shadow-active: 0 0 0 1px color-mix(in srgb, #f00069 30%, transparent), 0 10px 36px color-mix(in srgb, #f00069 16%, transparent);
  --display-row-ring-active: conic-gradient(from 220deg, #b8005c, #f00069, #b8005c);
  --display-turn-bg: linear-gradient(180deg, #2b3285, #0a1355);
  --display-turn-fg: #fffdf9;
  --display-defeated: #92646c;
  --display-lair-row-bg: rgba(232,222,250,.85);
  --display-lair-row-border: #c9b8f0;
  --display-lair-row-shadow: 0 0 0 1px color-mix(in srgb, #714eea 18%, transparent);
  --display-lair-icon: #714eea;
  --display-lair-token-bg: color-mix(in srgb, #714eea 18%, transparent);
  --display-lair-title: #4a2fa8;
  --display-lair-badge-bg: linear-gradient(180deg, #714eea, #5236c2);
  --display-lair-badge-fg: #fffdf9;
  --display-callout-bg: rgba(255,251,242,.92);
  --display-callout-border: #0a1355;
  --display-callout-shadow: 0 0 0 1px color-mix(in srgb, #0a1355 15%, transparent), 0 8px 32px rgba(10,19,85,.15);
  --display-toggle-bg: #f1f0ee;
  --display-toggle-bg-active: color-mix(in srgb, #0a1355 12%, transparent);
  --display-toggle-border: #ddd3c2;
  --display-round-bg: radial-gradient(circle at 50% 32%, #ffffff, #f4ecdf);
  --display-round-border: #c9bba0;
  --display-round-shadow: inset 0 0 0 rgba(10,19,85,0), 0 0 24px color-mix(in srgb, #0a1355 12%, transparent);
  --display-overlay-backdrop: rgba(10,19,85,.45);
  --display-overlay-bg: #fffdf9;
  --display-overlay-border: #0a1355;
  --display-overlay-shadow: 0 8px 40px color-mix(in srgb, #0a1355 20%, transparent);
  --display-overlay-divider: #ddd3c2;
  --display-loot-row-bg: color-mix(in srgb, #f3dda2 35%, transparent);
  --display-loot-row-border: #e3cd8f;
  --display-loot-row-text: #5a4413;
  --display-loot-row-desc: #646a7f;
  --display-loot-hidden-bg: rgba(230,225,214,.5);
  --display-loot-hidden-border: #ddd3c2;
  --display-loot-hidden-text: #5b6178;
  --display-loot-hidden-meta: #6b7082;
}

@keyframes glowring {
  0%, 100% { box-shadow: 0 0 0 1px rgba(216,177,92,.55), 0 0 32px rgba(216,177,92,.28); }
  50%       { box-shadow: 0 0 0 1px rgba(216,177,92,.8),  0 0 52px rgba(216,177,92,.45); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
}

/* hide number spinners globally — inputs show clean text */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }