/* =====================================================================
   THEMES. Eighteen looks in two sets, each with a night and a day version.
   A theme is a block of variables on [data-theme="id"] (night) and
   [data-theme="id"][data-mode="day"] (day): colors, three fonts (headings,
   body, story text), corner shapes, a header emblem and a background glow.
   Because they are plain attribute selectors, the picker's previews use them too.
   ===================================================================== */

/* ---- Classes ---- */
[data-theme="scoreboard"]{                 /* Scoreboard: crimson and gold, the default look */
  --bg:#130a0d; --bg2:#1a0d11; --surface:#231217; --raised:#2f181e; --raised2:#3d2028;
  --line:#402229; --line2:#5a3039; --text:#f4ebe4; --text2:#d9c9c2; --muted:#b8a09b;
  --accent:#e8b83c; --accent2:#cf9a22; --accent-ink:#231602; --arcane:#ff8a94; --arcane-soft:rgba(232,184,60,.16);
  --green:#4ade80; --red:#ff6b78; --amber:#fbbf24; --gold:#e8b83c;
  --shadow:rgba(0,0,0,.5); --glass:rgba(35,18,23,.88); --band:#4a0f1c; --band2:#66182a;
  --display:'Oswald',Impact,sans-serif; --body:'Inter',system-ui,sans-serif; --lore:'Newsreader',Georgia,serif; --lore-size:17.5px;
  --hd-case:uppercase; --hd-ls:.02em; --hd-w:700; --r:6px; --rb:6px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 91 28v44L50 94 9 72V28z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/><path d='M50 6v28M9 28l25 22M91 28 66 50M9 72l25-22M91 72 66 50M50 94V66M34 50h32L50 66z' fill='none' stroke='black' stroke-width='4'/></svg>");
  --fx:none;
  --aur1:0; --aur-a:20s;
  --die:#a3182b; --die-tens:#3d0c16; --die-edge:#f3d98a; --die-label:#ffffff; --die-outline:#2b0b12; --die-glow:#e8b83c;
  --meta:#4a0f1c; color-scheme:dark;
}
:root,[data-theme="wizard"]{                 /* Wizard: palette from the class swatch */
  --bg:#0a1428; --bg2:#11203b; --surface:#182b4d; --raised:#1e355f; --raised2:#264273; --line:#243e6d; --line2:#4a5e9c; --text:#ebe4da;
  --text2:#c1bfbe; --muted:#b1b3ba; --accent:#8f7edb; --accent2:#a091e0; --accent-ink:#050a14; --arcane:#b3a8f2; --arcane-soft:rgba(179,168,242,0.16);
  --green:#4ade80; --red:#ff6372; --amber:#fbbf24; --gold:#b7ace8; --shadow:rgba(0,0,0,.45); --glass:rgba(24,43,77,0.84);
  --display:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --lore:'Newsreader',Georgia,serif; --lore-size:17.5px; --hd-case:none;
  --hd-ls:-.005em; --hd-w:700; --r:20px; --rb:14px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 58 42 94 50 58 58 50 94 42 58 6 50 42 42z'/><circle cx='20' cy='20' r='4'/><circle cx='82' cy='80' r='3'/><circle cx='84' cy='18' r='2.4'/></svg>");
  --fx:radial-gradient(60% 40% at 15% 0%,rgba(179,168,242,.12),transparent),radial-gradient(50% 35% at 100% 100%,rgba(143,126,219,.07),transparent),radial-gradient(1.3px 1.3px at 12% 18%,rgba(255,255,255,.6),transparent 70%),radial-gradient(1px 1px at 78% 32%,rgba(255,255,255,.45),transparent 70%),radial-gradient(1.3px 1.3px at 46% 72%,rgba(255,255,255,.5),transparent 70%),radial-gradient(1px 1px at 88% 84%,rgba(255,255,255,.4),transparent 70%),radial-gradient(1px 1px at 24% 90%,rgba(255,255,255,.35),transparent 70%),radial-gradient(1px 1px at 62% 12%,rgba(255,255,255,.4),transparent 70%);
  --aur1:.34; --aur-a:14s; --die:#445797; --die-tens:#7176bf; --die-edge:#ebe4da; --die-label:#ffffff; --die-outline:#070e1c; --die-glow:#8f7edb;
  --meta:#0a1428;
}
[data-theme="paladin"]{                 /* Paladin: palette from the class swatch */
  --bg:#171c22; --bg2:#1c2329; --surface:#222930; --raised:#262f36; --raised2:#2c363e; --line:#2a333c; --line2:#525c64; --text:#f1efe6;
  --text2:#c8c7c2; --muted:#9ea09e; --accent:#d5ad55; --accent2:#ba8440; --accent-ink:#0c0e11; --arcane:#b9c2c9; --arcane-soft:rgba(185,194,201,0.16);
  --green:#5ee08c; --red:#ff6b6b; --amber:#f0b429; --gold:#d5ad55; --shadow:rgba(0,0,0,.5); --glass:rgba(34,41,48,0.84);
  --display:'Cinzel',Georgia,serif; --body:'Lora',Georgia,serif; --lore:'Cormorant Garamond',Georgia,serif; --lore-size:20px; --hd-case:none;
  --hd-ls:.02em; --hd-w:700; --r:14px; --rb:10px; --rp:12px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='16' fill='none' stroke='black' stroke-width='6'/><path d='M50 6v16M50 78v16M6 50h16M78 50h16M19 19l11 11M70 70l11 11M81 19 70 30M30 70 19 81' stroke='black' stroke-width='6' stroke-linecap='round'/></svg>");
  --fx:radial-gradient(70% 45% at 50% -5%,rgba(185,194,201,.18),transparent),radial-gradient(60% 40% at 50% 110%,rgba(213,173,85,.12),transparent);
  --aur1:.4; --aur-a:20s; --die:#595748; --die-tens:#848782; --die-edge:#f1efe6; --die-label:#ffffff; --die-outline:#101418; --die-glow:#d5ad55;
  --meta:#171c22;
}
[data-theme="rogue"]{                 /* Rogue: palette from the class swatch */
  --bg:#0a0b0d; --bg2:#16181b; --surface:#212327; --raised:#2b2f34; --raised2:#383c43; --line:#34383e; --line2:#5e5d5c; --text:#e6e0d5;
  --text2:#bfbab2; --muted:#a9a7a3; --accent:#b87333; --accent2:#c38852; --accent-ink:#050606; --arcane:#b8a48c; --arcane-soft:rgba(184,164,140,0.16);
  --green:#34f0b0; --red:#ff5468; --amber:#f5c04a; --gold:#cfa176; --shadow:rgba(0,0,0,.6); --glass:rgba(33,35,39,0.84);
  --display:'Space Grotesk',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --lore:'IBM Plex Serif',Georgia,serif;
  --lore-size:16.5px; --hd-case:none; --hd-ls:-.01em; --hd-w:700; --r:9px; --rb:8px; --rp:8px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M18 84 74 10l9 6L28 90zM82 84 26 10l-9 6 55 74z'/><path d='M10 62l22 14-4 8-22-14zM90 62 68 76l4 8 22-14z'/></svg>");
  --fx:repeating-linear-gradient(135deg,rgba(184,164,140,.03) 0 2px,transparent 2px 15px),radial-gradient(50% 30% at 50% 0%,rgba(184,164,140,.09),transparent);
  --aur1:.2; --aur-a:11s; --die:#5e5046; --die-tens:#867666; --die-edge:#e6e0d5; --die-label:#ffffff; --die-outline:#070809; --die-glow:#b87333;
  --meta:#0a0b0d;
}
[data-theme="barbarian"]{                 /* Barbarian: palette from the class swatch */
  --bg:#120b0b; --bg2:#220c0c; --surface:#300d0d; --raised:#3f0d0d; --raised2:#4f0e0e; --line:#4a0e0e; --line2:#793224; --text:#e8e4da;
  --text2:#c3b9b1; --muted:#9f8f89; --accent:#c93a30; --accent2:#922b2b; --accent-ink:#ffffff; --arcane:#d69a62; --arcane-soft:rgba(214,154,98,0.16);
  --green:#7bd36f; --red:#ff5448; --amber:#ffb04a; --gold:#d9756e; --shadow:rgba(0,0,0,.6); --glass:rgba(48,13,13,0.84);
  --display:'Oswald',Impact,sans-serif; --body:'Barlow',system-ui,sans-serif; --lore:'Bitter',Georgia,serif; --lore-size:17px; --hd-case:uppercase;
  --hd-ls:.04em; --hd-w:700; --r:4px; --rb:4px; --rp:4px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M46 20C28 14 10 24 5 46c14-4 28 0 41 12z'/><path d='M54 20C72 14 90 24 95 46c-14-4-28 0-41 12z'/><rect x='46' y='10' width='8' height='86' rx='3'/></svg>");
  --fx:radial-gradient(60% 40% at 50% 112%,rgba(214,154,98,.22),transparent),radial-gradient(40% 30% at 0% 0%,rgba(201,58,48,.07),transparent);
  --aur1:.3; --aur-a:5s; --die:#761a17; --die-tens:#a15439; --die-edge:#e8e4da; --die-label:#ffffff; --die-outline:#0d0808; --die-glow:#c93a30;
  --meta:#120b0b;
}
[data-theme="druid"]{                 /* Druid: palette from the class swatch */
  --bg:#0d1713; --bg2:#13221c; --surface:#192c23; --raised:#1e352b; --raised2:#254134; --line:#233d31; --line2:#42654f; --text:#e5e2d3;
  --text2:#bcbeb0; --muted:#a5aba1; --accent:#c6a85b; --accent2:#af8044; --accent-ink:#060c0a; --arcane:#8dbd8f; --arcane-soft:rgba(141,189,143,0.16);
  --green:#7be07d; --red:#ff7360; --amber:#f2c14e; --gold:#c6a85b; --shadow:rgba(0,0,0,.5); --glass:rgba(25,44,35,0.84);
  --display:'Fraunces',Georgia,serif; --body:'Nunito',system-ui,sans-serif; --lore:'Lora',Georgia,serif; --lore-size:17.5px; --hd-case:none;
  --hd-ls:-.01em; --hd-w:700; --r:28px; --rb:18px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M18 84C14 44 40 14 86 12 88 58 62 86 18 84z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/><path d='M18 84 66 34M40 62l14-2M52 48l16 0' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>");
  --fx:radial-gradient(50% 35% at 0% 0%,rgba(141,189,143,.12),transparent),radial-gradient(50% 40% at 100% 100%,rgba(198,168,91,.1),transparent);
  --aur1:.3; --aur-a:24s; --die:#506042; --die-tens:#6b8a65; --die-edge:#e5e2d3; --die-label:#ffffff; --die-outline:#09100d; --die-glow:#c6a85b;
  --meta:#0d1713;
}
[data-theme="cleric"]{                 /* Cleric: palette from the class swatch */
  --bg:#111520; --bg2:#141e32; --surface:#172543; --raised:#1a2d53; --raised2:#1d3667; --line:#1c3361; --line2:#3e5b90; --text:#f3f1e8;
  --text2:#c7c8c7; --muted:#9fa3aa; --accent:#e4c76a; --accent2:#c4964f; --accent-ink:#080a10; --arcane:#9db8e8; --arcane-soft:rgba(157,184,232,0.16);
  --green:#5fd49a; --red:#ff7480; --amber:#f1d68a; --gold:#e4c76a; --shadow:rgba(0,0,0,.5); --glass:rgba(23,37,67,0.84);
  --display:'Marcellus',Georgia,serif; --body:'Source Sans 3',system-ui,sans-serif; --lore:'Cormorant Garamond',Georgia,serif; --lore-size:20px;
  --hd-case:none; --hd-ls:.01em; --hd-w:400; --r:18px; --rb:14px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='34' fill='none' stroke='black' stroke-width='5'/><path d='M50 22v56M26 44h48' stroke='black' stroke-width='8' stroke-linecap='round'/></svg>");
  --fx:radial-gradient(70% 42% at 50% -10%,rgba(157,184,232,.17),transparent),radial-gradient(50% 30% at 100% 100%,rgba(228,199,106,.08),transparent);
  --aur1:.3; --aur-a:20s; --die:#505f71; --die-tens:#7387a7; --die-edge:#f3f1e8; --die-label:#ffffff; --die-outline:#0c0f16; --die-glow:#e4c76a;
  --meta:#111520;
}
[data-theme="warlock"]{                 /* Warlock: palette from the class swatch */
  --bg:#09080d; --bg2:#181221; --surface:#261c33; --raised:#332545; --raised2:#43305a; --line:#3e2d54; --line2:#684d88; --text:#d9d3e3;
  --text2:#b5aec0; --muted:#a9a3b1; --accent:#9a6cc7; --accent2:#a982cf; --accent-ink:#040406; --arcane:#ba93e7; --arcane-soft:rgba(186,147,231,0.16);
  --green:#7dffa0; --red:#ff5a7a; --amber:#ffc85a; --gold:#b898d8; --shadow:rgba(0,0,0,.6); --glass:rgba(38,28,51,0.84);
  --display:'Syne',system-ui,sans-serif; --body:'Outfit',system-ui,sans-serif; --lore:'Spectral',Georgia,serif; --lore-size:17.5px; --hd-case:none;
  --hd-ls:-.01em; --hd-w:700; --r:14px; --rb:11px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8 94 84H6z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/><path d='M22 62Q50 38 78 62Q50 86 22 62z' fill='none' stroke='black' stroke-width='4'/><circle cx='50' cy='62' r='7'/></svg>");
  --fx:radial-gradient(50% 40% at 100% 0%,rgba(186,147,231,.17),transparent),radial-gradient(40% 40% at 0% 100%,rgba(154,108,199,.08),transparent);
  --aur1:.4; --aur-a:9s; --die:#604480; --die-tens:#8765ae; --die-edge:#d9d3e3; --die-label:#ffffff; --die-outline:#060609; --die-glow:#9a6cc7;
  --meta:#09080d;
}
[data-theme="bard"]{                 /* Bard: palette from the class swatch */
  --bg:#241522; --bg2:#2b1a29; --surface:#321e30; --raised:#382336; --raised2:#40283e; --line:#3e263c; --line2:#694760; --text:#f0e6ee;
  --text2:#cabec8; --muted:#a496a2; --accent:#d2a85a; --accent2:#b88044; --accent-ink:#120a11; --arcane:#d49ab8; --arcane-soft:rgba(212,154,184,0.16);
  --green:#5be3a0; --red:#ff6b7d; --amber:#ffd166; --gold:#d2a85a; --shadow:rgba(0,0,0,.5); --glass:rgba(50,30,48,0.84);
  --display:'DM Serif Display',Georgia,serif; --body:'DM Sans',system-ui,sans-serif; --lore:'Playfair Display',Georgia,serif; --lore-size:17.5px;
  --hd-case:none; --hd-ls:0; --hd-w:400; --r:24px; --rb:16px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M36 70V20l44-10v50' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/><ellipse cx='26' cy='72' rx='13' ry='10'/><ellipse cx='70' cy='62' rx='13' ry='10'/></svg>");
  --fx:radial-gradient(60% 40% at 50% -8%,rgba(212,154,184,.2),transparent),radial-gradient(50% 40% at 100% 100%,rgba(210,168,90,.12),transparent),radial-gradient(40% 30% at 0% 100%,rgba(212,154,184,.1),transparent);
  --aur1:.36; --aur-a:13s; --die:#684a49; --die-tens:#996e7b; --die-edge:#f0e6ee; --die-label:#ffffff; --die-outline:#190f18; --die-glow:#d2a85a;
  --meta:#241522;
}

/* ---- Realms: places instead of classes ---- */
[data-theme="sorcerer"]{                 /* Sorcerer: palette from the class swatch */
  --bg:#081528; --bg2:#0f1e3a; --surface:#16274a; --raised:#1d2f5b; --raised2:#25396e; --line:#233668; --line2:#544b8c; --text:#f0e6e0;
  --text2:#c4c0c2; --muted:#a5a7b0; --accent:#e0b056; --accent2:#c18641; --accent-ink:#040a14; --arcane:#db92d2; --arcane-soft:rgba(219,146,210,0.16);
  --green:#7dffa0; --red:#ff5a7a; --amber:#ffc85a; --gold:#e0b056; --shadow:rgba(0,0,0,.6); --glass:rgba(22,39,74,0.84);
  --display:'Josefin Sans',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif; --lore:'Spectral',Georgia,serif; --lore-size:18px; --hd-case:none;
  --hd-ls:-.01em; --hd-w:700; --r:14px; --rb:11px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6C60 26 78 36 78 60a28 28 0 0 1-56 0c0-14 8-22 14-30 2 10 6 14 12 16C46 34 44 20 50 6z'/></svg>");
  --fx:radial-gradient(50% 40% at 100% 0%,rgba(219,146,210,.17),transparent),radial-gradient(40% 40% at 0% 100%,rgba(224,176,86,.08),transparent);
  --aur1:.4; --aur-a:9s; --die:#585b71; --die-tens:#8e6496; --die-edge:#f0e6e0; --die-label:#ffffff; --die-outline:#060f1c; --die-glow:#e0b056;
  --meta:#081528;
}
[data-theme="fighter"]{                 /* Fighter: palette from the class swatch */
  --bg:#0f1c2e; --bg2:#16263b; --surface:#1c2f48; --raised:#223954; --raised2:#294362; --line:#27405e; --line2:#4a6585; --text:#ebe4da;
  --text2:#c2c0bd; --muted:#aeb1b5; --accent:#c99b6b; --accent2:#b17750; --accent-ink:#080e17; --arcane:#9fb7d3; --arcane-soft:rgba(159,183,211,0.16);
  --green:#7bd36f; --red:#ff5448; --amber:#ffb04a; --gold:#d2ab83; --shadow:rgba(0,0,0,.6); --glass:rgba(28,47,72,0.84);
  --display:'Rajdhani',system-ui,sans-serif; --body:'Barlow',system-ui,sans-serif; --lore:'Bitter',Georgia,serif; --lore-size:17px;
  --hd-case:uppercase; --hd-ls:.05em; --hd-w:700; --r:10px; --rb:8px; --rp:8px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 90 20v30c0 24-18 38-40 46C28 88 10 74 10 50V20z'/></svg>");
  --fx:radial-gradient(60% 40% at 50% 112%,rgba(159,183,211,.22),transparent),radial-gradient(40% 30% at 0% 0%,rgba(201,155,107,.07),transparent);
  --aur1:.3; --aur-a:5s; --die:#555e6b; --die-tens:#76869a; --die-edge:#ebe4da; --die-label:#ffffff; --die-outline:#0a1420; --die-glow:#c99b6b;
  --meta:#0f1c2e;
}
[data-theme="monk"]{                 /* Monk: palette from the class swatch */
  --bg:#111314; --bg2:#191c1d; --surface:#202424; --raised:#272c2c; --raised2:#2f3535; --line:#2c3232; --line2:#54554f; --text:#e6e0d5;
  --text2:#bebab2; --muted:#a09e99; --accent:#c8784a; --accent2:#d08c65; --accent-ink:#080a0a; --arcane:#b3a48c; --arcane-soft:rgba(179,164,140,0.16);
  --green:#34f0b0; --red:#ff5468; --amber:#f5c04a; --gold:#d18e67; --shadow:rgba(0,0,0,.6); --glass:rgba(32,36,36,0.84);
  --display:'Marcellus',Georgia,serif; --body:'Source Sans 3',system-ui,sans-serif; --lore:'Newsreader',Georgia,serif; --lore-size:18px;
  --hd-case:none; --hd-ls:.04em; --hd-w:700; --r:16px; --rb:12px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='38' fill='none' stroke='black' stroke-width='7'/><path d='M50 12a19 19 0 0 1 0 38 19 19 0 0 0 0 38 38 38 0 0 1 0-76z'/></svg>");
  --fx:repeating-linear-gradient(135deg,rgba(179,164,140,.03) 0 2px,transparent 2px 15px),radial-gradient(50% 30% at 50% 0%,rgba(179,164,140,.09),transparent);
  --aur1:.2; --aur-a:11s; --die:#594a3f; --die-tens:#827262; --die-edge:#e6e0d5; --die-label:#ffffff; --die-outline:#0c0d0e; --die-glow:#c8784a;
  --meta:#111314;
}
[data-theme="ranger"]{                 /* Ranger: palette from the class swatch */
  --bg:#0e1d14; --bg2:#15271b; --surface:#1c3021; --raised:#223927; --raised2:#2a432e; --line:#28402b; --line2:#476747; --text:#e8e4da;
  --text2:#bfc0b5; --muted:#a8ada3; --accent:#c9b45a; --accent2:#b18944; --accent-ink:#070e0a; --arcane:#8fbf86; --arcane-soft:rgba(143,191,134,0.16);
  --green:#7be07d; --red:#ff7360; --amber:#f2c14e; --gold:#c9b45a; --shadow:rgba(0,0,0,.5); --glass:rgba(28,48,33,0.84);
  --display:'Philosopher',Georgia,serif; --body:'Nunito',system-ui,sans-serif; --lore:'Lora',Georgia,serif; --lore-size:18px; --hd-case:none;
  --hd-ls:-.01em; --hd-w:700; --r:28px; --rb:18px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 78 44H64l18 26H18l18-26H22z'/><rect x='44' y='70' width='12' height='24'/></svg>");
  --fx:radial-gradient(50% 35% at 0% 0%,rgba(143,191,134,.12),transparent),radial-gradient(50% 40% at 100% 100%,rgba(201,180,90,.1),transparent);
  --aur1:.3; --aur-a:24s; --die:#56643c; --die-tens:#708d5d; --die-edge:#e8e4da; --die-label:#ffffff; --die-outline:#0a140e; --die-glow:#c9b45a;
  --meta:#0e1d14;
}
[data-theme="dungeon"]{                 /* Dungeon Crawl */
  --bg:#0d0d0f; --bg2:#121215; --surface:#1a1a1e; --raised:#25252b; --raised2:#323239;
  --line:#30303a; --line2:#45454f; --text:#ebe8e1; --text2:#d0cbc0; --muted:#a29d91;
  --accent:#ffb347; --accent2:#f0791c; --accent-ink:#231000; --arcane:#e8a24a; --arcane-soft:rgba(232,162,74,.14);
  --green:#8fc56a; --red:#ef6a58; --amber:#ffb347; --gold:#ffb347;
  --shadow:rgba(0,0,0,.6); --glass:rgba(26,26,30,.88);
  --display:'MedievalSharp',Georgia,serif; --body:'Alegreya Sans',system-ui,sans-serif; --lore:'Alegreya',Georgia,serif; --lore-size:19px;
  --hd-case:none; --hd-ls:.01em; --hd-w:400; --r:6px; --rb:6px; --rp:8px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M20 92V42a30 30 0 0 1 60 0v50z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/><path d='M50 14v78M20 60h60' stroke='black' stroke-width='4'/><circle cx='42' cy='64' r='3'/><circle cx='58' cy='64' r='3'/></svg>");
  --fx:radial-gradient(60% 40% at 50% 112%,rgba(255,160,60,.2),transparent),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 38px),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 64px);
  --aur1:.3; --aur-a:4.5s;
  --die:#4f505c; --die-tens:#6b4f3a; --die-edge:#ffb347; --die-label:#fff2d8; --die-outline:#17171c; --die-glow:#ffb347;
  --meta:#0d0d0f; color-scheme:dark;
}
[data-theme="tavern"]{                  /* Tavern Night */
  --bg:#140d08; --bg2:#1a110a; --surface:#241810; --raised:#32221a; --raised2:#443024;
  --line:#402c20; --line2:#5a4030; --text:#f6e9d7; --text2:#e3d1b8; --muted:#b9a38a;
  --accent:#ffd37a; --accent2:#e8962a; --accent-ink:#2a1604; --arcane:#ffcb6b; --arcane-soft:rgba(255,203,107,.14);
  --green:#8fcf7a; --red:#f0705a; --amber:#ffcb6b; --gold:#ffcb6b;
  --shadow:rgba(0,0,0,.55); --glass:rgba(36,24,16,.88);
  --display:'Philosopher',Georgia,serif; --body:'Merriweather Sans',system-ui,sans-serif; --lore:'Merriweather',Georgia,serif; --lore-size:16.5px;
  --hd-case:none; --hd-ls:.01em; --hd-w:700; --r:16px; --rb:12px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M22 32h46v48a8 8 0 0 1-8 8H30a8 8 0 0 1-8-8z' fill='none' stroke='black' stroke-width='6' stroke-linejoin='round'/><path d='M68 44h8a10 10 0 0 1 0 28h-8' fill='none' stroke='black' stroke-width='6'/><path d='M30 26c4-8 12-8 16 0 4-8 12-8 16 0' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/></svg>");
  --fx:radial-gradient(45% 35% at 0% 0%,rgba(255,170,70,.18),transparent),radial-gradient(45% 35% at 100% 100%,rgba(255,150,50,.13),transparent);
  --aur1:.34; --aur-a:7s;
  --die:#8b5a2b; --die-tens:#5a3a1e; --die-edge:#ffd37a; --die-label:#fff4d6; --die-outline:#2a1604; --die-glow:#ffcb6b;
  --meta:#140d08; color-scheme:dark;
}
[data-theme="feywild"]{                 /* Feywild */
  --bg:#0f0a1e; --bg2:#150f28; --surface:#1d1535; --raised:#281d46; --raised2:#352862;
  --line:#2f2457; --line2:#463a7a; --text:#f8f1ff; --text2:#dccff2; --muted:#b0a2d6;
  --accent:#ff9ad5; --accent2:#8ee6d4; --accent-ink:#2a0f26; --arcane:#c8a8ff; --arcane-soft:rgba(200,168,255,.16);
  --green:#7fe8b5; --red:#ff7a9a; --amber:#ffd47a; --gold:#ffd47a;
  --shadow:rgba(0,0,0,.5); --glass:rgba(29,21,53,.84);
  --display:'Quicksand',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif; --lore:'Cormorant Garamond',Georgia,serif; --lore-size:20px;
  --hd-case:none; --hd-ls:0; --hd-w:700; --r:30px; --rb:20px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='9'/><ellipse cx='50' cy='24' rx='9' ry='16'/><ellipse cx='50' cy='76' rx='9' ry='16'/><ellipse cx='24' cy='50' rx='16' ry='9'/><ellipse cx='76' cy='50' rx='16' ry='9'/></svg>");
  --fx:radial-gradient(45% 35% at 10% 5%,rgba(255,154,213,.2),transparent),radial-gradient(45% 35% at 95% 30%,rgba(142,230,212,.14),transparent),radial-gradient(50% 40% at 40% 105%,rgba(200,168,255,.18),transparent),radial-gradient(1.4px 1.4px at 20% 25%,rgba(255,255,255,.8),transparent 70%),radial-gradient(1.4px 1.4px at 70% 60%,rgba(255,220,250,.7),transparent 70%),radial-gradient(1.2px 1.2px at 45% 85%,rgba(200,255,240,.7),transparent 70%);
  --aur1:.4; --aur-a:16s;
  --die:#c096f2; --die-tens:#7fe0cf; --die-edge:#ffe0f5; --die-label:#26094a; --die-outline:#ffffff; --die-glow:#ffd0f0;
  --meta:#0f0a1e; color-scheme:dark;
}
[data-theme="underdark"]{               /* Underdark */
  --bg:#040f0f; --bg2:#071716; --surface:#0c211f; --raised:#123030; --raised2:#1b4442;
  --line:#16393a; --line2:#235b5c; --text:#e6fbf7; --text2:#c0e9e1; --muted:#7fb2ab;
  --accent:#36e8d6; --accent2:#6cf08a; --accent-ink:#02201b; --arcane:#7af0e6; --arcane-soft:rgba(122,240,230,.12);
  --green:#6dee9a; --red:#ff6a8a; --amber:#ffd36a; --gold:#ffd36a;
  --shadow:rgba(0,0,0,.65); --glass:rgba(12,33,31,.88);
  --display:'Exo 2',system-ui,sans-serif; --body:'Exo 2',system-ui,sans-serif; --lore:'Spectral',Georgia,serif; --lore-size:17.5px;
  --hd-case:none; --hd-ls:.01em; --hd-w:700; --r:16px; --rb:12px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10 54a40 36 0 0 1 80 0z'/><rect x='40' y='54' width='20' height='36' rx='8'/></svg>");
  --fx:radial-gradient(1.6px 1.6px at 15% 22%,rgba(122,240,230,.8),transparent 70%),radial-gradient(1.4px 1.4px at 80% 18%,rgba(180,140,255,.7),transparent 70%),radial-gradient(1.4px 1.4px at 35% 62%,rgba(122,240,230,.6),transparent 70%),radial-gradient(1.6px 1.6px at 90% 70%,rgba(108,240,138,.6),transparent 70%),radial-gradient(1.2px 1.2px at 55% 90%,rgba(180,140,255,.6),transparent 70%),radial-gradient(60% 40% at 50% 110%,rgba(54,232,214,.16),transparent),radial-gradient(40% 30% at 100% 0%,rgba(150,110,255,.12),transparent);
  --aur1:.34; --aur-a:10s;
  --die:#0e7770; --die-tens:#5b3b9a; --die-edge:#7af0e6; --die-label:#e8fffb; --die-outline:#02100e; --die-glow:#7af0e6;
  --meta:#040f0f; color-scheme:dark;
}
[data-theme="frostfell"]{               /* Frostfell */
  --bg:#070f17; --bg2:#0a1621; --surface:#0f1e2c; --raised:#162a3b; --raised2:#1f3a50;
  --line:#1b3447; --line2:#2a516b; --text:#eef8ff; --text2:#cde4f3; --muted:#88acc4;
  --accent:#c4f1ff; --accent2:#5db9ff; --accent-ink:#04202f; --arcane:#8fe3ff; --arcane-soft:rgba(143,227,255,.14);
  --green:#6de8b3; --red:#ff7a8c; --amber:#ffd98a; --gold:#ffd98a;
  --shadow:rgba(0,0,0,.55); --glass:rgba(15,30,44,.86);
  --display:'Rajdhani',system-ui,sans-serif; --body:'Karla',system-ui,sans-serif; --lore:'Libre Baskerville',Georgia,serif; --lore-size:16px;
  --hd-case:uppercase; --hd-ls:.06em; --hd-w:700; --r:12px; --rb:8px; --rp:10px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8v84M13 29l74 42M13 71l74-42' stroke='black' stroke-width='6' stroke-linecap='round'/><path d='M40 18l10 10 10-10M40 82l10-10 10 10M16 46l14 4-4 14M84 46 70 50l4 14' stroke='black' stroke-width='4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --fx:radial-gradient(70% 35% at 50% -8%,rgba(120,255,220,.14),transparent),radial-gradient(60% 40% at 80% 0%,rgba(110,170,255,.14),transparent),radial-gradient(1.4px 1.4px at 14% 24%,rgba(255,255,255,.7),transparent 70%),radial-gradient(1.2px 1.2px at 72% 40%,rgba(255,255,255,.55),transparent 70%),radial-gradient(1.4px 1.4px at 40% 78%,rgba(255,255,255,.6),transparent 70%),radial-gradient(1.2px 1.2px at 90% 88%,rgba(255,255,255,.5),transparent 70%);
  --aur1:.4; --aur-a:18s;
  --die:#6fb6e6; --die-tens:#3a7fb8; --die-edge:#f0fbff; --die-label:#082a44; --die-outline:#e8f7ff; --die-glow:#b8f0ff;
  --meta:#070f17; color-scheme:dark;
}
[data-theme="dunes"]{                   /* Sunscorched Dunes */
  --bg:#170e12; --bg2:#1d1217; --surface:#261519; --raised:#34202a; --raised2:#482d38;
  --line:#43282f; --line2:#5f3b44; --text:#fbeee6; --text2:#ead5c7; --muted:#bd9e8f;
  --accent:#ff9a62; --accent2:#e2573a; --accent-ink:#2a0d05; --arcane:#4fd6c8; --arcane-soft:rgba(79,214,200,.14);
  --green:#7bd88f; --red:#ff6d5e; --amber:#ffc875; --gold:#ffc875;
  --shadow:rgba(0,0,0,.55); --glass:rgba(38,21,25,.88);
  --display:'Josefin Sans',system-ui,sans-serif; --body:'Mukta',system-ui,sans-serif; --lore:'Crimson Pro',Georgia,serif; --lore-size:19px;
  --hd-case:uppercase; --hd-ls:.08em; --hd-w:700; --r:14px; --rb:10px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='38' r='18'/><path d='M6 86c14-22 30-22 44-6 14-16 30-16 44 6z'/></svg>");
  --fx:radial-gradient(60% 45% at 50% 0%,rgba(255,130,80,.22),transparent),radial-gradient(50% 40% at 0% 100%,rgba(79,214,200,.12),transparent),radial-gradient(40% 30% at 100% 70%,rgba(255,200,117,.1),transparent);
  --aur1:.38; --aur-a:15s;
  --die:#c4553a; --die-tens:#1f8f8a; --die-edge:#ffd7a0; --die-label:#fff3e0; --die-outline:#2a0d05; --die-glow:#4fd6c8;
  --meta:#170e12; color-scheme:dark;
}

/* ---- Day versions: the same look in daylight ---- */
[data-mode="day"]{--green:#1f9d57; --red:#d83f4f; --amber:#c98a10; --shadow:rgba(40,30,70,.13); --glass:rgba(255,255,255,.88); color-scheme:light}
[data-theme="scoreboard"][data-mode="day"]{                 /* Scoreboard: crimson and gold, the default look */
  --bg:#ebe7e2; --bg2:#e3ded7; --surface:#ffffff; --raised:#f7f3ec; --raised2:#eee6d8;
  --line:#e4ded4; --line2:#cdc3b3; --text:#1f1214; --text2:#43302f; --muted:#66524f;
  --accent:#e3b23c; --accent2:#c9961f; --accent-ink:#2a1c02; --arcane:#a3182b; --arcane-soft:rgba(227,178,60,.2);
  --green:#1f8a4c; --red:#c0283a; --amber:#b57a0a; --gold:#85600e;
  --shadow:rgba(40,10,15,.12); --glass:rgba(255,255,255,.9); --band:#3d0c16; --band2:#5c1424;
  --display:'Oswald',Impact,sans-serif; --body:'Inter',system-ui,sans-serif; --lore:'Newsreader',Georgia,serif; --lore-size:17.5px;
  --hd-case:uppercase; --hd-ls:.02em; --hd-w:700; --r:6px; --rb:6px; --rp:999px;
  --ornament:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 91 28v44L50 94 9 72V28z' fill='none' stroke='black' stroke-width='8' stroke-linejoin='round'/><path d='M50 6v28M9 28l25 22M91 28 66 50M9 72l25-22M91 72 66 50M50 94V66M34 50h32L50 66z' fill='none' stroke='black' stroke-width='4'/></svg>");
  --fx:none;
  --aur1:0; --aur-a:20s;
  --die:#a3182b; --die-tens:#3d0c16; --die-edge:#f3d98a; --die-label:#ffffff; --die-outline:#2b0b12; --die-glow:#e8b83c;
  --meta:#3d0c16; color-scheme:light;
}
[data-theme="wizard"][data-mode="day"]{
  --bg:#edeceb; --bg2:#e3e4e6; --surface:#fdfcfc; --raised:#e9e9e9; --raised2:#dadde1; --line:#d6dadf; --line2:#bac2cf; --text:#12223e;
  --text2:#394355; --muted:#575d67; --accent:#8f7edb; --accent2:#a091e0; --accent-ink:#050a14; --arcane:#5a5b91; --arcane-soft:rgba(90,91,145,0.12);
  --gold:#625697;
  --fx:radial-gradient(60% 40% at 15% 0%,rgba(90,91,145,.13),transparent),radial-gradient(50% 35% at 100% 100%,rgba(143,126,219,.12),transparent);
  --aur1:.2; --meta:#edeceb;
}
[data-theme="paladin"][data-mode="day"]{
  --bg:#f0efed; --bg2:#e6e6e4; --surface:#fefefd; --raised:#ecece9; --raised2:#dededd; --line:#dadad9; --line2:#bdc0c0; --text:#1d242a;
  --text2:#424649; --muted:#5c5f60; --accent:#d5ad55; --accent2:#ba8440; --accent-ink:#0c0e11; --arcane:#585d63; --arcane-soft:rgba(88,93,99,0.12);
  --gold:#735e2e;
  --fx:radial-gradient(70% 45% at 50% -5%,rgba(88,93,99,.55),transparent),radial-gradient(60% 40% at 50% 110%,rgba(213,173,85,.1),transparent);
  --aur1:.3; --meta:#f0efed;
}
[data-theme="rogue"][data-mode="day"]{
  --bg:#edeae7; --bg2:#e4e2df; --surface:#fdfcfb; --raised:#e9e7e4; --raised2:#dddbd8; --line:#d9d7d5; --line2:#bfbfbe; --text:#181a1d;
  --text2:#434445; --muted:#5e5e5e; --accent:#b87333; --accent2:#c38852; --accent-ink:#050606; --arcane:#665e55; --arcane-soft:rgba(102,94,85,0.12);
  --gold:#845324;
  --fx:repeating-linear-gradient(135deg,rgba(102,94,85,.055) 0 2px,transparent 2px 15px),radial-gradient(50% 30% at 50% 0%,rgba(102,94,85,.1),transparent);
  --aur1:.16; --meta:#edeae7;
}
[data-theme="barbarian"][data-mode="day"]{
  --bg:#eeeae6; --bg2:#e6deda; --surface:#fdfcfc; --raised:#ebe5e1; --raised2:#e0d5d1; --line:#ddd0cd; --line2:#c7b0ad; --text:#240c0c;
  --text2:#4f3c3c; --muted:#635957; --accent:#c93a30; --accent2:#922b2b; --accent-ink:#ffffff; --arcane:#825034; --arcane-soft:rgba(130,80,52,0.12);
  --gold:#972c24;
  --fx:radial-gradient(60% 40% at 50% 112%,rgba(130,80,52,.2),transparent),radial-gradient(40% 30% at 0% 0%,rgba(201,58,48,.16),transparent);
  --aur1:.22; --meta:#eeeae6;
}
[data-theme="druid"][data-mode="day"]{
  --bg:#ebebe5; --bg2:#e1e3dc; --surface:#fcfcfb; --raised:#e7e8e1; --raised2:#d8dcd5; --line:#d4d8d1; --line2:#b8c0b8; --text:#14231d;
  --text2:#3b443f; --muted:#575d59; --accent:#c6a85b; --accent2:#af8044; --accent-ink:#060c0a; --arcane:#48654d; --arcane-soft:rgba(72,101,77,0.12);
  --gold:#6b5b31;
  --fx:radial-gradient(50% 35% at 0% 0%,rgba(72,101,77,.22),transparent),radial-gradient(50% 40% at 100% 100%,rgba(198,168,91,.13),transparent);
  --aur1:.22; --meta:#ebebe5;
}
[data-theme="cleric"][data-mode="day"]{
  --bg:#eff0ef; --bg2:#e4e7e9; --surface:#fefefd; --raised:#ebeded; --raised2:#dbdfe4; --line:#d7dce1; --line2:#b8c1cf; --text:#141f35;
  --text2:#3e4654; --muted:#595e65; --accent:#e4c76a; --accent2:#c4964f; --accent-ink:#080a10; --arcane:#4d6082; --arcane-soft:rgba(77,96,130,0.12);
  --gold:#6d5f33;
  --fx:radial-gradient(70% 42% at 50% -10%,rgba(77,96,130,.55),transparent),radial-gradient(50% 30% at 100% 100%,rgba(228,199,106,.1),transparent);
  --aur1:.26; --die:#ece6d2; --die-tens:#cfd9f0; --die-edge:#8e9bbd; --die-label:#1d3b8b; --die-outline:#ffffff; --die-glow:#ffcf5a; --meta:#eff0ef;
}
[data-theme="warlock"][data-mode="day"]{
  --bg:#e9e5ed; --bg2:#e1dce6; --surface:#fcfbfc; --raised:#e6e1ea; --raised2:#dad4e0; --line:#d7d1de; --line2:#c0b7ca; --text:#1a1424;
  --text2:#433f4b; --muted:#5d5a63; --accent:#9a6cc7; --accent2:#a982cf; --accent-ink:#040406; --arcane:#695186; --arcane-soft:rgba(105,81,134,0.12);
  --gold:#6b4b89;
  --fx:radial-gradient(50% 40% at 100% 0%,rgba(105,81,134,.15),transparent),radial-gradient(40% 40% at 0% 100%,rgba(154,108,199,.11),transparent);
  --aur1:.22; --meta:#e9e5ed;
}
[data-theme="bard"][data-mode="day"]{
  --bg:#f0ecf0; --bg2:#e7e2e7; --surface:#fefdfe; --raised:#ece8ec; --raised2:#e0dae0; --line:#dcd6dc; --line2:#c3b9c2; --text:#2c1a2a;
  --text2:#4b3e4a; --muted:#625a61; --accent:#d2a85a; --accent2:#b88044; --accent-ink:#120a11; --arcane:#755367; --arcane-soft:rgba(117,83,103,0.12);
  --gold:#725b31;
  --fx:radial-gradient(60% 40% at 50% -8%,rgba(117,83,103,.4),transparent),radial-gradient(50% 40% at 100% 100%,rgba(210,168,90,.12),transparent);
  --aur1:.22; --meta:#f0ecf0;
}
[data-theme="sorcerer"][data-mode="day"]{
  --bg:#efeded; --bg2:#e4e4e7; --surface:#fefdfc; --raised:#ebe9eb; --raised2:#dcdce2; --line:#d8d9e0; --line2:#bbbfcf; --text:#10203c;
  --text2:#384254; --muted:#575c66; --accent:#e0b056; --accent2:#c18641; --accent-ink:#040a14; --arcane:#784c88; --arcane-soft:rgba(120,76,136,0.12);
  --gold:#725a2c;
  --fx:radial-gradient(50% 40% at 100% 0%,rgba(120,76,136,.15),transparent),radial-gradient(40% 40% at 0% 100%,rgba(224,176,86,.11),transparent);
  --aur1:.22; --meta:#efeded;
}
[data-theme="fighter"][data-mode="day"]{
  --bg:#edecea; --bg2:#e3e4e4; --surface:#fdfcfc; --raised:#e9e9e8; --raised2:#dbddde; --line:#d7dadc; --line2:#bbc2c9; --text:#16263b;
  --text2:#3a434f; --muted:#595e66; --accent:#c99b6b; --accent2:#b17750; --accent-ink:#080e17; --arcane:#4c5d70; --arcane-soft:rgba(76,93,112,0.12);
  --gold:#73583d;
  --fx:radial-gradient(60% 40% at 50% 112%,rgba(76,93,112,.2),transparent),radial-gradient(40% 30% at 0% 0%,rgba(201,155,107,.16),transparent);
  --aur1:.22; --meta:#edecea;
}
[data-theme="monk"][data-mode="day"]{
  --bg:#eceae6; --bg2:#e3e1dd; --surface:#fdfcfb; --raised:#e8e6e2; --raised2:#dbd9d6; --line:#d7d6d2; --line2:#bcbcb9; --text:#1a1d1e;
  --text2:#414343; --muted:#5a5a59; --accent:#c8784a; --accent2:#d08c65; --accent-ink:#080a0a; --arcane:#615b51; --arcane-soft:rgba(97,91,81,0.12);
  --gold:#844f31;
  --fx:repeating-linear-gradient(135deg,rgba(97,91,81,.055) 0 2px,transparent 2px 15px),radial-gradient(50% 30% at 50% 0%,rgba(97,91,81,.1),transparent);
  --aur1:.16; --meta:#eceae6;
}
[data-theme="ranger"][data-mode="day"]{
  --bg:#ecece7; --bg2:#e2e4de; --surface:#fdfcfc; --raised:#e8e9e4; --raised2:#daddd6; --line:#d6dad2; --line2:#bac2b8; --text:#16281c;
  --text2:#3c473f; --muted:#595f59; --accent:#c9b45a; --accent2:#b18944; --accent-ink:#070e0a; --arcane:#4a6647; --arcane-soft:rgba(74,102,71,0.12);
  --gold:#675c2e;
  --fx:radial-gradient(50% 35% at 0% 0%,rgba(74,102,71,.22),transparent),radial-gradient(50% 40% at 100% 100%,rgba(201,180,90,.13),transparent);
  --aur1:.22; --meta:#ecece7;
}
[data-theme="dungeon"][data-mode="day"]{
  --bg:#eeeae0; --bg2:#e6e1d3; --surface:#fbf9f2; --raised:#f1ede1; --raised2:#e3ddcc; --line:#ddd6c3; --line2:#c7bea4;
  --text:#1f1c16; --text2:#433e33; --muted:#6a6455; --accent:#e9922a; --accent2:#c9611a; --accent-ink:#1f0f02; --arcane:#a8570f; --arcane-soft:rgba(168,87,15,.12); --gold:#946806;
  --fx:radial-gradient(60% 40% at 50% 112%,rgba(233,146,42,.22),transparent),repeating-linear-gradient(0deg,rgba(60,50,30,.04) 0 1px,transparent 1px 38px),repeating-linear-gradient(90deg,rgba(60,50,30,.03) 0 1px,transparent 1px 64px);
  --aur1:.2; --meta:#eeeae0;
}
[data-theme="tavern"][data-mode="day"]{
  --bg:#f6ecd9; --bg2:#efe0c4; --surface:#fffaf0; --raised:#f6ead2; --raised2:#ecdab8; --line:#e6d3ae; --line2:#d0b88a;
  --text:#2a1a0c; --text2:#52391f; --muted:#745c3e; --accent:#e8a63a; --accent2:#cf7a17; --accent-ink:#2a1604; --arcane:#9a5a12; --arcane-soft:rgba(154,90,18,.14); --gold:#9a5a12;
  --fx:radial-gradient(45% 35% at 0% 0%,rgba(255,170,70,.26),transparent),radial-gradient(45% 35% at 100% 100%,rgba(255,150,50,.18),transparent);
  --aur1:.26; --meta:#f6ecd9;
}
[data-theme="feywild"][data-mode="day"]{
  --bg:#fbf6ff; --bg2:#f3eafc; --surface:#ffffff; --raised:#f6eefd; --raised2:#ebdefa; --line:#e6d8f7; --line2:#d3bdee;
  --text:#25103f; --text2:#4a2f72; --muted:#72609a; --accent:#ee77c4; --accent2:#5bc4ae; --accent-ink:#2a0f26; --arcane:#8250d0; --arcane-soft:rgba(130,80,208,.12); --gold:#946806;
  --fx:radial-gradient(45% 35% at 10% 5%,rgba(238,119,196,.22),transparent),radial-gradient(45% 35% at 95% 30%,rgba(91,196,174,.18),transparent),radial-gradient(50% 40% at 40% 105%,rgba(200,168,255,.3),transparent);
  --aur1:.3; --meta:#fbf6ff;
}
[data-theme="underdark"][data-mode="day"]{
  --bg:#e9f5f2; --bg2:#dcede9; --surface:#ffffff; --raised:#e8f4f1; --raised2:#d3e8e3; --line:#cde3de; --line2:#a9cdc5;
  --text:#0a2321; --text2:#214744; --muted:#476b67; --accent:#14b8a6; --accent2:#15ab9f; --accent-ink:#021f1b; --arcane:#0a7770; --arcane-soft:rgba(10,119,112,.12); --gold:#946806;
  --fx:radial-gradient(60% 40% at 50% 110%,rgba(20,184,166,.22),transparent),radial-gradient(40% 30% at 100% 0%,rgba(150,110,255,.12),transparent);
  --aur1:.2; --meta:#e9f5f2;
}
[data-theme="frostfell"][data-mode="day"]{
  --bg:#edf5fa; --bg2:#e1edf5; --surface:#ffffff; --raised:#eaf2f8; --raised2:#d9e8f2; --line:#d3e4ef; --line2:#b4cfe0;
  --text:#0c2236; --text2:#2a4960; --muted:#4f6e87; --accent:#8fd3ff; --accent2:#3f9fe8; --accent-ink:#04202f; --arcane:#1769c2; --arcane-soft:rgba(23,105,194,.1); --gold:#946806;
  --fx:radial-gradient(70% 35% at 50% -8%,rgba(120,220,255,.35),transparent),radial-gradient(60% 40% at 80% 0%,rgba(110,170,255,.16),transparent);
  --aur1:.24; --meta:#edf5fa;
}
[data-theme="dunes"][data-mode="day"]{
  --bg:#f6ead3; --bg2:#eedcbc; --surface:#fffaf0; --raised:#f7ebd2; --raised2:#ecd9b5; --line:#e7d2a9; --line2:#d2b783;
  --text:#2b1a0e; --text2:#55391f; --muted:#745a3d; --accent:#f0845a; --accent2:#d85a34; --accent-ink:#2a0d05; --arcane:#0f7f86; --arcane-soft:rgba(15,127,134,.12); --gold:#946806;
  --fx:radial-gradient(60% 45% at 50% 0%,rgba(255,150,90,.3),transparent),radial-gradient(50% 40% at 0% 100%,rgba(79,214,200,.16),transparent);
  --aur1:.28; --meta:#f6ead3;
}

/* =====================================================================
   BASE
   ===================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--fx)}
.display{font-family:var(--display);font-weight:var(--hd-w);letter-spacing:var(--hd-ls);margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--arcane);outline-offset:2px}
.nm,.sub,.pre,.note,.kv span,.feat summary,.empty,.qnote,h2,h3{overflow-wrap:anywhere}

/* ---------- login ---------- */
body.login{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}
body.login::after{content:'';position:fixed;left:50%;top:-20vmax;width:90vmax;height:70vmax;margin-left:-45vmax;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;background:radial-gradient(circle,var(--arcane),transparent 65%);animation:drift 18s ease-in-out infinite alternate}
.gate{position:relative;z-index:1;width:min(320px,86vw);display:grid;gap:12px;text-align:center}
.gate .emblem{width:92px;height:92px;margin:0 auto 2px;filter:drop-shadow(0 0 18px var(--arcane));animation:breathe 4s ease-in-out infinite}
.gate h1{font-size:36px;line-height:1.1;margin-bottom:8px;text-transform:var(--hd-case);background:linear-gradient(90deg,var(--arcane),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.gate h1 span{color:transparent}
.gate input{padding:14px;border-radius:var(--rb);border:1px solid var(--line2);text-align:center;background:var(--glass);color:var(--text);font-size:16px}
.gate input:focus{outline:2px solid var(--arcane);border-color:transparent}
.gate button{padding:14px;border:0;border-radius:var(--rb);background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);font-weight:800;letter-spacing:.04em;font-size:14px;box-shadow:0 8px 24px var(--shadow)}
#err{margin:0;color:var(--red);min-height:1.2em;font-size:14px}
@keyframes drift{to{transform:translate(6vmax,5vmax)}}
@keyframes breathe{50%{filter:drop-shadow(0 0 30px var(--arcane))}}

/* ---------- shell ---------- */
.wrap{max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:108px;position:relative;z-index:1}
.top{position:relative;display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;overflow:hidden}
.top::before{content:'';position:absolute;pointer-events:none;width:300px;height:220px;left:-90px;top:-120px;border-radius:50%;filter:blur(48px);background:radial-gradient(circle,var(--arcane),transparent 68%);opacity:var(--aur1);animation:drift var(--aur-a) ease-in-out infinite alternate}
.brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.emblem{position:relative;flex:none;width:46px;height:46px;border-radius:calc(var(--r)*.6);background:linear-gradient(145deg,var(--raised),var(--surface));border:1px solid var(--line2);box-shadow:0 4px 14px var(--shadow)}
.emblem::after{content:'';position:absolute;inset:9px;background:var(--accent);-webkit-mask:var(--ornament) center/contain no-repeat;mask:var(--ornament) center/contain no-repeat}
.bt{min-width:0}
.top h1{margin:0;font-family:var(--display);font-size:19px;line-height:1.18;font-weight:var(--hd-w);letter-spacing:var(--hd-ls);text-transform:var(--hd-case);overflow-wrap:anywhere}
.top p{margin:2px 0 0;color:var(--muted);font-size:13px}
.topbtns{position:relative;z-index:2;flex:none;display:flex;gap:8px;align-items:center}
.top .gear{border:1px solid var(--line2);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);border-radius:var(--rp);padding:0 14px;height:40px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;text-decoration:none;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .gear:empty{display:none}
.modebtn{width:40px;padding:0!important;justify-content:center}
.modebtn svg{display:block}
main{padding:8px 14px}

/* floating tab bar */
nav.bar{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
nav.bar .in{pointer-events:auto;display:flex;width:100%;max-width:456px;padding:6px;border-radius:calc(var(--r) + 6px);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line2);box-shadow:0 10px 30px var(--shadow)}
nav.bar a{flex:1;position:relative;display:grid;justify-items:center;gap:2px;padding:8px 0 6px;border-radius:var(--r);text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.02em;transition:background .2s,color .2s}
nav.bar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.bar a.on{color:var(--text);background:var(--arcane-soft)}
nav.bar a.on svg{stroke:var(--arcane)}
nav.bar a .dot{position:absolute;top:6px;left:calc(50% + 9px);width:9px;height:9px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2)}

/* ---------- cards and rows ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden;box-shadow:0 2px 12px var(--shadow)}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 16px 8px;color:var(--text)}
.card .hd h2{margin:0;font-family:var(--display);font-size:17px;font-weight:var(--hd-w);letter-spacing:var(--hd-ls);text-transform:var(--hd-case)}
.card .hd small{color:var(--muted);font-size:12.5px;letter-spacing:.06em;font-weight:700;margin-left:auto;text-transform:uppercase}
.card .hd .btn{padding:8px 14px;min-height:38px;font-size:14px}
.card .bd{padding:6px 16px 16px}
.note{color:var(--muted);font-size:14px;margin:10px 4px 0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pill{border:1px solid var(--line2);background:var(--raised);border-radius:var(--rp);padding:9px 15px;min-height:40px;font-size:14.5px;font-weight:600;transition:.15s}
.pill.on{background:var(--arcane-soft);color:var(--text);border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset}
.empty{text-align:center;color:var(--muted);padding:20px 10px}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row.me{background:linear-gradient(90deg,var(--arcane-soft),transparent)}
.row.pc,.row.menu{cursor:pointer;transition:background .15s}
.row.pc:active,.row.menu:active{background:var(--raised)}
.av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;font-family:var(--display);box-shadow:0 2px 8px var(--shadow)}
.av::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.grow{flex:1;min-width:0}
.nm{font-weight:600;font-size:16.5px}
.sub{color:var(--muted);font-size:14px}
.big{font-weight:700;font-size:19px;text-align:right;font-family:var(--display)}
.big small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);font-family:var(--body)}
.rank{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--raised);color:var(--muted)}
.rank.g{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink)}
.statcol{text-align:right;flex:none}
.acpill{display:inline-block;margin-top:5px;background:var(--raised2);color:var(--text);border-radius:var(--rp);padding:3px 10px;font-size:13px;font-weight:700}
.chev{flex:none;color:var(--muted);font-size:26px;line-height:1}
.mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mini.pad{padding:0 16px 12px}
.tag{font-size:12px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--red);border-radius:var(--rp);padding:2px 9px}
.tag.pc{background:var(--green);color:#04210f}
.hp{height:10px;border-radius:var(--rp);background:var(--raised2);overflow:hidden;margin-top:8px}
.hp i{display:block;height:100%;border-radius:var(--rp);background:linear-gradient(90deg,#22c55e,#4ade80);transition:width .3s}
.hp i.mid{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.hp i.low{background:linear-gradient(90deg,#ef4444,#ff6372);animation:throb 1.8s ease-in-out infinite}
@keyframes throb{50%{filter:brightness(1.3)}}
.pquote{font-family:var(--lore);font-style:italic;color:var(--text2);margin-top:6px;font-size:15px;line-height:1.35}

/* buttons */
.btn{border:1px solid var(--line2);background:var(--raised);color:var(--text);border-radius:var(--rb);padding:11px 16px;min-height:44px;font-weight:600;font-size:15px;transition:transform .1s,filter .15s}
.btn.gold{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border:0;font-weight:700;box-shadow:0 6px 18px var(--shadow)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn.red{background:var(--red);color:#fff;border:0}
.btn.sm{padding:8px 13px;min-height:38px;font-size:14px}
.btn:active,.pill:active{transform:scale(.97);filter:brightness(.94)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btns.center{justify-content:center}
.iconbtn{flex:none;width:40px;height:40px;border-radius:var(--rb);border:1px solid var(--line2);background:var(--raised);font-weight:800;font-size:18px;line-height:1}
.back{display:inline-flex;align-items:center;min-height:44px;margin:0 0 2px;padding:0 10px 0 2px;font-weight:600;font-size:15.5px;text-decoration:none;color:var(--arcane)}

/* ---------- dialogs and forms ---------- */
#modal,#confirm{position:fixed;inset:0;z-index:50;background:rgba(3,4,8,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center}
#confirm{z-index:60;align-items:center;padding:20px}
#modal.open,#confirm.open{display:flex}
.sheet{position:relative;background:var(--surface);border:1px solid var(--line2);border-bottom:0;width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:calc(var(--r) + 6px) calc(var(--r) + 6px) 0 0;padding:22px 18px;padding-bottom:calc(20px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px var(--shadow)}
.sheet::before{content:'';position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:var(--line2)}
.sheet h2{margin:6px 0 12px;font-family:var(--display);font-size:21px;font-weight:var(--hd-w);letter-spacing:var(--hd-ls);text-transform:var(--hd-case)}
.cbox{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);padding:20px;max-width:340px;width:100%;box-shadow:0 20px 50px var(--shadow)}
.cbox p{margin:0;font-size:16.5px}
.fld{display:block;margin-bottom:12px}
.fld span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;padding:12px;border:1px solid var(--line2);border-radius:var(--rb);background:var(--raised);font-size:16px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.search:focus{outline:2px solid var(--arcane);border-color:transparent}
.fld textarea{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.search{width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:var(--rb);background:var(--raised);margin-bottom:12px;font-size:16px}
.gen{font-family:var(--display);font-size:19px;text-align:center;padding:12px 0;min-height:50px}
.gen.secret{background:var(--raised);border:1px solid var(--line2);border-radius:var(--rb);user-select:all;word-break:break-all;letter-spacing:.06em}
#toasts{position:fixed;left:0;right:0;bottom:calc(100px + env(safe-area-inset-bottom));z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);border:1px solid var(--line2);border-radius:var(--rb);padding:12px 16px;font-size:15px;max-width:420px;box-shadow:0 10px 30px var(--shadow);opacity:0;transform:translateY(10px);transition:.25s}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:var(--red)}
.skel .bd i{display:block;height:14px;border-radius:8px;margin:10px 0;background:linear-gradient(90deg,var(--raised),var(--raised2),var(--raised));background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- characters ---------- */
.hero{background:linear-gradient(160deg,var(--surface),var(--bg2))}
.hero.me{border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset,0 8px 30px var(--arcane-soft)}
.herotop{display:flex;gap:14px;align-items:center;padding:16px 16px 6px}
.herotop .av{width:56px;height:56px;font-size:20px}
.heroname{margin:0;font-family:var(--display);font-size:24px;line-height:1.15;font-weight:var(--hd-w);letter-spacing:var(--hd-ls);text-transform:var(--hd-case)}
.herosub{color:var(--muted);font-size:15px}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px;padding:8px 16px 14px}
.vital{background:var(--raised);border:1px solid var(--line);border-radius:calc(var(--r)*.7);padding:8px 4px 7px;text-align:center;min-width:0}
.vital span{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted)}
.vital b{display:block;font-size:21px;line-height:1.25;font-family:var(--display);font-weight:var(--hd-w)}
.vital b small{font-size:13px;font-weight:600;color:var(--muted);font-family:var(--body)}
.vital.hpv{grid-column:1/-1;padding:10px 14px 12px}
.vital.hpv b{font-size:32px}
.hpbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 14px}
.hpbtns .btn{padding:11px 0;font-size:14px}
/* hit points on a character: one row with the -/+ buttons either side */
.hpblock{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 16px 4px}
.hpgrp{display:flex;gap:6px}
.hpgrp .btn{min-width:46px;padding:0 6px}
.hpmid{text-align:center;min-width:0}
.hpmid b{display:block;font-family:var(--display);font-size:30px;line-height:1.1;font-weight:var(--hd-w)}
.hpmid b small{font-size:14px;font-weight:600;color:var(--muted);font-family:var(--body)}
.hpmid .hp{margin-top:6px}
.hplabel{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.turnbtn{padding:0 16px 16px;margin-top:0}
.turnbtn .btn{flex:1}

/* section tabs: a segmented control that always fits the screen */
.subtabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 14px;padding:4px;position:sticky;top:8px;z-index:5;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:calc(var(--r)*.85);box-shadow:0 6px 20px var(--shadow)}
.subtabs.four{grid-template-columns:repeat(4,1fr)}
.subtabs.six{grid-template-columns:repeat(6,1fr)}
.subtabs.two{grid-template-columns:repeat(2,1fr)}
.subtabs button{min-width:0;border:0;background:transparent;border-radius:calc(var(--rb)*.9);padding:11px 2px;min-height:44px;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.15s}
.subtabs.six button{font-size:13px;padding:11px 0}
.subtabs button.on{background:var(--arcane-soft);color:var(--text);box-shadow:0 0 0 1px var(--arcane) inset}

.abil2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}
.ab{background:var(--raised);border:1px solid var(--line);border-radius:calc(var(--r)*.7);text-align:center;padding:10px 4px 9px;min-width:0}
.ab b{display:block;font-size:12.5px;letter-spacing:.1em;color:var(--muted)}
.ab span{display:block;font-size:28px;font-weight:var(--hd-w);line-height:1.2;font-family:var(--display)}
.ab i{display:inline-block;font-style:normal;background:var(--arcane-soft);color:var(--text);border-radius:var(--rp);padding:1px 11px;font-weight:700;font-size:15px}
.ab em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:5px;font-weight:600}
.kv{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.kv:first-child{border-top:0}
.kv b{flex:none;width:84px;color:var(--muted);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.kv span{min-width:0}
.srow{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line);font-size:16px}
.srow:first-child{border-top:0}
.sn{flex:1;min-width:0}
.sa{font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--muted);background:var(--raised);border-radius:8px;padding:2px 7px}
.sb{min-width:42px;text-align:right;font-size:18px;font-family:var(--display);font-weight:var(--hd-w)}
.sb.neg{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--raised);border:1px solid var(--line2);border-radius:calc(var(--rb)*.9);padding:9px 13px;font-weight:600;font-size:15px}
.chip b{color:var(--muted);font-size:12.5px;letter-spacing:.06em;margin-right:4px}
button.chip{font:inherit;font-weight:600;min-height:40px}
.atk{padding:14px 16px;border-top:1px solid var(--line)}
.atk:first-child{border-top:0}
.atk1{display:flex;justify-content:space-between;gap:8px;align-items:center}
.atk1 b{font-size:17px;min-width:0;overflow-wrap:anywhere}
.hit{flex:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border-radius:calc(var(--rb)*.9);padding:8px 13px;min-height:38px;font-weight:700;font-size:15px;border:0;font-family:inherit}
.hit.plain{background:var(--raised2);color:var(--text2);font-size:13.5px;display:inline-flex;align-items:center}
.dmg{display:block;font-weight:700;font-size:16px;color:var(--arcane);margin:4px 0 2px;background:none;border:0;padding:8px 0;min-height:38px;text-align:left;font-family:inherit}
button.dmg{text-decoration:underline dotted;text-underline-offset:4px}
.feat{border-top:1px solid var(--line)}
.feat:first-child{border-top:0}
.feat summary{padding:14px 16px;list-style:none;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;cursor:pointer}
.feat summary::-webkit-details-marker{display:none}
.feat summary span{font-weight:600;font-size:16px}
.feat summary em{grid-column:1;font-style:normal;color:var(--muted);font-size:14px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feat summary::after{content:'+';grid-column:2;grid-row:1/span 2;font-size:24px;color:var(--muted);line-height:1}
.feat[open] summary::after{content:'–'}
.feat .pre{padding:0 16px 16px;font-size:15px;line-height:1.55;color:var(--text2)}
.feat.std{background:var(--bg2)}
.feat.flush{border-top:1px solid var(--line);margin-top:8px}
.feat.flush summary{padding:12px 0}
.feat.flush .pre{padding:0 0 12px}
.feat .btns{padding:0 16px 16px;margin:0}
.irow{padding:13px 16px;border-top:1px solid var(--line);font-size:16px}
.irow:first-child{border-top:0}
.sheetbtns{margin:6px 0 18px}
.sheetbtns .btn{padding:13px 18px;font-size:15.5px}
.pre{white-space:pre-wrap}
.pre.lore{font-family:var(--lore);font-size:var(--lore-size);line-height:1.6;color:var(--text2)}
.qnote{background:var(--arcane-soft);border:1px solid var(--line2);border-radius:var(--rb);padding:10px 14px;margin:12px 0;font-size:14.5px}

/* trackers */
.trow{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}
.trow:first-child{border-top:0}
.trow .nm small{color:var(--muted);font-weight:600}
.trow .grow .sub{font-size:13.5px}
.pips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:52%}
.pip{width:30px;height:30px;border-radius:50%;border:2px solid var(--arcane);background:var(--arcane);padding:0;box-shadow:0 0 10px var(--arcane-soft);transition:.15s}
.pip:not(.on){background:transparent;box-shadow:none;opacity:.7}
.pip.good{border-color:var(--green);background:var(--green)}
.pip.bad{border-color:var(--red);background:var(--red)}
.pip.good:not(.on),.pip.bad:not(.on){background:transparent;box-shadow:none}
.pip:disabled{cursor:default}
.stepn{display:flex;align-items:center;gap:8px}
.stepn button{width:40px;height:40px;border-radius:var(--rb);border:1px solid var(--line2);background:var(--raised);font-size:20px;font-weight:700;line-height:1;padding:0}
.stepn b{min-width:64px;text-align:center;font-size:17px;font-family:var(--display)}
.stepn small{color:var(--muted);font-weight:600}
.deathrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deathrow span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.deathrow .pips{justify-content:flex-start;max-width:none}

/* turn guide */
.pagetitle{margin:2px 2px 6px;font-family:var(--display);font-size:26px;font-weight:var(--hd-w);letter-spacing:var(--hd-ls);text-transform:var(--hd-case)}
.turnbanner{display:block;margin:0 0 14px;padding:13px 16px;border-radius:var(--r);background:var(--arcane-soft);border:1px solid var(--arcane);text-decoration:none;font-size:15px}
.turnbanner.go{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);border:0;font-weight:600;animation:glowpulse 2.4s ease-in-out infinite}
.turnbanner a{font-weight:700;margin-left:6px}
@keyframes glowpulse{50%{box-shadow:0 0 26px var(--accent)}}
.turnchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tchip{flex:1 1 70px;padding:13px 6px;min-height:46px;border-radius:var(--rb);border:1px solid var(--line2);background:var(--raised);font-weight:600;font-size:14.5px}
.tchip.used{background:transparent;color:var(--muted);text-decoration:line-through;opacity:.7}
.tchip.reset{background:var(--arcane-soft);border-color:var(--arcane)}

/* home */
.bigdate{font-size:19px;font-family:var(--display);font-weight:var(--hd-w)}
.rsvp{margin:12px 0 2px;font-size:14.5px;color:var(--muted)}
.rsvp b{color:var(--text)}
.advrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{flex:1 1 130px;display:flex;align-items:center;gap:10px;background:var(--raised);border:1px solid var(--line);border-radius:calc(var(--r)*.7);padding:9px 12px;cursor:pointer;min-width:0}
.pchip.me{border-color:var(--arcane);background:var(--arcane-soft)}
.pchip .av{width:34px;height:34px;font-size:13px}
.pchip span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pchip b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchip i{font-style:normal;font-size:13.5px;font-weight:700;color:var(--green)}
.pchip i.mid{color:var(--amber)} .pchip i.low{color:var(--red)}
.nudge{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:var(--r);border:1px dashed var(--arcane);background:var(--arcane-soft)}

/* awards, play, feed */
.awards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.award{background:var(--raised);border:1px solid var(--line);border-radius:calc(var(--r)*.6);padding:10px;min-width:0}
.award small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.award b{display:block;margin-top:2px}
.award span{font-size:13.5px;color:var(--muted)}
/* initiative: a number, a name with health under it, and (for the DM) a tap-open control strip */
.init{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.init.dm{cursor:pointer}
.init.turn{background:linear-gradient(90deg,var(--arcane-soft),transparent);box-shadow:inset 3px 0 0 var(--accent)}
.init.me .nm{color:var(--arcane)}
.init .n{flex:none;width:34px;text-align:center;font-family:var(--display);font-weight:var(--hd-w);font-size:21px}
.initsub{display:flex;align-items:center;gap:10px}
.initsub .hp{flex:1;margin-top:0}
.initsub .sub{flex:none;font-size:13.5px;min-width:56px;text-align:right}
.initctl{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 14px 62px;border-top:0}
.initctl .btn{min-height:40px;padding:8px 14px}
.dmbar{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 14px}
.dmbar .btn.gold{flex:1 1 140px}
.frow{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.frow:first-child{border-top:0}
.frow.fresh{animation:flash 1.8s ease-out}
@keyframes flash{from{background:var(--arcane-soft)}}
.ftot{flex:none;font-family:var(--display);font-weight:var(--hd-w);font-size:24px;min-width:34px;text-align:right}
.ftot.crit,.diceres.crit b{color:var(--accent)}
.ftot.fumble,.diceres.fumble b{color:var(--red)}
.srdres summary em{font-size:13.5px}

/* ---------- dice ---------- */
.dicepick{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dbtn{min-width:0;border:1px solid var(--line2);background:var(--raised);border-radius:calc(var(--rb)*.9);padding:12px 0;min-height:44px;font-weight:700;font-size:14px;transition:.15s}
.dbtn.on{background:var(--arcane-soft);border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset}
.steps{display:flex;gap:10px;margin-top:10px}
.step{flex:1;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:4px 6px;background:var(--raised);border:1px solid var(--line);border-radius:calc(var(--r)*.7);padding:8px 8px 10px;min-width:0}
.step span{grid-column:1/-1;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.step button{width:40px;height:40px;border-radius:var(--rb);border:1px solid var(--line2);background:var(--surface);font-size:20px;font-weight:700;line-height:1;padding:0}
.step b{text-align:center;font-size:18px;font-family:var(--display)}
.dicebox{position:relative;height:184px;margin-top:10px;display:flex;justify-content:center;align-items:center;gap:14px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--r);background:radial-gradient(ellipse at 50% 60%,var(--arcane-soft),transparent 70%),var(--bg2);border:1px solid var(--line)}
.dicebox.qbox{height:216px;cursor:default}
.stage3d{display:block;width:100%;height:100%}
.diceres{text-align:center;min-height:68px;padding-top:6px}
.diceres b{display:block;font-family:var(--display);font-size:48px;line-height:1.1;font-weight:var(--hd-w)}
.diceres small{display:block;color:var(--muted);font-size:14px;font-weight:600}
.dicehist{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13.5px}
.dicehist span{color:var(--muted);font-weight:700;letter-spacing:.08em;font-size:12px;text-transform:uppercase}
.dicehist i{font-style:normal;background:var(--raised);border:1px solid var(--line);border-radius:var(--rp);padding:3px 10px;font-weight:600}
.rollable{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.rollable:active{background:var(--raised)}
.sheet.qroll{text-align:center}
.sheet.qroll .advrow,.sheet.qroll .btns{justify-content:center}

/* flat dice (only when a device has no 3D) */
.die{position:relative;width:104px;height:104px}
.die svg{width:100%;height:100%;filter:drop-shadow(0 6px 5px rgba(0,0,0,.4))}
.die .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:30px;color:#fff}
.die.rolling{animation:tumble 1s cubic-bezier(.25,.6,.35,1)}
.die.crit svg{filter:drop-shadow(0 0 14px var(--die-glow))}
.die.dropped{opacity:.35}
@keyframes tumble{0%{transform:translateY(-70px) rotate(0);opacity:.2}25%{transform:translateY(0) rotate(180deg);opacity:1}45%{transform:translateY(-30px) rotate(360deg)}70%{transform:translateY(0) rotate(540deg)}100%{transform:translateY(0) rotate(720deg)}}

/* ---------- profile ---------- */
.av.img{background-color:var(--raised);background-size:cover;background-position:center;color:transparent;border:2px solid var(--arcane-soft)}
.av.img::after{display:none}
.herotop .av.img{border-color:var(--arcane)}
.portraitcard .bd{padding:18px 16px 16px;text-align:center}
.portrait{width:min(78%,300px);aspect-ratio:1;margin:0 auto;border-radius:calc(var(--r)*1.1);background-size:cover;background-position:center;background-color:var(--raised);border:2px solid var(--arcane);box-shadow:0 14px 40px var(--shadow),0 0 0 6px var(--arcane-soft);display:grid;place-items:center}
.portrait.empty{border-style:dashed;background:linear-gradient(145deg,var(--raised),var(--bg2))}
.portrait.empty span{font-family:var(--display);font-size:64px;font-weight:var(--hd-w);color:var(--muted);opacity:.6}
.pquote.big{font-size:21px;line-height:1.4;margin:18px 6px 4px;padding:0}
.pquote.big::before{content:'';display:block;width:34px;height:3px;border-radius:3px;margin:0 auto 12px;background:linear-gradient(90deg,var(--arcane),var(--accent))}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}
.gpic{aspect-ratio:1;border:1px solid var(--line2);border-radius:calc(var(--r)*.5);background-size:cover;background-position:center;background-color:var(--raised);padding:0}
.sheet.lightbox{text-align:center}
.sheet.lightbox img{display:block;width:100%;max-height:68vh;object-fit:contain;border-radius:calc(var(--r)*.6);background:var(--bg2)}

/* ---------- appearance picker ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr .8fr;gap:4px;padding:4px;border-radius:calc(var(--r)*.85);background:var(--raised);border:1px solid var(--line)}
.modes button{display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;border-radius:calc(var(--rb)*.9);padding:11px 4px;min-height:46px;font-weight:600;font-size:15px;color:var(--muted);transition:.15s}
.modes button.on{background:var(--arcane-soft);color:var(--text);box-shadow:0 0 0 1px var(--arcane) inset}
.setname{padding:8px 16px 0;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 16px 14px}
.tcard{position:relative;border:2px solid var(--line2);border-radius:calc(var(--r)*.8);padding:0;background:none;text-align:left;overflow:hidden;transition:.15s}
.tcard.on{border-color:var(--arcane);box-shadow:0 0 0 2px var(--arcane-soft),0 8px 24px var(--shadow)}
.tcard.on::after{content:'✓';position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--arcane);color:var(--bg);font-weight:800;font-size:13px;display:grid;place-items:center}
.tprev{background:var(--bg);color:var(--text);padding:10px 10px 8px;position:relative;overflow:hidden;min-height:92px}
.tprev::before{content:'';position:absolute;inset:0;background:var(--fx);pointer-events:none}
.tprev .tp-ornament{position:absolute;right:6px;top:4px;width:34px;height:34px;background:var(--accent);opacity:.3;-webkit-mask:var(--ornament) center/contain no-repeat;mask:var(--ornament) center/contain no-repeat}
.tprev .tp-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*.5);padding:7px 8px;box-shadow:0 2px 8px var(--shadow)}
.tprev .tp-title{font-family:var(--display);font-weight:var(--hd-w);font-size:14px;text-transform:var(--hd-case);letter-spacing:var(--hd-ls);line-height:1.1}
.tprev .tp-bar{height:5px;border-radius:5px;background:var(--raised2);margin:6px 0;overflow:hidden}
.tprev .tp-bar i{display:block;height:100%;width:70%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:5px}
.tprev .tp-row{display:flex;gap:5px;align-items:center}
.tprev .tp-btn{height:14px;flex:1;border-radius:calc(var(--rb)*.5);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.tprev .tp-dot{width:14px;height:14px;border-radius:50%;background:var(--arcane)}
.tname{display:block;padding:8px 10px 2px;font-weight:700;font-size:15px;color:var(--text)}
.tsub{display:block;padding:0 10px 10px;font-size:13px;color:var(--muted)}

/* =====================================================================
   THEME CHARACTER: small touches that make each look feel like itself.
   ===================================================================== */
[data-theme="paladin"] .card{border-top:2px solid var(--arcane)}
[data-theme="paladin"] .card .hd h2::before{content:'✦';margin-right:8px;color:var(--arcane);font-size:.75em;vertical-align:.1em}
[data-theme="rogue"] .card{border-radius:6px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
[data-theme="rogue"] .btn.gold,[data-theme="rogue"] .hit{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
[data-theme="barbarian"] .card{border-width:2px;border-color:var(--line2);position:relative}
[data-theme="barbarian"] .card .hd{border-bottom:2px solid var(--line2);padding-bottom:10px}
[data-theme="barbarian"] .btn,[data-theme="barbarian"] .pill,[data-theme="barbarian"] .subtabs button{text-transform:uppercase;letter-spacing:.05em}
[data-theme="barbarian"] .card::before,[data-theme="barbarian"] .card::after{content:'';position:absolute;top:7px;width:7px;height:7px;border-radius:50%;background:var(--line2);box-shadow:inset 0 1px 1px rgba(0,0,0,.5);z-index:1}
[data-theme="barbarian"] .card::before{left:6px}
[data-theme="barbarian"] .card::after{right:6px}
[data-theme="druid"] .card{border-radius:var(--r) var(--r) var(--r) calc(var(--r)*.35)}
[data-theme="druid"] .card .hd h2::after{content:'';display:inline-block;width:.7em;height:.7em;margin-left:8px;background:var(--arcane);-webkit-mask:var(--ornament) center/contain no-repeat;mask:var(--ornament) center/contain no-repeat;opacity:.8}
[data-theme="cleric"] .card{border-top:3px solid var(--gold)}
[data-theme="warlock"] .card{box-shadow:0 0 0 1px var(--line2),0 0 26px rgba(255,85,220,.1),0 2px 12px var(--shadow)}
[data-theme="warlock"] .card .hd h2{text-shadow:0 0 14px rgba(255,85,220,.55)}
[data-theme="warlock"][data-mode="day"] .card{box-shadow:0 2px 14px var(--shadow)}
[data-theme="warlock"][data-mode="day"] .card .hd h2{text-shadow:none}
[data-theme="bard"] .card .hd{background:linear-gradient(90deg,var(--arcane-soft),transparent 70%)}
[data-theme="bard"] .card .hd h2{font-style:italic}
[data-theme="dungeon"] .card{border-width:2px}
[data-theme="dungeon"] .card .hd{background:repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.03) 31px 32px)}
[data-theme="dungeon"][data-mode="day"] .card .hd{background:repeating-linear-gradient(90deg,transparent 0 31px,rgba(60,50,30,.05) 31px 32px)}
[data-theme="tavern"] .card{border:2px solid var(--line2);border-radius:18px}
[data-theme="tavern"] .card .hd{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 8px)}
[data-theme="tavern"][data-mode="day"] .card .hd{background:repeating-linear-gradient(90deg,rgba(120,70,20,.05) 0 2px,transparent 2px 8px)}
[data-theme="feywild"] .card{border-radius:30px 30px 30px 10px}
[data-theme="feywild"] .card .hd h2{background:linear-gradient(90deg,var(--arcane),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="underdark"] .card{box-shadow:0 0 0 1px var(--line2),0 0 24px rgba(122,240,230,.08),0 2px 12px var(--shadow)}
[data-theme="underdark"] .card .hd h2{text-shadow:0 0 12px rgba(122,240,230,.45)}
[data-theme="underdark"][data-mode="day"] .card{box-shadow:0 2px 14px var(--shadow)}
[data-theme="underdark"][data-mode="day"] .card .hd h2{text-shadow:none}
[data-theme="frostfell"] .card{border-top:2px solid var(--arcane);border-radius:10px}
[data-theme="dunes"] .card .hd{border-bottom:1px solid var(--line2);margin-bottom:2px;padding-bottom:10px}
[data-theme="dunes"] .card{border-radius:14px 14px 40px 14px}

@media (prefers-reduced-motion:reduce){
  .die.rolling,.frow.fresh,.skel .bd i,.top::before,.hp i.low,.turnbanner.go,.gate .emblem,body.login::after{animation:none}
}

/* spell chips wrap as whole chips; party rows; date vote */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.partystats{display:flex;align-items:center;gap:10px;margin-top:4px}
.partystats b{font-family:var(--display);font-size:17px}
.partystats b small{font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted)}
.partystats .acpill{margin-top:0}
.pollrow{padding:12px 0;border-top:1px solid var(--line)}
.pollrow:first-of-type{border-top:0;padding-top:0}
.pollrow.lead .nm::after{content:' ★';color:var(--accent)}
.pollhead{display:flex;align-items:center;gap:10px}
.why{align-items:center;margin:0 0 10px}
.diceres .why{font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* temp HP, attack helper, stash, handouts */
.temp{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--arcane)}
.cbpick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0 0 8px;padding:12px 14px;min-height:50px;text-align:left;border:1px solid var(--line2);background:var(--raised);border-radius:var(--rb);color:var(--text)}
.cbpick b{font-size:16px}.cbpick span{font-size:14px;color:var(--muted)}
.cbres{margin:12px 0;padding:12px 14px;border-radius:var(--rb);background:var(--arcane-soft);border:1px solid var(--arcane);text-align:center}
.cbres b{display:block;font-family:var(--display);font-size:34px;line-height:1.1}
.cbres small{display:block;color:var(--muted);font-size:14px}
.cbres.crit{border-color:var(--accent)}
.cbres.fumble{border-color:var(--red)}
.cbplan{margin:10px 0;padding:10px 12px;border-radius:var(--rb);background:var(--raised);border:1px solid var(--line)}
.cbplan b{font-family:var(--display);font-size:20px}
.coinctl{display:flex;align-items:center;gap:6px}
.coinctl b{min-width:44px;text-align:center;font-family:var(--display);font-size:18px}
.handimg{display:block;max-width:100%;max-height:60vh;margin:10px auto 0;border-radius:var(--rb)}

.crbtns{margin:0;padding:0 16px 12px;flex-wrap:wrap}
.crdetail{max-height:88vh;overflow:auto}

/* Play screen flow */
.yourturn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 8px 30px var(--arcane-soft)}
.yourturn .btns .btn{flex:1 1 120px}
.init .n{line-height:1.05}
.init .n small{display:block;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:0;color:var(--muted)}
.init.down{opacity:.6}
.tag.now{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink)}
.tag.nxt{background:var(--raised2);color:var(--text)}
.dmbar.sticky{position:sticky;bottom:calc(92px + env(safe-area-inset-bottom));z-index:6;margin:0 0 14px;padding:10px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 8px 24px var(--shadow)}
.dmbar.sticky .btn.gold{flex:1 1 100%;min-height:48px;font-size:17px}

/* ---- Scoreboard: dark crimson header band, gold rule, dark card headers, flat tab bar, pill tabs ---- */
[data-theme="scoreboard"] .top{background:var(--band);padding:calc(18px + env(safe-area-inset-top)) 16px 14px;border-bottom:5px solid var(--accent);overflow:visible}
[data-theme="scoreboard"] .top::before,[data-theme="scoreboard"] .top .emblem{display:none}
[data-theme="scoreboard"] .top h1{font-size:30px;line-height:1.05;color:#fff;letter-spacing:.01em}
[data-theme="scoreboard"] .top p{color:var(--accent);font-weight:600;font-size:15px;margin-top:4px}
[data-theme="scoreboard"] .top .gear{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
[data-theme="scoreboard"] .card{border-radius:4px;box-shadow:none;border-color:var(--line2)}
[data-theme="scoreboard"] .card .hd{background:var(--band);color:#fff;padding:13px 16px}
[data-theme="scoreboard"] .card .hd h2{color:#fff;font-size:20px}
[data-theme="scoreboard"] .card .hd small{color:var(--accent)}
[data-theme="scoreboard"] .row.me,[data-theme="scoreboard"] .init.me{background:var(--arcane-soft);box-shadow:inset 4px 0 0 var(--accent)}
[data-theme="scoreboard"] .init.turn{box-shadow:inset 4px 0 0 var(--accent)}
[data-theme="scoreboard"] .hero{background:var(--surface)}
[data-theme="scoreboard"] .btn,[data-theme="scoreboard"] .pill,[data-theme="scoreboard"] .subtabs button{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em}
[data-theme="scoreboard"] .subtabs{position:static;background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:8px;margin-bottom:14px;display:flex;flex-wrap:wrap}
[data-theme="scoreboard"] .subtabs button{flex:1 1 auto;border:1px solid var(--line2);background:var(--surface);color:var(--text2);border-radius:999px;padding:9px 16px}
[data-theme="scoreboard"] .subtabs button.on,[data-theme="scoreboard"] .pill.on{background:var(--band);color:#fff;border-color:var(--band);box-shadow:none}
[data-theme="scoreboard"] nav.bar{bottom:0;padding:0}
[data-theme="scoreboard"] nav.bar .in{max-width:480px;padding:0 0 env(safe-area-inset-bottom);border-radius:0;background:var(--band);border:0;box-shadow:0 -6px 20px var(--shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="scoreboard"] nav.bar a{border-radius:0;color:rgba(255,255,255,.72);padding:10px 0 8px;text-transform:uppercase;letter-spacing:.06em}
[data-theme="scoreboard"] nav.bar a.on{background:transparent;color:#fff;box-shadow:inset 0 3px 0 var(--accent)}
[data-theme="scoreboard"] nav.bar a.on svg{stroke:var(--accent)}
[data-theme="scoreboard"] .wrap{padding-bottom:96px}
.irow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.irow .iconbtn{width:34px;height:34px;font-size:15px;color:var(--muted)}


/* ---- polish pass: theme-colored HP bar, smaller dice tray, hero actions, party rows, spells, gear ---- */
.hp i{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.hp i.mid{background:linear-gradient(90deg,var(--amber),var(--accent))}
.hp i.low{background:var(--red)}
.hp{border:1px solid var(--line)}

.heroacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;padding:0 16px 16px}
.heroacts.only{padding:0;margin:0 0 14px}
.heroacts .btn{min-height:44px;padding:0 10px}
.tempbtn{display:inline-block;margin-top:8px;padding:5px 12px;min-height:34px;border-radius:999px;border:1px dashed var(--line2);background:transparent;color:var(--text2);font-size:13px;font-weight:700}
.tempbtn:active{background:var(--raised)}

.statcol{min-width:62px}
.statcol .hpnum{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1;white-space:nowrap}
.statcol .hpnum small{font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted)}
.row.pc{align-items:flex-start}
.row.pc .statcol{padding-top:2px}

.portrait.small{width:132px;height:132px;margin:0 auto;border-radius:var(--r)}

.sgroup{padding:12px 16px;border-top:1px solid var(--line)}
.sgroup:first-child{border-top:0}
.sghead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sghead .pips{max-width:none;flex:none}
.sgroup .pip{width:26px;height:26px}
.spare{display:flex;flex-wrap:wrap;gap:10px 20px}
.spare1{display:flex;align-items:center;gap:8px}
.spare1 span{font-weight:700;font-size:14px;color:var(--text2);min-width:26px}
.spare .pip{width:22px;height:22px}
.sgroup .chips .chip{padding:7px 12px;font-size:14.5px}

.feat.dup[open] summary em{display:none}

.coinctl{display:flex;align-items:center;gap:4px;flex:none}
.coinctl .btn{min-height:36px;min-width:0;padding:0 9px;font-size:14px}
.coinctl b{min-width:34px;font-size:17px}
.trow{flex-wrap:wrap}
.trow .grow{min-width:0}

.nextsum .row{padding:12px 16px}
.nextrsvp{margin:0;padding:0 16px 14px;gap:6px}
.nextrsvp .pill{flex:1;min-height:38px;padding:0 6px;font-size:14px}
.chev.down{transform:rotate(90deg)}

/* dice tray: smaller, evenly spaced */
.dicebd{display:grid;gap:10px}
.dicebd>*{margin:0}
.whyrow{display:flex;align-items:center;gap:10px}
.whyrow span{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:none}
.whyrow select{flex:1;min-width:0;min-height:42px;padding:0 10px;border-radius:var(--rb);border:1px solid var(--line2);background:var(--raised);color:var(--text)}
.dicepick{gap:6px}
.dbtn{padding:0;min-height:40px;font-size:13.5px}
.steps{gap:8px}
.step{grid-template-columns:36px 1fr 36px;padding:6px 6px 8px;gap:2px 4px}
.step button{width:36px;height:36px}
.step b{font-size:17px}
.advrow{margin-top:0;gap:8px}
.dicebox{height:116px;margin-top:0}
.dicebox.qbox{height:150px}
.diceres{min-height:0;padding:0}
.diceres b{font-size:36px;line-height:1.1}
.diceres small{font-size:13.5px;line-height:1.35}
.die{width:68px;height:68px}
.die .num{font-size:21px}
.hero .herotop .hp{margin-top:8px}

/* ---- fixes from looking at real screens ---- */
.vitals{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:6px;padding:8px 16px 14px}
.vital span{font-size:11px;letter-spacing:.04em}
.heroacts{grid-template-columns:repeat(3,1fr)}
.heroacts.four{grid-template-columns:1fr 1fr}
.heroacts.only{grid-template-columns:1fr 1fr}
.heroacts .btn{font-size:14px;padding:0 6px}
.kv b{width:96px}
.advrow .pill{flex:1;min-width:0;text-align:center}
.dicebd .advrow .pill{min-height:40px;padding:0 8px}

.trow.res{display:block;padding:13px 16px}
.trow.res .rtop{display:flex;align-items:flex-start;gap:10px}
.trow.res .rctl{margin-top:10px}
.trow.res .pips{justify-content:flex-start;max-width:none;gap:8px}
.trow.res .pip{width:28px;height:28px}
.trow.res .stepn{justify-content:flex-start}
.sghead b small{font-weight:600;font-size:12.5px;margin-left:6px}

[data-theme="scoreboard"] .card .hd .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
[data-theme="scoreboard"] .subtabs.six{flex-wrap:nowrap;gap:5px}
[data-theme="scoreboard"] .subtabs.six button{flex:1 1 0;min-width:0;padding:9px 2px;font-size:13.5px;letter-spacing:.02em}

.dmbar.sticky{gap:6px;padding:8px}
.dmbar.sticky .btn{flex:1 1 0;min-width:0;min-height:40px;padding:0 6px;font-size:14px}
.dmbar.sticky .btn.gold{flex:1 1 100%;min-height:46px}

.heroacts{grid-template-columns:1.45fr 1.2fr .75fr}
.heroacts .btn{white-space:nowrap}
.sghead b small{display:block;margin:2px 0 0}

.heroacts.two{grid-template-columns:1fr 1fr}
.yourturn .btns{display:grid;grid-template-columns:1.45fr 1.2fr 1fr;gap:8px}
.yourturn .btns .btn{flex:none;min-width:0;padding:0 6px;font-size:14px;white-space:nowrap}
[data-theme="scoreboard"] .subtabs{flex-wrap:nowrap;gap:5px}
[data-theme="scoreboard"] .subtabs button{flex:1 1 0;min-width:0;padding:9px 2px;font-size:13.5px;letter-spacing:.02em}

/* ---------- responsive: small phones, tablets, desktop ---------- */
.wrap{min-height:100vh;min-height:100dvh}
.sheet{max-height:92vh;max-height:92dvh}
@media (max-width:360px){
  main{padding:8px 10px}
  .top{padding-left:12px;padding-right:12px}
  .top h1{font-size:17px}
  .card .hd,.card .bd,.row{padding-left:12px;padding-right:12px}
  .subtabs.six button{font-size:12px}
}
@media (max-height:480px) and (orientation:landscape){
  .wrap{padding-bottom:84px}
  .sheet{max-height:96vh;max-height:96dvh}
}
@media (hover:hover){
  .pill:hover,.row.pc:hover,.row.menu:hover{filter:brightness(1.06)}
  nav.bar a:hover:not(.on){color:var(--text)}
  .btn{cursor:pointer}
}
/* tablet: wider single column, centered dialogs */
@media (min-width:700px){
  .wrap{max-width:760px}
  main{padding:10px 24px}
  .top{padding-left:24px;padding-right:24px}
  .top h1{font-size:22px}
  .top .gear{max-width:240px}
  html[data-theme] nav.bar .in{max-width:620px}
  #modal{align-items:center;padding:24px}
  .sheet{max-width:560px;max-height:88vh;max-height:88dvh;border-bottom:1px solid var(--line2);border-radius:calc(var(--r) + 6px);padding-bottom:22px}
  .sheet::before{display:none}
  .cbox{max-width:400px}
  #toasts{bottom:96px}
  .subtabs{top:12px}
  .handimg{max-height:70vh}
}
/* desktop: side rail navigation, roomier content */
@media (min-width:1100px){
  body{padding-left:220px}
  .wrap{max-width:900px;padding-bottom:40px}
  main{padding:12px 32px 24px}
  .top{padding-left:32px;padding-right:32px}
  .top h1{font-size:26px}
  html[data-theme] nav.bar{left:0;right:auto;top:0;bottom:0;width:220px;padding:20px 14px;align-items:flex-start;justify-content:flex-start;background:var(--surface);border-right:1px solid var(--line2)}
  html[data-theme="scoreboard"] nav.bar{background:var(--band);border-right:0;padding:20px 0}
  html[data-theme] nav.bar .in{flex-direction:column;width:100%;max-width:none;padding:0;gap:4px;background:transparent;border:0;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-theme] nav.bar a{flex:none;grid-auto-flow:column;justify-content:start;justify-items:start;align-items:center;gap:12px;padding:12px 14px;font-size:15.5px}
  html[data-theme] nav.bar a .dot{top:10px;left:32px}
  html[data-theme="scoreboard"] nav.bar a{padding:14px 20px}
  html[data-theme="scoreboard"] nav.bar a.on{box-shadow:inset 3px 0 0 var(--accent)}
  .dmbar.sticky{bottom:16px}
  .wrap::before{display:none}
  #toasts{left:220px;bottom:28px}
}
@media (min-width:1500px){
  .wrap{max-width:1000px}
}

/* translucent cards so the themed background glow shows through */
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .card{background:color-mix(in srgb,var(--surface) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .sheet,.cbox{background:color-mix(in srgb,var(--surface) 92%,transparent)}
}

/* ---------- living buttons: glow at night, soft lift by day ---------- */
.btn,.pill{position:relative;overflow:hidden;transition:transform .12s,filter .2s,box-shadow .25s,border-color .25s,background .25s}
.btn.gold::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 5.5s ease-in-out infinite}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes glowpulse{50%{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 70%,transparent),0 0 3px color-mix(in srgb,var(--accent2) 80%,transparent),0 6px 18px var(--shadow)}}
/* night */
html:not([data-mode="day"]) .btn.gold{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 50%,transparent),0 0 2px color-mix(in srgb,var(--accent2) 70%,transparent),0 6px 18px var(--shadow);animation:glowpulse 3.6s ease-in-out infinite}
html:not([data-mode="day"]) .btn.ghost:hover,html:not([data-mode="day"]) .btn:not(.gold):not(.red):hover{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 40%,transparent)}
html:not([data-mode="day"]) .btn.red{box-shadow:0 0 14px color-mix(in srgb,var(--red) 55%,transparent)}
html:not([data-mode="day"]) .pill.on{box-shadow:0 0 0 1px var(--arcane) inset,0 0 14px color-mix(in srgb,var(--arcane) 45%,transparent)}
html:not([data-mode="day"]) .btn:active,html:not([data-mode="day"]) .pill:active{box-shadow:0 0 28px color-mix(in srgb,var(--accent) 80%,transparent)}
/* day: colored lift instead of glow */
html[data-mode="day"] .btn.gold{box-shadow:0 8px 20px color-mix(in srgb,var(--accent2) 38%,transparent),0 1px 0 rgba(255,255,255,.45) inset}
html[data-mode="day"] .btn.red{box-shadow:0 6px 16px color-mix(in srgb,var(--red) 32%,transparent)}
html[data-mode="day"] .btn.ghost:hover,html[data-mode="day"] .btn:not(.gold):not(.red):hover{border-color:var(--accent2);box-shadow:0 6px 16px color-mix(in srgb,var(--accent2) 22%,transparent)}
@media (hover:hover){.btn.gold:hover{transform:translateY(-2px);filter:brightness(1.07)}}
@media (prefers-reduced-motion:reduce){.btn.gold,.btn.gold::after{animation:none!important}}

/* ---------- potion HP bar ---------- */
.hp i{--g:var(--accent);position:relative;overflow:hidden}
.hp i.mid{--g:var(--amber)}
.hp i.low{--g:var(--red)}
.hp i::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 55%,rgba(0,0,0,.14))}
.hp i::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 22% 78%,rgba(255,255,255,.85) 0 1.6px,transparent 2.6px),
  radial-gradient(circle at 64% 70%,rgba(255,255,255,.7) 0 2px,transparent 3px),
  radial-gradient(circle at 86% 82%,rgba(255,255,255,.8) 0 1.3px,transparent 2.3px);
  background-size:31px 100%,43px 100%,27px 100%;animation:bubbles 2.6s linear infinite}
@keyframes bubbles{from{background-position:0 0,0 0,0 0}to{background-position:0 -12px,0 -14px,0 -10px}}
@keyframes liquid{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes potion{50%{box-shadow:0 0 20px color-mix(in srgb,var(--g) 85%,transparent),0 0 5px var(--g),inset 0 0 6px rgba(255,255,255,.35)}}
html:not([data-mode="day"]) .hp{overflow:visible;height:12px;background:color-mix(in srgb,var(--raised2) 70%,#000);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
html:not([data-mode="day"]) .hp i{background-image:linear-gradient(90deg,color-mix(in srgb,var(--g) 78%,#000),var(--g),color-mix(in srgb,var(--g) 60%,#fff),var(--g),color-mix(in srgb,var(--g) 78%,#000));background-size:200% 100%;
  box-shadow:0 0 12px color-mix(in srgb,var(--g) 70%,transparent),0 0 3px var(--g),inset 0 0 5px rgba(255,255,255,.3);animation:liquid 5s linear infinite,potion 2.8s ease-in-out infinite}
html:not([data-mode="day"]) .hp i.low{animation:liquid 3s linear infinite,potion 1.2s ease-in-out infinite}
html[data-mode="day"] .hp i{box-shadow:0 1px 4px color-mix(in srgb,var(--g) 45%,transparent)}
/* ---------- day buttons: glossy, flowing color, pressable edge ---------- */
html[data-mode="day"] .btn.gold{background-image:linear-gradient(110deg,var(--accent),var(--accent2),var(--accent));background-size:220% 100%;animation:btnflow 7s ease-in-out infinite;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 0 color-mix(in srgb,var(--accent2) 62%,#000),0 10px 22px color-mix(in srgb,var(--accent2) 36%,transparent),0 1px 0 rgba(255,255,255,.55) inset;text-shadow:0 1px 0 rgba(255,255,255,.18)}
html[data-mode="day"] .btn.gold:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent2) 62%,#000),0 4px 10px color-mix(in srgb,var(--accent2) 30%,transparent),0 1px 0 rgba(255,255,255,.55) inset}
html[data-mode="day"] .btn.ghost,html[data-mode="day"] .btn:not(.gold):not(.red){background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 7%,#fff));border-color:color-mix(in srgb,var(--accent2) 45%,var(--line2));box-shadow:0 2px 0 color-mix(in srgb,var(--accent2) 28%,transparent)}
html[data-mode="day"] .btn.red{box-shadow:0 4px 0 color-mix(in srgb,var(--red) 60%,#000),0 8px 18px color-mix(in srgb,var(--red) 30%,transparent)}
html[data-mode="day"] .pill.on{box-shadow:0 0 0 1px var(--arcane) inset,0 3px 10px color-mix(in srgb,var(--arcane) 30%,transparent)}
@keyframes btnflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.hp i,.hp i::after,html[data-mode="day"] .btn.gold{animation:none!important}}

/* potion bar: replace bubbles with a rolling light wave and a bright leading edge */
.hp i::after{background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,.15) 60%,transparent 100%);background-size:45% 100%;background-repeat:no-repeat;background-position:-60% 0;animation:wave 3.4s ease-in-out infinite}
@keyframes wave{0%{background-position:-60% 0}60%,100%{background-position:170% 0}}
.hp i{box-shadow:inset -4px 0 5px -2px rgba(255,255,255,.6)}
html:not([data-mode="day"]) .hp i{box-shadow:0 0 12px color-mix(in srgb,var(--g) 70%,transparent),0 0 3px var(--g),inset -5px 0 6px -2px rgba(255,255,255,.65)}

/* ===== CLASS NIGHT POLISH (generated from the class colour palettes) ===== */
html:not([data-mode="day"]) body:not(.login)::after{content:'';position:fixed;left:0;top:0;width:100%;height:calc(100% + 600px);z-index:0;pointer-events:none;background:var(--amb,none);background-size:var(--amb-w,360px) 600px;animation:var(--amb-anim,none)}
@keyframes ambup{to{transform:translateY(-600px)}}
@keyframes ambdrift{to{transform:translate(-360px,-600px)}}
@keyframes ambtw{0%,100%{opacity:var(--amb-lo,.4)}50%{opacity:var(--amb-hi,1)}}
@keyframes fxbreathe{from{opacity:.7}to{opacity:1}}
[data-theme="wizard"]:not([data-mode="day"]){
  --bg:#09182a; --bg2:#0e2138; --surface:#132b48; --raised:#193756; --raised2:#204468; --line:#1f4272; --line2:#3f6aa6;
  --text:#eaf2fb; --text2:#bfd0e6; --muted:#96afcf; --accent:#6b9dff; --accent2:#4a82f0; --accent-ink:#04122e;
  --arcane:#aed8ff; --arcane-soft:rgba(174,216,255,0.16); --gold:#8cb7f0; --glass:rgba(19,43,72,0.84); --meta:#09182a;
  --die:#2f5fb0; --die-tens:#6b9dff; --die-edge:#f0f8ff; --die-glow:#6b9dff; --die-outline:#09182a;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(107,157,255,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(174,216,255,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(74,130,240,0.09),transparent);
  --amb:radial-gradient(3.3800000000000003px 3.3800000000000003px at 0px 552px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 76px 438px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 119px 451px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 195px 411px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 294px 145px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(2.8600000000000003px 2.8600000000000003px at 255px 419px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 246px 281px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 291px 74px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 332px 413px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 208px 547px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 134px 201px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 120px 92px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 154px 177px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 201px 438px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 21px 164px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.12px 3.12px at 183px 253px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 327px 33px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 124px 399px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 185px 99px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 102px 219px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 120px 319px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 84px 544px,rgba(255,255,255,0.95) 0,rgba(156,196,255,0.55) 38%,transparent 100%);
  --amb-anim:ambup 260s linear infinite,ambtw 4.2s ease-in-out infinite; --amb-lo:0.35; --amb-hi:1;
}
[data-theme="wizard"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="wizard"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(174,216,255,0.28),0 0 22px rgba(107,157,255,0.07),0 2px 12px var(--shadow)}
[data-theme="wizard"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(107,157,255,0.1),transparent 62%)}
[data-theme="wizard"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(107,157,255,0.35)}
[data-theme="wizard"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(107,157,255,0.4)}
[data-theme="sorcerer"]:not([data-mode="day"]){
  --bg:#12061b; --bg2:#1b0a28; --surface:#270f3b; --raised:#34154e; --raised2:#461d68; --line:#411866; --line2:#7a45b5;
  --text:#f6e8fb; --text2:#d9c2e6; --muted:#b494c9; --accent:#c15de8; --accent2:#a468e6; --accent-ink:#12031a;
  --arcane:#daaeff; --arcane-soft:rgba(218,174,255,0.16); --gold:#f6c8ff; --glass:rgba(39,15,59,0.84); --meta:#12061b;
  --die:#6b2b9a; --die-tens:#c15de8; --die-edge:#fdebff; --die-glow:#c15de8; --die-outline:#12061b;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(193,93,232,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(218,174,255,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(164,104,230,0.09),transparent);
  --amb:radial-gradient(6.24px 6.24px at 311px 381px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 186px 303px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 338px 238px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 90px 352px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 119px 235px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 316px 67px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 28px 244px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 28px 598px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 228px 87px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(7.54px 7.54px at 213px 83px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 318px 534px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 327px 457px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 4px 149px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 1px 370px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 267px 294px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 86px 529px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 135px 537px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(7.54px 7.54px at 176px 2px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 229px 553px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(7.54px 7.54px at 324px 113px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 204px 408px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 80px 125px,rgba(246,200,255,0.95) 0,rgba(193,93,232,0.55) 38%,transparent 100%);
  --amb-anim:ambup 70s linear infinite,ambtw 2.6s ease-in-out infinite; --amb-lo:0.3; --amb-hi:1;
}
[data-theme="sorcerer"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="sorcerer"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(218,174,255,0.28),0 0 22px rgba(193,93,232,0.07),0 2px 12px var(--shadow)}
[data-theme="sorcerer"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(193,93,232,0.1),transparent 62%)}
[data-theme="sorcerer"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(193,93,232,0.35)}
[data-theme="sorcerer"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(193,93,232,0.4)}
[data-theme="warlock"]:not([data-mode="day"]){
  --bg:#0b0813; --bg2:#150f22; --surface:#1d1530; --raised:#281d41; --raised2:#34264f; --line:#34264f; --line2:#5b4580;
  --text:#e6dcf5; --text2:#c3b6d8; --muted:#a699bd; --accent:#a87bd6; --accent2:#9b6fcc; --accent-ink:#0b0813;
  --arcane:#c8a8f0; --arcane-soft:rgba(200,168,240,0.16); --gold:#dcccff; --glass:rgba(29,21,48,0.84); --meta:#0b0813;
  --die:#4d3768; --die-tens:#9a6cc7; --die-edge:#dcccff; --die-glow:#a87bd6; --die-outline:#0b0813;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(168,123,214,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(200,168,240,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(155,111,204,0.09),transparent);
  --amb:radial-gradient(8.84px 8.84px at 19px 462px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 257px 299px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 40px 551px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 248px 536px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(10.4px 10.4px at 318px 517px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 344px 459px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(9.879999999999999px 9.879999999999999px at 89px 437px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 143px 141px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 319px 335px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 224px 441px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 261px 254px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(10.4px 10.4px at 112px 591px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(9.879999999999999px 9.879999999999999px at 228px 523px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 72px 387px,rgba(220,204,255,0.95) 0,rgba(154,108,199,0.55) 38%,transparent 100%);
  --amb-anim:ambup 120s linear infinite,ambtw 6s ease-in-out infinite; --amb-lo:0.2; --amb-hi:0.9;
}
[data-theme="warlock"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="warlock"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(200,168,240,0.28),0 0 22px rgba(168,123,214,0.07),0 2px 12px var(--shadow)}
[data-theme="warlock"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(168,123,214,0.1),transparent 62%)}
[data-theme="warlock"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(168,123,214,0.35)}
[data-theme="warlock"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(168,123,214,0.4)}
[data-theme="cleric"]:not([data-mode="day"]){
  --bg:#0f1626; --bg2:#141e34; --surface:#1a2842; --raised:#223152; --raised2:#2a3d63; --line:#2c3d5e; --line2:#4a6288;
  --text:#f1f3f6; --text2:#c9d3e0; --muted:#a3b2c6; --accent:#f5db68; --accent2:#d8ae44; --accent-ink:#14100a;
  --arcane:#b8d3f0; --arcane-soft:rgba(184,211,240,0.16); --gold:#f5db68; --glass:rgba(26,40,66,0.84); --meta:#0f1626;
  --die:#4f6e9a; --die-tens:#8ba7c9; --die-edge:#e9f2ff; --die-glow:#f5db68; --die-outline:#0f1626;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(245,219,104,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(184,211,240,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(216,174,68,0.09),transparent);
  --amb:radial-gradient(5.9799999999999995px 5.9799999999999995px at 179px 334px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 340px 289px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 161px 100px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 188px 337px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 273px 217px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 9px 179px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 73px 434px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 85px 396px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 27px 464px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 330px 546px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 345px 15px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 216px 434px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(3.3800000000000003px 3.3800000000000003px at 13px 82px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(3.12px 3.12px at 39px 51px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 218px 567px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 48px 121px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 88px 274px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 152px 404px,rgba(255,244,196,0.95) 0,rgba(245,219,104,0.55) 38%,transparent 100%);
  --amb-anim:ambup 150s linear infinite,ambtw 5s ease-in-out infinite; --amb-lo:0.3; --amb-hi:1;
}
[data-theme="cleric"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="cleric"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(184,211,240,0.28),0 0 22px rgba(245,219,104,0.07),0 2px 12px var(--shadow)}
[data-theme="cleric"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(245,219,104,0.1),transparent 62%)}
[data-theme="cleric"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(245,219,104,0.35)}
[data-theme="cleric"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(245,219,104,0.4)}
[data-theme="paladin"]:not([data-mode="day"]){
  --bg:#0f1a24; --bg2:#142230; --surface:#1a2a3a; --raised:#213344; --raised2:#2a3f54; --line:#2a3a4a; --line2:#4f6275;
  --text:#ece8dc; --text2:#c9ccd0; --muted:#a1aab3; --accent:#d5ad55; --accent2:#bf9540; --accent-ink:#0d0f12;
  --arcane:#c9d0d6; --arcane-soft:rgba(201,208,214,0.16); --gold:#d5ad55; --glass:rgba(26,42,58,0.84); --meta:#0f1a24;
  --die:#3e5468; --die-tens:#7e8c9a; --die-edge:#ebe6d9; --die-glow:#d5ad55; --die-outline:#0f1a24;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(213,173,85,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(201,208,214,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(191,149,64,0.09),transparent);
  --amb:radial-gradient(3.3800000000000003px 3.3800000000000003px at 143px 250px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 83px 485px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 55px 555px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 44px 126px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 61px 47px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 233px 334px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 358px 45px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(3.12px 3.12px at 113px 2px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 149px 55px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 333px 466px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 157px 513px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 288px 397px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 125px 244px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 178px 340px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 239px 380px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 318px 507px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 158px 292px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%),radial-gradient(3.3800000000000003px 3.3800000000000003px at 351px 215px,rgba(255,233,168,0.95) 0,rgba(213,173,85,0.55) 38%,transparent 100%);
  --amb-anim:ambup 110s linear infinite,ambtw 5.5s ease-in-out infinite; --amb-lo:0.35; --amb-hi:1;
}
[data-theme="paladin"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="paladin"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(201,208,214,0.28),0 0 22px rgba(213,173,85,0.07),0 2px 12px var(--shadow)}
[data-theme="paladin"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(213,173,85,0.1),transparent 62%)}
[data-theme="paladin"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(213,173,85,0.35)}
[data-theme="paladin"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(213,173,85,0.4)}
[data-theme="fighter"]:not([data-mode="day"]){
  --bg:#0b1d28; --bg2:#112836; --surface:#17344a; --raised:#1e4059; --raised2:#264d6b; --line:#2e4a5f; --line2:#4f7090;
  --text:#e8eef3; --text2:#c0ccd7; --muted:#9aabbb; --accent:#d9b566; --accent2:#bf9843; --accent-ink:#0d1218;
  --arcane:#b2c4d4; --arcane-soft:rgba(178,196,212,0.16); --gold:#d9b566; --glass:rgba(23,52,74,0.84); --meta:#0b1d28;
  --die:#3f6080; --die-tens:#8ea9c2; --die-edge:#d5e1f0; --die-glow:#d9b566; --die-outline:#0b1d28;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(217,181,102,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(178,196,212,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(191,152,67,0.09),transparent);
  --amb:radial-gradient(4.42px 4.42px at 123px 530px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 266px 573px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 75px 143px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 37px 549px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 229px 427px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 159px 523px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 315px 162px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(3.12px 3.12px at 156px 237px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 212px 139px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 296px 203px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(3.3800000000000003px 3.3800000000000003px at 316px 70px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%),radial-gradient(2.8600000000000003px 2.8600000000000003px at 332px 1px,rgba(213,225,240,0.95) 0,rgba(142,169,194,0.55) 38%,transparent 100%);
  --amb-anim:ambup 180s linear infinite,ambtw 7s ease-in-out infinite; --amb-lo:0.25; --amb-hi:0.8;
}
[data-theme="fighter"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="fighter"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(178,196,212,0.28),0 0 22px rgba(217,181,102,0.07),0 2px 12px var(--shadow)}
[data-theme="fighter"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(217,181,102,0.1),transparent 62%)}
[data-theme="fighter"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(217,181,102,0.35)}
[data-theme="fighter"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(217,181,102,0.4)}
[data-theme="barbarian"]:not([data-mode="day"]){
  --bg:#180707; --bg2:#240a0a; --surface:#340e0e; --raised:#451212; --raised2:#5a1717; --line:#5a1a1a; --line2:#8a3636;
  --text:#f3dfc6; --text2:#d7c0a8; --muted:#b69a86; --accent:#ee7168; --accent2:#d65a52; --accent-ink:#1a0505;
  --arcane:#d7a568; --arcane-soft:rgba(215,165,104,0.16); --gold:#d7a568; --glass:rgba(52,14,14,0.84); --meta:#180707;
  --die:#7a1e1e; --die-tens:#c86c6c; --die-edge:#f7e0b8; --die-glow:#ee7168; --die-outline:#180707;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(238,113,104,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(215,165,104,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(214,90,82,0.09),transparent);
  --amb:radial-gradient(6.760000000000001px 6.760000000000001px at 143px 13px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 323px 104px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 341px 420px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 42px 376px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 292px 355px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 46px 199px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 344px 329px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 280px 421px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 215px 60px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 221px 135px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 90px 134px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 227px 488px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 326px 32px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 146px 475px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(8.06px 8.06px at 290px 63px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 180px 494px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(7.0200000000000005px 7.0200000000000005px at 312px 474px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 327px 515px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 259px 93px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 342px 573px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(8.06px 8.06px at 28px 157px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 313px 574px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 71px 18px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 201px 85px,rgba(255,176,90,0.95) 0,rgba(255,122,42,0.55) 38%,transparent 100%);
  --amb-anim:ambup 34s linear infinite,ambtw 1.6s ease-in-out infinite; --amb-lo:0.45; --amb-hi:1;
}
[data-theme="barbarian"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="barbarian"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(215,165,104,0.28),0 0 22px rgba(238,113,104,0.07),0 2px 12px var(--shadow)}
[data-theme="barbarian"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(238,113,104,0.1),transparent 62%)}
[data-theme="barbarian"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(238,113,104,0.35)}
[data-theme="barbarian"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(238,113,104,0.4)}
[data-theme="monk"]:not([data-mode="day"]){
  --bg:#0e1011; --bg2:#151819; --surface:#1d2122; --raised:#272c2c; --raised2:#343b3b; --line:#30363a; --line2:#565a57;
  --text:#e8dccb; --text2:#c6b9a6; --muted:#a29886; --accent:#c67b4a; --accent2:#b87348; --accent-ink:#110905;
  --arcane:#d78a5a; --arcane-soft:rgba(215,138,90,0.16); --gold:#e6d7c3; --glass:rgba(29,33,34,0.84); --meta:#0e1011;
  --die:#4a4e4f; --die-tens:#82796a; --die-edge:#e6d7c3; --die-glow:#c67b4a; --die-outline:#0e1011;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(198,123,74,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(215,138,90,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(184,115,72,0.09),transparent);
  --amb:radial-gradient(3.3800000000000003px 3.3800000000000003px at 173px 136px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 16px 56px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 168px 485px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 184px 420px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 221px 579px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 346px 427px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(3.3800000000000003px 3.3800000000000003px at 289px 103px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 262px 388px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 196px 232px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%),radial-gradient(3.3800000000000003px 3.3800000000000003px at 44px 40px,rgba(240,178,127,0.95) 0,rgba(198,123,74,0.55) 38%,transparent 100%);
  --amb-anim:ambup 200s linear infinite,ambtw 8s ease-in-out infinite; --amb-lo:0.3; --amb-hi:0.9;
}
[data-theme="monk"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="monk"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(215,138,90,0.28),0 0 22px rgba(198,123,74,0.07),0 2px 12px var(--shadow)}
[data-theme="monk"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(198,123,74,0.1),transparent 62%)}
[data-theme="monk"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(198,123,74,0.35)}
[data-theme="monk"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(198,123,74,0.4)}
[data-theme="rogue"]:not([data-mode="day"]){
  --bg:#090b0c; --bg2:#101315; --surface:#191d20; --raised:#23282c; --raised2:#2f353a; --line:#2e3338; --line2:#55595c;
  --text:#e8e1d2; --text2:#c3bcae; --muted:#a19b8e; --accent:#d9a863; --accent2:#bc8a47; --accent-ink:#0a0a0a;
  --arcane:#bbb09a; --arcane-soft:rgba(187,176,154,0.16); --gold:#d9a863; --glass:rgba(25,29,32,0.84); --meta:#090b0c;
  --die:#3e434b; --die-tens:#8a8f91; --die-edge:#f0d6a3; --die-glow:#d9a863; --die-outline:#090b0c;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(217,168,99,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(187,176,154,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(188,138,71,0.09),transparent);
  --amb:radial-gradient(3.12px 3.12px at 128px 207px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(2.6px 2.6px at 230px 75px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 1px 501px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(3.3800000000000003px 3.3800000000000003px at 16px 461px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 145px 545px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(3.12px 3.12px at 4px 596px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(2.6px 2.6px at 231px 257px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 62px 453px,rgba(240,214,163,0.95) 0,rgba(217,168,99,0.55) 38%,transparent 100%);
  --amb-anim:ambup 240s linear infinite,ambtw 9s ease-in-out infinite; --amb-lo:0.1; --amb-hi:0.9;
}
[data-theme="rogue"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="rogue"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(187,176,154,0.28),0 0 22px rgba(217,168,99,0.07),0 2px 12px var(--shadow)}
[data-theme="rogue"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(217,168,99,0.1),transparent 62%)}
[data-theme="rogue"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(217,168,99,0.35)}
[data-theme="rogue"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(217,168,99,0.4)}
[data-theme="bard"]:not([data-mode="day"]){
  --bg:#1d0e19; --bg2:#27121f; --surface:#361a2f; --raised:#44213a; --raised2:#582b4d; --line:#4d2545; --line2:#7a4a7c;
  --text:#f7e8d6; --text2:#dcc7cf; --muted:#b99bb0; --accent:#d9a86b; --accent2:#c68f4f; --accent-ink:#1a0c14;
  --arcane:#eec9e1; --arcane-soft:rgba(238,201,225,0.16); --gold:#f7d9b6; --glass:rgba(54,26,47,0.84); --meta:#1d0e19;
  --die:#7a3d6a; --die-tens:#b77aaa; --die-edge:#f8eacf; --die-glow:#d9a86b; --die-outline:#1d0e19;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(217,168,107,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(238,201,225,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(198,143,79,0.09),transparent);
  --amb:radial-gradient(6.5px 6.5px at 90px 515px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 114px 276px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 91px 529px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 244px 299px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 295px 488px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 349px 415px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 256px 195px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 59px 507px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 294px 280px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 298px 26px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 70px 14px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 292px 376px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 312px 488px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 202px 276px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 194px 451px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 138px 300px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 253px 463px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 92px 368px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 338px 341px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 216px 344px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 206px 97px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 43px 200px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 315px 386px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 125px 239px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 56px 32px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 135px 55px,rgba(255,224,240,0.95) 0,rgba(217,168,107,0.55) 38%,transparent 100%);
  --amb-anim:ambup 90s linear infinite,ambtw 2.4s ease-in-out infinite; --amb-lo:0.2; --amb-hi:1;
}
[data-theme="bard"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="bard"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(238,201,225,0.28),0 0 22px rgba(217,168,107,0.07),0 2px 12px var(--shadow)}
[data-theme="bard"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(217,168,107,0.1),transparent 62%)}
[data-theme="bard"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(217,168,107,0.35)}
[data-theme="bard"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(217,168,107,0.4)}
[data-theme="ranger"]:not([data-mode="day"]){
  --bg:#0b1f15; --bg2:#10281b; --surface:#163425; --raised:#1d4030; --raised2:#274f3a; --line:#2a4d38; --line2:#4d7a58;
  --text:#efe8d0; --text2:#cbd0bd; --muted:#a5b3a0; --accent:#d4be6a; --accent2:#b99a48; --accent-ink:#0a1109;
  --arcane:#87a97a; --arcane-soft:rgba(135,169,122,0.16); --gold:#d4be6a; --glass:rgba(22,52,37,0.84); --meta:#0b1f15;
  --die:#3a6b4f; --die-tens:#87a97a; --die-edge:#ebdca6; --die-glow:#d4be6a; --die-outline:#0b1f15;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(212,190,106,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(135,169,122,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(185,154,72,0.09),transparent);
  --amb:radial-gradient(4.42px 4.42px at 145px 274px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 302px 165px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(5.720000000000001px 5.720000000000001px at 44px 122px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 72px 365px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 271px 471px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 312px 411px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(7.279999999999999px 7.279999999999999px at 225px 442px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(5.2px 5.2px at 209px 580px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 358px 22px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(7.54px 7.54px at 111px 514px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 260px 328px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(4.9399999999999995px 4.9399999999999995px at 192px 466px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 292px 410px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(4.16px 4.16px at 342px 184px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(6.5px 6.5px at 265px 309px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 249px 409px,rgba(233,255,154,0.95) 0,rgba(191,232,106,0.55) 38%,transparent 100%);
  --amb-anim:ambdrift 120s linear infinite,ambtw 3.4s ease-in-out infinite; --amb-lo:0.1; --amb-hi:1;
}
[data-theme="ranger"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="ranger"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(135,169,122,0.28),0 0 22px rgba(212,190,106,0.07),0 2px 12px var(--shadow)}
[data-theme="ranger"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(212,190,106,0.1),transparent 62%)}
[data-theme="ranger"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(212,190,106,0.35)}
[data-theme="ranger"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(212,190,106,0.4)}
[data-theme="druid"]:not([data-mode="day"]){
  --bg:#0b1c14; --bg2:#10261b; --surface:#163325; --raised:#1d4031; --raised2:#265040; --line:#1e4d3a; --line2:#3f7a5a;
  --text:#ece6cd; --text2:#c8d0bd; --muted:#a2b4a0; --accent:#e6c15a; --accent2:#c0a043; --accent-ink:#0a1109;
  --arcane:#7ca87a; --arcane-soft:rgba(124,168,122,0.16); --gold:#e6c15a; --glass:rgba(22,51,37,0.84); --meta:#0b1c14;
  --die:#2f5e48; --die-tens:#7ca87a; --die-edge:#f4d77a; --die-glow:#e6c15a; --die-outline:#0b1c14;
  --fx:radial-gradient(70% 45% at 50% -8%,rgba(230,193,90,0.2),transparent),radial-gradient(60% 40% at 100% 100%,rgba(124,168,122,0.12),transparent),radial-gradient(50% 35% at 0% 60%,rgba(192,160,67,0.09),transparent);
  --amb:radial-gradient(7.279999999999999px 7.279999999999999px at 254px 589px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(4.42px 4.42px at 245px 340px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 227px 340px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 8px 518px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(6.760000000000001px 6.760000000000001px at 351px 185px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 338px 343px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 71px 145px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(5.9799999999999995px 5.9799999999999995px at 156px 28px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 281px 504px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 110px 369px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(3.9000000000000004px 3.9000000000000004px at 114px 174px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 133px 259px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(5.460000000000001px 5.460000000000001px at 181px 326px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(7.54px 7.54px at 224px 539px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(7.800000000000001px 7.800000000000001px at 166px 499px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(6.24px 6.24px at 233px 243px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(3.6399999999999997px 3.6399999999999997px at 19px 172px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%),radial-gradient(4.680000000000001px 4.680000000000001px at 303px 67px,rgba(217,245,192,0.95) 0,rgba(139,209,138,0.55) 38%,transparent 100%);
  --amb-anim:ambdrift 150s linear infinite,ambtw 4.4s ease-in-out infinite; --amb-lo:0.25; --amb-hi:0.95;
}
[data-theme="druid"]:not([data-mode="day"]) body::before{animation:fxbreathe 7s ease-in-out infinite alternate}
[data-theme="druid"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(124,168,122,0.28),0 0 22px rgba(230,193,90,0.07),0 2px 12px var(--shadow)}
[data-theme="druid"]:not([data-mode="day"]) .card .hd{background:linear-gradient(90deg,rgba(230,193,90,0.1),transparent 62%)}
[data-theme="druid"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 16px rgba(230,193,90,0.35)}
[data-theme="druid"]:not([data-mode="day"]) .top h1{text-shadow:0 0 22px rgba(230,193,90,0.4)}

/* signatures */
[data-theme="wizard"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="sorcerer"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="warlock"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="cleric"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="fighter"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="barbarian"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="monk"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="rogue"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="bard"]:not([data-mode="day"]) .card .hd h2::before,[data-theme="ranger"]:not([data-mode="day"]) .card .hd h2::before{content:'';display:inline-block;width:.8em;height:.8em;margin-right:8px;vertical-align:-.05em;background:var(--accent);-webkit-mask:var(--ornament) center/contain no-repeat;mask:var(--ornament) center/contain no-repeat;filter:drop-shadow(0 0 5px var(--accent))}
[data-theme="paladin"]:not([data-mode="day"]) .card .hd h2::before{filter:drop-shadow(0 0 6px var(--accent))}
[data-theme="druid"]:not([data-mode="day"]) .card .hd h2::after{filter:drop-shadow(0 0 5px var(--arcane))}
[data-theme="sorcerer"]:not([data-mode="day"]) .card .hd h2,[data-theme="bard"]:not([data-mode="day"]) .card .hd h2{background:linear-gradient(90deg,var(--text),var(--arcane));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
[data-theme="wizard"]:not([data-mode="day"]) .card{border-color:var(--line2)}
[data-theme="warlock"]:not([data-mode="day"]) .card{box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 rgba(200,168,240,.3),0 0 30px rgba(154,108,199,.16),0 2px 12px var(--shadow)}
[data-theme="warlock"]:not([data-mode="day"]) .card .hd h2{text-shadow:0 0 14px rgba(168,123,214,.7)}
[data-theme="cleric"]:not([data-mode="day"]) .card{border-top:3px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,244,196,.35),0 -4px 22px rgba(245,219,104,.1),0 2px 12px var(--shadow)}
[data-theme="paladin"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(255,233,168,.3),0 -3px 20px rgba(213,173,85,.12),0 2px 12px var(--shadow)}
[data-theme="fighter"]:not([data-mode="day"]) .card{border-left:3px solid var(--accent);border-radius:var(--r) var(--r) var(--r) var(--r)}
[data-theme="barbarian"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(215,165,104,.25),0 10px 26px rgba(214,80,74,.14),0 2px 12px var(--shadow)}
[data-theme="monk"]:not([data-mode="day"]) .card .hd{border-bottom:1px solid var(--line2);margin-bottom:2px;padding-bottom:10px}
[data-theme="rogue"]:not([data-mode="day"]) .card{box-shadow:inset 0 1px 0 rgba(217,168,99,.3),0 2px 14px var(--shadow)}
[data-theme="ranger"]:not([data-mode="day"]) .card{border-left:3px solid var(--arcane)}
[data-theme="druid"]:not([data-mode="day"]) .card{border-bottom:2px solid var(--line2);box-shadow:inset 0 1px 0 rgba(124,168,122,.3),0 0 26px rgba(139,209,138,.1),0 2px 12px var(--shadow)}
@media (prefers-reduced-motion:reduce){html body::after,html body::before{animation:none!important}}
/* ===== END CLASS NIGHT POLISH ===== */

/* ===== HERO CREATOR (forge.js) ===== */
.mkprog{display:flex;gap:5px;padding:12px 16px 0}
.mkprog i{flex:1;height:5px;border-radius:3px;background:var(--line2)}
.mkprog i.done{background:var(--arcane)}
.mkprog i.now{background:var(--arcane);box-shadow:0 0 0 2px var(--arcane-soft)}
.mkopt{align-items:flex-start}
.mkopt.on{border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset;background:var(--arcane-soft)}
.mkopt b{overflow-wrap:anywhere}
.mkopt span{overflow-wrap:anywhere;line-height:1.35}
.mkscore{min-width:34px;text-align:center;font-family:var(--display);font-size:20px}
.mkasg select{max-width:100%}
.pill[aria-disabled="true"]{opacity:.55}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ===== CAMPAIGN HUB, HERO PICKER, WORLD BUILDER (campaign.js) ===== */
.hubwrap{max-width:560px;margin:0 auto;padding-top:8px}
.hubhead{text-align:center;margin:6px 0 18px}
.hubhead .hubk{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hubhead h2{margin:4px 0 0;font-family:var(--display);font-size:30px;line-height:1.15;overflow-wrap:anywhere}
.hubnone{text-align:center;margin:0 0 16px}
.hubcard{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);text-align:left;min-height:62px}
.hubcard:first-of-type{border-top:0}
.hubcard .nm{font-weight:700;font-size:17px;overflow-wrap:anywhere}
.hubcard .sub{overflow-wrap:anywhere}
.hubtwo{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 16px}
.hubbig{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:18px 18px;min-height:88px;text-align:left;border-radius:var(--rb);border:1px solid var(--line2);background:var(--raised);color:var(--text)}
.hubbig b{font-family:var(--display);font-size:20px;line-height:1.2}
.hubbig span{font-size:15px;color:var(--muted)}
.hubbig.gold{border-color:var(--arcane);box-shadow:0 0 0 1px var(--arcane) inset;background:var(--arcane-soft)}
@media (min-width:640px){.hubtwo{grid-template-columns:1fr 1fr}}
.hubcodein{text-transform:uppercase;letter-spacing:.3em;font-family:var(--display);font-size:22px;text-align:center}
body:has(.hubwrap) nav.bar{display:none}
.bdprog{height:8px;border-radius:5px;background:var(--line2);overflow:hidden}
.bdprog i{display:block;height:100%;background:var(--arcane);border-radius:5px;transition:width .3s}
.bdtick{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:14px;font-weight:800}
.bdtick.on{background:var(--arcane);border-color:var(--arcane);color:var(--btnink,#11110f)}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mapcell{position:relative;aspect-ratio:4/3;border-radius:var(--rb);border:1px solid var(--line2);background-size:cover;background-position:center;overflow:hidden;padding:0;display:flex;align-items:flex-end}
.mapcell span{display:block;width:100%;padding:18px 10px 8px;font-weight:700;font-size:14px;text-align:left;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));overflow-wrap:anywhere}
.mapthumb{border-radius:10px}

/* hub legibility over the backdrop */
.hubhead{display:block;width:fit-content;max-width:100%;margin:6px auto 18px;padding:12px 26px;border-radius:18px;background:rgba(10,14,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08)}
.hubhead .hubk{color:#c9cdc8}
.hubbig{background:rgba(10,14,20,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hubbig span{color:#c9cdc8}
.hubbig.gold{background:rgba(24,20,10,.92)}
.hubnone{padding:10px 14px;border-radius:12px;background:rgba(10,14,20,.72);color:#e4e6e2}

/* Back links sit on the artwork, so they get a dark glass pill to stay readable */
.back{padding:0 16px 0 12px;margin:2px 0 8px;border-radius:999px;background:rgba(10,14,20,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:var(--title,var(--arcane));font-size:16px}