/* Themes, picked from the account menu (js/themes.js sets <html data-theme data-mode data-base>).
   "Classic" is the original look in app.css. Every other theme first drops the classic gold-and-fantasy
   layer (data-base="modern"), then sets its own colours, type and shapes. */

/* ---------- theme dropdown in the account menu ---------- */
.menu-theme{padding:6px 10px 8px;gap:4px}
.menu-theme select{padding:7px 9px;font-size:.88rem}
.menu-sep{border:0;border-top:1px solid var(--line);margin:4px}

/* ---------- shared by every light theme ---------- */
:root[data-mode="light"]{color-scheme:light}
:root[data-mode="light"] .wi{box-shadow:0 0 0 1px rgba(0,0,0,.55)}
:root[data-mode="light"] .tag.hard{color:#a64f00;background:rgba(255,128,0,.12)}
:root[data-mode="light"] .money .g{color:#9a6b00}:root[data-mode="light"] .money .s{color:#5d6b7c}:root[data-mode="light"] .money .c{color:#9a5521}

/* ---------- shared by the new themes: drop the classic layer ---------- */
:root[data-base="modern"]{--f-fantasy:var(--f-display);--accent-fill:var(--gold)}
:root[data-base="modern"] body{background:var(--bg)}
:root[data-base="modern"] h1,:root[data-base="modern"] h1.page-title,:root[data-base="modern"] .raid-hero h1,:root[data-base="modern"] .land-h,:root[data-base="modern"] .brand{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg);-webkit-text-fill-color:currentColor}
:root[data-base="modern"] .brand svg{filter:none}
:root[data-base="modern"] h1{overflow-wrap:anywhere}
:root[data-base="modern"] .btn{max-width:100%;white-space:normal;text-align:center}
:root[data-base="modern"] .frame{background:var(--surface);border-color:var(--line)}
:root[data-base="modern"] .card{border-top-color:var(--line)}
:root[data-base="modern"] .btn-gold{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);box-shadow:none}
:root[data-base="modern"] .btn-gold:hover{background:var(--accent-fill);filter:brightness(1.08)}
:root[data-base="modern"] .medal{border-color:var(--line-strong);box-shadow:none;background:var(--surface-2)}
:root[data-base="modern"] .wi{box-shadow:0 0 0 1px rgba(0,0,0,.7)}
:root[data-base="modern"] .nav a.on .wi{box-shadow:0 0 0 1px rgba(0,0,0,.7)}
:root[data-base="modern"] .meter i{background:var(--gold)}
:root[data-base="modern"] .import-hero,:root[data-base="modern"] .winner,:root[data-base="modern"] .auction{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
:root[data-base="modern"] .orn::before,:root[data-base="modern"] .orn::after{background:var(--line-strong)}
:root[data-base="modern"] .lp:hover{border-color:var(--line-strong)}

/* Square corners for Command and Broadsheet */
:root[data-shape="square"] *:not(.avatar):not(.round):not(.switch):not(.pill){border-radius:0!important}
:root[data-shape="square"] .wi.round{border-radius:50%!important}

/* ================= Command (Dark) and Command (Light): raid night as mission control ================= */
:root[data-theme="command"]{
  color-scheme:dark;
  --bg:#11151B;--bg-deep:#0C1015;--surface:#171D25;--surface-2:#212A35;--glass:rgba(17,21,27,.93);
  --line:#2A333F;--line-strong:#3A4555;--fg:#E6EDF3;--muted:#A3ADBA;--faint:#7D8794;
  --gold:#C6FF3D;--gold-soft:rgba(198,255,61,.12);--blue:#4DD8FF;--blue-soft:rgba(77,216,255,.12);
  --ink:#05070A;--on-accent:#0B0E12;--sunk-rgb:0 0 0;--hi-rgb:230 237 243;
  --ok:#C6FF3D;--warn:#FFB020;--late:#4DD8FF;--bad:#FF6B6E;--tester:#c99bff;
  --grid:#161C24;--shadow:none;
}
:root[data-theme="command-light"]{
  --bg:#F3F4F0;--bg-deep:#E9EBE5;--surface:#FFFFFF;--surface-2:#ECEEE8;--glass:rgba(243,244,240,.93);
  --line:#D6DAD2;--line-strong:#B9BFB5;--fg:#0B0E12;--muted:#4B5461;--faint:#5F6874;
  --gold:#3F6B00;--accent-fill:#C6FF3D;--gold-soft:rgba(198,255,61,.35);--blue:#00789E;--blue-soft:rgba(0,127,163,.1);
  --ink:#E9EBE5;--on-accent:#0B0E12;--sunk-rgb:220 224 214;--hi-rgb:11 14 18;
  --ok:#3F6B00;--warn:#A86200;--late:#00789E;--bad:#C2363A;--tester:#7b4fd6;--tester-soft:rgba(123,79,214,.1);
  --grid:#E5E7E1;--shadow:none;
  --c-Warrior:#8A5526;--c-Paladin:#B8306F;--c-Hunter:#4A7417;--c-Rogue:#7D6E00;--c-Priest:#4A4A4A;--c-Mage:#00789E;--c-Warlock:#4B4DBF;--c-Druid:#B65200;--c-Shaman:#1C64C4;
  --q-poor:#6d6d6d;--q-common:#3a4560;--q-uncommon:#1b8a00;--q-rare:#0060c0;--q-legendary:#c25e00;
}
:root[data-theme^="command"]{--f-display:"Chakra Petch",system-ui,sans-serif;--f-body:"IBM Plex Mono",ui-monospace,monospace;--f-mono:"IBM Plex Mono",ui-monospace,monospace}
:root[data-theme^="command"] body{font-size:14px;letter-spacing:0;background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;background-attachment:fixed}
:root[data-theme^="command"] h1,:root[data-theme^="command"] h2,:root[data-theme^="command"] .page-title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em}
:root[data-theme^="command"] h1.page-title{font-size:clamp(2.2rem,5vw,3.4rem);line-height:.95}
:root[data-theme^="command"] h3{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
:root[data-theme^="command"] .eyebrow,:root[data-theme^="command"] th,:root[data-theme^="command"] label,:root[data-theme^="command"] .group-h{letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-size:.68rem}
:root[data-theme^="command"] .top{background:var(--glass);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme^="command"] .brand{font-family:var(--f-display);letter-spacing:.18em;text-transform:uppercase;font-size:1.05rem}
:root[data-theme^="command"] .brand svg{display:none}
:root[data-theme^="command"] .brand::before{content:"";width:12px;height:12px;background:var(--accent-fill);flex:none}
:root[data-theme^="command"] .nav{background:none;border:0;padding:0}
:root[data-theme^="command"] .nav a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:8px 12px}
:root[data-theme^="command"] .nav a.on{background:var(--accent-fill);color:var(--on-accent);box-shadow:none}
:root[data-theme^="command"] .btn{font:600 .74rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:var(--surface);border-color:var(--line-strong);min-height:40px}
:root[data-theme^="command"] .btn-gold{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
:root[data-theme^="command"] .btn-sm{min-height:32px;font-size:.68rem}
:root[data-theme^="command"] .btn:hover{border-color:var(--gold)}
:root[data-theme^="command"] .btn-discord{background:var(--surface);border-color:#5865f2;color:var(--fg)}
:root[data-theme^="command"] .card,:root[data-theme^="command"] .count,:root[data-theme^="command"] .group,:root[data-theme^="command"] .table-box{background:var(--surface);box-shadow:none}
:root[data-theme^="command"] .count b,:root[data-theme^="command"] .stat b{font-family:var(--f-display);color:var(--gold)}
:root[data-theme^="command"] .pill{background:none;border:1px solid currentColor;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;border-radius:0!important}
:root[data-theme^="command"] .pill::before{border-radius:0}
:root[data-theme^="command"] .tag{text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;border:1px solid var(--line-strong);background:none}
:root[data-theme^="command"] .tag.gold{border-color:var(--gold)}
:root[data-theme^="command"] .tabs,:root[data-theme^="command"] .seg{background:none;padding:0;gap:2px;border:0}
:root[data-theme^="command"] .tabs button,:root[data-theme^="command"] .tabs a,:root[data-theme^="command"] .seg button{border:1px solid var(--line-strong);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;background:var(--surface)}
:root[data-theme^="command"] .tabs button.on,:root[data-theme^="command"] .tabs a.on,:root[data-theme^="command"] .seg button.on{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
:root[data-theme^="command"] .tabs button.on .faint{color:var(--on-accent)}
:root[data-theme^="command"] .raid-hero{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent-fill);box-shadow:none}
:root[data-theme^="command"] .raid-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:.9;text-transform:uppercase}
:root[data-theme^="command"] .raid-hero .wm{opacity:.06;color:var(--fg)}
:root[data-theme^="command"] .medal{background:none;border:1px solid var(--line-strong);outline:1px solid var(--line-strong);outline-offset:4px}
:root[data-theme^="command"] .subnav a{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:600;border-bottom:0;padding:9px 12px}
:root[data-theme^="command"] .subnav a.on{background:var(--accent-fill);color:var(--on-accent)}
:root[data-theme^="command"] .subnav a.on .n{color:var(--on-accent)}
:root[data-theme^="command"] .chip{border-left:3px solid var(--line-strong)}
:root[data-theme^="command"] .chip.sel{border-color:var(--gold)}
:root[data-theme^="command"] .group-h span:first-child{font:700 1.15rem var(--f-display);color:var(--gold);letter-spacing:.02em}
:root[data-theme^="command"] input,:root[data-theme^="command"] select,:root[data-theme^="command"] textarea{background:var(--bg-deep)}
:root[data-theme="command-light"] .nav a.on,:root[data-theme="command-light"] .subnav a.on,:root[data-theme="command-light"] .tabs button.on,:root[data-theme="command-light"] .seg button.on{color:#0B0E12}
:root[data-theme="command-light"] .btn-gold{border-color:#3F6B00}
:root[data-theme="command-light"] .btn-discord{color:#0B0E12}

/* ================= Neanderthal Safe Space: cave wall, rough paint, lowercase ================= */
:root[data-theme="neanderthal"]{
  color-scheme:dark;
  --bg:#17120E;--bg-deep:#120E0B;--surface:#231B15;--surface-2:#2C2219;--glass:rgba(23,18,14,.94);
  --line:#3A2D22;--line-strong:#4A3A2C;--fg:#EFE4CF;--muted:#D9CBB0;--faint:#B3A286;
  --gold:#E08A2E;--gold-soft:rgba(224,138,46,.15);--blue:#F4B66A;--blue-soft:rgba(244,182,106,.12);--red:#C2412A;
  --ink:#120E0B;--on-accent:#17120E;--sunk-rgb:10 7 5;--hi-rgb:239 228 207;
  --ok:#8FBF6A;--warn:#E0B35A;--late:#F4B66A;--bad:#E2553A;--tester:#d8a8ff;
  --f-display:"Lilita One","Rubik",system-ui,sans-serif;--f-body:"Rubik",system-ui,sans-serif;--f-mono:"Rubik",system-ui,sans-serif;--f-mark:"Permanent Marker",cursive;
  --rock:22px 8px 26px 10px / 10px 24px 8px 20px;--pebble:14px 4px 16px 6px;
  --shadow:none;
}
:root[data-theme="neanderthal"] body{background:radial-gradient(ellipse at 20% 10%,rgba(224,138,46,.10),transparent 50%),radial-gradient(ellipse at 85% 60%,rgba(194,65,42,.08),transparent 45%),var(--bg);background-attachment:fixed}
:root[data-theme="neanderthal"] h1,:root[data-theme="neanderthal"] h2,:root[data-theme="neanderthal"] .page-title,:root[data-theme="neanderthal"] .land-h{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:0}
:root[data-theme="neanderthal"] h1.page-title{font-size:clamp(2.4rem,6vw,4rem);color:var(--fg)}
:root[data-theme="neanderthal"] h3{font-family:var(--f-display);font-weight:400;text-transform:lowercase;letter-spacing:.01em;font-size:1.2rem}
/* Rubik Dirt has one weight; letting the browser fake a bold smears its texture into a glow */
:root[data-theme="neanderthal"] *{font-synthesis:none}
:root[data-theme="neanderthal"] .eyebrow{font-family:var(--f-mark);font-weight:400;font-size:.95rem;letter-spacing:0;text-transform:lowercase;color:var(--gold)}
:root[data-theme="neanderthal"] .nav a,:root[data-theme="neanderthal"] .btn,:root[data-theme="neanderthal"] .subnav a,:root[data-theme="neanderthal"] .tabs button,:root[data-theme="neanderthal"] .tabs a,:root[data-theme="neanderthal"] .seg button,:root[data-theme="neanderthal"] th,:root[data-theme="neanderthal"] .pill,:root[data-theme="neanderthal"] .group-h,:root[data-theme="neanderthal"] .me-menu button,:root[data-theme="neanderthal"] .me-menu a{text-transform:lowercase}
:root[data-theme="neanderthal"] .top{background:var(--glass);border-bottom:2px dashed var(--line)}
:root[data-theme="neanderthal"] .brand{font-family:var(--f-display);font-weight:400;text-transform:lowercase;color:var(--gold);font-size:1.5rem;flex-wrap:wrap;line-height:1}
:root[data-theme="neanderthal"] .brand svg{display:none}
:root[data-theme="neanderthal"] .brand span::after{content:"neanderthal safe space™";display:block;font:400 .72rem var(--f-mark);color:var(--faint);transform:rotate(-2deg);margin-top:2px;white-space:nowrap}
:root[data-theme="neanderthal"] .nav{background:none;border:0}
:root[data-theme="neanderthal"] .nav a{font-weight:700;padding:6px 10px}
:root[data-theme="neanderthal"] .nav a.on{background:var(--gold);color:var(--on-accent);border-radius:12px 4px 14px 5px;box-shadow:none}
:root[data-theme="neanderthal"] .card,:root[data-theme="neanderthal"] .count,:root[data-theme="neanderthal"] .group,:root[data-theme="neanderthal"] .table-box,:root[data-theme="neanderthal"] .stat,:root[data-theme="neanderthal"] .classcol,:root[data-theme="neanderthal"] .me-menu,:root[data-theme="neanderthal"] .content-card,:root[data-theme="neanderthal"] .lp{background:var(--surface);border:2px solid var(--line);border-radius:var(--rock);box-shadow:none}
/* picked raid, loot format and player: the rock style above would otherwise hide which one is chosen */
:root[data-theme="neanderthal"] .content-card.on,:root[data-theme="neanderthal"] .lp.on{border-color:var(--gold);background:linear-gradient(var(--gold-soft),var(--gold-soft)),var(--surface);box-shadow:0 0 0 3px rgb(224 138 46 / .35)}
:root[data-theme="neanderthal"] .chip.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgb(224 138 46 / .35)}
:root[data-theme="neanderthal"] .count b,:root[data-theme="neanderthal"] .stat b{font-family:var(--f-display);font-weight:400;color:var(--gold);font-size:1.9rem}
:root[data-theme="neanderthal"] .btn{border:2px solid var(--line-strong);background:var(--surface-2);border-radius:var(--pebble);font-weight:800}
:root[data-theme="neanderthal"] .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--on-accent)}
:root[data-theme="neanderthal"] .btn-discord{background:var(--surface-2);border-color:#5865f2;color:var(--fg)}
:root[data-theme="neanderthal"] input,:root[data-theme="neanderthal"] select,:root[data-theme="neanderthal"] textarea{background:var(--bg);border:2px solid var(--line);border-radius:12px 4px 14px 6px}
:root[data-theme="neanderthal"] .tabs,:root[data-theme="neanderthal"] .seg{background:none;border:0}
:root[data-theme="neanderthal"] .tabs button.on,:root[data-theme="neanderthal"] .tabs a.on,:root[data-theme="neanderthal"] .seg button.on{background:var(--gold);color:var(--on-accent);border-radius:var(--pebble)}
:root[data-theme="neanderthal"] .tabs button.on .faint{color:var(--on-accent)}
:root[data-theme="neanderthal"] .raid-hero{border:2px solid var(--line);border-radius:var(--rock);box-shadow:none;
  background:linear-gradient(90deg,var(--surface) 28%,rgb(35 27 21 / .35) 70%,rgb(35 27 21 / .15)),url("/img/cave.svg") right center/auto 100% no-repeat,var(--surface)}
@media (max-width:700px){:root[data-theme="neanderthal"] .raid-hero{background:linear-gradient(rgb(35 27 21 / .78),rgb(35 27 21 / .78)),url("/img/cave.svg") 70% center/auto 100% no-repeat,var(--surface)}}
:root[data-theme="neanderthal"] .raid-hero .wm{display:none}
:root[data-theme="neanderthal"] .raid-hero h1{font-size:clamp(2.6rem,6vw,4.4rem)}
:root[data-theme="neanderthal"] .medal{border:2px solid var(--gold);border-radius:var(--pebble);background:var(--surface-2)}
:root[data-theme="neanderthal"] .medal .wi{border-radius:10px 3px 12px 4px}
:root[data-theme="neanderthal"] .subnav a.on{color:var(--gold);border-bottom:3px solid var(--gold)}
:root[data-theme="neanderthal"] .chip,:root[data-theme="neanderthal"] .slot,:root[data-theme="neanderthal"] .pool{border-radius:12px 4px 14px 6px}
:root[data-theme="neanderthal"] .chip{background:var(--surface-2)}
:root[data-theme="neanderthal"] .group-h span:first-child{font:400 1.2rem var(--f-display);color:var(--gold);letter-spacing:0}
:root[data-theme="neanderthal"] .wi{border-radius:6px}
:root[data-theme="neanderthal"] .cbadge{border-radius:6px}
:root[data-theme="neanderthal"] .tag,:root[data-theme="neanderthal"] .pill{border-radius:10px 3px 12px 4px}
:root[data-theme="neanderthal"] .foot{font-family:var(--f-mark);font-size:.8rem}

/* ================= Broadsheet: the raid as a newspaper front page ================= */
:root[data-theme="broadsheet"]{
  --bg:#ECECE7;--bg-deep:#E2E2DC;--surface:#F3F3EE;--surface-2:#E2E2DC;--glass:#ECECE7;
  --line:#C9C9C2;--line-strong:#0E0E0E;--fg:#0E0E0E;--muted:#4A4A45;--faint:#5E5E58;
  --gold:#C42E00;--accent-fill:#FF4A1C;--gold-soft:rgba(255,74,28,.14);--blue:#1F45D6;--blue-soft:rgba(46,91,255,.1);
  --ink:#E2E2DC;--on-accent:#0E0E0E;--sunk-rgb:226 226 220;--hi-rgb:14 14 14;
  --ok:#1E7A3C;--warn:#A35A00;--late:#1F45D6;--bad:#C42E00;--tester:#7b4fd6;--tester-soft:rgba(123,79,214,.1);
  --f-display:"Archivo",system-ui,sans-serif;--f-body:"Archivo",system-ui,sans-serif;--f-mono:"DM Mono",ui-monospace,monospace;
  --shadow:none;
  --c-Warrior:#8a6236;--c-Paladin:#c2427e;--c-Hunter:#4d7a1c;--c-Rogue:#7d6e00;--c-Priest:#4a4a4a;--c-Mage:#127fa3;--c-Warlock:#5b5cc4;--c-Druid:#c45a00;--c-Shaman:#1c63c4;
  --q-poor:#6d6d6d;--q-common:#3a4560;--q-uncommon:#1b8a00;--q-rare:#0060c0;--q-legendary:#c25e00;
}
:root[data-theme="broadsheet"] body{font-size:15px}
:root[data-theme="broadsheet"] h1,:root[data-theme="broadsheet"] h2,:root[data-theme="broadsheet"] .page-title,:root[data-theme="broadsheet"] .land-h{font-family:var(--f-display);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.02em}
:root[data-theme="broadsheet"] h1.page-title{font-size:clamp(2.6rem,7vw,5.2rem)}
:root[data-theme="broadsheet"] h3{font-weight:900;font-stretch:115%;text-transform:uppercase;letter-spacing:0}
:root[data-theme="broadsheet"] .eyebrow,:root[data-theme="broadsheet"] th,:root[data-theme="broadsheet"] .group-h{font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
:root[data-theme="broadsheet"] .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:3px solid var(--fg)}
:root[data-theme="broadsheet"] .brand{font-family:var(--f-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:1.3rem;letter-spacing:-.01em}
:root[data-theme="broadsheet"] .brand svg{display:none}
:root[data-theme="broadsheet"] .nav{background:none;border:0}
:root[data-theme="broadsheet"] .nav a{font-weight:700;color:var(--fg);padding:6px 8px}
:root[data-theme="broadsheet"] .nav a.on{background:none;box-shadow:none;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
:root[data-theme="broadsheet"] .nav a .wi{display:none}
:root[data-theme="broadsheet"] .card,:root[data-theme="broadsheet"] .count,:root[data-theme="broadsheet"] .group,:root[data-theme="broadsheet"] .table-box,:root[data-theme="broadsheet"] .stat,:root[data-theme="broadsheet"] .frame{background:transparent;border:1px solid var(--fg);border-top:3px solid var(--fg);box-shadow:none}
:root[data-theme="broadsheet"] .count b,:root[data-theme="broadsheet"] .stat b{font-family:var(--f-display);font-stretch:125%;font-weight:900;font-size:2.2rem;line-height:1}
:root[data-theme="broadsheet"] .btn{background:transparent;border:2px solid var(--fg);color:var(--fg);font:800 .82rem var(--f-display);font-stretch:110%;text-transform:uppercase}
:root[data-theme="broadsheet"] .btn:hover{background:var(--fg);color:var(--bg)}
:root[data-theme="broadsheet"] .btn-gold{background:var(--accent-fill);border-color:var(--fg);color:var(--fg)}
:root[data-theme="broadsheet"] .btn-gold:hover{background:var(--fg);color:var(--accent-fill);filter:none}
:root[data-theme="broadsheet"] .btn-discord{background:#5865f2;color:#fff;border-color:var(--fg)}
:root[data-theme="broadsheet"] .tabs,:root[data-theme="broadsheet"] .seg{background:none;border:0;padding:0;gap:6px}
:root[data-theme="broadsheet"] .tabs button,:root[data-theme="broadsheet"] .tabs a,:root[data-theme="broadsheet"] .seg button{border:2px solid var(--fg);font-weight:800;color:var(--fg);background:transparent}
:root[data-theme="broadsheet"] .tabs button.on,:root[data-theme="broadsheet"] .tabs a.on,:root[data-theme="broadsheet"] .seg button.on{background:var(--fg);color:var(--bg)}
:root[data-theme="broadsheet"] .tabs button.on .faint{color:var(--bg)}
:root[data-theme="broadsheet"] .pill{background:none;border:1.5px solid currentColor;font-family:var(--f-mono);text-transform:uppercase;font-weight:500}
:root[data-theme="broadsheet"] .tag{background:none;border:1px solid var(--fg);color:var(--fg);font-family:var(--f-mono);text-transform:uppercase;font-size:.68rem}
:root[data-theme="broadsheet"] .tag.gold{background:var(--accent-fill);color:var(--fg)}
:root[data-theme="broadsheet"] input,:root[data-theme="broadsheet"] select,:root[data-theme="broadsheet"] textarea{background:#F7F7F3;border:2px solid var(--fg)}
:root[data-theme="broadsheet"] th{border-bottom:2px solid var(--fg);background:none}
:root[data-theme="broadsheet"] td{border-top-color:var(--line)}
:root[data-theme="broadsheet"] .raid-hero{background:transparent;border:0;border-bottom:3px solid var(--fg);padding:8px 0 0;box-shadow:none}
:root[data-theme="broadsheet"] .raid-hero h1{font-size:clamp(2.1rem,10vw,7.5rem)}
:root[data-theme="broadsheet"] .raid-hero .wm{display:none}
:root[data-theme="broadsheet"] .raid-hero .eyebrow{display:inline-block;background:var(--accent-fill);color:var(--fg);padding:3px 8px}
:root[data-theme="broadsheet"] .medal{background:none;border:3px solid var(--fg)}
:root[data-theme="broadsheet"] .subnav{border-top:1px solid var(--fg)}
:root[data-theme="broadsheet"] .subnav a{color:var(--fg);font-weight:800;text-transform:uppercase;font-stretch:110%}
:root[data-theme="broadsheet"] .subnav a.on{background:var(--fg);color:var(--bg);border-bottom-color:var(--fg)}
:root[data-theme="broadsheet"] .subnav a.on .n{color:var(--bg)}
:root[data-theme="broadsheet"] .chip{background:#F7F7F3;border:1px solid var(--fg)}
:root[data-theme="broadsheet"] .group-h span:first-child{font:900 1.1rem var(--f-display);font-stretch:125%;color:var(--fg)}
:root[data-theme="broadsheet"] .banner{border:2px solid var(--fg);background:var(--accent-fill);color:var(--fg)}
:root[data-theme="broadsheet"] .banner.info{background:transparent}
:root[data-theme="broadsheet"] .me-menu{border:2px solid var(--fg);background:var(--bg)}
:root[data-theme="broadsheet"] .toast{background:var(--fg);color:var(--bg)}

/* ================= Constellation: the raid as a night sky ================= */
:root[data-theme="constellation"]{
  color-scheme:dark;
  --bg:#050A18;--bg-deep:#03060F;--surface:#0C1430;--surface-2:#16224A;--glass:rgba(5,10,24,.82);
  --line:rgba(160,190,255,.14);--line-strong:rgba(160,190,255,.26);--fg:#E8EEFF;--muted:#B7C3E2;--faint:#8E9BBF;
  --gold:#FFD27A;--gold-soft:rgba(255,210,122,.14);--blue:#9FD3FF;--blue-soft:rgba(159,211,255,.14);
  --ink:#03060F;--on-accent:#050A18;--sunk-rgb:2 5 14;--hi-rgb:200 215 255;
  --ok:#8FE3B0;--warn:#FFD27A;--late:#9FD3FF;--bad:#FF8A9A;--tester:#c9a8ff;
  --f-display:"Syne",system-ui,sans-serif;--f-body:"Instrument Sans",system-ui,sans-serif;--f-mono:"Instrument Sans",system-ui,sans-serif;
  --r:24px;--shadow:none;
}
:root[data-theme="constellation"] body{background-color:var(--bg);
  background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.5) 0 1px,transparent 1.5px),radial-gradient(circle at 78% 8%,rgba(255,255,255,.4) 0 1px,transparent 1.5px),radial-gradient(circle at 64% 42%,rgba(255,255,255,.3) 0 1px,transparent 1.5px),radial-gradient(circle at 30% 70%,rgba(255,255,255,.35) 0 1px,transparent 1.5px),radial-gradient(circle at 90% 80%,rgba(255,255,255,.4) 0 1px,transparent 1.5px);
  background-size:420px 380px;background-attachment:fixed}
:root[data-theme="constellation"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(circle at 40% 30%,rgba(255,236,190,.9) 0 1px,transparent 2px),radial-gradient(circle at 75% 60%,rgba(190,220,255,.8) 0 1px,transparent 2px),radial-gradient(circle at 20% 85%,rgba(255,255,255,.8) 0 1px,transparent 2px);
  background-size:610px 530px;animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
:root[data-theme="constellation"] h1,:root[data-theme="constellation"] h2,:root[data-theme="constellation"] .page-title,:root[data-theme="constellation"] .land-h{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em}
:root[data-theme="constellation"] h1.page-title{font-size:clamp(2.4rem,5.5vw,3.8rem);line-height:.95}
:root[data-theme="constellation"] h3{font-family:var(--f-display);font-weight:700}
:root[data-theme="constellation"] .eyebrow{color:var(--faint);letter-spacing:.12em}
:root[data-theme="constellation"] .brand{font-family:var(--f-display);font-weight:800;text-transform:lowercase;letter-spacing:.02em}
:root[data-theme="constellation"] .brand svg{display:none}
:root[data-theme="constellation"] .brand::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);flex:none}
:root[data-theme="constellation"] .nav,:root[data-theme="constellation"] .tabs,:root[data-theme="constellation"] .seg{border-radius:999px;background:rgba(160,190,255,.05)}
:root[data-theme="constellation"] .nav a,:root[data-theme="constellation"] .tabs button,:root[data-theme="constellation"] .tabs a,:root[data-theme="constellation"] .seg button,:root[data-theme="constellation"] .btn,:root[data-theme="constellation"] .subnav a{border-radius:999px}
:root[data-theme="constellation"] .nav a.on,:root[data-theme="constellation"] .tabs button.on,:root[data-theme="constellation"] .seg button.on{background:rgba(160,190,255,.14);box-shadow:none}
:root[data-theme="constellation"] .card,:root[data-theme="constellation"] .count,:root[data-theme="constellation"] .group,:root[data-theme="constellation"] .table-box,:root[data-theme="constellation"] .stat,:root[data-theme="constellation"] .frame{background:rgba(160,190,255,.05);border:1px solid var(--line);border-radius:24px;box-shadow:none}
:root[data-theme="constellation"] .btn{background:transparent;border-color:var(--line-strong)}
:root[data-theme="constellation"] .btn-gold{background:var(--fg);border-color:var(--fg);color:var(--on-accent)}
:root[data-theme="constellation"] .btn-discord{background:transparent;border-color:#8b94ff;color:#c7ccff}
:root[data-theme="constellation"] .raid-hero{background:radial-gradient(500px 220px at 85% 10%,rgba(255,210,122,.12),transparent 70%),rgba(160,190,255,.04);border:1px solid var(--line);border-radius:28px;box-shadow:none}
:root[data-theme="constellation"] .raid-hero h1{font-size:clamp(1.9rem,5.5vw,4rem);line-height:.95}
:root[data-theme="constellation"] .raid-hero .wm{opacity:.08;color:var(--blue)}
:root[data-theme="constellation"] .medal{border-radius:50%;border:0;background:none;box-shadow:0 0 40px rgba(255,210,122,.35)}
:root[data-theme="constellation"] .wi.medal-i,:root[data-theme="constellation"] .medal .wi{border-radius:50%}
:root[data-theme="constellation"] .cbadge,:root[data-theme="constellation"] .cbadge.lg{border-radius:50%}
:root[data-theme="constellation"] .cbadge .wi{border-radius:50%}
:root[data-theme="constellation"] .subnav a.on{color:var(--fg);background:rgba(160,190,255,.12);border-bottom-color:transparent}
:root[data-theme="constellation"] .chip{border-radius:999px;background:rgba(160,190,255,.06)}
:root[data-theme="constellation"] .chip .wi{border-radius:50%}
:root[data-theme="constellation"] .slot{border-radius:999px}
:root[data-theme="constellation"] input,:root[data-theme="constellation"] select,:root[data-theme="constellation"] textarea{background:rgba(3,6,15,.6)}
:root[data-theme="constellation"] .me-menu{background:#0C1430;border-radius:18px}

/* The raid map (sign-ups tab, Constellation theme only). Rings turn like a solar system: inner orbits faster. */
.starmap{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:20px;align-items:center;margin-bottom:20px;overflow:hidden}
@media (max-width:760px){.starmap{grid-template-columns:minmax(0,1fr)}}
.sky{position:relative;width:100%;max-width:580px;aspect-ratio:1;margin:0 auto;container-type:size}
.sky .sun{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;box-shadow:0 0 50px 8px rgba(255,210,122,.4);z-index:1}
.sky .sun .wi{display:block;border-radius:50%;width:clamp(36px,12cqw,64px);height:clamp(36px,12cqw,64px);background-size:auto}
.orbit{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2cqw);height:calc(var(--r) * 2cqw);translate:-50% -50%;border-radius:50%;border:1px solid rgba(160,190,255,.16);animation:orbit var(--t) linear infinite}
.orbit.out{border-style:dashed;opacity:.55}
.orbit .star{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(calc(var(--r) * 1cqw)) rotate(calc(-1 * var(--a)))}
.orbit .up{position:absolute;left:-40px;top:-11px;width:80px;display:flex;flex-direction:column;align-items:center;gap:3px;transform-origin:40px 11px;animation:orbit var(--t) linear infinite reverse}
.orbit .up .wi{border-radius:50%;box-shadow:0 0 0 2px var(--c),0 0 14px var(--c)}
.orbit .up > b{font:500 .68rem var(--f-body);color:var(--muted);white-space:nowrap;text-shadow:0 0 6px #050A18}
.orbit.dps .up > b,.orbit.out .up > b{font-size:.6rem}
@keyframes orbit{to{transform:rotate(360deg)}}
.starmap .legend{display:flex;flex-direction:column;gap:8px}
@media (max-width:520px){.orbit .up > b{display:none}}
.orbit.crowd .up > b{display:none}
/* Hover cards: the rings ignore the pointer (outer rings would cover inner stars); only the stars take it. */
.orbit{pointer-events:none}
.orbit .up{pointer-events:auto;cursor:default}
.sky:hover .orbit,.sky:hover .orbit .up{animation-play-state:paused}
.orbit .star:hover{z-index:5}
.orbit:has(.up:hover){z-index:10}
.st-tip{position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 0;display:none;flex-direction:column;gap:2px;min-width:150px;padding:8px 10px;border-radius:8px;
  background:#0B1226;border:1px solid var(--line-strong);box-shadow:0 8px 24px rgba(0,0,0,.5);font:.78rem var(--f-body);color:var(--fg);text-align:left;white-space:nowrap;z-index:6}
.st-tip .faint{display:flex;align-items:center;gap:5px}
.orbit .up:hover .st-tip{display:flex}
@media (prefers-reduced-motion:reduce){.orbit,.orbit .up{animation-duration:calc(var(--t) * 4)}}

/* Tester buttons keep their purple in every theme */

/* ---------- guild bank: bag slots and game-style tooltips ---------- */
.bank-bag{display:flex;flex-direction:column;gap:12px}
.bslots{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:6px;max-height:min(70vh,720px);overflow-y:auto;padding:4px;scrollbar-gutter:stable}
.bslot{position:relative;width:52px;height:52px;padding:0;display:grid;place-items:center;cursor:pointer;font:inherit;
  background:linear-gradient(145deg,#1b1b1f,#0a0a0c);border:2px solid #3b3b42;border-radius:6px;box-shadow:inset 0 0 6px #000}
.bslot .wi{box-shadow:none;border-radius:3px}
.bslot.empty{cursor:default;opacity:.55}
.bslot.q-uncommon{border-color:#1eff00}.bslot.q-rare{border-color:#0070dd}.bslot.q-epic{border-color:#a335ee}.bslot.q-legendary{border-color:#ff8000}.bslot.q-poor{border-color:#5a5a5a}
.bslot:not(.empty):hover,.bslot:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.bslot.on{outline:2px solid var(--gold);outline-offset:2px;box-shadow:inset 0 0 6px #000,0 0 14px color-mix(in srgb,var(--gold) 60%,transparent)}
.bslot.big{width:60px;height:60px;cursor:default;flex:none}
.bslot .qty{position:absolute;right:3px;bottom:1px;font:700 .78rem/1 var(--f-body);color:#fff;text-shadow:0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000}
.wtip{position:absolute;left:calc(100% + 8px);top:-4px;z-index:30;min-width:200px;max-width:260px;display:none;flex-direction:column;gap:2px;text-align:left;
  padding:8px 10px;background:rgba(8,10,26,.96);border:1px solid #9a9aa8;border-radius:5px;box-shadow:0 8px 24px rgba(0,0,0,.6);
  font:400 .8rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;letter-spacing:0;text-transform:none;white-space:normal;pointer-events:none}
.wtip b{font-size:.92rem;font-weight:600}
.wtip .tfaint{color:#9d9d9d}
.wtip em{font-style:normal;color:#ffd100;margin-top:4px}
.bslot:hover .wtip,.bslot:focus-visible .wtip{display:flex}
@media (max-width:600px){.wtip{left:50%!important;right:auto!important;top:calc(100% + 6px);translate:-50% 0}}
.bank-ask .x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:1.2rem;padding:2px 6px}
.bank-ask .x:hover{color:var(--fg)}

/* Backgrounds scroll with the page. background-attachment:fixed made the browser repaint the whole page on
   every scroll step, which is what made scrolling stutter. */
body{background-attachment:scroll!important}
:root[data-theme="neanderthal"] .btn.btn-danger{border-color:var(--bad);color:var(--bad)}

/* v1.3: the handwritten font stays on headings; small print uses the body font so it can be read. */
:root[data-theme="neanderthal"] .foot{font-family:var(--f-body);font-size:.8rem}
:root[data-theme="neanderthal"] .count .eyebrow,:root[data-theme="neanderthal"] .stat .eyebrow{font-size:.9rem}
:root[data-theme="neanderthal"] .bottom-nav{border-top:2px dashed var(--line-strong)}
:root[data-theme="neanderthal"] .quick button{border-radius:var(--pebble)}
/* Brainrot button: an accent square in Command, a scrawled sign in Neanderthal. */

:root[data-theme="neanderthal"] .brainrot-btn{border-style:dashed;font-family:var(--f-mark);text-transform:lowercase;letter-spacing:0}
/* Bank list view: icon, name and count in rows, for phones. */
.bslot .bn{display:none}
.bslots.as-list{grid-template-columns:1fr;gap:4px}
.bslots.as-list .bslot{width:100%;height:auto;min-height:44px;display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;text-align:left;background:var(--surface-2,var(--surface));border-radius:8px}
.bslots.as-list .bslot .wi{width:32px;height:32px;flex:none}
.bslots.as-list .bslot .bn{display:block;flex:1;min-width:0;font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.bslots.as-list .bslot .qty{position:static;color:var(--muted);text-shadow:none;font-size:.85rem}