/* ==========================================================================
   World skins — every world wears its own UI outside of battle.
   app.js sets body[data-world] (the room's world; '' on the home page) and body[data-screen].
   Layer 1 turns the shared components into design tokens; each world below only sets tokens
   plus a few signature touches. The battle HUD is left alone (it has its own tuned layout).
   ========================================================================== */

body[data-world]:not([data-world=""]):not([data-screen=battle]) {
  font-family: var(--font);
  & #app { background: var(--backdrop, var(--bg)); }
  & .camp { background: transparent; }
  & .topbar { background: var(--topbar-bg, var(--bg2)); border-bottom: var(--topbar-line, 1px solid var(--line)); box-shadow: var(--topbar-shadow, none); }
  & .topbar .brand, & h1, & h2, & h3 {
    font-family: var(--title); color: var(--title-color, inherit); text-transform: var(--title-case, none);
    letter-spacing: var(--title-ls, .02em); font-weight: var(--title-weight, 700);
  }
  & .topbar .brand, & h1, & h2 { text-shadow: var(--title-shadow, none); }
  & .topbar .brand { color: var(--brand-color, var(--gold)); font-size: var(--brand-size, 18px); }
  & .panel {
    background: var(--panel-bg, var(--panel)); border: var(--panel-border, 1px solid var(--line));
    border-radius: var(--radius); box-shadow: var(--panel-shadow, none);
    outline: var(--panel-outline, none); outline-offset: var(--panel-outline-offset, 0);
  }
  & .wm-wrap { background: var(--map-frame, #3a2a18); border-color: var(--map-frame-line, #5a4020); }
  & .wm-view { background: var(--map-margin, #a88a58); }
  & .btn {
    background: var(--btn-bg); border: 1px solid var(--btn-line, var(--line2)); border-radius: var(--btn-r, 6px);
    color: var(--btn-text, var(--text)); font-family: var(--btn-font, inherit); text-transform: var(--btn-case, none);
    letter-spacing: var(--btn-ls, normal); box-shadow: var(--btn-shadow, none); clip-path: var(--btn-clip, none);
  }
  & .btn:hover:not(:disabled) { border-color: var(--accent, var(--gold)); background: var(--btn-bg-h, var(--btn-bg)); }
  & .btn:active:not(:disabled) { box-shadow: var(--btn-shadow-active, var(--btn-shadow, none)); }
  & .btn.primary { background: var(--pri-bg); border-color: var(--pri-line); color: var(--pri-text); box-shadow: var(--pri-shadow, var(--btn-shadow, none)); text-shadow: var(--pri-text-shadow, none); }
  & .btn.primary:hover:not(:disabled) { background: var(--pri-bg-h, var(--pri-bg)); border-color: var(--pri-line); }
  & .btn.on { background: var(--on-bg); border-color: var(--accent, var(--gold)); color: var(--on-text, var(--text)); }
  & .btn.danger { border-color: var(--danger-line, #8a3a32); color: var(--danger-text, #ffb4aa); }
  & .btn.ghost { background: transparent; box-shadow: none; }
  & input[type=text], & input[type=number], & input[type=search], & select, & textarea { background: var(--field); border-color: var(--field-line, var(--line2)); border-radius: var(--field-r, 6px); color: var(--text); }
  & .code { background: var(--field); font-family: var(--title); }
  & .xpbar, & .hpline { background: var(--field); }
  & .opt, & .theme, & .rc-row { background: var(--card); border-radius: var(--card-r, 6px); }
  & .opt.on, & .theme.on, & .rc-row.on { background: var(--card-on); border-color: var(--accent, var(--gold)); box-shadow: inset 0 0 0 1px var(--accent2, var(--gold2)); }
  & .rc-row img { background: var(--portrait-bg, radial-gradient(circle at 50% 35%, #3a3026, #15120f)); }
  & .tag { font-family: var(--btn-font, inherit); }
  & .tab { font-family: var(--btn-font, inherit); text-transform: var(--btn-case, none); letter-spacing: var(--btn-ls, normal); }
  & .tab.on { color: var(--accent, var(--gold)); border-bottom-color: var(--accent, var(--gold)); }
  & .modal-bg { background: var(--scrim, rgba(0, 0, 0, .65)); }
  & .modal { background: var(--modal-bg, var(--panel-bg, var(--panel))); }
  & .wm-where.adj, & .errors { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--panel)); }
  & h3.needs { color: var(--accent); }
  & .errors { color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
  & .wm-where.far, & .wm-status.todo { background: var(--card); border-color: var(--line); }
  & .challenge input[type=range] { accent-color: var(--accent, #c9a24a); }
  & ::selection { background: var(--accent); color: var(--bg); }
  & * { scrollbar-color: var(--line2) transparent; }
}

/* --------------------------------------------------------------------------
   🐉 Dice & Dominion — gilded tome: warm leather, gold leaf, candlelight
   -------------------------------------------------------------------------- */
body[data-world=dnd]:not([data-screen=battle]) {
  --accent: #e0b354; --accent2: #b8862b;
  --backdrop: radial-gradient(ellipse at 50% -10%, rgba(224, 179, 84, .10), transparent 55%), radial-gradient(ellipse at 50% 120%, rgba(120, 60, 20, .18), transparent 60%), #12100e;
  --topbar-bg: linear-gradient(#211c17, #18140f);
  --topbar-line: 1px solid #4a3d2a;
  --topbar-shadow: inset 0 -1px 0 rgba(224, 179, 84, .12);
  --panel-bg: linear-gradient(180deg, #25201b, #1f1b17);
  --panel-shadow: inset 0 1px 0 rgba(224, 179, 84, .08), 0 4px 14px rgba(0, 0, 0, .25);
  --btn-bg: linear-gradient(#3a3229, #2c261f);
  --pri-bg: linear-gradient(#c99a3e, #8f6620); --pri-bg-h: linear-gradient(#ddb04f, #a07428); --pri-line: #e7c06a; --pri-text: #1b1308;
  --on-bg: linear-gradient(#5a4a2a, #3c311c);
  --field: #15120f; --card: #1a1714; --card-on: #2e2618;
  --title-color: #f0dcae;
}

/* --------------------------------------------------------------------------
   🪖 Mud & Iron — field dispatch: olive canvas, khaki paper, stencil and typewriter
   -------------------------------------------------------------------------- */
body[data-world=ww1]:not([data-screen=battle]) {
  --map-margin: #2e2f1f;
  --bg: #16170f; --bg2: #1e2016; --panel: #24261b; --panel2: #2c2f22;
  --line: #44472f; --line2: #5f6342; --text: #e6e2cc; --muted: #aaa68a; --dim: #7f7c65;
  --gold: #d8c27a; --gold2: #9a8a48; --accent: #d8c27a; --accent2: #8f8040;
  --radius: 2px;
  --font: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --title: 'Stardos Stencil', 'Impact', sans-serif; --title-case: uppercase; --title-ls: .08em; --title-color: #d8cf9a;
  --brand-size: 21px;
  --backdrop:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 30% 0%, #2a2c1c, #121309 70%);
  --topbar-bg: linear-gradient(#2b2d1e, #202216); --topbar-line: 3px double #5f6342;
  --panel-bg: linear-gradient(180deg, #282a1e, #222418);
  --panel-border: 1px solid #55593b;
  --panel-shadow: inset 0 0 0 3px #24261b, inset 0 0 0 4px #3d402a, 2px 3px 0 rgba(0, 0, 0, .35);
  --btn-bg: linear-gradient(#3a3d29, #2d2f1f); --btn-line: #63673f; --btn-r: 1px;
  --btn-font: 'Special Elite', 'Courier New', monospace; --btn-ls: .02em;
  --btn-shadow: 1px 2px 0 rgba(0, 0, 0, .4);
  --pri-bg: linear-gradient(#9c8c4c, #6b5f2c); --pri-bg-h: linear-gradient(#ae9d58, #7a6c34); --pri-line: #cbb877; --pri-text: #faf4d8;
  --pri-text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  --on-bg: linear-gradient(#4f5232, #3a3c25);
  --danger-line: #8c2f22; --danger-text: #e8a090;
  --field: #18190f; --field-line: #50543a; --field-r: 1px;
  --card: #1f2117; --card-on: #343621; --card-r: 2px;
  --portrait-bg: radial-gradient(circle at 50% 35%, #3e4028, #16170e);
  --map-frame: #3a3a26; --map-frame-line: #5f6342;
  --scrim: rgba(12, 12, 6, .72);
  & .topbar .brand::after { content: ' · FIELD ORDERS'; font-family: 'Special Elite', monospace; font-size: 10px; color: #8f8a66; letter-spacing: .14em; vertical-align: middle; }
  & .code { font-family: 'Special Elite', monospace; border-style: dashed; }
  & .modal-head h2::before { content: '▣ '; color: #9a8a48; }
}

/* --------------------------------------------------------------------------
   🧸 Toybox Tactics — night-light bedroom: chunky toy-block panels, candy buttons
   -------------------------------------------------------------------------- */
body[data-world=toybox]:not([data-screen=battle]) {
  --map-margin: #232766;
  --bg: #171a42; --bg2: #20245a; --panel: #262b6a; --panel2: #2f3580;
  --line: #3e46a6; --line2: #5560c8; --text: #f6f3ff; --muted: #c4c2ee; --dim: #9592c8;
  --gold: #ffd23f; --gold2: #f29e1f; --accent: #ffd23f; --accent2: #ff6fa8;
  --radius: 18px;
  --font: 'Nunito', system-ui, sans-serif;
  --title: 'Luckiest Guy', 'Comic Sans MS', cursive; --title-ls: .04em; --title-color: #ffd23f; --title-weight: 400;
  --title-shadow: 2px 2px 0 #e8406b;
  --brand-size: 22px;
  --backdrop:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .55) 0 1.2px, transparent 2px) 0 0 / 140px 120px,
    radial-gradient(circle at 70% 60%, rgba(255, 240, 180, .45) 0 1px, transparent 1.8px) 0 0 / 90px 110px,
    radial-gradient(ellipse at 85% -5%, rgba(255, 220, 120, .22), transparent 40%),
    linear-gradient(#141739, #1d2152 70%, #2a2050);
  --topbar-bg: linear-gradient(#2a2f78, #222664); --topbar-line: 4px solid #151842;
  --panel-bg: linear-gradient(180deg, #2b3176, #252a68);
  --panel-border: 3px solid #4a54c0;
  --panel-shadow: 0 6px 0 #12153d, 0 10px 22px rgba(0, 0, 0, .35);
  --btn-bg: linear-gradient(#4a52c4, #3a42a8); --btn-bg-h: linear-gradient(#5862d6, #444cb8); --btn-line: #6b75e0; --btn-r: 999px;
  --btn-font: 'Nunito', sans-serif;
  --btn-shadow: 0 4px 0 #1b1f5a; --btn-shadow-active: 0 1px 0 #1b1f5a;
  --pri-bg: linear-gradient(#ffe066, #ffc21a); --pri-bg-h: linear-gradient(#fff08a, #ffd23f); --pri-line: #fff3b0; --pri-text: #5a2c00;
  --pri-shadow: 0 4px 0 #c27a00;
  --on-bg: linear-gradient(#ff7fb3, #e8467f); --on-text: #fff;
  --danger-line: #ff5a6e; --danger-text: #ffd0d6;
  --field: #1a1e52; --field-line: #4a54c0; --field-r: 12px;
  --card: #222760; --card-on: #3a2f78; --card-r: 14px;
  --portrait-bg: radial-gradient(circle at 50% 35%, #5a62d8, #1a1e52);
  --map-frame: #3b2a6b; --map-frame-line: #ffd23f;
  --scrim: rgba(10, 10, 40, .7);
  & .btn { font-weight: 800; }
  & .btn:active:not(:disabled) { transform: translateY(3px); }
  & .tab.on { border-bottom-width: 4px; border-radius: 6px 6px 0 0; }
  & .tag { border-radius: 99px; }
  & .hero-card, & .opt, & .rc-row { transition: transform .12s; }
  & .rc-row:hover:not(.disabled), & .opt:hover { transform: rotate(-.6deg) translateY(-1px); }
  & .topbar .brand::before { content: '★ '; color: #ff6fa8; }
}

/* --------------------------------------------------------------------------
   🧟 Last Light — emergency shelter: concrete, sheet metal, hazard tape
   -------------------------------------------------------------------------- */
body[data-world=zombie]:not([data-screen=battle]) {
  --bg: #121415; --bg2: #191c1d; --panel: #1d2022; --panel2: #24282a;
  --line: #34393c; --line2: #4a5054; --text: #e1e5e6; --muted: #9da5a8; --dim: #6f777a;
  --gold: #f0bf2a; --gold2: #b38a12; --accent: #f0bf2a; --accent2: #d6402e;
  --red: #e0442f;
  --radius: 2px;
  --font: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --title: 'Bebas Neue', 'Impact', sans-serif; --title-case: uppercase; --title-ls: .06em; --title-color: #eef1f2; --title-weight: 400;
  --brand-color: #f0bf2a; --brand-size: 26px;
  --backdrop:
    radial-gradient(ellipse at 50% -20%, rgba(240, 191, 42, .07), transparent 50%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 20% 80%, rgba(90, 20, 14, .18), transparent 40%),
    #101213;
  --topbar-bg: repeating-linear-gradient(-45deg, #f0bf2a 0 12px, #141414 12px 24px) bottom / 100% 5px no-repeat, linear-gradient(#202426, #181b1c);
  --topbar-line: none;
  --panel-bg: repeating-linear-gradient(-45deg, #e8b923 0 9px, #161616 9px 18px) top left / 100% 4px no-repeat, linear-gradient(180deg, #212527, #1b1e20);
  --panel-border: 1px solid #383e41;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 3px 10px rgba(0, 0, 0, .4);
  --btn-bg: linear-gradient(#30363a, #24282b); --btn-line: #4c5357; --btn-r: 2px;
  --btn-font: 'Roboto Condensed', sans-serif; --btn-case: uppercase; --btn-ls: .05em;
  --pri-bg: linear-gradient(#f5c93a, #d9a614); --pri-bg-h: linear-gradient(#ffd75a, #e6b324); --pri-line: #ffe07a; --pri-text: #141414;
  --on-bg: linear-gradient(#4a3a14, #2f2610);
  --danger-line: #b8321f; --danger-text: #ff9a88;
  --field: #0f1112; --field-line: #3c4246; --field-r: 2px;
  --card: #181b1d; --card-on: #2a2614; --card-r: 2px;
  --portrait-bg: radial-gradient(circle at 50% 35%, #3a4044, #0f1112);
  --scrim: rgba(0, 0, 0, .78);
  & .btn.danger { background: linear-gradient(#4a1c16, #2e1210); }
  & h2, & h3 { font-size: 1.25em; }
  & .topbar .brand::before { content: '◉ '; color: #e0442f; font-size: 14px; vertical-align: middle; animation: wsk-rec 1.6s steps(2) infinite; }
}
@keyframes wsk-rec { 50% { opacity: .15; } }

/* --------------------------------------------------------------------------
   🎲 Ember Road — campfire at the roadside: charcoal, ash and glowing embers
   -------------------------------------------------------------------------- */
body[data-world=rogue]:not([data-screen=battle]) {
  --bg: #120d0b; --bg2: #1a1310; --panel: #1e1613; --panel2: #271d18;
  --line: #3e2a20; --line2: #5c3c2a; --text: #f3e6dc; --muted: #b9a08e; --dim: #866e5e;
  --gold: #ffa94d; --gold2: #d0642a; --accent: #ff9a3c; --accent2: #c2501e;
  --radius: 8px;
  --font: 'Alegreya Sans', system-ui, sans-serif;
  --title: 'IM Fell English SC', Georgia, serif; --title-color: #ffc27a; --title-ls: .03em;
  --title-shadow: 0 0 14px rgba(255, 130, 40, .35);
  --brand-size: 21px;
  --backdrop:
    radial-gradient(ellipse at 50% 115%, rgba(255, 110, 30, .28), transparent 55%),
    radial-gradient(circle at 18% 30%, rgba(255, 160, 60, .05), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(255, 120, 40, .04), transparent 30%),
    #0e0a09;
  --topbar-bg: linear-gradient(#1f1612, #160f0c); --topbar-line: 1px solid #5a3420;
  --topbar-shadow: 0 1px 12px rgba(255, 110, 30, .12);
  --panel-bg: radial-gradient(ellipse at 50% 120%, rgba(255, 110, 30, .10), transparent 60%), linear-gradient(180deg, #221915, #1a1310);
  --panel-border: 1px solid #4a2e20;
  --panel-shadow: inset 0 -1px 0 rgba(255, 140, 60, .18), 0 6px 18px rgba(0, 0, 0, .4);
  --btn-bg: linear-gradient(#36261e, #281c16); --btn-line: #5e3e2c; --btn-r: 7px;
  --pri-bg: linear-gradient(#ff8a3a, #c2421a); --pri-bg-h: linear-gradient(#ffa052, #d4521f); --pri-line: #ffbe7a; --pri-text: #fff4e6;
  --pri-shadow: 0 0 16px rgba(255, 110, 30, .35); --pri-text-shadow: 0 1px 1px rgba(80, 20, 0, .6);
  --on-bg: linear-gradient(#5a2e18, #3a1e10);
  --field: #0f0b09; --field-line: #4a3022;
  --card: #1a1310; --card-on: #33201a;
  --portrait-bg: radial-gradient(circle at 50% 70%, #5a2a14, #0f0b09);
  --scrim: rgba(8, 4, 2, .72);
  & .btn.primary { animation: wsk-ember 2.8s ease-in-out infinite; }
}
@keyframes wsk-ember { 50% { box-shadow: 0 0 26px rgba(255, 120, 40, .55); } }

/* --------------------------------------------------------------------------
   🔮 Sixfold Arcana — "Hesperine", a 16-bit console RPG: pixel type, bordered blue
   command windows, a starfield. The full skin is client/arcana.css (loaded by
   client/js/arcana_skin.js); these are the shared variables it builds on.
   -------------------------------------------------------------------------- */
body[data-world=arcana]:not([data-screen=battle]) {
  --bg: #070a2c; --bg2: #0b1048; --panel: #1c2789; --panel2: #24309e;
  --line: #a9b0ff; --line2: #f1eeff; --text: #ffffff; --muted: #c3caff; --dim: #8e97da;
  --gold: #ffd84a; --gold2: #f0a81e; --accent: #7ff0ff; --accent2: #3447c6;
  --radius: 6px;
  --font: 'M PLUS Rounded 1c', 'Trebuchet MS', system-ui, sans-serif;
  --title: 'Pixelify Sans', monospace; --title-color: #ffd84a; --title-ls: .02em;
  --title-shadow: 2px 2px 0 #070926;
  --brand-size: 12px;
  --backdrop:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .95) 1.4px, transparent 1.6px) 0 0 / 173px 157px,
    radial-gradient(circle at 2px 2px, rgba(190, 210, 255, .75) 1.2px, transparent 1.4px) 61px 83px / 131px 199px,
    radial-gradient(circle at 3px 3px, rgba(255, 233, 168, .9) 2px, transparent 2.3px) 97px 41px / 311px 263px,
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(150, 60, 200, .35), transparent 70%),
    linear-gradient(180deg, #060927 0%, #0d1550 60%, #1d1a5a 100%);
  --topbar-bg: #070926; --topbar-line: 3px solid #f1eeff;
  --panel-bg: linear-gradient(180deg, #3447c6, #1c2789 55%, #101758);
  --panel-border: 3px solid #f1eeff;
  --panel-shadow: 0 0 0 3px #070926, 5px 5px 0 3px rgba(0, 0, 0, .45);
  --btn-bg: linear-gradient(#4155d6, #222e9a); --btn-line: #f1eeff; --btn-r: 4px;
  --pri-bg: linear-gradient(#ffe979, #f0b22a); --pri-bg-h: linear-gradient(#fff09a, #f5bf3a); --pri-line: #fff8d6; --pri-text: #2a1500;
  --pri-shadow: 0 0 0 2px #070926;
  --on-bg: linear-gradient(#ffe979, #f0b22a);
  --field: #070926; --field-line: #a9b0ff; --field-r: 3px;
  --card: #101758; --card-on: #3447c6; --card-r: 4px;
  --portrait-bg: radial-gradient(circle at 50% 35%, #3447c6, #070926);
  --scrim: rgba(3, 4, 22, .75);
}

/* --------------------------------------------------------------------------
   💎 Crystalbound — shard-light: ice glass, cut-corner facets, prismatic edges
   -------------------------------------------------------------------------- */
body[data-world=crystal]:not([data-screen=battle]) {
  --map-margin: #0c1a28;
  --bg: #08121d; --bg2: #0d1a28; --panel: #10202f; --panel2: #15293b;
  --line: #22435e; --line2: #31618a; --text: #e6f6ff; --muted: #9cc0d6; --dim: #6c8fa6;
  --gold: #7fe3ff; --gold2: #2ea6d8; --accent: #7fe3ff; --accent2: #2ea6d8;
  --radius: 3px;
  --font: 'Exo 2', system-ui, sans-serif;
  --title: 'Exo 2', sans-serif; --title-case: uppercase; --title-ls: .1em; --title-color: #bff1ff; --title-weight: 800;
  --title-shadow: 0 0 10px rgba(80, 210, 255, .35);
  --brand-size: 19px;
  --chamfer: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  --backdrop:
    linear-gradient(115deg, transparent 0 38%, rgba(120, 220, 255, .05) 38% 40%, transparent 40% 100%),
    linear-gradient(65deg, transparent 0 62%, rgba(180, 140, 255, .05) 62% 63.5%, transparent 63.5% 100%),
    linear-gradient(160deg, transparent 0 20%, rgba(120, 255, 220, .04) 20% 21%, transparent 21% 100%),
    radial-gradient(ellipse at 50% -10%, rgba(80, 200, 255, .16), transparent 55%),
    #07101a;
  --topbar-bg: linear-gradient(90deg, rgba(127, 227, 255, .10), transparent 30%, transparent 70%, rgba(180, 140, 255, .10)), #0b1724;
  --topbar-line: 1px solid #2a5878;
  --panel-bg:
    linear-gradient(135deg, rgba(127, 227, 255, .14) 0, transparent 22%),
    linear-gradient(170deg, rgba(36, 74, 108, .55), rgba(10, 22, 34, .92));
  --panel-border: 1px solid #2a5878;
  --panel-shadow: inset 0 1px 0 rgba(190, 240, 255, .12), 0 6px 20px rgba(0, 0, 0, .35);
  --btn-bg: linear-gradient(#1b3a54, #12283b); --btn-line: #3a7aa6; --btn-r: 0;
  --btn-ls: .03em; --btn-clip: var(--chamfer);
  --pri-bg: linear-gradient(135deg, #a8f0ff, #42b8e8 55%, #8a7cff); --pri-bg-h: linear-gradient(135deg, #c4f6ff, #5ac8f2 55%, #9e92ff); --pri-line: #d4f8ff; --pri-text: #04131e;
  --on-bg: linear-gradient(#21557a, #173c58);
  --field: #07111b; --field-line: #2a5878; --field-r: 0;
  --card: #0c1b29; --card-on: #163650; --card-r: 0;
  --portrait-bg: radial-gradient(circle at 50% 35%, #2a6890, #07111b);
  --map-frame: #12304a; --map-frame-line: #3a7aa6;
  --scrim: rgba(2, 8, 14, .72);
  & .btn { font-weight: 700; }
  & .opt, & .rc-row, & .theme, & .code { clip-path: var(--chamfer); }
}

/* --------------------------------------------------------------------------
   🧶 Loomlight — the weaver's hall: plum linen, rose-gold thread, stitched seams
   -------------------------------------------------------------------------- */
body[data-world=weave]:not([data-screen=battle]) {
  --map-margin: #2a1a2f;
  --bg: #170f1b; --bg2: #1f1424; --panel: #25182b; --panel2: #2e1f36;
  --line: #48304f; --line2: #66456f; --text: #f8ecf4; --muted: #c9adc0; --dim: #977b8f;
  --gold: #f4b6d2; --gold2: #c26a98; --accent: #f29cc6; --accent2: #b35a8a;
  --radius: 14px;
  --font: 'Quicksand', system-ui, sans-serif;
  --title: 'Cormorant Garamond', Georgia, serif; --title-color: #ffd0e6; --title-ls: .01em;
  --brand-size: 24px;
  --backdrop:
    repeating-linear-gradient(45deg, rgba(255, 200, 230, .025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 200, 230, .025) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 20% 0%, rgba(242, 156, 198, .14), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(140, 120, 255, .12), transparent 50%),
    #140c18;
  --topbar-bg: linear-gradient(#24172a, #1b1120); --topbar-line: 1px solid #5a3a62;
  --panel-bg: linear-gradient(180deg, #2a1c31, #22162a);
  --panel-border: 1px solid #4e3456;
  --panel-outline: 1px dashed rgba(244, 182, 210, .30); --panel-outline-offset: -6px;
  --panel-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  --btn-bg: linear-gradient(#3a2742, #2c1d33); --btn-line: #6a4874; --btn-r: 12px;
  --pri-bg: linear-gradient(#f4a6c8, #c25a8c); --pri-bg-h: linear-gradient(#ffbad6, #d06a9a); --pri-line: #ffd6e8; --pri-text: #2a0a1a;
  --on-bg: linear-gradient(#5a2e52, #42203c);
  --field: #150d19; --field-line: #573b60; --field-r: 10px;
  --card: #1e1424; --card-on: #3a2140; --card-r: 10px;
  --portrait-bg: radial-gradient(circle at 50% 35%, #5a3a66, #150d19);
  --map-frame: #3a2440; --map-frame-line: #8a5a8a;
  --scrim: rgba(14, 6, 16, .7);
  & h1, & h2, & .topbar .brand { font-style: italic; }
  & h2 { font-size: 22px; }
  & h3 { font-size: 18px; }
  & .opt.on, & .rc-row.on, & .theme.on { outline: 1px dashed rgba(244, 182, 210, .55); outline-offset: -4px; }
  & .topbar .brand::after { content: ' ~'; color: #c26a98; }
}

/* the home page previews the world you've picked: tint its world card a little more vividly */
body[data-screen=home] .world-card.on { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   🕯 Pallid Menagerie — the asylum ledger: lamp-black, tallow and a sickly
   green glow; foxed paper, ruled lines, a film of grain and a closing vignette
   -------------------------------------------------------------------------- */
body[data-world=eldritch]:not([data-screen=battle]) {
  --map-margin: #1b1e17;
  --bg: #0b0c0a; --bg2: #11130f; --panel: #141611; --panel2: #1b1e17;
  --line: #2b2f26; --line2: #3e4436; --text: #e4dfcf; --muted: #b3ad98; --dim: #7d7a6a;
  --gold: #d9c27a; --gold2: #9a8445; --accent: #a9d27d; --accent2: #5f8a40; --green: #a9d27d;
  --radius: 4px;
  --font: 'Alegreya Sans', 'Inter', system-ui, sans-serif;
  --title: 'IM Fell English SC', 'IM Fell English', Georgia, serif; --title-color: #ece4c8; --title-ls: .04em; --title-weight: 400;
  --title-shadow: 0 0 14px rgba(169, 210, 125, .18);
  --brand-color: #b9e08a; --brand-size: 24px;
  --backdrop:
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, .7) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 0%, rgba(120, 170, 90, .1), transparent 45%),
    radial-gradient(ellipse at 90% 100%, rgba(110, 60, 120, .1), transparent 50%),
    #0a0b09;
  --topbar-bg: linear-gradient(#12140f, #0d0e0b); --topbar-line: 1px solid #2f3428; --topbar-shadow: 0 2px 18px rgba(0, 0, 0, .6);
  --panel-bg:
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(169, 210, 125, .035) 23px 24px),
    linear-gradient(180deg, #161812, #10120e);
  --panel-border: 1px solid #2c3127;
  --panel-outline: 1px solid rgba(217, 194, 122, .08); --panel-outline-offset: -5px;
  --panel-shadow: 0 8px 28px rgba(0, 0, 0, .55), inset 0 0 30px rgba(0, 0, 0, .35);
  --btn-bg: linear-gradient(#1d2018, #151711); --btn-line: #3b4233; --btn-r: 3px; --btn-font: 'IM Fell English SC', Georgia, serif; --btn-ls: .03em;
  --btn-bg-h: linear-gradient(#262a1f, #1a1d15);
  --pri-bg: linear-gradient(#5e8a3c, #34521f); --pri-bg-h: linear-gradient(#6f9e48, #3d5f25); --pri-line: #a9d27d; --pri-text: #f0f6e4; --pri-text-shadow: 0 1px 2px #000;
  --pri-shadow: 0 0 14px rgba(169, 210, 125, .22);
  --on-bg: linear-gradient(#2e3a22, #20281a);
  --danger-line: #6a2a2a; --danger-text: #ff9a90;
  --field: #0d0e0b; --field-line: #353b2e; --field-r: 3px;
  --card: #12140f; --card-on: #1f2a18; --card-r: 4px;
  --portrait-bg: radial-gradient(circle at 50% 35%, #2a3022, #0b0c0a);
  --map-frame: #12140f; --map-frame-line: #3a4030;
  --scrim: rgba(4, 6, 3, .8); --modal-bg: linear-gradient(#141611, #0d0f0b);
  & .topbar .brand { font-family: 'Creepster', 'IM Fell English SC', serif; letter-spacing: .06em; text-shadow: 0 0 10px rgba(169, 210, 125, .5), 0 0 2px #000; }
  & .topbar .brand::after { content: ' ✠'; font-family: 'IM Fell English SC', serif; color: #6a7a52; font-size: 16px; }
  & h2 { font-size: 22px; } & h3 { font-size: 18px; }
  & .panel h2, & .panel h3 { border-bottom: 1px solid rgba(169, 210, 125, .12); padding-bottom: 2px; }
  & .wm-view { filter: saturate(.55) contrast(1.05) brightness(.82) sepia(.15); }
  & .wm-wrap { box-shadow: inset 0 0 60px rgba(0, 0, 0, .9); }
  & .story-modal, & .pm-rv-box { background: linear-gradient(#171a13, #0d0f0b); border-color: #3a4230; }
  & .story-kicker { color: var(--accent); letter-spacing: .2em; }
  & .story-text, & .pm-story { font-family: 'IM Fell English', Georgia, serif; font-size: 15px; }
  & .tag.red { border-color: #7a2a2a; color: #ff9a90; }
  & .pchip { border-radius: 3px; }
  & .code { color: var(--accent); }
}
body[data-world=eldritch][data-screen=battle] { --title: 'IM Fell English SC', Georgia, serif; }
/* --------------------------------------------------------------------------
   ♟ Pewter Crown — the general's war table: walnut, parchment, brass and wax.
   (The table itself is styled by client/js/muster.js; this sets the page.)
   -------------------------------------------------------------------------- */
body[data-world=muster] {
  --bg: #2e1c10; --bg2: #3b2416; --panel: #2a1a0f; --panel2: #3a2414; --line: #6a4a2a; --line2: #8a6a3a;
  --text: #f3e6c8; --muted: #c8b48c; --dim: #a8946c; --gold: #f0d48a; --gold2: #c9a24a; --accent: #c9a24a; --accent2: #8a6a2a;
  --font: 'Spectral', Georgia, serif; --title: 'Grenze Gotisch', Georgia, serif; --title-color: #f0d48a;
  --backdrop: repeating-linear-gradient(92deg, #3e2617 0 7px, #382214 7px 15px, #422819 15px 22px), #3b2416;
  background: #2e1c10;
}