/* Hit Point & Click colour themes. 'tavern' (crimson & gold) is the default in app.css.
   Chosen per device from the ⋯ menu; stored in localStorage, applied as <html data-theme>. */
html[data-theme="arcane"] {
  --bg: #0f1020; --bg2: #15172b; --panel: #1a1c33; --panel2: #22254a; --line: #2c3058; --line2: #3b4075;
  --text: #e8e9ff; --muted: #a3a6cf; --faint: #6f73a3;
  --gold: #b9a6ff; --gold2: #ddd2ff; --gold-dim: #6c5fb0;
  --crimson: #3b2a7a; --crimson2: #5a43b8; --crimson3: #8b73ff;
  --well: #0b0c18; --hover: #2a2d55; --hover2: #1e2140;
  --acc1: #3a2b78; --acc2: #271d55; --acc1h: #4a389a; --acc2h: #31246b; --acc-shadow: #120c2a; --acc-text: #d6ccff;
  --glow: rgba(139,115,255,.14); --line-soft: #22254a; --bar-bg: rgba(15,16,32,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="forest"] {
  --bg: #0e140f; --bg2: #131b14; --panel: #172119; --panel2: #1f2c21; --line: #2a3a2c; --line2: #3a4f3c;
  --text: #e7efe1; --muted: #a3b49c; --faint: #6d806a;
  --gold: #d8c070; --gold2: #f0dd9a; --gold-dim: #7d6c35;
  --crimson: #2f5a2f; --crimson2: #3f7d3f; --crimson3: #66b866;
  --well: #0a0f0b; --hover: #263828; --hover2: #1b281d;
  --acc1: #2c5530; --acc2: #1d3b21; --acc1h: #376a3c; --acc2h: #24482a; --acc-shadow: #0c1a0e; --acc-text: #d6ecc9;
  --glow: rgba(102,184,102,.12); --line-soft: #1f2c21; --bar-bg: rgba(14,20,15,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="frost"] {
  --bg: #0d141b; --bg2: #111b24; --panel: #15212c; --panel2: #1c2b38; --line: #263848; --line2: #36506a;
  --text: #eaf4fb; --muted: #a5bccd; --faint: #6b8496;
  --gold: #9fd6f2; --gold2: #d9f1ff; --gold-dim: #4f7f99;
  --crimson: #1f4f6e; --crimson2: #2f7aa6; --crimson3: #5cc0f0;
  --well: #091018; --hover: #22374a; --hover2: #182937;
  --acc1: #1f4a68; --acc2: #15344a; --acc1h: #285c80; --acc2h: #1a405a; --acc-shadow: #08151f; --acc-text: #cfeaff;
  --glow: rgba(92,192,240,.12); --line-soft: #1c2b38; --bar-bg: rgba(13,20,27,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="infernal"] {
  --bg: #120a08; --bg2: #190e0b; --panel: #1f110d; --panel2: #2a1712; --line: #3d1f17; --line2: #57291c;
  --text: #f6e6dc; --muted: #c69f8c; --faint: #8a6656;
  --gold: #ff9a3c; --gold2: #ffc27a; --gold-dim: #8f4f1c;
  --crimson: #7a1d0e; --crimson2: #b8341a; --crimson3: #ff5a2a;
  --well: #0c0605; --hover: #3a1d14; --hover2: #26140f;
  --acc1: #6b1a0d; --acc2: #4a1209; --acc1h: #852210; --acc2h: #5a160b; --acc-shadow: #1c0704; --acc-text: #ffd2b0;
  --glow: rgba(255,90,42,.15); --line-soft: #2a1712; --bar-bg: rgba(18,10,8,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="forge"] {
  --bg: #121416; --bg2: #181b1e; --panel: #1d2125; --panel2: #262b30; --line: #33393f; --line2: #464e56;
  --text: #ecebe6; --muted: #aeb2b4; --faint: #73797e;
  --gold: #d9965b; --gold2: #f2c08f; --gold-dim: #8a5a33;
  --crimson: #6e4326; --crimson2: #a0602f; --crimson3: #e08a43;
  --well: #0d0f10; --hover: #30363c; --hover2: #22272b;
  --acc1: #5d3a22; --acc2: #432a19; --acc1h: #714629; --acc2h: #50321e; --acc-shadow: #1a1009; --acc-text: #f5d6b8;
  --glow: rgba(224,138,67,.12); --line-soft: #262b30; --bar-bg: rgba(18,20,22,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="necro"] {
  --bg: #0b0d0b; --bg2: #101310; --panel: #141814; --panel2: #1b211b; --line: #263026; --line2: #344234;
  --text: #e2eadf; --muted: #9fb09a; --faint: #657363;
  --gold: #9fe870; --gold2: #ccff9e; --gold-dim: #4f7a37;
  --crimson: #2d4a1f; --crimson2: #4c7a2f; --crimson3: #84d64b;
  --well: #070907; --hover: #222b22; --hover2: #181e18;
  --acc1: #2a4720; --acc2: #1b3015; --acc1h: #355a28; --acc2h: #21391a; --acc-shadow: #091206; --acc-text: #dcffc4;
  --glow: rgba(132,214,75,.10); --line-soft: #1b211b; --bar-bg: rgba(11,13,11,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="royal"] {
  --bg: #130d18; --bg2: #1a1120; --panel: #201627; --panel2: #2a1d34; --line: #3a2a47; --line2: #523a63;
  --text: #f2e9f7; --muted: #bba5c7; --faint: #7f6a8b;
  --gold: #f0c75e; --gold2: #ffe39c; --gold-dim: #8f7232;
  --crimson: #5a2478; --crimson2: #8436ad; --crimson3: #c46cf0;
  --well: #0d0811; --hover: #33233f; --hover2: #251a2e;
  --acc1: #522270; --acc2: #3a1850; --acc1h: #632a88; --acc2h: #461d61; --acc-shadow: #160a20; --acc-text: #f3d9ff;
  --glow: rgba(196,108,240,.12); --line-soft: #2a1d34; --bar-bg: rgba(19,13,24,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="starlight"] {
  --bg: #0a1116; --bg2: #0e171d; --panel: #121e25; --panel2: #192830; --line: #23363f; --line2: #314b57;
  --text: #e4f2f2; --muted: #9dbcbc; --faint: #648282;
  --gold: #6fe0d0; --gold2: #b8fff4; --gold-dim: #357a72;
  --crimson: #164d52; --crimson2: #1f7a80; --crimson3: #3fd1c8;
  --well: #071014; --hover: #1f3139; --hover2: #15232a;
  --acc1: #174a4f; --acc2: #0f3438; --acc1h: #1d5c62; --acc2h: #134046; --acc-shadow: #06171a; --acc-text: #c8fff7;
  --glow: rgba(63,209,200,.10); --line-soft: #192830; --bar-bg: rgba(10,17,22,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="parchment"] {
  --bg: #efe6d2; --bg2: #e6dbc2; --panel: #f8f1e2; --panel2: #ece1c8; --line: #d6c7a6; --line2: #c2ae86;
  --text: #2b2116; --muted: #5e4d38; --faint: #8a775c;
  --gold: #8a5a12; --gold2: #6b3f0a; --gold-dim: #b8955a;
  --crimson: #8f2a2a; --crimson2: #a83434; --crimson3: #c24646;
  --well: #e2d5b8; --hover: #e3d4b3; --hover2: #efe3c9;
  --acc1: #9c3030; --acc2: #7d2424; --acc1h: #b03a3a; --acc2h: #8c2a2a; --acc-shadow: #5a1a1a; --acc-text: #fff1e6;
  --glow: rgba(168,52,52,.08); --line-soft: #e0d2b4; --bar-bg: rgba(239,230,210,.96); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="feywild"] {
  --bg: #160c14; --bg2: #1d1019; --panel: #24131f; --panel2: #2f1928; --line: #43233a; --line2: #5e3152;
  --text: #fbeaf4; --muted: #cfa6c0; --faint: #8f6b83;
  --gold: #f7a8d8; --gold2: #ffd3ee; --gold-dim: #9a5683;
  --crimson: #7a1f5c; --crimson2: #b8378a; --crimson3: #f062b8;
  --well: #100810; --hover: #3a1d31; --hover2: #2a1524;
  --acc1: #6e1c53; --acc2: #4d133a; --acc1h: #862366; --acc2h: #5c1745; --acc-shadow: #1f0718; --acc-text: #ffd6ef;
  --glow: rgba(240,98,184,.13); --line-soft: #2f1928; --bar-bg: rgba(22,12,20,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="underdark"] {
  --bg: #0c0a14; --bg2: #110e1b; --panel: #161222; --panel2: #1e1830; --line: #2a2242; --line2: #3b305c;
  --text: #e9e6f7; --muted: #a69fc7; --faint: #6c6590;
  --gold: #4ff0c8; --gold2: #a8ffe9; --gold-dim: #2a8a73;
  --crimson: #3a2370; --crimson2: #5d37a8; --crimson3: #8e63ff;
  --well: #08070e; --hover: #251e3c; --hover2: #1a152b;
  --acc1: #33205f; --acc2: #231644; --acc1h: #3f2875; --acc2h: #2b1b52; --acc-shadow: #0e0820; --acc-text: #c9fff1;
  --glow: rgba(79,240,200,.10); --line-soft: #1e1830; --bar-bg: rgba(12,10,20,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="desert"] {
  --bg: #17110a; --bg2: #1e160d; --panel: #251b10; --panel2: #302315; --line: #46331e; --line2: #614629;
  --text: #f8ecd9; --muted: #d1b48e; --faint: #93795a;
  --gold: #f4b860; --gold2: #ffd99a; --gold-dim: #9a6a2c;
  --crimson: #8a3f12; --crimson2: #c45d1c; --crimson3: #ff8a3a;
  --well: #100b06; --hover: #3b2b19; --hover2: #2b1f12;
  --acc1: #7a3810; --acc2: #55270b; --acc1h: #924313; --acc2h: #652e0d; --acc-shadow: #200d03; --acc-text: #ffdcbc;
  --glow: rgba(255,138,58,.12); --line-soft: #302315; --bar-bg: rgba(23,17,10,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="sunken"] {
  --bg: #081312; --bg2: #0b1918; --panel: #0f201f; --panel2: #152b29; --line: #1f3d3a; --line2: #2b5551;
  --text: #e2f5f1; --muted: #9cc4bc; --faint: #628a83;
  --gold: #7fe0c2; --gold2: #c2ffec; --gold-dim: #3b8a73;
  --crimson: #11504a; --crimson2: #1b7d72; --crimson3: #2fc4b0;
  --well: #050d0c; --hover: #1a3533; --hover2: #122624;
  --acc1: #104842; --acc2: #0b322e; --acc1h: #155a53; --acc2h: #0d3c37; --acc-shadow: #031210; --acc-text: #c8fff2;
  --glow: rgba(47,196,176,.11); --line-soft: #152b29; --bar-bg: rgba(8,19,18,.95); --ghost-bg: rgba(0, 0, 0, .45);
}
html[data-theme="celestial"] {
  --bg: #e9eef6; --bg2: #dfe6f1; --panel: #f6f8fc; --panel2: #e6ecf5; --line: #c9d4e4; --line2: #aebdd3;
  --text: #1c2433; --muted: #4a5870; --faint: #7b879c;
  --gold: #9a6b12; --gold2: #7a520a; --gold-dim: #c2a265;
  --crimson: #2c4f8f; --crimson2: #3a64b0; --crimson3: #5a86d6;
  --well: #dde4ef; --hover: #dbe3ef; --hover2: #eef2f8;
  --acc1: #33589c; --acc2: #284783; --acc1h: #3d66b0; --acc2h: #2f5294; --acc-shadow: #1a2c52; --acc-text: #f2f6ff;
  --glow: rgba(90,134,214,.10); --line-soft: #dfe6f1; --bar-bg: rgba(233,238,246,.96); --ghost-bg: rgba(0, 0, 0, .45);
}
/* Celestial is light too: same fixes as Parchment */
html[data-theme="celestial"] { color-scheme: light; --hit-text: #f2f6ff; --up: #2f7a2a; --down: #b02a2a; --shadow: 0 10px 30px rgba(30, 50, 90, .16); }
html[data-theme="celestial"] .chip.on { color: #fff; }
html[data-theme="celestial"] .aff { background: #e4e9f5; border-color: #9fb0cf; color: #22355e; }
html[data-theme="celestial"] .warn { background: #e8eefb; color: #22355e; }
html[data-theme="celestial"] #toast { color: var(--text); }
html[data-theme="celestial"] .pip.on { background: radial-gradient(circle at 35% 35%, #f3d98f, #c9a14a 60%, #9a6b12); }
html[data-theme="celestial"] .brand-name { color: #f7d49a; }
html[data-theme="celestial"] .rollbtn .chg-up, html[data-theme="celestial"] .rb.hit .chg-up { color: #c8f5bd !important; }
html[data-theme="celestial"] .rollbtn .chg-down, html[data-theme="celestial"] .rb.hit .chg-down { color: #ffd0d0 !important; }
/* Light theme adjustments */
html[data-theme="parchment"] { color-scheme: light; --hit-text: #fff4e8; --up: #2f7a2a; --down: #b02a2a; --shadow: 0 10px 30px rgba(80, 50, 20, .18); }
html[data-theme="parchment"] .chip.on { color: #fff; }
html[data-theme="parchment"] .aff { background: #f3e2bd; border-color: #b8955a; color: #5e3d0a; }
html[data-theme="parchment"] .warn { background: #f6e3b8; color: #5e3d0a; }
html[data-theme="parchment"] #toast { color: var(--text); }
html[data-theme="parchment"] .pip.on { background: radial-gradient(circle at 35% 35%, #e9c27a, #c0892f 60%, #8a5a12); }
html[data-theme="parchment"] .banner-shade { background: linear-gradient(90deg, rgba(14, 10, 7, .8) 0%, rgba(14, 10, 7, .35) 32%, transparent 58%), linear-gradient(0deg, rgba(14, 10, 7, .7) 0%, transparent 30%); }
html[data-theme="parchment"] .brand-name { color: #f7d49a; }

/* Theme picker */
.themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.theme { min-width: 0; grid-template-rows: 26px 2.3em; align-items: center; text-align: center; line-height: 1.15; font-size: 11px; padding: 6px 3px; }
.theme { display: grid; gap: 4px; justify-items: center; border: 1px solid var(--line2); border-radius: 10px; padding: 6px 4px; background: var(--bg2); cursor: pointer; font-size: 11px; color: var(--muted); }
.theme.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); color: var(--text); }
.theme i { display: block; width: 100%; height: 26px; border-radius: 6px; }
@media (max-width: 420px) { .themes { grid-template-columns: repeat(4, 1fr); } }
/* Changed numbers on the coloured roll buttons need light colours in the light theme */
html[data-theme="parchment"] .rollbtn .chg-up, html[data-theme="parchment"] .rb.hit .chg-up { color: #c8f5bd !important; }
html[data-theme="parchment"] .rollbtn .chg-down, html[data-theme="parchment"] .rb.hit .chg-down { color: #ffd0d0 !important; }

/* Coin colours on the loot page need darker metals on the light themes */
html[data-theme="parchment"] .coin-pp b, html[data-theme="parchment"] .coin-pp span, html[data-theme="celestial"] .coin-pp b, html[data-theme="celestial"] .coin-pp span { color: #4f6275; }
html[data-theme="parchment"] .coin-sp b, html[data-theme="parchment"] .coin-sp span, html[data-theme="celestial"] .coin-sp b, html[data-theme="celestial"] .coin-sp span { color: #6b6660; }
html[data-theme="parchment"] .coin-cp b, html[data-theme="parchment"] .coin-cp span, html[data-theme="celestial"] .coin-cp b, html[data-theme="celestial"] .coin-cp span { color: #9a4a1c; }
html[data-theme="parchment"] .coin.pp span, html[data-theme="celestial"] .coin.pp span { color: #4f6275; }
html[data-theme="parchment"] .coin.sp span, html[data-theme="celestial"] .coin.sp span { color: #6b6660; }