:root {
  --bg-deepest: #0a0805;
  --bg-dark: #110e09;
  --bg-mid: #1a1410;
  --bg-panel: #201a12;
  --bg-card: #261f15;
  --bg-input: #1c1710;
  --border-dark: #3a2e1e;
  --border-mid: #4a3a22;
  --border-gold: #8a6a28;
  --border-gold-bright: #c49a3c;
  --accent-gold: #d4a843;
  --accent-gold-bright: #f0c060;
  --accent-amber: #b87a20;
  --accent-red: #8b1a1a;
  --accent-red-bright: #c0392b;
  --accent-crimson: #7a1515;
  --accent-silver: #9a9080;
  --text-primary: #e8dcc8;
  --text-secondary: #b8a888;
  --text-muted: #7a6a50;
  --text-gold: #d4a843;
  --text-red: #cc4444;
  --tab-active: #2a2015;
  --tab-inactive: #141008;
  --shadow-gold: 0 0 20px rgba(180,130,40,0.15);
  --shadow-deep: 0 4px 20px rgba(0,0,0,0.7);
  --radius: 4px;
  --radius-lg: 8px;
}

/* ─── THEME DEFINITIONS ─── */
/* Default theme vars already defined in :root above */

body[data-theme="arcane"] {
  --bg-deepest: #05080f;
  --bg-dark: #080d18;
  --bg-mid: #0d1422;
  --bg-panel: #111a2c;
  --bg-card: #152034;
  --bg-input: #0e1520;
  --border-dark: #1e2e50;
  --border-mid: #2a3f6a;
  --border-gold: #3a6aaa;
  --border-gold-bright: #5a9aee;
  --accent-gold: #5a9aee;
  --accent-gold-bright: #90c8ff;
  --accent-amber: #3a70cc;
  --accent-red: #7a1a8a;
  --accent-red-bright: #b040d0;
  --accent-crimson: #6a1580;
  --accent-silver: #8090b0;
  --text-primary: #ccd8f0;
  --text-secondary: #8898c0;
  --text-muted: #4a5a80;
  --text-gold: #5a9aee;
  --text-red: #b040d0;
  --tab-active: #111a2c;
  --tab-inactive: #080d18;
  --shadow-gold: 0 0 20px rgba(90,154,238,0.15);
}

body[data-theme="nature"] {
  --bg-deepest: #040a05;
  --bg-dark: #070f08;
  --bg-mid: #0d180e;
  --bg-panel: #101e11;
  --bg-card: #132415;
  --bg-input: #0e1a0f;
  --border-dark: #1e3a20;
  --border-mid: #2a5030;
  --border-gold: #4a8a3a;
  --border-gold-bright: #70c050;
  --accent-gold: #70c050;
  --accent-gold-bright: #98e870;
  --accent-amber: #3a8a2a;
  --accent-red: #6a3a10;
  --accent-red-bright: #c07030;
  --accent-crimson: #5a3010;
  --accent-silver: #7a9070;
  --text-primary: #c8e0b8;
  --text-secondary: #88aa78;
  --text-muted: #4a6040;
  --text-gold: #70c050;
  --text-red: #c07030;
  --tab-active: #101e11;
  --tab-inactive: #070f08;
  --shadow-gold: 0 0 20px rgba(112,192,80,0.15);
}

body[data-theme="shadow"] {
  --bg-deepest: #030305;
  --bg-dark: #060608;
  --bg-mid: #0a0a0f;
  --bg-panel: #0e0e15;
  --bg-card: #12121c;
  --bg-input: #0a0a12;
  --border-dark: #1c1c2e;
  --border-mid: #28283e;
  --border-gold: #6a4a8a;
  --border-gold-bright: #9a70cc;
  --accent-gold: #9a70cc;
  --accent-gold-bright: #cc99ff;
  --accent-amber: #7a50aa;
  --accent-red: #8a1a4a;
  --accent-red-bright: #cc3070;
  --accent-crimson: #7a1540;
  --accent-silver: #7a70a0;
  --text-primary: #d0c8e8;
  --text-secondary: #9080b8;
  --text-muted: #504868;
  --text-gold: #9a70cc;
  --text-red: #cc3070;
  --tab-active: #0e0e15;
  --tab-inactive: #060608;
  --shadow-gold: 0 0 20px rgba(154,112,204,0.15);
}

body[data-theme="fire"] {
  --bg-deepest: #080300;
  --bg-dark: #100500;
  --bg-mid: #180800;
  --bg-panel: #200b00;
  --bg-card: #280e00;
  --bg-input: #180800;
  --border-dark: #3a1500;
  --border-mid: #5a2000;
  --border-gold: #aa4a00;
  --border-gold-bright: #ee6a00;
  --accent-gold: #ee6a00;
  --accent-gold-bright: #ff9a30;
  --accent-amber: #cc5000;
  --accent-red: #8a0a00;
  --accent-red-bright: #e03020;
  --accent-crimson: #7a0800;
  --accent-silver: #9a7060;
  --text-primary: #f0d8b8;
  --text-secondary: #c09070;
  --text-muted: #7a4a30;
  --text-gold: #ee6a00;
  --text-red: #e03020;
  --tab-active: #200b00;
  --tab-inactive: #100500;
  --shadow-gold: 0 0 20px rgba(238,106,0,0.18);
}

body[data-theme="ice"] {
  --bg-deepest: #020508;
  --bg-dark: #04090f;
  --bg-mid: #070f18;
  --bg-panel: #0a1420;
  --bg-card: #0d1928;
  --bg-input: #070f18;
  --border-dark: #182838;
  --border-mid: #224058;
  --border-gold: #3a7090;
  --border-gold-bright: #60b8d8;
  --accent-gold: #60b8d8;
  --accent-gold-bright: #90e0ff;
  --accent-amber: #3080a8;
  --accent-red: #183870;
  --accent-red-bright: #3070c0;
  --accent-crimson: #142f60;
  --accent-silver: #70a0b8;
  --text-primary: #c8e8f8;
  --text-secondary: #80b0c8;
  --text-muted: #406080;
  --text-gold: #60b8d8;
  --text-red: #3070c0;
  --tab-active: #0a1420;
  --tab-inactive: #04090f;
  --shadow-gold: 0 0 20px rgba(96,184,216,0.15);
}

body[data-theme="smoke"] {
  --bg-deepest: #060607;
  --bg-dark: #0a0a0c;
  --bg-mid: #101012;
  --bg-panel: #141416;
  --bg-card: #18181c;
  --bg-input: #101012;
  --border-dark: #222228;
  --border-mid: #303038;
  --border-gold: #606070;
  --border-gold-bright: #9090a8;
  --accent-gold: #9090a8;
  --accent-gold-bright: #c0c0d8;
  --accent-amber: #707088;
  --accent-red: #503050;
  --accent-red-bright: #8060a0;
  --accent-crimson: #402840;
  --accent-silver: #8080a0;
  --text-primary: #d8d8e8;
  --text-secondary: #9090a8;
  --text-muted: #505060;
  --text-gold: #a0a0c0;
  --text-red: #8060a0;
  --tab-active: #141416;
  --tab-inactive: #0a0a0c;
  --shadow-gold: 0 0 20px rgba(144,144,168,0.15);
}

body[data-theme="ember"] {
  --bg-deepest: #070402;
  --bg-dark: #0e0703;
  --bg-mid: #160a04;
  --bg-panel: #1c0d05;
  --bg-card: #221006;
  --bg-input: #160a04;
  --border-dark: #2e1508;
  --border-mid: #4a2010;
  --border-gold: #8a3a10;
  --border-gold-bright: #c05020;
  --accent-gold: #c05020;
  --accent-gold-bright: #e87030;
  --accent-amber: #a04010;
  --accent-red: #6a1010;
  --accent-red-bright: #cc2020;
  --accent-crimson: #580c0c;
  --accent-silver: #906050;
  --text-primary: #f0d0a8;
  --text-secondary: #c08060;
  --text-muted: #784030;
  --text-gold: #e87030;
  --text-red: #cc2020;
  --tab-active: #1c0d05;
  --tab-inactive: #0e0703;
  --shadow-gold: 0 0 20px rgba(200,80,20,0.2);
}

body[data-theme="fairy"] {
  --bg-deepest: #03030a;
  --bg-dark: #06061400;
  --bg-mid: #0a0a1e;
  --bg-panel: #0d0d26;
  --bg-card: #101030;
  --bg-input: #0a0a1e;
  --border-dark: #1a1a3a;
  --border-mid: #28286a;
  --border-gold: #6a50a0;
  --border-gold-bright: #b080e0;
  --accent-gold: #c090ff;
  --accent-gold-bright: #e0b8ff;
  --accent-amber: #8860c0;
  --accent-red: #6030a0;
  --accent-red-bright: #a060e0;
  --accent-crimson: #501888;
  --accent-silver: #9080c0;
  --text-primary: #e8d8ff;
  --text-secondary: #a890d0;
  --text-muted: #604880;
  --text-gold: #c090ff;
  --text-red: #e060c0;
  --tab-active: #0d0d26;
  --tab-inactive: #060614;
  --shadow-gold: 0 0 20px rgba(192,144,255,0.2);
}

/* ─── SAKURA (Static) ─── */
body[data-theme="sakura"] {
  --bg-deepest: #0d0508;
  --bg-dark: #160a10;
  --bg-mid: #1f0f18;
  --bg-panel: #271420;
  --bg-card: #301828;
  --bg-input: #1f0f18;
  --border-dark: #4a1f35;
  --border-mid: #6a2f50;
  --border-gold: #c06090;
  --border-gold-bright: #f090c0;
  --accent-gold: #f090c0;
  --accent-gold-bright: #ffbfdf;
  --accent-amber: #d06090;
  --accent-red: #801840;
  --accent-red-bright: #c03060;
  --accent-crimson: #6a1030;
  --accent-silver: #b08098;
  --text-primary: #fce8f0;
  --text-secondary: #e0a8c0;
  --text-muted: #905870;
  --text-gold: #f090c0;
  --text-red: #e05888;
  --tab-active: #271420;
  --tab-inactive: #160a10;
  --shadow-gold: 0 0 20px rgba(240,144,192,0.2);
}

/* ─── SAKURA ANIMATED ─── */
body[data-theme="sakura-anim"] {
  --bg-deepest: #080310;
  --bg-dark: #0f0618;
  --bg-mid: #170a22;
  --bg-panel: #1e0e2c;
  --bg-card: #251232;
  --bg-input: #170a22;
  --border-dark: #3a1a50;
  --border-mid: #5a2878;
  --border-gold: #b060e0;
  --border-gold-bright: #e090ff;
  --accent-gold: #e090ff;
  --accent-gold-bright: #ffbfff;
  --accent-amber: #c060d0;
  --accent-red: #8820a0;
  --accent-red-bright: #cc50f0;
  --accent-crimson: #701880;
  --accent-silver: #a878c8;
  --text-primary: #f5e0ff;
  --text-secondary: #d8a8f0;
  --text-muted: #887098;
  --text-gold: #e090ff;
  --text-red: #f060c0;
  --tab-active: #1e0e2c;
  --tab-inactive: #0f0618;
  --shadow-gold: 0 0 20px rgba(224,144,255,0.2);
}

/* ─── SHADOW RUNES (Static) ─── */
body[data-theme="solo"] {
  --bg-deepest: #000000;
  --bg-dark: #040104;
  --bg-mid: #080208;
  --bg-panel: #0c030c;
  --bg-card: #110411;
  --bg-input: #080208;
  --border-dark: #200820;
  --border-mid: #381038;
  --border-gold: #6a1a6a;
  --border-gold-bright: #aa30aa;
  --accent-gold: #9b30ff;
  --accent-gold-bright: #c875ff;
  --accent-amber: #7720cc;
  --accent-red: #300a30;
  --accent-red-bright: #7700bb;
  --accent-crimson: #200820;
  --accent-silver: #6a4a8a;
  --text-primary: #f0d8ff;
  --text-secondary: #c090e8;
  --text-muted: #6a3a7a;
  --text-gold: #bb77ff;
  --text-red: #ff55cc;
  --tab-active: #0c030c;
  --tab-inactive: #040104;
  --shadow-gold: 0 0 25px rgba(140,30,200,0.3);
}

/* ─── SHADOW RUNES ANIMATED ─── */
body[data-theme="solo-anim"] {
  --bg-deepest: #000000;
  --bg-dark: #030003;
  --bg-mid: #070007;
  --bg-panel: #0b000b;
  --bg-card: #0f000f;
  --bg-input: #070007;
  --border-dark: #1c041c;
  --border-mid: #340834;
  --border-gold: #620a62;
  --border-gold-bright: #a020a0;
  --accent-gold: #9020ff;
  --accent-gold-bright: #c060ff;
  --accent-amber: #6610cc;
  --accent-red: #280028;
  --accent-red-bright: #6600aa;
  --accent-crimson: #1a001a;
  --accent-silver: #603880;
  --text-primary: #eed8ff;
  --text-secondary: #b880e0;
  --text-muted: #602870;
  --text-gold: #aa66ff;
  --text-red: #ff44bb;
  --tab-active: #0b000b;
  --tab-inactive: #030003;
  --shadow-gold: 0 0 30px rgba(120,20,180,0.4);
}

/* ─── EVANGELION EVA-01 ─── */
body[data-theme="eva01"] {
  --bg-deepest: #030508;
  --bg-dark: #060a10;
  --bg-mid: #0a0f1a;
  --bg-panel: #0e1422;
  --bg-card: #12192a;
  --bg-input: #0a0f1a;
  --border-dark: #1a1f38;
  --border-mid: #283060;
  --border-gold: #3a5faa;
  --border-gold-bright: #5a90e0;
  /* Even green/purple split — alternating accents */
  --accent-gold: #55cc55;
  --accent-gold-bright: #80ff80;
  --accent-amber: #9933cc;
  --accent-red: #7700bb;
  --accent-red-bright: #bb44ff;
  --accent-crimson: #5500aa;
  --accent-silver: #6a8a6a;
  --text-primary: #e8ffe8;
  --text-secondary: #cc88ff;
  --text-muted: #507050;
  --text-gold: #66dd66;
  --text-red: #bb66ff;
  --tab-active: #0e1422;
  --tab-inactive: #060a10;
  --shadow-gold: 0 0 22px rgba(80,200,80,0.18), 0 0 22px rgba(160,60,220,0.18);
}

/* ─── STORM / THUNDERSTORM ANIMATED ─── */
body[data-theme="storm"] {
  --bg-deepest: #02040a;
  --bg-dark: #040710;
  --bg-mid: #070c1a;
  --bg-panel: #0a1020;
  --bg-card: #0d1428;
  --bg-input: #070c1a;
  --border-dark: #141e38;
  --border-mid: #1e2e58;
  --border-gold: #3050a0;
  --border-gold-bright: #5080e0;
  --accent-gold: #4070d0;
  --accent-gold-bright: #80b8ff;
  --accent-amber: #2858b0;
  --accent-red: #0a1840;
  --accent-red-bright: #2040a0;
  --accent-crimson: #080e30;
  --accent-silver: #607098;
  --text-primary: #d0deff;
  --text-secondary: #8098c8;
  --text-muted: #3a5070;
  --text-gold: #6090e8;
  --text-red: #ffffff;
  --tab-active: #0a1020;
  --tab-inactive: #040710;
  --shadow-gold: 0 0 30px rgba(80,140,220,0.2);
}

/* ─── ABYSSAL BLOOD ANIMATED ─── */
body[data-theme="abyss"] {
  --bg-deepest: #040000;
  --bg-dark: #090000;
  --bg-mid: #100000;
  --bg-panel: #160000;
  --bg-card: #1c0000;
  --bg-input: #100000;
  --border-dark: #2e0a0a;
  --border-mid: #500a0a;
  --border-gold: #8a0a0a;
  --border-gold-bright: #cc1010;
  --accent-gold: #cc1010;
  --accent-gold-bright: #ff2020;
  --accent-amber: #aa0808;
  --accent-red: #500000;
  --accent-red-bright: #900000;
  --accent-crimson: #400000;
  --accent-silver: #804040;
  --text-primary: #ffd0c8;
  --text-secondary: #cc8070;
  --text-muted: #804040;
  --text-gold: #ff3030;
  --text-red: #ff5050;
  --tab-active: #160000;
  --tab-inactive: #090000;
  --shadow-gold: 0 0 30px rgba(180,0,0,0.3);
}

/* ─── UNDERDARK / BIOLUMINESCENCE (Static) ─── */
body[data-theme="underdark"] {
  --bg-deepest: #000002;
  --bg-dark: #010106;
  --bg-mid: #02020c;
  --bg-panel: #030412;
  --bg-card: #04051a;
  --bg-input: #02020c;
  --border-dark: #090e22;
  --border-mid: #101830;
  --border-gold: #006644;
  --border-gold-bright: #00cc88;
  --accent-gold: #00ffaa;
  --accent-gold-bright: #80ffdd;
  --accent-amber: #00cc66;
  --accent-red: #6600cc;
  --accent-red-bright: #aa55ff;
  --accent-crimson: #440099;
  --accent-silver: #1a6655;
  --text-primary: #c0fff0;
  --text-secondary: #44ddaa;
  --text-muted: #0d5540;
  --text-gold: #00ffcc;
  --text-red: #aa66ff;
  --tab-active: #030412;
  --tab-inactive: #010106;
  --shadow-gold: 0 0 35px rgba(0,255,160,0.3);
}

/* ─── ROYAL / PALADIN (Static) ─── */
body[data-theme="paladin"] {
  --bg-deepest: #06050a;
  --bg-dark: #0d0c14;
  --bg-mid: #15121e;
  --bg-panel: #1c1828;
  --bg-card: #231e32;
  --bg-input: #15121e;
  --border-dark: #2e2840;
  --border-mid: #4a3e60;
  --border-gold: #c8a830;
  --border-gold-bright: #f8d840;
  --accent-gold: #f5cc30;
  --accent-gold-bright: #fff080;
  --accent-amber: #e8a820;
  --accent-red: #e8e0ff;
  --accent-red-bright: #ffffff;
  --accent-crimson: #c8c0f0;
  --accent-silver: #f0e8c8;
  --text-primary: #fff8e8;
  --text-secondary: #e8d898;
  --text-muted: #8878a0;
  --text-gold: #f8d040;
  --text-red: #ffffff;
  --tab-active: #1c1828;
  --tab-inactive: #0d0c14;
  --shadow-gold: 0 0 35px rgba(248,210,40,0.35);
}

/* ─── BLOOD MOON (Static) ─── */
body[data-theme="bloodmoon"] {
  --bg-deepest: #060000;
  --bg-dark: #0e0000;
  --bg-mid: #180002;
  --bg-panel: #200004;
  --bg-card: #2a0005;
  --bg-input: #180002;
  --border-dark: #3a0808;
  --border-mid: #6a1008;
  --border-gold: #c02808;
  --border-gold-bright: #ff5020;
  --accent-gold: #ff5020;
  --accent-gold-bright: #ff8040;
  --accent-amber: #cc3010;
  --accent-red: #800000;
  --accent-red-bright: #cc0000;
  --accent-crimson: #600000;
  --accent-silver: #aa6040;
  --text-primary: #ffe8d8;
  --text-secondary: #ee9060;
  --text-muted: #884030;
  --text-gold: #ff6030;
  --text-red: #ff3020;
  --tab-active: #200004;
  --tab-inactive: #0e0000;
  --shadow-gold: 0 0 30px rgba(200,40,0,0.35);
}

/* ─── VOID (Static) ─── */
body[data-theme="void"] {
  --bg-deepest: #020108;
  --bg-dark: #050310;
  --bg-mid: #09061a;
  --bg-panel: #0d0920;
  --bg-card: #120c2a;
  --bg-input: #09061a;
  --border-dark: #1c1238;
  --border-mid: #2e2060;
  --border-gold: #5040a0;
  --border-gold-bright: #8060e0;
  --accent-gold: #8060ff;
  --accent-gold-bright: #a888ff;
  --accent-amber: #6040cc;
  --accent-red: #300a60;
  --accent-red-bright: #6030b0;
  --accent-crimson: #20084a;
  --accent-silver: #605090;
  --text-primary: #e8e0ff;
  --text-secondary: #a898d8;
  --text-muted: #504878;
  --text-gold: #9070ff;
  --text-red: #cc88ff;
  --tab-active: #0d0920;
  --tab-inactive: #050310;
  --shadow-gold: 0 0 25px rgba(100,60,220,0.3);
}

/* ─── GLACIER (Static) ─── */
body[data-theme="glacier"] {
  --bg-deepest: #010508;
  --bg-dark: #020a12;
  --bg-mid: #04111e;
  --bg-panel: #061826;
  --bg-card: #08202e;
  --bg-input: #04111e;
  --border-dark: #0e2438;
  --border-mid: #183a58;
  --border-gold: #2a6a90;
  --border-gold-bright: #40a0d0;
  --accent-gold: #50c0f0;
  --accent-gold-bright: #90e8ff;
  --accent-amber: #2880b0;
  --accent-red: #0a2848;
  --accent-red-bright: #1860a0;
  --accent-crimson: #061a38;
  --accent-silver: #5090b8;
  --text-primary: #d8f4ff;
  --text-secondary: #80c8e8;
  --text-muted: #306080;
  --text-gold: #60d0f8;
  --text-red: #b8eeff;
  --tab-active: #061826;
  --tab-inactive: #020a12;
  --shadow-gold: 0 0 25px rgba(60,160,220,0.25);
}

/* ─── ANCIENT GOLD (Static) ─── */
body[data-theme="ancientgold"] {
  --bg-deepest: #060402;
  --bg-dark: #0e0a04;
  --bg-mid: #181006;
  --bg-panel: #201508;
  --bg-card: #291b0a;
  --bg-input: #181006;
  --border-dark: #3a2808;
  --border-mid: #5a3e10;
  --border-gold: #a07020;
  --border-gold-bright: #d4a030;
  --accent-gold: #d4a030;
  --accent-gold-bright: #f0c848;
  --accent-amber: #a87820;
  --accent-red: #5a2a00;
  --accent-red-bright: #9a5010;
  --accent-crimson: #3a1800;
  --accent-silver: #b09060;
  --text-primary: #fff0c8;
  --text-secondary: #d4aa60;
  --text-muted: #806030;
  --text-gold: #e8b840;
  --text-red: #ffcc60;
  --tab-active: #201508;
  --tab-inactive: #0e0a04;
  --shadow-gold: 0 0 30px rgba(200,160,30,0.3);
}

/* ─── BLIZZARD ANIMATED ─── */
body[data-theme="blizzard"] {
  --bg-deepest: #010408;
  --bg-dark: #020810;
  --bg-mid: #030e1c;
  --bg-panel: #051426;
  --bg-card: #071a30;
  --bg-input: #030e1c;
  --border-dark: #0c2038;
  --border-mid: #163460;
  --border-gold: #2060a0;
  --border-gold-bright: #3090d8;
  --accent-gold: #40a8e8;
  --accent-gold-bright: #80d0ff;
  --accent-amber: #1870b0;
  --accent-red: #082040;
  --accent-red-bright: #1050a0;
  --accent-crimson: #041530;
  --accent-silver: #4080a8;
  --text-primary: #c8e8ff;
  --text-secondary: #6ab0d8;
  --text-muted: #285070;
  --text-gold: #50c0f8;
  --text-red: #a0d8ff;
  --tab-active: #051426;
  --tab-inactive: #020810;
  --shadow-gold: 0 0 30px rgba(40,140,220,0.25);
}

/* ─── CRIMSON RAIN ANIMATED ─── */
body[data-theme="crimsonrain"] {
  --bg-deepest: #040000;
  --bg-dark: #0a0000;
  --bg-mid: #120000;
  --bg-panel: #1a0002;
  --bg-card: #220004;
  --bg-input: #120000;
  --border-dark: #320808;
  --border-mid: #5a0a0a;
  --border-gold: #a01020;
  --border-gold-bright: #e02030;
  --accent-gold: #ff2040;
  --accent-gold-bright: #ff6070;
  --accent-amber: #cc1030;
  --accent-red: #700010;
  --accent-red-bright: #bb0020;
  --accent-crimson: #500008;
  --accent-silver: #903040;
  --text-primary: #ffe0d8;
  --text-secondary: #ee7070;
  --text-muted: #883040;
  --text-gold: #ff4060;
  --text-red: #ff6888;
  --tab-active: #1a0002;
  --tab-inactive: #0a0000;
  --shadow-gold: 0 0 30px rgba(200,0,20,0.35);
}

/* ─── AURORA ANIMATED ─── */
body[data-theme="aurora"] {
  --bg-deepest: #000502;
  --bg-dark: #010a04;
  --bg-mid: #021408;
  --bg-panel: #031c0c;
  --bg-card: #042410;
  --bg-input: #021408;
  --border-dark: #082818;
  --border-mid: #104030;
  --border-gold: #107850;
  --border-gold-bright: #20c080;
  --accent-gold: #30ffaa;
  --accent-gold-bright: #70ffcc;
  --accent-amber: #10c070;
  --accent-red: #6020c0;
  --accent-red-bright: #a050ff;
  --accent-crimson: #4010a0;
  --accent-silver: #208860;
  --text-primary: #c8fff0;
  --text-secondary: #40e8a0;
  --text-muted: #106840;
  --text-gold: #30ffb0;
  --text-red: #a060ff;
  --tab-active: #031c0c;
  --tab-inactive: #010a04;
  --shadow-gold: 0 0 35px rgba(0,220,140,0.3);
}

/* ─── VOID ANIMATED ─── */
body[data-theme="voidanim"] {
  --bg-deepest: #010006;
  --bg-dark: #030010;
  --bg-mid: #06001a;
  --bg-panel: #090020;
  --bg-card: #0d0028;
  --bg-input: #06001a;
  --border-dark: #160840;
  --border-mid: #281060;
  --border-gold: #4020a0;
  --border-gold-bright: #6040d0;
  --accent-gold: #6040ff;
  --accent-gold-bright: #9070ff;
  --accent-amber: #4820cc;
  --accent-red: #200850;
  --accent-red-bright: #4818b0;
  --accent-crimson: #160640;
  --accent-silver: #503890;
  --text-primary: #e0d8ff;
  --text-secondary: #9080d8;
  --text-muted: #403870;
  --text-gold: #7060ff;
  --text-red: #c0a8ff;
  --tab-active: #090020;
  --tab-inactive: #030010;
  --shadow-gold: 0 0 35px rgba(80,40,200,0.4);
}

/* ─── HALLOWEEN ─── */
body[data-theme="halloween"] {
  --bg-deepest: #050200;
  --bg-dark: #0c0500;
  --bg-mid: #150800;
  --bg-panel: #1c0a00;
  --bg-card: #240d00;
  --bg-input: #150800;
  --border-dark: #3a1800;
  --border-mid: #6a2c00;
  --border-gold: #c05800;
  --border-gold-bright: #ff7a00;
  --accent-gold: #ff6a00;
  --accent-gold-bright: #ff9a20;
  --accent-amber: #cc4400;
  --accent-red: #4a0080;
  --accent-red-bright: #8800cc;
  --accent-crimson: #300060;
  --accent-silver: #7a3a00;
  --text-primary: #ffe8c8;
  --text-secondary: #ff9a40;
  --text-muted: #7a4010;
  --text-gold: #ff7a00;
  --text-red: #cc44ff;
  --tab-active: #1c0a00;
  --tab-inactive: #0c0500;
  --shadow-gold: 0 0 25px rgba(220,100,0,0.4);
}

/* ─── CHRISTMAS ─── */
body[data-theme="christmas"] {
  --bg-deepest: #000a02;
  --bg-dark: #001506;
  --bg-mid: #00200a;
  --bg-panel: #002a0e;
  --bg-card: #003412;
  --bg-input: #00200a;
  --border-dark: #003a18;
  --border-mid: #006030;
  --border-gold: #cc2020;
  --border-gold-bright: #ff4040;
  --accent-gold: #ff3030;
  --accent-gold-bright: #ff6060;
  --accent-amber: #cc1010;
  --accent-red: #004020;
  --accent-red-bright: #00aa50;
  --accent-crimson: #002010;
  --accent-silver: #c8c8d8;
  --text-primary: #fff8f0;
  --text-secondary: #ffcccc;
  --text-muted: #407040;
  --text-gold: #ff4444;
  --text-red: #80ffaa;
  --tab-active: #002a0e;
  --tab-inactive: #001506;
  --shadow-gold: 0 0 25px rgba(200,20,20,0.35);
}

/* ─── NEW YEAR ─── */
body[data-theme="newyear"] {
  --bg-deepest: #020206;
  --bg-dark: #04040e;
  --bg-mid: #070716;
  --bg-panel: #0a0a1e;
  --bg-card: #0e0e28;
  --bg-input: #070716;
  --border-dark: #181830;
  --border-mid: #2a2a58;
  --border-gold: #c0a000;
  --border-gold-bright: #f0d000;
  --accent-gold: #f0c800;
  --accent-gold-bright: #fff060;
  --accent-amber: #c09800;
  --accent-red: #8800aa;
  --accent-red-bright: #cc44ff;
  --accent-crimson: #600080;
  --accent-silver: #d0d0e8;
  --text-primary: #fffff0;
  --text-secondary: #f0d860;
  --text-muted: #606080;
  --text-gold: #f0d000;
  --text-red: #dd88ff;
  --tab-active: #0a0a1e;
  --tab-inactive: #04040e;
  --shadow-gold: 0 0 30px rgba(220,190,0,0.4);
}

/* ─── VALENTINE ─── */
body[data-theme="valentine"] {
  --bg-deepest: #060002;
  --bg-dark: #100006;
  --bg-mid: #1c000c;
  --bg-panel: #260012;
  --bg-card: #300018;
  --bg-input: #1c000c;
  --border-dark: #480828;
  --border-mid: #7a1040;
  --border-gold: #e03070;
  --border-gold-bright: #ff60a0;
  --accent-gold: #ff4488;
  --accent-gold-bright: #ff80bb;
  --accent-amber: #cc2060;
  --accent-red: #800040;
  --accent-red-bright: #cc1060;
  --accent-crimson: #600030;
  --accent-silver: #e090b0;
  --text-primary: #fff0f5;
  --text-secondary: #ffb0cc;
  --text-muted: #884460;
  --text-gold: #ff5599;
  --text-red: #ff88bb;
  --tab-active: #260012;
  --tab-inactive: #100006;
  --shadow-gold: 0 0 25px rgba(220,40,100,0.4);
}

/* ─── EASTER ─── */
body[data-theme="easter"] {
  --bg-deepest: #02040a;
  --bg-dark: #04080e;
  --bg-mid: #060e16;
  --bg-panel: #08141e;
  --bg-card: #0a1a26;
  --bg-input: #060e16;
  --border-dark: #102038;
  --border-mid: #1c3858;
  --border-gold: #60c080;
  --border-gold-bright: #90e8a0;
  --accent-gold: #80e890;
  --accent-gold-bright: #b0ffb8;
  --accent-amber: #50c068;
  --accent-red: #a040c0;
  --accent-red-bright: #d070f0;
  --accent-crimson: #7820a0;
  --accent-silver: #90d0a8;
  --text-primary: #f0fff4;
  --text-secondary: #90e8a0;
  --text-muted: #387858;
  --text-gold: #70e880;
  --text-red: #d080f8;
  --tab-active: #08141e;
  --tab-inactive: #04080e;
  --shadow-gold: 0 0 25px rgba(80,200,100,0.35);
}

/* ─── SUMMER ─── */
body[data-theme="summer"] {
  --bg-deepest: #030402;
  --bg-dark: #070a04;
  --bg-mid: #0c1006;
  --bg-panel: #101608;
  --bg-card: #151c0a;
  --bg-input: #0c1006;
  --border-dark: #202e10;
  --border-mid: #365020;
  --border-gold: #e0a800;
  --border-gold-bright: #ffcc00;
  --accent-gold: #ffcc00;
  --accent-gold-bright: #ffe840;
  --accent-amber: #e09000;
  --accent-red: #006080;
  --accent-red-bright: #00a8cc;
  --accent-crimson: #004060;
  --accent-silver: #80d8e8;
  --text-primary: #fffff0;
  --text-secondary: #f0e080;
  --text-muted: #507030;
  --text-gold: #ffcc00;
  --text-red: #40d8ff;
  --tab-active: #101608;
  --tab-inactive: #070a04;
  --shadow-gold: 0 0 30px rgba(230,170,0,0.4);
}

/* ─── AUTUMN ─── */
body[data-theme="autumn"] {
  --bg-deepest: #060300;
  --bg-dark: #100600;
  --bg-mid: #1c0a00;
  --bg-panel: #260e00;
  --bg-card: #301200;
  --bg-input: #1c0a00;
  --border-dark: #3e1e00;
  --border-mid: #6e3800;
  --border-gold: #c06800;
  --border-gold-bright: #e89000;
  --accent-gold: #e88000;
  --accent-gold-bright: #ffaa20;
  --accent-amber: #c05000;
  --accent-red: #8a1a00;
  --accent-red-bright: #cc3000;
  --accent-crimson: #601000;
  --accent-silver: #a07040;
  --text-primary: #fff4e0;
  --text-secondary: #f0b060;
  --text-muted: #7a4820;
  --text-gold: #f09000;
  --text-red: #ff5020;
  --tab-active: #260e00;
  --tab-inactive: #100600;
  --shadow-gold: 0 0 25px rgba(200,110,0,0.4);
}

/* ─── WINTER FROST ─── */
body[data-theme="winterfrost"] {
  --bg-deepest: #020408;
  --bg-dark: #040810;
  --bg-mid: #060e1c;
  --bg-panel: #081428;
  --bg-card: #0a1a32;
  --bg-input: #060e1c;
  --border-dark: #102040;
  --border-mid: #1c3860;
  --border-gold: #4088c0;
  --border-gold-bright: #60b8f0;
  --accent-gold: #70c8ff;
  --accent-gold-bright: #a8e0ff;
  --accent-amber: #3878b0;
  --accent-red: #0a2848;
  --accent-red-bright: #1860b0;
  --accent-crimson: #061830;
  --accent-silver: #c0d8f0;
  --text-primary: #eef8ff;
  --text-secondary: #90c8f0;
  --text-muted: #304870;
  --text-gold: #70c8ff;
  --text-red: #c0e8ff;
  --tab-active: #081428;
  --tab-inactive: #040810;
  --shadow-gold: 0 0 30px rgba(80,160,240,0.35);
}

/* ─── EVA-01 SPECIFIC OVERRIDES — vivid green + purple cards ─── */
body[data-theme="eva01"] .app-header {
  background: linear-gradient(180deg, #04080e 0%, #070d18 100%);
  border-bottom: 2px solid #44aa44;
  box-shadow: 0 2px 20px rgba(80,200,80,0.18), 0 2px 20px rgba(140,50,210,0.12);
}
body[data-theme="eva01"] .header-title {
  text-shadow: 0 0 20px rgba(80,255,80,0.4), 0 0 40px rgba(160,60,220,0.2);
}
body[data-theme="eva01"] .sidebar {
  border-right: 1px solid #2a4a2a;
  background: linear-gradient(180deg, #04080e 0%, #07101a 100%);
}

/* Green-tinted panels */
body[data-theme="eva01"] .panel:nth-child(odd) {
  background: linear-gradient(135deg, #0a1a0a, #0c1220);
  border: 1px solid #2a6a2a;
  border-left: 3px solid #44cc44;
  box-shadow: -3px 0 16px rgba(68,204,68,0.2), inset 0 0 30px rgba(40,120,40,0.05);
}
/* Purple-tinted panels */
body[data-theme="eva01"] .panel:nth-child(even) {
  background: linear-gradient(135deg, #120a1e, #0c1020);
  border: 1px solid #4a1a70;
  border-left: 3px solid #9933cc;
  box-shadow: -3px 0 16px rgba(153,51,204,0.2), inset 0 0 30px rgba(80,20,120,0.06);
}

/* Stat boxes — green odd, purple even */
body[data-theme="eva01"] .stat-box:nth-child(odd) {
  background: linear-gradient(180deg, #0d1e0d, #091409);
  border: 1px solid #2a6a2a;
  border-top: 2px solid #44cc44;
  box-shadow: 0 -3px 12px rgba(68,204,68,0.18);
}
body[data-theme="eva01"] .stat-box:nth-child(even) {
  background: linear-gradient(180deg, #150d22, #0e0916);
  border: 1px solid #4a1a70;
  border-top: 2px solid #9933cc;
  box-shadow: 0 -3px 12px rgba(153,51,204,0.2);
}
body[data-theme="eva01"] .stat-score {
  background: linear-gradient(180deg, #0f1f0f, #091409);
  border-color: #44aa44;
}
body[data-theme="eva01"] .stat-box:nth-child(even) .stat-score {
  background: linear-gradient(180deg, #170d24, #0e091a);
  border-color: #8833bb;
}

/* Section titles alternating */
body[data-theme="eva01"] .section-title {
  color: #66dd66;
  border-bottom-color: #2a5a2a;
  text-shadow: 0 0 8px rgba(80,220,80,0.3);
}

/* Inputs glow green on focus */
body[data-theme="eva01"] input:focus,
body[data-theme="eva01"] textarea:focus,
body[data-theme="eva01"] select:focus {
  border-color: #44cc44;
  box-shadow: 0 0 10px rgba(68,204,68,0.25);
}

/* Buttons */
body[data-theme="eva01"] .btn-primary {
  color: var(--accent-gold-bright);
  border-color: var(--border-gold);
}
body[data-theme="eva01"] .btn-primary:hover {
  border-color: var(--accent-gold-bright);
  box-shadow: 0 0 16px rgba(85,204,85,0.45);
}
/* Active nav tab */
body[data-theme="eva01"] .tab-btn.active {
  border-left-color: #44cc44;
  color: #80ff80;
  background: linear-gradient(90deg, rgba(40,100,40,0.15), transparent);
  box-shadow: inset 3px 0 10px rgba(68,204,68,0.12);
}
body[data-theme="eva01"] .tab-btn.active:nth-child(even) {
  border-left-color: #9933cc;
  color: #cc88ff;
  background: linear-gradient(90deg, rgba(100,30,150,0.15), transparent);
  box-shadow: inset 3px 0 10px rgba(153,51,204,0.14);
}

/* Hex grid pattern overlay on bg */
body[data-theme="eva01"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30,2 58,17 58,47 30,62 2,47 2,17' fill='none' stroke='%2344aa44' stroke-width='0.3' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 60px 52px;
}

/* ─── UNDERDARK SPECIFIC OVERRIDES — glowing cave bioluminescence ─── */
body[data-theme="underdark"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 300px 200px at 15% 80%, rgba(0,200,100,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 200px 300px at 85% 60%, rgba(100,0,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 150px 150px at 50% 90%, rgba(0,255,180,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 250px 180px at 30% 20%, rgba(0,150,200,0.04) 0%, transparent 70%);
}
body[data-theme="underdark"] .app-header {
  background: linear-gradient(180deg, #010106 0%, #02020c 100%);
  border-bottom: 2px solid #006644;
  box-shadow: 0 2px 30px rgba(0,255,160,0.18);
}
body[data-theme="underdark"] .header-title {
  color: #00ffcc;
  text-shadow: 0 0 20px rgba(0,255,200,0.6), 0 0 50px rgba(0,200,150,0.3);
}
body[data-theme="underdark"] .sidebar {
  border-right: 1px solid #006644;
  background: linear-gradient(180deg, #010106 0%, #02020e 100%);
}
/* Teal-glow panels (mushroom cyan) */
body[data-theme="underdark"] .panel:nth-child(odd) {
  background: linear-gradient(135deg, #03091a, #020514);
  border: 1px solid #0a3328;
  border-left: 3px solid #00cc88;
  box-shadow: -3px 0 18px rgba(0,200,136,0.22), inset 0 0 40px rgba(0,120,80,0.04);
}
/* Purple-glow panels (deep spore fungal) */
body[data-theme="underdark"] .panel:nth-child(even) {
  background: linear-gradient(135deg, #08031a, #050214);
  border: 1px solid #2a0966;
  border-left: 3px solid #7700cc;
  box-shadow: -3px 0 18px rgba(120,0,200,0.2), inset 0 0 40px rgba(60,0,100,0.05);
}
/* Stat boxes */
body[data-theme="underdark"] .stat-box:nth-child(odd) {
  background: linear-gradient(180deg, #030d14, #020912);
  border: 1px solid #0a3328;
  border-top: 2px solid #00cc88;
  box-shadow: 0 -3px 14px rgba(0,200,136,0.22);
}
body[data-theme="underdark"] .stat-box:nth-child(even) {
  background: linear-gradient(180deg, #09031a, #060215);
  border: 1px solid #2a0966;
  border-top: 2px solid #7700cc;
  box-shadow: 0 -3px 14px rgba(120,0,200,0.2);
}
body[data-theme="underdark"] .stat-score {
  background: linear-gradient(180deg, #041212, #020d0d);
  border-color: #00aa77;
}
body[data-theme="underdark"] .stat-box:nth-child(even) .stat-score {
  background: linear-gradient(180deg, #0b041a, #070211);
  border-color: #6600bb;
}
body[data-theme="underdark"] .section-title {
  color: #00ffcc;
  border-bottom-color: #0a3328;
  text-shadow: 0 0 12px rgba(0,255,200,0.5);
}
body[data-theme="underdark"] input:focus,
body[data-theme="underdark"] textarea:focus,
body[data-theme="underdark"] select:focus {
  border-color: #00cc88;
  box-shadow: 0 0 10px rgba(0,200,136,0.3);
}
body[data-theme="underdark"] .btn-primary {
  color: var(--accent-gold-bright);
  border-color: var(--border-gold);
}
body[data-theme="underdark"] .btn-primary:hover {
  border-color: var(--accent-gold-bright);
  box-shadow: 0 0 18px rgba(0,200,136,0.45);
}
body[data-theme="underdark"] .tab-btn.active {
  border-left-color: var(--accent-gold);
  color: var(--accent-gold-bright);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-gold) 12%, transparent), transparent);
  box-shadow: inset 3px 0 10px rgba(0,180,120,0.14);
}

/* ─── PALADIN SPECIFIC OVERRIDES — divine golden light ─── */
body[data-theme="paladin"] .app-header {
  background: linear-gradient(180deg, #0d0c14 0%, #15121e 100%);
  border-bottom: 2px solid #c8a830;
  box-shadow: 0 2px 30px rgba(248,210,40,0.2);
}
body[data-theme="paladin"] .header-title {
  text-shadow: 0 0 30px rgba(255,240,80,0.5), 0 0 60px rgba(255,210,40,0.2);
}
body[data-theme="paladin"] .panel {
  border-color: #2e2840;
}
body[data-theme="paladin"] .stat-box {
  border-top: 2px solid #c8a830;
  box-shadow: 0 -2px 12px rgba(248,210,40,0.12);
}
body[data-theme="paladin"] .section-title {
  color: #f8d040;
  text-shadow: 0 0 10px rgba(255,220,40,0.3);
}
body[data-theme="paladin"] .btn-primary {
  background: linear-gradient(135deg, #2a2218, #18160e);
  color: #fff080;
  border-color: #c8a830;
  box-shadow: 0 0 10px rgba(248,210,40,0.1);
}
body[data-theme="paladin"] .btn-primary:hover {
  box-shadow: 0 0 20px rgba(255,220,40,0.4);
}
body[data-theme="paladin"] .tab-btn.active {
  border-left-color: #f8d040;
  color: #fff080;
  box-shadow: inset 2px 0 10px rgba(248,210,40,0.12);
}

/* ─── SHADOW RUNES OVERRIDES — shadow / void palette ─── */
body[data-theme="solo"] .section-title,
body[data-theme="solo-anim"] .section-title {
  color: #bb77ff;
  text-shadow: 0 0 10px rgba(180,80,255,0.4);
}
body[data-theme="solo"] .btn-primary,
body[data-theme="solo-anim"] .btn-primary {
  background: linear-gradient(135deg, #1a0820, #0c030c);
  color: #c875ff;
  border-color: #6a1a6a;
}
body[data-theme="solo"] .btn-primary:hover,
body[data-theme="solo-anim"] .btn-primary:hover {
  box-shadow: 0 0 18px rgba(180,60,255,0.5);
}

/* ─── ANIMATED THEME CANVAS ─── */
#theme-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  display: none;
}
body[data-theme="smoke"] #theme-canvas,
body[data-theme="ember"] #theme-canvas,
body[data-theme="fairy"] #theme-canvas,
body[data-theme="sakura-anim"] #theme-canvas,
body[data-theme="solo-anim"] #theme-canvas,
body[data-theme="storm"] #theme-canvas,
body[data-theme="abyss"] #theme-canvas,
body[data-theme="blizzard"] #theme-canvas,
body[data-theme="crimsonrain"] #theme-canvas,
body[data-theme="aurora"] #theme-canvas,
body[data-theme="voidanim"] #theme-canvas {
  display: block;
}

/* ─── SPRING ─── */
body[data-theme="spring"] {
  --bg-deepest: #010602;
  --bg-dark: #030d04;
  --bg-mid: #071508;
  --bg-panel: #0b1e0c;
  --bg-card: #0f2610;
  --bg-input: #071508;
  --border-dark: #143018;
  --border-mid: #245c2c;
  --border-gold: #58d068;
  --border-gold-bright: #88f898;
  --accent-gold: #60e070;
  --accent-gold-bright: #a0ffa8;
  --accent-amber: #c8e040;
  --accent-red: #e06090;
  --accent-red-bright: #ff90c0;
  --accent-crimson: #a02060;
  --accent-silver: #a8f0b0;
  --text-primary: #f0fff2;
  --text-secondary: #90e8a0;
  --text-muted: #3a7045;
  --text-gold: #70e878;
  --text-red: #ff80b0;
  --tab-active: #0b1e0c;
  --tab-inactive: #030d04;
  --shadow-gold: 0 0 28px rgba(80,210,100,0.38);
}

/* ─── CHINESE NEW YEAR ─── */
body[data-theme="chineseny"] {
  --bg-deepest: #080100;
  --bg-dark: #120200;
  --bg-mid: #1e0400;
  --bg-panel: #2a0600;
  --bg-card: #360800;
  --bg-input: #1e0400;
  --border-dark: #501000;
  --border-mid: #8a2800;
  --border-gold: #e8a000;
  --border-gold-bright: #ffcc00;
  --accent-gold: #ffb800;
  --accent-gold-bright: #ffe060;
  --accent-amber: #e06000;
  --accent-red: #ff2020;
  --accent-red-bright: #ff6060;
  --accent-crimson: #c00000;
  --accent-silver: #ffd080;
  --text-primary: #fff8e0;
  --text-secondary: #ffc040;
  --text-muted: #804010;
  --text-gold: #ffb800;
  --text-red: #ff5050;
  --tab-active: #2a0600;
  --tab-inactive: #120200;
  --shadow-gold: 0 0 30px rgba(240,160,0,0.45);
}

/* ─── BELTANE / MAY DAY ─── */
body[data-theme="beltane"] {
  --bg-deepest: #020100;
  --bg-dark: #060300;
  --bg-mid: #0e0700;
  --bg-panel: #160b00;
  --bg-card: #1e1000;
  --bg-input: #0e0700;
  --border-dark: #301800;
  --border-mid: #5a3000;
  --border-gold: #d08000;
  --border-gold-bright: #ffa820;
  --accent-gold: #e89000;
  --accent-gold-bright: #ffb840;
  --accent-amber: #c06000;
  --accent-red: #40a830;
  --accent-red-bright: #70d858;
  --accent-crimson: #206018;
  --accent-silver: #d0f080;
  --text-primary: #fff8e8;
  --text-secondary: #f0c060;
  --text-muted: #6a4010;
  --text-gold: #f0a000;
  --text-red: #80e060;
  --tab-active: #160b00;
  --tab-inactive: #060300;
  --shadow-gold: 0 0 28px rgba(220,140,0,0.42);
}

/* ─── MERMAY / SEA ─── */
body[data-theme="mermay"] {
  --bg-deepest: #000408;
  --bg-dark: #000810;
  --bg-mid: #000e1c;
  --bg-panel: #001428;
  --bg-card: #001a34;
  --bg-input: #000e1c;
  --border-dark: #002040;
  --border-mid: #004070;
  --border-gold: #00b8d0;
  --border-gold-bright: #40e8f8;
  --accent-gold: #00d0e8;
  --accent-gold-bright: #60f0ff;
  --accent-amber: #0088b0;
  --accent-red: #a060d0;
  --accent-red-bright: #d090ff;
  --accent-crimson: #6030a0;
  --accent-silver: #80e8f8;
  --text-primary: #e8f8ff;
  --text-secondary: #80e0f8;
  --text-muted: #206080;
  --text-gold: #40d8f0;
  --text-red: #c090ff;
  --tab-active: #001428;
  --tab-inactive: #000810;
  --shadow-gold: 0 0 30px rgba(0,200,225,0.40);
}

/* ─── MIDSUMMER / LITHA ─── */
body[data-theme="midsummer"] {
  --bg-deepest: #020308;
  --bg-dark: #040610;
  --bg-mid: #080c1c;
  --bg-panel: #0c1228;
  --bg-card: #101830;
  --bg-input: #080c1c;
  --border-dark: #182040;
  --border-mid: #2c3870;
  --border-gold: #f0c030;
  --border-gold-bright: #ffe060;
  --accent-gold: #f8d040;
  --accent-gold-bright: #ffe880;
  --accent-amber: #e08000;
  --accent-red: #4080e0;
  --accent-red-bright: #70b0ff;
  --accent-crimson: #2050a0;
  --accent-silver: #c0d8ff;
  --text-primary: #fffff8;
  --text-secondary: #f8e880;
  --text-muted: #485870;
  --text-gold: #f8d040;
  --text-red: #80b8ff;
  --tab-active: #0c1228;
  --tab-inactive: #040610;
  --shadow-gold: 0 0 30px rgba(240,190,40,0.40);
}

/* ─── MIDSUMMER FEAST ─── */
body[data-theme="feast"] {
  --bg-deepest: #040200;
  --bg-dark: #0a0400;
  --bg-mid: #140800;
  --bg-panel: #1e0c00;
  --bg-card: #281200;
  --bg-input: #140800;
  --border-dark: #3c1a00;
  --border-mid: #703200;
  --border-gold: #e07800;
  --border-gold-bright: #ffaa20;
  --accent-gold: #f08800;
  --accent-gold-bright: #ffbb40;
  --accent-amber: #c05800;
  --accent-red: #d04020;
  --accent-red-bright: #ff6840;
  --accent-crimson: #901810;
  --accent-silver: #f8c060;
  --text-primary: #fff8ee;
  --text-secondary: #f8c060;
  --text-muted: #784020;
  --text-gold: #f09000;
  --text-red: #ff7050;
  --tab-active: #1e0c00;
  --tab-inactive: #0a0400;
  --shadow-gold: 0 0 28px rgba(230,130,0,0.42);
}

/* ─── GION MATSURI — Kyoto festival: crimson, gold, indigo night ─── */
body[data-theme="gionmatsuri"] {
  --bg-deepest: #040108;
  --bg-dark: #080210;
  --bg-mid: #10041c;
  --bg-panel: #180628;
  --bg-card: #200830;
  --bg-input: #10041c;
  --border-dark: #380e50;
  --border-mid: #6a1870;
  --border-gold: #e8600a;
  --border-gold-bright: #ff8830;
  --accent-gold: #ff7a18;
  --accent-gold-bright: #ffaa55;
  --accent-amber: #cc4400;
  --accent-red: #e8100a;
  --accent-red-bright: #ff3820;
  --accent-crimson: #9a0808;
  --accent-silver: #ffcc88;
  --text-primary: #fff4e8;
  --text-secondary: #ffaa66;
  --text-muted: #7a3840;
  --text-gold: #ff8830;
  --text-red: #ff4422;
  --tab-active: #180628;
  --tab-inactive: #080210;
  --shadow-gold: 0 0 28px rgba(255,120,20,0.45);
}

/* ─── TORO NAGASHI — Floating lanterns on dark water ─── */
body[data-theme="toronagashi"] {
  --bg-deepest: #010408;
  --bg-dark: #020810;
  --bg-mid: #041018;
  --bg-panel: #061820;
  --bg-card: #08202a;
  --bg-input: #041018;
  --border-dark: #0c2838;
  --border-mid: #184860;
  --border-gold: #f0b030;
  --border-gold-bright: #ffcc60;
  --accent-gold: #f8c040;
  --accent-gold-bright: #ffe080;
  --accent-amber: #c07010;
  --accent-red: #e85010;
  --accent-red-bright: #ff7830;
  --accent-crimson: #903010;
  --accent-silver: #a0d8e8;
  --text-primary: #f0f8ff;
  --text-secondary: #f8d070;
  --text-muted: #305868;
  --text-gold: #f8c040;
  --text-red: #ff8040;
  --tab-active: #061820;
  --tab-inactive: #020810;
  --shadow-gold: 0 0 32px rgba(240,180,40,0.40);
}

/* ─── KAGAMI BIRAKI — New Year rice cake: white, gold, red, pine ─── */
body[data-theme="kagamibiraki"] {
  --bg-deepest: #010304;
  --bg-dark: #02060a;
  --bg-mid: #040e14;
  --bg-panel: #071520;
  --bg-card: #0a1c28;
  --bg-input: #040e14;
  --border-dark: #0e2c3c;
  --border-mid: #1a4a60;
  --border-gold: #d4a830;
  --border-gold-bright: #f0cc60;
  --accent-gold: #e8b840;
  --accent-gold-bright: #f8d870;
  --accent-amber: #b07818;
  --accent-red: #c01820;
  --accent-red-bright: #e83030;
  --accent-crimson: #880e18;
  --accent-silver: #c8e8f0;
  --text-primary: #f0f8ff;
  --text-secondary: #e8c870;
  --text-muted: #3a5868;
  --text-gold: #e8b840;
  --text-red: #e03838;
  --tab-active: #071520;
  --tab-inactive: #02060a;
  --shadow-gold: 0 0 24px rgba(220,175,40,0.38);
}

body[data-theme="halloween"] #theme-canvas,
body[data-theme="christmas"] #theme-canvas,
body[data-theme="newyear"] #theme-canvas,
body[data-theme="valentine"] #theme-canvas,
body[data-theme="easter"] #theme-canvas,
body[data-theme="summer"] #theme-canvas,
body[data-theme="autumn"] #theme-canvas,
body[data-theme="winterfrost"] #theme-canvas,
body[data-theme="spring"] #theme-canvas,
body[data-theme="chineseny"] #theme-canvas,
body[data-theme="beltane"] #theme-canvas,
body[data-theme="mermay"] #theme-canvas,
body[data-theme="midsummer"] #theme-canvas,
body[data-theme="feast"] #theme-canvas,
body[data-theme="gionmatsuri"] #theme-canvas,
body[data-theme="toronagashi"] #theme-canvas,
body[data-theme="kagamibiraki"] #theme-canvas {
  display: block;
}


/* ═══════════════════════════════════════════
   REWARDS SYSTEM — Titles, Auras, Exclusive Themes
═══════════════════════════════════════════ */

/* ── Character Title Badge (below char name in Identity panel) ── */
#charTitleBadge {
  display: none;
  align-items: center;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 3px 10px;
  margin-top: 5px;
  width: fit-content;
  animation: titleShimmer 3s ease-in-out infinite alternate;
  cursor: default;
  user-select: none;
}
@keyframes titleShimmer {
  from { opacity: 0.8; text-shadow: none; }
  to   { opacity: 1;   text-shadow: 0 0 8px var(--accent-gold); }
}

/* ── Rewards Panel ── */
#achvRewardsPanel {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}
.rewards-section-header {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-dark);
}
.rewards-title-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.rewards-title-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-mid);
  background: rgba(0,0,0,0.25);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.rewards-title-chip:hover:not(.locked) {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(212,175,55,0.1);
}
.rewards-title-chip.active {
  border-color: var(--accent-gold);
  background: rgba(212,175,55,0.15);
  color: var(--accent-gold);
  box-shadow: 0 0 8px rgba(212,175,55,0.3);
}
.rewards-title-chip.locked {
  cursor: default;
  opacity: 0.5;
}
.rewards-active-dot {
  font-size: 8px;
  color: var(--accent-gold);
  margin-left: 2px;
}
.rewards-empty {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}
.rewards-clear-btn {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 2px;
}
.rewards-clear-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red-bright);
}

/* ── Title Filter Bar ── */
.title-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
}
.title-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 20px;
  border: 1px solid var(--border-dark);
  background: transparent;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
}
.title-filter-pill:hover:not(.active) {
  border-color: var(--border-gold);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}
.title-filter-pill.active {
  border-color: var(--accent-gold);
  background: rgba(212,175,55,0.15);
  color: var(--accent-gold-bright);
  box-shadow: 0 0 10px rgba(212,175,55,0.2), inset 0 0 6px rgba(212,175,55,0.07);
}
.title-filter-pill-icon {
  font-size: 11px;
  line-height: 1;
}
.title-filter-pill-label {
  line-height: 1;
}
.title-filter-pill-count {
  font-size: 8.5px;
  opacity: 0.55;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 1px 5px;
  letter-spacing: 0;
  font-family: 'Crimson Text', serif;
  font-weight: 600;
}
.title-filter-pill.active .title-filter-pill-count {
  opacity: 0.75;
  background: rgba(212,175,55,0.2);
}

/* ── Portrait Aura Canvas ── */
#portraitAuraCanvas {
  pointer-events: none;
  border-radius: var(--radius-lg);
}

/* ═══════════════════════════════════════════
   NEW REWARDS: Flavor Text, Showcase, Stat Colors
═══════════════════════════════════════════ */

/* ── Portrait Flavor Text ── */
#portraitFlavorText {
  font-family: 'IM Fell English', 'Crimson Text', 'Palatino', serif;
  font-size: 19px;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 1.4;
  opacity: 0.9;
  animation: flavorFadeIn 0.6s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes flavorFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

/* ── Achievement Showcase Badges ── */
#achievementShowcase {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}
.showcase-badge {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-panel));
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 4px 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  font-family: 'Cinzel', serif;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  box-shadow: 0 0 6px rgba(212,175,55,0.2);
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
  user-select: none;
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  #achievementShowcase {
    flex-direction: column;
    align-items: center;
  }
  .showcase-badge {
    flex-shrink: 1;
  }
}
.showcase-badge:hover {
  box-shadow: 0 0 12px rgba(212,175,55,0.5);
  border-color: var(--accent-gold-bright);
}
@keyframes badgePop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Stat Box Color Transitions ── */
.stat-box {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.stat-box .stat-score input {
  transition: color 0.35s ease;
}
/* When a color palette is active, the stat-mod label also gets a subtle tint */
.stat-box[style*="border-color"] .stat-mod {
  transition: color 0.35s ease;
}
.stat-box[style*="border-color"] .stat-name {
  opacity: 0.9;
}

/* ── Tier 1: Veteran's Steel — slow steady pulse ── */
@keyframes sc-pulse-slow {
  0%,100% { box-shadow: 0 0 8px var(--stat-box-color,#60a5fa)66, 0 0 2px var(--stat-box-color,#60a5fa)33; }
  50%     { box-shadow: 0 0 20px var(--stat-box-color,#60a5fa)cc, 0 0 8px var(--stat-box-color,#60a5fa)88, inset 0 0 8px var(--stat-box-color,#60a5fa)22; }
}
.sc-pulse-slow { animation: sc-pulse-slow 3s ease-in-out infinite; }

/* ── Tier 2: Hero's Gold — medium warm pulse ── */
@keyframes sc-pulse-medium {
  0%,100% { box-shadow: 0 0 10px var(--stat-box-color,#fbbf24)66, 0 0 3px var(--stat-box-color,#fbbf24)44; }
  50%     { box-shadow: 0 0 24px var(--stat-box-color,#fbbf24)ee, 0 0 10px var(--stat-box-color,#fbbf24)99, inset 0 0 10px var(--stat-box-color,#fbbf24)28; }
}
.sc-pulse-medium { animation: sc-pulse-medium 2s ease-in-out infinite; }

/* ── Tier 3: Blood & Fire — aggressive flicker ── */
@keyframes sc-pulse-flicker {
  0%,100% { box-shadow: 0 0 12px var(--stat-box-color,#f87171)88, 0 0 4px var(--stat-box-color,#f87171)55; }
  20%     { box-shadow: 0 0 28px var(--stat-box-color,#f87171)ff, 0 0 12px var(--stat-box-color,#f87171)cc, inset 0 0 10px var(--stat-box-color,#f87171)33; }
  40%     { box-shadow: 0 0 8px var(--stat-box-color,#f87171)44; }
  60%     { box-shadow: 0 0 32px var(--stat-box-color,#f87171)ff, 0 0 16px var(--stat-box-color,#f87171)dd, inset 0 0 14px var(--stat-box-color,#f87171)44; }
  80%     { box-shadow: 0 0 6px var(--stat-box-color,#f87171)33; }
}
.sc-pulse-flicker { animation: sc-pulse-flicker 1.4s ease-in-out infinite; }

/* ── Tier 4: Nature's Bounty — gentle breathe ── */
@keyframes sc-pulse-breathe {
  0%,100% { box-shadow: 0 0 8px var(--stat-box-color,#4ade80)55, 0 0 2px var(--stat-box-color,#4ade80)33; transform: scale(1); }
  50%     { box-shadow: 0 0 22px var(--stat-box-color,#4ade80)bb, 0 0 8px var(--stat-box-color,#4ade80)77, inset 0 0 8px var(--stat-box-color,#4ade80)22; transform: scale(1.012); }
}
.sc-pulse-breathe { animation: sc-pulse-breathe 2.5s ease-in-out infinite; }

/* ── Tier 5: Arcane Mastery — hue-rotate rainbow pulse ── */
@keyframes sc-pulse-arcane {
  0%   { box-shadow: 0 0 14px var(--stat-box-color,#c084fc)99, 0 0 5px var(--stat-box-color,#c084fc)66; filter: hue-rotate(0deg) brightness(1); }
  33%  { box-shadow: 0 0 28px var(--stat-box-color,#c084fc)ee, 0 0 12px var(--stat-box-color,#c084fc)aa, inset 0 0 10px var(--stat-box-color,#c084fc)33; filter: hue-rotate(60deg) brightness(1.2); }
  66%  { box-shadow: 0 0 20px var(--stat-box-color,#c084fc)bb, 0 0 6px var(--stat-box-color,#c084fc)77; filter: hue-rotate(120deg) brightness(1.1); }
  100% { box-shadow: 0 0 14px var(--stat-box-color,#c084fc)99, 0 0 5px var(--stat-box-color,#c084fc)66; filter: hue-rotate(360deg) brightness(1); }
}
.sc-pulse-arcane { animation: sc-pulse-arcane 2.2s linear infinite; }

/* ── Tier 6: Void Touched — mythic chromatic shimmer ── */
@keyframes sc-pulse-myth {
  0%   { box-shadow: 0 0 16px #00e5ffcc, 0 0 32px #00e5ff66, inset 0 0 8px #00e5ff22; filter: hue-rotate(0deg) brightness(1.1); }
  25%  { box-shadow: 0 0 28px #a855f7cc, 0 0 48px #a855f777, inset 0 0 14px #a855f733; filter: hue-rotate(90deg) brightness(1.3); }
  50%  { box-shadow: 0 0 36px #00e5ffff, 0 0 60px #00e5ffaa, inset 0 0 18px #00e5ff44; filter: hue-rotate(180deg) brightness(1.4); }
  75%  { box-shadow: 0 0 28px #e879f9cc, 0 0 48px #e879f977, inset 0 0 14px #e879f933; filter: hue-rotate(270deg) brightness(1.3); }
  100% { box-shadow: 0 0 16px #00e5ffcc, 0 0 32px #00e5ff66, inset 0 0 8px #00e5ff22; filter: hue-rotate(360deg) brightness(1.1); }
}
.sc-pulse-myth { animation: sc-pulse-myth 1.8s linear infinite; }

/* ── Rewards panel: color swatch in stat color chips ── */
.rewards-title-chip .stat-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ══════════════════════════════════════════
   EXCLUSIVE THEMES — 7 unlock tiers
══════════════════════════════════════════ */

/* ── Obsidian (25 achv) ── */
/* ── Sepia Codex (25 achv) ── */
body[data-theme="sepia_codex"] {
  --bg-deepest: #0d0900;
  --bg-dark: #160f02;
  --bg-mid: #1e1504;
  --bg-panel: #261c06;
  --bg-card: #2e2208;
  --bg-input: #1e1504;
  --border-dark: #3a2a08;
  --border-mid: #5a4010;
  --border-gold: #8a6020;
  --border-gold-bright: #c09030;
  --accent-gold: #b07828;
  --accent-gold-bright: #d4a843;
  --accent-amber: #8a5818;
  --accent-red: #7a3810;
  --accent-red-bright: #a05020;
  --accent-crimson: #4a2008;
  --accent-silver: #c0a060;
  --text-primary: #e8d8b0;
  --text-secondary: #b09060;
  --text-muted: #604830;
  --text-gold: #c0a050;
  --text-red: #a06030;
  --tab-active: #261c06;
  --tab-inactive: #160f02;
  --shadow-gold: 0 0 18px rgba(180,140,60,0.4);
}

/* ── Neon Dungeon (50 achv) ── */
body[data-theme="neon_dungeon"] {
  --bg-deepest: #000008;
  --bg-dark: #00000f;
  --bg-mid: #000018;
  --bg-panel: #000022;
  --bg-card: #00002c;
  --bg-input: #000018;
  --border-dark: #0a0030;
  --border-mid: #1a0060;
  --border-gold: #00d0ff;
  --border-gold-bright: #60f0ff;
  --accent-gold: #00c8f0;
  --accent-gold-bright: #80f8ff;
  --accent-amber: #ff00cc;
  --accent-red: #ff2080;
  --accent-red-bright: #ff60b0;
  --accent-crimson: #800040;
  --accent-silver: #a0e8ff;
  --text-primary: #e0f8ff;
  --text-secondary: #00d8ff;
  --text-muted: #204060;
  --text-gold: #00d0f0;
  --text-red: #ff40a0;
  --tab-active: #000022;
  --tab-inactive: #00000f;
  --shadow-gold: 0 0 24px rgba(0,200,240,0.55);
}

/* ── Monochrome (75 achv) ── */
body[data-theme="monochrome"] {
  --bg-deepest: #020202;
  --bg-dark: #080808;
  --bg-mid: #101010;
  --bg-panel: #181818;
  --bg-card: #202020;
  --bg-input: #101010;
  --border-dark: #282828;
  --border-mid: #404040;
  --border-gold: #686868;
  --border-gold-bright: #989898;
  --accent-gold: #808080;
  --accent-gold-bright: #c0c0c0;
  --accent-amber: #606060;
  --accent-red: #909090;
  --accent-red-bright: #b8b8b8;
  --accent-crimson: #383838;
  --accent-silver: #a8a8a8;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted: #484848;
  --text-gold: #909090;
  --text-red: #c0c0c0;
  --tab-active: #181818;
  --tab-inactive: #080808;
  --shadow-gold: 0 0 16px rgba(160,160,160,0.4);
}

/* ── Infected (100 achv) ── */
body[data-theme="infected"] {
  --bg-deepest: #010800;
  --bg-dark: #030f00;
  --bg-mid: #061600;
  --bg-panel: #0a1e00;
  --bg-card: #0e2600;
  --bg-input: #061600;
  --border-dark: #143000;
  --border-mid: #285000;
  --border-gold: #508000;
  --border-gold-bright: #80b800;
  --accent-gold: #60a000;
  --accent-gold-bright: #90d000;
  --accent-amber: #407800;
  --accent-red: #a0c800;
  --accent-red-bright: #c8e840;
  --accent-crimson: #204800;
  --accent-silver: #78b820;
  --text-primary: #d8f0a0;
  --text-secondary: #88b830;
  --text-muted: #305010;
  --text-gold: #90c020;
  --text-red: #b0d840;
  --tab-active: #0a1e00;
  --tab-inactive: #030f00;
  --shadow-gold: 0 0 20px rgba(100,170,0,0.5);
}

/* ── Frozen Tomb (125 achv) ── */
body[data-theme="frozen_tomb"] {
  --bg-deepest: #000810;
  --bg-dark: #000e1c;
  --bg-mid: #001428;
  --bg-panel: #001a34;
  --bg-card: #002040;
  --bg-input: #001428;
  --border-dark: #003060;
  --border-mid: #005090;
  --border-gold: #0080c8;
  --border-gold-bright: #40b8f8;
  --accent-gold: #0098e0;
  --accent-gold-bright: #60d8ff;
  --accent-amber: #0070a0;
  --accent-red: #40c8ff;
  --accent-red-bright: #90e8ff;
  --accent-crimson: #003060;
  --accent-silver: #80d0f8;
  --text-primary: #d8f0ff;
  --text-secondary: #70c8f0;
  --text-muted: #205070;
  --text-gold: #60c0f0;
  --text-red: #90e0ff;
  --tab-active: #001a34;
  --tab-inactive: #000e1c;
  --shadow-gold: 0 0 22px rgba(0,160,230,0.5);
}

/* ── Forge of Ages (150 achv) ── */
body[data-theme="forge_of_ages"] {
  --bg-deepest: #0e0400;
  --bg-dark: #180800;
  --bg-mid: #240e00;
  --bg-panel: #301400;
  --bg-card: #3c1a00;
  --bg-input: #240e00;
  --border-dark: #502000;
  --border-mid: #803400;
  --border-gold: #c05800;
  --border-gold-bright: #e88020;
  --accent-gold: #d06010;
  --accent-gold-bright: #f09030;
  --accent-amber: #a04800;
  --accent-red: #ff7020;
  --accent-red-bright: #ff9850;
  --accent-crimson: #602800;
  --accent-silver: #e07840;
  --text-primary: #ffe0b0;
  --text-secondary: #d07830;
  --text-muted: #603010;
  --text-gold: #e08020;
  --text-red: #ff8040;
  --tab-active: #301400;
  --tab-inactive: #180800;
  --shadow-gold: 0 0 22px rgba(220,100,0,0.55);
}

/* ── The Dreaming (175 achv) ── */
body[data-theme="the_dreaming"] {
  --bg-deepest: #040010;
  --bg-dark: #08001e;
  --bg-mid: #0e002e;
  --bg-panel: #14003e;
  --bg-card: #1a0050;
  --bg-input: #0e002e;
  --border-dark: #280070;
  --border-mid: #4400a0;
  --border-gold: #8820e0;
  --border-gold-bright: #c060ff;
  --accent-gold: #9030e8;
  --accent-gold-bright: #d080ff;
  --accent-amber: #6010b0;
  --accent-red: #ff80d8;
  --accent-red-bright: #ffb0f0;
  --accent-crimson: #380060;
  --accent-silver: #b868f8;
  --text-primary: #f0e0ff;
  --text-secondary: #c080ff;
  --text-muted: #402070;
  --text-gold: #b870ff;
  --text-red: #ff90e8;
  --tab-active: #14003e;
  --tab-inactive: #08001e;
  --shadow-gold: 0 0 24px rgba(160,60,255,0.55);
}

body[data-theme="obsidian"] {
  --bg-deepest: #000000;
  --bg-dark: #050505;
  --bg-mid: #0a0a0a;
  --bg-panel: #0f0f0f;
  --bg-card: #141414;
  --bg-input: #0a0a0a;
  --border-dark: #1e1e1e;
  --border-mid: #383838;
  --border-gold: #606060;
  --border-gold-bright: #909090;
  --accent-gold: #787878;
  --accent-gold-bright: #b0b0b0;
  --accent-amber: #505050;
  --accent-red: #6b2020;
  --accent-red-bright: #a03030;
  --accent-crimson: #401010;
  --accent-silver: #909090;
  --text-primary: #e8e8e8;
  --text-secondary: #a0a0a0;
  --text-muted: #505050;
  --text-gold: #808080;
  --text-red: #b04040;
  --tab-active: #0f0f0f;
  --tab-inactive: #050505;
  --shadow-gold: 0 0 20px rgba(100,100,100,0.4);
}

/* ── Crimson King (50 achv) ── */
body[data-theme="crimsonking"] {
  --bg-deepest: #060000;
  --bg-dark: #0e0000;
  --bg-mid: #180000;
  --bg-panel: #220000;
  --bg-card: #2c0000;
  --bg-input: #180000;
  --border-dark: #400000;
  --border-mid: #780000;
  --border-gold: #c80000;
  --border-gold-bright: #ff2020;
  --accent-gold: #e00000;
  --accent-gold-bright: #ff4040;
  --accent-amber: #b00000;
  --accent-red: #ff6060;
  --accent-red-bright: #ff9090;
  --accent-crimson: #800000;
  --accent-silver: #ff8080;
  --text-primary: #fff0f0;
  --text-secondary: #ff8080;
  --text-muted: #6a2020;
  --text-gold: #e00000;
  --text-red: #ff6060;
  --tab-active: #220000;
  --tab-inactive: #0e0000;
  --shadow-gold: 0 0 28px rgba(200,0,0,0.55);
}

/* ── Void Walker (75 achv) ── */
body[data-theme="voidwalker"] {
  --bg-deepest: #000004;
  --bg-dark: #000008;
  --bg-mid: #000010;
  --bg-panel: #00001a;
  --bg-card: #000024;
  --bg-input: #000010;
  --border-dark: #080030;
  --border-mid: #180060;
  --border-gold: #5000c0;
  --border-gold-bright: #8020ff;
  --accent-gold: #6010d0;
  --accent-gold-bright: #a040ff;
  --accent-amber: #400090;
  --accent-red: #00c8ff;
  --accent-red-bright: #60e8ff;
  --accent-crimson: #002060;
  --accent-silver: #8060ff;
  --text-primary: #f0e8ff;
  --text-secondary: #a060ff;
  --text-muted: #302060;
  --text-gold: #8040e0;
  --text-red: #40d0ff;
  --tab-active: #00001a;
  --tab-inactive: #000008;
  --shadow-gold: 0 0 30px rgba(100,20,200,0.55);
}

/* ── Celestial (100 achv) ── */
body[data-theme="celestial"] {
  --bg-deepest: #020408;
  --bg-dark: #040810;
  --bg-mid: #060e1c;
  --bg-panel: #0a1428;
  --bg-card: #0e1a34;
  --bg-input: #060e1c;
  --border-dark: #102040;
  --border-mid: #204080;
  --border-gold: #f0d060;
  --border-gold-bright: #fff080;
  --accent-gold: #f8e070;
  --accent-gold-bright: #fffaa0;
  --accent-amber: #e0b820;
  --accent-red: #80c8ff;
  --accent-red-bright: #c0e8ff;
  --accent-crimson: #4080c0;
  --accent-silver: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #f0e8c0;
  --text-muted: #4060a0;
  --text-gold: #f8e070;
  --text-red: #a0d8ff;
  --tab-active: #0a1428;
  --tab-inactive: #040810;
  --shadow-gold: 0 0 32px rgba(240,210,80,0.5);
}

/* ── Eldritch (125 achv) ── */
body[data-theme="eldritch"] {
  --bg-deepest: #000602;
  --bg-dark: #000e04;
  --bg-mid: #001808;
  --bg-panel: #00220c;
  --bg-card: #002c10;
  --bg-input: #001808;
  --border-dark: #004018;
  --border-mid: #007830;
  --border-gold: #00c850;
  --border-gold-bright: #20ff70;
  --accent-gold: #00e060;
  --accent-gold-bright: #40ff90;
  --accent-amber: #00a040;
  --accent-red: #ff60c8;
  --accent-red-bright: #ff90e0;
  --accent-crimson: #c000a0;
  --accent-silver: #80ffb0;
  --text-primary: #e8fff0;
  --text-secondary: #60ff90;
  --text-muted: #206840;
  --text-gold: #00e060;
  --text-red: #ff80d0;
  --tab-active: #00220c;
  --tab-inactive: #000e04;
  --shadow-gold: 0 0 30px rgba(0,200,80,0.5);
}

/* ── Ascendant (150 achv) ── */
body[data-theme="ascendant"] {
  --bg-deepest: #020206;
  --bg-dark: #060610;
  --bg-mid: #0c0c1e;
  --bg-panel: #121230;
  --bg-card: #181842;
  --bg-input: #0c0c1e;
  --border-dark: #202060;
  --border-mid: #4040a0;
  --border-gold: #e0c0ff;
  --border-gold-bright: #ffffff;
  --accent-gold: #d8b0ff;
  --accent-gold-bright: #f0d8ff;
  --accent-amber: #b080e0;
  --accent-red: #80e8ff;
  --accent-red-bright: #c0f8ff;
  --accent-crimson: #6040b0;
  --accent-silver: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #e0c8ff;
  --text-muted: #6060a0;
  --text-gold: #d8b0ff;
  --text-red: #a0ecff;
  --tab-active: #121230;
  --tab-inactive: #060610;
  --shadow-gold: 0 0 34px rgba(200,160,255,0.55);
}

/* ── Primordial (175 achv) ── */
body[data-theme="primordial"] {
  --bg-deepest: #050100;
  --bg-dark: #0e0300;
  --bg-mid: #180600;
  --bg-panel: #220900;
  --bg-card: #2e0c00;
  --bg-input: #180600;
  --border-dark: #4a1200;
  --border-mid: #8b2800;
  --border-gold: #e85a00;
  --border-gold-bright: #ff8c20;
  --accent-gold: #ff6a00;
  --accent-gold-bright: #ff9a40;
  --accent-amber: #cc4400;
  --accent-red: #ffcc00;
  --accent-red-bright: #ffee60;
  --accent-crimson: #991a00;
  --accent-silver: #ff8040;
  --text-primary: #fff5ee;
  --text-secondary: #ff9a60;
  --text-muted: #6b2800;
  --text-gold: #ff7a20;
  --text-red: #ffcc44;
  --tab-active: #220900;
  --tab-inactive: #0e0300;
  --shadow-gold: 0 0 36px rgba(232,90,0,0.65), 0 0 72px rgba(200,40,0,0.3);
}

/* ── Godslayer (200 achv) ── */
body[data-theme="godslayer"] {
  --bg-deepest: #010105;
  --bg-dark: #020208;
  --bg-mid: #04040e;
  --bg-panel: #07071a;
  --bg-card: #0a0a24;
  --bg-input: #04040e;
  --border-dark: #101038;
  --border-mid: #282870;
  --border-gold: #c0a0ff;
  --border-gold-bright: #ffffff;
  --accent-gold: #d0b0ff;
  --accent-gold-bright: #ffffff;
  --accent-amber: #9060e0;
  --accent-red: #60c0ff;
  --accent-red-bright: #b0e8ff;
  --accent-crimson: #4030a0;
  --accent-silver: #ffffff;
  --text-primary: #f8f8ff;
  --text-secondary: #c8b0ff;
  --text-muted: #404080;
  --text-gold: #d8c0ff;
  --text-red: #90d8ff;
  --tab-active: #07071a;
  --tab-inactive: #020208;
  --shadow-gold: 0 0 40px rgba(180,140,255,0.6), 0 0 80px rgba(100,80,255,0.25), 0 0 120px rgba(255,255,255,0.1);
}

/* ── The Absolute (176 achv — all) ── */
body[data-theme="absolute"] {
  --bg-deepest: #030303;
  --bg-dark: #080808;
  --bg-mid: #101010;
  --bg-panel: #181818;
  --bg-card: #202020;
  --bg-input: #101010;
  --border-dark: #303030;
  --border-mid: #606060;
  --border-gold: #ffd700;
  --border-gold-bright: #ffffff;
  --accent-gold: #ffd700;
  --accent-gold-bright: #ffffff;
  --accent-amber: #ff8c00;
  --accent-red: #ff2080;
  --accent-red-bright: #ff60b0;
  --accent-crimson: #c00060;
  --accent-silver: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #ffd700;
  --text-muted: #606060;
  --text-gold: #ffd700;
  --text-red: #ff60b0;
  --tab-active: #181818;
  --tab-inactive: #080808;
  --shadow-gold: 0 0 40px rgba(255,215,0,0.7), 0 0 80px rgba(255,215,0,0.3);
}
body[data-theme="absolute"] .portrait-rank-frame::before {
  animation: legendRotateBG 2s linear infinite !important;
  filter: brightness(1.4);
}

/* Canvas for exclusive animated themes */
body[data-theme="obsidian"] #theme-canvas,
body[data-theme="crimsonking"] #theme-canvas,
body[data-theme="celestial"] #theme-canvas,
body[data-theme="eldritch"] #theme-canvas,
body[data-theme="ascendant"] #theme-canvas,
body[data-theme="absolute"] #theme-canvas,
body[data-theme="primordial"] #theme-canvas,
body[data-theme="godslayer"] #theme-canvas,
body[data-theme="sepia_codex"] #theme-canvas,
body[data-theme="neon_dungeon"] #theme-canvas,
body[data-theme="monochrome"] #theme-canvas,
body[data-theme="infected"] #theme-canvas,
body[data-theme="frozen_tomb"] #theme-canvas,
body[data-theme="forge_of_ages"] #theme-canvas,
body[data-theme="the_dreaming"] #theme-canvas { display: block; }

/* VoidWalker canvas goes BEHIND everything */
body[data-theme="voidwalker"] #theme-canvas {
  display: block;
  z-index: -1;
}

/* Theme buttons for exclusive themes */
.theme-btn[data-theme="obsidian"]    { background:#0f0f0f; color:#808080; border-color:#383838; }
.theme-btn[data-theme="obsidian"].active { border-color:#b0b0b0; }
.theme-btn[data-theme="sepia_codex"]   { background:linear-gradient(135deg,#261c06,#160f02); color:#c0a050; border-color:#5a4010; }
.theme-btn[data-theme="sepia_codex"].active { border-color:#d4a843; box-shadow:0 0 10px rgba(180,140,60,0.4); }
.theme-btn[data-theme="neon_dungeon"]  { background:linear-gradient(135deg,#000022,#00000f); color:#00d8ff; border-color:#1a0060; }
.theme-btn[data-theme="neon_dungeon"].active { border-color:#60f0ff; box-shadow:0 0 14px rgba(0,210,255,0.6); }
.theme-btn[data-theme="monochrome"]    { background:linear-gradient(135deg,#181818,#060606); color:#909090; border-color:#404040; }
.theme-btn[data-theme="monochrome"].active { border-color:#c0c0c0; box-shadow:0 0 10px rgba(160,160,160,0.4); }
.theme-btn[data-theme="infected"]      { background:linear-gradient(135deg,#0a1e00,#030f00); color:#90c020; border-color:#285000; }
.theme-btn[data-theme="infected"].active { border-color:#b8e030; box-shadow:0 0 12px rgba(120,190,0,0.5); }
.theme-btn[data-theme="frozen_tomb"]   { background:linear-gradient(135deg,#001a34,#000e1c); color:#60c0f0; border-color:#005090; }
.theme-btn[data-theme="frozen_tomb"].active { border-color:#90e8ff; box-shadow:0 0 14px rgba(0,180,240,0.5); }
.theme-btn[data-theme="forge_of_ages"] { background:linear-gradient(135deg,#301400,#180800); color:#e08020; border-color:#803400; }
.theme-btn[data-theme="forge_of_ages"].active { border-color:#f09030; box-shadow:0 0 14px rgba(220,100,0,0.5); }
.theme-btn[data-theme="the_dreaming"]  { background:linear-gradient(135deg,#14003e,#08001e); color:#c080ff; border-color:#4400a0; }
.theme-btn[data-theme="the_dreaming"].active { border-color:#d080ff; box-shadow:0 0 14px rgba(160,60,255,0.55); }
.theme-btn[data-theme="crimsonking"] { background:linear-gradient(135deg,#220000,#0e0000); color:#e00000; border-color:#780000; }
.theme-btn[data-theme="crimsonking"].active { border-color:#ff4040; }
.theme-btn[data-theme="voidwalker"]  { background:linear-gradient(135deg,#00001a,#000008); color:#6010d0; border-color:#180060; }
.theme-btn[data-theme="voidwalker"].active { border-color:#a040ff; }
.theme-btn[data-theme="celestial"]   { background:linear-gradient(135deg,#0a1428,#040810); color:#f8e070; border-color:#204080; }
.theme-btn[data-theme="celestial"].active { border-color:#fffaa0; }
.theme-btn[data-theme="eldritch"]    { background:linear-gradient(135deg,#00220c,#000e04); color:#00e060; border-color:#007830; }
.theme-btn[data-theme="eldritch"].active { border-color:#40ff90; }
.theme-btn[data-theme="ascendant"]   { background:linear-gradient(135deg,#121230,#060610); color:#d8b0ff; border-color:#4040a0; }
.theme-btn[data-theme="ascendant"].active { border-color:#f0d8ff; }
.theme-btn[data-theme="absolute"]    { background:linear-gradient(135deg,#181818,#080808); color:#ffd700; border-color:#606060; }
.theme-btn[data-theme="absolute"].active { border-color:#ffffff; box-shadow:0 0 16px rgba(255,215,0,0.6); }

.theme-btn[data-theme="primordial"] { background:linear-gradient(135deg,#220900,#0e0300); color:#ff6a00; border-color:#8b2800; }
.theme-btn[data-theme="primordial"].active { border-color:#ff9a40; box-shadow:0 0 14px rgba(232,90,0,0.5); }
.theme-btn[data-theme="godslayer"]  { background:linear-gradient(135deg,#07071a,#020208); color:#d0b0ff; border-color:#282870; }
.theme-btn[data-theme="godslayer"].active  { border-color:#ffffff; box-shadow:0 0 16px rgba(180,140,255,0.6); }

/* Smoke particle */
@keyframes smokeRise {
  0%   { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
  15%  { opacity: 0.18; }
  70%  { opacity: 0.12; }
  100% { transform: translateY(-100vh) translateX(var(--dx,30px)) scale(2.5); opacity: 0; }
}
/* Ember particle */
@keyframes emberFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: translateY(var(--dy,-120px)) translateX(var(--dx,40px)); opacity: 0; }
}
@keyframes emberGlow {
  0%, 100% { box-shadow: 0 0 3px 1px #ff6020; }
  50%       { box-shadow: 0 0 6px 3px #ffaa20; }
}
/* Fairy particle */
@keyframes fairyFloat {
  0%   { transform: translate(0,0) scale(1); opacity:0; }
  10%  { opacity:1; }
  50%  { opacity:0.9; }
  100% { transform: translate(var(--fdx,40px), var(--fdy,-80px)) scale(0.4); opacity:0; }
}
@keyframes fairyPulse {
  0%,100% { box-shadow: 0 0 4px 2px var(--fairy-color, #c090ff); }
  50%      { box-shadow: 0 0 10px 5px var(--fairy-color, #e0b8ff); }
}

/* ─── GEAR / SETTINGS BUTTON ─── */
.settings-btn {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  color: var(--accent-gold);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
}
.settings-btn:hover {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-card));
  box-shadow: 0 0 12px rgba(212,168,67,0.3);
  transform: rotate(30deg);
}

/* ─── SETTINGS PANEL ─── */
.settings-panel {
  position: fixed;
  top: 68px;
  right: 12px;
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px var(--shadow-gold);
  padding: 12px 12px 16px;
  z-index: 999;
  min-width: 240px;
  max-width: 260px;
  display: none;
  animation: settingsFadeIn 0.18s ease;
  max-height: calc(100vh - 90px);
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.settings-panel.open { display: flex; }

@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-gold);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* ── THEME CATEGORY TABS ── */
.theme-cat-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.theme-cat-tab {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 2px;
  border-radius: var(--radius);
  border: 1px solid var(--border-dark);
  cursor: pointer;
  background: var(--bg-mid);
  color: var(--text-muted);
  transition: all 0.15s;
  text-align: center;
  line-height: 1.2;
}
.theme-cat-tab:hover { border-color: var(--border-mid); color: var(--text-secondary); }
.theme-cat-tab.active {
  background: var(--bg-card);
  border-color: var(--border-gold);
  color: var(--accent-gold);
  box-shadow: 0 0 8px rgba(180,130,40,0.15);
}

/* ── SEASONAL AUTO TOGGLE ── */
.seasonal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--bg-mid);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.seasonal-toggle-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.3;
}
.seasonal-toggle-label small {
  display: block;
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  font-weight: 400;
  margin-top: 1px;
}
.toggle-switch {
  position: relative;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 2px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-gold);
  border-color: var(--border-gold-bright);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(16px);
  background: #000;
}

/* ── THEME GRID SCROLL AREA ── */
.theme-grid-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 2px;
}
.theme-grid-scroll::-webkit-scrollbar { width: 4px; }
.theme-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.theme-grid-scroll::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 4px; }

.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.theme-btn {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 6px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.theme-btn .t-icon { font-size: 16px; }
.theme-btn.active {
  box-shadow: 0 0 10px currentColor;
}

.theme-btn[data-theme="default"] {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  color: #d4a843;
  border-color: #8a6a28;
}
.theme-btn[data-theme="default"].active { border-color: #f0c060; }
.theme-btn[data-theme="arcane"] {
  background: linear-gradient(135deg, #0d1422, #080d18);
  color: #90c8ff;
  border-color: #3a6aaa;
}
.theme-btn[data-theme="arcane"].active { border-color: #90c8ff; }
.theme-btn[data-theme="nature"] {
  background: linear-gradient(135deg, #101e11, #070f08);
  color: #98e870;
  border-color: #4a8a3a;
}
.theme-btn[data-theme="nature"].active { border-color: #98e870; }
.theme-btn[data-theme="shadow"] {
  background: linear-gradient(135deg, #0e0e15, #060608);
  color: #cc99ff;
  border-color: #6a4a8a;
}
.theme-btn[data-theme="shadow"].active { border-color: #cc99ff; }
.theme-btn[data-theme="fire"] {
  background: linear-gradient(135deg, #200b00, #100500);
  color: #ff9a30;
  border-color: #aa4a00;
}
.theme-btn[data-theme="fire"].active { border-color: #ff9a30; }
.theme-btn[data-theme="ice"] {
  background: linear-gradient(135deg, #0a1420, #04090f);
  color: #90e0ff;
  border-color: #3a7090;
}
.theme-btn[data-theme="ice"].active { border-color: #90e0ff; }
.theme-btn[data-theme="smoke"] {
  background: linear-gradient(135deg, #1a1a22, #0a0a0e);
  color: #c0c0d8;
  border-color: #505060;
}
.theme-btn[data-theme="smoke"].active { border-color: #c0c0d8; }
.theme-btn[data-theme="ember"] {
  background: linear-gradient(135deg, #220e05, #0e0703);
  color: #e87030;
  border-color: #8a3a10;
}
.theme-btn[data-theme="ember"].active { border-color: #e87030; }
.theme-btn[data-theme="fairy"] {
  background: linear-gradient(135deg, #100d28, #060614);
  color: #e0b8ff;
  border-color: #6a50a0;
}
.theme-btn[data-theme="fairy"].active { border-color: #e0b8ff; }

.theme-btn[data-theme="sakura"] {
  background: linear-gradient(135deg, #2a0f1a, #160a10);
  color: #ffbfdf;
  border-color: #c06090;
}
.theme-btn[data-theme="sakura"].active { border-color: #ffbfdf; }
.theme-btn[data-theme="sakura-anim"] {
  background: linear-gradient(135deg, #1e0e2c, #0f0618);
  color: #ffbfff;
  border-color: #b060e0;
}
.theme-btn[data-theme="sakura-anim"].active { border-color: #ffbfff; }
.theme-btn[data-theme="solo"] {
  background: linear-gradient(135deg, #0c030c, #040104);
  color: #c875ff;
  border-color: #6a1a6a;
}
.theme-btn[data-theme="solo"].active { border-color: #c875ff; }
.theme-btn[data-theme="solo-anim"] {
  background: linear-gradient(135deg, #0b000b, #030003);
  color: #c060ff;
  border-color: #620a62;
}
.theme-btn[data-theme="solo-anim"].active { border-color: #c060ff; }
.theme-btn[data-theme="eva01"] {
  background: linear-gradient(135deg, #0e1422, #060a10);
  color: #80ff80;
  border-color: #3a5faa;
  box-shadow: inset 0 0 8px rgba(150,50,220,0.15);
}
.theme-btn[data-theme="eva01"].active { border-color: #bb44ff; }
.theme-btn[data-theme="storm"] {
  background: linear-gradient(135deg, #0a1020, #040710);
  color: #80b8ff;
  border-color: #3050a0;
}
.theme-btn[data-theme="storm"].active { border-color: #80b8ff; }
.theme-btn[data-theme="abyss"] {
  background: linear-gradient(135deg, #160000, #090000);
  color: #ff3030;
  border-color: #8a0a0a;
}
.theme-btn[data-theme="abyss"].active { border-color: #ff3030; }
.theme-btn[data-theme="underdark"] {
  background: linear-gradient(135deg, #03061a, #010209);
  color: #00ffcc;
  border-color: #0f4a3a;
}
.theme-btn[data-theme="underdark"].active { border-color: #60ffdd; }
.theme-btn[data-theme="paladin"] {
  background: linear-gradient(135deg, #1c1828, #0d0c14);
  color: #f8d040;
  border-color: #c8a830;
  box-shadow: inset 0 0 10px rgba(248,210,40,0.08);
}
.theme-btn[data-theme="paladin"].active { border-color: #fff080; }

/* ── NEW STATIC THEMES ── */
.theme-btn[data-theme="bloodmoon"] {
  background: linear-gradient(135deg, #1a0000, #0a0000);
  color: #ff6030;
  border-color: #8a1a00;
}
.theme-btn[data-theme="bloodmoon"].active { border-color: #ff6030; }
.theme-btn[data-theme="void"] {
  background: linear-gradient(135deg, #05040a, #020108);
  color: #8060ff;
  border-color: #2a1a50;
}
.theme-btn[data-theme="void"].active { border-color: #a080ff; }
.theme-btn[data-theme="glacier"] {
  background: linear-gradient(135deg, #040e14, #020810);
  color: #80e0ff;
  border-color: #1a4a60;
}
.theme-btn[data-theme="glacier"].active { border-color: #b0f0ff; }
.theme-btn[data-theme="ancientgold"] {
  background: linear-gradient(135deg, #10090a, #080505);
  color: #d4a030;
  border-color: #6a4a10;
}
.theme-btn[data-theme="ancientgold"].active { border-color: #e8c060; }

/* ── NEW ANIMATED THEMES ── */
.theme-btn[data-theme="blizzard"] {
  background: linear-gradient(135deg, #060c14, #030810);
  color: #c0e8ff;
  border-color: #1e4060;
}
.theme-btn[data-theme="blizzard"].active { border-color: #c0e8ff; }
.theme-btn[data-theme="crimsonrain"] {
  background: linear-gradient(135deg, #120004, #080002);
  color: #ff4060;
  border-color: #6a0020;
}
.theme-btn[data-theme="crimsonrain"].active { border-color: #ff4060; }
.theme-btn[data-theme="aurora"] {
  background: linear-gradient(135deg, #020a08, #010604);
  color: #40ffb0;
  border-color: #0a4030;
}
.theme-btn[data-theme="aurora"].active { border-color: #80ffcc; }
.theme-btn[data-theme="voidanim"] {
  background: linear-gradient(135deg, #040308, #020106);
  color: #6040ff;
  border-color: #20104a;
}
.theme-btn[data-theme="voidanim"].active { border-color: #9070ff; }

/* ── SEASONAL THEME BUTTONS ── */
.theme-btn[data-theme="halloween"] {
  background: linear-gradient(135deg, #1c0a00, #0c0500);
  color: #ff7a00;
  border-color: #6a2c00;
}
.theme-btn[data-theme="halloween"].active { border-color: #ff7a00; }
.theme-btn[data-theme="christmas"] {
  background: linear-gradient(135deg, #002a0e, #001506);
  color: #ff4444;
  border-color: #006030;
}
.theme-btn[data-theme="christmas"].active { border-color: #ff6060; }
.theme-btn[data-theme="newyear"] {
  background: linear-gradient(135deg, #0a0a1e, #04040e);
  color: #f0d000;
  border-color: #2a2a58;
}
.theme-btn[data-theme="newyear"].active { border-color: #fff060; }
.theme-btn[data-theme="valentine"] {
  background: linear-gradient(135deg, #260012, #100006);
  color: #ff5599;
  border-color: #7a1040;
}
.theme-btn[data-theme="valentine"].active { border-color: #ff80bb; }
.theme-btn[data-theme="easter"] {
  background: linear-gradient(135deg, #08141e, #04080e);
  color: #80e890;
  border-color: #1c3858;
}
.theme-btn[data-theme="easter"].active { border-color: #b0ffb8; }
.theme-btn[data-theme="summer"] {
  background: linear-gradient(135deg, #101608, #070a04);
  color: #ffcc00;
  border-color: #365020;
}
.theme-btn[data-theme="summer"].active { border-color: #ffe840; }
.theme-btn[data-theme="autumn"] {
  background: linear-gradient(135deg, #260e00, #100600);
  color: #f09000;
  border-color: #6e3800;
}
.theme-btn[data-theme="autumn"].active { border-color: #ffaa20; }
.theme-btn[data-theme="winterfrost"] {
  background: linear-gradient(135deg, #081428, #040810);
  color: #70c8ff;
  border-color: #1c3860;
}
.theme-btn[data-theme="winterfrost"].active { border-color: #a8e0ff; }
.theme-btn[data-theme="spring"] {
  background: linear-gradient(135deg, #0b1e0c, #030d04);
  color: #70e878;
  border-color: #245c2c;
}
.theme-btn[data-theme="spring"].active { border-color: #a0ffa8; }
.theme-btn[data-theme="chineseny"] {
  background: linear-gradient(135deg, #2a0600, #120200);
  color: #ffb800;
  border-color: #8a2800;
}
.theme-btn[data-theme="chineseny"].active { border-color: #ffcc00; }
.theme-btn[data-theme="beltane"] {
  background: linear-gradient(135deg, #160b00, #060300);
  color: #e89000;
  border-color: #5a3000;
}
.theme-btn[data-theme="beltane"].active { border-color: #ffb840; }
.theme-btn[data-theme="mermay"] {
  background: linear-gradient(135deg, #001428, #000810);
  color: #00d0e8;
  border-color: #004070;
}
.theme-btn[data-theme="mermay"].active { border-color: #60f0ff; }
.theme-btn[data-theme="midsummer"] {
  background: linear-gradient(135deg, #0c1228, #040610);
  color: #f8d040;
  border-color: #2c3870;
}
.theme-btn[data-theme="midsummer"].active { border-color: #ffe880; }
.theme-btn[data-theme="feast"] {
  background: linear-gradient(135deg, #1e0c00, #0a0400);
  color: #f08800;
  border-color: #703200;
}
.theme-btn[data-theme="feast"].active { border-color: #ffbb40; }
.theme-btn[data-theme="gionmatsuri"] {
  background: linear-gradient(135deg, #180628, #040108);
  color: #ff8830;
  border-color: #6a1870;
}
.theme-btn[data-theme="gionmatsuri"].active { border-color: #ffaa55; }
.theme-btn[data-theme="toronagashi"] {
  background: linear-gradient(135deg, #061820, #010408);
  color: #f8c040;
  border-color: #184860;
}
.theme-btn[data-theme="toronagashi"].active { border-color: #ffe080; }
.theme-btn[data-theme="kagamibiraki"] {
  background: linear-gradient(135deg, #071520, #010304);
  color: #e8b840;
  border-color: #1a4a60;
}
.theme-btn[data-theme="kagamibiraki"].active { border-color: #f8d870; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-deepest);
  color: var(--text-primary);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 17px;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 20% 0%, var(--bg-glow-top, rgba(100,60,10,0.08)) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, var(--bg-glow-bottom, rgba(80,20,10,0.06)) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 3px; }

/* ─── HEADER ─── */
.app-header {
  background: linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-dark) 100%);
  border-bottom: 2px solid var(--border-gold);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 20px rgba(180,130,40,0.2);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 60px;
  height: auto;
}

.app-header > div:first-child {
  flex: 1;
}

.header-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-gold-bright);
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(212,168,67,0.4);
}
.header-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 4px;
  margin-top: 2px;
}

.header-actions { display: flex; gap: 8px; align-items: center; }

/* ─── BUTTONS ─── */
.btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.btn-primary {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  color: var(--accent-gold-bright);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-card));
  border-color: var(--accent-gold-bright);
  box-shadow: 0 0 15px rgba(212,168,67,0.3);
}
.btn-danger {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-dark));
  color: var(--accent-red-bright);
  border-color: var(--accent-red);
}
.btn-danger:hover { background: linear-gradient(135deg, var(--bg-card), var(--bg-mid)); border-color: var(--accent-red-bright); }
.btn-silver {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-dark));
  color: var(--accent-silver);
  border-color: var(--border-mid);
}
.btn-silver:hover { border-color: var(--accent-silver); color: var(--text-primary); }
.btn-sm { padding: 5px 10px; font-size: 10px; }

/* ─── SIDEBAR ─── */
.app-body {
  display: flex;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 220px;
  min-width: 220px;
  background: linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-dark) 100%);
  border-right: 1px solid var(--border-gold);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), min-width 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 90;
  box-shadow: 2px 0 20px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.sidebar.collapsed {
  width: 52px;
  min-width: 52px;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border-dark);
  flex-shrink: 0;
}

.sidebar-toggle-btn {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  color: var(--accent-gold);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-card));
  box-shadow: 0 0 10px rgba(212,168,67,0.3);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.tab-btn {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: 11px 14px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  overflow: hidden;
}
.tab-btn:hover {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
}
.tab-btn.active {
  color: var(--accent-gold-bright);
  border-left-color: var(--accent-gold);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-gold) 12%, transparent) 0%, transparent 100%);
}

.tab-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.tab-label {
  opacity: 1;
  transition: opacity 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .tab-label {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.sidebar.collapsed .tab-btn {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.collapsed .sidebar-toggle {
  justify-content: center;
}

/* Tooltip for collapsed state */
.sidebar.collapsed .tab-btn {
  position: relative;
}
.sidebar.collapsed .tab-btn:hover::after {
  content: attr(data-label);
  position: absolute;
  left: 58px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--accent-gold-bright);
  white-space: nowrap;
  z-index: 999;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ─── MAIN CONTENT AREA ─── */
.main-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* ─── SIDEBAR SECTION LABELS ─── */
.nav-section-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--border-gold);
  padding: 14px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-dark);
}
.sidebar.collapsed .nav-section-label {
  opacity: 0;
  height: 0;
  padding: 0;
  pointer-events: none;
}
.nav-section-divider {
  height: 1px;
  background: var(--border-dark);
  margin: 6px 12px;
  transition: opacity 0.15s;
}
.sidebar.collapsed .nav-section-divider {
  opacity: 0;
  height: 0;
  margin: 0;
}

/* ─── CONTENT ─── */
.tab-content { display: none; padding: 20px 20px 40px; max-width: 1400px; margin: 0 auto; }
.tab-content.active { display: block; }

/* ─── SECTION HEADERS ─── */
.section-header {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-gold);
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 6px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-header::before {
  content: '✦';
  font-size: 10px;
  opacity: 0.7;
}
/* Identity header: bullet+text grouped left, badge floats right */
.section-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-header-left::before {
  content: '✦';
  font-size: 10px;
  opacity: 0.7;
  color: var(--accent-gold);
}
.section-header:has(.section-header-left)::before {
  display: none;
}

/* ─── PANELS / CARDS ─── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-deep);
}
.panel-sm { padding: 12px; }

/* ─── GRID HELPERS ─── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.flex { display: flex; gap: 12px; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.gap-sm { gap: 8px; }
.mb { margin-bottom: 14px; }
.mb-sm { margin-bottom: 8px; }

/* ─── LABELS & INPUTS ─── */
label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: 'Crimson Text', serif;
  font-size: 17px;
  padding: 7px 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  min-height: 36px;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--border-gold);
  box-shadow: 0 0 8px rgba(180,130,40,0.15);
}
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a6a28'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
select option { background: var(--bg-dark); }

input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

/* ─── FIELD GROUP ─── */
.field { margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }

/* ─── STAT BOXES ─── */
.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 10px 8px;
  text-align: center;
  transition: border-color 0.2s;
  cursor: default;
}
.stat-box:hover { border-color: var(--border-gold); }
.stat-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-score {
  width: 56px; height: 56px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-deepest));
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
}
.stat-score:hover { border-color: var(--accent-gold-bright); box-shadow: var(--shadow-gold); }
.stat-score input {
  width: 100%; height: 100%;
  background: none; border: none;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  padding: 0;
  min-height: unset;
}
.stat-mod {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-gold);
}
.stat-mod-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ─── SAVING THROWS / SKILLS ─── */
.skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius);
  transition: background 0.15s;
  cursor: pointer;
}
.skill-row:hover { background: rgba(180,130,40,0.06); }
.skill-prof {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-gold);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.skill-prof.active { background: var(--accent-gold); box-shadow: 0 0 6px rgba(212,168,67,0.5); }
.skill-prof.expert {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-bright));
  box-shadow: 0 0 8px rgba(212,168,67,0.6);
}
.skill-prof.expert::after { content: '✦'; font-size: 8px; color: #1a1000; }
.skill-mod {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.skill-name {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--text-secondary);
  flex: 1;
}
.skill-attr {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* ─── HP BOX ─── */
.hp-display {
  text-align: center;
  background: linear-gradient(135deg, #200a0a, #150505);
  border: 2px solid var(--accent-red);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 0 20px rgba(139,26,26,0.2);
}
.hp-display .big-num {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  font-weight: 900;
  color: #e05050;
  line-height: 1;
  text-shadow: 0 0 20px rgba(192,57,43,0.4);
}
.hp-display input.big-num {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  font-weight: 900;
  color: #e05050;
  background: none;
  border: none;
  text-align: center;
  width: 120px;
  min-height: unset;
  padding: 0;
}

/* ─── INITIATIVE / AC ─── */
.combat-stat {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 12px 8px;
}
.combat-stat .val {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--accent-gold);
  line-height: 1;
}
.combat-stat input.val {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--accent-gold);
  background: none;
  border: none;
  text-align: center;
  width: 80px;
  min-height: unset;
  padding: 0;
}
.combat-stat .val-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── DEATH SAVES ─── */
.death-save-dots {
  display: flex; gap: 6px; align-items: center; justify-content: center;
}
.ds-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-dark);
  cursor: pointer;
  transition: all 0.15s;
}
.ds-dot.success { background: var(--accent-gold); border-color: var(--accent-gold); box-shadow: 0 0 8px rgba(212,168,67,0.5); }
.ds-dot.fail { background: var(--accent-red-bright); border-color: var(--accent-red-bright); box-shadow: 0 0 8px rgba(192,57,43,0.5); }

/* ─── PHOTO UPLOAD ─── */
.photo-container {
  width: 100%;
  height: var(--portrait-height, 260px);
  min-height: 120px;
  max-height: 600px;
  border: 2px solid var(--border-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-deepest));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.photo-container:hover { border-color: var(--accent-gold-bright); }
.photo-container img {
  width: 100%;
  height: 100%;
  object-fit: var(--portrait-fit, cover);
  object-position: var(--portrait-pos-x, 50%) var(--portrait-pos-y, 20%);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.photo-container.drag-active { cursor: grabbing !important; }
.photo-container.has-photo { cursor: grab; }
.photo-container.has-photo.drag-active { cursor: grabbing; }

/* ─── PORTRAIT HOVER OVERLAY BUTTONS ─── */
.portrait-hover-overlay {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.portrait-frame-wrapper:hover .portrait-hover-overlay { opacity: 1; pointer-events: auto; }
.portrait-hover-btn {
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-radius: 4px;
  border: 1px solid var(--border-gold);
  cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
}
.portrait-hover-btn-upload {
  background: rgba(0,0,0,0.65);
  color: var(--accent-gold);
}
.portrait-hover-btn-upload:hover { background: rgba(0,0,0,0.85); border-color: var(--accent-gold-bright); color: var(--accent-gold-bright); }
.portrait-hover-btn-remove {
  background: rgba(80,0,0,0.65);
  color: #e07070;
  border-color: var(--accent-red);
}
.portrait-hover-btn-remove:hover { background: rgba(130,0,0,0.85); border-color: var(--accent-red-bright); color: #ff9999; }
/* drag hint icon shown when image loaded */
.portrait-drag-hint {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-gold);
  color: var(--accent-gold);
  font-size: 12px;
  cursor: default;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  title: 'Drag to reposition';
}
.portrait-frame-wrapper:hover .portrait-drag-hint { opacity: 0.8; }
.photo-container.has-photo .portrait-drag-hint { display: flex; }

/* ─── PORTRAIT RESIZE HANDLE ─── */
.portrait-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  cursor: ns-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.portrait-frame-wrapper:hover .portrait-resize-handle { opacity: 1; }
.portrait-resize-handle::before {
  content: '⣿';
  font-size: 10px;
  color: var(--accent-gold);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 0 4px var(--accent-gold);
}

/* ─── PORTRAIT FIT TOGGLE ─── */
.portrait-fit-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-gold);
  color: var(--accent-gold);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s;
  pointer-events: auto;
}
.portrait-frame-wrapper:hover .portrait-fit-btn { opacity: 1; }
.portrait-fit-btn:hover { background: rgba(0,0,0,0.8); border-color: var(--accent-gold-bright); }
.photo-placeholder {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  pointer-events: none;
}
.photo-placeholder .icon { font-size: 32px; margin-bottom: 8px; opacity: 0.4; }

/* ─── RANK FRAME SYSTEM ─── */
.portrait-frame-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.portrait-rank-frame {
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius-lg) + 6px);
  pointer-events: none;
  z-index: 2;
  transition: all 0.4s ease;
}

/* ── Corner ornament SVGs embedded as data URIs ── */

/* COMMONER — plain grey border, no animation */
.rank-commoner .portrait-rank-frame {
  border: 2px solid #6b7280;
  box-shadow: 0 0 6px rgba(107,114,128,0.25);
}

/* ADVENTURER — bronze corners, slow pulse */
.rank-adventurer .portrait-rank-frame {
  border: 2px solid #cd7f32;
  box-shadow: 0 0 10px rgba(205,127,50,0.4);
  animation: advPulse 3s ease-in-out infinite alternate;
}
.rank-adventurer .portrait-rank-frame::before,
.rank-adventurer .portrait-rank-frame::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M2 20 L2 4 Q2 2 4 2 L20 2' stroke='%23cd7f32' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='4' cy='4' r='2' fill='%23cd7f32' opacity='0.7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.rank-adventurer .portrait-rank-frame::before { top: -1px; left: -1px; }
.rank-adventurer .portrait-rank-frame::after  { bottom: -1px; right: -1px; transform: rotate(180deg); }
@keyframes advPulse {
  from { box-shadow: 0 0 10px rgba(205,127,50,0.4); }
  to   { box-shadow: 0 0 18px rgba(205,127,50,0.75), 0 0 32px rgba(205,127,50,0.2); }
}

/* JOURNEYMAN — green corners + side runes, pulse */
.rank-journeyman .portrait-rank-frame {
  border: 2px solid #22c55e;
  box-shadow: 0 0 14px rgba(34,197,94,0.45);
  animation: jmPulse 2.8s ease-in-out infinite alternate;
}
.rank-journeyman .portrait-rank-frame::before,
.rank-journeyman .portrait-rank-frame::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 25 L3 5 Q3 3 5 3 L25 3' stroke='%2322c55e' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='5' r='2.5' fill='%2322c55e' opacity='0.8'/%3E%3Cpath d='M8 3 L8 8 M3 8 L8 8' stroke='%2322c55e' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.rank-journeyman .portrait-rank-frame::before { top: -2px; left: -2px; }
.rank-journeyman .portrait-rank-frame::after  { bottom: -2px; right: -2px; transform: rotate(180deg); }
@keyframes jmPulse {
  from { box-shadow: 0 0 14px rgba(34,197,94,0.45); }
  to   { box-shadow: 0 0 22px rgba(34,197,94,0.8), 0 0 38px rgba(34,197,94,0.25); }
}

/* VETERAN — silver ornate corners + double border, pulse */
.rank-veteran .portrait-rank-frame {
  border: 2px solid #c0c0c0;
  box-shadow: 0 0 16px rgba(192,192,192,0.55), inset 0 0 8px rgba(192,192,192,0.1);
  animation: vetPulse 2.5s ease-in-out infinite alternate;
}
.rank-veteran .portrait-rank-frame::before,
.rank-veteran .portrait-rank-frame::after {
  content: '';
  position: absolute;
  width: 34px; height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M3 31 L3 5 Q3 3 5 3 L31 3' stroke='%23c0c0c0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7 31 L7 9 Q7 7 9 7 L31 7' stroke='%23c0c0c0' stroke-width='1' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3Ccircle cx='5' cy='5' r='3' fill='none' stroke='%23c0c0c0' stroke-width='1.5'/%3E%3Ccircle cx='5' cy='5' r='1.2' fill='%23c0c0c0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.rank-veteran .portrait-rank-frame::before { top: -2px; left: -2px; }
.rank-veteran .portrait-rank-frame::after  { bottom: -2px; right: -2px; transform: rotate(180deg); }
@keyframes vetPulse {
  from { box-shadow: 0 0 16px rgba(192,192,192,0.55), inset 0 0 8px rgba(192,192,192,0.1); }
  to   { box-shadow: 0 0 26px rgba(220,220,220,0.85), 0 0 44px rgba(192,192,192,0.3), inset 0 0 12px rgba(192,192,192,0.2); }
}

/* CHAMPION — golden ornate corners + cross accents, glow */
.rank-champion .portrait-rank-frame {
  border: 2px solid #d4af37;
  box-shadow: 0 0 20px rgba(212,175,55,0.65), 0 0 36px rgba(212,175,55,0.25);
  animation: champGlow 2.2s ease-in-out infinite alternate;
}
.rank-champion .portrait-rank-frame::before,
.rank-champion .portrait-rank-frame::after {
  content: '';
  position: absolute;
  width: 40px; height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M3 37 L3 5 Q3 3 5 3 L37 3' stroke='%23d4af37' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M9 37 L9 11 Q9 9 11 9 L37 9' stroke='%23d4af37' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3Ccircle cx='5' cy='5' r='3.5' fill='none' stroke='%23d4af37' stroke-width='2'/%3E%3Ccircle cx='5' cy='5' r='1.5' fill='%23d4af37'/%3E%3Cpath d='M13 3 L13 9 M3 13 L9 13' stroke='%23d4af37' stroke-width='1.5' fill='none' opacity='0.7' stroke-linecap='round'/%3E%3Cpath d='M5 17 L5 21' stroke='%23d4af37' stroke-width='1' opacity='0.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.rank-champion .portrait-rank-frame::before { top: -2px; left: -2px; }
.rank-champion .portrait-rank-frame::after  { bottom: -2px; right: -2px; transform: rotate(180deg); }
@keyframes champGlow {
  from { box-shadow: 0 0 20px rgba(212,175,55,0.65), 0 0 36px rgba(212,175,55,0.25); }
  to   { box-shadow: 0 0 30px rgba(212,175,55,0.95), 0 0 55px rgba(212,175,55,0.45), inset 0 0 14px rgba(212,175,55,0.2); }
}

/* HERO — amber ornate frame + all four corners + rune marks, strong pulse */
.rank-hero .portrait-rank-frame {
  border: 3px solid #f59e0b;
  box-shadow: 0 0 22px rgba(245,158,11,0.8), 0 0 44px rgba(245,158,11,0.4), inset 0 0 12px rgba(245,158,11,0.15);
  animation: heroGlow 1.8s ease-in-out infinite alternate;
}
.rank-hero .portrait-rank-frame::before,
.rank-hero .portrait-rank-frame::after {
  content: '';
  position: absolute;
  width: 46px; height: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M3 43 L3 5 Q3 3 5 3 L43 3' stroke='%23f59e0b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 43 L10 12 Q10 10 12 10 L43 10' stroke='%23f59e0b' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3Ccircle cx='6' cy='6' r='4' fill='none' stroke='%23f59e0b' stroke-width='2.5'/%3E%3Ccircle cx='6' cy='6' r='1.8' fill='%23f59e0b'/%3E%3Cpath d='M15 3 L15 10 M3 15 L10 15' stroke='%23f59e0b' stroke-width='2' fill='none' opacity='0.8' stroke-linecap='round'/%3E%3Cpath d='M6 20 L6 26 M6 30 L6 34' stroke='%23f59e0b' stroke-width='1.2' opacity='0.5' stroke-linecap='round'/%3E%3Cpath d='M20 3 L20 6 M26 3 L26 6' stroke='%23f59e0b' stroke-width='1.2' opacity='0.5' stroke-linecap='round'/%3E%3Cpath d='M3 20 Q5 19 7 20 Q5 21 3 20Z' fill='%23f59e0b' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.rank-hero .portrait-rank-frame::before { top: -3px; left: -3px; }
.rank-hero .portrait-rank-frame::after  { bottom: -3px; right: -3px; transform: rotate(180deg); }
@keyframes heroGlow {
  from { box-shadow: 0 0 22px rgba(245,158,11,0.8),  0 0 44px rgba(245,158,11,0.4),  inset 0 0 12px rgba(245,158,11,0.15); }
  to   { box-shadow: 0 0 34px rgba(245,158,11,1.0),  0 0 66px rgba(245,158,11,0.65), inset 0 0 20px rgba(245,158,11,0.3), 0 0 90px rgba(245,158,11,0.2); }
}

/* LEGEND — rainbow rotating ornate frame, all corners + mid marks */
.rank-legend .portrait-rank-frame {
  border: 3px solid transparent;
  background: transparent;
  box-shadow: 0 0 28px rgba(168,85,247,0.7), 0 0 56px rgba(255,215,0,0.4), 0 0 84px rgba(0,191,255,0.25);
  animation: legendGlow 2s ease-in-out infinite alternate;
  overflow: visible;
}
/* Rainbow border via ::before */
.rank-legend .portrait-rank-frame::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(135deg, #ff0080, #ff8c00, #ffd700, #00ff88, #00bfff, #a855f7, #ff0080);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: legendRotateBG 3s linear infinite;
  pointer-events: none;
}
/* Corner ornaments via ::after using radial dots trick */
.rank-legend .portrait-rank-frame::after {
  content: '✦';
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00, 0 0 30px #a855f7;
  animation: legendStar 1.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes legendRotateBG {
  0%   { filter: hue-rotate(0deg) brightness(1.1); }
  100% { filter: hue-rotate(360deg) brightness(1.3); }
}
@keyframes legendGlow {
  from { box-shadow: 0 0 28px rgba(168,85,247,0.7), 0 0 56px rgba(255,215,0,0.4),  0 0 84px rgba(0,191,255,0.25); }
  to   { box-shadow: 0 0 40px rgba(168,85,247,1.0), 0 0 80px rgba(255,215,0,0.65), 0 0 110px rgba(0,191,255,0.4), 0 0 140px rgba(255,0,128,0.2); }
}
@keyframes legendStar {
  from { transform: translateX(-50%) scale(1)   rotate(0deg);   opacity: 0.8; }
  to   { transform: translateX(-50%) scale(1.3) rotate(180deg); opacity: 1; }
}

/* SQUIRE — grey corners, minimal */
.rank-squire .portrait-rank-frame {
  border: 2px solid #a8a8a8;
  box-shadow: 0 0 7px rgba(168,168,168,0.3);
  animation: squirePulse 3.5s ease-in-out infinite alternate;
}
@keyframes squirePulse {
  from { box-shadow: 0 0 7px rgba(168,168,168,0.3); }
  to   { box-shadow: 0 0 13px rgba(168,168,168,0.55); }
}

/* MYTH — cyan/white transcendent frame, all corners + mid marks + rotating border */
.rank-myth .portrait-rank-frame {
  border: 4px solid transparent;
  background: transparent;
  box-shadow: 0 0 32px rgba(0,229,255,0.8), 0 0 64px rgba(255,255,255,0.4), 0 0 96px rgba(0,229,255,0.3);
  animation: mythGlow 1.5s ease-in-out infinite alternate;
  overflow: visible;
}
.rank-myth .portrait-rank-frame::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(135deg, #00e5ff, #ffffff, #00e5ff, #a855f7, #ffffff, #00e5ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: mythRotateBG 2s linear infinite;
  pointer-events: none;
}
.rank-myth .portrait-rank-frame::after {
  content: '✸';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: #00e5ff;
  text-shadow: 0 0 12px #00e5ff, 0 0 24px #ffffff, 0 0 40px #00e5ff;
  animation: mythStar 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mythRotateBG {
  0%   { filter: hue-rotate(0deg) brightness(1.2); }
  100% { filter: hue-rotate(360deg) brightness(1.5); }
}
@keyframes mythGlow {
  from { box-shadow: 0 0 32px rgba(0,229,255,0.8), 0 0 64px rgba(255,255,255,0.4), 0 0 96px rgba(0,229,255,0.3); }
  to   { box-shadow: 0 0 48px rgba(0,229,255,1.0), 0 0 96px rgba(255,255,255,0.65), 0 0 140px rgba(0,229,255,0.5), 0 0 180px rgba(168,85,247,0.25); }
}
@keyframes mythStar {
  from { transform: translateX(-50%) scale(1)    rotate(0deg);   opacity: 0.85; text-shadow: 0 0 12px #00e5ff, 0 0 24px #fff; }
  to   { transform: translateX(-50%) scale(1.4)  rotate(180deg); opacity: 1;    text-shadow: 0 0 18px #00e5ff, 0 0 36px #fff, 0 0 54px #a855f7; }
}


.portrait-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 16px;
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.4s ease;
  border: 1px solid;
  cursor: default;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}
.rank-badge-commoner   { background: rgba(107,114,128,0.15); border-color: #6b7280; color: #9ca3af; }
.rank-badge-squire     { background: rgba(168,168,168,0.15); border-color: #a8a8a8; color: #c8c8c8; }
.rank-badge-adventurer { background: rgba(205,127,50,0.15);  border-color: #cd7f32; color: #cd7f32; }
.rank-badge-journeyman { background: rgba(34,197,94,0.15);   border-color: #22c55e; color: #22c55e; }
.rank-badge-veteran    { background: rgba(192,192,192,0.15); border-color: #c0c0c0; color: #d4d4d4; }
.rank-badge-champion   { background: rgba(212,175,55,0.15);  border-color: var(--accent-gold); color: var(--accent-gold); }
.rank-badge-hero       { background: rgba(245,158,11,0.15);  border-color: #f59e0b; color: #fbbf24;
                         animation: badgeGlow 2s ease-in-out infinite alternate; }
@keyframes badgeGlow {
  from { box-shadow: 0 0 6px rgba(245,158,11,0.4); }
  to   { box-shadow: 0 0 14px rgba(245,158,11,0.8); }
}
.rank-badge-legend     { border-color: #a855f7; color: #d8b4fe;
                         background: linear-gradient(90deg, rgba(255,0,128,0.1), rgba(168,85,247,0.1), rgba(0,191,255,0.1));
                         animation: legendBadge 3s linear infinite; }
@keyframes legendBadge {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.rank-badge-myth       { border-color: #00e5ff; color: #ffffff;
                         background: linear-gradient(90deg, rgba(0,229,255,0.15), rgba(255,255,255,0.1), rgba(168,85,247,0.15));
                         animation: mythBadge 2s linear infinite;
                         box-shadow: 0 0 10px rgba(0,229,255,0.4); }
@keyframes mythBadge {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(180deg) brightness(1.3); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}
.rank-badge-progress {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  font-family: 'Crimson Text', serif;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
@keyframes gemPulse {
  from { transform: translateX(-50%) scale(1)    drop-shadow(0 0 4px currentColor); opacity: 0.85; }
  to   { transform: translateX(-50%) scale(1.35) drop-shadow(0 0 10px currentColor); opacity: 1; }
}
#photoInput { display: none; }

/* ─── INSPIRATION ─── */
.inspiration-gem {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}
.inspiration-gem.active {
  background: radial-gradient(circle at 35% 35%, var(--accent-gold-bright), var(--accent-amber));
  border-color: var(--accent-gold-bright);
  box-shadow: 0 0 15px rgba(212,168,67,0.6);
}

/* ─── PROFICIENCY BADGE ─── */
.prof-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-card));
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 4px 14px;
  color: var(--accent-gold);
}

/* ─── DICE ROLLER ─── */
.dice-roller {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 200;
}
.dice-toggle {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 2px solid var(--border-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 20px rgba(180,130,40,0.2);
  transition: all 0.2s;
}
.dice-toggle:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 30px rgba(212,168,67,0.4); transform: scale(1.05); }

.dice-panel {
  position: fixed;
  bottom: 24px; right: 88px; /* fallback — JS prepíše */
  width: 340px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px rgba(180,130,40,0.1);
  display: none;
  overflow-y: auto;
  z-index: 201;
}
.dice-panel.open { display: block; }

.dice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.die-btn {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.die-btn:hover { border-color: var(--border-gold); color: var(--accent-gold); }
.die-btn.selected { border-color: var(--accent-gold); color: var(--accent-gold-bright); background: linear-gradient(135deg, var(--bg-mid), var(--bg-card)); }

.dice-config { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.dice-config input { width: 56px; text-align: center; }
.dice-config .plus { color: var(--text-muted); font-family: 'Cinzel', serif; }

.roll-btn-big {
  width: 100%;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 2px solid var(--border-gold);
  border-radius: var(--radius);
  color: var(--accent-gold-bright);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  margin-bottom: 10px;
}
.roll-btn-big:hover { box-shadow: 0 0 20px rgba(212,168,67,0.3); }
.roll-btn-big:active { transform: scale(0.97); }

.dice-result {
  text-align: center;
  min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dice-result .result-num {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--accent-gold-bright);
  text-shadow: 0 0 20px rgba(212,168,67,0.5);
  animation: rollIn 0.3s ease;
  line-height: 1;
}
.dice-result .result-detail {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 4px;
}
@keyframes rollIn {
  from { transform: scale(1.5) rotate(-5deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.dice-history {
  border-top: 1px solid var(--border-dark);
  margin-top: 10px;
  padding-top: 8px;
  max-height: 80px;
  overflow-y: auto;
}
.dice-history-item {
  font-size: 15px;
  color: var(--text-muted);
  font-family: 'Crimson Text', serif;
  padding: 2px 0;
}

/* ─── QUICK ROLL ─── */
.quick-roll-panel {
  position: fixed;
  bottom: 90px; right: 88px; /* fallback — JS prepíše */
  width: 340px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: linear-gradient(180deg, #1a1612, #0e0c08);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px rgba(180,130,40,0.1);
  display: none;
  max-height: 82vh;
  overflow-y: auto;
  z-index: 201;
}
.quick-roll-panel.open { display: block; }
/* ─── SKILL ROLL SECTION ─── */
.qr-tabs { display:flex; gap:4px; margin-bottom:10px; }
.qr-tab {
  flex:1; padding:6px 0;
  background:var(--bg-dark); border:1px solid #4a3a18;
  border-radius:var(--radius);
  font-family:'Cinzel',serif; font-size:9px; font-weight:700;
  letter-spacing:1.5px; color:#8a7040;
  cursor:pointer; text-align:center; transition:all 0.15s;
}
.qr-tab.active { background:var(--bg-card); border-color:#c0a040; color:#e0c060; }
.qr-tab-content { display:none; }
.qr-tab-content.active { display:block; }
.sr-adv-row {
  display:flex; gap:5px; margin-bottom:10px;
}
.sr-adv-btn {
  flex:1; padding:7px 4px;
  font-family:'Cinzel',serif; font-size:9px; font-weight:700;
  letter-spacing:1px; border-radius:var(--radius);
  cursor:pointer; transition:all 0.15s; text-align:center;
  border:1px solid var(--border-dark); background:var(--bg-dark); color:#8a7040;
}
.sr-adv-btn.adv  { border-color:#2a6a30; background:#0e2210; color:#50aa60; }
.sr-adv-btn.dis  { border-color:#6a2a2a; background:#220e0e; color:#aa5050; }
.sr-adv-btn.norm.sel { border-color:#c0a040; background:var(--bg-card); color:#e0c060; }
.sr-adv-btn.adv.sel  { border-color:#60dd70; background:#163a1e; color:#80ee90; box-shadow:0 0 8px rgba(60,180,70,0.3); }
.sr-adv-btn.dis.sel  { border-color:#ee5050; background:#3a1010; color:#ff7070; box-shadow:0 0 8px rgba(200,40,40,0.3); }
.sr-result-box {
  background: #0a0804;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
  min-height: 48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
}
.sr-result-total { font-family:'Cinzel',serif; font-size:30px; font-weight:900; line-height:1; }
.sr-result-detail { font-family:'Crimson Text',serif; font-size: 17px; color:var(--text-muted); text-align:center; }
.sr-result-name { font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; color:var(--text-muted); }
.sr-group-label {
  font-family:'Cinzel',serif; font-size:8px; font-weight:700;
  letter-spacing:2px; color:var(--text-muted);
  padding: 5px 0 4px;
  text-transform:uppercase;
  border-bottom:1px solid var(--border-dark);
  margin-bottom:5px;
}
.sr-skill-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.sr-skill-btn {
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 8px;
  background: var(--bg-dark); border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  cursor:pointer; transition:all 0.12s;
  font-family:'Crimson Text',serif; font-size: 17px;
  color: var(--text-secondary);
}
.sr-skill-btn:hover { border-color:var(--border-gold); background:var(--bg-mid); color:var(--accent-gold-bright); }
.sr-skill-btn .sr-skill-name { flex:1; }
.sr-skill-btn .sr-skill-mod {
  font-family:'Cinzel',serif; font-size:11px; font-weight:700;
  min-width:26px; text-align:right;
}
.sr-skill-btn .sr-skill-mod.pos { color:#60aa60; }
.sr-skill-btn .sr-skill-mod.neg { color:#cc5050; }
.sr-skill-btn .sr-skill-mod.zero { color:#8a8060; }
.sr-prof-pip { width:6px; height:6px; border-radius:50%; margin-right:4px; flex-shrink:0; }
.sr-prof-pip.none { background:var(--bg-card); border:1px solid var(--border-dark); }
.sr-prof-pip.prof { background:#c0a040; }
.sr-prof-pip.exp  { background:#60ccff; }
/* ─── MONEY TAB ─── */
.qr-coin-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 12px;
}
.qr-coin-card {
  background: var(--bg-mid); border: 1px solid #3a2a0e;
  border-radius: var(--radius); padding: 10px 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.qr-coin-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 900;
  letter-spacing: 1px; margin-bottom: 2px;
}
.qr-coin-icon.cp { background: radial-gradient(#b87333, #7a4a1e); color: #f0c090; border: 2px solid #c07830; }
.qr-coin-icon.sp { background: radial-gradient(#aaaaaa, #666); color: #fff; border: 2px solid #bbb; }
.qr-coin-icon.ep { background: radial-gradient(#7ab0a0, #3a6a5a); color: #d0f0e8; border: 2px solid #8ac0b0; }
.qr-coin-icon.gp { background: radial-gradient(#e0c040, #a07a10); color: #fff8d0; border: 2px solid #d4af37; box-shadow: 0 0 8px rgba(200,160,40,0.4); }
.qr-coin-icon.pp { background: radial-gradient(#e0e8ff, #8090cc); color: #fff; border: 2px solid #c0ccff; }
.qr-coin-amount {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 22px; line-height: 1;
}
.qr-coin-amount.cp { color: #c07830; }
.qr-coin-amount.sp { color: #bbbbbb; }
.qr-coin-amount.ep { color: #7ac0b0; }
.qr-coin-amount.gp { color: #e0c040; }
.qr-coin-amount.pp { color: #b0b8ee; }
.qr-coin-name { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 2px; color: var(--text-muted); }
.qr-coin-btns { display: flex; gap: 4px; margin-top: 2px; }
.qr-coin-btn {
  width: 26px; height: 22px;
  background: var(--bg-dark); border: 1px solid var(--border-dark);
  border-radius: var(--radius); color: #c09040;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.qr-coin-btn:hover { border-color: #9a7020; color: #f0c060; background: #252010; }
.qr-coin-inp {
  width: 52px !important; font-size: 12px !important;
  text-align: center; padding: 3px 4px !important;
  min-height: unset !important; background: var(--bg-dark) !important;
  border-color: #3a2a0e !important;
}
.qr-total-bar {
  background: linear-gradient(135deg, #1e1a08, #120e04);
  border: 1px solid #6a5020;
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.qr-total-lbl { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 2px; color: #8a7040; }
.qr-total-val { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 900; color: #e0c040; }
.qr-transfer-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.qr-transfer-row label { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; color: #8a7040; }
.qr-transfer-row select, .qr-transfer-row input {
  font-size: 12px !important; padding: 4px 6px !important; min-height: unset !important;
}
/* ─── ALLIES TAB ─── */
.qr-ally-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 3px solid #c0a040;
  border-radius: var(--radius);
  padding: 8px 10px;
}
/* ─── TIME TAB ─── */
.qt-clock-face {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-bottom: 12px;
}
.qt-analog {
  width: 90px; height: 90px; flex-shrink: 0;
}
.qt-time-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.qt-digital {
  font-family: 'Cinzel', serif; font-size: 32px; font-weight: 900;
  color: var(--accent-gold); letter-spacing: 2px; line-height: 1;
}
.qt-period { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 3px; color: #8a7040; }
.qt-date-line { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-top: 2px; }
.qt-weekday { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 2px; color: #7a6030; }
.qt-season-weather {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.qt-badge {
  flex: 1; padding: 5px 8px;
  background: var(--bg-dark); border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600;
  color: var(--accent-gold); text-align: center;
}
.qt-advance-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5px; margin-bottom: 10px;
}
.qt-adv-btn {
  padding: 7px 4px;
  background: var(--bg-mid); border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700;
  color: #a08030; cursor: pointer; text-align: center;
  transition: all 0.12s;
}
.qt-adv-btn:hover { border-color: #8a6020; color: #e0b050; background: var(--bg-dark); }
.qt-adv-btn.back { color: #706030; }
.qt-set-row { display: flex; gap: 5px; align-items: center; margin-bottom: 10px; }
.qt-set-row input { font-size: 13px !important; padding: 5px 6px !important; min-height: unset !important; text-align: center; }
.qt-mini-cal { }
.qt-cal-header {
  display: flex; align-items: center; gap: 4px; margin-bottom: 6px;
}
.qt-cal-nav {
  width: 24px; height: 24px;
  background: var(--bg-mid); border: 1px solid var(--border-dark);
  border-radius: var(--radius); color: #a08030;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s; flex-shrink: 0;
}
.qt-cal-nav:hover { border-color: #8a6020; color: #e0b050; }
.qt-cal-month-name {
  flex: 1; text-align: center;
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  color: var(--accent-gold); letter-spacing: 1px;
}
.qt-cal-grid {
  display: grid; gap: 2px;
}
.qt-cal-cell {
  font-family: 'Cinzel', serif; font-size: 10px;
  text-align: center; padding: 3px 1px;
  color: var(--text-muted); border-radius: 3px;
  cursor: pointer; transition: all 0.1s;
}
.qt-cal-cell:hover { background: #1e1608; color: #e0c080; }
.qt-cal-cell.today {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid #c0a040; color: #e0c040;
  font-weight: 900;
}
.qt-cal-cell.hdr {
  color: #5a4820; font-size: 8px; font-weight: 700;
  letter-spacing: 1px; cursor: default;
}
.qt-cal-cell.hdr:hover { background: none; color: #5a4820; }
.qt-cal-cell.holiday { color: #d06050; }
.quick-roll-toggle {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #10302a, #081e18);
  border: 2px solid #3a7a60;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 20px rgba(40,160,120,0.2);
  transition: all 0.2s;
}
.quick-roll-toggle:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 30px rgba(60,200,140,0.4); transform: scale(1.05); }

/* ─── ALLIES BUTTON & PANEL ─── */
.allies-toggle {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #2a0e4a, #180830);
  border: 2px solid #7a3ac0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(120,60,200,0.2);
  transition: all 0.2s; user-select: none;
}
.allies-toggle:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 30px rgba(140,60,220,0.4); transform: scale(1.05); }
.allies-panel {
  position: fixed;
  bottom: 222px; right: 88px; /* fallback — JS prepíše */
  width: 300px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: linear-gradient(180deg, #1a0e2e 0%, #120820 100%);
  border: 1px solid #7a3ac0;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 40px rgba(100,30,180,0.15);
  max-height: 75vh;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 201;
}
.allies-panel.open { display: flex; }
#alliesQuickList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #7a3ac0 #1a0e2e;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#alliesQuickList::-webkit-scrollbar { width: 5px; }
#alliesQuickList::-webkit-scrollbar-track { background: #1a0e2e; border-radius: 3px; }
#alliesQuickList::-webkit-scrollbar-thumb { background: #7a3ac0; border-radius: 3px; }
.allies-card-body {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: #5a2a90 #1a0820;
}
.allies-card-body::-webkit-scrollbar { width: 4px; }
.allies-card-body::-webkit-scrollbar-track { background: #1a0820; border-radius: 2px; }
.allies-card-body::-webkit-scrollbar-thumb { background: #5a2a90; border-radius: 2px; }
.allies-panel-header {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; color: #c090ff;
  text-align: center; margin-bottom: 10px;
  border-bottom: 1px solid #5a2a90; padding-bottom: 8px;
  text-shadow: 0 0 12px rgba(160,100,255,0.4);
}
.allies-empty {
  text-align: center; padding: 20px;
  color: #6a4a90; font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 1px; line-height: 1.8;
}
.allies-wrap {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  z-index: 9999;
}
.qr-preset-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
  margin-bottom: 10px;
}
.qr-preset-row {
  display: flex; align-items: center; gap: 6px;
}
.qr-fire-btn {
  flex: 1;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qr-fire-btn:hover { border-color: var(--border-gold-bright); background: linear-gradient(135deg, var(--bg-panel), var(--bg-card)); color: var(--text-primary); }
.qr-fire-btn .qr-label { display:block; color: var(--text-primary); font-size: 11px; margin-bottom: 2px; }
.qr-fire-btn .qr-formula { display:block; color: var(--text-secondary); font-size: 10px; font-family:'Crimson Text',serif; letter-spacing:0; }
.qr-delete-btn {
  width: 28px; height: 28px; flex-shrink:0;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--accent-red);
  border-radius: var(--radius);
  color: var(--text-red);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.qr-delete-btn:hover { border-color: var(--accent-red-bright); color: var(--accent-red-bright); }
.qr-edit-btn {
  border-color: var(--border-gold);
  color: var(--accent-gold);
}
.qr-edit-btn:hover { border-color: var(--border-gold-bright); color: var(--accent-gold-bright); }
.qr-upcast-btn {
  color: #b07ae0;
  border-color: #5a2a90;
  background: rgba(80,20,120,0.25);
  font-size: 12px;
  padding: 2px 6px;
  order: -1; /* appear before the main fire button */
}
.qr-upcast-btn:hover { border-color: #9050d0; color: #d0a0ff; background: rgba(100,30,150,0.4); }
.qr-add-section {
  border-top: 1px solid var(--border-dark);
  padding-top: 12px;
  margin-top: 4px;
}
.qr-add-section .section-header { margin-bottom: 10px; }
.qr-form { display: flex; flex-direction: column; gap: 7px; }
.qr-form input, .qr-form select { font-size: 13px; }
.qr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.qr-result-box {
  text-align: center;
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0e1a0e, #080e08);
  border: 1px solid #3a6a40;
  border-radius: var(--radius);
  margin-bottom: 10px;
  padding: 8px;
}
.qr-result-num {
  font-family: 'Cinzel', serif;
  font-size: 36px; font-weight: 900;
  color: #80e0a0;
  text-shadow: 0 0 16px rgba(80,200,120,0.5);
  animation: rollIn 0.3s ease;
  line-height: 1;
}
.qr-result-detail {
  font-family: 'Crimson Text', serif;
  font-size: 15px; color: #50a070;
  margin-top: 3px;
}
.qr-empty {
  text-align: center;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 16px 0;
}

/* ─── UPCAST PICKER ─── */
.qr-upcast-wrap { padding: 4px 0; }
.qr-upcast-title { font-family:'Cinzel',serif; font-size:10px; letter-spacing:1px; color:var(--accent-gold); text-align:center; margin-bottom:8px; }
.qr-upcast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:7px; }
.qr-upcast-slot-btn { background:linear-gradient(135deg,rgba(20,40,20,0.8),rgba(10,25,10,0.6)); border:1px solid #3a6a30; border-radius:5px; color:#90d060; padding:5px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; transition:border-color 0.15s,background 0.15s; }
.qr-upcast-slot-btn:hover:not(:disabled) { border-color:#70c040; background:linear-gradient(135deg,rgba(30,60,20,0.9),rgba(20,40,10,0.7)); }
.qr-upcast-slot-btn.qr-upcast-exhausted { background:rgba(20,20,20,0.4); border-color:#333; color:#555; cursor:not-allowed; }
.qr-upcast-lvl { font-family:'Cinzel',serif; font-size:11px; font-weight:700; }
.qr-upcast-dice { font-family:'Crimson Text',serif; font-size:13px; color:#f08040; }
.qr-upcast-exhausted .qr-upcast-dice { color:#555; }
.qr-upcast-avail { font-size:9px; color:var(--text-muted); font-family:'Cinzel',serif; }
.qr-upcast-cancel { width:100%; background:transparent; border:1px solid #3a3a3a; border-radius:4px; color:var(--text-muted); font-size:10px; padding:3px; cursor:pointer; font-family:'Cinzel',serif; letter-spacing:0.5px; }
.qr-upcast-cancel:hover { border-color:#555; color:var(--text-secondary); }

/* ─── COMBAT HUD ─── */
.combat-hud-toggle {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #2a0a0a, #1a0606);
  border: 2px solid #8b2020;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 20px rgba(180,40,40,0.2);
  transition: all 0.2s;
}
.combat-hud-toggle:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 30px rgba(220,60,60,0.4); transform: scale(1.05); }
.combat-hud-panel {
  position: fixed;
  bottom: 156px; right: 88px; /* fallback — JS prepíše */
  width: 360px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: linear-gradient(180deg, #1a0e0e, #0e0808);
  border: 1px solid #7a2020;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px rgba(160,40,40,0.1);
  display: none;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 201;
}
.combat-hud-panel.open { display: block; }
.hud-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a1010;
}
.hud-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.hud-title {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aa4444;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* HP row */
.hud-hp-row {
  display: flex; align-items: center; gap: 8px;
}
.hud-hp-big {
  font-family: 'Cinzel', serif;
  font-size: 38px; font-weight: 900;
  color: #e05050;
  text-shadow: 0 0 16px rgba(200,40,40,0.4);
  line-height: 1;
  min-width: 60px;
  text-align: center;
}
.hud-hp-controls {
  display: flex; flex-direction: column; gap: 4px;
}
.hud-hp-btn-row { display: flex; gap: 4px; }
.hud-hp-inp {
  width: 60px !important;
  font-size: 14px !important;
  text-align: center;
  padding: 5px 4px !important;
  min-height: unset !important;
  background: #1a0a0a !important;
  border-color: #4a1a1a !important;
}
.hud-btn {
  background: linear-gradient(135deg, #2a1010, #180808);
  border: 1px solid #5a2020;
  border-radius: var(--radius);
  color: #cc6060;
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.hud-btn:hover { border-color: #aa4040; color: #ee8080; }
.hud-btn.green { background: linear-gradient(135deg,#0e2a14,#08180a); border-color:#2a6a30; color:#60cc70; }
.hud-btn.green:hover { border-color:#4a9a50; color:#80ee90; }
.hud-btn.blue { background: linear-gradient(135deg,#0e1a2a,#080e18); border-color:#2a4a7a; color:#6090cc; }
.hud-btn.blue:hover { border-color:#4a6aaa; color:#80a0ee; }
.hud-btn.gold { background: linear-gradient(135deg,#2a1e08,#180e04); border-color:#6a4a10; color:#c09040; }
.hud-btn.gold:hover { border-color:#9a7a20; color:#e0b060; }
.hud-btn.big { padding: 8px 14px; font-size: 11px; }
/* HP sub stats */
.hud-sub-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin-top: 8px;
}
.hud-stat-box {
  background: #150a0a;
  border: 1px solid #3a1515;
  border-radius: var(--radius);
  padding: 6px;
  text-align: center;
}
.hud-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 18px; font-weight: 700;
  color: var(--accent-gold);
  line-height: 1;
}
.hud-stat-lbl {
  font-family: 'Cinzel', serif;
  font-size: 8px; color: var(--text-muted);
  letter-spacing: 1px; margin-top: 2px;
}
/* Spell slots */
.hud-slots-grid {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.hud-slot-group {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #150a0a; border: 1px solid #2a1515;
  border-radius: var(--radius); padding: 5px 6px;
  min-width: 32px;
}
.hud-slot-lbl { font-family:'Cinzel',serif; font-size:8px; color:#aa4444; letter-spacing:1px; }
.hud-slot-dots { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.hud-slot-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid #4a2a2a;
  background: #2a1010;
  cursor: pointer;
  transition: all 0.12s;
}
.hud-slot-dot.avail { background: #603030; border-color: #aa5050; }
.hud-slot-dot.avail:hover { background: #aa4444; border-color: #ee6060; }
.hud-slot-dot.used { background: #1a0808; border-color: #2a1010; }
/* Hit Dice */
.hud-hitdice-row { display:flex; align-items:center; gap:8px; }
.hud-hd-display {
  font-family:'Cinzel',serif; font-size:20px; font-weight:700;
  color: #c0a040; min-width:50px; text-align:center;
}
/* Death saves */
.hud-ds-row { display:flex; gap:12px; }
.hud-ds-col { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hud-ds-lbl { font-family:'Cinzel',serif; font-size:9px; letter-spacing:1px; }
.hud-ds-dots { display:flex; gap:5px; }
.hud-ds-dot {
  width: 16px; height: 16px;
  border-radius: 50%; border: 1.5px solid;
  cursor: pointer; transition: all 0.12s;
}
.hud-ds-dot.suc { border-color:#4a8a40; background:#1a3a14; }
.hud-ds-dot.suc.filled { background:#60aa50; border-color:#80dd60; box-shadow:0 0 6px rgba(80,180,60,0.5); }
.hud-ds-dot.fail { border-color:#8a2020; background:#3a1010; }
.hud-ds-dot.fail.filled { background:#cc3030; border-color:#ee5050; box-shadow:0 0 6px rgba(200,40,40,0.5); }
/* Consumables */
.hud-consumable-row {
  display:flex; align-items:center; gap:6px;
  padding: 5px 0;
  border-bottom: 1px solid #1a0808;
}
.hud-consumable-row:last-child { border-bottom:none; }
.hud-cons-name { flex:1; font-family:'Crimson Text',serif; font-size: 17px; color:var(--text-secondary); }
.hud-cons-count {
  font-family:'Cinzel',serif; font-size:16px; font-weight:700;
  color:var(--accent-gold); min-width:30px; text-align:center;
}
.hud-cons-btn {
  width:22px; height:22px;
  background:var(--bg-dark); border:1px solid #4a3a18;
  border-radius:var(--radius); color:#c09040;
  font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.12s;
}
.hud-cons-btn:hover { border-color:#8a6a28; color:#f0c060; }
.hud-cons-del { background:#1a0808; border-color:#4a1818; color:#cc5050; }
.hud-cons-del:hover { border-color:#aa3030; color:#ee7070; }
.hud-add-cons-row { display:flex; gap:5px; margin-top:8px; }
.hud-add-cons-row input { font-size:12px !important; padding:5px 8px !important; min-height:unset !important; }
.hud-conditions-grid {
  display: flex; flex-wrap:wrap; gap:5px;
}
.hud-cond-chip {
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid #3a1515;
  background: #150a0a;
  color: var(--text-muted);
  font-family:'Cinzel',serif; font-size:9px; font-weight:600;
  letter-spacing:1px;
  cursor: pointer; transition: all 0.12s;
}
.hud-cond-chip.active { border-color:#cc3030; background:#2a0a0a; color:#ee6060; box-shadow:0 0 6px rgba(180,30,30,0.3); }
.hud-rest-row { display:flex; gap:6px; }
.hud-insp-box {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-dark); border:1px solid #4a3a18;
  border-radius:var(--radius); padding:7px 12px;
  cursor:pointer; transition:all 0.15s;
}
.hud-insp-box.lit { border-color:#c0a040; background:#2a2008; box-shadow:0 0 10px rgba(180,150,40,0.3); }
.hud-insp-gem { font-size:18px; }
.hud-insp-lbl { font-family:'Cinzel',serif; font-size:10px; color:#c09040; letter-spacing:1px; }


/* ─── MAGIC ITEMS ENHANCED ─── */
.magic-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.magic-card:hover { border-color: var(--border-gold); }
.magic-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  user-select: none;
}
.magic-card-header:hover { background: rgba(255,255,255,0.02); }
.magic-rarity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.magic-card-name {
  flex: 1;
  font-family: 'IM Fell English', serif; font-size: 17px;
  color: var(--accent-gold);
}
.magic-card-meta {
  font-family: 'Cinzel', serif; font-size: 9px;
  letter-spacing: 1.5px; color: var(--text-muted);
  padding: 2px 6px; border-radius: 10px;
  border: 1px solid var(--border-dark);
}
.magic-card-chevron {
  font-size: 10px; color: var(--text-muted); transition: transform 0.2s;
}
.magic-card.open .magic-card-chevron { transform: rotate(180deg); }
.magic-card-body {
  display: none; padding: 0 12px 12px;
  border-top: 1px solid var(--border-dark);
}
.magic-card.open .magic-card-body { display: block; }
.magic-card-fields {
  display: flex; gap: 6px; margin: 10px 0 8px; flex-wrap: wrap;
}
.magic-roll-bar {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px;
}
.magic-roll-btn {
  padding: 5px 10px;
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-deepest));
  border: 1px solid var(--border-dark); border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; color: #c0a040; cursor: pointer;
  transition: all 0.12s;
}
.magic-roll-btn:hover { border-color: #8a6a28; color: #e8c060; background: #1e1408; }
.magic-roll-btn.purple { border-color: #4a2a6a; color: #b080e0; background: linear-gradient(135deg,#120a1a,#0a0610); }
.magic-roll-btn.purple:hover { border-color: #7a4aaa; color: #d090ff; }
.magic-result-line {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  color: var(--accent-gold); margin-top: 6px; min-height: 18px;
  text-align: center;
}
.rarity-Common      { background: #888; }
.rarity-Uncommon    { background: #4a9a40; }
.rarity-Rare        { background: #4060cc; }
.rarity-Very-Rare   { background: #8040cc; }
.rarity-Legendary   { background: #cc8820; }
.rarity-Artifact    { background: #cc3030; }

/* ─── INVENTORY FILTER ─── */
.inv-filter-bar {
  display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; align-items: center;
}
.inv-filter-inp {
  flex: 1; min-width: 120px;
  font-size: 12px !important; padding: 5px 8px !important;
  min-height: unset !important;
  background: var(--bg-input) !important;
}
.inv-filter-btn {
  padding: 5px 9px;
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; color: var(--text-muted); cursor: pointer;
  transition: all 0.12s; white-space: nowrap;
}
.inv-filter-btn:hover { border-color: var(--border-gold); color: var(--accent-gold); }
.inv-filter-btn.active { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(192,160,64,0.08); }
.inv-count-badge {
  font-family: 'Cinzel', serif; font-size: 10px; color: var(--text-muted);
  margin-left: auto; white-space: nowrap; align-self: center;
}

/* ─── EQUIPMENT SUB-TABS ─── */
.eq-subtab-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--border-dark);
  padding-bottom: 0;
}
.eq-subtab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px 11px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}
.eq-subtab-btn:hover { color: var(--accent-gold); }
.eq-subtab-btn.active {
  color: var(--accent-gold-bright);
  border-bottom-color: var(--accent-gold);
}
.eq-subtab-icon { font-size: 15px; }
.eq-subtab-badge {
  background: var(--accent-gold);
  color: #1a1006;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0;
}
.eq-subtab-pane { display: none; }
.eq-subtab-pane.active { display: block; }

/* ─── EXTERNAL STORAGE INTRO ─── */
.eq-storage-intro {
  text-align: center;
  padding: 28px 20px 20px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-top: 3px solid var(--border-gold);
  border-radius: var(--radius);
}
.eq-storage-intro-icon { font-size: 36px; margin-bottom: 8px; }
.eq-storage-intro-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.eq-storage-intro-desc {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
}
.eq-storage-add-loc-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  font-size: 13px;
  padding: 12px;
  border-style: dashed;
  opacity: 0.75;
}
.eq-storage-add-loc-btn:hover { opacity: 1; }

/* ─── PLAYER NOTE CARD ─── */
.player-note-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 3px solid #304a6a;
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.player-note-card:hover { border-color: var(--border-gold); }
.player-note-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.player-note-card-body {
  display: none;
  padding: 0 14px 14px;
}
.player-note-card.expanded .player-note-card-body { display: block; }
.player-note-card.expanded .pn-chevron { transform: rotate(90deg); }
.pn-chevron { color: var(--text-muted); font-size: 10px; transition: transform 0.2s; flex-shrink: 0; }
/* ─── ABSENT COMBATANT ─── */
.combatant-absent {
  opacity: 0.38 !important;
  filter: grayscale(0.6);
  border-style: dashed !important;
}
.combatant-absent .combatant-name-input { text-decoration: line-through; color: var(--text-muted) !important; }
/* ─── LOOT GENERATOR ─── */
.loot-item-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px;
  transition: border-color 0.15s;
}
.loot-item-card:hover { border-color: var(--border-gold); }
.loot-item-card.magic { border-color: #3a2a6a; }
.loot-item-card.magic:hover { border-color: #7a4aaa; }
.loot-rarity-pip {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.loot-item-info { flex: 1; min-width: 0; }
.loot-item-name {
  font-family: 'IM Fell English', serif; font-size: 17px;
  color: var(--accent-gold-bright); margin-bottom: 2px;
}
.loot-item-name.magic { color: #c080ff; }
.loot-item-meta {
  font-family: 'Cinzel', serif; font-size: 9px;
  letter-spacing: 1px; color: var(--text-muted);
}
.loot-item-desc {
  font-family: 'Crimson Text', serif; font-size: 15px;
  color: var(--text-secondary); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.loot-add-btn {
  padding: 4px 8px;
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all 0.12s; flex-shrink: 0;
}
.loot-add-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.loot-add-btn.added { border-color: #3a6a30; color: #70aa60; background: #0a1208; }
.loot-gold-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 8px;
  background: linear-gradient(135deg,#1e1a08,#120e04);
  border: 1px solid #6a5020; border-radius: var(--radius);
}
.loot-gold-icon { font-size: 20px; }
.loot-gold-amount {
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 900;
  color: #e0c040;
}
.loot-gold-breakdown { font-family: 'Cinzel', serif; font-size: 9px; color: #8a7040; }
.loot-hist-entry {
  padding: 6px 0; border-bottom: 1px solid var(--border-dark);
}
.loot-hist-entry:last-child { border-bottom: none; }
/* ─── SPELLS ─── */
.spell-slot-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border-dark);
}
.spell-slot-row:last-child { border-bottom: none; }
.slot-level {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-muted);
  width: 60px;
  flex-shrink: 0;
}
.slot-dots { display: flex; gap: 5px; flex: 1; }
.slot-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.slot-dot.used { background: transparent; border-color: var(--border-dark); }
.slot-dot.available { background: var(--accent-gold); box-shadow: 0 0 6px rgba(212,168,67,0.4); }

.spell-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.spell-card:hover { border-color: var(--border-gold); }
.spell-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.spell-level-badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--accent-gold);
  flex-shrink: 0;
}
.spell-name { font-family: 'IM Fell English', serif; font-size: 17px; font-weight: 400; color: var(--text-primary); flex: 1; }
.spell-school { font-size: 12px; color: var(--text-muted); font-style: italic; }
.spell-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.spell-tag {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  padding: 2px 6px;
}
.spell-desc { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; display: none; }
.spell-card.expanded .spell-desc { display: block; }
.spell-prepared {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.spell-prepared.yes { background: var(--accent-gold); }

/* ─── EQUIP / UNEQUIP BUTTONS ─── */
.equip-btn {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
  vertical-align: middle;
  margin-right: 3px;
}
.equip-weapon-btn {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  color: var(--accent-gold);
  border-color: var(--border-gold);
}
.equip-weapon-btn:hover { background: linear-gradient(135deg,#3a2810,#2a1508); box-shadow: 0 0 8px rgba(212,168,67,0.25); }
.equip-armor-btn {
  background: linear-gradient(135deg,#0a1a2a,#050f1a);
  color: #6090c0;
  border-color: #305070;
}
.equip-armor-btn:hover { background: linear-gradient(135deg,#102030,#081520); box-shadow: 0 0 8px rgba(80,140,200,0.2); }
.equip-magic-btn {
  background: linear-gradient(135deg,#1a0a2a,#0f051a);
  color: #a070d0;
  border-color: #602090;
}
.equip-magic-btn:hover { background: linear-gradient(135deg,#250f38,#180828); }
.equip-generic-btn {
  background: linear-gradient(135deg,#1a1a10,#0f0f08);
  color: var(--text-secondary);
  border-color: var(--border-dark);
}
.equip-generic-btn:hover { border-color: var(--border-gold); color: var(--accent-gold); }
.unequip-btn {
  background: linear-gradient(135deg,#1a1a1a,#0f0f0f);
  color: var(--text-muted);
  border-color: #3a3a2a;
  font-size: 13px;
  padding: 2px 6px;
}
.unequip-btn:hover { color: var(--accent-gold); border-color: var(--border-gold); background: linear-gradient(135deg,var(--bg-card),var(--bg-dark)); }


.equipment-table { width: 100%; border-collapse: collapse; }
.equipment-table th {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-gold);
}
.equipment-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-dark);
  font-size: 14px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.equipment-table td input {
  min-height: 30px;
  font-size: 13px;
  padding: 4px 8px;
}
.equipment-table tr:hover td { background: rgba(180,130,40,0.03); }
.equipment-table .del-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  transition: color 0.15s;
}
.equipment-table .del-btn:hover { color: var(--accent-red-bright); }

/* ─── FEATURE CARDS ─── */
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.feature-card:hover { border-color: var(--border-gold); }
.feature-title {
  font-family: 'IM Fell English', serif;
  font-size: 17px;
  color: var(--accent-gold);
  margin-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.feature-source {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.feature-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ─── CURRENCY ─── */
.currency-row {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.currency-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.currency-cp { background: linear-gradient(135deg,#4a3020,#2a1a10); border: 1px solid #6a4a28; color: #b87a40; }
.currency-sp { background: linear-gradient(135deg,#303038,#1a1a22); border: 1px solid #6a6a78; color: #a0a0b8; }
.currency-ep { background: linear-gradient(135deg,#203020,#101818); border: 1px solid #4a6a50; color: #60a878; }
.currency-gp { background: linear-gradient(135deg,#3a2a08,#201808); border: 1px solid var(--border-gold); color: var(--accent-gold); }
.currency-pp { background: linear-gradient(135deg,#302838,#181020); border: 1px solid #6a5878; color: #b898d0; }
.currency-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-muted);
  width: 100px;
  flex-shrink: 0;
}
.currency-row input { flex: 1; }

/* ─── NPC NOTES ─── */
.npc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.npc-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); }
.npc-card-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; user-select: none;
}
.npc-card-body {
  display: none; padding: 0 12px 12px; border-top: 1px solid var(--border-dark);
}
.npc-card.expanded .npc-card-body { display: block; }
.npc-card.expanded .npc-chevron { transform: rotate(90deg); }
.npc-chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }

/* ─── PLAYER BESTIARY CARD ─── */
.pb-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--border-gold);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pb-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); }
.pb-card-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none;
}
.pb-card-body {
  display: none; padding: 0 16px 16px; border-top: 1px solid var(--border-dark);
}
.pb-card.expanded .pb-card-body { display: block; }
.pb-card.expanded .pb-chevron { transform: rotate(90deg); }

/* Companion cards */
.comp-card { background:var(--bg-card);border:1px solid var(--border-dark);border-left:4px solid var(--accent-gold);border-radius:var(--radius);margin-bottom:10px;transition:border-color .2s,box-shadow .2s;overflow:hidden; }
.comp-card:hover { border-color:var(--border-gold);box-shadow:var(--shadow-gold); }
.comp-card-header { display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none; }
.comp-card-body { display:none;padding:14px 16px 16px;border-top:1px solid var(--border-dark); }
.comp-card.expanded .comp-card-body { display:block; }
.comp-card.expanded .comp-chevron { transform:rotate(90deg); }
.comp-chevron { font-size:10px;color:var(--text-muted);transition:transform .25s;flex-shrink:0; }
.comp-hp-bar-wrap { background:var(--bg-panel);border-radius:4px;height:8px;overflow:hidden;margin-top:4px; }
.comp-hp-bar { height:100%;border-radius:4px;transition:width .3s,background .3s; }
.comp-stat-box { background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:6px;padding:8px 10px;text-align:center; }
.comp-stat-box .stat-val { font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--text-primary); }
.comp-stat-box .stat-lbl { font-family:'Cinzel',serif;font-size:9px;color:var(--text-muted);letter-spacing:1px;margin-top:2px; }
.comp-hp-btn { background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:4px;color:var(--text-secondary);font-size:13px;font-family:'Cinzel',serif;font-weight:600;padding:4px 8px;cursor:pointer;transition:all .15s;letter-spacing:0.5px; }
.comp-hp-btn-dmg { background:linear-gradient(135deg,#2a0808,#180404);border-color:var(--accent-crimson);color:#e06060; }
.comp-hp-btn-dmg:hover { background:linear-gradient(135deg,#3a0a0a,#220606);border-color:var(--accent-red-bright);color:#ff8888;box-shadow:0 0 8px rgba(180,30,30,0.3); }
.comp-hp-btn-heal { background:linear-gradient(135deg,#08280a,#041604);border-color:#3a8a3a;color:#6adb6a; }
.comp-hp-btn-heal:hover { background:linear-gradient(135deg,#0a3a0c,#062006);border-color:#5aaa5a;color:#88ff88;box-shadow:0 0 8px rgba(60,180,60,0.3); }
.comp-hp-btn-full { background:linear-gradient(135deg,var(--bg-card),var(--bg-dark));border-color:var(--border-gold);color:var(--accent-gold-bright);font-size:10px;letter-spacing:1.5px; }
.comp-hp-btn-full:hover { background:linear-gradient(135deg,#3a2a12,#201608);border-color:var(--accent-gold-bright);box-shadow:0 0 8px rgba(212,168,67,0.3); }
.comp-hp-btn-death { background:linear-gradient(135deg,#1a0a1a,#0e0610);border-color:#5a2a7a;color:#c060e0;font-size:15px;padding:3px 9px; }
.comp-hp-btn-death:hover { background:linear-gradient(135deg,#280e28,#160a16);border-color:#8a3aaa;box-shadow:0 0 8px rgba(140,60,200,0.3); }
.comp-type-tag { font-family:'Cinzel',serif;font-size:9px;padding:2px 8px;border-radius:3px;border:1px solid;letter-spacing:0.5px; }
.pb-chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.pb-tag {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
  border: 1px solid; border-radius: 3px; padding: 2px 7px; white-space: nowrap;
}
.pb-section-title {
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent-gold); border-bottom: 1px solid var(--border-dark);
  padding-bottom: 4px; margin: 14px 0 8px;
}
.npc-name {
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.npc-meta {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
/* ─── QUEST CARDS collapsible ─── */
.quest-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.quest-card:hover { box-shadow: var(--shadow-gold); }
.quest-card-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; user-select: none;
}
.quest-card-body {
  display: none; padding: 0 12px 12px; border-top: 1px solid var(--border-dark);
}
.quest-card.expanded .quest-card-body { display: block; }
.quest-card.expanded .quest-chevron { transform: rotate(90deg); }
.quest-chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.quest-status-badge {
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 10px; border: 1px solid; flex-shrink: 0; white-space: nowrap;
}

/* ─── CONCENTRATION ─── */
.conc-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--accent-gold);
  background: rgba(180,130,40,0.1);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 3px 10px;
}

/* ─── TOAST ─── */
.toast {
  position: fixed;
  bottom: 100px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--accent-gold);
  letter-spacing: 1px;
  opacity: 0;
  transition: all 0.3s;
  z-index: 300;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);
}
.modal-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* ─── PASSIVE PERCEPTION ─── */
.passive-box {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.passive-val {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-gold);
}

/* ─── CONDITION TRACKER ─── */
.conditions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.condition-chip {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-dark);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.condition-chip.active {
  border-color: var(--accent-red);
  color: #e06060;
  background: rgba(139,26,26,0.2);
  box-shadow: 0 0 8px rgba(139,26,26,0.3);
}

/* ─── EXHAUSTION ─── */
.exhaust-pip {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-dark);
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.exhaust-pip.active {
  background: linear-gradient(135deg, #3a0808, #200404);
  border-color: var(--accent-red);
  color: #e05050;
}

/* ─── ATTUNEMENT ─── */
.attune-slot {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.attune-gem {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  flex-shrink: 0;
}
.attune-gem.active {
  background: radial-gradient(circle at 30% 30%, #a870d0, #6020a0);
  border-color: #c090e0;
  box-shadow: 0 0 8px rgba(160,80,200,0.5);
}

/* ─── RESISTANCE TABLE ─── */
.resistance-table { width: 100%; }
.resistance-table th {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-dark);
}
.resistance-table td {
  text-align: center;
  padding: 5px 4px;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(50,40,25,0.5);
}
.resistance-table td:first-child { text-align: left; }
.res-check {
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1.5px solid var(--border-dark);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-block;
}
.res-check.active { background: var(--accent-gold); border-color: var(--accent-gold); }
.res-check.immune { background: var(--accent-red); border-color: var(--accent-red); }
.res-check.vuln { background: #e07030; border-color: #e07030; }

/* ─── NUM SPINNER (+ / - buttons) ─── */
.num-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.num-wrap input[type="number"] {
  -moz-appearance: textfield;
  padding-right: 22px !important;
}
.num-wrap input[type="number"]::-webkit-inner-spin-button,
.num-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-spin-btns {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.num-spin-btn {
  width: 16px;
  height: 14px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-dark);
  border-radius: 2px;
  color: var(--accent-gold);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  user-select: none;
  flex-shrink: 0;
}
.num-spin-btn:hover {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-card));
  border-color: var(--border-gold);
  color: var(--accent-gold-bright);
}
.num-spin-btn:active { transform: scale(0.9); }

/* Stat-box specific: bigger buttons */
.stat-score .num-wrap { width: 100%; height: 100%; }
.stat-score .num-spin-btns { right: 1px; }
.stat-score .num-spin-btn { width: 14px; height: 18px; font-size: 13px; }

/* HP big-num specific */
.hp-display .num-wrap { display: inline-flex; }
.hp-display .num-spin-btn { width: 16px; height: 20px; font-size: 14px; }

/* combat-stat val specific */
.combat-stat .num-wrap { display: inline-flex; justify-content: center; }
.combat-stat .num-spin-btns { right: 0px; }

/* ─── MISC HELPERS ─── */
.divider { border: none; border-top: 1px solid var(--border-dark); margin: 14px 0; }
.text-center { text-align: center; }
.text-gold { color: var(--accent-gold); }
.small-header {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.add-row-btn {
  background: none;
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 8px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.2s;
  margin-top: 8px;
}
.add-row-btn:hover { border-color: var(--border-gold); color: var(--accent-gold); }

/* ─── JOURNAL ─── */
.journal-entry {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.journal-entry:hover { border-color: var(--border-gold); }
.journal-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-mid));
  user-select: none;
}
.journal-card-header:hover { background: linear-gradient(135deg, var(--bg-card), var(--bg-panel)); }
.journal-card-toggle {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 16px;
  transition: transform 0.2s;
}
.journal-entry.open .journal-card-toggle { transform: rotate(90deg); }
.journal-card-title {
  font-family: 'IM Fell English', serif;
  font-size: 17px;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-card-title.empty { color: var(--text-muted); font-style: italic; }
.journal-card-date {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  flex-shrink: 0;
}
.journal-card-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border-dark);
}
.journal-entry.open .journal-card-body { display: block; }
.journal-card-body textarea {
  width: 100%;
  margin-top: 12px;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  box-sizing: border-box;
}
.journal-title-input {
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-primary);
  width: 100%;
  margin-top: 12px;
  padding: 4px 0;
  outline: none;
}
.journal-title-input:focus { border-bottom-color: var(--border-gold); }
.journal-date-input {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border-dark);
  outline: none;
  width: 100%;
  margin-top: 6px;
  padding: 2px 0;
}
.journal-date-input:focus { border-bottom-color: var(--border-gold); color: var(--text-secondary); }
.journal-no-results {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  font-style: italic;
}

/* ─── TRACKER ─── */
.tracker-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.tracker-pips { display: flex; gap: 4px; flex-wrap: wrap; }
.tracker-pip {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  cursor: pointer;
  transition: all 0.15s;
}
.tracker-pip.used {
  background: var(--accent-gold);
  box-shadow: 0 0 6px rgba(212,168,67,0.4);
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .header-title { font-size: 16px; }
}

/* ─── BATTLE TRACKER ─── */
.battle-lane { min-height: 120px; }
.combatant-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: grab;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  position: relative;
  user-select: none;
}
.combatant-card:active { cursor: grabbing; }
.combatant-card.dragging { opacity: 0.4; transform: scale(0.97); }
.combatant-card.drag-over { border-color: var(--accent-gold); box-shadow: 0 0 12px rgba(212,168,67,0.3); }
.combatant-card.is-turn {
  border-color: var(--accent-gold);
  box-shadow: 0 0 20px rgba(212,168,67,0.25);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
}
.combatant-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.combatant-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.combatant-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.combatant-name-input {
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-dark);
  border-radius: 0;
  color: var(--text-primary);
  padding: 0;
  min-height: unset;
  width: 100%;
  flex: 1;
}
.combatant-name-input:focus { border-bottom-color: var(--border-gold); }
.initiative-badge {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--accent-gold);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.combatant-stats-row { display: flex; gap: 6px; margin-bottom: 8px; }
.combatant-stat-mini {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 4px 6px;
  text-align: center;
}
.combatant-stat-mini label { font-size: 8px; margin-bottom: 2px; display:block; }
.combatant-stat-mini input {
  background: none; border: none;
  font-family: 'Cinzel', serif;
  font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  width: 100%; padding: 0; min-height: unset;
}
.effect-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; min-height: 10px; }
.effect-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #1e1808, #120e05);
  border: 1px solid var(--border-dark);
  border-radius: 20px;
  padding: 3px 8px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-secondary);
}
.effect-rounds {
  background: var(--accent-amber);
  color: #1a0800;
  border-radius: 50%;
  width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
}
.effect-rounds.low { background: var(--accent-red-bright); color: white; }
.rm-effect { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 0; }
.rm-effect:hover { color: var(--accent-red-bright); }
.add-effect-row { display: flex; gap: 5px; align-items: center; }
.add-effect-row input { font-size: 12px; padding: 4px 7px; min-height: 28px; }

/* ─── CLOCK & CALENDAR ─── */
.cal-grid { display: grid; gap: 3px; }
#calendarGrid { display: grid; gap: 2px; }
.cal-cell {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
  text-align: center; padding: 6px 2px;
  border-radius: var(--radius); cursor: pointer;
  transition: all 0.15s; min-width: 0;
  border: 1px solid transparent;
  color: var(--text-secondary);
}
.cal-cell.cal-empty { cursor: default; }
.cal-cell.cal-day:hover { background: rgba(180,130,40,0.12); color: var(--accent-gold); border-color: var(--border-dark); }
.cal-cell.cal-today {
  background: linear-gradient(135deg, var(--bg-mid), var(--bg-card));
  border: 1px solid var(--border-gold);
  color: var(--accent-gold-bright);
  box-shadow: 0 0 8px rgba(212,168,67,0.25);
  font-weight: 900;
}
.cal-cell.cal-holiday {
  color: #b080e8;
  border-color: #4a2a70;
  background: rgba(80,40,120,0.15);
  position: relative;
}
.cal-cell.cal-holiday::after {
  content: '★';
  position: absolute;
  top: 0px; right: 1px;
  font-size: 7px;
  color: #c090ff;
  line-height: 1;
}
.cal-cell.cal-today.cal-holiday {
  border-color: #c090ff;
  box-shadow: 0 0 10px rgba(160,80,240,0.3);
}
.cal-cell.cal-note {
  color: #70c8a0;
  border-color: #2a6050;
  background: rgba(40,100,70,0.15);
  position: relative;
}
.cal-cell.cal-note::after {
  content: '•';
  position: absolute;
  top: 0px; right: 2px;
  font-size: 8px;
  color: #70c8a0;
  line-height: 1;
}
.cal-cell.cal-today.cal-note {
  border-color: #70c8a0;
  box-shadow: 0 0 8px rgba(70,180,120,0.3);
}
.holiday-item-details {
  border: 1px solid #4a2a70;
  border-radius: var(--radius); margin-bottom: 4px;
  overflow: hidden;
}
.holiday-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(80,40,120,0.12);
  padding: 5px 8px;
  list-style: none;
}
.holiday-dot { width: 8px; height: 8px; border-radius: 50%; background: #b080e8; flex-shrink: 0; }
.holiday-name { font-family: 'Cinzel', serif; font-size: 11px; color: #c090ff; flex: 1; }
.holiday-day { font-family: 'Cinzel', serif; font-size: 10px; color: var(--text-muted); }
.holiday-edit-btn {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: #7a5a9a; opacity: 0.6;
  border-radius: 3px;
  transition: color 0.2s, opacity 0.2s, background 0.2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.holiday-edit-btn:hover {
  color: #b080e8; opacity: 1;
  background: rgba(100,50,150,0.2);
}
.month-manager-row {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--radius); padding: 7px 10px; margin-bottom: 5px;
}
.time-log-entry {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid rgba(50,40,25,0.5); font-size: 13px;
}
.time-log-time { font-family: 'Cinzel', serif; font-size: 11px; color: var(--accent-gold); white-space: nowrap; flex-shrink: 0; }
.time-log-text { color: var(--text-secondary); flex: 1; }
.prayer-card {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border-dark); border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-lg); margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.prayer-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.prayer-card.done-card {
  border-left-color: var(--text-muted);
  opacity: 0.75;
}
.prayer-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.prayer-card-header:hover {
  background: rgba(255,255,255,0.04);
}
.prayer-done-toggle {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; min-width: 22px; max-width: 22px;
  border: 2px solid var(--border-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}
.prayer-done-toggle:checked {
  background: var(--accent-amber);
  border-color: var(--accent-gold-bright);
}
.prayer-done-toggle:checked::after {
  content: '✓';
  display: block;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 13px; font-weight: bold;
  line-height: 1;
}
.prayer-name-display {
  flex: 1; font-family: 'IM Fell English', serif; font-size: 16px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prayer-name-display.done-name {
  text-decoration: line-through; color: var(--text-muted);
}
.prayer-time-badge {
  font-size: 10px; font-family: 'Cinzel', serif;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(138,106,40,0.2);
  border: 1px solid var(--border-gold);
  color: var(--accent-gold);
  white-space: nowrap; flex-shrink: 0;
}
.prayer-deity-badge {
  font-size: 11px; color: var(--text-secondary);
  flex-shrink: 0; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prayer-collapse-arrow {
  font-size: 11px; color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.prayer-collapse-arrow.open { transform: rotate(180deg); }
.prayer-card-body {
  padding: 0 14px 12px 46px;
  display: none;
}
.prayer-card-body.open { display: block; }
.prayer-card-body .prayer-field-row {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.prayer-card-body input[type="text"],
.prayer-card-body select,
.prayer-card-body textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 6px 10px; font-size: 13px;
  font-family: 'Crimson Text', serif;
  width: 100%;
  box-sizing: border-box;
}
.prayer-card-body select {
  width: auto; font-size: 12px;
}
.prayer-card-body textarea {
  resize: vertical; min-height: 60px; line-height: 1.5;
}
.prayer-card-actions {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px;
}
.prayer-del-btn {
  background: rgba(139,26,26,0.2);
  border: 1px solid var(--accent-red);
  color: var(--text-red);
  border-radius: var(--radius);
  padding: 4px 10px; font-size: 12px;
  cursor: pointer; transition: background 0.15s;
}
.prayer-del-btn:hover { background: rgba(139,26,26,0.4); }

/* ─── INITIATIVE STRIP ─── */
.init-strip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 72px;
  max-width: 80px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.init-strip-card:hover { border-color: var(--border-gold); }
.init-strip-card.active-turn {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  box-shadow: 0 0 16px rgba(212,168,67,0.35);
}
.init-strip-card.active-turn::after {
  content: '▼';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent-gold);
  font-size: 12px;
}
.init-strip-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  overflow: hidden;
  flex-shrink: 0;
}
.init-strip-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.init-strip-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}
.init-strip-num {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--accent-gold);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.init-strip-hp {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: #c05050;
  letter-spacing: 0.5px;
}
.init-strip-arrow {
  display: flex;
  align-items: center;
  color: var(--border-dark);
  font-size: 16px;
  flex-shrink: 0;
  margin: 0 2px;
  align-self: center;
  margin-top: 10px;
}
.init-strip-empty {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 2px;
  padding: 8px 0;
  font-style: italic;
}
.ws-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 6px 4px;
  text-align: center;
}
.ws-stat-box .ws-stat-label {
  font-size: 9px;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  display: block;
}
.ws-stat-box .ws-stat-val {
  font-size: 16px;
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
}
.ws-stat-box .ws-stat-mod {
  font-size: 11px;
  color: var(--text-secondary);
}
.ws-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 14px;
  position: relative;
  transition: border-color 0.2s;
}
.ws-form-card.active-form {
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(212,168,67,0.25);
}

/* ── CUSTOM THEME PANEL ── */
.custom-theme-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--bg-mid);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
}
.custom-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.custom-theme-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: 1;
}
.custom-color-picker {
  width: 36px;
  height: 24px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  padding: 1px;
  flex-shrink: 0;
}
.custom-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color-picker::-webkit-color-swatch { border: none; border-radius: 2px; }
.custom-theme-apply-btn {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border-gold);
  background: var(--bg-card);
  color: var(--accent-gold);
  cursor: pointer;
  transition: all 0.15s;
}
.custom-theme-apply-btn:hover { background: var(--bg-mid); border-color: var(--border-gold-bright); }
.custom-theme-reset-btn { border-color: var(--border-dark); color: var(--text-muted); }
.custom-theme-reset-btn:hover { border-color: var(--border-mid); color: var(--text-secondary); }

/* ═══════════════════════════════════════════
   PRIORITY HUD — Floating Pinned Goals Panel
   ═══════════════════════════════════════════ */

/* ── Toggle button ── */
.priority-hud-toggle {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #1a1428, #0e0c1a);
  border: 2px solid #6a4a9a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(100,70,160,0.2);
  transition: all 0.2s;
  user-select: none;
  position: relative;
}
.priority-hud-toggle:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 28px rgba(130,90,210,0.45);
  transform: scale(1.06);
  border-color: #9a70cc;
}

/* ── Badge counter ── */
.priority-hud-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: linear-gradient(135deg, #c49a3c, #8a6a20);
  border: 1.5px solid #f0c060;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 700;
  color: #fff8e0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(212,168,67,0.5);
  pointer-events: none;
}

/* ── Floating panel ── */
.priority-hud-panel {
  position: fixed;
  bottom: 24px; right: 88px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: linear-gradient(180deg, #18122a 0%, #0e0a1c 100%);
  border: 1px solid #6a4a9a;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0,0,0,0.85), 0 0 30px rgba(90,50,160,0.15);
  display: none;
  flex-direction: column;
  max-height: 72vh;
  overflow: hidden;
  z-index: 201;
}
.priority-hud-panel.open { display: flex; }

/* ── Panel header ── */
.priority-hud-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: #b090e0;
  border-bottom: 1px solid #2e1a50;
  text-shadow: 0 0 10px rgba(160,110,240,0.3);
  flex-shrink: 0;
}

/* ── Tabs row ── */
.phud-tabs {
  display: flex;
  border-bottom: 1px solid #2e1a50;
  flex-shrink: 0;
}
.phud-tab {
  flex: 1;
  padding: 7px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Cinzel', serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  color: #5a4070;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.phud-tab:hover { color: #9070c0; }
.phud-tab.active {
  color: #c090ff;
  border-bottom-color: #8050d0;
  background: rgba(120,70,200,0.08);
}

/* ── Scrollable body ── */
.priority-hud-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: #6a4a9a #18122a;
  min-height: 0;
}
.priority-hud-body::-webkit-scrollbar { width: 4px; }
.priority-hud-body::-webkit-scrollbar-track { background: #18122a; border-radius: 2px; }
.priority-hud-body::-webkit-scrollbar-thumb { background: #6a4a9a; border-radius: 2px; }

/* ── Empty state ── */
.phud-empty {
  text-align: center;
  padding: 18px 10px;
  color: #5a4070;
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  line-height: 1.6;
}
.phud-empty span {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.5px;
  opacity: 0.7;
  display: block;
  margin-top: 5px;
}

/* ── Collapsible card ── */
.phud-card {
  border: 1px solid #2e1a50;
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.phud-card:last-child { margin-bottom: 0; }
.phud-card:hover { border-color: #5a3a80; }
.phud-card.phud-card-done { opacity: 0.6; border-color: #1e1430; }

/* ── Card header (always visible, click to collapse) ── */
.phud-card-header {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  transition: background 0.12s;
  user-select: none;
}
.phud-card-header:hover { background: rgba(120,70,200,0.08); }

.phud-card-chevron {
  font-size: 8px;
  color: #5a4070;
  flex-shrink: 0;
  transition: transform 0.15s;
  width: 8px;
}
.phud-card-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.phud-card-title {
  flex: 1;
  min-width: 0;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phud-card-title.phud-done-name {
  text-decoration: line-through;
  color: var(--text-muted);
}
.phud-card-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Card body (collapsible content) ── */
.phud-card-body {
  padding: 0 10px 9px 33px;
  background: rgba(0,0,0,0.15);
}
.phud-item-desc {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 5px;
}
.phud-item-reward {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--accent-gold);
  opacity: 0.85;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.phud-item-tag {
  font-family: 'Cinzel', serif;
  font-size: 9px; letter-spacing: 1px;
  color: var(--text-muted);
}

/* ── Unpin button ── */
.phud-unpin-btn {
  flex-shrink: 0;
  background: none; border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 1px 2px;
  opacity: 1;
  transition: transform 0.15s, opacity 0.15s;
  line-height: 1;
}
.phud-unpin-btn:hover {
  transform: rotate(-20deg) scale(1.25);
  opacity: 0.65;
}

/* Slot counter label */
.phud-slot-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: right;
  padding: 0 4px 6px;
  opacity: 0.7;
}

/* Custom checkbox */
.phud-cb-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 2px;
  vertical-align: middle;
}
.phud-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.phud-cb-box {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border-gold);
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  flex-shrink: 0;
}
.phud-cb-wrap:hover .phud-cb-box {
  border-color: #60cc60;
  box-shadow: 0 0 5px rgba(96,204,96,0.35);
}
.phud-cb:checked + .phud-cb-box {
  background: #60cc60;
  border-color: #60cc60;
  box-shadow: 0 0 6px rgba(96,204,96,0.5);
}
.phud-cb:checked + .phud-cb-box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #111;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ═══ MULTICLASS TRACKER ═══ */
.mc-collapse-header {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 4px 2px; border-radius: var(--radius);
  transition: background 0.15s;
  user-select: none;
}
.mc-collapse-header:hover { background: rgba(255,255,255,0.04); }
.mc-chevron {
  font-size: 11px; color: var(--accent-gold); width: 12px; flex-shrink: 0;
  transition: transform 0.2s;
}
.mc-body {
  padding-top: 2px;
}
.mc-classes-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mc-class-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.mc-class-name {
  flex: 2; min-width: 110px; font-size: 14px;
}
.mc-class-row .num-wrap {
  flex-shrink: 0;
}
.mc-type-select { flex: 1; min-width: 100px; font-size: 12px; padding: 4px 6px; }
.mc-type-badge {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
  border: 1px solid; border-radius: 4px; padding: 3px 8px;
  white-space: nowrap; flex-shrink: 0;
}
.mc-result-label {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1px;
  color: var(--accent-gold); margin-bottom: 6px;
}
.mc-slot-results {
  padding: 4px 0 2px;
}
.mc-slot-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.mc-slot-chip {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
  border: 1px solid var(--border-gold); border-radius: 6px; padding: 4px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 44px;
}
.mc-slot-chip.pact { border-color: #7a3ac0; background: linear-gradient(135deg, #2a0e4a, #180830); }
.mc-slot-lvl { font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
.mc-slot-num { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; color: var(--accent-gold); line-height: 1; }
.mc-slot-chip.pact .mc-slot-num { color: #b07ae0; }
.mc-apply-btn {
  width: 100%; margin-top: 10px; padding: 9px 0;
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #80d090; background: linear-gradient(135deg, #1a3020, #0e1e12);
  border: 1px solid #3a7a50; border-radius: var(--radius); cursor: pointer; transition: box-shadow 0.2s;
}
.mc-apply-btn:hover { box-shadow: 0 0 14px rgba(80,180,100,0.35); }
.mc-divider { height: 1px; background: var(--border-dark); margin: 10px 0; }

/* ═══ PACT MAGIC SLOT STYLING ═══ */
.spell-slot-row.pact-row {
  background: linear-gradient(90deg, rgba(122,58,192,0.08), transparent);
  border-left: 2px solid #7a3ac0;
  border-radius: 0 4px 4px 0;
  padding-left: 6px;
  margin-left: -8px;
}
.slot-dot.pact {
  border-color: #7a3ac0 !important;
}
.slot-dot.pact.available {
  background: radial-gradient(circle, #b07ae0 30%, #7a3ac066 100%) !important;
  box-shadow: 0 0 6px #b07ae055;
}
.slot-dot.pact.used {
  background: #2a0e4a !important;
  border-color: #4a1a7a !important;
  box-shadow: none;
}
.pact-badge {
  font-size: 11px;
  cursor: help;
  opacity: 0.9;
}


/* ═══════════════════════════════════════════
   FAB FLOATING MENU
═══════════════════════════════════════════ */
/* FAB wrapper — anchored to bottom-right corner, never moves */
#fabMenu {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Main D20 button — always at the bottom, never moves */
#fabMain {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1200, #2c1e00);
  border: 2px solid var(--border-gold);
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 28px rgba(180,130,40,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10000;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
#fabMain:hover {
  box-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 40px rgba(212,168,67,0.5);
  border-color: #f0c040;
}
#fabMain.spin-open {
  animation: fabSpinOpen 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
#fabMain.spin-close {
  animation: fabSpinClose 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes fabSpinOpen {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(200deg) scale(1.13); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes fabSpinClose {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-200deg) scale(1.13); }
  100% { transform: rotate(-360deg) scale(1); }
}
#fabMain.open {
  border-color: #f0c040;
  box-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 40px rgba(212,168,67,0.5);
}

/* D20 SVG icon — always visible, no X */
.fab-d20-icon { width: 32px; height: 32px; display: flex; }
.fab-x-icon { display: none !important; }

/* Sub-buttons container — sits ABOVE D20 (order:-1), expands upward */
#fabItems {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, margin-bottom 0.3s ease;
  pointer-events: none;
  order: -1;
}
#fabItems.open {
  max-height: 420px;
  opacity: 1;
  margin-bottom: 10px;
  pointer-events: all;
}

/* Individual FAB item — slides up from below, all aligned in one column */
.fab-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  transform: translateY(40px) scale(0.8);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
#fabItems.open .fab-item {
  transform: translateY(0) scale(1);
  opacity: 1;
}
/* All items animate together — straight vertical, no wave */
#fabItems.open .fab-item { transition-delay: 0s; }

.fab-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 3px 14px rgba(0,0,0,0.6);
}
.fab-btn:hover { transform: scale(1.12); }

.fab-btn-general  { background: linear-gradient(135deg,#1a1500,#2a2000); border-color: var(--border-gold); box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 14px rgba(180,130,40,0.2); }
.fab-btn-general:hover  { box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 24px rgba(212,168,67,0.4); }

.fab-btn-dice     { background: linear-gradient(135deg,#0e1a1a,#081414); border-color: #3a8a6a; box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 14px rgba(40,160,120,0.2); }
.fab-btn-dice:hover     { box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 24px rgba(60,200,140,0.4); }

.fab-btn-combat   { background: linear-gradient(135deg,#1a0808,#100404); border-color: #8b2020; box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 14px rgba(160,40,40,0.2); }
.fab-btn-combat:hover   { box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 24px rgba(220,60,60,0.4); }

.fab-btn-allies   { background: linear-gradient(135deg,#120a24,#0a0616); border-color: #7a3ac0; box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 14px rgba(120,60,200,0.2); }
.fab-btn-allies:hover   { box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 24px rgba(140,60,220,0.4); }

.fab-btn-priority { background: linear-gradient(135deg,#0e0c1a,#080610); border-color: #6a4a9a; box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 14px rgba(100,70,160,0.2); }
.fab-btn-priority:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 24px rgba(130,90,210,0.4); }

.fab-btn-sessionnotes { background: linear-gradient(135deg,#0a1a0e,#060e08); border-color: #3a7a4a; box-shadow: 0 3px 14px rgba(0,0,0,0.6), 0 0 14px rgba(50,140,80,0.2); }
.fab-btn-sessionnotes:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 24px rgba(60,180,90,0.4); }

/* ── Session Notes Panel ── */
.session-notes-panel {
  position: fixed;
  bottom: 24px;
  right: 88px;
  width: 420px;
  max-width: calc(100vw - 110px);
  max-height: 82vh;
  background: linear-gradient(180deg, #0e1a10, #080e08);
  border: 1px solid #3a7a4a;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px rgba(50,140,80,0.12);
  display: none;
  overflow-y: auto;
  z-index: 10002;
  box-sizing: border-box;
}
.session-notes-panel.open { display: block; }

.sn-textarea {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid #2a4a2a;
  border-radius: var(--radius);
  color: var(--text-primary, #e0d8c0);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  padding: 9px 11px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.sn-textarea:focus { outline: none; border-color: #3a7a4a; }
.sn-textarea::placeholder { color: var(--text-muted, #555); font-style: italic; }

.sn-session-input {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid #2a4a2a;
  border-radius: var(--radius);
  color: var(--text-secondary, #c0b090);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  padding: 5px 9px;
}
.sn-session-input:focus { outline: none; border-color: #3a7a4a; }
.sn-session-input::placeholder { color: var(--text-muted); font-style: italic; }

.sn-recognised-hint {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid #1a3a1a;
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  margin-bottom: 8px;
}
.sn-hint-label { color: var(--text-muted); letter-spacing: 0.5px; flex-shrink: 0; }
.sn-name-chip { padding: 2px 8px; border-radius: 12px; font-family: 'Cinzel', serif; font-size: 10px; white-space: nowrap; border: 1px solid; }
.sn-chip-npc      { color: #80a0d0; border-color: #80a0d044; background: #80a0d011; }
.sn-chip-player   { color: #80d0a0; border-color: #80d0a044; background: #80d0a011; }
.sn-chip-location { color: #d08060; border-color: #d0806044; background: #d0806011; }
.sn-chip-match    { color: #80d090; border-color: #80d09055; background: #80d09018; font-weight: 600; }

.sn-preview-section {
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius);
  padding: 7px 9px;
  border: 1px solid #1a3a1a;
  margin-bottom: 7px;
}
.sn-preview-cat {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid #1a3a1a;
}
.sn-preview-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #1a3a1a;
}
.sn-preview-item.sn-preview-item-col {
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.sn-item-title-row {
  width: 100%;
}
.sn-item-title-input {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid #1a3a2a;
  border-radius: 3px;
  color: var(--accent-gold, #d4a843);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  padding: 3px 7px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.sn-item-title-input:focus { outline: none; border-color: #3a7a4a; }
.sn-item-title-input::placeholder { color: var(--text-muted); font-style: italic; opacity: 0.6; }
.sn-item-content-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.sn-preview-item:last-child { border-bottom: none; }
.sn-preview-text { font-family: 'Crimson Text', serif; font-size: 13px; color: var(--text-secondary); flex: 1; line-height: 1.4; }
.sn-reclassify {
  background: rgba(0,0,0,0.3);
  border: 1px solid #2a4a2a;
  border-radius: 3px;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  padding: 2px 4px;
  cursor: pointer;
  flex-shrink: 0;
  width: 88px;
  max-width: 88px;
}

.sn-drag-handle {
  color: var(--text-muted);
  font-size: 14px;
  cursor: grab;
  padding: 0 5px 0 2px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: opacity 0.15s;
  user-select: none;
}
.sn-preview-item:hover .sn-drag-handle { opacity: 0.9; }
.sn-preview-item.sn-dragging { opacity: 0.35; }
.sn-preview-item.sn-drop-target {
  background: rgba(80,200,120,0.12);
  border-radius: 3px;
  outline: 1px dashed #3a9a5a;
}

/* ── Assign-to search ── */
.sn-assign-input {
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1px solid rgba(128,160,208,0.25);
  border-radius: 4px;
  color: var(--text-primary, #ccc);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  padding: 3px 7px;
  height: 24px;
  width: 100%;
  transition: border-color .15s;
}
.sn-assign-input:focus { outline: none; border-color: #80a0d0; opacity: 1 !important; }
.sn-assign-input::placeholder { color: var(--text-muted, #666); font-style: italic; }
.sn-assign-dropdown {
  font-family: 'Cinzel', serif;
}
.sn-assign-opt {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(128,128,128,0.15);
  transition: background .1s;
  display: flex;
  align-items: center;
}
.sn-assign-opt:last-child { border-bottom: none; }
.sn-assign-opt:hover { background: rgba(128,160,208,0.15); }

/* Tooltip labels — absolutely positioned to the left of the button */
.fab-label {
  position: absolute;
  right: 56px;
  background: rgba(10,8,20,0.92);
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--accent-gold);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.fab-item:hover .fab-label { opacity: 1; }

/* Hide original individual toggle buttons — replaced by FAB */
.dice-toggle,
.combat-hud-toggle,
.allies-toggle,
.priority-hud-toggle,
.quick-roll-toggle {
  display: none !important;
}
/* Reposition wrappers so panels still open correctly but toggles are hidden */
/* Panels anchor to right edge; FAB sits at far bottom-right corner */
#diceRollerWrapper,
#combatHudWrapper,
#quickRoller,
#alliesWrapper,
#priorityHudWrapper {
  right: 80px; /* pushed left so panels clear the FAB button column */
}

/* FAB itself snaps tight to the corner */
#fabMenu {
  right: 12px;
  bottom: 12px;
  flex-direction: column;
}

/* ═══════════════════════════════════════════
   ASI TRACKER v4
   ═══════════════════════════════════════════ */

/* ── Notification Banner ── */
#asiNotifBanner { margin-top: 10px; }

.asi-nb-wrap {
  border: 1px solid rgba(240,180,40,0.4);
  border-radius: 8px;
  background: rgba(240,180,40,0.05);
  padding: 10px 12px;
  box-shadow: 0 0 14px rgba(240,180,40,0.1);
  animation: asiNbGlow 3s ease-in-out infinite;
}
@keyframes asiNbGlow {
  0%,100% { box-shadow: 0 0 10px rgba(240,180,40,0.10); }
  50%      { box-shadow: 0 0 22px rgba(240,180,40,0.22); }
}

.asi-nb-title {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #e8b830;
  margin-bottom: 8px;
}

.asi-nb-entry { margin-bottom: 10px; }
.asi-nb-entry:last-child { margin-bottom: 0; }

.asi-nb-entry-header { margin-bottom: 6px; }

.asi-nb-lv {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: #e8b830;
  letter-spacing: 0.5px;
}

/* Ability score buttons */
.asi-nb-attrs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.asi-nb-attr, .asi-nb-attr-sel, .asi-nb-attr-double, .asi-nb-attr-blocked {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 58px;
  position: relative;
}
.asi-nb-attr {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
.asi-nb-attr:hover {
  border-color: rgba(240,180,40,0.4);
  background: rgba(240,180,40,0.07);
  transform: translateY(-1px);
}
/* +1 state — yellow */
.asi-nb-attr-sel {
  border-color: rgba(240,190,40,0.6);
  background: rgba(240,190,40,0.12);
  box-shadow: 0 0 8px rgba(240,190,40,0.2);
}
.asi-nb-attr-sel:hover {
  background: rgba(240,190,40,0.18);
}
/* +2 state — green */
.asi-nb-attr-double {
  border-color: rgba(80,200,120,0.7);
  background: rgba(80,200,120,0.14);
  box-shadow: 0 0 10px rgba(80,200,120,0.25);
}
.asi-nb-attr-double:hover {
  background: rgba(80,200,120,0.2);
}
/* blocked state — dimmed */
.asi-nb-attr-blocked {
  border-color: rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.1);
  opacity: 0.35;
  cursor: not-allowed;
}

/* Small × in top-right corner of selected button */
.asi-nb-attr-x {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  line-height: 1;
  pointer-events: none;
}

.asi-nb-attr-name {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.asi-nb-attr-val {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-gold);
  margin-top: 2px;
}
.asi-nb-attr-val b { color: #80dd80; }
.asi-nb-attr-pip {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}
.asi-pip-1 { color: #e8c040; }  /* yellow for +1 */
.asi-pip-2 { color: #50c878; }  /* green for +2 */

/* Footer */
.asi-nb-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.asi-nb-hint {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
}
.asi-nb-feat-btn {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(180,120,220,0.35);
  background: rgba(180,120,220,0.08);
  color: #c090e0;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.asi-nb-feat-btn:hover {
  background: rgba(180,120,220,0.2);
  border-color: rgba(180,120,220,0.6);
}

/* Flash na stat boxe po aplikovaní */
@keyframes asiStatFlash {
  0%   { box-shadow: 0 0 0px rgba(120,220,120,0); }
  30%  { box-shadow: 0 0 18px rgba(120,220,120,0.6); }
  100% { box-shadow: 0 0 0px rgba(120,220,120,0); }
}
.asi-stat-flash { animation: asiStatFlash 1.2s ease; }

/* ── História collapse ── */
.asi-hist-wrap {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  overflow: hidden;
}
.asi-hist-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
  background: rgba(0,0,0,0.15);
  transition: background 0.2s;
  user-select: none;
}
.asi-hist-header:hover { background: rgba(255,255,255,0.04); }
.asi-hist-chevron { font-size: 9px; color: var(--text-muted); width: 10px; }
.asi-hist-title {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: 0.6;
}
.asi-hist-count {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.5;
  margin-left: auto;
}
.asi-hist-body {
  padding: 6px 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.asi-hist-empty {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.5;
}
.asi-hist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asi-hist-lv {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: var(--text-muted);
  min-width: 28px;
}
.asi-hist-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-muted);
  flex: 1;
  opacity: 0.7;
}
.asi-undo-btn {
  font-size: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.35;
  padding: 2px 5px;
  transition: opacity 0.2s, color 0.2s;
  margin-left: auto;
}
.asi-undo-btn:hover { opacity: 1; color: var(--accent-gold); }
/* ══════════════════════════════════════════
   MAPS MODULE v3 — grid kariet + collapse
══════════════════════════════════════════ */

/* ── Grid wrapper ── */
#mapListContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

/* ── Karta ── */
.map-card-v3 {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.map-card-v3:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 10px rgba(180,130,40,0.12);
}
.map-card-v3-active {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 16px rgba(212,168,67,0.22) !important;
}

/* ── Thumbnail ── */
.map-card-v3-thumb {
  width: 100%;
  height: 90px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: opacity 0.15s;
}
.map-card-v3-thumb:hover { opacity: 0.88; }

/* Active badge */
.map-card-v3-active-badge {
  position: absolute;
  top: 5px; right: 5px;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 5px;
  background: var(--accent-gold);
  color: #000;
  border-radius: 3px;
  font-weight: 700;
}

/* ── Footer ── */
.map-card-v3-footer {
  padding: 6px 8px 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-card-v3-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-card-v3-session {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Action row ── */
.map-card-v3-actions {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.map-card-v3-btn {
  flex: 1;
  font-size: 12px;
  padding: 3px 2px;
  background: var(--bg-mid);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  text-align: center;
}
.map-card-v3-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-mid);
  background: var(--bg-card);
}
.map-card-v3-btn-active {
  color: var(--accent-gold) !important;
  border-color: var(--accent-gold)55 !important;
  background: var(--accent-gold)11 !important;
}
.map-card-v3-btn-del:hover {
  color: var(--accent-red-bright);
  border-color: var(--accent-red);
}

/* ── Collapsible detail ── */
.map-card-v3-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.map-card-v3-detail.open {
  max-height: 280px;
}

/* ── Bg color presets ── */
.map-bg-preset {
  width: 20px; height: 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  outline: 1px solid rgba(255,255,255,0.1);
}
.map-bg-preset:hover { transform: scale(1.2); }
.map-bg-preset.active {
  border-color: var(--accent-gold);
  outline: 1px solid var(--accent-gold);
}

/* ── Stránkovanie ── */
.map-page-btn {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  min-width: 28px; height: 26px;
  padding: 0 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.map-page-btn:hover:not([disabled]) { background: var(--bg-mid); border-color: var(--border-mid); color: var(--text-primary); }
.map-page-btn.active { background: var(--accent-gold)22; border-color: var(--accent-gold)66; color: var(--accent-gold); }
.map-page-btn[disabled] { opacity: 0.3; cursor: not-allowed; }

/* ── Toolbar ── */
.map-tool-btn {
  font-size: 15px;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.map-tool-btn:hover { background: var(--bg-mid); color: var(--text-primary); border-color: var(--border-dark); }
.map-tool-btn.active { background: var(--accent-gold)22; border-color: var(--accent-gold)66; color: var(--accent-gold); }

.map-color-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.map-color-swatch:hover { transform: scale(1.15); }
.map-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px var(--accent-gold); }

.map-grid-btn {
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.map-grid-btn:hover { border-color: var(--border-mid); color: var(--text-secondary); }
.map-grid-btn.active { background: var(--accent-gold)22; border-color: var(--accent-gold)66; color: var(--accent-gold); }

.map-card-btn {
  font-size: 13px; padding: 2px 6px;
  background: var(--bg-mid);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.map-card-btn:hover { color: var(--text-primary); border-color: var(--border-mid); }
.map-card-btn-del:hover { color: var(--accent-red-bright); border-color: var(--accent-red); }

/* ── Tag ── */
.map-tag {
  font-family: 'Cinzel', serif;
  font-size: 9px; letter-spacing: 0.5px;
  padding: 1px 5px;
  background: var(--accent-gold)18;
  border: 1px solid var(--accent-gold)30;
  border-radius: 3px;
  color: var(--accent-gold);
}

/* ── Map card multi-select ── */
.map-card-checkbox {
  position: absolute;
  top: 6px; left: 6px;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  transition: border-color 0.15s, background 0.15s;
  z-index: 2;
}
.map-card-checkbox:hover {
  border-color: var(--accent-gold);
  background: rgba(0,0,0,0.7);
}
.map-card-checkbox.checked {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #000;
}
.map-card-v3-checked {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 2px var(--accent-gold)44 !important;
}

/* ══════════════════════════════════════════
   ARCHIVE MODULE
══════════════════════════════════════════ */

/* ── Folder sidebar ── */
.arch-folder-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
}
.arch-folder-row:hover { background: var(--bg-mid); color: var(--text-primary); }
.arch-folder-row.active {
  background: var(--accent-gold)18;
  border-color: var(--accent-gold)44;
  color: var(--accent-gold);
}
.arch-folder-icon { font-size: 14px; flex-shrink: 0; }
.arch-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-folder-count {
  font-size: 10px; color: var(--text-muted);
  background: var(--bg-deepest);
  border: 1px solid var(--border-dark);
  border-radius: 10px; padding: 0 5px;
  flex-shrink: 0;
}
.arch-folder-edit, .arch-folder-del {
  display: none;
  font-size: 11px; padding: 1px 4px;
  background: transparent; border: none;
  cursor: pointer; color: var(--text-muted);
  border-radius: 3px;
}
.arch-folder-row:hover .arch-folder-edit,
.arch-folder-row:hover .arch-folder-del { display: inline; }
.arch-folder-edit:hover { color: var(--accent-gold); }
.arch-folder-del:hover  { color: var(--accent-red-bright); }

/* ── Toolbar ── */
.arch-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-dark);
}

/* ── View toggle ── */
.arch-view-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.arch-view-btn:hover { background: var(--bg-mid); color: var(--text-primary); }
.arch-view-btn.active { background: var(--accent-gold)22; color: var(--accent-gold); }

/* ── Grid view ── */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.arch-grid-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.arch-grid-item:hover {
  border-color: var(--border-gold);
  box-shadow: 0 0 10px rgba(180,130,40,0.12);
}
.arch-grid-thumb {
  width: 100%; height: 100px;
  overflow: hidden;
  position: relative;
}
.arch-type-badge {
  position: absolute;
  bottom: 4px; right: 4px;
  font-size: 14px;
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  padding: 1px 4px;
}

/* ── Detail / List view ── */
.arch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.arch-detail-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.arch-detail-item:hover { border-color: var(--border-mid); }
.arch-detail-thumb {
  width: 80px; height: 70px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deepest);
  position: relative;
}
.arch-img-count {
  position: absolute;
  bottom: 3px; right: 3px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  background: rgba(0,0,0,0.7);
  color: var(--accent-gold);
  padding: 1px 4px;
  border-radius: 3px;
}
.arch-detail-info { flex: 1; min-width: 0; }
.arch-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Link badges ── */
.arch-link-badge {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.npc-link   { background: rgba(90,154,238,0.15); border: 1px solid rgba(90,154,238,0.3);  color: #5a9aee; }
.quest-link { background: rgba(112,192,80,0.15); border: 1px solid rgba(112,192,80,0.3);  color: #70c050; }

/* ══════════════════════════════════════════
   ARCHIVE LIGHTBOX v2 — full redesign
══════════════════════════════════════════ */

/* ── Overlay ── */
.arch-lb-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}

/* ── Shell — hlavný kontajner ── */
.arch-lb-shell {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  max-height: 860px;
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(200,155,48,0.1);
  position: relative;
}

/* ── Viewer (ľavá časť) ── */
.arch-lb-viewer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #060604;
  border-right: 1px solid var(--border-dark);
}

/* ── Zoom bar ── */
.arch-lb-zoombar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-deepest);
  border-bottom: 1px solid var(--border-dark);
  flex-shrink: 0;
}
.arch-lb-zbtn {
  width: 26px; height: 26px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.arch-lb-zbtn:hover { background: var(--bg-mid); color: var(--text-primary); }
.arch-lb-zbtn-reset {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.5px;
  width: auto;
  padding: 0 7px;
  color: var(--text-muted);
}
.arch-lb-zlabel {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--accent-gold);
  min-width: 36px;
  text-align: center;
}
.arch-lb-hint {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 6px;
}

/* ── Viewport ── */
.arch-lb-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: #060604;
}
.arch-lb-viewport:active { cursor: grabbing; }
.arch-lb-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(1);
  transform-origin: center center;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.04s linear;
}
.arch-lb-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; opacity: 0.15;
}

/* ── Thumbnails ── */
.arch-lb-thumbs {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: var(--bg-deepest);
  border-top: 1px solid var(--border-dark);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}
.arch-lb-thumb {
  width: 52px; height: 44px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.arch-lb-thumb:hover { opacity: 0.85; }
.arch-lb-thumb.active {
  border-color: var(--accent-gold);
  opacity: 1;
}

/* ── Info panel (pravá časť) ── */
.arch-lb-info {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 16px;
  overflow-y: auto;
  background: var(--bg-panel);
  gap: 0;
}
.arch-lb-info-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.arch-lb-info-type {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 4px;
  font-weight: 600;
}
.arch-lb-info-folder {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: var(--text-muted);
}
.arch-lb-info-name {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin-bottom: 5px;
}
.arch-lb-info-session {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.arch-lb-divider {
  height: 1px;
  background: var(--border-dark);
  margin: 12px 0;
}
.arch-lb-info-section-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-top: 10px;
}
.arch-lb-info-desc {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}
.arch-lb-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.arch-lb-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.arch-lb-info-date {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-style: italic;
}
.arch-lb-info-actions {
  display: flex;
  gap: 8px;
}
.arch-lb-action-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 5px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid;
}
.arch-lb-action-edit {
  background: var(--bg-card);
  border-color: var(--border-mid);
  color: var(--text-secondary);
}
.arch-lb-action-edit:hover {
  background: var(--bg-mid);
  color: var(--accent-gold);
  border-color: var(--accent-gold)55;
}
.arch-lb-action-del {
  background: var(--accent-red)18;
  border-color: var(--accent-red)44;
  color: var(--text-red);
}
.arch-lb-action-del:hover {
  background: var(--accent-red)33;
  border-color: var(--accent-red-bright);
  color: var(--accent-red-bright);
}

/* ── Close button ── */
.arch-lb-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-mid);
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.arch-lb-close:hover { background: var(--accent-red)22; color: var(--accent-red-bright); border-color: var(--accent-red)55; }

/* ── Responzívnosť ── */

/* Stredné obrazovky */
@media (max-width: 900px) {
  .arch-lb-shell { flex-direction: column; height: 95vh; }
  .arch-lb-viewer { flex: 1; border-right: none; border-bottom: 1px solid var(--border-dark); }
  .arch-lb-info { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px 14px; overflow-y: auto; flex-shrink: 0; max-height: 200px; }
  .arch-lb-info-name { font-size: 14px; }
  .arch-lb-divider { display: none; }
  .arch-lb-info-section-label { display: none; }
  .arch-lb-info-actions { width: 100%; }
}

/* Malé obrazovky */
@media (max-width: 600px) {
  .arch-lb-overlay { padding: 8px; }
  .arch-lb-hint { display: none; }
  .arch-lb-info { max-height: 160px; }
}

/* ── Galéria responzívnosť ── */
.arch-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
@media (min-width: 1200px) {
  .arch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 700px) {
  .arch-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
  .arch-detail-item { flex-direction: column; }
  .arch-detail-thumb { width: 100%; height: 160px; }
}

/* Archive sidebar responzívnosť */
@media (max-width: 800px) {
  #ntab-content-archive > div {
    flex-direction: column !important;
    height: auto !important;
  }
  #ntab-content-archive > div > div:first-child {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-dark);
    padding-right: 0 !important;
    padding-bottom: 8px;
    margin-bottom: 8px;
    overflow-y: visible;
  }
  .arch-folder-row { display: inline-flex; margin-right: 4px; }
  #archFolderList { display: flex; flex-wrap: wrap; gap: 4px; }
  #ntab-content-archive > div > div:first-child > div:first-child { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   NAME STYLES
   ═══════════════════════════════════════════════════════════════ */
#charName.ns-gold,#charName.ns-silver,#charName.ns-flame,#charName.ns-shadow,
#charName.ns-arcane,#charName.ns-rainbow,#charName.ns-myth,#charName.ns-blood,
#charName.ns-nature,#charName.ns-sepia,#charName.ns-neon,#charName.ns-ice,
#charName.ns-forge,#charName.ns-dream {
  font-family:'Cinzel',serif!important;font-weight:700!important;
  letter-spacing:2px!important;font-size:15px!important;
  text-align:center;transition:all 0.3s ease;
}
@keyframes ns-gold-p{0%,100%{box-shadow:0 0 8px rgba(212,175,55,.4);}50%{box-shadow:0 0 20px rgba(212,175,55,.75),inset 0 0 8px rgba(212,175,55,.2);}}
#charName.ns-gold{background:linear-gradient(135deg,#1a1408,#2a2010)!important;border:1px solid #d4a843!important;color:#f0c060!important;text-shadow:0 0 10px rgba(212,175,55,.6);animation:ns-gold-p 2.5s ease-in-out infinite;}
@keyframes ns-silver-p{0%,100%{box-shadow:0 0 6px rgba(180,180,200,.3);}50%{box-shadow:0 0 16px rgba(200,200,220,.6);}}
#charName.ns-silver{background:linear-gradient(135deg,#0e0e12,#181820)!important;border:1px solid #8090b0!important;color:#c8d0e8!important;text-shadow:0 0 8px rgba(180,190,220,.5);animation:ns-silver-p 3s ease-in-out infinite;}
@keyframes ns-flame-f{0%,100%{text-shadow:0 0 8px #ff4400,0 0 16px #ff8800;color:#ff6620;}33%{text-shadow:0 0 12px #ff2200,0 0 24px #ff6600;color:#ff8840;}66%{text-shadow:0 0 6px #ff5500,0 0 10px #ffaa00;color:#ff5500;}}
#charName.ns-flame{background:linear-gradient(135deg,#150400,#2a0800)!important;border:1px solid #aa3300!important;color:#ff6620!important;animation:ns-flame-f .8s ease-in-out infinite;box-shadow:0 0 10px rgba(200,60,0,.4);}
@keyframes ns-shadow-d{0%,100%{text-shadow:2px 2px 0 #6a4a8a,-1px -1px 8px rgba(154,112,204,.4);}50%{text-shadow:3px 3px 0 #9a70cc,-2px -2px 12px rgba(154,112,204,.65);}}
#charName.ns-shadow{background:linear-gradient(135deg,#050308,#0e0a14)!important;border:1px solid #6a4a8a!important;color:#cc99ff!important;animation:ns-shadow-d 3s ease-in-out infinite;}
@keyframes ns-arcane-p{0%,100%{box-shadow:0 0 10px #7c4dff88;filter:hue-rotate(0deg);}50%{box-shadow:0 0 24px #a855f7cc;filter:hue-rotate(30deg);}}
#charName.ns-arcane{background:linear-gradient(135deg,#060412,#100828)!important;border:1px solid #7c4dff!important;color:#c084fc!important;text-shadow:0 0 12px rgba(168,85,247,.7);animation:ns-arcane-p 2s ease-in-out infinite;}
@keyframes ns-rainbow-h{0%{filter:hue-rotate(0deg) brightness(1.1);}100%{filter:hue-rotate(360deg) brightness(1.1);}}
#charName.ns-rainbow{background:linear-gradient(135deg,#0e0818,#181028)!important;border:1px solid #ff80a0!important;color:#ff80a0!important;text-shadow:0 0 8px #ff80a0,0 0 16px #a080ff;animation:ns-rainbow-h 3s linear infinite;}
@keyframes ns-myth-c{0%{text-shadow:0 0 10px #00e5ff;color:#00e5ff;filter:hue-rotate(0deg);}33%{text-shadow:0 0 14px #a855f7;color:#c0a0ff;filter:hue-rotate(60deg);}66%{text-shadow:0 0 12px #00e5ff;color:#80f0ff;filter:hue-rotate(120deg);}100%{text-shadow:0 0 10px #00e5ff;color:#00e5ff;filter:hue-rotate(0deg);}}
#charName.ns-myth{background:linear-gradient(135deg,#000010,#00001e)!important;border:1px solid #00e5ff!important;color:#00e5ff!important;animation:ns-myth-c 2.5s linear infinite;box-shadow:0 0 12px rgba(0,229,255,.3);}
@keyframes ns-blood-d{0%,100%{box-shadow:0 0 6px rgba(180,0,0,.5),0 2px 8px rgba(180,0,0,.3);}50%{box-shadow:0 0 16px rgba(220,0,0,.75),0 4px 18px rgba(200,0,0,.45);}}
#charName.ns-blood{background:linear-gradient(135deg,#0e0000,#1a0000)!important;border:1px solid #8b0000!important;color:#cc3333!important;text-shadow:0 0 8px rgba(200,0,0,.6);animation:ns-blood-d 1.8s ease-in-out infinite;}
@keyframes ns-nature-b{0%,100%{text-shadow:0 0 8px rgba(50,200,80,.5);box-shadow:0 0 8px rgba(50,200,80,.25);}50%{text-shadow:0 0 16px rgba(80,240,100,.75);box-shadow:0 0 18px rgba(60,220,90,.45);}}
#charName.ns-nature{background:linear-gradient(135deg,#020a03,#061409)!important;border:1px solid #2a8a40!important;color:#60c878!important;animation:ns-nature-b 2.8s ease-in-out infinite;}
@keyframes ns-sepia-f{0%,100%{text-shadow:1px 1px 0 rgba(100,60,10,.6),0 0 8px rgba(180,130,40,.35);}50%{text-shadow:1px 1px 0 rgba(120,80,20,.8),0 0 14px rgba(200,155,60,.5);}}
#charName.ns-sepia{background:linear-gradient(135deg,#1a1005,#2a1a08)!important;border:1px solid #8a6020!important;color:#d4a840!important;font-family:'IM Fell English',serif!important;letter-spacing:3px!important;animation:ns-sepia-f 3.5s ease-in-out infinite;}
@keyframes ns-neon-z{0%,92%,100%{text-shadow:0 0 6px #00ffcc,0 0 14px #00ffcc88;opacity:1;}94%{text-shadow:none;opacity:.7;}96%{text-shadow:0 0 18px #00ffcc,0 0 36px #00ffcc;opacity:1;}}
#charName.ns-neon{background:#000!important;border:1px solid #00ffcc!important;color:#00ffcc!important;text-shadow:0 0 8px #00ffcc;animation:ns-neon-z 4s ease-in-out infinite;}
@keyframes ns-ice-c{0%,100%{text-shadow:0 0 8px #80d8ff,0 0 16px #60c8f088;box-shadow:0 0 8px rgba(100,200,240,.3);}50%{text-shadow:0 0 14px #c0f0ff,0 0 28px #80e8ffaa;box-shadow:0 0 16px rgba(160,230,255,.5);}}
#charName.ns-ice{background:linear-gradient(135deg,#000c18,#001830)!important;border:1px solid #60c8f0!important;color:#c0f0ff!important;animation:ns-ice-c 3s ease-in-out infinite;}
@keyframes ns-forge-g{0%,100%{text-shadow:0 0 8px #ff7a00,0 0 16px #ff5500aa;box-shadow:0 0 10px rgba(255,100,0,.4);}33%{text-shadow:0 0 14px #ffaa30,0 0 28px #ff7a00cc;}66%{text-shadow:0 0 6px #ff4400,0 0 12px #cc3300aa;}}
#charName.ns-forge{background:linear-gradient(135deg,#180800,#2c1000)!important;border:1px solid #ff7a00!important;color:#ffaa40!important;animation:ns-forge-g 1.5s ease-in-out infinite;}
@keyframes ns-dream-f{0%,100%{text-shadow:0 0 10px rgba(216,112,204,.6),0 0 20px rgba(144,216,255,.3);color:#e890d8;}33%{text-shadow:0 0 14px rgba(144,216,255,.7);color:#90d8ff;}66%{text-shadow:0 0 12px rgba(248,192,240,.65);color:#f8c0f0;}}
#charName.ns-dream{background:linear-gradient(135deg,#0d0618,#1e0e30)!important;border:1px solid #d870cc!important;color:#e890d8!important;animation:ns-dream-f 4s ease-in-out infinite;}


/* ═══════════════════════════════════════════════════════════════
   INSPIRATION GEM STYLES
   inactive = tmavý obrys, zhasnutý
   .active  = rozsvietený naplno
   ═══════════════════════════════════════════════════════════════ */

/* ── Dragon's Eye ── */
.inspiration-gem.gem-ruby {
  background: radial-gradient(circle, #200000, #100000) !important;
  border: 2px solid #3a0000 !important;
  border-radius: 40% 60% 55% 45% / 45% 45% 55% 55% !important;
  box-shadow: none !important;
  position: relative; overflow: hidden;
  transition: all 0.35s ease;
}
.inspiration-gem.gem-ruby::after {
  content: ''; position: absolute;
  top: 28%; left: 40%; width: 20%; height: 44%;
  background: rgba(0,0,0,0.6); border-radius: 50%;
  transition: all 0.35s ease;
}
@keyframes gem-ruby-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(220,0,0,.8), 0 0 36px rgba(160,0,0,.5); }
  50%     { box-shadow: 0 0 36px rgba(255,40,40,1), 0 0 72px rgba(200,0,0,.75); }
}
.inspiration-gem.gem-ruby.active {
  background: radial-gradient(circle at 35% 30%, #ff6060, #cc0000 50%, #600000) !important;
  border-color: #ff2020 !important;
  animation: gem-ruby-pulse 1.8s ease-in-out infinite !important;
}
.inspiration-gem.gem-ruby.active::after {
  background: rgba(0,0,0,0.88);
  box-shadow: 0 0 6px rgba(255,80,80,.5);
}

/* ── Void Orb ── */
.inspiration-gem.gem-void {
  background: radial-gradient(circle, #060008, #020005) !important;
  border: 2px solid #140030 !important;
  box-shadow: none !important;
  position: relative; overflow: hidden;
  transition: all 0.35s ease;
}
@keyframes gem-void-spin  { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
@keyframes gem-void-pulse { 0%,100%{ box-shadow: 0 0 20px rgba(110,0,240,.85), 0 0 40px rgba(0,80,255,.55); } 50%{ box-shadow: 0 0 38px rgba(160,0,255,1), 0 0 76px rgba(0,120,255,.75); } }
.inspiration-gem.gem-void.active {
  background: transparent !important;
  border-color: #8020ff !important;
  animation: gem-void-pulse 2s ease-in-out infinite !important;
}
.inspiration-gem.gem-void.active::before {
  content: ''; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, #6000cc, #0040ff, #00ccff, #6000cc);
  animation: gem-void-spin 2s linear infinite;
  border-radius: 0;
}
.inspiration-gem.gem-void.active::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.95), rgba(10,0,40,.85));
  z-index: 1;
}

/* ── Runestone ── */
.inspiration-gem.gem-rune {
  background: radial-gradient(circle, #0c0816, #060210) !important;
  border: 2px solid #1e0e30 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  position: relative; overflow: hidden;
  transition: all 0.35s ease;
}
.inspiration-gem.gem-rune::after {
  content: 'ᚱ'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-family: serif;
  color: rgba(80,40,120,.2);
  transition: all 0.4s ease;
}
@keyframes gem-rune-glow { 0%,100%{ box-shadow: 0 0 16px rgba(140,80,255,.75), inset 0 0 10px rgba(120,60,220,.35); } 50%{ box-shadow: 0 0 30px rgba(190,130,255,.95), inset 0 0 18px rgba(150,90,255,.55); } }
.inspiration-gem.gem-rune.active {
  background: radial-gradient(circle at 40% 35%, #4a3a6a, #2a1a40 60%, #0e0818) !important;
  border-color: #9a60ff !important;
  animation: gem-rune-glow 2s ease-in-out infinite !important;
}
.inspiration-gem.gem-rune.active::after {
  color: rgba(210,170,255,.98);
  text-shadow: 0 0 14px rgba(170,110,255,1), 0 0 28px rgba(140,80,255,.7);
}

/* ── Frost Crystal ── */
.inspiration-gem.gem-frost {
  background: radial-gradient(circle, #030c14, #020810) !important;
  border: 2px solid #082030 !important;
  clip-path: polygon(50% 0%,75% 25%,100% 50%,75% 75%,50% 100%,25% 75%,0% 50%,25% 25%) !important;
  border-radius: 0 !important; box-shadow: none !important;
  transition: all 0.35s ease;
}
@keyframes gem-frost-shimmer { 0%,100%{ box-shadow: 0 0 18px rgba(100,200,240,.75), 0 0 36px rgba(60,160,200,.5); } 50%{ box-shadow: 0 0 36px rgba(200,240,255,.95), 0 0 72px rgba(120,210,250,.7); } }
.inspiration-gem.gem-frost.active {
  background: radial-gradient(circle at 35% 30%, #e8f8ff, #80d8f8 40%, #1060a0 80%, #002040) !important;
  border-color: #60c8f0 !important;
  animation: gem-frost-shimmer 2.5s ease-in-out infinite !important;
}

/* ── Eldritch Eye — zatvorené/otvorené ── */
.inspiration-gem.gem-eye {
  background: radial-gradient(ellipse 100% 35% at 50% 50%, #010a02, #010501) !important;
  border: 2px solid #061808 !important;
  border-radius: 50% 50% 50% 50% / 28% 28% 72% 72% !important;
  box-shadow: none !important;
  position: relative; overflow: hidden;
  transition: all 0.4s ease;
}
/* Zatvorené viečko */
.inspiration-gem.gem-eye::before {
  content: ''; position: absolute;
  top: 46%; left: 8%; right: 8%; height: 3px;
  background: rgba(0,160,30,.25); border-radius: 2px;
  transition: opacity 0.4s ease;
}
.inspiration-gem.gem-eye::after {
  content: ''; position: absolute;
  inset: 33% 36%; border-radius: 50%;
  background: transparent;
  transition: all 0.4s ease;
}
@keyframes gem-eye-blink { 0%,88%,100%{ transform: scaleY(1); } 93%,95%{ transform: scaleY(.04); } }
@keyframes gem-eye-pulse { 0%,100%{ box-shadow: 0 0 22px rgba(0,220,80,.85), 0 0 44px rgba(0,160,40,.55); } 50%{ box-shadow: 0 0 40px rgba(30,255,100,1), 0 0 80px rgba(0,210,60,.75); } }
.inspiration-gem.gem-eye.active {
  background: radial-gradient(ellipse 100% 60% at 50% 50%, #aaffaa 6%, #00cc40 40%, #004a18 75%, #001008) !important;
  border-color: #00e860 !important;
  animation: gem-eye-blink 5s ease-in-out infinite, gem-eye-pulse 2s ease-in-out infinite !important;
}
.inspiration-gem.gem-eye.active::before { opacity: 0; }
.inspiration-gem.gem-eye.active::after {
  background: rgba(0,0,0,.88);
  box-shadow: 0 0 10px rgba(0,255,80,.7);
}

/* ── Ember Core ── */
.inspiration-gem.gem-forge {
  background: radial-gradient(circle, #140600, #080200) !important;
  border: 2px solid #2a0e00 !important;
  box-shadow: none !important;
  transition: all 0.35s ease;
}
@keyframes gem-forge-heat {
  0%,100% { background: radial-gradient(circle at 40% 35%, #4a1a06, #1e0600, #080200); box-shadow: 0 0 18px rgba(200,80,0,.75), 0 0 36px rgba(150,40,0,.5); }
  50%     { background: radial-gradient(circle at 40% 35%, #ffffff, #ffcc60 25%, #ff6600 55%, #aa2200 80%, #300400); box-shadow: 0 0 36px rgba(255,130,0,.95), 0 0 72px rgba(210,70,0,.75); }
}
.inspiration-gem.gem-forge.active {
  border-color: #ff7a00 !important;
  animation: gem-forge-heat 1.2s ease-in-out infinite !important;
}

/* ── Cosmic Shard ── */
.inspiration-gem.gem-myth {
  background: radial-gradient(circle, #030008, #010004) !important;
  border: 2px solid #0c0028 !important;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) !important;
  border-radius: 0 !important; box-shadow: none !important;
  transition: all 0.35s ease;
}
@keyframes gem-myth-rot   { 0%{ filter: hue-rotate(0deg) brightness(1.1); } 100%{ filter: hue-rotate(360deg) brightness(1.35); } }
@keyframes gem-myth-pulse { 0%,100%{ box-shadow: 0 0 24px rgba(0,229,255,.85), 0 0 48px rgba(120,0,255,.55); } 50%{ box-shadow: 0 0 48px rgba(0,229,255,1), 0 0 96px rgba(160,0,255,.8), 0 0 130px rgba(255,255,255,.25); } }
.inspiration-gem.gem-myth.active {
  background: conic-gradient(from 0deg, #00e5ff, #a855f7, #ff0080, #00e5ff) !important;
  border-color: #00e5ff !important;
  animation: gem-myth-rot 3s linear infinite, gem-myth-pulse 2s ease-in-out infinite !important;
}

/* ── Dreamstone ── */
.inspiration-gem.gem-dream {
  background: radial-gradient(circle, #0a0414, #060210) !important;
  border: 2px solid #200838 !important;
  border-radius: 50% 40% 60% 40% / 40% 60% 40% 60% !important;
  box-shadow: none !important;
  transition: all 0.35s ease;
}
@keyframes gem-dream-shift { 0%,100%{ background: radial-gradient(circle at 35% 30%, #ffd0f8, #d870cc 50%, #601888); } 33%{ background: radial-gradient(circle at 35% 30%, #c8e8ff, #88aaff 50%, #1830a0); } 66%{ background: radial-gradient(circle at 35% 30%, #d8ffee, #88ffcc 50%, #0a6040); } }
@keyframes gem-dream-glow  { 0%,100%{ box-shadow: 0 0 18px rgba(216,112,204,.8); } 50%{ box-shadow: 0 0 36px rgba(144,216,255,.95); } }
.inspiration-gem.gem-dream.active {
  border-color: #d870cc !important;
  animation: gem-dream-shift 4s ease-in-out infinite, gem-dream-glow 2.5s ease-in-out infinite !important;
}


/* ═══════════════════════════════════════════════════════════════
   DEATH SAVE DOT SKINS
   Filozofia rovnaká ako gem:
   - base (inactive) = tmavý, symbol sotva viditeľný
   - .success        = výrazne zlaté / farebné rozsvietenie
   - .fail           = výrazne červené rozsvietenie
   Každý skin má jasný ostrý rozdiel medzi všetkými 3 stavmi.
   ═══════════════════════════════════════════════════════════════ */

/* ── Skulls ── */
.ds-dot.ds-skull, .hud-ds-dot.ds-skull {
  background: rgba(12,4,4,.6) !important;
  border: 1.5px solid rgba(80,30,30,.35) !important;
  border-radius: 4px !important;
  position: relative;
}
.ds-dot.ds-skull::after, .hud-ds-dot.ds-skull::after {
  content: '☠';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  color: rgba(120,60,60,.2);
  transition: all .25s ease;
}
/* SUCCESS — zlatá žiariaca lebka */
.ds-dot.ds-skull.success, .hud-ds-dot.ds-skull.success {
  background: rgba(40,22,4,.85) !important;
  border-color: #d4a843 !important;
  box-shadow: 0 0 12px rgba(212,168,67,.75), 0 0 22px rgba(180,130,40,.5) !important;
}
.ds-dot.ds-skull.success::after, .hud-ds-dot.ds-skull.success::after {
  color: #f0c060;
  text-shadow: 0 0 10px rgba(240,192,96,1), 0 0 20px rgba(212,168,67,.7);
}
/* FAIL — červená žiariaca lebka */
.ds-dot.ds-skull.fail, .hud-ds-dot.ds-skull.fail {
  background: rgba(28,4,4,.85) !important;
  border-color: #cc2020 !important;
  box-shadow: 0 0 12px rgba(200,30,30,.75), 0 0 22px rgba(160,20,20,.5) !important;
}
.ds-dot.ds-skull.fail::after, .hud-ds-dot.ds-skull.fail::after {
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255,60,60,1), 0 0 20px rgba(200,30,30,.7);
}

/* ── Flames ── */
.ds-dot.ds-flame, .hud-ds-dot.ds-flame {
  background: rgba(10,4,2,.6) !important;
  border: 1.5px solid rgba(80,40,10,.3) !important;
  border-radius: 50% !important;
  position: relative;
}
.ds-dot.ds-flame::after, .hud-ds-dot.ds-flame::after {
  content: '●';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; color: rgba(100,50,10,.2);
  transition: all .25s ease;
}
@keyframes ds-flame-burn { 0%,100%{ transform: scaleY(1) rotate(-4deg); filter: brightness(1); } 50%{ transform: scaleY(1.12) rotate(4deg); filter: brightness(1.35); } }
/* SUCCESS — oranžová žiariaca plameňová guľa */
.ds-dot.ds-flame.success, .hud-ds-dot.ds-flame.success {
  background: radial-gradient(circle at 40% 30%, #ff8820, #cc4400 60%, #500800) !important;
  border-color: #ff6600 !important;
  box-shadow: 0 0 14px rgba(255,100,0,.85), 0 0 26px rgba(200,60,0,.6) !important;
  animation: ds-flame-burn .7s ease-in-out infinite;
}
.ds-dot.ds-flame.success::after, .hud-ds-dot.ds-flame.success::after { content: none; }
/* FAIL — tmavočervená žiariaca */
.ds-dot.ds-flame.fail, .hud-ds-dot.ds-flame.fail {
  background: radial-gradient(circle, #3a0800, #1a0400) !important;
  border-color: #880800 !important;
  box-shadow: 0 0 10px rgba(180,30,0,.65), 0 0 20px rgba(120,20,0,.45) !important;
}
.ds-dot.ds-flame.fail::after, .hud-ds-dot.ds-flame.fail::after { content: none; }

/* ── Runes ── */
.ds-dot.ds-rune, .hud-ds-dot.ds-rune {
  background: rgba(8,4,14,.6) !important;
  border: 1.5px solid rgba(60,30,100,.3) !important;
  border-radius: 4px !important;
  position: relative;
}
.ds-dot.ds-rune::after, .hud-ds-dot.ds-rune::after {
  content: 'ᚱ';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-family: serif; line-height: 1;
  color: rgba(100,60,160,.18);
  transition: all .3s ease;
}
@keyframes ds-rune-glow { 0%,100%{ text-shadow: 0 0 8px rgba(170,110,255,.7), 0 0 16px rgba(130,70,220,.5); } 50%{ text-shadow: 0 0 16px rgba(210,160,255,.95), 0 0 30px rgba(170,100,255,.7); } }
/* SUCCESS — fialová žiariaca runa */
.ds-dot.ds-rune.success, .hud-ds-dot.ds-rune.success {
  background: rgba(18,6,36,.85) !important;
  border-color: #9a60ff !important;
  box-shadow: 0 0 12px rgba(140,80,255,.75), 0 0 24px rgba(100,50,200,.5) !important;
}
.ds-dot.ds-rune.success::after, .hud-ds-dot.ds-rune.success::after {
  color: rgba(210,165,255,.98);
  animation: ds-rune-glow 1.8s ease-in-out infinite;
}
/* FAIL — červená runa */
.ds-dot.ds-rune.fail, .hud-ds-dot.ds-rune.fail {
  background: rgba(20,4,4,.85) !important;
  border-color: #aa2020 !important;
  box-shadow: 0 0 10px rgba(180,30,30,.65), 0 0 20px rgba(140,20,20,.45) !important;
}
.ds-dot.ds-rune.fail::after, .hud-ds-dot.ds-rune.fail::after {
  content: 'ᚦ';
  color: rgba(230,70,70,.95);
  text-shadow: 0 0 10px rgba(220,50,50,.8), 0 0 18px rgba(180,30,30,.6);
}

/* ── Void Rifts ── */
.ds-dot.ds-void, .hud-ds-dot.ds-void {
  background: radial-gradient(circle, #060008, #020005) !important;
  border: 1.5px solid rgba(40,0,80,.35) !important;
  border-radius: 30% 70% 60% 40% / 40% 30% 70% 60% !important;
  transition: all .3s ease;
}
@keyframes ds-void-spin { 0%{ filter: hue-rotate(0deg); } 100%{ filter: hue-rotate(360deg); } }
/* SUCCESS — fialovo-modrý swirl */
.ds-dot.ds-void.success, .hud-ds-dot.ds-void.success {
  background: conic-gradient(from 0deg, #6000cc, #0040ff, #00ccff, #6000cc) !important;
  border-color: #8020ff !important;
  box-shadow: 0 0 14px rgba(100,0,220,.8), 0 0 28px rgba(0,80,255,.55) !important;
  animation: ds-void-spin 2s linear infinite;
}
/* FAIL — červený swirl */
.ds-dot.ds-void.fail, .hud-ds-dot.ds-void.fail {
  background: conic-gradient(from 0deg, #880000, #cc2200, #880000) !important;
  border-color: #cc1000 !important;
  box-shadow: 0 0 12px rgba(200,30,0,.75), 0 0 24px rgba(150,20,0,.5) !important;
}

/* ── Hearts ── */
.ds-dot.ds-heart, .hud-ds-dot.ds-heart {
  background: rgba(14,3,6,.6) !important;
  border: none !important;
  box-shadow: none !important;
  /* clip-path srdce — funguje v moderných prehliadačoch */
  clip-path: polygon(
    50% 18%, 62% 6%, 76% 4%, 90% 10%, 97% 24%, 93% 38%,
    80% 52%, 65% 66%, 50% 80%, 35% 66%, 20% 52%, 7% 38%,
    3% 24%, 10% 10%, 24% 4%, 38% 6%
  ) !important;
  border-radius: 0 !important;
  transition: all .25s ease;
}
@keyframes ds-heart-beat { 0%,100%{ transform: scale(1); } 14%{ transform: scale(1.3); } 28%{ transform: scale(1); } 42%{ transform: scale(1.2); } }
/* SUCCESS — živé červené tlkotajúce srdce */
.ds-dot.ds-heart.success, .hud-ds-dot.ds-heart.success {
  background: #ee2255 !important;
  box-shadow: 0 0 14px rgba(238,34,85,.85), 0 0 28px rgba(210,20,60,.6) !important;
  animation: ds-heart-beat .95s ease-in-out infinite;
}
/* FAIL — tmavé mŕtve srdce */
.ds-dot.ds-heart.fail, .hud-ds-dot.ds-heart.fail {
  background: #280008 !important;
  box-shadow: 0 0 8px rgba(80,0,20,.5) !important;
}

/* ── Stars ── */
.ds-dot.ds-star, .hud-ds-dot.ds-star {
  background: rgba(8,6,2,.6) !important;
  border: 1.5px solid rgba(60,50,8,.25) !important;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) !important;
  border-radius: 0 !important;
  transition: all .25s ease;
}
@keyframes ds-star-blaze { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.55); } }
/* SUCCESS — zlatá žiariaca hviezda */
.ds-dot.ds-star.success, .hud-ds-dot.ds-star.success {
  background: #f0c040 !important;
  border-color: #f0c040 !important;
  box-shadow: 0 0 16px rgba(240,192,64,.9), 0 0 32px rgba(255,200,30,.65) !important;
  animation: ds-star-blaze 1.1s ease-in-out infinite;
}
/* FAIL — tmavočervená hviezda */
.ds-dot.ds-star.fail, .hud-ds-dot.ds-star.fail {
  background: #200800 !important;
  border-color: #440800 !important;
  box-shadow: 0 0 8px rgba(100,20,0,.5) !important;
}

/* ── Cosmic ── */
.ds-dot.ds-myth, .hud-ds-dot.ds-myth {
  background: radial-gradient(circle, #03000a, #010006) !important;
  border: 1.5px solid rgba(16,0,40,.4) !important;
  border-radius: 50% !important;
  transition: all .3s ease;
}
@keyframes ds-myth-spin { 0%{ filter: hue-rotate(0deg) brightness(1.1); } 100%{ filter: hue-rotate(360deg) brightness(1.3); } }
/* SUCCESS — dúhový cosmic swirl */
.ds-dot.ds-myth.success, .hud-ds-dot.ds-myth.success {
  background: conic-gradient(from 0deg, #00e5ff, #a855f7, #ff0080, #00e5ff) !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 16px rgba(0,229,255,.85), 0 0 32px rgba(120,0,255,.6) !important;
  animation: ds-myth-spin 2s linear infinite;
}
/* FAIL — červený pulz */
.ds-dot.ds-myth.fail, .hud-ds-dot.ds-myth.fail {
  background: radial-gradient(circle, #280008, #0e0004) !important;
  border-color: #660010 !important;
  box-shadow: 0 0 12px rgba(180,0,20,.75), 0 0 24px rgba(120,0,10,.5) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER ORNAMENTS
   ═══════════════════════════════════════════════════════════════ */
:root { --header-deco-char: '✦'; }
.section-header::before, .section-header-left::before { content: var(--header-deco-char) !important; }

body.hd-sword  .section-header::before, body.hd-sword  .section-header-left::before
  { color: var(--accent-silver); text-shadow: 0 0 6px rgba(200,200,220,.5); font-size: 11px !important; }
body.hd-rune   .section-header::before, body.hd-rune   .section-header-left::before
  { color: #a855f7; text-shadow: 0 0 8px rgba(168,85,247,.65); font-size: 12px !important; }
body.hd-fleur  .section-header::before, body.hd-fleur  .section-header-left::before
  { color: #c8a030; text-shadow: 0 0 6px rgba(200,160,48,.5); font-size: 13px !important; }
body.hd-skull  .section-header::before, body.hd-skull  .section-header-left::before
  { color: #8b1a1a; text-shadow: 0 0 6px rgba(180,30,30,.5); font-size: 11px !important; }
body.hd-flower .section-header::before, body.hd-flower .section-header-left::before
  { color: #40c860; text-shadow: 0 0 6px rgba(60,200,80,.45); font-size: 12px !important; }
@keyframes hd-star-t { 0%,100%{ opacity:.7; text-shadow: 0 0 6px rgba(240,192,96,.5); } 50%{ opacity:1; text-shadow: 0 0 14px rgba(240,192,96,.9), 0 0 24px rgba(255,220,80,.5); } }
body.hd-star   .section-header::before, body.hd-star   .section-header-left::before
  { color: #f0c060; animation: hd-star-t 2s ease-in-out infinite; font-size: 12px !important; }
@keyframes hd-crown-g { 0%,100%{ text-shadow: 0 0 8px rgba(200,160,40,.5); } 50%{ text-shadow: 0 0 16px rgba(212,175,55,.85), 0 0 28px rgba(255,200,60,.4); } }
body.hd-crown  .section-header::before, body.hd-crown  .section-header-left::before
  { color: #d4a843; animation: hd-crown-g 2.5s ease-in-out infinite; font-size: 14px !important; }
@keyframes hd-myth-s { 0%{ color:#00e5ff; text-shadow:0 0 10px rgba(0,229,255,.7); filter:hue-rotate(0deg); } 50%{ color:#a855f7; text-shadow:0 0 10px rgba(168,85,247,.7); filter:hue-rotate(180deg); } 100%{ color:#00e5ff; filter:hue-rotate(360deg); } }
body.hd-myth   .section-header::before, body.hd-myth   .section-header-left::before
  { animation: hd-myth-s 3s linear infinite; font-size: 13px !important; }

/* ═══════════════════════════════════════════════════════════════
   NEW DEATH SAVE SKINS — správna sémantika tried
   ds-dot:     prázdny=žiadna trieda, kliknutý suc=.success, kliknutý fail=.fail
   hud-ds-dot: suc row=.suc, fail row=.fail, kliknutý=+.filled
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   LIGHTNING BOLTS (ds-bolt)
   ══════════════════════════════ */
/* Základný dot — tmavý, bez triedy success/fail */
.ds-dot.ds-bolt, .hud-ds-dot.ds-bolt {
  border-radius: 4px !important;
  position: relative;
  transition: all .2s ease;
}

/* Prázdny success dot (hlavný sheet) + prázdny HUD suc dot */
.ds-dot.ds-bolt:not(.success):not(.fail),
.hud-ds-dot.ds-bolt.suc:not(.filled) {
  background: rgba(6,10,28,.75) !important;
  border: 1.5px solid rgba(50,90,200,.35) !important;
  box-shadow: none !important;
}
/* Prázdny fail dot (HUD) */
.hud-ds-dot.ds-bolt.fail:not(.filled) {
  background: rgba(18,5,5,.75) !important;
  border: 1.5px solid rgba(140,30,30,.45) !important;
  box-shadow: 0 0 4px rgba(160,30,30,.3) !important;
}

/* Ikonka ⚡ na všetkých prázdnych */
.ds-dot.ds-bolt:not(.success):not(.fail)::after,
.hud-ds-dot.ds-bolt.suc:not(.filled)::after,
.hud-ds-dot.ds-bolt.fail:not(.filled)::after {
  content: '⚡';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
  color: rgba(100,140,255,.25);
  transition: all .2s ease;
}

/* ── Kliknutý SUCCESS ── */
@keyframes ds-bolt-zap {
  0%,100% { box-shadow: 0 0 10px rgba(80,140,255,.8), 0 0 20px rgba(50,90,220,.55); filter: brightness(1); }
  15%     { box-shadow: 0 0 28px rgba(255,255,120,1), 0 0 55px rgba(140,180,255,.9); filter: brightness(2); }
  20%     { box-shadow: 0 0 12px rgba(100,160,255,.85), 0 0 24px rgba(60,100,230,.6); filter: brightness(1.1); }
  50%     { box-shadow: 0 0 18px rgba(100,150,255,.9), 0 0 36px rgba(60,100,230,.65); filter: brightness(1.3); }
}
@keyframes ds-bolt-arc {
  0%,100% { opacity: .9; transform: scaleX(1); }
  50%     { opacity: 1; transform: scaleX(1.08); }
}
.ds-dot.ds-bolt.success,
.hud-ds-dot.ds-bolt.suc.filled {
  background: radial-gradient(circle at 38% 32%, #d0e8ff, #4080ee 35%, #0830cc 65%, #020c40) !important;
  border: 1.5px solid #70b0ff !important;
  box-shadow: 0 0 12px rgba(80,140,255,.85), 0 0 24px rgba(50,90,220,.6) !important;
  border-radius: 4px !important;
  animation: ds-bolt-zap 1.8s ease-in-out infinite !important;
}
.ds-dot.ds-bolt.success::after,
.hud-ds-dot.ds-bolt.suc.filled::after {
  content: '⚡';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
  color: #ffffc0;
  text-shadow: 0 0 6px rgba(255,255,100,1), 0 0 14px rgba(140,200,255,.85);
  animation: ds-bolt-arc 1.8s ease-in-out infinite;
}

/* ── Kliknutý FAIL ── */
@keyframes ds-bolt-fail-sizzle {
  0%,100% { box-shadow: 0 0 12px rgba(220,30,30,.85), 0 0 24px rgba(180,15,15,.6); }
  40%     { box-shadow: 0 0 22px rgba(255,60,20,1), 0 0 44px rgba(200,30,10,.75); }
}
.ds-dot.ds-bolt.fail,
.hud-ds-dot.ds-bolt.fail.filled {
  background: radial-gradient(circle at 38% 32%, #ff6040, #cc1800 40%, #550600 70%, #1a0200) !important;
  border: 1.5px solid #ee2800 !important;
  box-shadow: 0 0 14px rgba(230,40,0,.9), 0 0 28px rgba(180,25,0,.65) !important;
  border-radius: 4px !important;
  animation: ds-bolt-fail-sizzle 1.6s ease-in-out infinite !important;
}
.ds-dot.ds-bolt.fail::after,
.hud-ds-dot.ds-bolt.fail.filled::after {
  content: '⚡';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
  color: #ffcc80;
  text-shadow: 0 0 6px rgba(255,160,60,.9), 0 0 14px rgba(220,80,20,.7);
}


/* ══════════════════════════════
   FROST SHARDS (ds-ice)
   ══════════════════════════════ */
.ds-dot.ds-ice, .hud-ds-dot.ds-ice {
  clip-path: polygon(50% 0%,75% 25%,100% 50%,75% 75%,50% 100%,25% 75%,0% 50%,25% 25%) !important;
  border-radius: 0 !important;
  position: relative;
  transition: all .2s ease;
}
.ds-dot.ds-ice:not(.success):not(.fail),
.hud-ds-dot.ds-ice.suc:not(.filled) {
  background: rgba(4,10,18,.75) !important;
  border: 1.5px solid rgba(40,100,150,.3) !important;
  box-shadow: none !important;
}
.hud-ds-dot.ds-ice.fail:not(.filled) {
  background: rgba(16,4,6,.75) !important;
  border: 1.5px solid rgba(130,25,30,.4) !important;
  box-shadow: 0 0 4px rgba(150,20,25,.3) !important;
}
@keyframes ds-ice-shimmer { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.5); } }
.ds-dot.ds-ice.success,
.hud-ds-dot.ds-ice.suc.filled {
  background: radial-gradient(circle at 35% 28%, #eafaff, #70d8f8 40%, #1060a0 78%, #001830) !important;
  border: 1.5px solid #60c8f0 !important;
  box-shadow: 0 0 14px rgba(100,200,240,.9), 0 0 28px rgba(60,160,200,.65) !important;
  animation: ds-ice-shimmer 2s ease-in-out infinite !important;
}
@keyframes ds-ice-fail-pulse {
  0%,100% { box-shadow: 0 0 14px rgba(210,25,35,.85), 0 0 28px rgba(170,15,25,.6); }
  50%     { box-shadow: 0 0 26px rgba(255,50,50,1), 0 0 50px rgba(200,20,20,.75); }
}
.ds-dot.ds-ice.fail,
.hud-ds-dot.ds-ice.fail.filled {
  background: radial-gradient(circle at 40% 30%, #ff6060, #cc1020 45%, #4a0008 75%, #180002) !important;
  border: 1.5px solid #ee1828 !important;
  box-shadow: 0 0 16px rgba(220,20,30,.9), 0 0 32px rgba(170,15,20,.65) !important;
  animation: ds-ice-fail-pulse 1.5s ease-in-out infinite !important;
}


/* ══════════════════════════════
   BLOOD DROPS (ds-blood)
   ══════════════════════════════ */
.ds-dot.ds-blood, .hud-ds-dot.ds-blood {
  clip-path: polygon(50% 0%, 80% 30%, 100% 60%, 85% 85%, 50% 100%, 15% 85%, 0% 60%, 20% 30%) !important;
  border-radius: 0 !important;
  border: none !important;
  position: relative;
  transition: all .2s ease;
}
.ds-dot.ds-blood:not(.success):not(.fail),
.hud-ds-dot.ds-blood.suc:not(.filled) {
  background: rgba(12,2,4,.75) !important;
  box-shadow: none !important;
}
.hud-ds-dot.ds-blood.fail:not(.filled) {
  background: rgba(22,3,5,.8) !important;
  box-shadow: 0 0 5px rgba(150,15,20,.4) !important;
}
@keyframes ds-blood-pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.15); } }
.ds-dot.ds-blood.success,
.hud-ds-dot.ds-blood.suc.filled {
  background: radial-gradient(circle at 38% 28%, #ff5070, #cc0028 50%, #5a0012) !important;
  box-shadow: 0 0 14px rgba(220,0,30,.9), 0 0 28px rgba(170,0,20,.65) !important;
  animation: ds-blood-pulse 1.1s ease-in-out infinite !important;
}
@keyframes ds-blood-fail-drip {
  0%,100% { box-shadow: 0 0 16px rgba(180,20,0,.9), 0 0 32px rgba(130,15,0,.65); }
  50%     { box-shadow: 0 0 28px rgba(240,60,0,1), 0 0 56px rgba(180,35,0,.75); }
}
.ds-dot.ds-blood.fail,
.hud-ds-dot.ds-blood.fail.filled {
  background: radial-gradient(circle at 38% 28%, #ff7030, #cc3000 40%, #5a0e00 72%, #1a0400) !important;
  box-shadow: 0 0 18px rgba(200,50,0,.9), 0 0 36px rgba(150,30,0,.7) !important;
  animation: ds-blood-fail-drip 1.3s ease-in-out infinite !important;
}


/* ══════════════════════════════
   ELDRITCH EYES (ds-eye)
   ══════════════════════════════ */
.ds-dot.ds-eye, .hud-ds-dot.ds-eye {
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75% !important;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}
.ds-dot.ds-eye:not(.success):not(.fail),
.hud-ds-dot.ds-eye.suc:not(.filled) {
  background: rgba(2,8,4,.75) !important;
  border: 1.5px solid rgba(0,60,25,.3) !important;
  box-shadow: none !important;
}
.hud-ds-dot.ds-eye.fail:not(.filled) {
  background: rgba(14,3,2,.75) !important;
  border: 1.5px solid rgba(120,20,15,.4) !important;
  box-shadow: 0 0 4px rgba(140,20,15,.3) !important;
}
@keyframes ds-eye-blink { 0%,80%,100%{ transform: scaleY(1); } 84%,86%{ transform: scaleY(.05); } }
.ds-dot.ds-eye.success,
.hud-ds-dot.ds-eye.suc.filled {
  background: radial-gradient(ellipse 100% 58% at 50% 50%, #90ffb0 5%, #00cc50 38%, #005020 72%, #001008) !important;
  border: 1.5px solid #00e860 !important;
  box-shadow: 0 0 14px rgba(0,220,80,.9), 0 0 28px rgba(0,160,50,.65) !important;
  animation: ds-eye-blink 4s ease-in-out infinite !important;
}
.ds-dot.ds-eye.success::after,
.hud-ds-dot.ds-eye.suc.filled::after {
  content: '';
  position: absolute; inset: 32% 28%;
  border-radius: 50%;
  background: rgba(0,0,0,.88);
  box-shadow: 0 0 8px rgba(0,240,80,.65);
}
@keyframes ds-eye-fail-burn {
  0%,100% { box-shadow: 0 0 14px rgba(220,30,0,.9), 0 0 28px rgba(170,20,0,.65); }
  50%     { box-shadow: 0 0 26px rgba(255,70,20,1), 0 0 52px rgba(200,40,0,.75); }
}
.ds-dot.ds-eye.fail,
.hud-ds-dot.ds-eye.fail.filled {
  background: radial-gradient(ellipse 100% 55% at 50% 50%, #ff8050 5%, #cc2800 38%, #4a0e00 72%, #150300) !important;
  border: 1.5px solid #ee2800 !important;
  box-shadow: 0 0 16px rgba(220,40,0,.9), 0 0 32px rgba(170,25,0,.65) !important;
  animation: ds-eye-fail-burn 1.5s ease-in-out infinite !important;
}
.ds-dot.ds-eye.fail::after,
.hud-ds-dot.ds-eye.fail.filled::after {
  content: '';
  position: absolute; inset: 32% 28%;
  border-radius: 50%;
  background: rgba(0,0,0,.85);
  box-shadow: 0 0 8px rgba(255,80,20,.6);
}


/* ═══════════════════════════════════════════════════════════════
   ZOSILNENÉ FAIL STAVY — existujúce skiny (skull, flame, rune, void, heart, star, myth)
   Platí pre oba: .ds-dot.fail (hlavný sheet) aj .hud-ds-dot.fail.filled (HUD)
   ═══════════════════════════════════════════════════════════════ */

/* ── Skulls — fail ── */
.ds-dot.ds-skull.fail,
.hud-ds-dot.ds-skull.fail.filled {
  background: rgba(55,4,4,.95) !important;
  border-color: #ff2020 !important;
  box-shadow: 0 0 16px rgba(255,25,25,.9), 0 0 32px rgba(200,15,15,.65) !important;
}
.ds-dot.ds-skull.fail::after,
.hud-ds-dot.ds-skull.fail.filled::after {
  color: #ff5555 !important;
  text-shadow: 0 0 12px rgba(255,60,60,1), 0 0 24px rgba(220,30,30,.8) !important;
}

/* ── Skulls — HUD suc filled ── */
.hud-ds-dot.ds-skull.suc.filled {
  background: rgba(40,22,4,.85) !important;
  border-color: #d4a843 !important;
  box-shadow: 0 0 12px rgba(212,168,67,.75), 0 0 22px rgba(180,130,40,.5) !important;
}
.hud-ds-dot.ds-skull.suc.filled::after {
  color: #f0c060 !important;
  text-shadow: 0 0 10px rgba(240,192,96,1), 0 0 20px rgba(212,168,67,.7) !important;
}

/* ── Flames — fail ── */
.ds-dot.ds-flame.fail,
.hud-ds-dot.ds-flame.fail.filled {
  background: radial-gradient(circle, #6e0e00, #380700) !important;
  border-color: #dd1600 !important;
  box-shadow: 0 0 16px rgba(225,25,0,.85), 0 0 30px rgba(170,18,0,.6) !important;
}
.ds-dot.ds-flame.fail::after,
.hud-ds-dot.ds-flame.fail.filled::after { content: none !important; }
.hud-ds-dot.ds-flame.suc.filled {
  background: radial-gradient(circle at 40% 30%, #ff8820, #cc4400 60%, #500800) !important;
  border-color: #ff6600 !important;
  box-shadow: 0 0 14px rgba(255,100,0,.85), 0 0 26px rgba(200,60,0,.6) !important;
  animation: ds-flame-burn .7s ease-in-out infinite !important;
}
.hud-ds-dot.ds-flame.suc.filled::after { content: none !important; }

/* ── Runes — fail ── */
.ds-dot.ds-rune.fail,
.hud-ds-dot.ds-rune.fail.filled {
  background: rgba(42,4,4,.95) !important;
  border-color: #ee1818 !important;
  box-shadow: 0 0 16px rgba(235,25,25,.85), 0 0 30px rgba(190,15,15,.6) !important;
}
.ds-dot.ds-rune.fail::after,
.hud-ds-dot.ds-rune.fail.filled::after {
  content: 'ᚦ' !important;
  color: rgba(255,75,75,.98) !important;
  text-shadow: 0 0 12px rgba(255,50,50,.9), 0 0 22px rgba(210,30,30,.7) !important;
}
.hud-ds-dot.ds-rune.suc.filled {
  background: rgba(18,6,36,.85) !important;
  border-color: #9a60ff !important;
  box-shadow: 0 0 12px rgba(140,80,255,.75), 0 0 24px rgba(100,50,200,.5) !important;
}
.hud-ds-dot.ds-rune.suc.filled::after {
  color: rgba(210,165,255,.98) !important;
  animation: ds-rune-glow 1.8s ease-in-out infinite !important;
}

/* ── Void Rifts — fail ── */
.ds-dot.ds-void.fail,
.hud-ds-dot.ds-void.fail.filled {
  background: conic-gradient(from 0deg, #bb0000, #ee2000, #bb0000) !important;
  border-color: #ee1600 !important;
  box-shadow: 0 0 18px rgba(235,25,0,.9), 0 0 35px rgba(180,18,0,.65) !important;
}
.hud-ds-dot.ds-void.suc.filled {
  background: conic-gradient(from 0deg, #6000cc, #0040ff, #00ccff, #6000cc) !important;
  border-color: #8020ff !important;
  box-shadow: 0 0 14px rgba(100,0,220,.8), 0 0 28px rgba(0,80,255,.55) !important;
  animation: ds-void-spin 2s linear infinite !important;
}

/* ── Hearts — fail ── */
.ds-dot.ds-heart.fail,
.hud-ds-dot.ds-heart.fail.filled {
  background: #5a0015 !important;
  box-shadow: 0 0 16px rgba(160,0,30,.85), 0 0 30px rgba(120,0,20,.6) !important;
}
.hud-ds-dot.ds-heart.suc.filled {
  background: #ee2255 !important;
  box-shadow: 0 0 14px rgba(238,34,85,.85), 0 0 28px rgba(210,20,60,.6) !important;
  animation: ds-heart-beat .95s ease-in-out infinite !important;
}

/* ── Stars — fail ── */
.ds-dot.ds-star.fail,
.hud-ds-dot.ds-star.fail.filled {
  background: #4a1200 !important;
  border-color: #bb3000 !important;
  box-shadow: 0 0 16px rgba(190,50,0,.85), 0 0 30px rgba(150,35,0,.6) !important;
}
.hud-ds-dot.ds-star.suc.filled {
  background: #f0c040 !important;
  border-color: #f0c040 !important;
  box-shadow: 0 0 16px rgba(240,192,64,.9), 0 0 32px rgba(255,200,30,.65) !important;
  animation: ds-star-blaze 1.1s ease-in-out infinite !important;
}

/* ── Cosmic — fail ── */
.ds-dot.ds-myth.fail,
.hud-ds-dot.ds-myth.fail.filled {
  background: radial-gradient(circle, #420012, #1e0008) !important;
  border-color: #cc0020 !important;
  box-shadow: 0 0 18px rgba(220,0,28,.9), 0 0 35px rgba(165,0,18,.65) !important;
}
.hud-ds-dot.ds-myth.suc.filled {
  background: conic-gradient(from 0deg, #00e5ff, #a855f7, #ff0080, #00e5ff) !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 16px rgba(0,229,255,.85), 0 0 32px rgba(120,0,255,.6) !important;
  animation: ds-myth-spin 2s linear infinite !important;
}

/* ═══════════════════════════════════════════════════════════════
   REWARD: CARD & PANEL BORDER SKINS
   All skins use body.cb-* class to override .panel borders.
   Inspired by The Absolute theme's golden frame aesthetic.
   ═══════════════════════════════════════════════════════════════ */

/* ── cb-gold · Gilded Halls ── */
body.cb-gold .panel {
  border-color: #c8960a;
  box-shadow: 0 0 10px rgba(212,168,30,0.25), 0 0 3px rgba(212,168,30,0.12), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-gold .panel:hover {
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255,215,0,0.45), 0 0 6px rgba(255,215,0,0.2), var(--shadow-deep);
}
body.cb-gold .section-header {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,0.35);
}

/* ── cb-silver · Silver Steel ── */
body.cb-silver .panel {
  border-color: #7a8a9a;
  box-shadow: 0 0 10px rgba(180,200,220,0.18), 0 0 3px rgba(180,200,220,0.08), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-silver .panel:hover {
  border-color: #c0d0e0;
  box-shadow: 0 0 18px rgba(192,210,230,0.4), 0 0 6px rgba(192,210,230,0.15), var(--shadow-deep);
}
body.cb-silver .section-header {
  color: #b0c8e0;
  text-shadow: 0 0 8px rgba(180,210,240,0.3);
}

/* ── cb-flame · Hellfire Frame ── */
body.cb-flame .panel {
  border-color: #b02010;
  box-shadow: 0 0 10px rgba(220,60,20,0.25), 0 0 3px rgba(220,60,20,0.12), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-flame .panel:hover {
  border-color: #ff4020;
  box-shadow: 0 0 20px rgba(255,80,30,0.5), 0 0 6px rgba(255,80,30,0.2), var(--shadow-deep);
}
body.cb-flame .section-header {
  color: #ff6030;
  text-shadow: 0 0 10px rgba(255,80,30,0.45);
}
@keyframes cb-flame-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(220,60,20,0.25), 0 0 3px rgba(220,60,20,0.12), var(--shadow-deep); border-color:#b02010; }
  50%      { box-shadow: 0 0 22px rgba(255,90,30,0.45), 0 0 7px rgba(255,90,30,0.2), var(--shadow-deep);  border-color:#e03018; }
}
body.cb-flame .panel {
  animation: cb-flame-pulse 3s ease-in-out infinite;
}

/* ── cb-nature · Living Root ── */
body.cb-nature .panel {
  border-color: #1a6030;
  box-shadow: 0 0 10px rgba(40,160,70,0.22), 0 0 3px rgba(40,160,70,0.10), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-nature .panel:hover {
  border-color: #40c060;
  box-shadow: 0 0 18px rgba(60,200,90,0.45), 0 0 6px rgba(60,200,90,0.18), var(--shadow-deep);
}
body.cb-nature .section-header {
  color: #4ada80;
  text-shadow: 0 0 8px rgba(60,200,90,0.35);
}
@keyframes cb-nature-breathe {
  0%,100% { border-color:#1a6030; }
  50%      { border-color:#2d8a48; }
}
body.cb-nature .panel {
  animation: cb-nature-breathe 4s ease-in-out infinite;
}

/* ── cb-arcane · Arcane Seal ── */
body.cb-arcane .panel {
  border-color: #5030a0;
  box-shadow: 0 0 10px rgba(130,80,220,0.25), 0 0 3px rgba(130,80,220,0.12), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-arcane .panel:hover {
  border-color: #9060e0;
  box-shadow: 0 0 20px rgba(160,100,255,0.5), 0 0 6px rgba(160,100,255,0.2), var(--shadow-deep);
}
body.cb-arcane .section-header {
  color: #c084fc;
  text-shadow: 0 0 10px rgba(160,100,255,0.45);
}
@keyframes cb-arcane-shift {
  0%   { border-color:#5030a0; box-shadow:0 0 10px rgba(130,80,220,0.22),var(--shadow-deep); }
  33%  { border-color:#7040c0; box-shadow:0 0 14px rgba(100,60,200,0.3),var(--shadow-deep); }
  66%  { border-color:#8060d8; box-shadow:0 0 12px rgba(160,110,240,0.28),var(--shadow-deep); }
  100% { border-color:#5030a0; box-shadow:0 0 10px rgba(130,80,220,0.22),var(--shadow-deep); }
}
body.cb-arcane .panel {
  animation: cb-arcane-shift 5s ease-in-out infinite;
}

/* ── cb-blood · Blood Pact ── */
body.cb-blood .panel {
  border-color: #7a0020;
  box-shadow: 0 0 10px rgba(180,0,40,0.28), 0 0 3px rgba(180,0,40,0.14), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-blood .panel:hover {
  border-color: #cc0030;
  box-shadow: 0 0 22px rgba(210,0,50,0.55), 0 0 7px rgba(210,0,50,0.22), var(--shadow-deep);
}
body.cb-blood .section-header {
  color: #ff4060;
  text-shadow: 0 0 10px rgba(200,0,50,0.5);
}
@keyframes cb-blood-drip {
  0%,100% { border-color:#7a0020; box-shadow:0 0 10px rgba(180,0,40,0.28),var(--shadow-deep); }
  40%     { border-color:#aa0030; box-shadow:0 0 18px rgba(200,0,50,0.45),var(--shadow-deep); }
  70%     { border-color:#7a0020; box-shadow:0 0 8px rgba(160,0,30,0.20),var(--shadow-deep); }
}
body.cb-blood .panel {
  animation: cb-blood-drip 4s ease-in-out infinite;
}

/* ── cb-ice · Frozen Tomb ── */
body.cb-ice .panel {
  border-color: #1a6090;
  box-shadow: 0 0 10px rgba(60,160,220,0.22), 0 0 3px rgba(60,160,220,0.10), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-ice .panel:hover {
  border-color: #60c8f0;
  box-shadow: 0 0 20px rgba(90,200,240,0.5), 0 0 6px rgba(90,200,240,0.18), var(--shadow-deep);
}
body.cb-ice .section-header {
  color: #7ee8ff;
  text-shadow: 0 0 10px rgba(80,200,240,0.4);
}
@keyframes cb-ice-shimmer {
  0%,100% { border-color:#1a6090; box-shadow:0 0 10px rgba(60,160,220,0.22),var(--shadow-deep); }
  50%     { border-color:#3090c0; box-shadow:0 0 16px rgba(60,180,240,0.38),var(--shadow-deep); }
}
body.cb-ice .panel {
  animation: cb-ice-shimmer 5s ease-in-out infinite;
}

/* ── cb-void · Void Rift ── */
body.cb-void .panel {
  border-color: #2a0060;
  box-shadow: 0 0 10px rgba(80,0,160,0.28), 0 0 3px rgba(80,0,160,0.14), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-void .panel:hover {
  border-color: #7000e0;
  box-shadow: 0 0 24px rgba(120,0,220,0.55), 0 0 8px rgba(120,0,220,0.22), var(--shadow-deep);
}
body.cb-void .section-header {
  color: #b060ff;
  text-shadow: 0 0 12px rgba(140,40,255,0.55);
}
@keyframes cb-void-pulse {
  0%   { border-color:#2a0060; box-shadow:0 0 10px rgba(80,0,160,0.28),var(--shadow-deep); }
  30%  { border-color:#50009a; box-shadow:0 0 20px rgba(110,0,200,0.45),var(--shadow-deep); }
  60%  { border-color:#2a0060; box-shadow:0 0 6px rgba(60,0,120,0.18),var(--shadow-deep); }
  100% { border-color:#2a0060; box-shadow:0 0 10px rgba(80,0,160,0.28),var(--shadow-deep); }
}
body.cb-void .panel {
  animation: cb-void-pulse 4s ease-in-out infinite;
}

/* ── cb-storm · Thunder Mark ── */
body.cb-storm .panel {
  border-color: #4060c0;
  box-shadow: 0 0 10px rgba(80,120,220,0.25), 0 0 3px rgba(80,120,220,0.12), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-storm .panel:hover {
  border-color: #80c0ff;
  box-shadow: 0 0 22px rgba(100,180,255,0.55), 0 0 7px rgba(100,180,255,0.22), var(--shadow-deep);
}
body.cb-storm .section-header {
  color: #80c8ff;
  text-shadow: 0 0 10px rgba(80,180,255,0.45);
}
@keyframes cb-storm-flicker {
  0%,100% { border-color:#4060c0; box-shadow:0 0 10px rgba(80,120,220,0.25),var(--shadow-deep); }
  15%     { border-color:#90c0ff; box-shadow:0 0 28px rgba(120,180,255,0.65),var(--shadow-deep); }
  17%     { border-color:#4060c0; box-shadow:0 0 10px rgba(80,120,220,0.25),var(--shadow-deep); }
  55%     { border-color:#7090e0; box-shadow:0 0 18px rgba(100,150,240,0.4),var(--shadow-deep); }
  57%     { border-color:#4060c0; box-shadow:0 0 10px rgba(80,120,220,0.25),var(--shadow-deep); }
}
body.cb-storm .panel {
  animation: cb-storm-flicker 4.5s ease-in-out infinite;
}

/* ── cb-dream · The Dreaming ── */
body.cb-dream .panel {
  border-color: #4010a0;
  box-shadow: 0 0 10px rgba(130,50,220,0.22), 0 0 3px rgba(130,50,220,0.10), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-dream .panel:hover {
  border-color: #c080ff;
  box-shadow: 0 0 20px rgba(180,100,255,0.5), 0 0 6px rgba(180,100,255,0.18), var(--shadow-deep);
}
body.cb-dream .section-header {
  color: #d090ff;
  text-shadow: 0 0 10px rgba(180,80,255,0.4);
}
@keyframes cb-dream-drift {
  0%   { border-color:#4010a0; }
  25%  { border-color:#7030d0; }
  50%  { border-color:#9050e8; }
  75%  { border-color:#6020b8; }
  100% { border-color:#4010a0; }
}
body.cb-dream .panel {
  animation: cb-dream-drift 7s ease-in-out infinite;
}

/* ── cb-hero · Hero's Radiance ── */
body.cb-hero .panel {
  border-color: #9a6010;
  box-shadow: 0 0 12px rgba(220,150,30,0.3), 0 0 4px rgba(220,150,30,0.14), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-hero .panel:hover {
  border-color: #f0a020;
  box-shadow: 0 0 24px rgba(245,160,30,0.6), 0 0 8px rgba(245,160,30,0.25), var(--shadow-deep);
}
body.cb-hero .section-header {
  color: #f5b030;
  text-shadow: 0 0 12px rgba(245,158,11,0.5);
}
@keyframes cb-hero-radiance {
  0%,100% { border-color:#9a6010; box-shadow:0 0 12px rgba(220,150,30,0.3),var(--shadow-deep); }
  50%     { border-color:#c08020; box-shadow:0 0 22px rgba(245,170,40,0.55),var(--shadow-deep); }
}
body.cb-hero .panel {
  animation: cb-hero-radiance 3.5s ease-in-out infinite;
}

/* ── cb-myth · Cosmic Sigil ── */
body.cb-myth .panel {
  border-color: #006080;
  box-shadow: 0 0 14px rgba(0,200,240,0.3), 0 0 5px rgba(0,200,240,0.14), var(--shadow-deep);
  transition: border-color 0.3s, box-shadow 0.3s;
}
body.cb-myth .panel:hover {
  border-color: #00e5ff;
  box-shadow: 0 0 30px rgba(0,229,255,0.65), 0 0 10px rgba(0,229,255,0.25), var(--shadow-deep);
}
body.cb-myth .section-header {
  color: #00e5ff;
  text-shadow: 0 0 14px rgba(0,229,255,0.6);
}
@keyframes cb-myth-cosmic {
  0%   { border-color:#006080; box-shadow:0 0 14px rgba(0,200,240,0.30),var(--shadow-deep); }
  20%  { border-color:#0090b8; box-shadow:0 0 24px rgba(0,220,255,0.50),var(--shadow-deep); }
  40%  { border-color:#00b8e0; box-shadow:0 0 32px rgba(0,229,255,0.65),var(--shadow-deep); }
  60%  { border-color:#0090b8; box-shadow:0 0 22px rgba(0,210,255,0.45),var(--shadow-deep); }
  80%  { border-color:#006a90; box-shadow:0 0 14px rgba(0,190,230,0.28),var(--shadow-deep); }
  100% { border-color:#006080; box-shadow:0 0 14px rgba(0,200,240,0.30),var(--shadow-deep); }
}
body.cb-myth .panel {
  animation: cb-myth-cosmic 4s ease-in-out infinite;
}
/* Myth also gets a faint section-header underline glow */
body.cb-myth .section-header::after {
  box-shadow: 0 1px 8px rgba(0,229,255,0.35);
}

/* ── cb-prismatic · Prismatic Dúha ── */
@keyframes cb-prismatic-hue {
  0%   { border-color: hsl(0,  90%,55%); box-shadow:0 0 14px hsla(0,  90%,55%,0.45),var(--shadow-deep); }
  14%  { border-color: hsl(50, 90%,55%); box-shadow:0 0 14px hsla(50, 90%,55%,0.45),var(--shadow-deep); }
  28%  { border-color: hsl(100,90%,45%); box-shadow:0 0 14px hsla(100,90%,45%,0.45),var(--shadow-deep); }
  42%  { border-color: hsl(160,90%,45%); box-shadow:0 0 14px hsla(160,90%,45%,0.45),var(--shadow-deep); }
  57%  { border-color: hsl(210,90%,55%); box-shadow:0 0 14px hsla(210,90%,55%,0.45),var(--shadow-deep); }
  71%  { border-color: hsl(270,90%,60%); box-shadow:0 0 14px hsla(270,90%,60%,0.45),var(--shadow-deep); }
  85%  { border-color: hsl(320,90%,55%); box-shadow:0 0 14px hsla(320,90%,55%,0.45),var(--shadow-deep); }
  100% { border-color: hsl(360,90%,55%); box-shadow:0 0 14px hsla(360,90%,55%,0.45),var(--shadow-deep); }
}
@keyframes cb-prismatic-text {
  0%   { color: hsl(0,  90%,65%); }
  14%  { color: hsl(50, 90%,65%); }
  28%  { color: hsl(100,90%,55%); }
  42%  { color: hsl(160,90%,55%); }
  57%  { color: hsl(210,90%,65%); }
  71%  { color: hsl(270,90%,70%); }
  85%  { color: hsl(320,90%,65%); }
  100% { color: hsl(360,90%,65%); }
}
body.cb-prismatic .panel {
  animation: cb-prismatic-hue 6s linear infinite;
  transition: box-shadow 0.2s;
}
body.cb-prismatic .panel:hover {
  filter: brightness(1.25);
}
body.cb-prismatic .section-header {
  animation: cb-prismatic-text 6s linear infinite;
}

/* ── Aura Glow Toggle button ── */
#auraGlowToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 3px 10px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
#auraGlowToggleBtn:hover {
  border-color: var(--border-mid);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}
#auraGlowToggleBtn.aura-glow-off {
  border-color: var(--border-dark);
  color: var(--text-muted);
  opacity: 0.55;
}
#auraGlowToggleBtn.aura-glow-off:hover {
  opacity: 0.85;
}
/* Aura glow toggle — opacity je nastavená priamo cez JS na canvas elementoch */

/* ═══════════════════════════════════════════════════════════════
   RANK FRAME GLOW TOGGLE — body.rank-glow-off
   Potlačí len svietenie (box-shadow + ::before/::after animácie).
   Border rámiku, badge, rank label — ostávajú nedotknuté.
   ═══════════════════════════════════════════════════════════════ */

body.rank-glow-off .portrait-rank-frame {
  box-shadow: none !important;
  animation: none !important;
}
body.rank-glow-off .portrait-rank-frame::before {
  opacity: 0 !important;
  animation: none !important;
}
body.rank-glow-off .portrait-rank-frame::after {
  opacity: 0 !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Keď je glow off, daj frame pevný viditeľný border podľa ranku */
body.rank-glow-off .rank-myth    .portrait-rank-frame { border: 4px solid #00e5ff !important; }
body.rank-glow-off .rank-legend  .portrait-rank-frame { border: 3px solid #a855f7 !important; }
body.rank-glow-off .rank-hero    .portrait-rank-frame { border: 3px solid #f59e0b !important; }
body.rank-glow-off .rank-champion .portrait-rank-frame { border: 2px solid var(--accent-gold) !important; }
body.rank-glow-off .rank-veteran  .portrait-rank-frame { border: 2px solid #c0c0c0 !important; }
body.rank-glow-off .rank-journeyman .portrait-rank-frame { border: 2px solid #22c55e !important; }
body.rank-glow-off .rank-adventurer .portrait-rank-frame { border: 2px solid #cd7f32 !important; }
body.rank-glow-off .rank-squire  .portrait-rank-frame { border: 2px solid #a8a8a8 !important; }

/* ═══════════════════════════════════════════
   CHARACTER MANAGER PANEL
═══════════════════════════════════════════ */

.char-manager {
  position: relative;
}

.char-manager-toggle {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
  min-width: 130px;
  text-align: left;
}

.cs-caret {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}

.char-manager-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  background: linear-gradient(160deg, var(--bg-deepest) 0%, var(--bg-dark) 100%);
  border: 1.5px solid var(--border-gold);
  border-radius: 10px;
  padding: 14px;
  min-width: 340px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 30px rgba(180,130,40,0.15);
}

.cs-panel-header {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent-gold);
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-gold);
  opacity: 0.85;
}

.cs-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.cs-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(180,130,40,0.2);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 46px;
}

.cs-slot:hover {
  background: rgba(180,130,40,0.12);
  border-color: var(--border-gold);
  transform: translateY(-1px);
}

.cs-slot-active {
  background: rgba(180,130,40,0.18) !important;
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 10px rgba(180,130,40,0.25);
}

.cs-slot-empty {
  opacity: 0.5;
}

.cs-slot-num {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-gold);
  min-width: 16px;
  text-align: center;
  opacity: 0.7;
}

.cs-slot-active .cs-slot-num {
  opacity: 1;
}

.cs-slot-info {
  flex: 1;
  overflow: hidden;
}

.cs-slot-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

.cs-slot-sub {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-panel-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(180,130,40,0.2);
  padding-top: 10px;
}

.cs-panel-actions .btn {
  flex: 1;
  min-width: 60px;
  font-size: 10px;
  padding: 6px 8px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   ABOUT MODAL
═══════════════════════════════════════════ */

.about-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.about-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.about-modal {
  background: linear-gradient(160deg, #0e0e18 0%, #12121f 60%, #0a0a12 100%);
  border: 1.5px solid var(--border-gold);
  border-radius: 16px;
  padding: 36px 40px 28px;
  width: 380px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 80px rgba(0,0,0,0.8), 0 0 40px rgba(180,130,40,0.15);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.about-overlay.open .about-modal {
  transform: translateY(0);
}
.about-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s;
}
.about-close:hover { color: var(--accent-gold); }
.about-dragon {
  font-size: 36px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(180,130,40,0.5));
}
.about-title {
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--accent-gold-bright);
  letter-spacing: 6px;
  text-shadow: 0 0 20px rgba(212,168,67,0.4);
}
.about-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 3px;
  margin-top: 4px;
}
.about-version {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--accent-gold);
  letter-spacing: 2px;
  margin-top: 6px;
  opacity: 0.7;
}
.about-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  margin: 18px 0;
  opacity: 0.5;
}
.about-credit {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.about-author {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 4px;
  margin-top: 4px;
}
.about-tagline {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}
.about-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.about-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.about-link:hover {
  transform: translateX(3px);
  border-color: rgba(255,255,255,0.2);
}
.about-link-discord   { background: rgba(88,101,242,0.15); }
.about-link-discord:hover   { background: rgba(88,101,242,0.25); border-color: #5865f2; }
.about-link-instagram { background: rgba(225,48,108,0.12); }
.about-link-instagram:hover { background: rgba(225,48,108,0.22); border-color: #e1306c; }
.about-link-kofi      { background: rgba(255,94,91,0.12); }
.about-link-kofi:hover      { background: rgba(255,94,91,0.22); border-color: #ff5e5b; }
.about-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.about-link-discord   .about-link-icon { color: #5865f2; }
.about-link-instagram .about-link-icon { color: #e1306c; }
.about-link-kofi      .about-link-icon { color: #ff5e5b; }
.about-link span:nth-child(2) {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-primary);
  flex: 1;
  text-align: left;
}
.about-link-handle {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: var(--text-muted);
}
.about-footer {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.5;
  letter-spacing: 1px;
}