:root {
  --ink: #20150f;
  --paper: #f3dfad;
  --paper-dark: #d2a65a;
  --wood: #5b3420;
  --wood-dark: #2c1710;
  --red: #b63c2d;
  --green: #4d8a45;
  --blue: #386d9c;
  --gold: #e3b348;
  --shadow: rgba(20, 12, 7, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(34, 18, 10, 0.58), rgba(34, 18, 10, 0.7)),
    url("assets/world-bg.png") center / cover fixed,
    linear-gradient(rgba(36, 22, 13, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 22, 13, 0.12) 1px, transparent 1px),
    #9b6a3c;
  background-size: cover, cover, 34px 34px, 34px 34px;
}

body.theme-alex,
.theme-alex {
  --theme-ink: #f6ecff;
  --theme-muted: #d4a9ff;
  --theme-dark: #050209;
  --theme-deep: #0c0514;
  --theme-mid: #210738;
  --theme-panel: rgba(15, 5, 24, 0.95);
  --theme-panel-soft: rgba(50, 13, 82, 0.84);
  --theme-border: #8d3df1;
  --theme-accent: #c070ff;
  --theme-accent-2: #5a1499;
  --theme-button-top: #c176ff;
  --theme-button-bottom: #2a0b47;
  --theme-button-ink: #fff5ff;
  --theme-glow: rgba(191, 92, 255, 0.48);
}

body.theme-chris,
.theme-chris {
  --theme-ink: #efffee;
  --theme-muted: #a4f07f;
  --theme-dark: #020704;
  --theme-deep: #071108;
  --theme-mid: #123018;
  --theme-panel: rgba(4, 16, 8, 0.94);
  --theme-panel-soft: rgba(18, 54, 25, 0.82);
  --theme-border: #54d73a;
  --theme-accent: #83ff4f;
  --theme-accent-2: #1f7f21;
  --theme-button-top: #7df451;
  --theme-button-bottom: #154f18;
  --theme-button-ink: #061006;
  --theme-glow: rgba(123, 255, 72, 0.38);
}

body.theme-lena,
.theme-lena {
  --theme-ink: #fff0e9;
  --theme-muted: #d8a196;
  --theme-dark: #100606;
  --theme-deep: #1d0909;
  --theme-mid: #3b1515;
  --theme-panel: rgba(30, 10, 10, 0.94);
  --theme-panel-soft: rgba(74, 26, 24, 0.82);
  --theme-border: #9d4b3f;
  --theme-accent: #d17b66;
  --theme-accent-2: #4d1514;
  --theme-button-top: #c06a55;
  --theme-button-bottom: #4a1715;
  --theme-button-ink: #fff1ec;
  --theme-glow: rgba(209, 123, 102, 0.32);
}

body.theme-max,
.theme-max {
  --theme-ink: #f6fff1;
  --theme-muted: #c4e89a;
  --theme-dark: #081008;
  --theme-deep: #111b0b;
  --theme-mid: #27411d;
  --theme-panel: rgba(14, 30, 13, 0.93);
  --theme-panel-soft: rgba(48, 78, 34, 0.82);
  --theme-border: #a8c45a;
  --theme-accent: #e2c96b;
  --theme-accent-2: #49d99a;
  --theme-button-top: #d9c66b;
  --theme-button-bottom: #335422;
  --theme-button-ink: #091106;
  --theme-glow: rgba(93, 225, 154, 0.3);
}

body.theme-marco,
.theme-marco {
  --theme-ink: #f3eaff;
  --theme-muted: #c99cff;
  --theme-dark: #050309;
  --theme-deep: #100719;
  --theme-mid: #28103e;
  --theme-panel: rgba(18, 6, 28, 0.94);
  --theme-panel-soft: rgba(52, 20, 76, 0.82);
  --theme-border: #8d45e6;
  --theme-accent: #b46cff;
  --theme-accent-2: #39d83a;
  --theme-button-top: #8e48e8;
  --theme-button-bottom: #251039;
  --theme-button-ink: #fff5ff;
  --theme-glow: rgba(180, 108, 255, 0.38);
}

body.theme-tobias,
.theme-tobias {
  --theme-ink: #eef7ff;
  --theme-muted: #a9d7ff;
  --theme-dark: #030814;
  --theme-deep: #071225;
  --theme-mid: #123863;
  --theme-panel: rgba(6, 18, 36, 0.94);
  --theme-panel-soft: rgba(22, 58, 96, 0.82);
  --theme-border: #3a9eee;
  --theme-accent: #73dcff;
  --theme-accent-2: #2b61ff;
  --theme-button-top: #79cdf8;
  --theme-button-bottom: #123b70;
  --theme-button-ink: #031020;
  --theme-glow: rgba(96, 200, 255, 0.4);
}

body.theme-norman,
.theme-norman {
  --theme-ink: #eef7ff;
  --theme-muted: #adc1cf;
  --theme-dark: #071018;
  --theme-deep: #0d1720;
  --theme-mid: #203242;
  --theme-panel: rgba(12, 24, 34, 0.94);
  --theme-panel-soft: rgba(41, 59, 72, 0.82);
  --theme-border: #718b9b;
  --theme-accent: #9bb5c8;
  --theme-accent-2: #8a6a44;
  --theme-button-top: #8ca5b6;
  --theme-button-bottom: #243542;
  --theme-button-ink: #071018;
  --theme-glow: rgba(155, 181, 200, 0.28);
}

body.theme-bambi,
.theme-bambi {
  --theme-ink: #f1f0e8;
  --theme-muted: #bdc1b2;
  --theme-dark: #080b09;
  --theme-deep: #111512;
  --theme-mid: #2a3028;
  --theme-panel: rgba(17, 21, 18, 0.94);
  --theme-panel-soft: rgba(55, 58, 48, 0.82);
  --theme-border: #7f8571;
  --theme-accent: #c7b188;
  --theme-accent-2: #5d3429;
  --theme-button-top: #a7a68f;
  --theme-button-bottom: #2d3127;
  --theme-button-ink: #080b09;
  --theme-glow: rgba(184, 190, 174, 0.26);
}

body[class*="theme-"] {
  color: var(--theme-ink);
  background:
    linear-gradient(rgba(5, 3, 8, 0.62), rgba(5, 3, 8, 0.76)),
    url("assets/world-bg.png") center / cover fixed,
    radial-gradient(circle at 20% 12%, var(--theme-mid), transparent 28%),
    var(--theme-dark);
}

body[class*="theme-"] button {
  color: var(--theme-button-ink);
  background: linear-gradient(var(--theme-button-top), var(--theme-button-bottom));
  box-shadow: 0 4px 0 var(--theme-deep), 0 8px 16px var(--shadow);
}

body[class*="theme-"] .brand,
body[class*="theme-"] .topnav,
body[class*="theme-"] .resource,
body[class*="theme-"] .character-preview,
body[class*="theme-"] .shop-item,
body[class*="theme-"] pre {
  color: var(--theme-ink);
  background: linear-gradient(135deg, var(--theme-mid), var(--theme-dark));
  border-color: var(--theme-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 22%, transparent), 0 10px 24px rgba(0, 0, 0, 0.36);
}

body[class*="theme-"] .panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), var(--theme-panel-soft)),
    var(--theme-panel);
  border-color: var(--theme-border);
  color: var(--theme-ink);
}

body[class*="theme-"] .brand p,
body[class*="theme-"] .character-preview span,
body[class*="theme-"] .resource span:not(.resource-icon),
body[class*="theme-"] .eyebrow,
body[class*="theme-"] .shop-item p {
  color: var(--theme-muted);
}

body[class*="theme-"] .character-header,
body[class*="theme-"] .inventory-panel,
body[class*="theme-"] .stats div,
body[class*="theme-"] .character-paper {
  background: color-mix(in srgb, var(--theme-panel-soft) 62%, transparent);
  border-color: color-mix(in srgb, var(--theme-border) 72%, #000);
}

body[class*="theme-"] .nav-button.active,
body[class*="theme-"] .shop-nav.active,
body[class*="theme-"] .guild-entry.active,
body[class*="theme-"] .log-toggle.active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 34%, transparent), transparent 54%),
    linear-gradient(var(--theme-mid), var(--theme-dark));
  outline-color: var(--theme-accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-accent) 42%, transparent), 0 4px 0 var(--theme-deep), 0 0 18px var(--theme-glow);
}

body[class*="theme-"] .nav-button.active::after {
  background: var(--theme-accent);
  box-shadow: 0 0 10px var(--theme-glow);
}


body[class*="theme-"] .shop-nav,
body[class*="theme-"] .shop-default {
  color: var(--theme-button-ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 22%, transparent), transparent 58%),
    linear-gradient(var(--theme-button-top), var(--theme-button-bottom));
  border-color: var(--theme-deep);
  box-shadow: 0 4px 0 var(--theme-deep), 0 8px 16px var(--shadow);
}

body[class*="theme-"] .shop-item span,
body[class*="theme-"] .inventory-panel h3,
body[class*="theme-"] .character-header p,
body[class*="theme-"] dt {
  color: var(--theme-accent);
}

body.theme-alex .brand,
body.theme-alex .topnav,
body.theme-alex .panel,
body.theme-alex .resource,
body.theme-alex .character-preview,
body.theme-alex pre {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(191, 72, 255, 0.4) 0 10%, rgba(87, 16, 150, 0.22) 22%, transparent 48%),
    radial-gradient(ellipse at 20% 108%, rgba(96, 16, 170, 0.28) 0 9%, transparent 32%),
    radial-gradient(ellipse at 82% 106%, rgba(216, 126, 255, 0.2) 0 7%, transparent 28%),
    linear-gradient(145deg, #210738, #050209 74%);
}

body.theme-alex button {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(201, 90, 255, 0.46), transparent 42%),
    linear-gradient(#6f24b6, #0c0514 74%);
  color: var(--theme-button-ink);
  text-shadow: 0 1px 0 #050209;
}

body.theme-alex .shop-nav,
body.theme-alex .shop-default {
  color: #fff5ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(191, 72, 255, 0.36), transparent 42%),
    radial-gradient(ellipse at 36% 118%, rgba(75, 12, 140, 0.24), transparent 48%),
    linear-gradient(#210738, #050209 74%);
  border-color: #050209;
  box-shadow:
    0 4px 0 #050209,
    0 0 20px rgba(191, 92, 255, 0.34),
    0 8px 16px rgba(0, 0, 0, 0.48);
  text-shadow: 0 1px 0 #050209;
}

body.theme-alex .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(5, 2, 9, 0.02), rgba(5, 2, 9, 0.5)),
    radial-gradient(ellipse at 50% 112%, rgba(191, 72, 255, 0.36), transparent 42%),
    radial-gradient(ellipse at 80% 112%, rgba(88, 18, 150, 0.2), transparent 34%),
    url("assets/alex-voidflame.png") center 18% / cover no-repeat,
    #050209;
}


body.theme-chris .brand,
body.theme-chris .topnav,
body.theme-chris .panel,
body.theme-chris .resource,
body.theme-chris .character-preview,
body.theme-chris pre {
  background:
    radial-gradient(ellipse at 45% 116%, rgba(105, 255, 50, 0.36) 0 10%, rgba(38, 132, 24, 0.22) 20%, transparent 46%),
    radial-gradient(ellipse at 15% 105%, rgba(126, 255, 65, 0.2) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(77, 255, 34, 0.18) 0 7%, transparent 28%),
    linear-gradient(145deg, #123018, #020704 74%);
}

body.theme-chris button {
  color: #edffe9;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(112, 255, 55, 0.42), transparent 42%),
    linear-gradient(#2c7f2c, #071108 74%);
  text-shadow: 0 1px 0 #020704;
}

body.theme-chris .shop-nav,
body.theme-chris .shop-default {
  color: #edffe9;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(112, 255, 55, 0.36), transparent 42%),
    linear-gradient(#123018, #020704 74%);
  border-color: #020704;
  box-shadow:
    0 4px 0 #020704,
    0 0 18px rgba(123, 255, 72, 0.26),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-chris .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(2, 7, 4, 0.04), rgba(2, 7, 4, 0.54)),
    radial-gradient(ellipse at 50% 110%, rgba(100, 255, 52, 0.3), transparent 42%),
    url("assets/chris-warlock.png") center 20% / cover no-repeat,
    #020704;
}


body.theme-lena .brand,
body.theme-lena .topnav,
body.theme-lena .panel,
body.theme-lena .resource,
body.theme-lena .character-preview,
body.theme-lena pre {
  background:
    radial-gradient(ellipse at 50% 116%, rgba(196, 80, 62, 0.3) 0 10%, rgba(88, 24, 22, 0.2) 22%, transparent 48%),
    radial-gradient(ellipse at 18% 104%, rgba(209, 123, 102, 0.13) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(109, 42, 34, 0.18) 0 8%, transparent 30%),
    linear-gradient(145deg, #3b1515, #100606 74%);
}

body.theme-lena button {
  color: #fff1ec;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(209, 123, 102, 0.34), transparent 42%),
    linear-gradient(#74302a, #1d0909 74%);
  text-shadow: 0 1px 0 #100606;
}

body.theme-lena .shop-nav,
body.theme-lena .shop-default {
  color: #fff1ec;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(209, 123, 102, 0.28), transparent 42%),
    linear-gradient(#3b1515, #100606 74%);
  border-color: #100606;
  box-shadow:
    0 4px 0 #100606,
    0 0 18px rgba(209, 123, 102, 0.24),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-lena .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(16, 6, 6, 0.04), rgba(16, 6, 6, 0.54)),
    radial-gradient(ellipse at 50% 110%, rgba(196, 80, 62, 0.24), transparent 42%),
    url("assets/lena-arena.png") center 18% / cover no-repeat,
    #100606;
}


body.theme-max .brand,
body.theme-max .topnav,
body.theme-max .panel,
body.theme-max .resource,
body.theme-max .character-preview,
body.theme-max pre {
  background:
    radial-gradient(ellipse at 48% 116%, rgba(79, 229, 153, 0.28) 0 10%, rgba(226, 201, 107, 0.18) 22%, transparent 48%),
    radial-gradient(ellipse at 18% 104%, rgba(136, 213, 86, 0.16) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(226, 201, 107, 0.16) 0 8%, transparent 30%),
    linear-gradient(145deg, #27411d, #081008 74%);
}

body.theme-max button {
  color: #f6fff1;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(79, 229, 153, 0.3), transparent 42%),
    linear-gradient(#687a32, #111b0b 74%);
  text-shadow: 0 1px 0 #081008;
}

body.theme-max .shop-nav,
body.theme-max .shop-default {
  color: #f6fff1;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(226, 201, 107, 0.26), transparent 42%),
    radial-gradient(ellipse at 35% 118%, rgba(79, 229, 153, 0.18), transparent 48%),
    linear-gradient(#27411d, #081008 74%);
  border-color: #081008;
  box-shadow:
    0 4px 0 #081008,
    0 0 18px rgba(93, 225, 154, 0.24),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-max .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(8, 16, 8, 0.04), rgba(8, 16, 8, 0.5)),
    radial-gradient(ellipse at 50% 110%, rgba(79, 229, 153, 0.24), transparent 42%),
    radial-gradient(ellipse at 84% 112%, rgba(226, 201, 107, 0.14), transparent 34%),
    url("assets/max-naturemonk.png") center 18% / cover no-repeat,
    #081008;
}


body.theme-marco .brand,
body.theme-marco .topnav,
body.theme-marco .panel,
body.theme-marco .resource,
body.theme-marco .character-preview,
body.theme-marco pre {
  background:
    radial-gradient(ellipse at 50% 116%, rgba(147, 61, 255, 0.34) 0 10%, rgba(53, 216, 58, 0.12) 22%, transparent 48%),
    radial-gradient(ellipse at 18% 104%, rgba(57, 216, 58, 0.16) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(180, 108, 255, 0.18) 0 8%, transparent 30%),
    linear-gradient(145deg, #28103e, #050309 74%);
}

body.theme-marco button {
  color: #fff5ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(180, 108, 255, 0.42), transparent 42%),
    linear-gradient(#5c28a1, #100719 74%);
  text-shadow: 0 1px 0 #050309;
}

body.theme-marco .shop-nav,
body.theme-marco .shop-default {
  color: #fff5ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(57, 216, 58, 0.18), transparent 42%),
    radial-gradient(ellipse at 35% 118%, rgba(180, 108, 255, 0.32), transparent 48%),
    linear-gradient(#28103e, #050309 74%);
  border-color: #050309;
  box-shadow:
    0 4px 0 #050309,
    0 0 18px rgba(180, 108, 255, 0.28),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-marco .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(5, 3, 9, 0.04), rgba(5, 3, 9, 0.54)),
    radial-gradient(ellipse at 50% 110%, rgba(147, 61, 255, 0.32), transparent 42%),
    radial-gradient(ellipse at 80% 112%, rgba(57, 216, 58, 0.13), transparent 34%),
    url("assets/marco-voidblade.png") center 18% / cover no-repeat,
    #050309;
}


body.theme-tobias .brand,
body.theme-tobias .topnav,
body.theme-tobias .panel,
body.theme-tobias .resource,
body.theme-tobias .character-preview,
body.theme-tobias pre {
  background:
    radial-gradient(ellipse at 50% 116%, rgba(92, 198, 255, 0.32) 0 10%, rgba(43, 97, 255, 0.16) 22%, transparent 48%),
    radial-gradient(ellipse at 18% 104%, rgba(127, 214, 255, 0.16) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(24, 66, 122, 0.28) 0 8%, transparent 30%),
    linear-gradient(145deg, #123863, #030814 74%);
}

body.theme-tobias button {
  color: #eef7ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(115, 220, 255, 0.34), transparent 42%),
    linear-gradient(#1b64a0, #071225 74%);
  text-shadow: 0 1px 0 #030814;
}

body.theme-tobias .shop-nav,
body.theme-tobias .shop-default {
  color: #eef7ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(115, 220, 255, 0.24), transparent 42%),
    radial-gradient(ellipse at 35% 118%, rgba(43, 97, 255, 0.2), transparent 48%),
    linear-gradient(#123863, #030814 74%);
  border-color: #030814;
  box-shadow:
    0 4px 0 #030814,
    0 0 18px rgba(96, 200, 255, 0.28),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-tobias .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(3, 8, 20, 0.04), rgba(3, 8, 20, 0.5)),
    radial-gradient(ellipse at 48% 110%, rgba(92, 198, 255, 0.28), transparent 42%),
    radial-gradient(ellipse at 82% 112%, rgba(43, 97, 255, 0.16), transparent 34%),
    url("assets/tobias-storm.png") center 16% / cover no-repeat,
    #030814;
}


body.theme-norman .brand,
body.theme-norman .topnav,
body.theme-norman .panel,
body.theme-norman .resource,
body.theme-norman .character-preview,
body.theme-norman pre {
  background:
    radial-gradient(ellipse at 50% 116%, rgba(118, 150, 170, 0.28) 0 10%, rgba(138, 106, 68, 0.12) 22%, transparent 48%),
    radial-gradient(ellipse at 18% 104%, rgba(92, 121, 139, 0.16) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(44, 69, 86, 0.2) 0 8%, transparent 30%),
    linear-gradient(145deg, #203242, #071018 74%);
}

body.theme-norman button {
  color: #eef7ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(155, 181, 200, 0.32), transparent 42%),
    linear-gradient(#42596a, #0d1720 74%);
  text-shadow: 0 1px 0 #071018;
}

body.theme-norman .shop-nav,
body.theme-norman .shop-default {
  color: #eef7ff;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(155, 181, 200, 0.24), transparent 42%),
    radial-gradient(ellipse at 35% 118%, rgba(138, 106, 68, 0.16), transparent 48%),
    linear-gradient(#203242, #071018 74%);
  border-color: #071018;
  box-shadow:
    0 4px 0 #071018,
    0 0 18px rgba(155, 181, 200, 0.24),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-norman .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(7, 16, 24, 0.04), rgba(7, 16, 24, 0.5)),
    radial-gradient(ellipse at 50% 110%, rgba(118, 150, 170, 0.22), transparent 42%),
    radial-gradient(ellipse at 82% 112%, rgba(138, 106, 68, 0.12), transparent 34%),
    url("assets/norman-harbor.png") center 16% / cover no-repeat,
    #071018;
}


body.theme-bambi .brand,
body.theme-bambi .topnav,
body.theme-bambi .panel,
body.theme-bambi .resource,
body.theme-bambi .character-preview,
body.theme-bambi pre {
  background:
    radial-gradient(ellipse at 50% 116%, rgba(184, 190, 174, 0.24) 0 10%, rgba(93, 52, 41, 0.14) 22%, transparent 48%),
    radial-gradient(ellipse at 18% 104%, rgba(130, 138, 122, 0.14) 0 8%, transparent 30%),
    radial-gradient(ellipse at 82% 112%, rgba(50, 56, 47, 0.24) 0 8%, transparent 30%),
    linear-gradient(145deg, #2a3028, #080b09 74%);
}

body.theme-bambi button {
  color: #f1f0e8;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(184, 190, 174, 0.26), transparent 42%),
    linear-gradient(#5c6252, #111512 74%);
  text-shadow: 0 1px 0 #080b09;
}

body.theme-bambi .shop-nav,
body.theme-bambi .shop-default {
  color: #f1f0e8;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(184, 190, 174, 0.18), transparent 42%),
    radial-gradient(ellipse at 35% 118%, rgba(93, 52, 41, 0.16), transparent 48%),
    linear-gradient(#2a3028, #080b09 74%);
  border-color: #080b09;
  box-shadow:
    0 4px 0 #080b09,
    0 0 18px rgba(184, 190, 174, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.48);
}

body.theme-bambi .character-paper.portrait-card {
  background:
    linear-gradient(180deg, rgba(8, 11, 9, 0.04), rgba(8, 11, 9, 0.52)),
    radial-gradient(ellipse at 50% 110%, rgba(184, 190, 174, 0.18), transparent 42%),
    radial-gradient(ellipse at 80% 112%, rgba(93, 52, 41, 0.14), transparent 34%),
    url("assets/bambi-rain.png") center 20% / cover no-repeat,
    #080b09;
}


button,
input,
select {
  font: inherit;
}

button {
  min-height: 44px;
  cursor: pointer;
  border: 2px solid #2a160d;
  border-radius: 7px;
  padding: 10px 14px;
  color: #251407;
  background: linear-gradient(#f5c86a, #b97424);
  box-shadow: 0 4px 0 #45230f, 0 8px 16px var(--shadow);
  font-weight: 700;
}

button:hover {
  filter: brightness(1.08);
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #45230f, 0 4px 8px var(--shadow);
}

input,
select {
  width: 100%;
  border: 2px solid #6f4324;
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--ink);
  background: #fff2c9;
}

label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  width: min(1460px, calc(100vw - 28px));
  min-height: calc(100vh - 28px);
  margin: 14px auto;
}

.shell:has(#login:not(.hidden)) {
  grid-template-columns: minmax(600px, 700px) minmax(440px, 620px);
  width: min(1340px, calc(100vw - 28px));
}

.shell:has(#login:not(.hidden)) .sidebar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(600px, 700px) minmax(440px, 620px);
  align-items: stretch;
  gap: 18px;
}

.shell:has(#login:not(.hidden)) .brand {
  display: none;
}

.shell:has(#login:not(.hidden)) .guild-entry {
  position: relative;
  justify-content: center;
  min-height: 62px;
  padding: 0;
  overflow: visible;
  color: #f6ecff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.shell:has(#login:not(.hidden)) .guild-entry::before,
.shell:has(#login:not(.hidden)) .guild-entry::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.shell:has(#login:not(.hidden)) .guild-entry::before {
  inset: 0 16%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(178, 75, 255, 0.36), transparent 58%),
    radial-gradient(ellipse at 50% 50%, rgba(58, 170, 255, 0.16), transparent 72%);
  filter: blur(12px);
  opacity: 0.9;
}

.shell:has(#login:not(.hidden)) .guild-entry::after {
  display: none;
}

.shell:has(#login:not(.hidden)) .brand-mark,
.shell:has(#login:not(.hidden)) .brand p {
  display: none;
}

.shell:has(#login:not(.hidden)) .brand h1 {
  position: relative;
  z-index: 2;
  color: #fff7ff;
  font-size: clamp(32px, 4vw, 48px);
  text-align: center;
  text-shadow:
    0 2px 0 #14041f,
    0 0 14px rgba(203, 120, 255, 0.92),
    0 0 30px rgba(77, 178, 255, 0.42);
  text-transform: uppercase;
  transform: skewX(-7deg);
}

.shell:has(#login:not(.hidden)) .brand h1::before {
  content: "Bobar vs. Void-Beaver";
}

.shell:has(#login:not(.hidden)) .brand h1 {
  font-size: 0;
}

.shell:has(#login:not(.hidden)) .brand h1::before {
  font-size: clamp(36px, 5vw, 58px);
  letter-spacing: 0.08em;
}

.shell:has(#login:not(.hidden)) .login-main {
  grid-column: 1;
}

.shell:has(#login:not(.hidden)) .login-description {
  grid-column: 2;
  grid-row: 1;
}

.sidebar,
.game {
  min-width: 0;
}

.shell:not(:has(#login:not(.hidden))) .sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
}

.game {
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  color: #fff4cb;
  background: linear-gradient(135deg, #593018, #25120b);
  border: 3px solid #1d0f09;
  border-radius: 8px;
  box-shadow: 0 12px 28px var(--shadow);
  text-align: left;
}

.guild-entry {
  cursor: pointer;
}

.guild-entry:hover,
.guild-entry:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid #4ba3ff;
  outline-offset: 2px;
  transform: translateY(-1px);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #050505;
  background: #ffffff;
  border: 3px solid #0f0f0f;
  box-shadow: inset 0 0 0 2px #ececec, 0 3px 10px rgba(0, 0, 0, 0.28);
  font-weight: 900;
}

.brand h1,
.brand p,
.panel h2,
.panel p,
dl {
  margin: 0;
}

.brand h1 {
  font-size: 26px;
  line-height: 1;
}

.brand p {
  margin-top: 5px;
  color: #edc783;
  font-size: 14px;
}

.panel {
  position: relative;
  margin-top: 14px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 250, 222, 0.88), rgba(211, 161, 82, 0.9)),
    var(--paper);
  border: 3px solid #2a160d;
  border-radius: 8px;
  box-shadow: 0 12px 28px var(--shadow);
}

.primary {
  width: 100%;
  margin-top: 16px;
}

.login-panel {
  display: contents;
  overflow: hidden;
  padding: 0;
}

.login-main,
.login-description {
  background:
    linear-gradient(135deg, rgba(255, 250, 222, 0.88), rgba(211, 161, 82, 0.9)),
    #e6bd76;
  border: 3px solid #1d0f09;
  border-radius: 8px;
  box-shadow: 0 12px 28px var(--shadow);
}

.login-main {
  overflow: hidden;
}

.login-description {
  position: relative;
  align-self: stretch;
  min-height: 100%;
  overflow: hidden;
  padding: 58px 68px;
  color: #2b1d12;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 252, 226, 0.74), transparent 42%),
    radial-gradient(ellipse at 50% 100%, rgba(101, 62, 31, 0.26), transparent 46%),
    linear-gradient(90deg, rgba(78, 45, 23, 0.34), transparent 9%, transparent 91%, rgba(78, 45, 23, 0.34)),
    linear-gradient(180deg, rgba(255, 246, 202, 0.92), rgba(195, 151, 91, 0.78));
  border-color: rgba(70, 43, 22, 0.84);
  box-shadow:
    inset 24px 0 26px rgba(84, 49, 23, 0.22),
    inset -24px 0 26px rgba(84, 49, 23, 0.22),
    inset 0 0 0 1px rgba(255, 250, 219, 0.48),
    0 18px 36px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(2px);
}

.login-description::before,
.login-description::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 241, 190, 0.84), transparent 28%),
    linear-gradient(90deg, #6f3f1e, #d9a65d 42%, #70401f);
  box-shadow:
    inset 0 0 0 2px rgba(53, 29, 14, 0.58),
    0 0 18px rgba(41, 20, 8, 0.34);
  pointer-events: none;
}

.login-description::before {
  left: 14px;
}

.login-description::after {
  right: 14px;
}

.login-description .eyebrow::before,
.login-description .eyebrow::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin: 0 10px 3px;
  background: rgba(89, 55, 28, 0.58);
}

.login-description strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 14px;
  color: #2a1509;
  font-size: clamp(28px, 3.7vw, 44px);
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 247, 211, 0.72);
}

.login-description p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  color: #3a2819;
  font-size: 19px;
  line-height: 1.72;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.42);
}

.login-description .eyebrow {
  position: relative;
  z-index: 1;
  color: #6d4221;
  text-align: center;
}

.login-panel h2,
.login-panel .class-picker,
.login-panel .character-preview,
.login-roster {
  margin-left: 18px;
  margin-right: 18px;
}

.login-panel h2 {
  margin-top: 20px;
  font-size: 30px;
}

.class-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.class-choice {
  min-height: 54px;
  padding: 8px 6px;
  color: #fff7de;
  background:
    linear-gradient(180deg, rgba(255, 219, 139, 0.16), transparent 58%),
    linear-gradient(#563018, #211008);
  border: 2px solid rgba(255, 224, 146, 0.3);
  border-radius: 7px;
  box-shadow: 0 4px 0 #160b06, inset 0 0 0 1px rgba(255, 234, 174, 0.1);
}

.class-choice strong,
.class-choice span {
  display: block;
}

.class-choice strong {
  font-size: 14px;
  line-height: 1.05;
}

.class-choice span {
  margin-top: 5px;
  color: #ffd77d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.class-choice small {
  display: block;
  margin-top: 8px;
  color: #ead6a9;
  font-size: 12px;
  line-height: 1.25;
}

.class-choice:hover,
.class-choice:focus-visible,
.class-choice.active {
  color: #fffbe6;
  border-color: #ffe39c;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 226, 137, 0.42), transparent 60%),
    linear-gradient(#75502a, #2b160b);
  box-shadow:
    0 4px 0 #160b06,
    0 0 18px rgba(255, 206, 105, 0.28),
    inset 0 0 0 1px rgba(255, 243, 202, 0.18);
  transform: translateY(-1px);
}

.class-modal-open {
  overflow: hidden;
}

.class-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 28%, rgba(150, 85, 255, 0.2), transparent 35%),
    rgba(3, 2, 5, 0.78);
  backdrop-filter: blur(5px);
}

.class-modal-card {
  width: min(760px, 100%);
  padding: 24px;
  color: #fff6dc;
  background:
    radial-gradient(circle at 18% 0, rgba(157, 84, 255, 0.2), transparent 42%),
    radial-gradient(circle at 78% 12%, rgba(96, 190, 255, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(34, 14, 46, 0.98), rgba(8, 5, 12, 0.98));
  border: 3px solid #8d5cf1;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 174, 0.12),
    0 24px 70px rgba(0, 0, 0, 0.64),
    0 0 34px rgba(141, 92, 241, 0.36);
}

.class-modal-card h2 {
  margin-top: 4px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1;
}

.class-modal-card > p:not(.eyebrow) {
  margin-top: 10px;
  color: #e6d4ff;
  line-height: 1.45;
}

.class-modal-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.class-modal-options .class-choice {
  min-height: 150px;
  padding: 14px 10px;
}

.class-modal-options .class-choice strong {
  font-size: 21px;
}

.class-modal-options .class-choice span {
  font-size: 15px;
}

@media (max-width: 680px) {
  .class-modal {
    align-items: start;
    overflow: auto;
  }

  .class-modal-options {
    grid-template-columns: 1fr;
  }

  .class-modal-options .class-choice {
    min-height: 112px;
  }
}

.login-art {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-bottom: 3px solid #2a160d;
  background: #2b1710;
}

.login-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(35, 19, 10, 0.72)),
    radial-gradient(circle at 50% 30%, transparent, rgba(35, 19, 10, 0.28));
  pointer-events: none;
}

.login-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(30, 14, 8, 0.74), rgba(11, 6, 4, 0.88)),
    radial-gradient(circle at 50% 0, rgba(255, 218, 128, 0.18), transparent 42%);
  border: 2px solid #2a160d;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 164, 0.14),
    0 8px 18px rgba(20, 10, 5, 0.26);
}

.login-character {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 7px;
  color: #fff7de;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72)),
    var(--portrait) center 18% / cover no-repeat;
  border: 2px solid rgba(255, 224, 146, 0.34);
  border-radius: 8px;
  box-shadow:
    inset 0 -36px 42px rgba(0, 0, 0, 0.68),
    0 4px 0 #160b06;
  text-shadow: 0 2px 2px #080402;
}

.login-character::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 18%, transparent, rgba(0, 0, 0, 0.34));
  opacity: 0.75;
  transition: opacity 180ms ease;
}

.login-character:hover,
.login-character:focus-visible,
.login-character.active {
  filter: brightness(1.12);
  border-color: #ffe39c;
  box-shadow:
    inset 0 -36px 42px rgba(0, 0, 0, 0.58),
    0 4px 0 #160b06,
    0 0 16px rgba(255, 213, 117, 0.38);
  transform: translateY(-2px);
}

.login-character:hover::before,
.login-character:focus-visible::before,
.login-character.active::before {
  opacity: 0.42;
}

.login-character-name {
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 560px) {
  .login-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-offer-grid {
    grid-template-columns: 1fr;
  }

  .login-character {
    min-height: 148px;
  }
}

@media (max-width: 820px) {
  .inventory-view-panel .equipment-bag-grid {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
  }
}

.inventory-view-panel .equipment-bag-grid {
  grid-template-columns: repeat(5, minmax(48px, 1fr));
}

/* Character profile and sidebar navigation use the same open layout as inventory. */
body[class*="theme-"] .sidebar > .topnav {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[class*="theme-"] #profile.character-screen {
  min-height: 0;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  column-gap: 24px;
}

body.character-view #profile .character-paper {
  min-height: 690px;
  padding: 0;
  border: 1px solid rgba(202, 177, 217, 0.48);
  border-radius: 3px;
  box-shadow: inset 0 -42px 62px rgba(20, 8, 4, 0.62);
}

body.character-view #profile .portrait-card .portrait-caption {
  left: 16px;
  right: 16px;
  bottom: 26px;
  padding: 14px 8px 8px;
  background: linear-gradient(transparent, rgba(6, 4, 12, 0.9));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.character-view #profile .stats {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 0;
}

body.character-view #profile .stats .skill-row[data-stat-row] {
  grid-column: 1;
  grid-row: auto;
}

body[class*="theme-"].character-view #profile .stats .skill-row,
body[class*="theme-"].character-view #profile .stats .skill-row.primary-stat {
  min-height: 66px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(202, 177, 217, 0.25);
  border-radius: 0;
  box-shadow: none;
}

body.character-view #profile .character-seal-summary {
  padding-top: 16px;
}

body.character-view #profile .active-seal-passive {
  background: rgba(8, 7, 16, 0.5);
  border-left: 1px solid rgba(183, 138, 208, 0.58);
}

body.character-view #profile .gold-strip {
  border-top: 1px solid rgba(202, 177, 217, 0.25);
}

body[class*="theme-"].character-view #profile .gold-resource {
  padding: 10px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

@media (max-width: 700px) {
  body.character-view #profile .character-paper {
    min-height: 520px;
  }
}

body.inventory-view .action-panel:has(#actions.inventory-stage) {
  width: min(100%, 1100px);
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.inventory-view .action-panel #actions.inventory-stage {
  margin-top: 0;
  padding: 0;
  overflow: visible;
}

#actions.inventory-stage .inventory-subnav {
  display: flex;
  gap: 22px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(228, 201, 159, 0.38);
  border-radius: 0;
}

body[class*="theme-"] #actions.inventory-stage .inventory-subnav button {
  min-width: 88px;
  min-height: 44px;
  padding: 8px 4px 10px;
  color: #d7c9df;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
}

body[class*="theme-"] #actions.inventory-stage .inventory-subnav button.active {
  color: #fff4d6;
  border-bottom-color: #d5a960;
}

#actions.inventory-stage .inventory-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  align-items: start;
  gap: 22px;
  margin-top: 16px;
}

body[class*="theme-"] #actions.inventory-stage .inventory-view-panel,
body[class*="theme-"] #actions.inventory-stage .inventory-view-panel:hover,
body[class*="theme-"] #actions.inventory-stage .inventory-view-panel:focus-within {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#actions.inventory-stage .equipment-character-board {
  height: clamp(500px, 65vh, 590px);
  margin: 0;
  border-color: rgba(203, 177, 215, 0.5);
  border-radius: 3px;
}

#actions.inventory-stage .equipment-body-slot small {
  overflow: visible;
  font-size: 8px;
  text-overflow: clip;
  white-space: normal;
}

#actions.inventory-stage .equipment-bag-panel {
  display: flex;
  flex-direction: column;
  min-height: clamp(500px, 65vh, 590px);
  padding: 4px 0 0 22px !important;
  border-left: 1px solid rgba(203, 177, 215, 0.36) !important;
}

.inventory-hero-summary {
  padding-bottom: 21px;
  border-bottom: 1px solid rgba(228, 201, 159, 0.28);
}

.inventory-hero-summary > span {
  color: #d4a76f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-hero-summary h2 {
  margin: 3px 0 0;
  color: #fff1d5;
  font-size: 30px;
  line-height: 1.1;
}

.inventory-hero-summary p {
  margin: 4px 0 0;
  color: #d5c6df;
  font-size: 14px;
}

#actions.inventory-stage .inventory-view-head {
  align-items: center;
  margin: 22px 0 14px;
}

#actions.inventory-stage .inventory-view-head h3,
#actions.inventory-stage .inventory-attributes h3 {
  margin: 0;
  color: #fff1d5;
  font-size: 18px;
}

#actions.inventory-stage .inventory-view-head strong {
  min-width: 0;
  padding: 0;
  color: #d7b474;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#actions.inventory-stage .inventory-view-panel .equipment-bag-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#actions.inventory-stage .equipment-bag-grid .inventory-slot {
  width: 100%;
  max-width: none;
  border-radius: 3px;
}

#actions.inventory-stage .equipment-bag-grid .inventory-slot.empty {
  opacity: 0.72;
  background: rgba(7, 8, 14, 0.72);
  border: 1px solid rgba(174, 147, 189, 0.42);
}

#actions.inventory-stage .inventory-attributes {
  margin-top: 27px;
  padding-top: 19px;
  border-top: 1px solid rgba(228, 201, 159, 0.28);
}

#actions.inventory-stage .inventory-attributes .character-board-stats {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 8px 0 0;
  transform: none;
}

#actions.inventory-stage .inventory-attributes .character-board-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(203, 177, 215, 0.18);
}

#actions.inventory-stage .inventory-attributes .character-board-stats dt {
  color: #cab4d7;
  font-size: 11px;
}

#actions.inventory-stage .inventory-attributes .character-board-stats dd {
  font-size: 19px;
}

#actions.inventory-stage .inventory-layout.seal-only {
  grid-template-columns: 1fr;
}

#actions.inventory-stage .seal-view-panel {
  padding-top: 3px;
}

@media (max-width: 820px) {
  #actions.inventory-stage .inventory-layout {
    grid-template-columns: 1fr;
  }

  #actions.inventory-stage .equipment-bag-panel {
    min-height: 0;
    padding: 18px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(203, 177, 215, 0.36) !important;
  }
}

body.dungeon-view .dungeon-stage,
body.dungeon-view .dungeon-stage:has(> .dungeon-retry-countdown) {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  gap: 8px;
}

.dungeon-map-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  background: #070a10;
  box-shadow: none;
}

.dungeon-map {
  position: relative;
  width: 100%;
  min-width: 800px;
  aspect-ratio: 1672 / 939;
  background: url("assets/dungeons/dungeon-world-map-v1.png") center / cover no-repeat;
  isolation: isolate;
}

body[class*="theme-"].dungeon-view .dungeon-map-marker {
  position: absolute;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: stretch;
  width: 112px;
  height: 104px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  color: #fff2cf;
  text-align: center;
  background: #0a0910;
  border: 2px solid #cba76d;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #170a09, 0 5px 14px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%);
  z-index: 1;
}

body[class*="theme-"].dungeon-view .dungeon-map-marker:hover,
body[class*="theme-"].dungeon-view .dungeon-map-marker:focus-visible,
body[class*="theme-"].dungeon-view .dungeon-map-marker.active {
  z-index: 3;
  background: #0a0910;
  border-color: #f5dfaa;
  box-shadow: 0 0 0 2px #170a09, 0 7px 19px rgba(0, 0, 0, 0.9), 0 0 18px rgba(214, 161, 255, 0.8);
  transform: translate(-50%, -50%) scale(1.06);
}

body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-hard {
  border-color: #c7444b;
  box-shadow: 0 0 0 2px #2a090e, 0 5px 14px rgba(0, 0, 0, 0.8);
}

body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-hard:hover,
body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-hard:focus-visible,
body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-hard.active {
  border-color: #f26b70;
  box-shadow: 0 0 0 2px #2a090e, 0 7px 19px rgba(0, 0, 0, 0.9), 0 0 18px rgba(221, 56, 67, 0.8);
}

body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-mythic {
  border-color: #09070e;
  box-shadow: 0 0 0 1px #baa9c9, 0 0 0 3px #09070e, 0 5px 14px rgba(0, 0, 0, 0.8);
}

body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-mythic:hover,
body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-mythic:focus-visible,
body[class*="theme-"].dungeon-view .dungeon-map-marker.mode-mythic.active {
  border-color: #09070e;
  box-shadow: 0 0 0 1px #e1cdee, 0 0 0 3px #09070e, 0 7px 19px rgba(0, 0, 0, 0.9), 0 0 18px rgba(171, 103, 200, 0.8);
}

.dungeon-map-marker:focus-visible {
  outline: 2px solid #a9dcff;
  outline-offset: 3px;
  border-radius: 4px;
}

body[class*="theme-"].dungeon-view .dungeon-map-marker:active {
  transform: translate(-50%, -50%) scale(1.03);
}

.dungeon-map-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.dungeon-map-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent 38%, rgba(0, 0, 0, 0.16) 55%, rgba(0, 0, 0, 0.72));
  pointer-events: none;
}

.dungeon-map-progress,
.dungeon-map-name,
.dungeon-map-level {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  padding: 2px 4px;
  color: #fff4d8;
  text-shadow: 0 1px 2px #000, 0 2px 5px #000;
}

.dungeon-map-progress {
  justify-self: stretch;
  color: #ffe3a6;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.dungeon-map-name {
  grid-row: 3;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dungeon-map-level {
  grid-row: 4;
  color: #ffe0a1;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.dungeon-map-marker.is-locked .dungeon-map-cover {
  filter: grayscale(0.5) brightness(0.7);
}

.dungeon-map-marker.is-locked .dungeon-map-name,
.dungeon-map-marker.is-locked .dungeon-map-level {
  color: #d8d7d9;
}

.dungeon-map-marker.key-unlocked {
  animation: dungeonDoorUnlock 2.2s ease-out both;
}

.dungeon-map-info {
  position: absolute;
  z-index: 5;
  top: 26px;
  right: 14px;
  bottom: 14px;
  width: min(410px, 44%);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #c9a363;
  border-radius: 6px;
  background: rgba(14, 9, 18, 0.98);
  box-shadow: 0 0 0 2px #1a0b09, 0 14px 38px rgba(0, 0, 0, 0.75);
}

.dungeon-map-info.mode-hard {
  border-color: #c7444b;
  box-shadow: 0 0 0 2px #2a090e, 0 14px 38px rgba(0, 0, 0, 0.75);
}

.dungeon-map-info.mode-mythic {
  border-color: #09070e;
  box-shadow: 0 0 0 1px #baa9c9, 0 0 0 3px #09070e, 0 14px 38px rgba(0, 0, 0, 0.75);
}

.dungeon-map-info.on-left {
  right: auto;
  left: 14px;
}

.dungeon-info-close {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 9px;
  width: 34px;
  height: 32px;
  padding: 0;
  font: 26px/1 Georgia, serif;
}

body.dungeon-view .dungeon-map-info .dungeon-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body.dungeon-view .dungeon-map-info .dungeon-detail.dungeon-boss-stage {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0b0810;
  box-shadow: none;
}

.dungeon-boss-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dungeon-boss-rewards {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: calc(100% - 70px);
  filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 5px #000);
}

.dungeon-boss-rewards .reward-display-gold-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.dungeon-boss-rewards .reward-display-entry strong {
  font-size: 16px;
}

.dungeon-boss-footer {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 76px 14px 14px;
  background: linear-gradient(transparent, rgba(8, 5, 13, 0.9) 54%, #08050d);
}

.dungeon-boss-footer h3 {
  margin: 0 0 10px;
  color: #fff0c7;
  font-size: 22px;
  line-height: 1.08;
  text-shadow: 0 2px 5px #000;
}

.dungeon-boss-level {
  display: inline-block;
  color: #f5d99d;
  font-size: 15px;
  white-space: nowrap;
}

.dungeon-boss-footer p {
  margin: 0 0 12px;
  color: #e6d9da;
  font-size: 13px;
  line-height: 1.25;
  text-shadow: 0 2px 4px #000;
}

body.dungeon-view .dungeon-map-info .dungeon-boss-footer .dungeon-start-button {
  width: 100%;
  min-width: 0;
}

body.dungeon-view .dungeon-map-info .dungeon-detail::before {
  display: none;
}

body.dungeon-view .dungeon-map-info .dungeon-preview-art {
  flex: 0 0 auto;
  min-height: 0;
  height: 126px;
  background-size: cover;
}

body.dungeon-view .dungeon-map-info .dungeon-preview-copy {
  padding: 4px 2px 0;
}

body.dungeon-view .dungeon-map-info .dungeon-preview-copy h3 {
  font-size: 25px;
}

body.dungeon-view .dungeon-map-info .dungeon-preview-copy p {
  font-size: 13px;
}

body.dungeon-view .dungeon-map-info .dungeon-preview-copy dd {
  font-size: 15px;
}

body.dungeon-view .dungeon-map-info .dungeon-start-button {
  width: 100%;
  min-width: 0;
}

@media (max-width: 800px) {
  .dungeon-map {
    min-width: 800px;
  }

  .dungeon-map-info {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    height: min(74vh, 680px);
    max-height: min(74vh, 680px);
  }

  .dungeon-map-info.on-left {
    right: 8px;
    left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dungeon-map-marker.key-unlocked { animation: none; }
}

body.tavern-view .scene,
body.tavern-view .action-panel > #viewLabel,
body.tavern-view .action-panel > #viewTitle,
body.tavern-view .action-panel > #viewText {
  display: none;
}

body.tavern-view .action-panel:has(.tavern-room) {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.tavern-view .action-panel #actions {
  margin-top: 0;
}

.tavern-room {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #170e0b;
  box-shadow: none;
}

.tavern-stage {
  position: relative;
  aspect-ratio: 1704 / 940;
  overflow: hidden;
  isolation: isolate;
}

.tavern-stage-art,
.tavern-stage-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tavern-stage-art {
  background: url("assets/tavern/tavern-interior-hub.png") center / cover no-repeat;
}

.tavern-stage-shade {
  background: linear-gradient(0deg, rgba(8, 4, 3, 0.52), transparent 31%);
}

body.tavern-view .tavern-hotspot {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 0;
  padding: 0 5px 12px;
  color: #fff0c8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  text-shadow: 0 2px 4px #080403, 0 0 10px #080403;
}

body.tavern-view .tavern-hotspot:hover,
body.tavern-view .tavern-hotspot:focus-visible {
  background: linear-gradient(180deg, transparent 40%, rgba(239, 171, 66, 0.2));
  border-color: rgba(255, 210, 125, 0.76);
  box-shadow: inset 0 0 20px rgba(255, 208, 106, 0.16), 0 0 16px rgba(255, 188, 84, 0.48);
  outline: none;
  filter: none;
}

body.tavern-view .tavern-hotspot:active {
  transform: none;
  box-shadow: inset 0 0 24px rgba(255, 208, 106, 0.24);
}

.tavern-hotspot span {
  display: block;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(245, 200, 116, 0.62);
  border-radius: 5px;
  background: rgba(17, 8, 5, 0.78);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.tavern-hotspot.ranger { left: 0.5%; top: 24%; width: 21%; height: 55%; }
.tavern-hotspot.cartographer { left: 24%; top: 25%; width: 22%; height: 52%; }
.tavern-hotspot.merchant { left: 48%; top: 27%; width: 21%; height: 50%; }
.tavern-hotspot.barkeeper { left: 74%; top: 12%; width: 25%; height: 66%; }
.tavern-hotspot.blackjack { left: 36%; top: 80%; width: 28%; height: 17%; }

.tavern-room:not(.tavern-room-hub) .tavern-hotspot {
  visibility: hidden;
  pointer-events: none;
}

.tavern-room-footer {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 42px;
  align-items: end;
  gap: 14px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(202, 148, 68, 0.5);
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.35), rgba(10, 6, 4, 0.64)), url("assets/tavern/tavern-al-panel-v1.png") center / cover no-repeat, #130b08;
}

.tavern-room-footer .adventure-meter {
  min-width: 0;
}

.tavern-reserve {
  display: grid;
  grid-template-rows: 13px 26px;
  align-content: end;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  color: #ffe2a5;
  text-shadow: 0 1px 4px #080403;
  white-space: nowrap;
}

.tavern-reserve strong { align-self: center; font-size: 17px; line-height: 1; }
.tavern-reserve small { color: #ffd48a; font-size: 11px; font-weight: 900; line-height: 13px; text-transform: uppercase; }

body.tavern-view .tavern-refill-trigger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 36px;
  min-height: 0;
  padding: 0;
  color: var(--theme-button-ink, #fff0bd);
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--theme-border, #d69a4a);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--theme-button-top, #8d5527), var(--theme-button-bottom, #241208) 72%, var(--theme-deep, #140906));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 var(--theme-deep, #140906), 0 0 10px var(--theme-glow, rgba(214, 154, 74, 0.25));
}

body.tavern-view .tavern-refill-trigger:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 3px 0 var(--theme-deep, #140906), 0 0 15px var(--theme-glow, rgba(214, 154, 74, 0.32));
}

body.tavern-view .tavern-refill-trigger:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 0 var(--theme-deep, #140906);
}

body.tavern-view .tavern-refill-trigger:focus-visible {
  outline: 2px solid var(--theme-accent, #ffd98d);
  outline-offset: 2px;
}

body.tavern-view .tavern-refill-trigger:disabled {
  cursor: default;
  opacity: 0.55;
}

.tavern-dialog {
  position: absolute;
  z-index: 5;
  top: 4%;
  right: 3%;
  bottom: 82px;
  left: 3%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(14px, 2vw, 26px);
  color: #f9ecd3;
  border: 2px solid rgba(234, 186, 94, 0.8);
  border-radius: 7px;
  background: rgba(17, 10, 12, 0.87);
  box-shadow: 0 15px 36px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 221, 146, 0.12);
  backdrop-filter: blur(4px);
}

.tavern-dialog-heading {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 112px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(240, 193, 102, 0.33);
}

.tavern-giver-portrait {
  width: 100px;
  height: 100px;
  border: 2px solid #d19b56;
  border-radius: 4px;
  background-image: url("assets/tavern/tavern-interior-hub.png");
  background-size: 500% auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.56);
}

.tavern-giver-portrait.ranger { background-position: 0% 39%; }
.tavern-giver-portrait.cartographer { background-position: 31% 39%; }
.tavern-giver-portrait.merchant { background-position: 62% 40%; }
.tavern-giver-portrait.barkeeper { background-position: 100% 21%; }

.tavern-dialog-kicker {
  color: #d8ad69;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.action-panel .tavern-dialog h2 {
  margin: 2px 0 4px;
  color: #fff4d1;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.1;
}

.tavern-dialog-heading p {
  color: #dac3a0;
  font-size: 13px;
}

.tavern-dialog-heading .tavern-giver-perk {
  color: #f1c57c;
  font-weight: 800;
}

.tavern-dialog-content {
  display: grid;
  grid-template-columns: minmax(235px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  flex: 1;
  min-height: 0;
  padding-top: 16px;
}

.tavern-offer-list {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

body.tavern-view .tavern-offer-choice {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 8px 11px;
  color: #f1dfbe;
  text-align: left;
  border: 1px solid rgba(213, 169, 93, 0.42);
  border-radius: 5px;
  background: rgba(67, 36, 28, 0.66);
  box-shadow: none;
}

body.tavern-view .tavern-offer-choice:hover,
body.tavern-view .tavern-offer-choice:focus-visible,
body.tavern-view .tavern-offer-choice.active {
  color: #fff7dc;
  border-color: #e9b967;
  background: rgba(113, 59, 35, 0.82);
  box-shadow: inset 3px 0 #f0ba64, 0 0 12px rgba(231, 171, 82, 0.2);
  outline: none;
}

body.tavern-view .tavern-offer-choice:active { transform: none; }
.tavern-offer-choice small { color: #dcab64; }
.tavern-offer-choice strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.tavern-offer-choice span { color: #d7b987; font-size: 12px; white-space: nowrap; }

.tavern-offer-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px;
  border-left: 1px solid rgba(237, 189, 105, 0.24);
}

.tavern-offer-detail h3 {
  margin: 3px 0 9px;
  color: #fff3d0;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.12;
}

.tavern-offer-detail p { color: #e4d3b9; font-size: 13px; line-height: 1.35; }
.tavern-offer-rewards { margin-top: 16px; padding: 10px 0; border-top: 1px solid rgba(237, 189, 105, 0.28); border-bottom: 1px solid rgba(237, 189, 105, 0.28); }
.tavern-offer-rewards .reward-display { justify-content: flex-start; flex-wrap: wrap; }
.tavern-offer-rewards .reward-display-entry strong { font-size: clamp(16px, 2vw, 23px); }
.tavern-offer-cost { margin: 10px 0 12px; color: #e8c481; font-size: 13px; font-weight: 900; }
.tavern-offer-detail .tavern-accept { align-self: flex-start; min-width: 145px; }
.tavern-offer-empty { display: grid; place-content: center; height: 100%; color: #d8bb8c; text-align: center; }
.tavern-offer-empty span { font-size: 42px; line-height: 1; }
.tavern-shortage { display: block; margin-top: 8px; color: #e4ad99; }

.tavern-dialog-bottom { display: flex; justify-content: flex-end; padding-top: 12px; }
.tavern-dialog .tavern-back { min-width: 130px; }

.tavern-barkeeper-dialog {
  top: 13%;
  bottom: auto;
  left: 50%;
  width: min(460px, 90%);
  transform: translateX(-50%);
}

.tavern-refill-dialog {
  top: 13%;
  bottom: auto;
  left: 50%;
  width: min(460px, 90%);
  transform: translateX(-50%);
}

.tavern-refill-balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(240, 193, 102, 0.33);
}

.tavern-refill-balances span {
  display: grid;
  gap: 3px;
  color: #d8ad69;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tavern-refill-balances strong { color: #fff4d1; font-size: 18px; white-space: nowrap; }

.tavern-refill-picker {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

body.tavern-view .tavern-refill-picker button { min-width: 0; padding: 8px 4px; }

.tavern-refill-picker output {
  min-width: 0;
  color: #fff4d1;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.tavern-refill-preview { margin: 14px 0 0; color: #ffe2a5; font-weight: 900; text-align: center; }
.tavern-refill-note { margin: 14px 0; color: #d8c5a5; font-size: 12px; line-height: 1.35; }

.tavern-barkeeper-dialog .tavern-dialog-heading { grid-template-columns: 84px minmax(0, 1fr); min-height: 86px; }
.tavern-barkeeper-dialog .tavern-giver-portrait { width: 80px; height: 80px; }
.tavern-barkeeper-copy { margin: 16px 0; color: #e8d2ae; line-height: 1.35; }
.tavern-barkeeper-actions { display: flex; justify-content: flex-end; gap: 9px; }
.tavern-barkeeper-actions button { min-width: 0; }
.tavern-dialog button:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 850px) {
  .tavern-room { display: flex; flex-direction: column; }
  .tavern-stage { order: 0; }
  .tavern-dialog { order: 1; }
  .tavern-room-footer { order: 2; }
  .tavern-hotspot { padding-bottom: 5px; }
  .tavern-hotspot span { padding: 3px 4px; font-size: 10px; }
  .tavern-dialog { position: relative; inset: auto; margin: 0; padding: 14px; border-right: 0; border-left: 0; border-radius: 0; backdrop-filter: none; }
  .tavern-dialog-heading { grid-template-columns: 76px minmax(0, 1fr); min-height: 82px; gap: 10px; }
  .tavern-giver-portrait { width: 72px; height: 72px; }
  .tavern-dialog-content { grid-template-columns: 1fr; gap: 10px; padding-top: 12px; }
  .tavern-offer-list { grid-template-rows: none; }
  .tavern-offer-choice { min-height: 52px; }
  .tavern-offer-detail { min-height: 155px; padding: 12px 0; border-left: 0; border-top: 1px solid rgba(237, 189, 105, 0.24); }
  .tavern-barkeeper-dialog { left: auto; width: 100%; transform: none; }
  .tavern-refill-dialog { left: auto; width: 100%; transform: none; }
  .tavern-barkeeper-dialog .tavern-dialog-heading { grid-template-columns: 76px minmax(0, 1fr); }
  .tavern-barkeeper-dialog .tavern-giver-portrait { width: 72px; height: 72px; }
}

@media (max-width: 520px) {
  .tavern-hotspot span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
  .tavern-room-footer { grid-template-columns: 72px minmax(0, 1fr) 36px; gap: 6px; padding: 9px 8px 13px; }
  .tavern-reserve strong { font-size: 12px; }
  .tavern-reserve small { font-size: 9px; }
  body.tavern-view .tavern-refill-trigger { width: 36px; }
  .tavern-refill-balances { gap: 8px; }
  .tavern-refill-balances strong { font-size: 15px; }
  .tavern-refill-picker { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 6px; }
  .tavern-refill-picker output { font-size: 21px; }
  .tavern-offer-rewards .reward-display { gap: 7px; }
}

.fight-loot-key {
  padding: 5px 10px;
  color: #fff1bf;
  background: rgba(41, 27, 11, 0.82);
  border: 1px solid rgba(255, 209, 108, 0.72);
  border-radius: 5px;
  box-shadow: 0 0 18px rgba(250, 181, 70, 0.24);
}

.fight-loot-key img {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  filter: drop-shadow(0 0 10px rgba(255, 207, 95, 0.82));
}

.fight-loot-key strong { font-size: 14px; }

.key-discovery {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 24px;
  overflow: auto;
  color: #fff5d9;
  background: linear-gradient(145deg, #251828, #10131d 66%, #10201c);
  border: 2px solid #e7ba67;
  border-radius: 7px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8), 0 0 36px rgba(235, 181, 76, 0.32);
  text-align: center;
}

.key-discovery::backdrop { background: rgba(4, 5, 10, 0.82); }

.key-discovery-art {
  display: grid;
  place-items: center;
  min-height: 140px;
}

.key-discovery-art img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 203, 105, 0.75));
  animation: keyFoundRise 1.5s ease-out both;
}

.key-discovery-copy > span {
  color: #f2cd83;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.key-discovery-copy h3 {
  margin: 6px 0;
  color: #fff1c3;
  font-size: 27px;
  line-height: 1.1;
}

.key-discovery-copy p {
  margin: 0;
  color: #d6e7df;
}

.key-discovery-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.key-discovery-actions button { min-height: 40px; }
.key-discovery-later { background: #19151e; }
.key-discovery-open {
  color: #211406;
  background: linear-gradient(#ffe1a0, #d69b43);
  border-color: #ffdf9a;
}

body.dungeon-view .dungeon-door.key-unlocked {
  animation: dungeonDoorUnlock 2.2s ease-out both;
}

body.dungeon-view .dungeon-detail.key-unlocked {
  animation: dungeonDetailUnlock 2.2s ease-out both;
}

@keyframes keyFoundRise {
  from { opacity: 0; transform: translateY(24px) scale(0.7) rotate(-15deg); }
  65% { opacity: 1; transform: translateY(-7px) scale(1.08) rotate(3deg); }
  to { opacity: 1; transform: none; }
}

@keyframes dungeonDoorUnlock {
  0% { filter: brightness(0.55); box-shadow: 0 0 0 rgba(255, 215, 124, 0); }
  40% { filter: brightness(1.6); box-shadow: 0 0 28px rgba(255, 215, 124, 0.88); }
  100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 215, 124, 0); }
}

@keyframes dungeonDetailUnlock {
  0% { filter: brightness(0.7); }
  45% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .key-discovery-art img,
  body.dungeon-view .dungeon-door.key-unlocked,
  body.dungeon-view .dungeon-detail.key-unlocked { animation: none; }
}

@media (max-width: 520px) {
  .key-discovery { padding: 18px; }
  .key-discovery-copy h3 { font-size: 22px; }
  .key-discovery-actions { flex-direction: column-reverse; }
  .key-discovery-actions button { width: 100%; }
}

.character-preview {
  margin-top: 14px;
  padding: 14px;
  color: #fff3c1;
  background:
    linear-gradient(rgba(39, 19, 10, 0.86), rgba(39, 19, 10, 0.92)),
    #2b1710;
  border: 2px solid #1a0d07;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 158, 0.16);
}

.character-preview strong,
.character-preview span {
  display: block;
}

.character-preview strong {
  font-size: 20px;
  line-height: 1.15;
}

.character-preview span {
  margin-top: 5px;
  color: #edc783;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.character-preview p {
  display: none;
}

.login-panel .character-preview {
  margin-bottom: 18px;
}

.profile-panel {
  position: relative;
  --inventory-drawer-top: 118px;
  --inventory-drawer-width: 244px;
  --inventory-tab-width: 34px;
  overflow: visible;
  text-align: center;
}

.profile-panel > :not(.inventory-panel) {
  position: relative;
  z-index: 2;
}

.character-header {
  position: relative;
  margin-top: 10px;
  padding: 9px 8px 10px;
  background: rgba(20, 9, 4, 0.18);
  border: 2px solid rgba(69, 35, 15, 0.35);
  border-radius: 7px;
}

.character-header h2 {
  font-size: 24px;
}

.character-header p {
  margin-top: 4px;
  color: #6e391b;
  font-weight: 900;
}

.character-header.level-pop h2,
.portrait-caption.level-pop h2 {
  animation: levelNamePulse 900ms ease-out;
}

.level-burst {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 5;
  padding: 5px 12px;
  color: #fff7cf;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 231, 108, 0.95), transparent 52%),
    linear-gradient(135deg, #8649ff, #1b0934);
  border: 2px solid rgba(255, 228, 122, 0.88);
  border-radius: 999px;
  box-shadow: 0 0 22px rgba(179, 111, 255, 0.75), 0 0 34px rgba(255, 211, 95, 0.38);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
  text-shadow: 0 1px 0 #120704;
  transform: translateX(-50%);
  animation: levelBurst 1450ms ease-out forwards;
}

.portrait-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.portrait-caption h2,
.portrait-caption p {
  margin: 0;
}

.portrait-caption h2 {
  color: #fff7d9;
  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(9, 3, 2, 0.8);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-caption p {
  color: #d2a7ff;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(10px, 3.2vw, 12px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-paper {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr 62px;
  gap: 8px;
  align-items: center;
  margin-top: 0;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 244, 192, 0.76), rgba(145, 85, 41, 0.18) 68%),
    rgba(88, 47, 24, 0.14);
  border: 3px solid rgba(44, 23, 11, 0.72);
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(72, 35, 14, 0.22);
}

.character-paper.portrait-card {
  min-height: 310px;
  overflow: hidden;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(16, 8, 5, 0.04), rgba(16, 8, 5, 0.52)),
    url("assets/alex-voidflame.png") center 18% / cover no-repeat,
    #1b0e09;
  box-shadow:
    inset 0 0 0 2px rgba(255, 220, 120, 0.13),
    inset 0 -42px 62px rgba(20, 8, 4, 0.62),
    0 8px 18px rgba(30, 12, 5, 0.28);
}

.equipment-column {
  display: grid;
  gap: 6px;
}

.portrait-card .equipment-column,
.portrait-card .weapon-row {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.portrait-card .equipment-column:first-child {
  transform: translateX(-22px);
}

.portrait-card .equipment-column:nth-of-type(3) {
  transform: translateX(22px);
}

.portrait-card .weapon-row {
  transform: translateY(18px);
}

.portrait-card:hover .equipment-column,
.portrait-card:hover .weapon-row,
.portrait-card:focus-within .equipment-column,
.portrait-card:focus-within .weapon-row {
  opacity: 1;
  transform: translateY(0);
}

.portrait-card .equipment-column {
  align-self: center;
}

.portrait-card .equip-slot:not(.filled) {
  opacity: 0.74;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 226, 143, 0.1), transparent 58%),
    linear-gradient(145deg, rgba(67, 35, 19, 0.72), rgba(28, 14, 8, 0.78));
}

.equip-slot,
.inventory-slot {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 5px;
  color: #7b5a2c;
  background:
    linear-gradient(135deg, rgba(255, 244, 197, 0.8), rgba(167, 104, 47, 0.34)),
    #ead28b;
  border: 2px solid #4c2712;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 247, 203, 0.45), 0 3px 0 #5b3420;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.equip-slot {
  width: 54px;
  height: 48px;
  cursor: default;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 226, 143, 0.13), transparent 58%),
    linear-gradient(145deg, #432313, #1c0e08);
}

.equip-slot.is-hidden {
  display: none;
}

.equip-slot span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4dca0;
  font-size: 15px;
}

.slot-icon {
  position: relative;
  display: block;
}

.slot-icon::before,
.slot-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.helmet-icon::before {
  left: 5px;
  top: 4px;
  width: 18px;
  height: 16px;
  border: 3px solid #4c2712;
  border-bottom-width: 5px;
  border-radius: 14px 14px 4px 4px;
}

.helmet-icon::after {
  left: 8px;
  top: 14px;
  width: 12px;
  height: 3px;
  background: #4c2712;
}

.chest-icon::before {
  left: 6px;
  top: 4px;
  width: 16px;
  height: 20px;
  border: 3px solid #4c2712;
  border-radius: 5px 5px 8px 8px;
  clip-path: polygon(18% 0, 82% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
}

.hands-icon::before,
.hands-icon::after {
  top: 7px;
  width: 10px;
  height: 15px;
  border: 3px solid #4c2712;
  border-radius: 7px 7px 4px 4px;
}

.hands-icon::before {
  left: 4px;
  transform: rotate(-14deg);
}

.hands-icon::after {
  right: 4px;
  transform: rotate(14deg);
}

.boots-icon::before,
.boots-icon::after {
  bottom: 5px;
  width: 10px;
  height: 15px;
  border: 3px solid #4c2712;
  border-top-width: 5px;
  border-radius: 3px 3px 7px 7px;
}

.boots-icon::before {
  left: 4px;
}

.boots-icon::after {
  right: 4px;
}

.necklace-icon::before {
  left: 5px;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 3px solid #4c2712;
  border-top-color: transparent;
  border-radius: 50%;
}

.necklace-icon::after {
  left: 11px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4c2712;
}

.belt-icon::before {
  left: 4px;
  top: 11px;
  width: 20px;
  height: 7px;
  border: 3px solid #4c2712;
  border-radius: 3px;
}

.belt-icon::after {
  left: 10px;
  top: 9px;
  width: 8px;
  height: 11px;
  border: 2px solid #4c2712;
  background: rgba(255, 244, 197, 0.8);
}

.ring-icon::before {
  left: 6px;
  top: 7px;
  width: 16px;
  height: 16px;
  border: 4px solid #4c2712;
  border-radius: 50%;
}

.ring-icon::after {
  left: 11px;
  top: 3px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #4c2712;
}

.trinket-icon::before {
  left: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 3px solid #4c2712;
  border-radius: 3px;
}

.trinket-icon::after {
  left: 12px;
  top: 2px;
  width: 4px;
  height: 23px;
  background: #4c2712;
}

.mainhand-icon {
  transform: rotate(45deg);
}

.mainhand-icon::before {
  left: 12px;
  top: 2px;
  width: 5px;
  height: 20px;
  border-radius: 99px 99px 2px 2px;
  background: #4c2712;
}

.mainhand-icon::after {
  left: 7px;
  top: 18px;
  width: 15px;
  height: 5px;
  border-radius: 99px;
  background: #4c2712;
}

.offhand-icon::before {
  left: 6px;
  top: 4px;
  width: 16px;
  height: 21px;
  border: 3px solid #4c2712;
  border-radius: 10px 10px 8px 8px;
  clip-path: polygon(50% 0, 100% 18%, 86% 70%, 50% 100%, 14% 70%, 0 18%);
}

.slot-icon::before,
.slot-icon::after {
  border-color: #f4dca0;
}

.helmet-icon::after,
.necklace-icon::after,
.ring-icon::after,
.trinket-icon::after,
.mainhand-icon::before,
.mainhand-icon::after {
  background: #f4dca0;
}

.belt-icon::after {
  background: rgba(35, 16, 8, 0.9);
  border-color: #f4dca0;
}

.equip-slot:hover,
.inventory-slot:hover {
  filter: brightness(1.04);
}

.equip-slot:active,
.inventory-slot:active {
  transform: none;
}

.equip-slot.filled,
.inventory-slot.filled {
  color: #fff3c1;
  background:
    linear-gradient(135deg, rgba(116, 205, 255, 0.11), transparent 42%),
    radial-gradient(circle at 50% 30%, rgba(167, 90, 255, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(13, 20, 34, 0.94), rgba(4, 5, 12, 0.98));
  border-color: rgba(132, 190, 255, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(225, 240, 255, 0.08),
    inset 0 0 18px rgba(123, 66, 255, 0.12),
    0 0 10px rgba(87, 154, 255, 0.12);
}

.item-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 230, 150, 0.46);
  border-radius: 7px;
  background:
    radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--theme-accent, #ffd77c) 46%, transparent), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-mid, #6b4322) 74%, transparent), color-mix(in srgb, var(--theme-dark, #1b0c07) 92%, #000));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.32),
    0 2px 5px rgba(0, 0, 0, 0.34);
}

.item-icon.has-image {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(178, 106, 255, 0.18), transparent 58%),
    linear-gradient(145deg, rgba(14, 17, 27, 0.96), rgba(3, 4, 10, 0.98));
}

.item-icon.has-image img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.item-icon.has-sheet {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.item-icon > .item-sheet-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--item-sheet);
  background-position: var(--item-position);
  background-repeat: no-repeat;
  background-size: var(--item-sheet-size, 200% 200%);
  pointer-events: none;
}

.item-icon > .item-sheet-sprite[style*="class-sets/wave-2/"] {
  background-size: 400% 300%;
}

.item-icon.has-image i,
.item-icon.has-image::before,
.item-icon.has-image::after {
  display: none;
}

.item-rarity-epic {
  border-color: rgba(211, 151, 255, 0.74);
  background:
    radial-gradient(circle at 70% 28%, rgba(192, 90, 255, 0.62), transparent 24%),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #b26aff) 48%, #2b0f4a), #07030b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 255, 0.2),
    0 0 10px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 76%, transparent);
}

.item-icon i,
.item-icon::before,
.item-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.item-slot-weapon i {
  width: 5px;
  height: 24px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(90deg, #f7fbff, #8fb4c8 42%, #1e3c54);
  box-shadow: 0 0 8px rgba(159, 220, 255, 0.42);
  transform: rotate(42deg);
}

.item-slot-weapon::before {
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b1f10, #f0c76c, #3b1f10);
  transform: translateY(6px) rotate(42deg);
}

.item-slot-weapon::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17100c;
  transform: translate(8px, 10px);
}

.item-kind-bow i {
  width: 23px;
  height: 29px;
  border: 4px solid #e8f5ff;
  border-left-color: transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 8px rgba(230, 245, 255, 0.34);
  transform: rotate(8deg);
}

.item-kind-bow::before {
  width: 2px;
  height: 29px;
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(6px) rotate(8deg);
}

.item-kind-bow::after {
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: #d9f3ff;
  transform: rotate(-22deg);
}

.item-kind-staff i {
  width: 5px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(#f9fbff, #bfc7ff 42%, #372163);
  box-shadow: 0 0 9px rgba(190, 162, 255, 0.6);
  transform: rotate(24deg);
}

.item-kind-staff::before {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #cda8ff 46%, #5e23a2);
  box-shadow: 0 0 10px rgba(205, 168, 255, 0.76);
  transform: translate(6px, -10px);
}

.item-kind-staff::after {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: #eee3ff;
  transform: translate(2px, 7px) rotate(24deg);
}

.item-kind-shield i {
  width: 24px;
  height: 28px;
  background: linear-gradient(145deg, #d7d9ff, #554174 48%, #10071d);
  clip-path: polygon(50% 0, 92% 16%, 84% 68%, 50% 100%, 16% 68%, 8% 16%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 0 8px rgba(178, 106, 255, 0.44);
}

.equip-slot .item-icon {
  width: 38px;
  height: 38px;
}

.weapon-row .equip-slot .item-icon {
  width: 42px;
  height: 42px;
}

.item-slot-helmet i,
.item-slot-armor i {
  width: 23px;
  height: 25px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(145deg, #ced8d0, #53636b 48%, #1b2228);
  clip-path: polygon(50% 0, 94% 16%, 88% 72%, 50% 100%, 12% 72%, 6% 16%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.item-slot-hands i,
.item-slot-boots i,
.item-slot-belt i {
  width: 24px;
  height: 17px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(145deg, #6b4932, #1f120b);
  box-shadow: inset 0 0 0 2px rgba(242, 198, 103, 0.22);
}

.item-slot-necklace i {
  width: 24px;
  height: 24px;
  border: 4px solid #d6b15a;
  border-top-color: transparent;
  border-radius: 50%;
}

.item-slot-ring i {
  width: 21px;
  height: 21px;
  border: 5px solid #e5bf62;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(226, 191, 98, 0.52);
}

.item-slot-trinket i {
  width: 22px;
  height: 22px;
  background: linear-gradient(145deg, #b26aff, #31104e);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: 0 0 9px rgba(178, 106, 255, 0.6);
}

.item-fel-cleaver,
.item-void-glaive,
.item-chaos-staff,
.item-void-ring,
.item-endroad-relic,
.item-endroad-mantle {
  background:
    radial-gradient(circle at 70% 30%, rgba(169, 75, 255, 0.75), transparent 24%),
    linear-gradient(145deg, #42136b, #07030b);
}

.item-frostbrand,
.item-frostplate {
  background:
    radial-gradient(circle at 32% 24%, rgba(211, 250, 255, 0.8), transparent 20%),
    linear-gradient(145deg, #386c8e, #091827);
}

.item-bobar-club,
.item-bobar-charm {
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 239, 152, 0.74), transparent 20%),
    linear-gradient(145deg, #8a5120, #2a1005);
}

.equip-slot.can-equip {
  border-color: #67d6ff;
  box-shadow:
    inset 0 0 0 1px rgba(103, 214, 255, 0.5),
    0 0 16px rgba(103, 214, 255, 0.48);
}

.equip-slot small,
.inventory-slot span {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: #f4dca0;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-doll {
  min-width: 0;
}

.portrait-card .paper-doll {
  display: grid;
  align-content: end;
  min-height: 100%;
  pointer-events: none;
}

.portrait-card .portrait-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 1;
  padding: 6px 10px 7px;
  background: rgba(10, 5, 16, 0.68);
  border: 1px solid rgba(210, 167, 255, 0.26);
  border-radius: 7px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.28);
}

.weapon-row {
  display: grid;
  grid-template-columns: repeat(2, 62px);
  justify-content: center;
  gap: 10px;
  grid-column: 1 / -1;
  align-self: end;
  margin-top: -78px;
}

.weapon-row .equip-slot {
  width: 62px;
  height: 52px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 112px;
  margin: 0 auto 12px;
  border-radius: 999px 999px 12px 12px;
  color: #fff3be;
  background:
    radial-gradient(circle at 50% 20%, #e3a66b 0 18%, transparent 19%),
    linear-gradient(90deg, #2f648e 0 50%, #b7392a 50%),
    radial-gradient(circle at 35% 25%, #d77a4d, #6d2e22 68%);
  border: 4px solid #211009;
  font-size: 40px;
  font-weight: 900;
}

.avatar.alex-portrait,
.avatar.chris-portrait,
.avatar.lena-portrait,
.avatar.max-portrait,
.avatar.marco-portrait,
.avatar.tobias-portrait,
.avatar.norman-portrait,
.avatar.bambi-portrait {
  overflow: hidden;
  color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 220, 126, 0.08), rgba(8, 20, 36, 0.28)),
    url("assets/alex-voidflame.png") center / cover no-repeat;
  border-color: #120905;
  box-shadow:
    inset 0 0 0 2px rgba(255, 224, 132, 0.22),
    0 0 20px rgba(89, 159, 221, 0.25);
}

.avatar.chris-portrait {
  background:
    linear-gradient(180deg, rgba(120, 255, 74, 0.08), rgba(3, 12, 5, 0.34)),
    url("assets/chris-warlock.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(140, 255, 90, 0.22),
    0 0 20px rgba(123, 255, 72, 0.24);
}

.avatar.lena-portrait {
  background:
    linear-gradient(180deg, rgba(209, 123, 102, 0.08), rgba(16, 6, 6, 0.34)),
    url("assets/lena-arena.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(209, 123, 102, 0.22),
    0 0 20px rgba(209, 123, 102, 0.22);
}

.avatar.max-portrait {
  background:
    linear-gradient(180deg, rgba(226, 201, 107, 0.08), rgba(8, 16, 8, 0.32)),
    url("assets/max-naturemonk.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(226, 201, 107, 0.22),
    0 0 20px rgba(93, 225, 154, 0.2);
}

.avatar.marco-portrait {
  background:
    linear-gradient(180deg, rgba(180, 108, 255, 0.08), rgba(5, 3, 9, 0.34)),
    url("assets/marco-voidblade.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(180, 108, 255, 0.22),
    0 0 20px rgba(180, 108, 255, 0.24);
}

.avatar.tobias-portrait {
  background:
    linear-gradient(180deg, rgba(115, 220, 255, 0.08), rgba(3, 8, 20, 0.34)),
    url("assets/tobias-storm.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(115, 220, 255, 0.22),
    0 0 20px rgba(96, 200, 255, 0.24);
}

.avatar.norman-portrait {
  background:
    linear-gradient(180deg, rgba(155, 181, 200, 0.08), rgba(7, 16, 24, 0.34)),
    url("assets/norman-harbor.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(155, 181, 200, 0.22),
    0 0 20px rgba(155, 181, 200, 0.2);
}

.avatar.bambi-portrait {
  background:
    linear-gradient(180deg, rgba(184, 190, 174, 0.08), rgba(8, 11, 9, 0.34)),
    url("assets/bambi-rain.png") center / cover no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(184, 190, 174, 0.22),
    0 0 20px rgba(184, 190, 174, 0.18);
}

.portrait-card .avatar.alex-portrait,
.portrait-card .avatar.chris-portrait,
.portrait-card .avatar.lena-portrait,
.portrait-card .avatar.max-portrait,
.portrait-card .avatar.marco-portrait,
.portrait-card .avatar.tobias-portrait,
.portrait-card .avatar.norman-portrait,
.portrait-card .avatar.bambi-portrait {
  width: 100%;
  height: 100%;
  min-height: 218px;
  margin: 0;
  opacity: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.resource-strip {
  display: grid;
  grid-template-columns: 88px;
  gap: 9px;
  margin-top: 12px;
}

.gold-strip {
  grid-template-columns: 1fr;
  margin-top: 12px;
}

.gold-strip .gold-resource {
  justify-content: center;
  min-height: 42px;
}

.gold-strip .gold-resource strong {
  font-size: 22px;
}

.character-screen {
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(280px, 0.85fr);
  grid-template-areas:
    "portrait stats"
    "portrait passives"
    "portrait gold";
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: stretch;
  min-height: calc(100vh - 28px);
  margin-top: 0;
  padding: 12px;
  text-align: left;
}

.character-screen .character-paper {
  grid-area: portrait;
  grid-template-columns: 1fr;
  min-height: 660px;
}

.character-screen .paper-doll {
  grid-column: 1;
}

.character-screen .portrait-card .equipment-column,
.character-screen .portrait-card .weapon-row {
  opacity: 1;
  transform: none;
}

.character-screen .portrait-card .weapon-row {
  position: absolute;
  left: 50%;
  bottom: 88px;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
}

.character-screen .stats {
  grid-area: stats;
  align-self: start;
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(64px, auto));
  gap: 8px;
}

.character-screen .stats .skill-row {
  min-height: 64px;
  padding: 9px 10px;
}

.character-screen .stats .skill-row[data-stat-row="strength"] {
  grid-column: 1;
  grid-row: 1;
}

.character-screen .stats .skill-row[data-stat-row="dexterity"] {
  grid-column: 1;
  grid-row: 2;
}

.character-screen .stats .skill-row[data-stat-row="intelligence"] {
  grid-column: 1;
  grid-row: 3;
}

.character-screen .stats .skill-row[data-stat-row="endurance"] {
  grid-column: 2;
  grid-row: 1;
}

.character-screen .stats .skill-row[data-stat-row="luck"] {
  grid-column: 2;
  grid-row: 2;
}

.character-seal-summary {
  grid-area: passives;
  min-width: 0;
  align-self: start;
  padding: 2px 0;
}

.character-seal-summary > header {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.character-seal-summary > header span {
  color: var(--theme-accent, #ffd67d);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.character-seal-summary > header h3 {
  margin: 0;
  color: #fff4d0;
  font-size: 15px;
  line-height: 1;
}

.active-seal-passives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 264px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.active-seal-passive {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 46px;
  padding: 6px 8px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(17, 8, 24, 0.78), rgba(4, 8, 13, 0.72));
  border-left: 2px solid var(--theme-accent, #ffd67d);
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.06);
}

.active-seal-passive img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--theme-glow, rgba(255, 214, 125, 0.45)));
}

.active-seal-passive span {
  display: grid;
  min-width: 0;
}

.active-seal-passive small,
.active-seal-passive strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-seal-passive small {
  color: #bcae99;
  font-size: 9px;
  text-transform: uppercase;
}

.active-seal-passive strong {
  color: #fff3cf;
  font-size: 11px;
}

.active-seal-passive b {
  color: var(--theme-accent, #ffd67d);
  font-size: 11px;
  white-space: nowrap;
}

.seal-summary-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 2px;
  color: #bcae99;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
}

.character-screen .gold-strip {
  grid-area: gold;
  margin-top: 0;
}

.character-screen .gold-strip .gold-resource {
  justify-content: flex-start;
}

body.character-view .scene {
  display: none;
}

.resource {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 9px;
  background: linear-gradient(135deg, #3a1d10, #1f1009);
  border: 2px solid #1a0d07;
  border-radius: 7px;
  color: #fff3c1;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 158, 0.16);
}

.resource strong {
  font-size: 17px;
  line-height: 1;
}

.resource span:not(.resource-icon) {
  color: #edc783;
  font-size: 12px;
  font-weight: 900;
}

.resource-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.gold-asset-icon {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
  background: url("assets/currency/gold-coins.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 6px rgba(255, 191, 53, 0.28));
}

.xp-resource {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
}

.portrait-xp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.portrait-xp > span {
  display: none;
}

.xp-resource.portrait-xp .mini-progress {
  position: relative;
  grid-column: 1 / -1;
  height: 24px;
  overflow: hidden;
  background: rgba(11, 7, 22, 0.9);
  border: 1px solid rgba(135, 90, 184, 0.65);
  border-radius: 0 0 5px 5px;
}

.portrait-xp .mini-progress strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff7e1;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 3px #05030b, 0 0 5px #05030b;
  white-space: nowrap;
}

.portrait-xp .mini-progress i {
  background: linear-gradient(90deg, #1f79d6, #75ddff);
  box-shadow: 0 0 10px rgba(90, 196, 255, 0.72);
}

.xp-resource .mini-progress {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  background: #51311e;
  border: 1px solid #130805;
  border-radius: 999px;
}

.mini-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2b6698, #72b7e6);
}

.xp-flash {
  position: absolute;
  right: 8px;
  bottom: 28px;
  z-index: 4;
  padding: 4px 8px;
  color: #f6fbff !important;
  background: linear-gradient(135deg, #2178ba, #7fd7ff);
  border: 1px solid rgba(222, 246, 255, 0.78);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(114, 202, 255, 0.78), 0 2px 0 rgba(6, 24, 42, 0.52);
  font-size: 12px !important;
  font-weight: 900;
  pointer-events: none;
  text-shadow: 0 1px 0 #0c2a46;
  animation: xpFloat 1050ms ease-out forwards;
}

.bar {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  text-align: left;
  font-weight: 700;
}

.bar div {
  height: 17px;
  overflow: hidden;
  background: #51311e;
  border: 2px solid #1f1008;
  border-radius: 999px;
}

.bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #8f1e24, #f06b49);
  transition: width 180ms ease;
}

.bar.xp i {
  background: linear-gradient(90deg, #2b6698, #72b7e6);
}

.hp-status {
  display: none;
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 16px;
  width: 100%;
  min-width: 0;
}

.stats div {
  min-width: 0;
  padding: 8px 9px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent, #d8993a) 42%, transparent) var(--stat-fill, 0%), transparent var(--stat-fill, 0%)),
    color-mix(in srgb, var(--theme-panel-soft, rgba(255, 245, 202, 0.62)) 70%, rgba(0, 0, 0, 0.2));
  border: 1px solid color-mix(in srgb, var(--theme-accent, #d8993a) 62%, rgba(26, 18, 31, 0.9));
  border-radius: 5px;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--theme-accent, #d8993a) 8%, transparent);
}

.stats .skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 1px 10px;
  min-height: 58px;
}

.stats .skill-row.is-hidden {
  display: none;
}

.stats .skill-row.primary-stat {
  border-color: color-mix(in srgb, var(--theme-accent, #d8993a) 78%, #fff);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--theme-accent, #d8993a) 22%, transparent), transparent 54%),
    color-mix(in srgb, var(--theme-panel-soft, rgba(255, 245, 202, 0.62)) 74%, rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d8993a) 28%, transparent),
    0 0 14px color-mix(in srgb, var(--theme-glow, rgba(216, 153, 58, 0.35)) 60%, transparent);
}

.skill-row dt {
  grid-column: 1;
}

.skill-row dd {
  grid-column: 1;
}

.skill-row .stat-breakdown {
  display: none;
}

.skill-row .stat-breakdown.visible-total {
  display: block;
  grid-column: 1;
  overflow: hidden;
  color: color-mix(in srgb, var(--theme-muted, #c8bb9c) 84%, #fff);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-row button,
.skill-row span {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
}

.skill-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  width: 86px;
  min-height: 34px;
  padding: 5px 3px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}

.skill-cost-amount {
  min-width: 0;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.skill-cost-unit {
  flex: 0 0 auto;
  color: #ead49d;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  transform: translateY(3px);
}

.skill-row button.is-holding {
  filter: brightness(1.18);
  transform: translateY(1px);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--theme-accent, #d8993a) 42%, transparent);
}

.skill-row.locked span {
  max-width: 58px;
  color: #6f4324;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.skill-row.locked .armor-icon-badge {
  justify-self: center;
  width: 26px;
  height: 30px;
  max-width: none;
  padding: 0;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, #d8993a) 72%, #fff), color-mix(in srgb, var(--theme-deep, #5e2a0f) 86%, #000));
  clip-path: polygon(50% 0, 90% 14%, 84% 68%, 50% 100%, 16% 68%, 10% 14%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 10px color-mix(in srgb, var(--theme-glow, rgba(216, 153, 58, 0.35)) 56%, transparent);
}


dt {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

dd {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: clip;
  white-space: nowrap;
}

.inventory-panel {
  position: relative;
  z-index: 2;
  width: auto;
  margin-top: 14px;
  padding: 12px;
  color: var(--theme-ink, #fff1c6);
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--theme-accent, #d8993a) 18%, transparent), transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-panel-soft, rgba(49, 24, 12, 0.86)) 82%, transparent), color-mix(in srgb, var(--theme-dark, #1d0f09) 94%, #000));
  border: 2px solid color-mix(in srgb, var(--theme-border, #442311) 72%, #000);
  border-radius: 8px 0 0 8px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d8993a) 16%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.42),
    0 0 18px color-mix(in srgb, var(--theme-glow, rgba(216, 153, 58, 0.35)) 56%, transparent);
  pointer-events: auto;
  transform: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.inventory-panel:hover,
.inventory-panel:focus-within {
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--theme-accent, #d8993a) 18%, transparent), transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-panel-soft, rgba(49, 24, 12, 0.86)) 82%, transparent), color-mix(in srgb, var(--theme-dark, #1d0f09) 94%, #000));
  border-color: color-mix(in srgb, var(--theme-border, #442311) 72%, #000);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d8993a) 16%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.42),
    0 0 18px color-mix(in srgb, var(--theme-glow, rgba(216, 153, 58, 0.35)) 56%, transparent);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 240ms ease;
}

body[class*="theme-"] .inventory-panel {
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--theme-accent, #d8993a) 18%, transparent), transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-panel-soft, rgba(49, 24, 12, 0.86)) 82%, transparent), color-mix(in srgb, var(--theme-dark, #1d0f09) 94%, #000));
  border-color: color-mix(in srgb, var(--theme-border, #442311) 72%, #000);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d8993a) 16%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.26);
}

body[class*="theme-"] .inventory-panel:hover,
body[class*="theme-"] .inventory-panel:focus-within {
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--theme-accent, #d8993a) 18%, transparent), transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-panel-soft, rgba(49, 24, 12, 0.86)) 82%, transparent), color-mix(in srgb, var(--theme-dark, #1d0f09) 94%, #000));
  border-color: color-mix(in srgb, var(--theme-border, #442311) 72%, #000);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d8993a) 16%, transparent),
    0 16px 34px rgba(0, 0, 0, 0.42),
    0 0 18px color-mix(in srgb, var(--theme-glow, rgba(216, 153, 58, 0.35)) 56%, transparent);
}

.inventory-tab {
  display: none;
}

.inventory-panel,
.inventory-tab {
  pointer-events: auto;
}

.inventory-panel:hover .inventory-tab,
.inventory-panel:focus-within .inventory-tab {
  display: none;
}

.inventory-panel h3 {
  margin: 0 0 9px;
  color: var(--theme-accent, #4c2613);
  font-size: 18px;
  text-align: left;
}

.inventory-panel h3,
.inventory-grid {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.inventory-panel:hover h3,
.inventory-panel:hover .inventory-grid,
.inventory-panel:focus-within h3,
.inventory-panel:focus-within .inventory-grid {
  opacity: 1;
  visibility: visible;
  transition-delay: 80ms;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.inventory-slot {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
}

.inventory-slot:disabled {
  opacity: 1;
  filter: none;
}

.topnav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: stretch;
  align-self: start;
  grid-column: 1;
  grid-row: 2;
  padding: 11px;
  background:
    linear-gradient(90deg, rgba(218, 166, 47, 0.16), transparent 12%, transparent 88%, rgba(218, 166, 47, 0.12)),
    linear-gradient(180deg, rgba(9, 34, 45, 0.96), rgba(5, 18, 29, 0.99));
  border: 2px solid #0c1b25;
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(246, 205, 89, 0.24),
    inset 0 0 18px rgba(0, 0, 0, 0.32),
    0 12px 28px var(--shadow);
}

.sidebar > .topnav {
  display: none;
}

.sidebar:has(.nav-profile-card:not(.hidden)) > .topnav {
  display: grid;
}

.nav-profile-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 5px 9px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 124px;
  padding: 9px;
  overflow: hidden;
  color: #fff5d4;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--theme-accent, #d7a23c) 24%, transparent), transparent 36%),
    linear-gradient(145deg, var(--theme-mid, #17384a), var(--theme-dark, #07151f));
  border: 2px solid var(--theme-deep, #071018);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #e3b348) 24%, transparent),
    0 5px 0 var(--theme-deep, #071018),
    0 10px 22px rgba(0, 0, 0, 0.34);
  text-align: left;
}

.nav-profile-card:hover,
.nav-profile-card:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid var(--theme-accent, #e3b348);
  outline-offset: 2px;
}

.nav-profile-card.active {
  outline: 2px solid var(--theme-accent, #e3b348);
  outline-offset: 2px;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--theme-accent, #e3b348) 38%, transparent),
    0 5px 0 var(--theme-deep, #071018),
    0 0 20px var(--theme-glow, rgba(227, 179, 72, 0.3));
}

.nav-profile-portrait {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: stretch;
  width: 64px;
  height: auto;
  min-height: 104px;
  background: url("assets/alex-voidflame.png") center 18% / cover no-repeat;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #e3b348) 64%, #100806);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 239, 181, 0.2), 0 3px 10px rgba(0, 0, 0, 0.42);
}

body.theme-chris .nav-profile-portrait { background-image: url("assets/chris-warlock.png"); }
body.theme-lena .nav-profile-portrait { background-image: url("assets/lena-arena.png"); }
body.theme-max .nav-profile-portrait { background-image: url("assets/max-naturemonk.png"); }
body.theme-marco .nav-profile-portrait { background-image: url("assets/marco-voidblade.png"); }
body.theme-tobias .nav-profile-portrait { background-image: url("assets/tobias-storm.png"); }
body.theme-norman .nav-profile-portrait { background-image: url("assets/norman-harbor.png"); }
body.theme-bambi .nav-profile-portrait { background-image: url("assets/bambi-rain.png"); }

.nav-profile-identity {
  align-self: start;
  min-width: 0;
}

.nav-profile-identity strong,
.nav-profile-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-profile-identity strong {
  color: #fff8df;
  font-size: 16px;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72);
}

.nav-profile-identity small {
  margin-top: 3px;
  color: var(--theme-muted, #d6bd87);
  font-size: 11px;
  font-weight: 900;
}

.nav-profile-identity small.nav-level-up {
  color: #fff3a0;
  transform-origin: left center;
  animation: navLevelRoll 1050ms cubic-bezier(0.2, 0.85, 0.28, 1) both;
}

.nav-wallet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.nav-currency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 19px;
  padding: 0;
  color: #fff5c8;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
}

.nav-currency strong {
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.88);
  white-space: nowrap;
}

.nav-gold-icon,
.nav-token-icon {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.nav-gold-icon {
  background-image: url("assets/currency/gold-coins.png");
}

.nav-token-icon {
  background-image: url("assets/shop/tavern-tokens/tavern-token-common.png");
}

.nav-xp-progress {
  display: block;
  grid-column: 2;
  min-width: 0;
  padding: 0;
  align-self: end;
}

.nav-xp-track {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: rgba(2, 10, 19, 0.82);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #75ddff) 42%, #132231);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.78);
}

.nav-xp-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #1e74bb, #70dfff 74%, #d8f8ff);
  box-shadow: 0 0 8px rgba(91, 211, 255, 0.75);
  transition: width 420ms ease;
}

.nav-xp-flash {
  position: absolute;
  right: 10px;
  bottom: 5px;
  z-index: 5;
  color: #e9fbff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.95),
    0 0 6px #159fe6,
    0 0 14px rgba(92, 218, 255, 0.9);
  white-space: nowrap;
  animation: navXpRise 1500ms ease-out forwards;
}

.nav-level-flash {
  position: absolute;
  top: 78px;
  left: 41px;
  z-index: 6;
  width: 62px;
  color: #fff4a6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  text-align: center;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(255, 198, 47, 0.95),
    0 0 15px rgba(255, 231, 115, 0.78);
  white-space: nowrap;
  animation: navLevelRise 1400ms ease-out forwards;
}

.gold-counting {
  color: #fff2a6;
  text-shadow: 0 0 7px rgba(255, 190, 46, 0.82), 0 2px 3px rgba(0, 0, 0, 0.9) !important;
}

.topnav button {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 6px 12px 6px 8px;
  overflow: hidden;
  color: #ffd33f;
  background:
    linear-gradient(90deg, rgba(255, 218, 76, 0.16), transparent 19%),
    linear-gradient(180deg, #14506a, #0b3149 52%, #071e2d);
  border: 2px solid #0a1721;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 130, 0.24),
    inset 0 2px 0 rgba(134, 220, 255, 0.18),
    inset 0 -9px 18px rgba(0, 0, 0, 0.24),
    0 3px 0 #031018,
    0 0 0 1px rgba(191, 144, 43, 0.2);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-shadow:
    0 2px 0 #3b1f05,
    0 0 8px rgba(255, 215, 73, 0.28);
  text-transform: uppercase;
  white-space: nowrap;
}

.topnav button::before {
  display: none;
}

.nav-icon {
  content: "";
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: #f8e78f;
  background: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38px 38px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
  transform: translateZ(0);
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav button[data-nav="tavern"] .nav-icon {
  background-image: url("assets/nav/v2/tavern.png");
}

.nav-quest-status {
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  left: 62px;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0 8px;
  color: #ffe071;
  font-family: inherit;
  font-size: 19px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 #3b1f05,
    0 0 9px rgba(255, 215, 73, 0.48);
  pointer-events: none;
}

.nav-quest-status.hidden {
  display: none;
}

.nav-button.tavern-running .nav-label,
.nav-button.tavern-ready .nav-label,
.nav-button.combat-waiting .nav-label {
  visibility: hidden;
}

.nav-button.tavern-ready {
  animation: tavernReadyPulse 1050ms ease-in-out infinite;
}

.nav-button.tavern-ready .nav-quest-status {
  color: #fff6b8;
  text-shadow:
    0 2px 0 #4b2400,
    0 0 8px rgba(255, 226, 105, 0.95),
    0 0 18px rgba(255, 190, 42, 0.72);
}

@keyframes tavernReadyPulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 232, 130, 0.24),
      inset 0 2px 0 rgba(134, 220, 255, 0.18),
      inset 0 -9px 18px rgba(0, 0, 0, 0.24),
      0 3px 0 #031018,
      0 0 5px rgba(255, 206, 55, 0.24);
  }
  50% {
    filter: brightness(1.24);
    box-shadow:
      inset 0 0 0 2px rgba(255, 241, 160, 0.62),
      inset 0 0 20px rgba(255, 198, 48, 0.25),
      0 3px 0 #031018,
      0 0 20px rgba(255, 206, 55, 0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-button.tavern-ready {
    animation: none;
  }
}

.topnav button[data-nav="quest"] .nav-icon {
  background-image: url("assets/nav/v2/quests.png");
}

.topnav button[data-nav="pvp"] .nav-icon {
  background-image: url("assets/nav/raid-swords-gray.png");
}

.topnav button[data-nav="arena"] .nav-icon {
  background-image: url("assets/nav/v2/dungeon.png");
}

.topnav button[data-nav="inventory"] .nav-icon {
  background-image: url("assets/nav/v2/inventory.png");
}

.topnav button[data-nav="shop"] .nav-icon {
  background-image: url("assets/nav/v2/shop.png");
}

.topnav button[data-nav="guild"] .nav-icon {
  background-image: url("assets/guild-emblems/road-of-bobar-v1.png");
}

.topnav button[data-nav="leaderboard"] .nav-icon {
  background-image: url("assets/nav/v2/leaderboard.png");
}

.topnav button[data-nav="settings"] .nav-icon {
  background-image: url("assets/nav/v2/settings.png");
  width: 36px;
  height: 36px;
  min-width: 36px;
  background-size: 34px 34px;
}

.topnav button[data-nav="settings"] {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 5px;
  padding-right: 8px;
}

.topnav button[data-nav="settings"] .nav-label {
  font-size: 13px;
  letter-spacing: 0;
}

.nav-button.active,
.shop-nav.active,
.guild-entry.active,
.log-toggle.active {
  color: #fff7a8;
  background:
    linear-gradient(90deg, rgba(255, 222, 88, 0.22), transparent 28%),
    linear-gradient(180deg, #1a6f8c, #0e3e5e 54%, #09283d);
  outline: 2px solid #4ba3ff;
  outline-offset: 2px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 216, 104, 0.3),
    0 4px 0 #031018,
    0 0 18px rgba(75, 163, 255, 0.32);
  text-shadow: 0 1px 0 #130704;
}

.topnav button:hover,
.topnav button:focus-visible {
  filter: brightness(1.08);
}

.log-toggle.has-update {
  color: #102234;
  background: linear-gradient(#a7ddff, #3a83bd);
  animation: logPulse 900ms ease-in-out infinite;
}

.nav-button.active::after {
  content: "";
  position: absolute;
  left: 62px;
  right: 16px;
  bottom: 7px;
  display: block;
  width: auto;
  height: 3px;
  margin: 0;
  border-radius: 999px;
  background: #ffe071;
  box-shadow: 0 0 10px rgba(255, 214, 80, 0.78);
}

.shop-nav.active .shop-default {
  color: #fff6cf;
  background:
    linear-gradient(180deg, rgba(255, 238, 160, 0.28), transparent 54%),
    linear-gradient(#81512a, #2a140c);
}

.shop-nav {
  position: relative;
  display: block;
  flex: 1 1 160px;
  min-height: 44px;
  overflow: hidden;
  border: 2px solid #2a160d;
  border-radius: 7px;
  box-shadow: 0 4px 0 #45230f, 0 8px 16px var(--shadow);
  background: linear-gradient(#f5c86a, #b97424);
}

.shop-default,
.shop-options {
  position: absolute;
  inset: 0;
}

.shop-default {
  display: grid;
  place-items: center;
  min-height: 44px;
  background: linear-gradient(#f5c86a, #b97424);
  color: #251407;
  font-weight: 700;
  transition: opacity 140ms ease, transform 140ms ease;
}

.shop-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.94);
  transform-origin: center;
  transition: opacity 140ms ease, transform 140ms ease;
}

.shop-nav:hover .shop-default,
.shop-nav:focus-within .shop-default {
  opacity: 0;
  transform: scaleX(1.06);
  pointer-events: none;
}

.shop-nav:hover .shop-options,
.shop-nav:focus-within .shop-options {
  opacity: 1;
  pointer-events: auto;
  transform: scaleX(1);
}

.shop-nav-part {
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff4cb;
  text-shadow: 0 1px 0 #180905;
}

.shop-nav-part:hover {
  filter: brightness(1.15);
}

.shop-nav-part:active {
  transform: none;
  box-shadow: none;
}

.shop-nav-part.weapons {
  background: linear-gradient(#c84b34, #7f1e16);
  border-right: 1px solid #2a160d;
}

.shop-nav-part.gear {
  background: linear-gradient(#4c8fc6, #1d4f83);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.mini-sword,
.mini-armor {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.mini-sword {
  transform: rotate(45deg);
}

.mini-sword::before,
.mini-sword::after,
.mini-armor::before {
  content: "";
  position: absolute;
  display: block;
}

.mini-sword::before {
  left: 8px;
  top: 0;
  width: 3px;
  height: 15px;
  border-radius: 99px 99px 2px 2px;
  background: #f7f1d1;
  box-shadow: 0 0 0 1px #251007;
}

.mini-sword::after {
  left: 4px;
  top: 12px;
  width: 11px;
  height: 4px;
  border-radius: 99px;
  background: #ffd36b;
  box-shadow: 0 0 0 1px #251007;
}

.mini-armor::before {
  left: 3px;
  top: 1px;
  width: 13px;
  height: 16px;
  background: linear-gradient(#d9efff, #77a9d4 55%, #28547e);
  box-shadow: 0 0 0 1px #101a2c;
  clip-path: polygon(50% 0, 94% 15%, 84% 70%, 50% 100%, 16% 70%, 6% 15%);
}

.scene {
  position: relative;
  height: 250px;
  margin-top: 0;
  overflow: hidden;
  border: 4px solid #1d0f09;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(18, 8, 5, 0.2), rgba(18, 8, 5, 0.04) 48%, rgba(18, 8, 5, 0.24)),
    url("assets/bobar-faceoff.png") center / cover no-repeat,
    #26130b;
  box-shadow: inset 0 -18px 35px rgba(39, 22, 12, 0.45), 0 12px 28px var(--shadow);
}

.scene .sky,
.scene .mountains,
.scene .town,
.scene .hero-stand {
  display: none;
}

.sky {
  position: absolute;
  top: 28px;
  left: 64px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #ffe58a;
  box-shadow: 0 0 46px #ffef9c;
}

.mountains {
  position: absolute;
  inset: 86px -30px auto;
  height: 122px;
  background:
    linear-gradient(135deg, transparent 50%, #41606a 51%) 0 0 / 240px 122px,
    linear-gradient(45deg, transparent 50%, #5f7b6c 51%) 90px 0 / 260px 122px;
  opacity: 0.95;
}

.town {
  position: absolute;
  right: 52px;
  bottom: 48px;
  width: 360px;
  height: 140px;
}

.town span {
  position: absolute;
  bottom: 0;
  border: 4px solid #1f1008;
  box-shadow: 7px 9px 0 rgba(40, 19, 10, 0.24);
}

.tower {
  left: 18px;
  width: 70px;
  height: 130px;
  background: #c9a15a;
}

.tower::before {
  content: "";
  position: absolute;
  top: -42px;
  left: -12px;
  border-left: 43px solid transparent;
  border-right: 43px solid transparent;
  border-bottom: 44px solid #923326;
}

.hall {
  left: 88px;
  width: 170px;
  height: 92px;
  background: #a96c3b;
}

.house {
  left: 240px;
  width: 94px;
  height: 72px;
  background: #e0bd70;
}

.hero-stand {
  position: absolute;
  left: 104px;
  bottom: 48px;
  width: 82px;
  height: 126px;
}

.hero-head,
.hero-body,
.hero-sword {
  position: absolute;
  display: block;
}

.hero-head {
  top: 0;
  left: 22px;
  width: 42px;
  height: 42px;
  border: 4px solid #1f1008;
  border-radius: 50%;
  background: #e4a66d;
}

.hero-body {
  top: 39px;
  left: 15px;
  width: 54px;
  height: 74px;
  border: 4px solid #1f1008;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(90deg, #2f648e 50%, #b7392a 50%);
}

.hero-sword {
  top: 34px;
  right: 0;
  width: 9px;
  height: 86px;
  transform: rotate(17deg);
  background: #d8e6e7;
  border: 2px solid #1f1008;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 0;
}

.log-panel {
  position: fixed;
  top: 118px;
  right: 14px;
  z-index: 30;
  width: clamp(300px, 24vw, 380px);
  min-width: 0;
  max-height: calc(100vh - 142px);
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 18px));
  transition: opacity 160ms ease, transform 160ms ease;
}

.log-panel.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.eyebrow {
  color: #794224;
  font-weight: 900;
  text-transform: uppercase;
}

.action-panel h2,
.log-panel h2 {
  margin-top: 4px;
  font-size: 28px;
}

.action-panel > p:not(.eyebrow) {
  margin-top: 8px;
  line-height: 1.45;
}

body:has(.nav-button[data-nav="inventory"].active) .action-panel > #viewLabel,
body:has(.nav-button[data-nav="quest"].active) .action-panel > #viewLabel,
body:has(.nav-button[data-nav="shop"].active) .action-panel > #viewLabel,
body:has(.nav-button[data-nav="arena"].active) .action-panel > #viewTitle {
  display: none;
}

.settings-stage {
  display: grid;
  gap: 28px;
}

.settings-panel {
  width: min(1080px, 100%);
  margin-top: 18px;
}

.settings-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(214, 169, 82, 0.26);
}

.settings-head img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7));
}

.settings-head span,
.settings-row small {
  color: #c7a86f;
  font-size: 12px;
  font-weight: 800;
}

.settings-head h3 {
  margin: 2px 0 0;
  color: #fff1c2;
  font-size: 24px;
}

.settings-list {
  display: grid;
}

.settings-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(214, 169, 82, 0.18);
  cursor: pointer;
}

.settings-row > span {
  display: grid;
  gap: 4px;
}

.settings-row strong {
  color: #fff1c2;
  font-size: 17px;
}

.settings-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-row > i {
  position: relative;
  width: 48px;
  height: 26px;
  background: #160b19;
  border: 2px solid #5f3d63;
  border-radius: 16px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  transition: background 160ms ease, border-color 160ms ease;
}

.settings-row > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #b9a98e;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  transition: transform 160ms ease, background 160ms ease;
}

.settings-row input:checked + i {
  background: linear-gradient(180deg, #6b238f, #3a1053);
  border-color: #d48cff;
}

.settings-row input:checked + i::after {
  background: #fff0af;
  transform: translateX(22px);
}

.settings-row input:focus-visible + i {
  outline: 2px solid #67c8ff;
  outline-offset: 3px;
}


@supports (view-transition-name: none) {
  .action-panel {
    view-transition-name: game-surface;
  }

  ::view-transition-group(game-surface) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.2, 0.72, 0.2, 1);
  }

  ::view-transition-old(game-surface) {
    animation: game-surface-fade-out 170ms ease-in both;
  }

  ::view-transition-new(game-surface) {
    animation: game-surface-fade-in 330ms ease-out 55ms both;
  }
}

@keyframes game-surface-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes game-surface-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.action-panel.game-surface-leaving {
  opacity: 0;
  transform: translateY(5px) scale(0.995);
  transition: opacity 150ms ease-in, transform 150ms ease-in;
  pointer-events: none;
}

.action-panel.game-surface-entering {
  animation: game-surface-panel-in 330ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
  pointer-events: none;
}

@keyframes game-surface-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-panel.game-surface-leaving,
  .action-panel.game-surface-entering,
  ::view-transition-group(game-surface),
  ::view-transition-old(game-surface),
  ::view-transition-new(game-surface) {
    animation: none;
  }
}

.tavern-token-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 74px;
  padding: 7px 10px;
  color: #fff6d0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 226, 134, 0.32), transparent 42%),
    linear-gradient(145deg, rgba(49, 23, 8, 0.94), rgba(17, 8, 4, 0.94));
  border: 1px solid rgba(255, 225, 142, 0.4);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 231, 137, 0.14), 0 5px 12px rgba(20, 8, 3, 0.28);
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  z-index: 4;
}

.tavern-token-badge.hidden {
  display: none;
}

.tavern-token-badge span {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background: url("assets/shop/tavern-tokens/tavern-token-common.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
}

.action-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.guild-stage {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 14px;
}

#actions.guild-raid-stage {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  align-items: start;
  min-height: 600px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(3, 7, 8, 0.44), rgba(3, 7, 8, 0.2) 45%, rgba(3, 7, 8, 0.48)),
    url("assets/guild-raid-amirdrassil-v1.png") center / cover no-repeat;
}

#actions.guild-battle-stage {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  align-items: start;
  min-height: 600px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(5, 5, 10, 0.54), rgba(5, 5, 10, 0.28) 45%, rgba(5, 5, 10, 0.58)),
    url("assets/guild-hall-v1.png") center / cover no-repeat;
}

.action-panel:has(#actions.guild-raid-stage),
.action-panel:has(#actions.guild-battle-stage) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.action-panel:has(#actions.guild-raid-stage) > #viewTitle,
.action-panel:has(#actions.guild-battle-stage) > #viewTitle {
  display: none;
}

#actions.guild-raid-stage .guild-raid,
#actions.guild-battle-stage .guild-raid {
  grid-template-columns: minmax(0, 1fr) 40px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 5px #000;
}

#actions.guild-raid-stage .guild-section-back,
#actions.guild-battle-stage .guild-section-back {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

#actions.guild-raid-stage .guild-raid-heading {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}

#actions.guild-raid-stage .guild-raid-art,
#actions.guild-raid-stage .guild-raid-actions,
#actions.guild-raid-stage .raid-details {
  grid-column: 1 / -1;
}

#actions.guild-raid-stage .guild-raid-art {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
}

#actions.guild-raid-stage .raid-art-copy {
  grid-column: 1;
  min-width: 0;
}

#actions.guild-raid-stage .guild-raid-plan-action {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  align-items: flex-end;
  flex-direction: column;
  z-index: 2;
  padding: 0;
  border: 0;
}

@media (max-width: 1100px) {
  #actions.guild-raid-stage .raid-art-copy,
  #actions.guild-raid-stage .guild-raid-plan-action {
    grid-column: 1 / -1;
  }
}

:is(.guild-raid-stage, .guild-battle-stage) .guild-raid-portraits {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.guild-raid-portrait-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

body :is(.guild-raid-stage, .guild-battle-stage) .guild-raid-portrait {
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  background: var(--portrait) center 18% / cover no-repeat;
  border: 2px solid #6d4b82;
  border-radius: 4px;
  box-shadow: inset 0 -22px 28px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

body :is(.guild-raid-stage, .guild-battle-stage) .guild-raid-portrait.is-signed {
  border-color: #78ee99;
  box-shadow: 0 0 0 1px #276b3d, 0 0 12px rgba(92, 230, 125, 0.72);
}

.guild-raid-portrait:hover,
.guild-raid-portrait:focus-visible {
  filter: brightness(1.16);
  outline: 2px solid #fff2cc;
  outline-offset: 2px;
}

@media (max-width: 820px) {
  #actions.guild-raid-stage,
  #actions.guild-battle-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px;
  }

  .guild-raid-portrait-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.action-panel:has(#actions.guild-hub) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.action-panel:has(#actions.guild-hub) > #viewTitle {
  display: none;
}

#actions.guild-hub {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 16px;
  min-height: 680px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(5, 5, 10, 0.18) 0%, rgba(5, 5, 10, 0.08) 25%, rgba(5, 5, 10, 0.62) 100%),
    url("assets/guild-hall-v1.png") center top / cover no-repeat;
}

.guild-hub-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 8px;
  color: #fff0d0;
  border-bottom: 1px solid rgba(247, 211, 147, 0.5);
  text-shadow: 0 2px 6px #000;
}

.guild-hub-heading h2 {
  margin: 0;
  color: #fff2d2;
  font-size: 32px;
  line-height: 1.08;
}

.guild-hub-honor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f6dba7;
  font-size: 13px;
  white-space: nowrap;
}

.guild-hub-honor img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.guild-hub-honor strong {
  color: #fff2d2;
  font-size: 18px;
}

@media (max-width: 600px) {
  .guild-hub-heading { flex-wrap: wrap; }
}

.guild-hub .guild-members {
  padding: 12px;
  background: rgba(7, 7, 12, 0.76);
  border: 0;
  box-shadow: none;
}

.guild-hub .guild-raid {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.guild-hub .guild-mode-grid {
  min-height: 0;
}

body .guild-hub .guild-raid .guild-mode-card {
  min-height: 285px;
}

.guild-hub .guild-economy {
  background: rgba(7, 7, 12, 0.83);
}

@media (max-width: 820px) {
  #actions.guild-hub {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px;
  }

  .guild-hub .guild-choice-column {
    order: 1;
  }

  .guild-hub .guild-members {
    order: 2;
  }
}

@media (max-width: 520px) {
  .guild-hub-heading h2 {
    font-size: 27px;
  }

  body .guild-hub .guild-raid .guild-mode-card {
    min-height: 220px;
  }
}

.guild-choice-column {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 12px;
}

.guild-members,
.guild-raid {
  padding: 14px;
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--theme-accent, #d8993a) 18%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-mid, #3a1d10) 88%, #000), color-mix(in srgb, var(--theme-dark, #160905) 96%, #000));
  border: 2px solid color-mix(in srgb, var(--theme-border, #442311) 72%, #000);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #d8993a) 16%, transparent);
}

.guild-members h3,
.guild-raid h3,
.guild-raid p {
  margin: 0;
}

.guild-members h3 {
  margin-bottom: 10px;
  color: var(--theme-accent, #ffd989);
  font-size: 22px;
}

.guild-section-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.guild-section-heading h3 {
  margin: 0;
}

.guild-section-heading > span {
  min-width: 46px;
  padding: 5px 8px;
  color: #d7ffd5;
  background: rgba(36, 113, 65, 0.34);
  border: 1px solid rgba(118, 240, 147, 0.4);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

body:has(.nav-button[data-nav="guild"].active) .action-panel > #viewLabel,
body:has(.nav-button[data-nav="guild"].active) .action-panel > #viewText {
  display: none;
}

.guild-member {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(72px, auto) 88px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  color: #fff6d6;
  background: rgba(5, 2, 1, 0.34);
  border: 1px solid color-mix(in srgb, var(--theme-border, #442311) 55%, transparent);
  border-radius: 7px;
}

.guild-member + .guild-member {
  margin-top: 7px;
}

.guild-member.is-signed {
  background: linear-gradient(90deg, rgba(35, 105, 61, 0.42), rgba(8, 20, 13, 0.34));
  border-color: rgba(118, 240, 147, 0.46);
  box-shadow: inset 3px 0 0 #70df8b;
}

.guild-member.has-attacked {
  opacity: 0.68;
}

.guild-member.is-signed em {
  color: #a9f2b8;
  border-color: rgba(118, 240, 147, 0.32);
}

.guild-portrait {
  width: 48px;
  aspect-ratio: 1;
  display: block;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)), var(--portrait) center 16% / cover no-repeat;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #ffd989) 52%, #000);
  border-radius: 7px;
}

.guild-member strong,
.guild-member small,
.guild-member span,
.guild-member em {
  display: block;
  min-width: 0;
}

.guild-member strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-member small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--theme-muted, #edc783);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.guild-member > span:not(.guild-portrait),
.guild-member em {
  min-width: 0;
  padding: 6px 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 230, 160, 0.16);
  border-radius: 6px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-member .guild-portrait {
  width: 56px;
  min-width: 56px;
  aspect-ratio: 1;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.42)),
    var(--portrait) center 14% / cover no-repeat;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #ffd989) 64%, #000);
  border-radius: 7px;
  box-shadow: inset 0 -18px 24px rgba(0, 0, 0, 0.42), 0 0 12px color-mix(in srgb, var(--theme-glow, rgba(216, 153, 58, 0.35)) 42%, transparent);
  pointer-events: auto;
  cursor: pointer;
}

.guild-member .guild-portrait:hover,
.guild-member .guild-portrait:focus-visible {
  border-color: #fff2c9;
  filter: brightness(1.18);
  outline: 2px solid var(--theme-accent, #ffd989);
  outline-offset: 2px;
}

.guild-member em {
  color: var(--theme-accent, #ffd989);
  font-size: 12px;
}

.guild-member > div {
  display: grid;
  align-content: center;
  min-height: 34px;
}

.guild-member > div small {
  margin-top: 3px;
  color: #e7c4ff;
  text-transform: none;
}

.guild-member > .guild-member-metric {
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 0;
  color: #fff2c9;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: right;
}

.guild-member-metric strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.guild-member-metric small {
  margin: 0;
  color: #c8afd6;
  font-size: 10px;
  text-transform: none;
}

.guild-member > .guild-member-status {
  font-size: 11px;
  white-space: nowrap;
}

.guild-raid {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 320px;
}

.guild-raid h3 {
  margin: 0;
  color: #fff7d9;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
}

.guild-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 430px;
}

body .guild-raid .guild-mode-card {
  position: relative;
  display: flex;
  align-items: end;
  min-width: 0;
  min-height: 430px;
  padding: 16px;
  text-align: left;
  color: #fff8dd;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.88)), var(--guild-mode-image) center / cover no-repeat;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #ffd989) 50%, #000);
  border-radius: 7px;
  box-shadow: inset 0 -35px 40px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.guild-mode-card:hover,
.guild-mode-card:focus-visible {
  border-color: #fff1bd;
  filter: brightness(1.14);
  outline: none;
}

.guild-mode-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-shadow: 0 2px 5px #000;
}

.guild-mode-card > .guild-mode-copy { padding-right: 48px; }

.guild-mode-card > .guild-mode-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: block;
  min-width: 42px;
  padding: 5px 7px;
  color: #ddffdf;
  background: rgba(13, 32, 24, 0.88);
  border: 1px solid rgba(138, 209, 151, 0.64);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.guild-mode-card strong {
  font-size: 24px;
  line-height: 1.05;
}

.guild-mode-card small {
  font-size: 13px;
}

.guild-mode-card > .guild-mode-time {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  gap: 2px;
  max-width: calc(100% - 24px);
  padding: 7px 9px;
  color: #fff4d7;
  background: rgba(14, 10, 20, 0.88);
  border: 1px solid rgba(242, 205, 143, 0.62);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.guild-mode-card > .guild-mode-time small {
  font-size: 11px;
  white-space: normal;
}

.guild-mode-card > .guild-mode-time.is-defense {
  top: 67px;
  border-color: rgba(151, 217, 190, 0.7);
}

.guild-section-back {
  justify-self: start;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 25px;
}

.guild-war-tabs {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  gap: 8px;
  min-width: 0;
  border-bottom: 1px solid rgba(224, 190, 235, 0.38);
}

body[class*="theme-"] .guild-war-tabs button {
  min-height: 38px;
  padding: 7px 14px;
  color: #d6c3dd;
  background: rgba(6, 5, 10, 0.62);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
}

body[class*="theme-"] .guild-war-tabs button[aria-selected="true"] {
  color: #fff1d5;
  background: rgba(60, 27, 77, 0.75);
  border-bottom-color: #d99ef0;
}

.guild-war-panel {
  grid-column: 1 / -1;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.guild-war-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 318px;
  overflow: hidden;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(3, 3, 8, 0.58), transparent 32%, rgba(3, 3, 8, 0.94)),
    url("assets/guild-war-attack-v1.png") center 38% / cover no-repeat;
  border: 1px solid #8754a3;
  border-radius: 4px;
  color: #fff4df;
  text-shadow: 0 2px 5px #000;
}

.guild-war-cover.is-defense {
  background-image:
    linear-gradient(180deg, rgba(3, 3, 8, 0.58), transparent 32%, rgba(3, 3, 8, 0.94)),
    url("assets/guild-war-defense-v1.png");
}

.guild-war-cover-label {
  align-self: flex-start;
  color: #fff4df;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-war-cover-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.guild-war-cover-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.guild-war-cover-info strong {
  font-size: 24px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.guild-war-cover-info time {
  color: #ffe3a8;
  font-size: 16px;
  font-weight: 900;
}

.guild-war-cover-info span,
.guild-war-cover-info small {
  color: #e5d2e8;
  font-size: 12px;
  font-weight: 800;
}

.guild-war-cover-bottom > button {
  flex: 0 0 auto;
  min-width: 170px;
}

.guild-war-planner {
  display: grid;
  gap: 14px;
  padding: 12px;
  background: rgba(7, 6, 12, 0.8);
  border-top: 1px solid rgba(179, 128, 207, 0.38);
}

#actions.guild-battle-stage .guild-war-history h3 {
  font-size: 20px;
}

@media (max-width: 1100px) {
  .guild-war-cover-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .guild-war-cover-bottom > button {
    align-self: flex-end;
  }
}

.guild-war-schedule,
.guild-war-history {
  display: grid;
  gap: 10px;
  padding-block: 12px;
  border-bottom: 1px solid #654177;
}

.guild-war-defense {
  padding-left: 12px;
  border-left: 3px solid #86c9ab;
}

.guild-war-schedule label {
  display: grid;
  gap: 5px;
  color: #d9bde9;
  font-size: 13px;
}

.guild-war-schedule select {
  width: 100%;
  min-height: 38px;
  padding: 5px 9px;
  color: #fff4df;
  background: #1a1022;
  border: 1px solid #76518b;
  border-radius: 4px;
}

.guild-war-schedule > strong,
.guild-war-schedule > time {
  color: #fff0bf;
  font-variant-numeric: tabular-nums;
}

.guild-war-planner {
  gap: 14px;
}

.guild-war-planner h3 {
  font-size: 25px;
}

.guild-war-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.guild-war-field legend {
  margin-bottom: 7px;
  padding: 0;
  color: #d9bde9;
  font-size: 12px;
  font-weight: 900;
}

.guild-war-opponents,
.guild-war-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.guild-war-times {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[class*="theme-"] .guild-war-opponent,
body[class*="theme-"] .guild-war-time {
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  color: #ead9ed;
  background: rgba(9, 7, 15, 0.6);
  border: 1px solid rgba(179, 128, 207, 0.38);
  border-radius: 5px;
  box-shadow: none;
  text-align: left;
  font: inherit;
}

body[class*="theme-"] .guild-war-opponent:hover,
body[class*="theme-"] .guild-war-time:hover {
  background: rgba(85, 46, 110, 0.32);
  border-color: #b988d3;
}

body[class*="theme-"] .guild-war-opponent.is-selected,
body[class*="theme-"] .guild-war-time.is-selected {
  color: #fff5d6;
  background: rgba(96, 50, 123, 0.4);
  border-color: #d8a7ee;
  box-shadow: inset 3px 0 #e2afef;
}

.guild-war-time {
  display: grid;
  gap: 1px;
}

.guild-war-time span {
  color: #c8adc9;
  font-size: 11px;
  white-space: nowrap;
}

.guild-war-time strong {
  font-size: 17px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.guild-war-plan-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(179, 128, 207, 0.26);
}

.guild-war-plan-footer > span {
  min-width: 0;
  color: #d9c4de;
  font-size: 12px;
  line-height: 1.35;
}

.guild-war-plan-footer > button {
  flex: 0 0 auto;
}

.guild-raid-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(179, 128, 207, 0.26);
}

.guild-raid-actions > span {
  color: #d9c4de;
  font-size: 12px;
  font-weight: 800;
}

.guild-raid-actions > button {
  min-height: 36px;
}

.guild-raid-plan-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 10px;
  border-bottom: 1px solid rgba(179, 128, 207, 0.26);
}

.guild-raid-plan-action > button {
  min-width: 170px;
}

.guild-raid-planning-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  color: #fff2d8;
  background: #140a1c;
  border: 2px solid #9b65c7;
  border-radius: 6px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.78);
}

.guild-raid-planning-dialog::backdrop {
  background: rgba(3, 2, 6, 0.78);
  backdrop-filter: blur(3px);
}

.guild-raid-planning-card {
  display: grid;
  gap: 20px;
  padding: 22px;
}

.guild-raid-planning-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.guild-raid-planning-card h2 {
  margin: 0;
  font-size: 27px;
}

body[class*="theme-"] .guild-raid-planning-close {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 25px;
  line-height: 1;
}

.guild-raid-planning-card footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(179, 128, 207, 0.26);
}

@media (max-width: 520px) {
  .guild-raid-plan-action {
    align-items: stretch;
    flex-direction: column;
  }

  .guild-raid-planning-card {
    padding: 16px;
  }

  .guild-raid-planning-card .guild-war-times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guild-raid-planning-card footer > button {
    width: 100%;
  }
}

.guild-war-plan-notice {
  color: #efc5a7;
  font-size: 12px;
}

@media (max-width: 620px) {
  .guild-war-plan-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .guild-war-opponents {
    grid-template-columns: 1fr;
  }
}

.guild-war-history > button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid #604173;
  border-radius: 4px;
}

.guild-war-history > button strong { color: #fff0bf; white-space: nowrap; }

.guild-war-history-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.guild-war-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  color: #ffe2a4;
  font-size: 13px;
  font-weight: 800;
}

.guild-war-rewards > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.guild-war-rewards img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.guild-war-replay-stage {
  display: grid;
  align-content: start;
  gap: 14px;
}

.guild-war-replay-head {
  display: grid;
  gap: 6px;
  padding-bottom: 13px;
  border-bottom: 1px solid #754c8d;
}

.guild-war-replay-head h3,
.guild-war-replay-head p { margin: 0; }
.guild-war-replay-head > strong { color: #ffe1a0; font-size: 22px; }
.guild-war-watch-all { justify-self: start; padding: 9px 18px; }
.guild-war-duels { display: grid; gap: 8px; }
.guild-war-duel {
  display: grid;
  grid-template-columns: 22px 48px minmax(0, 1fr) auto 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  color: #fff2d2;
  text-align: left;
  cursor: pointer;
  border: 1px solid #694477;
  border-radius: 5px;
  background: #160e1b;
}
.guild-war-duel:hover,
.guild-war-duel:focus-visible { border-color: #bc70e6; background: #291235; }
.guild-war-duel img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #8651a4; border-radius: 4px; }
.guild-war-duel span:not(.guild-war-duel-number) { display: grid; min-width: 0; }
.guild-war-duel small { color: #d6b5e2; font-size: 11px; }
.guild-war-duel > strong { color: #ffe1a0; }

.guild-war-fight-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 0 4px;
}
.guild-war-fight-heading > span { color: #d8a9f1; font-size: 13px; font-weight: 700; }
.guild-war-fight-heading > strong { color: #fff2d2; font-size: 16px; }
.guild-war-fight-heading > strong span { color: #c59ad5; font-size: 12px; font-weight: 400; }

@media (max-width: 760px) {
  .guild-war-history > button { display: grid; }
  .guild-war-duel { grid-template-columns: 20px 40px minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; }
  .guild-war-duel img { width: 40px; height: 40px; }
  .guild-war-duel > b { display: none; }
  .guild-war-duel > strong { grid-column: 2 / -1; }
}

@media (max-width: 520px) {
  .guild-mode-grid { grid-template-columns: 1fr; min-height: 0; }
  .guild-mode-card { min-height: 230px; }
}

.guild-raid-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.guild-raid-heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: #8feaa7;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-raid-heading > strong {
  flex: 0 0 auto;
  padding: 7px 9px;
  color: #fff1b0;
  background: linear-gradient(180deg, rgba(151, 45, 39, 0.76), rgba(48, 12, 22, 0.86));
  border: 1px solid rgba(255, 135, 96, 0.58);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(227, 59, 70, 0.18);
  font-size: 14px;
}

.guild-raid-subtitle {
  color: #d5c79e;
  font-size: 12px;
  line-height: 1.35;
}

.guild-raid-art {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 12px;
  background-position: center 18%;
  background-size: cover;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #ffd989) 48%, #000);
  border-radius: 8px;
  box-shadow: inset 0 -74px 54px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 240, 188, 0.12);
}

.guild-raid-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 9px 11px;
  background: linear-gradient(90deg, rgba(20, 63, 42, 0.72), rgba(60, 19, 31, 0.72));
  border: 1px solid rgba(118, 240, 147, 0.3);
  border-radius: 7px;
}

.guild-raid-countdown span {
  color: #b9d9bc;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-raid-countdown strong {
  color: #fff1b0;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.guild-raid-countdown.complete {
  border-color: rgba(255, 213, 102, 0.52);
}

.raid-encounter-track {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.raid-encounter-track span {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  color: #7e7868;
  background: rgba(5, 8, 7, 0.72);
  border: 1px solid rgba(205, 205, 174, 0.14);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
}

.raid-encounter-track span.boss {
  color: #ffca8c;
  border-color: rgba(255, 119, 72, 0.56);
  box-shadow: inset 0 0 9px rgba(197, 45, 54, 0.28);
}

.raid-encounter-track span.current {
  color: #071109;
  background: #86e69d;
  border-color: #d8ffe1;
  box-shadow: 0 0 12px rgba(90, 224, 124, 0.58);
}

.raid-encounter-track span.cleared {
  color: #eaffee;
  background: #23663a;
  border-color: #6edf8a;
}

.raid-roster {
  display: grid;
  gap: 6px;
}

.raid-roster > strong {
  color: #d7c996;
  font-size: 11px;
  text-transform: uppercase;
}

.raid-roster > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.raid-roster span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  color: #c8d8c8;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(118, 240, 147, 0.18);
  border-radius: 5px;
  font-size: 11px;
}

.raid-roster span b {
  min-width: 0;
  overflow: hidden;
  color: #effff2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raid-roster p {
  padding: 8px;
  color: #a9a28e;
  background: rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  font-size: 12px;
}

.raid-main-action {
  min-height: 46px;
  color: #f6fff7;
  background: linear-gradient(180deg, #32814a, #153d25);
  border-color: #76df8e;
  box-shadow: inset 0 1px 0 rgba(231, 255, 235, 0.18), 0 0 16px rgba(66, 196, 96, 0.16);
}

.raid-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
}

.raid-test-action {
  min-height: 46px;
  color: #fff0b8;
  background: linear-gradient(180deg, #7a4220, #3d1d13);
  border-color: #e0a15d;
  box-shadow: inset 0 1px 0 rgba(255, 235, 186, 0.17), 0 0 14px rgba(224, 125, 65, 0.16);
}

.raid-main-action.secondary {
  color: #eadfc0;
  background: linear-gradient(180deg, #473d2c, #201a13);
  border-color: #847457;
}

.raid-main-action:disabled {
  min-height: 46px;
  opacity: 0.62;
}

.raid-art-copy > span,
.raid-art-copy > strong {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 0 #060202;
}

.raid-art-copy > span {
  color: var(--theme-accent, #ffd989);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.raid-art-copy > strong {
  color: #fff8df;
  font-size: 20px;
  line-height: 1.05;
}

.raid-hp {
  display: grid;
  gap: 5px;
}

.raid-hp span {
  color: #fff2c8;
  font-size: 13px;
  font-weight: 900;
}

.raid-hp {
  overflow: hidden;
}

.raid-hp::after {
  content: "";
  display: block;
}

.raid-hp i {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, #a11227, #ff6b47);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 80, 70, 0.3);
}

.raid-hp {
  padding: 7px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 230, 160, 0.16);
  border-radius: 7px;
}

.guild-bonuses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.guild-treasury {
  width: max-content;
  min-width: 112px;
  min-height: 38px;
  margin-left: auto;
  display: inline-grid;
  grid-template-columns: 25px auto 27px;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 9px;
  color: #fff1b0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 203, 92, 0.16), transparent 38%),
    rgba(5, 3, 1, 0.42);
  border: 1px solid rgba(235, 186, 83, 0.34);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 239, 180, 0.04);
}

.guild-treasury > strong {
  font-size: 19px;
  line-height: 1;
}

.guild-treasury > i {
  width: 25px;
  height: 25px;
  background: url("assets/currency/gold-coins.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.62));
}

.guild-treasury-plus {
  position: relative;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 249, 190, 0.82), transparent 20%),
    linear-gradient(145deg, #f5d77f, #b57222 72%, #70400f);
  border: 1px solid #ffeaa0;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(88, 43, 7, 0.32),
    inset 0 -3px 5px rgba(75, 34, 5, 0.28),
    0 2px 5px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(230, 189, 112, 0.2);
}

.guild-treasury-plus::before,
.guild-treasury-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 4px;
  background: linear-gradient(#5a2a08, #251004);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 239, 158, 0.52);
  transform: translate(-50%, -50%);
}

.guild-treasury-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.guild-treasury:hover,
.guild-treasury:focus-visible {
  border-color: #e6bd70;
  filter: brightness(1.08);
}

.guild-treasury:hover .guild-treasury-plus,
.guild-treasury:focus-visible .guild-treasury-plus {
  box-shadow:
    inset 0 0 0 1px rgba(88, 43, 7, 0.24),
    inset 0 -3px 5px rgba(75, 34, 5, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.42),
    0 0 13px rgba(255, 218, 119, 0.48);
}

.guild-donation-modal-open {
  overflow: hidden;
}

.guild-donation-modal-card {
  position: relative;
  width: min(430px, 100%);
  border-color: #d5a23f;
  background:
    radial-gradient(circle at 85% 0, rgba(255, 203, 92, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(41, 23, 12, 0.99), rgba(9, 6, 5, 0.99));
  box-shadow: inset 0 0 0 1px rgba(255, 236, 174, 0.12), 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 34px rgba(213, 162, 63, 0.24);
}

.guild-donation-modal-card h2 {
  font-size: 34px;
}

.guild-donation-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #ead8aa;
  background: rgba(8, 5, 3, 0.66);
  border-color: rgba(230, 189, 112, 0.38);
  font-size: 24px;
  line-height: 1;
}

.guild-donation-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(235, 186, 83, 0.26);
  border-radius: 7px;
}

.guild-donation-balance > span {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  background: url("assets/currency/gold-coins.png") center / contain no-repeat;
}

.guild-donation-balance small,
.guild-donation-balance strong {
  display: block;
}

.guild-donation-balance small {
  color: #b7a987;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-donation-balance strong {
  margin-top: 3px;
  color: #fff1b0;
  font-size: 24px;
}

.guild-donation-contribution {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #b7a987;
  font-size: 12px;
}

.guild-donation-contribution strong {
  color: #e8d9b0;
}

.guild-donation-form {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.guild-donation-form label {
  color: #f1cf7c;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-donation-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 6px;
}

.guild-donation-form input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  color: #fff5d2;
  background: rgba(4, 2, 1, 0.66);
  border: 1px solid rgba(235, 186, 83, 0.36);
  border-radius: 6px;
  font: 800 14px Georgia, serif;
}

.guild-donation-form input:focus {
  border-color: #e6bd70;
  outline: 2px solid rgba(230, 189, 112, 0.2);
}

.guild-donation-form button {
  min-height: 42px;
}

.guild-donation-max {
  color: #e4d3a0;
  background: linear-gradient(180deg, #49381d, #21180c);
  border-color: #8c7141;
}

.guild-donation-submit {
  color: #fff8dc;
  background: linear-gradient(180deg, #8d5d19, #4a2b0d);
  border-color: #d5a23f;
}

.guild-bonuses article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid color-mix(in srgb, var(--theme-border, #442311) 58%, transparent);
  border-radius: 7px;
}

.fight-card.raid-progress .fight-result {
  color: #b7ffc6;
  background: rgba(24, 91, 47, 0.86);
  border-color: #68d584;
}

.guild-bonuses span {
  color: var(--theme-muted, #edc783);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-bonuses strong {
  color: var(--theme-accent, #ffd989);
  font-size: 22px;
  line-height: 1;
}

.guild-bonuses button {
  grid-column: 1 / 3;
  min-height: 36px;
}

.guild-raid button:disabled {
  min-height: 46px;
  opacity: 0.86;
}

/* Compact raid dashboard */
.guild-raid {
  gap: 9px;
}

.guild-raid h3 {
  font-size: clamp(23px, 2.5vw, 31px);
  line-height: 1.05;
}

.guild-raid-art {
  min-height: 238px;
  padding: 14px;
  box-shadow: inset 0 -108px 72px rgba(0, 0, 0, 0.82), inset 0 0 0 1px rgba(255, 240, 188, 0.12);
}

.raid-art-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: min(440px, 100%);
}

.raid-progress-chip {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  min-width: 74px;
  padding: 6px 9px;
  color: #f3f7ef;
  background: rgba(4, 9, 7, 0.82);
  border: 1px solid rgba(181, 208, 183, 0.5);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.46);
  text-align: center;
}

.raid-progress-chip strong,
.raid-progress-chip span {
  display: block;
  color: inherit;
  font-style: normal;
  text-shadow: 0 1px 2px #000;
}

.raid-progress-chip strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.raid-progress-chip span {
  margin-top: 3px;
  color: #b9c7b9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.raid-fight-control {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  width: 46px;
  height: 46px;
  min-height: 46px;
  display: grid;
  padding: 0;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.72));
}

.raid-fight-control span {
  width: 46px;
  height: 46px;
  display: block;
  background: url("assets/nav/raid-swords-gray.png") center / contain no-repeat;
}

.raid-fight-control.is-signed {
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 7px rgba(67, 226, 101, 0.46)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.72));
}

.raid-fight-control.is-signed span {
  background-image: url("assets/nav/raid-swords-green.png");
}

.raid-fight-control:not(:disabled):hover,
.raid-fight-control:not(:disabled):focus-visible {
  filter: brightness(1.14) drop-shadow(0 0 8px rgba(151, 255, 174, 0.48)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.72));
}

.guild-raid .raid-fight-control:disabled {
  min-height: 46px;
  cursor: default;
  filter: saturate(0.72);
  opacity: 0.82;
}

.guild-raid-art .raid-hp {
  position: relative;
  width: 100%;
  height: 16px;
  min-height: 16px;
  display: block;
  margin-top: 7px;
  padding: 0;
  overflow: hidden;
  background: rgba(25, 2, 5, 0.9);
  border: 1px solid rgba(255, 181, 173, 0.44);
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 2px 7px rgba(0, 0, 0, 0.4);
}

.guild-raid-art .raid-hp::after {
  content: none;
}

.guild-raid-art .raid-hp i {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(180deg, #e7525b, #9e1525 52%, #6f0916);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 211, 0.38), 0 0 9px rgba(223, 44, 62, 0.38);
}

.guild-raid-art .raid-hp span {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff9e8;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.guild-raid-countdown {
  min-height: 39px;
  padding: 7px 10px;
  background: rgba(6, 13, 10, 0.56);
  border-color: rgba(118, 240, 147, 0.24);
}

.guild-raid-countdown strong {
  font-size: 16px;
}

.raid-details {
  overflow: hidden;
  background: #080b0d;
  border: 1px solid rgba(122, 155, 164, 0.54);
  border-radius: 6px;
  box-shadow: inset 0 0 18px rgba(34, 88, 103, 0.11);
}

.raid-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  color: #d9edf1;
  background: linear-gradient(90deg, #18262d, #11171a);
  border-bottom: 1px solid rgba(122, 155, 164, 0.34);
}

.raid-details-head strong {
  color: #f1fbfd;
  font-size: 12px;
  text-transform: uppercase;
}

.raid-details-head > div {
  display: grid;
  gap: 2px;
  text-align: right;
}

.raid-details-head span {
  color: #91aeb5;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.raid-details-head span + span {
  color: #f3d486;
}

.raid-damage-list {
  display: grid;
  gap: 3px;
  padding: 5px;
}

.raid-damage-row {
  position: relative;
  min-height: 27px;
  display: grid;
  grid-template-columns: 22px minmax(80px, 1fr) auto 48px;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 4px 7px;
  color: #e7edef;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.raid-damage-row > i {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--member-color, #8da3aa) 76%, #111), color-mix(in srgb, var(--member-color, #8da3aa) 68%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--member-color, #8da3aa) 72%, #fff);
}

.raid-damage-row.is-player > i {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--member-color, #8da3aa) 58%, #fff);
}

.raid-damage-row > span,
.raid-damage-row > b,
.raid-damage-row > strong,
.raid-damage-row > em {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-shadow: 0 1px 2px #000;
}

.raid-damage-row > span {
  color: #8fa0a5;
  text-align: center;
}

.raid-damage-row > b {
  overflow: hidden;
  color: #f5fbfc;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raid-damage-row > strong {
  color: #fff4d8;
  text-align: right;
}

.raid-damage-row > strong small {
  display: block;
  color: #f3d486;
  font-size: 9px;
  white-space: nowrap;
}

.raid-damage-row > em {
  color: #aec0c4;
  font-size: 9px;
  font-style: normal;
  text-align: right;
}

.raid-damage-empty {
  padding: 10px;
  color: #91a0a3;
  font-size: 11px;
  text-align: center;
}

.guild-economy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(155px, 0.72fr);
  gap: 0;
  overflow: hidden;
  background: rgba(3, 3, 3, 0.48);
  border: 1px solid rgba(224, 190, 109, 0.34);
  border-radius: 7px;
}

.guild-economy > * {
  min-width: 0;
}

.guild-economy > * + * {
  border-left: 1px solid rgba(224, 190, 109, 0.2);
}

.guild-economy-bonus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
}

.guild-economy-bonus > span {
  grid-column: 1 / 3;
  color: #b8ad91;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.guild-economy-bonuses {
  display: grid;
}

.guild-economy-bonus {
  padding: 7px 9px;
}

.guild-economy-bonus + .guild-economy-bonus {
  border-top: 1px solid rgba(224, 190, 109, 0.18);
}

.guild-economy-treasury {
  display: grid;
  min-height: 100%;
  padding: 8px;
  place-items: center;
}

.guild-economy .guild-treasury {
  width: auto;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  grid-template-columns: 28px auto 18px;
  gap: 7px;
  padding: 0;
  color: #fff6d0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92), 0 0 8px rgba(255, 222, 126, 0.24);
}

.guild-economy .guild-treasury > i {
  width: 28px;
  height: 28px;
}

.guild-economy .guild-treasury > strong {
  overflow: hidden;
  color: inherit;
  font-size: 20px;
  text-overflow: ellipsis;
}

.guild-economy .guild-treasury-plus {
  width: 18px;
  height: 28px;
  display: grid;
  color: #ffd36a;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  place-items: center;
}

.guild-economy .guild-treasury-plus::before {
  content: "+";
  position: static;
  width: auto;
  height: auto;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: 900 24px/1 Georgia, serif;
  text-shadow: 0 2px 0 #3a1000, 0 0 8px rgba(255, 151, 35, 0.82), 0 0 15px rgba(255, 203, 73, 0.4);
  transform: none;
}

.guild-economy .guild-treasury-plus::after {
  display: none;
}

.guild-economy .guild-treasury:hover,
.guild-economy .guild-treasury:focus-visible {
  border: 0;
  filter: brightness(1.12);
}

.guild-economy .guild-treasury:hover .guild-treasury-plus,
.guild-economy .guild-treasury:focus-visible .guild-treasury-plus {
  box-shadow: none;
}

.guild-economy .value-updated {
  animation: guildEconomyValueUpdate 420ms ease-out;
}

@keyframes guildEconomyValueUpdate {
  0% { transform: scale(1); }
  45% { filter: brightness(1.32); transform: scale(1.12); }
  100% { transform: scale(1); }
}

.guild-economy-bonus {
  cursor: help;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.guild-economy-bonus:hover {
  background: rgba(88, 58, 22, 0.18);
  box-shadow: inset 0 0 16px rgba(230, 189, 112, 0.06);
}

.guild-economy-bonus > strong {
  color: #f0d784;
  font-size: 20px;
  line-height: 1;
}

.guild-economy-bonus.xp > strong {
  color: #a9dcf4;
}

.guild-economy-bonus > button {
  width: 38px;
  min-width: 38px;
  min-height: 29px;
  height: 29px;
  padding: 0 5px;
  color: #fff1bd;
  background: linear-gradient(180deg, #6e501d, #30200b);
  border-color: #a58446;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
}

.guild-economy .guild-economy-bonus > button:disabled {
  min-height: 29px;
  color: #a9a08b;
  background: #24221e;
  border-color: #504b41;
  font-size: 10px;
  opacity: 0.78;
}

.guild-economy-bonus > button:has(.guild-upgrade-cost) {
  display: grid;
  grid-template-rows: 16px 12px;
  align-content: center;
  gap: 2px;
  width: auto;
  min-width: 92px;
  height: 40px;
  min-height: 40px;
  padding: 3px 6px;
}

.guild-upgrade-symbol {
  font-size: 16px;
  line-height: 1;
}

.guild-upgrade-cost {
  color: #ffe3a1;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.guild-bonus-tooltip {
  min-width: 230px;
}

@media (max-width: 620px) {
  .guild-economy {
    grid-template-columns: 1fr;
  }

  .guild-economy > * + * {
    border-top: 1px solid rgba(224, 190, 109, 0.2);
    border-left: 0;
  }

  .raid-damage-row {
    grid-template-columns: 20px minmax(60px, 1fr) auto 42px;
  }
}

.tavern-list {
  gap: 12px;
}


.tavern-travel {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 430px;
  padding: 22px;
  overflow: hidden;
  color: #fff2c7;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.1), rgba(11, 6, 3, 0.82)),
    linear-gradient(90deg, rgba(18, 8, 3, 0.82), rgba(18, 8, 3, 0.24)),
    url("assets/login-tavern.png") center / cover;
  border: 3px solid #1a0d07;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 231, 137, 0.18), 0 12px 24px rgba(30, 14, 7, 0.36);
}

.tavern-travel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 217, 121, 0.24), transparent 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.34), transparent 42%);
  pointer-events: none;
}

.travel-copy,
.travel-panel {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.travel-kicker {
  display: inline-block;
  margin-bottom: 7px;
  color: #ffd979;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.travel-copy h3 {
  margin: 0 0 8px;
  color: #fff7d4;
  font-size: 28px;
  line-height: 1.08;
}

.travel-copy p {
  max-width: 620px;
  margin: 0 0 16px;
  color: #f0d399;
  font-size: 15px;
  line-height: 1.45;
}

.travel-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(18, 8, 4, 0.78);
  border: 1px solid rgba(255, 225, 142, 0.28);
  border-radius: 8px;
}

.travel-row,
.travel-rewards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.travel-row strong,
.travel-time {
  min-width: 0;
  overflow-wrap: anywhere;
}

.travel-time {
  color: #fff6d0;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.travel-bar {
  height: 22px;
  overflow: hidden;
  background: #180905;
  border: 2px solid #080302;
  border-radius: 6px;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.65);
}

.travel-bar i {
  display: block;
  width: 0;
  height: 100%;
  background:
    linear-gradient(90deg, #6f3e12, #d89a2a 52%, #ffe08a),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0 8px, transparent 8px 16px);
  transition: width 0.35s linear;
}

.travel-rewards {
  justify-content: flex-start;
  min-height: 38px;
}

.reward-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.reward-display-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.reward-display-entry strong {
  color: #fff6d0;
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92), 0 0 8px rgba(255, 222, 126, 0.24);
}

.reward-display-gold-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: url("assets/currency/gold-coins.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.reward-display-xp-mark {
  color: #8edfff;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(7, 34, 61, 0.95), 0 0 7px rgba(96, 205, 255, 0.62);
}

.reward-display-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  background: linear-gradient(transparent, rgba(255, 218, 126, 0.62), transparent);
}

.reward-display-item {
  color: #e9c373;
  font-size: 12px;
  font-weight: 900;
}

.travel-rewards .reward-display {
  justify-content: flex-start;
}

.travel-skip {
  justify-self: start;
  min-height: 40px;
  padding: 8px 14px;
  color: #fff7d4;
  background: linear-gradient(180deg, #2f741f, #0d3510);
  border: 2px solid #082007;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 231, 137, 0.2), 0 3px 0 #071505;
  font-weight: 900;
}

.travel-skip:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.travel-skip:disabled {
  cursor: not-allowed;
  color: rgba(255, 246, 208, 0.55);
  background: linear-gradient(180deg, rgba(77, 55, 26, 0.8), rgba(23, 13, 7, 0.9));
  border-color: rgba(45, 25, 10, 0.8);
  box-shadow: none;
}

.captcha-stage {
  display: block;
}


.adventure-meter {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 0 1px;
  color: #fff7dd;
  text-transform: uppercase;
}

.adventure-meter-label {
  display: block;
  color: #ffd48a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 1px 0 #4a1c04,
    0 0 10px rgba(255, 170, 54, 0.44);
}

.adventure-meter-track {
  position: relative;
  height: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(39, 14, 2, 0.96), rgba(9, 4, 1, 0.98));
  border: 1px solid rgba(255, 211, 134, 0.62);
  border-radius: 999px;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(82, 29, 5, 0.72),
    0 2px 0 #210b02,
    0 0 16px rgba(255, 133, 20, 0.22);
}

.adventure-meter-track i {
  display: block;
  height: 100%;
  background:
    radial-gradient(circle at 9% 66%, rgba(255, 255, 255, 0.38) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 58%, rgba(255, 248, 204, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 70%, rgba(255, 255, 255, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 60%, rgba(255, 248, 204, 0.28) 0 1px, transparent 2px),
    linear-gradient(180deg, #fff8d9 0 21%, #ffc85c 22% 34%, #ff9b13 58%, #c75100 100%);
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -5px 9px rgba(133, 48, 0, 0.44),
    0 0 14px rgba(255, 143, 36, 0.55);
  transition: width 0.25s ease;
}

.adventure-meter-track strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fffdf0;
  font-size: 15px;
  font-weight: 900;
  text-shadow:
    0 2px 0 rgba(84, 30, 0, 0.9),
    0 0 8px rgba(255, 126, 18, 0.6);
}


.buff-minigame {
  display: grid;
  gap: 10px;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 14px;
  color: #fff4d0;
  background: linear-gradient(145deg, rgba(48, 19, 12, 0.98), rgba(8, 5, 8, 0.99));
  border: 3px solid color-mix(in srgb, var(--theme-accent, #d49a3c) 62%, #170b08);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 168, 0.12), 0 14px 30px rgba(0, 0, 0, 0.46);
}

.minigame-head span {
  color: color-mix(in srgb, var(--theme-accent, #e4b453) 74%, #fff0bc);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.minigame-head h3 {
  margin: 4px 0 0;
  color: #fff9e1;
  font-size: 27px;
  line-height: 1.05;
}

.minigame-head p {
  margin: 7px 0 0;
  color: #ebcd92;
  font-weight: 800;
}

.blackjack-table {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 430px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 3, 2, 0.04) 0 42%, rgba(5, 11, 7, 0.12) 68%, rgba(2, 5, 3, 0.42) 100%),
    url("assets/tavern/blackjack/bobar-blackjack-table-v1.png") center / cover no-repeat;
  border: 2px solid #a8712f;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 227, 157, 0.22),
    inset 0 -32px 42px rgba(0, 0, 0, 0.42),
    0 10px 22px rgba(0, 0, 0, 0.48);
  isolation: isolate;
}

.blackjack-table::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at center 64%, transparent 42%, rgba(0, 0, 0, 0.26) 100%);
}

.blackjack-hand {
  position: absolute;
  z-index: 3;
  left: 50%;
  display: grid;
  gap: 6px;
  justify-items: center;
  transform: translateX(-50%);
}

.dealer-hand { top: 38%; }
.player-hand { bottom: 6%; }

.blackjack-hand-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 31px;
  padding: 3px 7px 3px 12px;
  color: #fff0bc;
  background: linear-gradient(180deg, rgba(31, 15, 8, 0.92), rgba(10, 7, 5, 0.94));
  border: 1px solid rgba(231, 190, 100, 0.55);
  border-radius: 4px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.48);
}

.blackjack-hand-meta strong {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  color: #171008;
  background: linear-gradient(180deg, #ffe9a2, #c99137);
  border: 1px solid #ffe6a0;
  border-radius: 3px;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}

.playing-cards {
  display: flex;
  justify-content: center;
  min-height: 96px;
  padding-left: 26px;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.38));
}

.playing-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 68px;
  height: 94px;
  margin-left: -26px;
  padding: 7px 8px;
  color: #16110d;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 25%),
    linear-gradient(145deg, #fffdf0, #dfd0a9);
  border: 2px solid #3a210e;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(181, 138, 67, 0.34), 0 5px 8px rgba(0, 0, 0, 0.38);
  transform: rotate(calc((var(--card-index, 0) - 1.5) * 1.2deg));
}

.playing-card.is-dealt {
  animation: blackjack-card-deal 0.32s ease-out both;
  animation-delay: calc(var(--card-index, 0) * 55ms);
}

.playing-card.red { color: #9b201d; }
.playing-card b { font-size: 18px; line-height: 1; }
.playing-card i { align-self: center; justify-self: center; font-size: 35px; font-style: normal; }
.playing-card small { justify-self: end; font-size: 15px; font-weight: 900; transform: rotate(180deg); }

.playing-card.card-back {
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(255, 219, 125, 0.16), transparent 36%),
    repeating-linear-gradient(45deg, #34133f 0 7px, #6b2b7c 7px 14px);
  border: 5px solid #e4c778;
  box-shadow: inset 0 0 0 2px #24102d, 0 5px 8px rgba(0, 0, 0, 0.38);
}

.playing-card.card-back i {
  width: 28px;
  height: 28px;
  background:
    radial-gradient(circle, #ffe69a 0 18%, transparent 20%),
    conic-gradient(from 45deg, transparent 0 12%, #d9a94d 13% 20%, transparent 21% 37%, #d9a94d 38% 45%, transparent 46% 62%, #d9a94d 63% 70%, transparent 71% 87%, #d9a94d 88% 95%, transparent 96%);
  border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(255, 214, 116, 0.55));
}

.blackjack-limit {
  position: absolute;
  z-index: 2;
  top: 62%;
  left: 6%;
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  color: #ffe7a3;
  background: radial-gradient(circle, rgba(35, 22, 10, 0.96) 0 58%, rgba(8, 12, 8, 0.94) 60%);
  border: 3px double rgba(224, 190, 103, 0.72);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.48), inset 0 0 14px rgba(255, 194, 74, 0.13);
}

.blackjack-limit span { font-size: 29px; font-weight: 900; line-height: 1; }
.blackjack-limit small { max-width: 66px; font-size: 7px; font-weight: 900; line-height: 1.1; text-align: center; text-transform: uppercase; }

.blackjack-table-rules {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 2px;
  color: rgba(255, 230, 174, 0.76);
  font-size: 9px;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
}

.blackjack-result-banner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  color: #fff0bd;
  background: linear-gradient(145deg, rgba(35, 17, 8, 0.96), rgba(8, 8, 7, 0.97));
  border: 1px solid rgba(228, 193, 104, 0.62);
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.58);
}

.blackjack-result-banner strong {
  color: #ffcf60;
  font-size: 17px;
}

.blackjack-result-banner span {
  color: #e6d6af;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.blackjack-game.won .blackjack-result-banner {
  border-color: rgba(124, 242, 165, 0.72);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.58), 0 0 20px rgba(65, 210, 123, 0.22);
}

.blackjack-game.won .blackjack-result-banner strong { color: #baffca; }

@keyframes blackjack-card-deal {
  from {
    opacity: 0;
    transform: translateY(-20px) rotate(calc((var(--card-index, 0) - 1.5) * 1.2deg));
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(calc((var(--card-index, 0) - 1.5) * 1.2deg));
  }
}

.minigame-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.minigame-actions .ghost { margin-right: auto; }


@media (max-width: 680px) {
  .blackjack-table {
    aspect-ratio: auto;
    min-height: 440px;
    background-position: 50% center;
  }
  .dealer-hand { top: 39%; }
  .player-hand { bottom: 8%; }
  .playing-card { width: 58px; height: 82px; }
  .blackjack-limit {
    top: 61%;
    left: 8px;
    width: 68px;
    height: 68px;
  }
  .blackjack-result-banner {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .blackjack-table-rules { display: none; }
  .minigame-actions { flex-wrap: wrap; }
}

.leaderboard-stage {
  display: block;
}

.leaderboard-stage.leaderboard-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.leaderboard-entry {
  min-height: 350px;
}

.leaderboard-back {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 8px 14px;
  color: #fff4d1;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #a855f7) 58%, #20152a);
  border-radius: 6px;
  background: rgba(7, 5, 13, 0.9);
}

.leaderboard-back:hover,
.leaderboard-back:focus-visible {
  border-color: #e0b4ff;
  background: rgba(25, 14, 36, 0.96);
}

.leaderboard-empty {
  margin-top: 24px;
  color: #ead1ff;
}

.leaderboard-empty h3 {
  margin: 0 0 8px;
  color: #fff7d9;
}

body.pvp-view .action-panel > #viewLabel,
body.pvp-view .action-panel > #viewText {
  display: none;
}

body.leaderboard-view .action-panel > #viewLabel {
  display: none;
}

#actions.arena-stage {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  align-content: start;
  padding: 20px 22px 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(6, 5, 11, 0.76), rgba(7, 5, 10, 0.04) 34%, rgba(6, 4, 9, 0.3) 64%, rgba(6, 4, 9, 0.82)), url("assets/arena-selection-v1.png") center / cover no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.arena-overview-head {
  display: flex;
  align-items: start;
  gap: 28px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255, 218, 153, 0.4);
  text-shadow: 0 2px 5px #000;
}

.arena-overview-head h2 {
  flex: 1;
  margin: 0;
  color: #fff0c8;
  font-size: 30px;
  line-height: 1;
}

.arena-overview-head div {
  display: grid;
  gap: 2px;
}

.arena-overview-head div:last-child {
  min-width: 124px;
}

.arena-overview-head span {
  color: #e7c9a4;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.arena-overview-head strong {
  color: #fff4d4;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.arena-overview-head .arena-overview-honor {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arena-overview-honor img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.arena-overview-head .arena-overview-honor span {
  color: inherit;
  font-size: inherit;
  line-height: 1;
}

.arena-opponents {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  align-self: start;
}

.arena-opponent {
  position: relative;
  min-width: 0;
  min-height: 290px;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  color: #fff7dc;
  background: #090710;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.8));
}

.arena-opponent-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090710;
  border-radius: inherit;
}

.arena-opponent-portrait {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.arena-opponent-portrait:hover,
.arena-opponent-portrait:focus-visible {
  filter: brightness(1.16);
  outline: 2px solid #ffde92;
  outline-offset: -3px;
}

.arena-opponent-art::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(9, 6, 13, 0.48) 45%, #09070d 92%);
  pointer-events: none;
}

.arena-opponent-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.arena-opponent-level {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  pointer-events: none;
  color: #fff5d1;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

.arena-opponent-info {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 8px;
  padding: 8px;
  pointer-events: none;
  text-align: center;
}

.arena-opponent-info h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 5px #000;
}

.arena-opponent-honor {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  color: #ffe2a0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}

.arena-opponent-info button {
  width: 100%;
  min-height: 34px;
  padding: 5px;
  pointer-events: auto;
}

.arena-empty {
  color: #dfc9ef;
}

.arena-profile-back {
  width: auto;
  min-height: 36px;
  margin-bottom: 12px;
  padding: 5px 14px;
  justify-self: start;
}

.arena-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.arena-profile-art {
  position: relative;
  min-width: 0;
  max-height: 740px;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: #0a0810;
  border: 2px solid #8752b6;
  border-radius: 6px;
}

.arena-profile-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.arena-profile-art figcaption {
  position: absolute;
  inset: auto 12px 29px;
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  color: #fff7dc;
  background: rgba(13, 8, 21, 0.86);
  border: 1px solid rgba(209, 167, 241, 0.4);
  border-radius: 5px;
  text-align: center;
}

.arena-profile-art figcaption strong {
  font-size: 17px;
}

.arena-profile-art figcaption span {
  color: #d9b8f2;
  font-size: 12px;
}

.arena-profile-xp {
  position: absolute;
  inset: auto 0 0;
  height: 22px;
  overflow: hidden;
  background: rgba(5, 10, 18, 0.92);
  border-top: 1px solid #83c9ee;
}

.arena-profile-xp i {
  position: absolute;
  inset: 0 auto 0 0;
  background: #60b9e8;
}

.arena-profile-xp span {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 1px 3px #000;
}

.arena-profile-details {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.arena-profile-details > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 16px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid #754c8d;
}

body.pvp-view .action-panel:has(.arena-profile-layout) > #viewTitle {
  display: none;
}

.arena-profile-details > header span {
  color: #d5b2e9;
  font-size: 13px;
  font-weight: 900;
}

.arena-profile-details > header strong {
  color: #ffe2a0;
  font-size: 18px;
}

.arena-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(72px, auto));
  gap: 8px;
  align-self: start;
  margin: 0;
}

.arena-profile-stat {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 11px;
  background: #271334;
  border: 1px solid #79459d;
  border-radius: 5px;
}

.arena-profile-stat.primary-stat {
  border-color: #c782e9;
  box-shadow: inset 0 0 0 1px rgba(199, 130, 233, 0.28);
}

.arena-profile-stat dt {
  color: #d4a9eb;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.arena-profile-stat dd {
  margin: 0;
  color: #fff7dc;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.arena-profile-stat small {
  color: #cfb9dd;
  font-size: 10px;
  font-weight: 800;
}

.arena-profile-stat:nth-child(1) { grid-column: 1; grid-row: 1; }
.arena-profile-stat:nth-child(2) { grid-column: 1; grid-row: 2; }
.arena-profile-stat:nth-child(3) { grid-column: 1; grid-row: 3; }
.arena-profile-stat:nth-child(4) { grid-column: 2; grid-row: 1; }
.arena-profile-stat:nth-child(5) { grid-column: 2; grid-row: 2; }

.arena-profile-actions {
  display: grid;
  gap: 8px;
  align-self: start;
}

.arena-profile-actions > button {
  min-height: 44px;
}

.arena-profile-actions p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: #d3b4e7;
  font-size: 12px;
  font-weight: 800;
}

.arena-profile-actions strong {
  color: #ffe2a0;
  font-variant-numeric: tabular-nums;
}

body.quest-running:has(.nav-button[data-nav="quest"].active) .scene {
  display: none;
}

body:has(#actions.captcha-stage) .scene {
  display: none;
}

.character-screen .character-paper { position: relative; }
.character-equipment { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.character-equipment[hidden] { display: none; }
.arena-profile-equipment { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.arena-profile-equipment[hidden] { display: none; }
.arena-profile-art figcaption,
.arena-profile-xp { z-index: 3; }
.character-equipped-item {
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  display: grid;
  place-items: center;
  width: 60px;
  height: 64px;
  background: linear-gradient(145deg, rgba(34, 25, 42, 0.96), rgba(7, 8, 13, 0.97));
  border: 1px solid color-mix(in srgb, var(--theme-accent, #b66dff) 68%, #303039);
  border-radius: 5px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}
.character-equipment .character-equipped-item {
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
.character-equipment .character-equipped-item:hover,
.character-equipment .character-equipped-item:focus-visible {
  border-color: #f0d3ff;
  box-shadow: 0 0 0 2px rgba(224, 176, 255, 0.42), 0 0 16px rgba(171, 88, 241, 0.55);
  outline: none;
}
.character-equipped-item .item-icon { width: 54px; height: 54px; }
.character-equipped-item .item-icon img { width: 100%; height: 100%; object-fit: contain; }
.character-equipment-toggle {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  color: #fff0c9;
  background: rgba(10, 6, 16, 0.78);
  border: 1px solid #8756a6;
  border-radius: 4px;
  font-size: 11px;
}
.character-equipment-toggle input { accent-color: #bb80ef; }
.topnav button[data-nav="leaderboard"] { gap: 5px; padding-right: 6px; font-size: 13px; }
@media (max-width: 620px) {
  .character-equipped-item { width: 48px; height: 52px; }
  .character-equipped-item .item-icon { width: 44px; height: 44px; }
  .character-equipped-item[data-slot="weaponMain"],
  .character-equipped-item[data-slot="weaponOff"] { top: 78%; }
}

@media (max-width: 900px) {
  .arena-profile-layout { grid-template-columns: 1fr; }
  .arena-profile-art { width: min(100%, 520px); margin-inline: auto; }
}

@media (max-width: 1050px) {
  .arena-opponents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  #actions.arena-stage { padding: 14px 12px; }
  .arena-overview-head { flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
  .arena-overview-head h2 { flex-basis: 100%; font-size: 24px; }
  .arena-overview-head div:last-child { min-width: 0; }
  .arena-opponents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-opponent:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}

.arena-search {
  display: block;
  width: min(100%, 320px);
  margin: 16px 0 10px;
  padding: 10px 12px;
  color: #fff7d9;
  background: #110c18;
  border: 1px solid #8050a5;
  border-radius: 6px;
}

.ranking-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}

.ranking-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dcb9e9;
  font-size: 12px;
  font-weight: 900;
}

.ranking-controls select {
  min-height: 34px;
  padding: 5px 24px 5px 8px;
  color: #fff7d9;
  background: #160d20;
  border: 1px solid #8050a5;
  border-radius: 5px;
  font: inherit;
}

.guild-section-heading .ranking-controls {
  margin: 0 auto 0 0;
}

.ranking-controls .arena-search {
  flex: 1 1 220px;
  margin: 0 0 0 auto;
}

.arena-leaderboard,
.guild-leaderboard {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.arena-leaderboard-row,
.guild-leaderboard-row {
  min-width: 0;
  color: #fff7d9;
  background: rgba(9, 6, 15, 0.78);
  border: 1px solid rgba(180, 106, 233, 0.45);
  border-radius: 6px;
}

.arena-leaderboard-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(130px, 0.5fr) 130px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.arena-leaderboard-row[hidden] {
  display: none;
}

.arena-rank {
  color: #f5c86d;
  font-weight: 900;
}

.arena-identity,
.guild-rank-identity {
  display: grid;
  min-width: 0;
}

.arena-identity strong,
.guild-rank-identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-identity span,
.guild-rank-identity small,
.arena-class {
  color: #dcb9e9;
  font-size: 12px;
}

.arena-honor {
  color: #f5c86d;
  text-align: right;
  white-space: nowrap;
}

.guild-leaderboard-row summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 12px;
  padding: 13px 36px 13px 14px;
  cursor: pointer;
}

.guild-rank-roster {
  border-top: 1px solid rgba(180, 106, 233, 0.35);
}

.guild-rank-roster > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.6fr) 100px;
  gap: 10px;
  padding: 7px 14px;
  font-size: 13px;
}

.guild-rank-roster > div + div {
  border-top: 1px solid rgba(180, 106, 233, 0.18);
}

.guild-rank-roster span:last-child {
  color: #f5c86d;
  text-align: right;
}

.inventory-stage {
  display: block;
}

.action-panel:has(#actions.inventory-stage) {
  justify-self: start;
  width: min(100%, 1000px);
}

.action-panel:has(#actions.inventory-stage) > p:not(.eyebrow) {
  max-width: 560px;
}

.inventory-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  justify-items: stretch;
  margin-top: 18px;
}

.inventory-subnav {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  gap: 8px;
  width: min(100%, 460px);
  margin-top: 14px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 213, 107, 0.16);
  border-radius: 8px;
}

.inventory-subnav button {
  min-height: 36px;
  padding: 8px 12px;
  color: var(--theme-muted, #d5c28f);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.inventory-subnav button.active {
  color: #fffdf2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent, #b26aff) 22%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(240, 213, 107, 0.42);
}

.inventory-layout.seal-only {
  grid-template-columns: 1fr;
}

.seal-view-panel {
  padding: 22px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--theme-accent, #f5c85b) 14%, transparent), transparent 32%),
    linear-gradient(155deg, rgba(11, 13, 22, 0.96), rgba(4, 6, 12, 0.98));
}

.seal-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(239, 205, 118, 0.18);
}

.seal-overview-head > div:first-child > span {
  color: var(--theme-muted, #d9bd78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.seal-overview-head h3 {
  margin: 3px 0 7px;
  color: var(--theme-accent, #f5cc6b);
  font-size: 32px;
  line-height: 1;
}

.seal-overview-head p {
  max-width: 620px;
  margin: 0;
  color: #d8cfb8;
  font-size: 13px;
  line-height: 1.45;
}

.universal-seal {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 38px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  min-width: 148px;
  padding: 10px 13px;
  background: rgba(249, 215, 124, 0.08);
  border: 1px solid rgba(249, 215, 124, 0.38);
  border-radius: 7px;
}

.universal-seal img,
.seal-shard img {
  display: block;
  width: 34px;
  height: 34px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(240, 187, 71, 0.34));
}

.universal-seal img {
  grid-row: 1 / 3;
  align-self: center;
  width: 46px;
  height: 46px;
}

.universal-seal span,
.seal-shard span {
  color: #d9cda7;
  font-size: 11px;
  font-weight: 800;
}

.universal-seal strong {
  color: #fff3be;
  font-size: 20px;
}

.seal-shard-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 0;
}

.seal-shard {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 226, 155, 0.12);
  border-radius: 6px;
}

.seal-shard span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seal-shard strong {
  color: #fff2c2;
  font-size: 14px;
}

.seal-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.seal-slot-card {
  min-width: 0;
  padding: 13px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 226, 155, 0.12);
  border-radius: 7px;
}

.seal-slot-card.has-passive {
  border-color: color-mix(in srgb, var(--theme-accent, #f5ca66) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.seal-slot-card header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.seal-slot-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--theme-accent, #f2c866) 34%, transparent));
}

.dungeon-seal-stat dd {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.dungeon-seal-stat img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(235, 183, 66, 0.35));
}

.seal-slot-card h4 {
  margin: 0;
  color: #fff0bd;
  font-size: 16px;
}

.seal-slot-card header small {
  color: #a99f86;
  font-size: 10px;
}

.seal-slot-card header b {
  color: var(--theme-accent, #f2c866);
  font-size: 12px;
}

.seal-rank-track {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  margin: 10px 0;
}

.seal-rank-track i {
  height: 4px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 2px;
}

.seal-rank-track i.filled {
  background: var(--theme-accent, #f2c866);
  box-shadow: 0 0 6px color-mix(in srgb, var(--theme-accent, #f2c866) 45%, transparent);
}

.seal-passive-list {
  display: grid;
  gap: 5px;
}

.seal-passive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 7px 9px;
  color: #d8d0ba;
  text-align: left;
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.seal-passive:hover,
.seal-passive.active {
  background: color-mix(in srgb, var(--theme-accent, #f2c866) 10%, rgba(0, 0, 0, 0.3));
  border-color: color-mix(in srgb, var(--theme-accent, #f2c866) 46%, transparent);
}

.seal-passive span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.seal-passive strong {
  color: #f7edd4;
  font-size: 12px;
}

.seal-passive small {
  overflow: hidden;
  color: #9e9684;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seal-passive b {
  color: #f2d17c;
  font-size: 11px;
  white-space: nowrap;
}

.seal-upgrade {
  width: 100%;
  margin-top: 9px;
  min-height: 34px;
  color: #241804;
  background: linear-gradient(180deg, #f4d27d, #b9822d);
  border-color: #f9df91;
}

.seal-upgrade:disabled {
  color: #837a67;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
}

.inventory-workbench {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  margin-top: 0;
}

.inventory-view-panel {
  --inventory-slot-size: 76px;
  --inventory-icon-size: 60px;
  --inventory-gap: 10px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: 18px 20px 20px;
  overflow: hidden;
  border-radius: 8px;
}

.storage-view-panel {
  justify-self: stretch;
}

.inventory-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.inventory-view-head span {
  color: var(--theme-muted, #edc783);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-view-head h3 {
  margin: 2px 0 0;
  color: var(--theme-accent, #ffd989);
  font-size: 32px;
  line-height: 1;
}

.inventory-view-head strong {
  flex: 0 0 auto;
  min-width: 86px;
  padding: 8px 10px;
  color: var(--theme-ink, #fff5d8);
  font-size: 17px;
  line-height: 1;
  text-align: center;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #ffd989) 28%, transparent);
  border-radius: 7px;
}

.inventory-capacity-bar {
  height: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 226, 155, 0.18);
  border-radius: 999px;
}

.inventory-capacity-bar i {
  display: block;
  height: 100%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-accent, #ffd989) 74%, #5bc2ff), color-mix(in srgb, var(--theme-accent, #ffd989) 82%, #ffffff));
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-glow, #a66cff) 52%, transparent);
}

.inventory-hint {
  max-width: calc(var(--inventory-slot-size) * 4 + var(--inventory-gap) * 3);
  margin: 9px 0 0;
  color: #ead6a9;
  font-size: 13px;
  line-height: 1.3;
}

.inventory-view-panel .inventory-grid {
  grid-template-columns: repeat(4, var(--inventory-slot-size));
  gap: var(--inventory-gap);
  justify-content: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--theme-accent, #ffd989) 10%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(8, 5, 16, 0.66), rgba(2, 3, 8, 0.82));
  border: 1px solid color-mix(in srgb, var(--theme-accent, #ffd989) 18%, transparent);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 0 24px rgba(0, 0, 0, 0.34);
}

.storage-capacity-bar i {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-glow, #a66cff) 64%, #5bc2ff), color-mix(in srgb, var(--theme-accent, #ffd989) 72%, #ffffff));
}

.inventory-view-panel .inventory-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: var(--inventory-slot-size);
  min-height: 0;
  padding: 4px;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 226, 155, 0.025);
  border-color: rgba(255, 226, 155, 0.07);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.inventory-view-panel .inventory-slot.empty {
  cursor: default;
  opacity: 0.42;
  background:
    linear-gradient(145deg, rgba(255, 226, 155, 0.035), rgba(0, 0, 0, 0.08));
  border-color: rgba(255, 226, 155, 0.08);
  border-style: solid;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.inventory-view-panel .inventory-slot.filled {
  cursor: grab;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.inventory-view-panel .inventory-slot.filled:hover {
  background: color-mix(in srgb, var(--theme-accent, #ffd989) 7%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent, #ffd989) 28%, transparent);
  filter: none;
}

.inventory-view-panel .inventory-slot.filled:hover .item-icon {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--theme-accent, #ffd989) 72%, #ffffff);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.34),
    0 0 12px color-mix(in srgb, var(--theme-glow, #a66cff) 44%, transparent);
}

.inventory-view-panel .inventory-slot.rarity-epic {
  border-color: transparent;
  box-shadow: none;
}

.inventory-view-panel .inventory-slot.rarity-rare {
  border-color: transparent;
}

.inventory-view-panel .inventory-item-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--inventory-slot-size) - 6px);
  height: calc(var(--inventory-slot-size) - 6px);
  margin: 0;
}

.inventory-view-panel .inventory-item-frame .item-icon {
  width: var(--inventory-icon-size);
  height: var(--inventory-icon-size);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.inventory-view-panel .inventory-upgrade-badge {
  position: absolute;
  right: -7px;
  top: -5px;
  min-width: 24px;
  padding: 2px 5px;
  color: #fff8dc;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background: linear-gradient(145deg, #7b3cff, #231044);
  border: 1px solid rgba(238, 209, 255, 0.45);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(162, 90, 255, 0.48);
}

.inventory-view-panel .inventory-equipped-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 6px;
  color: #d8ffe9;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(21, 82, 55, 0.78);
  border: 1px solid rgba(154, 255, 204, 0.34);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(82, 255, 172, 0.22);
}

.inventory-view-panel .inventory-item-name {
  display: block;
  align-self: start;
  margin: 0;
  overflow: hidden;
  color: #fff2c6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: normal;
}

.inventory-view-panel .inventory-item-meta {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: var(--theme-muted, #edc783);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inventory-view-panel .inventory-empty-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  color: rgba(255, 232, 170, 0.28);
  font-size: 18px;
  font-weight: 900;
}

.inventory-workbench article {
  min-width: 0;
  padding: 14px;
  color: #fff3cf;
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--theme-accent, #d8993a) 16%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-panel-soft, rgba(49, 24, 12, 0.86)) 82%, transparent), color-mix(in srgb, var(--theme-dark, #1d0f09) 94%, #000));
  border: 1px solid color-mix(in srgb, var(--theme-border, #442311) 70%, #000);
  border-radius: 8px;
}

.inventory-workbench article {
  position: relative;
  min-height: 126px;
  overflow: hidden;
}

.inventory-workbench article::after {
  content: attr(data-kind);
  position: absolute;
  right: 10px;
  top: 10px;
  color: color-mix(in srgb, var(--theme-accent, #ffd989) 34%, transparent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inventory-workbench span {
  color: var(--theme-muted, #edc783);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-workbench strong {
  display: block;
  margin-top: 6px;
  color: var(--theme-accent, #ffd989);
  font-size: 28px;
  line-height: 1;
}

.inventory-workbench p {
  margin-top: 8px;
  color: #ead6a9;
  font-size: 13px;
  line-height: 1.35;
}

.dungeon-leaderboard {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 54px minmax(150px, 0.7fr) minmax(120px, 0.42fr) minmax(0, 1.5fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  color: #fff4d4;
  background:
    radial-gradient(circle at 88% 0, rgba(177, 86, 255, 0.18), transparent 40%),
    linear-gradient(145deg, rgba(27, 8, 44, 0.92), rgba(7, 3, 12, 0.96));
  border: 2px solid color-mix(in srgb, var(--theme-border, #8d3df1) 64%, #000);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(245, 223, 255, 0.08);
}

.leaderboard-rank,
.leaderboard-score,
.leaderboard-dungeon-cell {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(220, 163, 255, 0.22);
  border-radius: 7px;
}

.leaderboard-rank {
  place-items: center;
  color: #ffd989;
  font-size: 18px;
  font-weight: 900;
}

.leaderboard-player {
  display: grid;
  align-content: center;
  min-width: 0;
}

.leaderboard-player strong {
  overflow: hidden;
  color: #fff7d9;
  font-size: 20px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-player span,
.leaderboard-score span,
.leaderboard-score em,
.leaderboard-dungeon-cell span,
.leaderboard-dungeon-cell em {
  overflow: hidden;
  color: #dca3ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.leaderboard-score strong,
.leaderboard-dungeon-cell strong {
  color: #fff8df;
  font-size: 18px;
  line-height: 1.05;
}

.leaderboard-score em {
  margin-top: 3px;
  color: #ead1ff;
}

.leaderboard-score {
  border-color: rgba(255, 217, 137, 0.36);
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 217, 137, 0.18), transparent 40%),
    rgba(0, 0, 0, 0.34);
}

.leaderboard-score strong {
  color: #ffd989;
  font-size: 24px;
}

.leaderboard-dungeon-cell em {
  margin-top: 2px;
  color: #ffd989;
}

.leaderboard-dungeon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.leaderboard-dungeon-cell {
  min-height: 88px;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(5, 3, 10, 0.08), rgba(5, 3, 10, 0.66) 52%, rgba(5, 3, 10, 0.94)),
    var(--dungeon-cover) center / cover no-repeat,
    #140b1f;
}

.leaderboard-dungeon-cell span,
.leaderboard-dungeon-cell strong,
.leaderboard-dungeon-cell em {
  text-shadow: 0 1px 3px #000, 0 2px 7px #000;
}

.leaderboard-dungeon-cell.hard {
  border-color: rgba(255, 217, 137, 0.36);
}

@media (max-width: 820px) {
  .leaderboard-stage.leaderboard-selector {
    grid-template-columns: 1fr;
  }

  .leaderboard-entry {
    min-height: 180px;
  }

  body.leaderboard-view .action-panel,
  body.leaderboard-view #actions {
    min-width: 0;
  }

  .leaderboard-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(100px, 0.5fr);
  }

  .leaderboard-dungeon-grid {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .arena-leaderboard-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding: 9px;
  }

  .arena-class {
    grid-column: 2;
    grid-row: 2;
  }

  .arena-leaderboard-row .arena-honor {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 13px;
  }

  .guild-leaderboard-row summary {
    grid-template-columns: 30px minmax(0, 1fr) 90px;
    gap: 8px;
    padding: 10px 24px 10px 9px;
  }

  .guild-rank-roster > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .guild-rank-roster > div span:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .guild-rank-roster > div span:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .leaderboard-row {
    grid-template-columns: 42px minmax(0, 1fr) 96px;
    gap: 6px;
    padding: 6px;
  }

  .leaderboard-dungeon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-player strong {
    font-size: 17px;
  }

  .leaderboard-score strong {
    font-size: 20px;
  }
}

.fight-stage {
  display: block;
}

body:has(#actions.fight-stage) .scene {
  display: none;
}

.action-panel:has(#actions.fight-stage) > #viewLabel,
.action-panel:has(#actions.fight-stage) > #viewTitle,
.action-panel:has(#actions.fight-stage) > #viewText,
.action-panel:has(#actions.fight-stage) > #tavernTokenBadge,
.action-panel:has(#actions > .tavern-travel) > #viewLabel,
.action-panel:has(#actions > .tavern-travel) > #viewTitle,
.action-panel:has(#actions > .tavern-travel) > #viewText {
  display: none;
}

.action-panel:has(#actions.fight-stage) #actions,
.action-panel:has(#actions > .tavern-travel) #actions {
  margin-top: 0;
}

.action-panel:has(#actions.fight-stage) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 42px);
  overflow: hidden;
}

.action-panel:has(#actions.fight-stage) #actions {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.fight-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  color: #fff2c8;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(135deg, rgba(24, 9, 5, 0.94), rgba(7, 4, 9, 0.96));
  border: 3px solid #130805;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 158, 0.14), 0 12px 24px rgba(0, 0, 0, 0.36);
}

.fight-card.victory {
  border-color: #b88a34;
}

.fight-card.defeat {
  border-color: #703033;
}

.fight-card.pending {
  border-color: #594938;
}

.fight-card.dungeon-fight {
  background-color: #0a0810;
  background-image:
    linear-gradient(90deg, rgba(9, 5, 14, 0.68), rgba(9, 5, 14, 0.42) 32%, rgba(9, 5, 14, 0.48) 50%, rgba(9, 5, 14, 0.42) 68%, rgba(9, 5, 14, 0.68)),
    var(--dungeon-fight-background);
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fight-card.dungeon-fight .combatant-art {
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

.fight-card.dungeon-fight.victory .hero-side .combatant-art,
.fight-card.dungeon-fight.defeat .enemy-side .combatant-art,
.fight-card.arena-fight.victory .hero-side .combatant-art,
.fight-card.arena-fight.defeat .enemy-side .combatant-art,
.fight-card.tavern-fight.victory .hero-side .combatant-art,
.fight-card.tavern-fight.defeat .enemy-side .combatant-art {
  border-color: #57d983;
  box-shadow: inset 0 -44px 50px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(167, 255, 189, 0.68), 0 0 18px rgba(59, 207, 111, 0.5);
}

.fight-card.dungeon-fight.victory .enemy-side .combatant-art,
.fight-card.dungeon-fight.defeat .hero-side .combatant-art,
.fight-card.arena-fight.victory .enemy-side .combatant-art,
.fight-card.arena-fight.defeat .hero-side .combatant-art,
.fight-card.tavern-fight.victory .enemy-side .combatant-art,
.fight-card.tavern-fight.defeat .hero-side .combatant-art {
  border-color: #e15b65;
  box-shadow: inset 0 -44px 50px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 177, 177, 0.64), 0 0 18px rgba(209, 56, 71, 0.48);
}

.combatant {
  position: relative;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) 32px auto;
  gap: 7px;
  min-width: 0;
}

.fight-stage .combatant {
  grid-template-rows: minmax(300px, 1fr) 32px auto;
}

.combatant-art {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background-position: center 18%;
  background-size: cover;
  border: 3px solid rgba(255, 233, 176, 0.24);
  border-radius: 8px;
  box-shadow: inset 0 -44px 50px rgba(0, 0, 0, 0.44);
}

.fight-stage .combatant-art {
  min-height: 0;
}

.hero-art {
  background:
    linear-gradient(180deg, rgba(255, 220, 126, 0.08), rgba(8, 20, 36, 0.28)),
    url("assets/alex-voidflame.png") center 16% / cover no-repeat;
}

body.theme-chris .hero-art {
  background:
    linear-gradient(180deg, rgba(120, 255, 74, 0.08), rgba(3, 12, 5, 0.34)),
    url("assets/chris-warlock.png") center 14% / cover no-repeat;
}

body.theme-lena .hero-art {
  background:
    linear-gradient(180deg, rgba(209, 123, 102, 0.08), rgba(16, 6, 6, 0.34)),
    url("assets/lena-arena.png") center 12% / cover no-repeat;
}

body.theme-marco .hero-art {
  background:
    linear-gradient(180deg, rgba(180, 108, 255, 0.08), rgba(5, 3, 9, 0.34)),
    url("assets/marco-voidblade.png") center 14% / cover no-repeat;
}

body.theme-max .hero-art {
  background:
    linear-gradient(180deg, rgba(226, 201, 107, 0.08), rgba(8, 16, 8, 0.32)),
    url("assets/max-naturemonk.png") center 12% / cover no-repeat;
}

body.theme-tobias .hero-art {
  background:
    linear-gradient(180deg, rgba(115, 220, 255, 0.08), rgba(3, 8, 20, 0.34)),
    url("assets/tobias-storm.png") center 14% / cover no-repeat;
}

body.theme-norman .hero-art {
  background:
    linear-gradient(180deg, rgba(155, 181, 200, 0.08), rgba(7, 16, 24, 0.34)),
    url("assets/norman-harbor.png") center 12% / cover no-repeat;
}

body.theme-bambi .hero-art {
  background:
    linear-gradient(180deg, rgba(184, 190, 174, 0.08), rgba(8, 11, 9, 0.34)),
    url("assets/bambi-rain.png") center 24% / cover no-repeat;
}

.enemy-enemy-void-knight {
  background-position: center 14%;
}

.enemy-enemy-ember-warlord {
  background-position: center 12%;
}

.enemy-enemy-fel-stalker {
  background-position: center 16%;
}

.enemy-card-art {
  background-color: #050209;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:
    inset 0 0 28px rgba(191, 72, 255, 0.14),
    0 0 18px rgba(191, 92, 255, 0.24);
}

.combatant-name {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 2;
  padding: 22px 8px 7px;
  overflow: hidden;
  color: #fff7d9;
  font-size: 18px;
  line-height: 1.1;
  text-align: left;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(0, 0, 0, 0.96);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combatant-name::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(3, 2, 5, 0.88));
}

.fight-card.dungeon-fight .enemy-side .combatant-name,
.fight-card.tavern-fight .enemy-side .combatant-name {
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.combatant-level {
  display: inline-block;
  color: #ffe0a1;
  font-size: 0.8em;
  white-space: nowrap;
}

.combatant small {
  color: #d8c08e;
  font-weight: 900;
}

.combat-bar {
  position: relative;
  height: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, #1d0b0d, #080405);
  border: 2px solid #280b0e;
  border-radius: 7px;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.82),
    0 1px 0 rgba(255, 224, 218, 0.12);
}

.combat-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  display: block;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 220, 207, 0.42), transparent 40%),
    linear-gradient(90deg, #791723, #c72d38 54%, #f36b58);
  box-shadow:
    inset 0 -4px 8px rgba(62, 4, 10, 0.48),
    0 0 10px rgba(220, 52, 64, 0.3);
  transition: width 540ms cubic-bezier(0.16, 0.74, 0.24, 1), background 220ms ease;
  will-change: width;
}

.combat-bar i::after {
  content: "";
  position: absolute;
  inset: 2px 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
}

.combat-bar i.no-transition {
  transition: none;
}

.combat-bar.low i {
  background:
    linear-gradient(180deg, rgba(255, 213, 198, 0.4), transparent 40%),
    linear-gradient(90deg, #67131c, #ae2630 58%, #df5545);
  box-shadow: inset 0 -4px 8px rgba(57, 3, 8, 0.5), 0 0 9px rgba(204, 43, 52, 0.28);
}

.combat-bar.critical i {
  background:
    linear-gradient(180deg, rgba(255, 205, 189, 0.4), transparent 40%),
    linear-gradient(90deg, #490910, #9d1521 58%, #e92e3f);
  box-shadow: inset 0 -4px 8px rgba(55, 2, 8, 0.54), 0 0 12px rgba(239, 40, 55, 0.48);
}

.combat-hp {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 0 9px;
  color: #ffffff;
  font-size: clamp(11px, 1.08vw, 15px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000000, 0 0 4px rgba(0, 0, 0, 0.94);
  pointer-events: none;
}

.combat-hp em {
  color: #ffe1dc;
  font-size: 0.76em;
  font-style: normal;
  letter-spacing: 0;
}

.combat-hp b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combatant.hit {
  --combat-hit-shift: 5px;
}

.combatant.hero-side.hit {
  --combat-hit-shift: -5px;
}

.combatant.hit .combatant-art {
  animation: combat-impact 380ms ease-out;
}

.combat-stats {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(18, 11, 8, 0.94), rgba(7, 5, 8, 0.96));
  border: 2px solid rgba(211, 171, 91, 0.42);
  border-radius: 4px;
  box-shadow: inset 0 0 12px rgba(255, 222, 148, 0.05);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.combat-stats div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 226, 158, 0.1);
}

.combat-stats div:last-child {
  border-bottom: 0;
}

.combat-stats dt {
  color: #d8b774;
  font-weight: 900;
  text-transform: uppercase;
}

.combat-stats dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff5d4;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fight-center {
  display: grid;
  align-content: center;
  justify-items: center;
  align-self: center;
  gap: 8px;
  width: 100%;
  min-height: 180px;
  padding: 12px 4px;
  text-align: center;
}

.fight-result {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  color: #fff7d9;
  background:
    radial-gradient(circle, rgba(255, 222, 112, 0.34), transparent 64%),
    linear-gradient(135deg, #5b2d17, #180b06);
  border: 3px solid #130805;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 205, 88, 0.28);
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.84);
  transition: opacity 180ms ease, transform 180ms ease;
}

.fight-result.visible {
  opacity: 1;
  transform: scale(1);
}

.fight-card.victory .fight-result {
  width: auto;
  height: auto;
  padding: 4px 8px;
  color: #ffffff;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 30px;
  line-height: 1;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(255, 255, 255, 0.98),
    0 0 18px rgba(222, 239, 255, 0.82),
    0 0 30px rgba(255, 223, 143, 0.4);
  opacity: 0;
  transform: translateY(72px) scale(0.82);
  transition: none;
}

.fight-card.victory .fight-result.visible {
  animation: fight-victory-bounce-in 720ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

.fight-card.defeat .fight-result {
  width: auto;
  height: auto;
  padding: 4px 8px;
  color: #ff5d66;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 28px;
  line-height: 1;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(255, 58, 73, 0.9),
    0 0 20px rgba(190, 18, 34, 0.68);
  opacity: 0;
  transform: scale(0.94);
  transition: none;
}

.fight-card.defeat .fight-result.visible {
  animation: fight-defeat-pulse 520ms ease-out both;
}

@keyframes fight-victory-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(72px) scale(0.82);
  }
  58% {
    opacity: 1;
    transform: translateY(-9px) scale(1.08);
  }
  78% {
    transform: translateY(4px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fight-defeat-pulse {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  42% {
    opacity: 1;
    transform: scale(1.18);
    text-shadow:
      0 2px 3px rgba(0, 0, 0, 0.95),
      0 0 12px rgba(255, 70, 82, 1),
      0 0 28px rgba(211, 20, 39, 0.86);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fight-center h3,
.fight-center p {
  margin: 0;
}

.fight-reward {
  min-height: 2.6em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.fight-reward.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.fight-reward .reward-display {
  flex-direction: column;
  gap: 3px;
}

.fight-reward .reward-display-divider {
  display: none;
}

.fight-reward .reward-display-gold-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
}

.fight-reward .reward-display-entry strong {
  font-size: 15px;
}

.fight-reward .reward-display-xp-mark {
  font-size: 15px;
}

.fight-card.dungeon-fight .fight-reward .reward-display,
.fight-card.tavern-fight .fight-reward .reward-display {
  gap: 7px;
}

.fight-card.dungeon-fight .fight-reward .reward-display-gold-icon,
.fight-card.tavern-fight .fight-reward .reward-display-gold-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.fight-card.dungeon-fight .fight-reward .reward-display-entry strong,
.fight-card.tavern-fight .fight-reward .reward-display-entry strong {
  font-size: 21px;
}

.fight-card.dungeon-fight .fight-reward .reward-display-xp-mark,
.fight-card.tavern-fight .fight-reward .reward-display-xp-mark {
  font-size: 19px;
}

.fight-loot {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 48px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.fight-loot.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.fight-loot > small {
  color: #d8b774;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.fight-loot-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  color: #fff3c4;
}

.fight-loot-entry img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(216, 145, 255, 0.54));
}

.fight-loot-entry strong {
  min-width: 0;
  font-size: 12px;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-align: left;
}

.fight-loot-item .item-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 0;
}

.fight-loot-item.epic {
  color: #edb4ff;
  text-shadow: 0 0 9px rgba(200, 95, 255, 0.58);
}

.fight-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
}

.fight-controls button {
  flex: 1 1 160px;
}

.fight-next-button:disabled {
  color: rgba(255, 255, 255, 0.46);
  filter: grayscale(1) brightness(0.62);
  opacity: 0.52;
}

.damage-popup {
  position: absolute;
  left: 50%;
  top: 88px;
  z-index: 12;
  color: #ffe8a0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 #2a0a05,
    0 0 12px rgba(255, 211, 90, 0.48);
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: damageFloat 920ms ease-out forwards;
}

.damage-popup.crit {
  color: #ff3024;
  font-size: 36px;
  text-shadow:
    0 2px 0 #2a0302,
    0 0 14px rgba(255, 28, 18, 0.62);
}

.damage-popup.defense-block,
.damage-popup.defense-dodge {
  width: max-content;
  max-width: 90%;
  color: #f2f6ff;
  font-size: 20px;
  text-shadow:
    0 2px 0 #07101d,
    0 0 10px rgba(164, 207, 255, 0.82),
    0 0 20px rgba(93, 144, 218, 0.48);
}

.damage-popup.defense-block {
  color: #ffe6a2;
  text-shadow:
    0 2px 0 #241606,
    0 0 10px rgba(255, 208, 94, 0.76);
}

.weapon-fly {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff7d9;
  background:
    radial-gradient(circle, rgba(255, 235, 160, 0.34), transparent 62%),
    linear-gradient(135deg, #5b2d17, #180b06);
  border: 2px solid rgba(255, 233, 176, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255, 213, 94, 0.38);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
}

.weapon-fly.player {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.weapon-fly.player .item-icon {
  width: 70px;
  height: 70px;
  margin: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255, 218, 120, 0.5));
}

.weapon-fly.player .item-icon.has-image img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.weapon-fly .battle-slot-weapon,
.weapon-fly .battle-enemy-weapon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}

.weapon-fly .battle-boss-weapon {
  display: block;
  width: 72px;
  height: 90px;
  background-repeat: no-repeat;
  background-size: 500% 200%;
  filter: drop-shadow(0 0 10px rgba(182, 94, 255, 0.8));
  mix-blend-mode: screen;
  pointer-events: none;
  transform: scaleX(-1);
}

.weapon-fly.boss-sheet-tall .battle-boss-weapon {
  width: 66px;
  height: 110px;
}

.weapon-fly .battle-slot-weapon {
  filter: var(--slot-asset-filter, drop-shadow(0 0 10px rgba(255, 218, 120, 0.64)));
}

.weapon-fly.enemy {
  width: 76px;
  height: 96px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.weapon-fly.enemy.boss-sheet-tall {
  width: 70px;
  height: 112px;
}

.weapon-fly .battle-enemy-weapon {
  width: 66px;
  height: 66px;
  filter: sepia(0.25) saturate(1.75) hue-rotate(315deg) drop-shadow(0 0 10px rgba(255, 75, 54, 0.58));
  transform: scaleX(-1);
}

.weapon-fly.player {
  width: 70px;
  height: 70px;
  left: 18%;
  top: 35%;
  animation: weaponToEnemy 820ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.weapon-fly.enemy {
  right: 18%;
  top: 35%;
  animation: weaponToHero 820ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.shop-list {
  gap: 14px;
}

.shop-hub {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.shop-hub.shop-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
  overflow: visible;
}

.shop-entry {
  position: relative;
  min-width: 0;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: #fff5d6;
  text-align: left;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #a855f7) 64%, #191225);
  border-radius: 6px;
  background: #07050d;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.42);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.shop-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--shop-entry-image) center / cover no-repeat;
  filter: saturate(0.82) brightness(0.72);
  transform: scale(1.02);
  transition: filter 180ms ease, transform 220ms ease;
}

.shop-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 2, 8, 0.08) 28%, rgba(3, 2, 8, 0.94) 82%);
}

.shop-entry.magic::before {
  background-position: 58% center;
}

.shop-entry.market::before {
  filter: sepia(0.34) saturate(1.12) brightness(0.64);
}

.shop-entry:hover,
.shop-entry:focus-visible {
  transform: translateY(-3px);
  border-color: #e1b7ff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 22px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 48%, transparent),
    0 15px 30px rgba(0, 0, 0, 0.5);
}

.shop-entry:hover::before,
.shop-entry:focus-visible::before {
  filter: saturate(1) brightness(0.88);
  transform: scale(1.055);
}

.shop-entry-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.shop-entry-copy small {
  color: color-mix(in srgb, var(--theme-accent, #c77dff) 68%, #fff2af);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.shop-entry-copy strong {
  font-size: 25px;
  line-height: 1.05;
}

.shop-entry-copy > span {
  min-height: 38px;
  color: #e6ddec;
  font-size: 13px;
  line-height: 1.35;
}

.shop-room-stage {
  display: block;
  overflow: visible;
}

.shop-room {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #a855f7) 64%, #191225);
  border-radius: 6px;
  background: var(--shop-room-image) center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.48);
}

.shop-counter-layout {
  display: grid;
  grid-template-columns: minmax(350px, 0.82fr) minmax(470px, 1.18fr);
  gap: 8px;
  padding: 8px;
  background: #05030a;
}

.shop-counter-layout::after {
  display: none;
}

.shop-character-side,
.shop-merchant-side {
  position: relative;
  min-width: 0;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #a855f7) 42%, #201529);
  border-radius: 5px;
}

.shop-character-paper {
  position: absolute;
  inset: 0;
  background-color: #05030a;
  background-image: var(--shop-character-portrait);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.shop-character-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 2, 6, 0.7), transparent 27%, transparent 73%, rgba(2, 2, 6, 0.7)),
    linear-gradient(180deg, rgba(2, 2, 6, 0.18), transparent 58%, rgba(2, 2, 6, 0.62));
}

.character-board-stats {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  width: calc(100% - 24px);
  max-width: 420px;
  margin: 0;
  transform: translateX(-50%);
  text-shadow: 0 2px 3px #000, 0 0 8px #000;
}

.character-board-stats div {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
}

.character-board-stats dt {
  color: color-mix(in srgb, var(--theme-accent, #d28aff) 74%, #fff1a6);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.character-board-stats dd {
  margin: 0;
  color: #fff5d4;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.shop-merchant-side {
  background:
    linear-gradient(180deg, rgba(3, 2, 7, 0.03), rgba(3, 2, 7, 0.18) 50%, rgba(3, 2, 7, 0.72)),
    var(--shop-merchant-image) center / cover no-repeat;
}

.shop-display-table {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 46%;
  min-height: 244px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(225, 167, 94, 0.13), transparent 27%, rgba(4, 2, 3, 0.3)),
    repeating-linear-gradient(0deg, transparent 0 74px, rgba(7, 3, 4, 0.6) 75px 78px, rgba(255, 207, 140, 0.04) 79px 80px),
    repeating-linear-gradient(97deg, rgba(255, 219, 161, 0.025) 0 1px, transparent 2px 6px, rgba(4, 2, 3, 0.07) 7px 9px),
    linear-gradient(105deg, #603a25, #43291e 42%, #2b1c1b 78%, #332127);
  box-shadow: inset 0 18px 20px rgba(7, 3, 4, 0.5), inset 0 -17px 20px rgba(7, 3, 4, 0.58);
}

.shop-display-table::before,
.shop-display-table::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
}

.shop-display-table::before {
  top: 0;
  height: 11px;
  z-index: 1;
  background: linear-gradient(#1b100d, #9b6438 35%, #422518 67%, #160d0b);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

.shop-display-table::after {
  bottom: 0;
  height: 12px;
  background: linear-gradient(#563321, #241511 47%, #100b0c);
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.32);
}

.shop-merchant-side .shop-reroll {
  position: absolute;
  top: 8%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 2px 9px;
  color: #ffedb3;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
  border: 1px solid rgba(241, 203, 130, 0.66);
  border-radius: 4px;
  background: rgba(20, 11, 9, 0.9);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.55);
}

.shop-reroll > span {
  font-size: 18px;
  line-height: 1;
}

.shop-reroll small {
  color: #d7ba85;
  font-size: 10px;
}

.shop-merchant-side .shop-reroll:hover:not(:disabled),
.shop-merchant-side .shop-reroll:focus-visible {
  color: #fff8dc;
  border-color: #ffe49e;
  background: rgba(47, 26, 19, 0.96);
}

.shop-merchant-side .shop-reroll:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.shop-stock {
  position: absolute;
  inset: 19% 4% 8%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5% 3%;
}

.shop-inventory-strip {
  position: absolute;
  right: 16px;
  top: 12px;
  left: 16px;
  z-index: 3;
}

.shop-inventory-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 412px;
  margin-inline: auto;
}

.shop-inventory-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 155, 0.12);
  border-radius: 7px;
  background: rgba(5, 3, 9, 0.66);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.shop-inventory-slot.filled:hover,
.shop-inventory-slot.filled:focus-visible {
  border-color: color-mix(in srgb, var(--theme-accent, #c16cff) 70%, #ffffff);
  background: color-mix(in srgb, var(--theme-accent, #c16cff) 10%, rgba(12, 8, 17, 0.9));
}

.shop-inventory-slot.rarity-epic {
  border-color: rgba(211, 151, 255, 0.66);
  box-shadow: inset 0 0 14px rgba(147, 57, 210, 0.24), 0 0 8px rgba(180, 81, 255, 0.18);
}

.shop-inventory-slot.empty {
  background:
    radial-gradient(circle at 50% 42%, rgba(197, 146, 255, 0.13), transparent 65%),
    rgba(8, 5, 15, 0.82);
  border-color: rgba(218, 190, 118, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.shop-inventory-slot.filled {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.shop-inventory-slot .item-icon {
  width: 100%;
  height: 100%;
}

.shop-merchant-side .shop-stock-item {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.shop-merchant-side .shop-stock-item::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: min(122px, calc(100% - 12px));
  transform: translateX(-50%);
  border: 1px solid rgba(194, 143, 88, 0.28);
  border-radius: 3px;
  background: radial-gradient(ellipse at center, rgba(10, 5, 5, 0.35), rgba(10, 5, 5, 0.08) 75%);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 221, 161, 0.07);
  transition: border-color 140ms ease, background 140ms ease;
}

.shop-merchant-side .shop-stock-item:hover::before,
.shop-merchant-side .shop-stock-item:focus-visible::before {
  border-color: rgba(255, 219, 142, 0.68);
  background: radial-gradient(ellipse at center, rgba(119, 73, 40, 0.24), rgba(10, 5, 5, 0.12) 75%);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 219, 142, 0.3);
}

.shop-stock-item:focus-visible {
  outline: none;
}

.shop-stock-item > .shop-stock-concept {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--concept-image);
  background-position: var(--concept-position);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: brightness(1.06) saturate(0.96);
  transition: transform 140ms ease, filter 140ms ease;
}

.shop-stock-item.epic {
  filter: drop-shadow(0 0 5px rgba(194, 99, 255, 0.45));
}

.shop-stock-item > .item-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78%, 86px);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform 140ms ease, filter 140ms ease;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.7));
}

.shop-stock-item > .item-icon.has-image img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.shop-stock-item:hover > .item-icon,
.shop-stock-item:focus-visible > .item-icon {
  transform: translate(-50%, -50%) scale(1.055);
  filter: brightness(1.16) saturate(1.06) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.8));
}

.shop-stock-item.too-expensive > .item-icon,
.shop-stock-item.sold-out > .item-icon {
  filter: grayscale(0.72) brightness(0.58) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.7));
}

.shop-stock-item.sold-out > .item-icon {
  top: 47%;
  width: min(74%, 80px);
}

.shop-stock-price {
  position: absolute;
  bottom: 3px;
  left: 50%;
  z-index: 2;
  width: min(122px, calc(100% - 12px));
  padding: 0 2px;
  color: #ffe08a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 9px #000;
  background: none;
  border: 0;
}

.shop-stock-price em {
  display: block;
  color: #edb4ff;
  font-style: normal;
}

.shop-stock-item.epic:not(.sold-out) .shop-stock-price {
  opacity: 1;
  visibility: visible;
}

.shop-stock-item:not(.sold-out) .shop-stock-price {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.shop-stock-item:not(.sold-out):hover .shop-stock-price,
.shop-stock-item:not(.sold-out):focus-visible .shop-stock-price {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  .shop-stock-item:not(.sold-out) .shop-stock-price {
    opacity: 1;
    visibility: visible;
  }
}

.shop-stock-item:hover > .shop-stock-concept,
.shop-stock-item:focus-visible > .shop-stock-concept {
  transform: scale(1.055);
  filter: brightness(1.18) saturate(1.08);
}

.shop-room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 2, 8, 0.22), transparent 38%, rgba(3, 2, 8, 0.52));
}

.shop-room-back {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff4d1;
  font-size: 26px;
  line-height: 1;
  border: 2px solid color-mix(in srgb, var(--theme-accent, #a855f7) 58%, #20152a);
  border-radius: 6px;
  background: rgba(7, 5, 13, 0.9);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.38);
}

.shop-merchant-side > .shop-room-back {
  right: 14px;
  left: auto;
}

.shop-room-back:hover,
.shop-room-back:focus-visible {
  color: #fff;
  border-color: #e0b4ff;
  background: rgba(25, 14, 36, 0.96);
}

.shop-room-status {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: min(360px, calc(100% - 40px));
  padding: 12px 18px;
  text-align: center;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #a855f7) 54%, #2a1c31);
  border-radius: 6px;
  background: rgba(5, 4, 10, 0.9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
}

.shop-room-status small {
  color: color-mix(in srgb, var(--theme-accent, #c77dff) 68%, #ffe894);
  font-weight: 800;
  text-transform: uppercase;
}

.shop-room-status strong {
  color: #fff4d2;
  font-size: 18px;
}

.shop-stall .shop-room-back.market-back {
  left: 12px;
  top: 12px;
}

.shop-door {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  padding: 20px;
  overflow: hidden;
  color: #fff5cd;
  border-width: 3px;
  text-align: center;
  box-shadow: 0 5px 0 #1c0c06, 0 14px 24px var(--shadow);
}

.shop-door::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background:
    linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, 0.28) 49% 51%, transparent 52%),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.65), transparent 28%);
}

.shop-door.weapons {
  background:
    linear-gradient(155deg, rgba(255, 208, 119, 0.14), transparent 38%),
    linear-gradient(135deg, #8f1f18, #42100d 70%);
}

.shop-door.gear {
  background:
    linear-gradient(155deg, rgba(190, 232, 255, 0.2), transparent 38%),
    linear-gradient(135deg, #275c95, #11284e 72%);
}

.shop-door strong,
.shop-door small,
.shop-icon {
  position: relative;
  z-index: 1;
}

.shop-door strong {
  display: block;
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.05;
  text-shadow: 0 2px 0 #140805;
}

.shop-door small {
  display: block;
  max-width: 210px;
  margin-top: 10px;
  color: #ffe3a4;
  font-size: 15px;
  line-height: 1.35;
}

.shop-icon {
  position: relative;
  display: block;
  width: 74px;
  height: 74px;
}

.sword-icon {
  transform: rotate(45deg);
}

.sword-icon::before,
.sword-icon::after,
.armor-icon::before,
.armor-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.sword-icon::before {
  left: 33px;
  top: 0;
  width: 10px;
  height: 58px;
  border: 2px solid #180a05;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(90deg, #f6f0d1, #a9c3cf 55%, #fff9db);
}

.sword-icon::after {
  left: 18px;
  top: 49px;
  width: 40px;
  height: 12px;
  border: 2px solid #180a05;
  border-radius: 999px;
  background: linear-gradient(#ffd36b, #b56a21);
}

.armor-icon::before {
  left: 12px;
  top: 2px;
  width: 50px;
  height: 62px;
  border: 3px solid #0d1728;
  border-radius: 24px 24px 16px 16px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(10, 24, 45, 0.45) 48% 52%, transparent 53%),
    linear-gradient(145deg, #d8efff, #578ac4 58%, #21446f);
  clip-path: polygon(50% 0, 92% 14%, 84% 72%, 50% 100%, 16% 72%, 8% 14%);
}

.armor-icon::after {
  left: 27px;
  top: 19px;
  width: 20px;
  height: 26px;
  border-radius: 50% 50% 8px 8px;
  background: rgba(255, 242, 175, 0.9);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.shop-back {
  width: fit-content;
  min-height: 38px;
  padding: 8px 12px;
}

.dungeon-stage {
  display: grid;
  gap: 14px;
}

.dungeon-hub {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dungeon-door {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: 8px;
  padding: 12px;
  color: #fff4d4;
  text-align: left;
  border-width: 3px;
  box-shadow:
    inset 0 -54px 54px rgba(0, 0, 0, 0.54),
    0 4px 0 #160905,
    0 10px 18px rgba(0, 0, 0, 0.32);
}

.dungeon-door::before,
.dungeon-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.54;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, 0.16) 49% 51%, transparent 52%);
  pointer-events: none;
}

.dungeon-door::before {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(4, 3, 8, 0.24), rgba(4, 3, 8, 0.52) 48%, rgba(4, 3, 8, 0.92)),
    linear-gradient(90deg, rgba(4, 3, 8, 0.28), transparent 48%, rgba(4, 3, 8, 0.22));
}

.dungeon-door.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--dungeon-cover);
  background-position: center 24%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.78;
  filter: saturate(0.92) contrast(1.05);
  transition: opacity 160ms ease, transform 180ms ease;
  pointer-events: none;
}

.dungeon-door.has-cover:hover::after,
.dungeon-door.has-cover.active::after {
  opacity: 0.9;
  transform: scale(1.025);
}

.dungeon-door.active {
  filter: brightness(1.12);
  border-color: #ffe09c;
  box-shadow:
    inset 0 -54px 54px rgba(0, 0, 0, 0.48),
    0 4px 0 #160905,
    0 0 20px rgba(255, 219, 125, 0.38);
}

.dungeon-door span,
.dungeon-door strong,
.dungeon-door small {
  position: relative;
  z-index: 2;
}

.dungeon-door span {
  justify-self: start;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(255, 217, 137, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: #ffd989;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dungeon-door strong {
  align-self: center;
  max-width: 100%;
  font-size: 21px;
  line-height: 1.05;
  text-shadow: 0 2px 0 #130706;
  overflow-wrap: anywhere;
}

.dungeon-door small {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
  color: #e9d2a0;
  font-size: 12px;
  font-weight: 900;
}

.dungeon-door.stone,
.dungeon-detail.stone {
  background: linear-gradient(145deg, #5d554b, #171615 72%);
}

.dungeon-door.alex,
.dungeon-detail.alex {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(191, 72, 255, 0.42), transparent 42%),
    radial-gradient(circle at 18% 18%, rgba(224, 162, 255, 0.24), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(86, 18, 162, 0.42), transparent 34%),
    linear-gradient(145deg, #210738, #050209 74%);
  border-color: #8d3df1;
  box-shadow:
    inset 0 0 0 1px rgba(247, 218, 255, 0.13),
    inset 0 -54px 54px rgba(0, 0, 0, 0.5),
    0 4px 0 #050209,
    0 0 24px rgba(191, 92, 255, 0.34),
    0 10px 18px rgba(0, 0, 0, 0.36);
}

.dungeon-door.alex.active {
  border-color: #e2b1ff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 242, 255, 0.18),
    inset 0 -54px 54px rgba(0, 0, 0, 0.42),
    0 4px 0 #050209,
    0 0 28px rgba(202, 105, 255, 0.58);
}

.dungeon-door.alex span,
.dungeon-detail.alex .dungeon-preview-copy span,
.dungeon-detail.alex .dungeon-preview-copy dt {
  color: #dca3ff;
}

.dungeon-door.alex small {
  color: #f1dcff;
}

.dungeon-door.lena,
.dungeon-detail.lena {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(154, 64, 255, 0.32), transparent 42%),
    radial-gradient(circle at 18% 14%, rgba(209, 123, 102, 0.2), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(83, 26, 98, 0.36), transparent 34%),
    linear-gradient(145deg, #3b1515, #100606 74%);
  border-color: #9d4b3f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 224, 0.12),
    inset 0 -54px 54px rgba(0, 0, 0, 0.5),
    0 4px 0 #100606,
    0 0 22px rgba(154, 64, 255, 0.28),
    0 10px 18px rgba(0, 0, 0, 0.36);
}

.dungeon-door.lena.active {
  border-color: #d17b66;
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 236, 0.16),
    inset 0 -54px 54px rgba(0, 0, 0, 0.42),
    0 4px 0 #100606,
    0 0 26px rgba(177, 80, 255, 0.42);
}

.dungeon-door.lena span,
.dungeon-detail.lena .dungeon-preview-copy span,
.dungeon-detail.lena .dungeon-preview-copy dt {
  color: #d6a1ff;
}

.dungeon-door.lena small {
  color: #ffe0d8;
}

.dungeon-door.blood,
.dungeon-detail.blood {
  background: linear-gradient(145deg, #5b1015, #120608 72%);
}

.dungeon-door.crypt,
.dungeon-detail.crypt {
  background: linear-gradient(145deg, #394052, #0a0c12 72%);
}

.dungeon-door.fel,
.dungeon-detail.fel {
  background: linear-gradient(145deg, #1f5b1f, #040a04 72%);
}

.dungeon-door.frost,
.dungeon-detail.frost {
  background: linear-gradient(145deg, #2b79a8, #071320 72%);
}

.dungeon-door.arena,
.dungeon-detail.arena {
  background: linear-gradient(145deg, #7b3924, #170906 72%);
}

.dungeon-door.void,
.dungeon-detail.void {
  background: linear-gradient(145deg, #52208a, #08030e 72%);
}

.dungeon-door.bobar,
.dungeon-detail.bobar {
  background: linear-gradient(145deg, #8c6424, #1a0d05 72%);
}

.dungeon-detail {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  color: #fff1ca;
  border: 3px solid #170906;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 169, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.dungeon-preview-art,
.dungeon-preview-copy {
  position: relative;
  z-index: 1;
}

.dungeon-preview-art {
  min-height: 250px;
  border: 2px solid rgba(255, 233, 176, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 235, 160, 0.24), transparent 18%),
    radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.58));
  box-shadow: inset 0 -48px 52px rgba(0, 0, 0, 0.5);
}

.dungeon-detail.alex .dungeon-preview-art {
  border-color: rgba(226, 177, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(5, 2, 9, 0.08), rgba(5, 2, 9, 0.72)),
    radial-gradient(ellipse at 50% 112%, rgba(191, 72, 255, 0.36), transparent 42%),
    radial-gradient(circle at 76% 18%, rgba(230, 181, 255, 0.22), transparent 28%),
    url("assets/alex-voidflame.png") center 18% / cover no-repeat,
    #050209;
  box-shadow:
    inset 0 -52px 58px rgba(0, 0, 0, 0.58),
    inset 0 0 34px rgba(191, 72, 255, 0.16),
    0 0 22px rgba(191, 92, 255, 0.28);
}

.dungeon-detail.lena .dungeon-preview-art {
  border-color: rgba(209, 123, 102, 0.48);
  background:
    linear-gradient(180deg, rgba(16, 6, 6, 0.08), rgba(16, 6, 6, 0.68)),
    radial-gradient(ellipse at 50% 112%, rgba(154, 64, 255, 0.26), transparent 42%),
    radial-gradient(circle at 75% 18%, rgba(209, 123, 102, 0.18), transparent 28%),
    url("assets/lena-arena.png") center 18% / cover no-repeat,
    #100606;
  box-shadow:
    inset 0 -52px 58px rgba(0, 0, 0, 0.58),
    inset 0 0 32px rgba(154, 64, 255, 0.14),
    0 0 20px rgba(154, 64, 255, 0.22);
}

.dungeon-preview-art.has-card-art,
.dungeon-detail.alex .dungeon-preview-art.has-card-art,
.dungeon-detail.lena .dungeon-preview-art.has-card-art {
  background-color: #050209;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.dungeon-detail.lena .dungeon-preview-art.has-card-art {
  background-color: #100606;
}

.dungeon-detail.alex .dungeon-preview-copy p {
  color: #ead1ff;
}

.dungeon-detail.alex .dungeon-preview-copy dl div {
  background: rgba(10, 4, 18, 0.58);
  border-color: rgba(220, 163, 255, 0.24);
}

.dungeon-detail.lena .dungeon-preview-copy p {
  color: #efd3dd;
}

.dungeon-detail.lena .dungeon-preview-copy dl div {
  background: rgba(20, 7, 12, 0.58);
  border-color: rgba(214, 161, 255, 0.22);
}

.dungeon-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.dungeon-preview-head {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.dungeon-preview-copy span,
.dungeon-preview-actions {
  color: #ffd989;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.dungeon-preview-copy h3,
.dungeon-preview-copy p,
.dungeon-preview-copy dl,
.dungeon-preview-head {
  margin: 0;
}

.dungeon-preview-copy h3 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.dungeon-preview-copy p {
  color: #f0d9a6;
  line-height: 1.4;
}

.dungeon-preview-copy .dungeon-affix-copy {
  align-self: stretch;
  width: 100%;
  padding: 8px 10px;
  color: #fff3c1;
  background: rgba(7, 4, 3, 0.42);
  border: 1px solid rgba(255, 217, 137, 0.26);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
}

.dungeon-preview-copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dungeon-preview-copy dl div {
  padding: 9px;
  background: rgba(7, 4, 3, 0.42);
  border: 1px solid rgba(255, 226, 155, 0.2);
  border-radius: 7px;
}

.dungeon-preview-copy dt {
  color: #ffd989;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.dungeon-preview-copy dd {
  margin: 3px 0 0;
  color: #fff8de;
  font-weight: 900;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.dungeon-preview-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.dungeon-retry-countdown {
  color: #ffe2a0;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dungeon-start-button {
  width: auto;
  min-width: 220px;
  min-height: 44px;
}

.shop-category {
  display: grid;
  gap: 10px;
}

.shop-category h3 {
  margin: 2px 0 0;
  color: #4c2613;
  font-size: 20px;
}

.shop-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  color: #fff3c1;
  background: linear-gradient(135deg, #3a1d10, #1f1009);
  border: 2px solid #1a0d07;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 158, 0.14);
}

.shop-item-art {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 229, 152, 0.2), transparent 46%),
    rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 224, 146, 0.18);
}

.shop-item-art .item-icon {
  width: 40px;
  height: 40px;
}

.shop-item strong {
  display: block;
  font-size: 18px;
}

.shop-item p {
  margin-top: 5px;
  color: #f0d493;
  line-height: 1.35;
}

.shop-item span {
  display: block;
  margin-top: 8px;
  color: #9ed08a;
  font-weight: 900;
}

.shop-item .item-icon {
  display: grid;
  place-items: center;
  margin-top: 0;
  color: inherit;
}

.shop-item button {
  min-width: 100px;
}

.shop-item.owned {
  opacity: 0.72;
}

.shop-grid-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.shop-stall {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 18px 20px 22px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(209, 154, 255, 0.2), transparent 30%),
    radial-gradient(ellipse at 16% 26%, rgba(92, 200, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(10, 7, 20, 0.94), rgba(3, 2, 8, 0.98) 44%, rgba(12, 6, 24, 0.98));
  border: 2px solid rgba(177, 99, 255, 0.62);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(242, 231, 255, 0.09),
    inset 0 -120px 90px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(137, 72, 255, 0.22);
}

.shop-stall::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -42px;
  height: 72%;
  background:
    linear-gradient(92deg, transparent 0 8%, rgba(255, 255, 255, 0.08) 9% 10%, transparent 11% 38%, rgba(255, 255, 255, 0.06) 39% 40%, transparent 41% 100%),
    radial-gradient(ellipse at 50% 0, rgba(189, 118, 255, 0.18), transparent 48%),
    linear-gradient(180deg, #2b153c 0, #17091f 22%, #0b040f 100%);
  border-top: 3px solid rgba(226, 182, 255, 0.44);
  box-shadow:
    inset 0 18px 38px rgba(255, 255, 255, 0.05),
    inset 0 -34px 42px rgba(0, 0, 0, 0.5),
    0 -16px 32px rgba(0, 0, 0, 0.4);
  transform: perspective(520px) rotateX(13deg);
  transform-origin: bottom center;
}

.shop-stall::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(159, 214, 255, 0.12);
  border-radius: 6px;
  pointer-events: none;
}

.shop-stall-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 150px minmax(170px, 1fr) auto;
  align-items: end;
  gap: 14px;
  min-height: 150px;
  margin-bottom: 10px;
}

.shopkeeper {
  position: relative;
  height: 142px;
  align-self: stretch;
}

.shopkeeper-head,
.shopkeeper-body {
  position: absolute;
  left: 50%;
  display: block;
  transform: translateX(-50%);
}

.shopkeeper-head {
  top: 14px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 36%, rgba(255, 255, 255, 0.35), transparent 18%),
    linear-gradient(145deg, #7342a8, #14071f 74%);
  border: 2px solid rgba(234, 207, 255, 0.56);
  box-shadow:
    0 0 18px rgba(185, 93, 255, 0.42),
    inset 0 -12px 18px rgba(0, 0, 0, 0.38);
}

.shopkeeper-body {
  bottom: 0;
  width: 126px;
  height: 92px;
  border-radius: 42px 42px 8px 8px;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, 0.08) 19% 20%, transparent 21% 80%, rgba(255, 255, 255, 0.07) 81% 82%, transparent 83%),
    radial-gradient(ellipse at 50% 12%, rgba(193, 112, 255, 0.34), transparent 42%),
    linear-gradient(160deg, #25123d, #05030b 78%);
  border: 2px solid rgba(136, 94, 183, 0.62);
  box-shadow: inset 0 0 28px rgba(146, 78, 255, 0.22);
}

.shop-sign {
  justify-self: center;
  min-width: min(280px, 100%);
  padding: 10px 18px;
  color: #f4d2ff;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(118, 49, 176, 0.44), rgba(8, 12, 25, 0.94)),
    #07101b;
  border: 2px solid rgba(116, 213, 255, 0.48);
  border-radius: 5px;
  box-shadow:
    0 5px 0 rgba(4, 3, 9, 0.88),
    0 0 20px rgba(164, 80, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.shop-sign strong,
.shop-sign span {
  display: block;
  text-transform: uppercase;
}

.shop-sign strong {
  color: #f4c8ff;
  font-size: 22px;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(235, 191, 255, 0.7),
    0 0 18px rgba(152, 76, 255, 0.5);
}

.shop-sign span {
  margin-top: 6px;
  color: #bcecff;
  font-size: 12px;
  font-weight: 900;
}

.shop-controls {
  display: grid;
  gap: 8px;
  min-width: 210px;
}

.shop-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.shop-tabs button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
  color: #dff7ff;
  background:
    linear-gradient(180deg, rgba(140, 79, 255, 0.34), transparent 58%),
    linear-gradient(#1a1832, #05050d);
  border-color: rgba(113, 209, 255, 0.34);
  box-shadow: 0 3px 0 #04040b, 0 0 12px rgba(125, 84, 255, 0.14);
}

.shop-tabs button.active {
  color: #fff6ff;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(202, 112, 255, 0.38), transparent 62%),
    linear-gradient(#62319d, #12081f 76%);
  border-color: rgba(230, 186, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 255, 0.18),
    0 0 16px rgba(196, 91, 255, 0.36);
}

.shop-refresh {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  color: #10101b;
  background: linear-gradient(#e9c5ff, #8d5bed);
  border-color: rgba(246, 219, 255, 0.72);
  box-shadow: 0 3px 0 #26113f, 0 0 14px rgba(195, 110, 255, 0.32);
}

.shop-sign.shop-refresh {
  pointer-events: none;
  cursor: default;
  color: #f5d8ff;
  background:
    radial-gradient(circle at 75% 50%, rgba(176, 76, 255, 0.28), transparent 28%),
    linear-gradient(180deg, rgba(15, 14, 28, 0.44), rgba(7, 5, 14, 0.62));
  border-color: rgba(226, 183, 255, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 255, 0.08),
    0 0 24px rgba(168, 73, 255, 0.32);
}

.shop-offer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 690px;
  margin: 0 auto;
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 10% 90%, rgba(255, 255, 255, 0.04)),
    radial-gradient(ellipse at 50% 0, rgba(181, 92, 255, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(19, 8, 28, 0.86), rgba(6, 3, 10, 0.94));
  border: 2px solid rgba(81, 48, 112, 0.86);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(245, 232, 255, 0.08),
    inset 0 -28px 32px rgba(0, 0, 0, 0.24),
    0 14px 26px rgba(0, 0, 0, 0.35);
}

.shop-offer {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 126px;
  padding: 12px;
  color: #eaf5ff;
  background:
    radial-gradient(circle at 50% 22%, rgba(192, 113, 255, 0.22), transparent 46%),
    linear-gradient(145deg, rgba(7, 17, 31, 0.98), rgba(3, 4, 10, 0.99) 72%);
  border: 2px solid rgba(94, 69, 118, 0.78);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(214, 231, 255, 0.08),
    inset 0 0 24px rgba(0, 0, 0, 0.52),
    0 4px 0 #03030a,
    0 0 18px rgba(104, 77, 255, 0.12);
  text-align: center;
}

.shop-offer::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(158, 213, 255, 0.18);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 22% 78%, rgba(255, 255, 255, 0.07)),
    radial-gradient(circle at 50% 88%, rgba(128, 72, 255, 0.16), transparent 44%);
  pointer-events: none;
}

.shop-offer-slot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-top: 0;
  color: inherit;
  background:
    radial-gradient(circle, rgba(204, 132, 255, 0.23), transparent 64%),
    linear-gradient(145deg, rgba(12, 14, 27, 0.96), rgba(2, 3, 8, 0.99));
  border: 1px solid rgba(170, 220, 255, 0.48);
  border-radius: 4px;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(150, 92, 255, 0.22);
}

.shop-offer:hover:not(:disabled) {
  border-color: rgba(203, 147, 255, 0.72);
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 255, 0.14),
    inset 0 0 26px rgba(148, 74, 255, 0.2),
    0 4px 0 #03030a,
    0 0 24px rgba(190, 93, 255, 0.28);
}

.shop-offer-slot .item-icon {
  width: 72px;
  height: 72px;
}

.shop-offer.owned {
  opacity: 0.66;
}

.shop-offer.too-expensive {
  filter: saturate(0.82) brightness(0.86);
}

.shop-stall {
  min-height: auto;
  aspect-ratio: 1536 / 1120;
  padding: 0;
  background: url("assets/shop-void-counter.png") center / cover no-repeat;
  border: 2px solid rgba(185, 121, 255, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 237, 255, 0.08),
    0 0 28px rgba(132, 74, 255, 0.28),
    0 18px 34px rgba(0, 0, 0, 0.42);
}

.shop-stall::before,
.shop-stall::after {
  display: none;
}

.shop-stall-header {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  min-height: 0;
  margin: 0;
  pointer-events: none;
}

.shop-sign {
  position: absolute;
  left: 31.6%;
  top: 15.7%;
  width: 36.8%;
  min-width: 0;
  min-height: 10.2%;
  padding: 10px 18px;
  pointer-events: none;
  cursor: default;
  color: #f5d8ff;
  background:
    radial-gradient(circle at 75% 50%, rgba(176, 76, 255, 0.28), transparent 28%),
    linear-gradient(180deg, rgba(15, 14, 28, 0.44), rgba(7, 5, 14, 0.62));
  border: 1px solid rgba(226, 183, 255, 0.42);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 255, 0.08),
    0 0 24px rgba(168, 73, 255, 0.32);
}

.shop-sign strong {
  font-size: clamp(15px, 2.5vw, 30px);
}

.shop-sign span {
  font-size: clamp(8px, 1vw, 12px);
}

.shop-controls {
  position: absolute;
  right: 5.4%;
  top: 4.8%;
  min-width: min(230px, 28%);
  pointer-events: auto;
}

.shop-offer-grid {
  position: absolute;
  z-index: 2;
  left: 17.5%;
  top: 32.5%;
  width: 62.3%;
  height: 43.8%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 2.55%;
  row-gap: 5.4%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.shop-offer {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.shop-offer::before {
  display: none;
}

.shop-offer-slot {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 46%, rgba(185, 103, 255, 0.12), transparent 44%),
    rgba(4, 4, 10, 0.14);
  border: 1px solid rgba(204, 168, 255, 0.18);
  border-radius: 4px;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28);
}

.shop-offer-slot .item-icon {
  width: 84%;
  height: 84%;
}

.shop-offer:hover:not(:disabled) {
  border: 0;
  background: rgba(180, 92, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(234, 211, 255, 0.3),
    0 0 20px rgba(188, 95, 255, 0.24);
}

body.shop-view .scene,
body.inventory-view .scene,
body.dungeon-view .scene,
body.leaderboard-view .scene,
body:has(.nav-button[data-nav="guild"].active) .scene {
  display: none;
}

body.shop-view .content-grid,
body.inventory-view .content-grid,
body.dungeon-view .content-grid,
body.leaderboard-view .content-grid,
body:has(.nav-button[data-nav="guild"].active) .content-grid {
  margin-top: 0;
  align-items: start;
}

.guild-section-heading {
  min-height: 38px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(196, 158, 215, 0.22);
}

.guild-section-heading .ranking-controls label {
  gap: 10px;
  color: #cbbbd4;
  font-weight: 700;
}

.guild-section-heading .ranking-controls select {
  min-height: 30px;
  padding: 3px 28px 3px 9px;
  background: rgba(10, 8, 16, 0.55);
  border-color: rgba(196, 158, 215, 0.35);
}

.guild-section-heading > span {
  color: #d6dfd5;
  background: rgba(31, 57, 44, 0.32);
  border-color: rgba(118, 166, 138, 0.28);
}

.hall-of-fame {
  margin-top: 8px;
}

body.leaderboard-view .action-panel > #viewTitle {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.leaderboard-view .action-panel > #viewTitle::before {
  content: "";
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  background: url("assets/nav/v2/leaderboard.png") center / contain no-repeat;
}

body.leaderboard-view .action-panel:has(#actions.arena-profile-stage) > #viewTitle,
.action-panel:has(#actions.arena-profile-stage) > #viewTitle {
  display: none;
}

.hall-spotlight {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 122px;
  margin-bottom: 8px;
  padding: 12px 18px;
  color: #fff9e5;
  background: linear-gradient(90deg, #11091b 0%, rgba(17, 9, 27, 0.94) 26%, rgba(17, 9, 27, 0.35) 65%, rgba(17, 9, 27, 0.08)), var(--hall-art) center 42% / cover no-repeat;
  border-bottom: 1px solid rgba(225, 187, 117, 0.48);
  text-shadow: 0 2px 5px #000;
}

.hall-spotlight[hidden] {
  display: none;
}

.hall-spotlight > span {
  color: #f1c77b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hall-spotlight > strong {
  max-width: 55%;
  overflow: hidden;
  font-size: 25px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-spotlight > em {
  color: #eacddf;
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.hall-spotlight[data-metric="honor"] > em {
  color: #ffdc8e;
  text-shadow: 0 1px 3px #000, 0 0 12px rgba(239, 166, 48, 0.65);
}

.hall-spotlight[data-metric="dungeonScore"] > em {
  color: #bcefff;
  text-shadow: 0 1px 3px #000, 0 0 12px rgba(80, 199, 255, 0.7);
}

.hall-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(203, 159, 230, 0.35);
}

.hall-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

body[class*="theme-"] .hall-tab {
  min-height: 38px;
  padding: 7px 15px;
  color: #d9c4e5;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body[class*="theme-"] .hall-tab:hover,
body[class*="theme-"] .hall-tab:focus-visible {
  color: #fff7d9;
  background: rgba(188, 124, 220, 0.1);
}

body[class*="theme-"] .hall-tab.active {
  color: #fff7d9;
  border-bottom-color: #d597ee;
}

.guild-sort-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

body[class*="theme-"] .guild-sort-tab {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 12px;
}

.hall-search {
  width: min(100%, 220px);
  min-height: 30px;
  margin-bottom: 5px;
  padding: 5px 9px;
  color: #fff7d9;
  background: rgba(9, 7, 15, 0.68);
  border: 1px solid rgba(191, 145, 218, 0.38);
  border-radius: 4px;
  font: inherit;
}

.hall-table {
  margin-top: 8px;
  color: #fff7d9;
}

.hall-row {
  display: grid;
  grid-template-columns: 54px minmax(130px, 1.4fr) minmax(110px, 1fr) 100px 118px;
  align-items: center;
  gap: 10px;
  min-height: 57px;
  padding: 5px 12px;
}

.hall-mythic .hall-row {
  grid-template-columns: 54px minmax(130px, 1.4fr) 100px 150px;
}

.hall-columns {
  min-height: 38px;
  color: #d9b7eb;
  background: rgba(136, 72, 175, 0.16);
  border-bottom: 1px solid rgba(203, 159, 230, 0.38);
  font-size: 12px;
  font-weight: 900;
}

.hall-row > :nth-child(n+4),
.hall-mythic .hall-row > :nth-child(3) {
  text-align: right;
}

.hall-row > :nth-child(2) {
  overflow: hidden;
  font-weight: 800;
}

.hall-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hall-portrait-button {
  flex: 0 0 39px;
  display: block;
  width: 39px;
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.hall-portrait-button:hover .hall-portrait,
.hall-portrait-button:focus-visible .hall-portrait {
  border-color: #ffe2a0;
  box-shadow: 0 0 0 2px rgba(255, 226, 160, 0.45);
}

.hall-portrait-button:focus-visible { outline: none; }

.hall-portrait {
  flex: 0 0 39px;
  width: 39px;
  height: 43px;
  object-fit: cover;
  object-position: center 19%;
  border: 1px solid rgba(219, 180, 231, 0.64);
  border-radius: 4px;
  background: #100b17;
}

.hall-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-guild-emblem {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.hall-rank {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.hall-row > :last-child,
.hall-row > :first-child {
  color: #f2cf82;
  font-weight: 900;
}

.hall-row > .hall-metric {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  padding: 5px 6px 5px 0;
  color: #ffdc8e;
  border-right: 2px solid rgba(236, 176, 74, 0.78);
  background: linear-gradient(90deg, transparent, rgba(236, 176, 74, 0.12));
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 9px rgba(239, 171, 53, 0.4);
}

.hall-row > .hall-metric::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("assets/nav/v2/leaderboard.png") center / contain no-repeat;
}

.hall-mythic .hall-row > .hall-metric {
  color: #bcefff;
  border-right-color: rgba(108, 208, 255, 0.82);
  background: linear-gradient(90deg, transparent, rgba(70, 170, 232, 0.14));
  text-shadow: 0 0 10px rgba(91, 204, 255, 0.52);
}

.hall-mythic .hall-row > .hall-metric::before {
  background-image: url("assets/nav/v2/dungeon.png");
}

.hall-row > .hall-metric.is-zero {
  color: #b9aab9;
  border-right-color: rgba(176, 151, 177, 0.32);
  background: none;
  text-shadow: none;
}

.hall-row > .hall-metric.is-zero::before {
  opacity: 0.45;
}

.hall-entry.is-podium .hall-row > .hall-metric {
  font-size: 20px;
}

.hall-entry {
  border-bottom: 1px solid rgba(182, 128, 211, 0.2);
}

.hall-entry:nth-child(odd) {
  background: rgba(15, 10, 23, 0.5);
}

.hall-entry.is-podium {
  background: linear-gradient(90deg, rgba(161, 114, 43, 0.17), rgba(38, 21, 45, 0.44) 55%, transparent);
  border-bottom-color: rgba(230, 188, 115, 0.3);
}

.hall-entry.rank-2 {
  background: linear-gradient(90deg, rgba(142, 164, 180, 0.14), rgba(38, 21, 45, 0.38) 55%, transparent);
}

.hall-entry.rank-3 {
  background: linear-gradient(90deg, rgba(168, 105, 64, 0.14), rgba(38, 21, 45, 0.34) 55%, transparent);
}

.hall-entry.rank-1 .hall-rank { color: #ffe6a2; border-color: #b58b43; background: rgba(124, 80, 15, 0.35); }
.hall-entry.rank-2 .hall-rank { color: #e4f2fa; border-color: #8ea8ba; background: rgba(89, 111, 127, 0.28); }
.hall-entry.rank-3 .hall-rank { color: #f3c4a2; border-color: #bb7d54; background: rgba(123, 67, 39, 0.29); }

.hall-entry.is-podium .hall-portrait {
  border-color: rgba(244, 208, 145, 0.78);
}

.hall-entry summary {
  cursor: pointer;
  list-style: none;
}

.hall-entry summary::-webkit-details-marker {
  display: none;
}

.hall-entry summary:hover,
.hall-entry summary:focus-visible {
  background: rgba(165, 98, 202, 0.16);
}

body[class*="theme-"] .hall-sort {
  width: 100%;
  min-height: 24px;
  padding: 2px 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  text-align: right;
  cursor: pointer;
}

body[class*="theme-"] .hall-sort.active,
body[class*="theme-"] .hall-sort:hover {
  color: #fff0bd;
}

.hall-details {
  padding: 10px 14px 14px 66px;
  border-top: 1px solid rgba(182, 128, 211, 0.2);
  background: rgba(8, 6, 13, 0.58);
}

.hall-roster > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 118px;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}

.hall-roster > div > :last-child {
  text-align: right;
}

.hall-empty {
  padding: 20px 12px;
  color: #d9c4e5;
}

@media (max-width: 660px) {
  .hall-spotlight {
    min-height: 94px;
    padding: 10px 12px;
  }

  .hall-spotlight > strong {
    max-width: 70%;
    font-size: 21px;
  }

  .hall-heading {
    align-items: stretch;
  }

  .hall-search {
    width: 100%;
  }

  .hall-table {
    overflow-x: auto;
  }

  .hall-row {
    min-width: 590px;
  }

  .hall-mythic .hall-row {
    min-width: 500px;
  }

  .hall-details {
    min-width: 590px;
    padding-left: 14px;
  }

  .hall-mythic .hall-details {
    min-width: 500px;
  }
}

body.shop-view .content-grid,
body.inventory-view .content-grid {
  margin-top: 0;
}

body.inventory-view .action-panel > h2,
body.inventory-view .action-panel > p:not(.eyebrow) {
  display: none;
}

body.inventory-view .inventory-subnav {
  margin-top: 4px;
}

body.shop-view .action-panel,
body.inventory-view .action-panel {
  display: flex;
  flex-direction: column;
  height: auto;
  margin-top: 0;
  min-height: 0;
  overflow: hidden;
}

body.shop-view .action-panel #actions,
body.inventory-view .action-panel #actions {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

body.shop-view .shop-grid-stage {
  align-content: stretch;
}

body.shop-view .shop-stall {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

body.dungeon-view .action-panel {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
}

body.dungeon-view .action-panel:has(#actions.dungeon-stage),
body.dungeon-view .action-panel:has(#actions.fight-stage) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.pvp-view .action-panel:has(#actions.arena-stage),
.action-panel:has(#actions.fight-stage .arena-fight),
.action-panel:has(#actions.fight-stage .tavern-fight) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.pvp-view .action-panel:has(#actions.arena-stage) > #viewTitle {
  display: none;
}

.fight-stage .fight-card.arena-fight {
  background: linear-gradient(90deg, rgba(8, 6, 11, 0.76), rgba(8, 6, 11, 0.42) 50%, rgba(8, 6, 11, 0.76)), url("assets/arena-selection-v1.png") center / cover no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fight-stage .fight-card.tavern-fight {
  background: linear-gradient(90deg, rgba(8, 6, 11, 0.76), rgba(8, 6, 11, 0.42) 50%, rgba(8, 6, 11, 0.76)), url("assets/world-bg.png") center / cover no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fight-stage .fight-card.tavern-fight .combatant-art {
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

.fight-stage .fight-card.arena-fight .combatant-art {
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

body.dungeon-view .action-panel #actions.dungeon-stage {
  gap: 0;
  overflow: visible;
}

body.dungeon-view .dungeon-stage > .dungeon-retry-countdown {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 4px;
  background: rgba(5, 5, 9, 0.78);
  pointer-events: none;
}

body.dungeon-view .action-panel > #viewLabel,
body.dungeon-view .action-panel > #viewText {
  display: none;
}

body.dungeon-view .action-panel #actions {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0;
}

body.dungeon-view .fight-stage {
  display: flex;
  flex-direction: column;
}

body.dungeon-view .fight-stage .fight-card {
  flex: 1;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100%;
}

body.dungeon-view .fight-stage .fight-controls {
  align-items: center;
  justify-content: center;
}

body.dungeon-view .fight-stage .fight-controls button {
  flex: 1 1 160px;
}

body.dungeon-view .fight-stage .combatant {
  grid-template-rows: minmax(330px, 1fr) 32px auto;
}

body.dungeon-view .fight-stage .combatant-art {
  min-height: 330px;
}

body.dungeon-view .dungeon-stage {
  height: 100%;
  grid-template-rows: minmax(330px, 1fr) minmax(196px, auto);
  gap: 8px;
}

body.dungeon-view .dungeon-stage:has(> .dungeon-retry-countdown) {
  grid-template-rows: auto minmax(330px, 1fr) minmax(196px, auto);
}

body.dungeon-view .dungeon-detail {
  min-height: 0;
  grid-template-columns: minmax(170px, 0.46fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

body.dungeon-view .dungeon-preview-art {
  min-height: 0;
}

body.dungeon-view .dungeon-door {
  min-height: 96px;
  height: 96px;
  gap: 5px;
  padding: 8px 10px;
  border-width: 2px;
  border-color: rgba(255, 226, 155, 0.22);
  box-shadow:
    inset 0 -26px 34px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 242, 198, 0.08);
}

body.dungeon-view .dungeon-hub {
  min-height: 0;
  gap: 8px;
}

body.dungeon-view .dungeon-door::before {
  opacity: 0.24;
}

body.dungeon-view .dungeon-door.active {
  filter: none;
  border-color: #e6c6ff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 255, 0.18),
    inset 0 -26px 34px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(120, 197, 255, 0.28);
}

body.dungeon-view .dungeon-door span {
  padding: 2px 6px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 226, 155, 0.26);
}

body.dungeon-view .dungeon-door strong {
  font-size: 16px;
  line-height: 1.02;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

body.dungeon-view .dungeon-door small {
  padding: 2px 6px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.24);
  color: #f2ddb0;
}

body.dungeon-view .dungeon-door.is-locked,
body.dungeon-view .dungeon-door.is-locked.active {
  filter: grayscale(0.88) brightness(0.62);
  border-color: rgba(176, 179, 189, 0.32);
  box-shadow:
    inset 0 -32px 42px rgba(0, 0, 0, 0.72),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dungeon-view .dungeon-door.is-locked::before {
  z-index: 1;
  opacity: 0.78;
  background: linear-gradient(180deg, rgba(8, 8, 11, 0.24), rgba(5, 5, 8, 0.9));
}

body.dungeon-view .dungeon-door.is-locked.has-cover::after,
body.dungeon-view .dungeon-door.is-locked.has-cover:hover::after,
body.dungeon-view .dungeon-door.is-locked.has-cover.active::after {
  opacity: 0.44;
  filter: grayscale(1) contrast(0.9);
  transform: none;
}

body.dungeon-view .dungeon-door.is-locked span,
body.dungeon-view .dungeon-door.is-locked small {
  color: #c7c8cf;
  border-color: rgba(210, 212, 220, 0.2);
}

body.dungeon-view .dungeon-door.is-locked strong {
  max-width: calc(100% - 48px);
  color: #dadbe0;
}

.dungeon-door-lock {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 8px;
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: 0.9;
  transform: translateY(-50%);
  filter: grayscale(0.35) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
  pointer-events: none;
}

body.dungeon-view .dungeon-detail.is-locked {
  color: #e0e0e4;
  background:
    radial-gradient(circle at 18% 12%, rgba(166, 170, 184, 0.1), transparent 30%),
    linear-gradient(145deg, #24242b, #08080c 76%);
  border-color: rgba(171, 174, 188, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.36);
}

body.dungeon-view .dungeon-detail.is-locked::before {
  opacity: 0.2;
}

.dungeon-preview-art.locked-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #09090d;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: rgba(190, 192, 205, 0.28);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.82);
}

.dungeon-detail-lock {
  position: relative;
  z-index: 2;
  width: min(48%, 150px);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  filter: grayscale(0.28) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.9));
}

body.dungeon-view .dungeon-detail.is-locked .dungeon-preview-copy span,
body.dungeon-view .dungeon-detail.is-locked .dungeon-preview-copy dt {
  color: #c9cad1;
}

body.dungeon-view .dungeon-detail.is-locked .dungeon-preview-copy p {
  color: #c4c4ca;
}

.dungeon-lock-requirements .is-met {
  border-color: rgba(103, 213, 137, 0.34);
}

.dungeon-lock-requirements .is-met dd {
  color: #8ee2a8;
}

.dungeon-lock-requirements .is-missing {
  border-color: rgba(221, 181, 102, 0.34);
}

.dungeon-lock-requirements .is-missing dd {
  color: #e6c684;
}

body.dungeon-view .dungeon-preview-copy .dungeon-lock-hint {
  padding: 7px 0;
  color: #d7d7dc;
  font-size: 13px;
  font-weight: 800;
}

body.dungeon-view .dungeon-preview-copy {
  gap: 8px;
}

body.dungeon-view .dungeon-preview-head {
  gap: 5px;
}

body.dungeon-view .dungeon-preview-copy span {
  font-size: 12px;
}

body.dungeon-view .dungeon-preview-copy h3 {
  font-size: clamp(24px, 2.5vw, 32px);
}

body.dungeon-view .dungeon-preview-copy p {
  font-size: 15px;
  line-height: 1.25;
}

body.dungeon-view .dungeon-preview-copy dl {
  gap: 7px;
}

body.dungeon-view .dungeon-preview-copy dl div {
  min-width: 0;
  padding: 7px 8px;
}

body.dungeon-view .dungeon-preview-copy dt {
  font-size: 10px;
}

body.dungeon-view .dungeon-preview-copy dd {
  font-size: 18px;
  line-height: 1.05;
}

body.dungeon-view .dungeon-preview-copy .dungeon-affix-copy {
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.2;
}

body.dungeon-view .dungeon-preview-actions {
  margin-top: auto;
  padding-top: 4px;
}

body.dungeon-view .dungeon-start-button {
  min-height: 42px;
  min-width: 220px;
  padding: 8px 16px;
}

.shop-stall .shop-sign {
  top: 15.4%;
  min-height: 10.8%;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.shop-stall .shop-sign strong,
.shop-stall .shop-sign span {
  opacity: 0;
}

.shop-stall .shop-sign:hover {
  background: transparent;
  filter: none;
  box-shadow: none;
}

.shop-stall .shop-sign:focus,
.shop-stall .shop-sign:focus-visible,
.shop-stall .shop-sign:active {
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.shop-stall .shop-offer-grid {
  left: 17.95%;
  top: 33.05%;
  width: 64.85%;
  height: 42.55%;
  column-gap: 1.95%;
  row-gap: 4.6%;
}

.shop-stall .shop-offer {
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  filter: none;
  padding: 0;
  color: transparent;
  -webkit-tap-highlight-color: transparent;
}

.shop-stall .shop-offer-slot {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.shop-stall .shop-offer:hover:not(:disabled) {
  background: transparent;
  box-shadow: none;
}

.shop-stall .shop-offer:focus,
.shop-stall .shop-offer:focus-visible,
.shop-stall .shop-offer:active {
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  filter: none;
}

.shop-stall .shop-offer .item-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.shop-stall .shop-offer .item-icon::before,
.shop-stall .shop-offer .item-icon::after,
.shop-stall .shop-offer .item-icon i {
  opacity: 0;
}

.shop-stall {
  background: url("assets/shop-void-counter-clean.png") center / cover no-repeat;
  border-color: color-mix(in srgb, var(--theme-accent, #b26aff) 72%, #eef7ff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #b26aff) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 50%, transparent),
    0 18px 34px rgba(0, 0, 0, 0.42);
}

.shop-stall.jewel-stall {
  background-image: url("assets/shop-void-jewelry-clean.png");
}

.shop-stall .shop-sign {
  left: 32.2%;
  top: 14.2%;
  width: 35.6%;
  min-height: 8.8%;
  color: #f5d8ff;
  background:
    radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--theme-accent, #b26aff) 32%, transparent), transparent 26%),
    linear-gradient(180deg, rgba(22, 17, 32, 0.94), rgba(6, 5, 12, 0.96));
  border: 2px solid color-mix(in srgb, var(--theme-accent, #b26aff) 58%, #111827);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 255, 0.12),
    0 4px 0 rgba(3, 2, 7, 0.86),
    0 0 20px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 46%, transparent);
}

.shop-stall .shop-sign strong,
.shop-stall .shop-sign span {
  opacity: 1;
}

.shop-stall .shop-sign strong {
  color: #f7fbff;
  text-shadow:
    0 0 8px rgba(219, 243, 255, 0.9),
    0 0 18px rgba(168, 211, 255, 0.58),
    0 0 28px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 28%, transparent);
}

.shop-stall .shop-sign span {
  color: #d8f4ff;
  text-shadow:
    0 0 8px rgba(169, 226, 255, 0.68),
    0 0 14px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 24%, transparent);
}

.shop-stall .shop-sign:hover {
  background:
    radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--theme-accent, #b26aff) 42%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(34, 24, 48, 0.96), rgba(8, 5, 15, 0.97));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 255, 0.16),
    0 4px 0 rgba(3, 2, 7, 0.86),
    0 0 26px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 62%, transparent);
}

.shop-stall .shop-sign:focus,
.shop-stall .shop-sign:focus-visible,
.shop-stall .shop-sign:active {
  background:
    radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--theme-accent, #b26aff) 42%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(34, 24, 48, 0.96), rgba(8, 5, 15, 0.97));
  border: 2px solid color-mix(in srgb, var(--theme-accent, #b26aff) 68%, #f7d7ff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 255, 0.18),
    0 0 26px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 62%, transparent);
}

.shop-stall .shop-offer-grid {
  left: 17.8%;
  top: 32.2%;
  width: 64.4%;
  height: 42.8%;
  column-gap: 2.1%;
  row-gap: 5.2%;
}

.shop-stall .shop-offer {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--theme-accent, #b26aff) 16%, transparent), transparent 52%),
    linear-gradient(145deg, rgba(7, 9, 18, 0.86), rgba(2, 2, 7, 0.92));
  border: 2px solid color-mix(in srgb, var(--theme-accent, #b26aff) 42%, #14131d);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(243, 238, 255, 0.08),
    inset 0 0 24px rgba(0, 0, 0, 0.48),
    0 0 14px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 28%, transparent);
}

.shop-stall .shop-offer::before {
  content: "";
  position: absolute;
  inset: 5px;
  display: block;
  border: 1px solid rgba(218, 228, 255, 0.16);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 26% 74%, rgba(255, 255, 255, 0.07)),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-accent, #b26aff) 16%, transparent), transparent 54%);
  pointer-events: none;
}

.shop-stall .shop-offer::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #b26aff) 28%, transparent);
  border-radius: 8px;
  pointer-events: none;
}

.shop-stall .shop-offer-slot {
  position: relative;
  z-index: 1;
  background: transparent;
}

.shop-stall .shop-offer .item-icon {
  width: 88%;
  height: 88%;
}

.shop-stall .shop-offer.rarity-epic {
  background:
    radial-gradient(circle at 50% 38%, rgba(221, 132, 255, 0.22), transparent 50%),
    linear-gradient(145deg, rgba(24, 8, 36, 0.9), rgba(4, 2, 10, 0.94));
  border-color: #d894ff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 255, 0.16),
    inset 0 0 30px rgba(162, 74, 255, 0.22),
    0 0 20px rgba(202, 105, 255, 0.34);
}

.shop-stall .shop-offer.rarity-epic::before {
  border-color: rgba(255, 220, 145, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 235, 166, 0.14), transparent 26% 74%, rgba(232, 164, 255, 0.14)),
    radial-gradient(circle at 50% 100%, rgba(202, 94, 255, 0.2), transparent 58%);
}

.shop-stall .shop-offer.rarity-epic::after {
  inset: -5px;
  border-color: rgba(255, 219, 136, 0.58);
  box-shadow:
    0 0 18px rgba(201, 94, 255, 0.38),
    inset 0 0 16px rgba(255, 218, 136, 0.12);
}

.shop-stall .shop-offer:hover:not(:disabled) {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--theme-accent, #b26aff) 26%, transparent), transparent 56%),
    linear-gradient(145deg, rgba(10, 14, 26, 0.9), rgba(2, 2, 7, 0.94));
  border: 2px solid color-mix(in srgb, var(--theme-accent, #b26aff) 68%, #dbefff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 255, 0.14),
    inset 0 0 28px color-mix(in srgb, var(--theme-accent, #b26aff) 18%, transparent),
    0 0 22px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 48%, transparent);
}

.shop-stall .shop-offer:focus,
.shop-stall .shop-offer:focus-visible,
.shop-stall .shop-offer:active {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--theme-accent, #b26aff) 26%, transparent), transparent 56%),
    linear-gradient(145deg, rgba(10, 14, 26, 0.9), rgba(2, 2, 7, 0.94));
  border: 2px solid color-mix(in srgb, var(--theme-accent, #b26aff) 68%, #dbefff);
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 255, 0.14),
    0 0 22px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 48%, transparent);
}

.shop-stall .shop-tabs button {
  color: var(--theme-ink, #fff7df);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent, #b26aff) 18%, transparent), transparent 58%),
    linear-gradient(var(--theme-button-top, #6d2ab5), var(--theme-button-bottom, #12061c));
  border: 2px solid color-mix(in srgb, var(--theme-accent, #b26aff) 48%, #07030b);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #b26aff) 18%, transparent),
    0 3px 0 var(--theme-deep, #07030b),
    0 0 12px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 22%, transparent);
}

.shop-stall .shop-tabs button.active {
  color: #fffdf2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent, #b26aff) 12%, transparent), transparent 60%),
    linear-gradient(color-mix(in srgb, var(--theme-button-top, #6d2ab5) 74%, #161821), color-mix(in srgb, var(--theme-button-bottom, #12061c) 82%, #05070a));
  border-color: color-mix(in srgb, var(--theme-accent, #b26aff) 78%, #f3fbff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 0 2px color-mix(in srgb, var(--theme-accent, #b26aff) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 42%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--theme-glow, rgba(178, 106, 255, 0.6)) 56%, transparent);
}

.shop-stall.market-stall {
  aspect-ratio: auto;
  min-height: 520px;
  padding: 16px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(8, 5, 13, 0.72), rgba(4, 3, 8, 0.92)),
    url("assets/shops/token-market-v1.png") center / cover no-repeat;
}

.shop-stall.market-stall .shop-stall-header {
  position: relative;
  inset: auto;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: auto;
  margin-bottom: 14px;
}

.shop-stall.market-stall .shop-sign {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  min-height: 58px;
}

.shop-stall.market-stall .shop-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.shop-stall.market-stall .shop-tabs button {
  min-height: 38px;
  padding: 8px 14px;
}

.shop-stall.market-stall .shop-offer-grid {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 14% 86%, rgba(255, 255, 255, 0.04)),
    radial-gradient(ellipse at 50% 0, rgba(151, 212, 255, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(13, 15, 25, 0.86), rgba(4, 5, 10, 0.96));
  border: 2px solid rgba(117, 97, 142, 0.72);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(245, 232, 255, 0.08),
    inset 0 -28px 32px rgba(0, 0, 0, 0.24),
    0 14px 26px rgba(0, 0, 0, 0.35);
}

.shop-stall.market-stall .shop-offer.market-offer {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  min-height: 124px;
  padding: 10px;
  color: #eef7ff;
  text-align: left;
  background:
    radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--offer-accent, #b26aff) 30%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(10, 17, 28, 0.97), rgba(4, 5, 11, 0.99) 72%);
  border: 2px solid color-mix(in srgb, var(--offer-accent, #b26aff) 46%, #202332);
}

.shop-stall.market-stall .shop-offer.market-offer::before {
  inset: 6px;
  border-color: color-mix(in srgb, var(--offer-accent, #b26aff) 22%, rgba(180, 224, 255, 0.14));
}

.shop-stall.market-stall .shop-offer.market-offer::after {
  border-color: color-mix(in srgb, var(--offer-accent, #b26aff) 22%, transparent);
}

.shop-stall.market-stall .market-offer .shop-offer-slot {
  width: 54px;
  height: 54px;
  margin: 0;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--offer-accent, #b26aff) 24%, transparent), transparent 64%),
    linear-gradient(145deg, rgba(13, 16, 28, 0.98), rgba(2, 3, 8, 0.99));
  border: 1px solid color-mix(in srgb, var(--offer-accent, #b26aff) 55%, rgba(180, 224, 255, 0.28));
}

.market-offer-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff9df;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent 31%),
    linear-gradient(150deg, color-mix(in srgb, var(--offer-accent, #b26aff) 88%, #ffffff), color-mix(in srgb, var(--offer-accent, #b26aff) 68%, #05070d));
  clip-path: polygon(50% 0, 91% 33%, 72% 100%, 28% 100%, 9% 33%);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
  box-shadow: 0 0 16px color-mix(in srgb, var(--offer-accent, #b26aff) 44%, transparent);
}

.market-offer-image {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--offer-accent, #b26aff) 58%, transparent));
}

.offer-tavern-tokens .market-offer-icon {
  clip-path: none;
  border-radius: 50%;
}

.market-offer-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.market-offer-copy strong,
.market-offer-copy small,
.market-offer-copy em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.market-offer-copy strong {
  color: #f8fbff;
  font-size: 15px;
  line-height: 1.05;
  text-shadow: 0 0 10px color-mix(in srgb, var(--offer-accent, #b26aff) 36%, transparent);
}

.market-offer-copy small {
  color: #bfeeff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.market-offer-copy em {
  color: #ffdf92;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.shop-stall.market-stall .market-offer > b {
  position: relative;
  z-index: 1;
  grid-column: 1 / 3;
  display: block;
  width: 100%;
  padding: 7px 8px;
  color: #fff4c4;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid color-mix(in srgb, var(--offer-accent, #b26aff) 24%, rgba(255, 221, 128, 0.14));
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.shop-stall.market-stall .market-offer.sold-out {
  filter: grayscale(0.55) brightness(0.72);
}

.shop-filter-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 26px;
  color: #d7eaff;
  text-align: center;
}

@media (max-width: 900px) {
  .shop-stall.market-stall .shop-stall-header {
    grid-template-columns: 1fr;
  }

  .shop-stall.market-stall .shop-tabs {
    justify-content: stretch;
  }

  .shop-stall.market-stall .shop-tabs button {
    flex: 1 1 120px;
  }

  .shop-stall.market-stall .shop-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .shop-stall.market-stall .shop-offer-grid {
    grid-template-columns: 1fr;
  }
}

.item-hover-tooltip {
  position: fixed;
  z-index: 80;
  width: min(280px, calc(100vw - 16px));
  padding: 13px;
  color: #eaf6ff;
  background:
    linear-gradient(135deg, rgba(126, 206, 255, 0.12), transparent 38%),
    radial-gradient(circle at 90% 12%, rgba(181, 94, 255, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(10, 18, 34, 0.98), rgba(4, 5, 13, 0.98));
  border: 1px solid rgba(143, 211, 255, 0.58);
  border-radius: 7px;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(128, 72, 255, 0.22),
    inset 0 0 0 1px rgba(231, 244, 255, 0.09),
    inset 0 0 24px rgba(122, 73, 255, 0.12);
  pointer-events: none;
}

.item-hover-tooltip.hidden {
  display: none;
}

.item-hover-tooltip strong {
  display: block;
  color: #f4fbff;
  font-size: 17px;
  line-height: 1.08;
  text-shadow: 0 0 10px rgba(151, 213, 255, 0.55), 0 0 18px rgba(177, 90, 255, 0.32);
}

.item-tooltip-level {
  display: block;
  margin-top: 3px;
  color: #ffe19a;
  font-size: 12px;
  font-weight: 900;
}

.reward-breakdown-tooltip {
  width: min(250px, calc(100vw - 16px));
  padding: 11px 12px;
  color: #fff3ca;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 210, 102, 0.15), transparent 38%),
    linear-gradient(145deg, rgba(27, 17, 10, 0.98), rgba(7, 6, 10, 0.98));
  border-color: rgba(255, 218, 126, 0.42);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 193, 64, 0.14);
}

.reward-breakdown-tooltip > strong {
  color: #fff2ba;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255, 211, 104, 0.32);
}

.reward-breakdown-rows {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.reward-breakdown-rows span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: #dbcaa1;
  font-size: 11px;
}

.reward-breakdown-rows i {
  min-width: 0;
  font-style: normal;
  overflow-wrap: anywhere;
}

.reward-breakdown-rows b {
  color: #fff5cf;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.reward-breakdown-total {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 218, 126, 0.22);
}

.reward-breakdown-total i,
.reward-breakdown-total b {
  color: #ffe28a;
  font-weight: 900;
}

.item-hover-tooltip.item-tooltip-epic {
  border-color: rgba(218, 142, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(197, 102, 255, 0.18), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(223, 144, 255, 0.3), transparent 42%),
    radial-gradient(circle at 18% 100%, rgba(116, 57, 255, 0.2), transparent 46%),
    linear-gradient(145deg, rgba(18, 8, 34, 0.98), rgba(5, 3, 12, 0.98));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(185, 80, 255, 0.34),
    inset 0 0 0 1px rgba(255, 235, 255, 0.12),
    inset 0 0 28px rgba(172, 81, 255, 0.18);
}

.item-hover-tooltip.item-tooltip-epic strong {
  color: #f0c7ff;
  text-shadow:
    0 0 8px rgba(239, 191, 255, 0.82),
    0 0 18px rgba(195, 91, 255, 0.64),
    0 0 30px rgba(111, 68, 255, 0.44);
}

.item-hover-tooltip.item-tooltip-token {
  color: #fff4c8;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 226, 134, 0.24), transparent 36%),
    linear-gradient(145deg, rgba(49, 23, 8, 0.98), rgba(12, 6, 3, 0.98));
  border-color: rgba(255, 225, 142, 0.58);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(232, 165, 58, 0.24),
    inset 0 0 0 1px rgba(255, 231, 137, 0.12);
}

.item-hover-tooltip.item-tooltip-token strong {
  color: #ffe08a;
  text-shadow: 0 0 10px rgba(255, 214, 117, 0.48);
}

.item-hover-tooltip.item-tooltip-token p {
  color: #f3dca5;
}

.item-hover-tooltip.title-hint-tooltip {
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 9px 11px;
}

.item-hover-tooltip.title-hint-tooltip strong {
  font-size: 13px;
  line-height: 1.25;
}

.item-hover-tooltip .tooltip-stats {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  color: #bdf3ff;
  border-top: 1px solid rgba(143, 211, 255, 0.22);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.item-hover-tooltip .tooltip-stats span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 7px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(143, 211, 255, 0.12);
  border-radius: 5px;
}

.item-hover-tooltip .tooltip-stats b {
  min-width: 0;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}

.item-hover-tooltip .tooltip-stats .weapon-damage-line {
  color: #ffe0a0;
  border-color: rgba(255, 204, 112, 0.36);
  background: rgba(94, 44, 14, 0.3);
}

.item-hover-tooltip .tooltip-compare-title {
  display: block;
  color: #fff0b9;
  background: rgba(255, 214, 117, 0.1);
  border-color: rgba(255, 220, 142, 0.22);
  text-align: center;
}

.item-hover-tooltip .stat-compare {
  flex: 0 0 auto;
  min-width: 58px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.item-hover-tooltip .stat-compare.better {
  color: #72ff8a;
  text-shadow: 0 0 8px rgba(79, 255, 111, 0.46);
}

.item-hover-tooltip .stat-compare.worse {
  color: #ff6d6d;
  text-shadow: 0 0 8px rgba(255, 77, 77, 0.44);
}

.item-hover-tooltip .stat-compare.same {
  color: #9db6c8;
}

.item-hover-tooltip .tooltip-stats.empty {
  display: block;
  color: #9db6c8;
  font-style: normal;
}

.item-hover-tooltip.item-tooltip-epic .tooltip-stats {
  color: #ddb6ff;
  border-top-color: rgba(218, 142, 255, 0.3);
  text-shadow: 0 0 12px rgba(190, 92, 255, 0.42);
}

.item-hover-tooltip.item-tooltip-epic .tooltip-stats span {
  border-color: rgba(218, 142, 255, 0.18);
}

.item-hover-tooltip p {
  margin-top: 9px;
  color: #d5d8f4;
  font-size: 12px;
  line-height: 1.3;
}

.item-hover-tooltip em {
  display: block;
  margin-top: 10px;
  padding: 6px 8px;
  color: #fff0b9;
  background: linear-gradient(90deg, rgba(255, 214, 117, 0.16), rgba(137, 84, 255, 0.12));
  border: 1px solid rgba(255, 220, 142, 0.26);
  border-radius: 5px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 216, 124, 0.32);
}

.shop-item.owned button,
button:disabled {
  cursor: default;
  filter: grayscale(0.55);
  opacity: 0.72;
  transform: none;
}

.inventory-grid .inventory-slot:disabled {
  opacity: 1;
  filter: none;
}

.slot-detail-card {
  margin-top: 14px;
  padding: 12px;
  color: var(--theme-ink, #fff7df);
  background:
    radial-gradient(circle at 18% 18%, rgba(111, 179, 255, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.28), rgba(30, 12, 45, 0.28));
  border: 1px solid rgba(240, 213, 107, 0.24);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.slot-detail-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.slot-detail-icon {
  justify-self: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(240, 213, 107, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(240, 213, 107, 0.18), transparent 58%),
    linear-gradient(145deg, rgba(14, 22, 46, 0.96), rgba(11, 5, 20, 0.98));
  box-shadow:
    inset 0 0 16px rgba(111, 179, 255, 0.12),
    0 0 16px rgba(111, 179, 255, 0.1);
}

.slot-detail-main span,
.slot-detail-progress span {
  display: block;
  color: var(--theme-muted, #d5c28f);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.slot-detail-main h4 {
  margin: 2px 0 0;
  color: var(--theme-accent, #ffd989);
  font-size: 22px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.slot-detail-main small {
  display: block;
  margin-top: 4px;
  color: #d5d8f4;
  font-size: 12px;
  font-weight: 900;
}

.slot-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.slot-detail-stats div {
  min-width: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(143, 211, 255, 0.13);
  border-radius: 7px;
}

.slot-detail-stats dt,
.slot-detail-stats dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.slot-detail-stats dt {
  color: var(--theme-muted, #d5c28f);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.slot-detail-stats dd {
  margin-top: 3px;
  color: #fffdf2;
  font-size: 16px;
  font-weight: 900;
}

.slot-detail-progress {
  margin-top: 12px;
  padding: 9px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 213, 107, 0.16);
  border-radius: 7px;
}

.slot-detail-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.slot-detail-progress strong {
  color: #fffdf2;
  font-size: 12px;
  text-align: right;
}

.slot-detail-progress-track {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 99px;
}

.slot-detail-progress .slot-detail-progress-track i {
  display: block;
  max-width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #6fb3ff, #f0d56b);
  box-shadow: 0 0 14px rgba(111, 179, 255, 0.22);
}

.slot-detail-progress > small {
  display: block;
  margin-top: 7px;
  color: #c8bfa9;
  font-size: 11px;
  font-weight: 800;
}

.slot-detail-progress.is-ready {
  border-color: rgba(123, 229, 157, 0.36);
  background: rgba(31, 91, 57, 0.14);
}

.slot-detail-progress.is-ready .slot-detail-progress-track i {
  background: linear-gradient(90deg, #62d98e, #f0d56b);
  box-shadow: 0 0 14px rgba(98, 217, 142, 0.24);
}

.slot-detail-progress.is-ready > small {
  color: #9ce9b5;
}

.slot-detail-upgrade {
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
}

.slot-passive-summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  margin-top: 10px;
  padding: 8px 10px;
  color: #d8d0ba;
  text-align: left;
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 226, 155, 0.15);
  box-shadow: none;
}

.slot-passive-summary:hover,
.slot-passive-summary.has-passive {
  background: color-mix(in srgb, var(--theme-accent, #f2c866) 9%, rgba(0, 0, 0, 0.3));
  border-color: color-mix(in srgb, var(--theme-accent, #f2c866) 42%, transparent);
}

.slot-passive-summary img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(232, 179, 72, 0.28));
}

.slot-passive-summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.slot-passive-summary small,
.slot-passive-summary strong,
.slot-passive-summary em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-passive-summary small {
  color: var(--theme-muted, #d5c28f);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.slot-passive-summary strong {
  color: #fff1c3;
  font-size: 13px;
}

.slot-passive-summary em {
  color: #aaa28d;
  font-size: 10px;
  font-style: normal;
}

.slot-passive-summary > b {
  color: var(--theme-accent, #f2c866);
  font-size: 26px;
  line-height: 1;
  text-align: center;
}

.slot-board-panel {
  overflow: hidden;
}

.slot-body-board {
  position: relative;
  min-height: 0;
  height: clamp(360px, 45vh, 430px);
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(143, 211, 255, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 44%, rgba(240, 213, 107, 0.16), transparent 30%),
    radial-gradient(circle at 50% 51%, rgba(111, 179, 255, 0.14), transparent 45%),
    linear-gradient(160deg, rgba(8, 16, 36, 0.84), rgba(13, 6, 23, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 42px rgba(0, 0, 0, 0.38);
}

.slot-body-aura {
  position: absolute;
  inset: 8%;
  pointer-events: none;
  border: 1px solid rgba(240, 213, 107, 0.14);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 48%, rgba(240, 213, 107, 0.09) 49% 50%, transparent 51%),
    radial-gradient(circle, transparent 0 32%, rgba(111, 179, 255, 0.08) 33% 34%, transparent 35%);
  opacity: 0.9;
}

.slot-body-figure {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 120px;
  height: 305px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0.42;
  filter: drop-shadow(0 0 18px rgba(111, 179, 255, 0.22));
}

.slot-body-figure::before,
.slot-body-figure::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 24%, rgba(240, 213, 107, 0.18), transparent 45%),
    linear-gradient(180deg, rgba(132, 190, 255, 0.28), rgba(74, 45, 130, 0.16));
  border: 1px solid rgba(240, 213, 107, 0.16);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.38);
}

.slot-body-figure::before {
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.slot-body-figure::after {
  top: 70px;
  width: 118px;
  height: 220px;
  border-radius: 54px 54px 30px 30px;
  clip-path: polygon(30% 0, 70% 0, 84% 30%, 76% 100%, 24% 100%, 16% 30%);
}

.slot-body-node {
  position: absolute;
  z-index: 2;
  left: var(--slot-x);
  top: var(--slot-y);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  width: clamp(76px, 30%, 92px);
  height: 52px;
  min-height: 0;
  padding: 5px;
  color: var(--theme-ink, #fff7df);
  text-align: left;
  background:
    radial-gradient(circle at 28% 22%, rgba(240, 213, 107, 0.15), transparent 42%),
    linear-gradient(145deg, rgba(13, 20, 42, 0.94), rgba(8, 4, 18, 0.98));
  border: 1px solid rgba(143, 211, 255, 0.22);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.28);
  touch-action: manipulation;
  transform: translate(-50%, -50%);
}

.slot-body-node:hover,
.slot-body-node:focus-visible {
  border-color: rgba(240, 213, 107, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(240, 213, 107, 0.12),
    0 0 20px rgba(111, 179, 255, 0.18);
}

.slot-body-node:active {
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 0 1px rgba(240, 213, 107, 0.12),
    0 0 20px rgba(111, 179, 255, 0.18);
}

.slot-body-node.active {
  color: #fffdf2;
  border-color: rgba(240, 213, 107, 0.86);
  background:
    radial-gradient(circle at 28% 22%, rgba(240, 213, 107, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(27, 35, 70, 0.98), rgba(20, 8, 32, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 197, 0.11),
    0 0 24px rgba(240, 213, 107, 0.18);
}

.slot-body-node.can-upgrade:not(.active) {
  border-color: rgba(102, 218, 141, 0.4);
}

.slot-ready-mark {
  position: absolute;
  right: -5px;
  top: -6px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #102a18;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  background: #73dda0;
  border: 2px solid #183824;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(77, 229, 137, 0.42);
}

.slot-body-node .slot-icon {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(240, 213, 107, 0.24);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
}

body.theme-alex {
  --slot-asset-filter: saturate(1.15) drop-shadow(0 0 6px rgba(192, 112, 255, 0.62));
}

body.theme-chris {
  --slot-asset-filter: hue-rotate(210deg) saturate(1.45) drop-shadow(0 0 6px rgba(131, 255, 79, 0.62));
}

body.theme-lena {
  --slot-asset-filter: hue-rotate(100deg) saturate(0.9) drop-shadow(0 0 6px rgba(209, 123, 102, 0.58));
}

body.theme-max {
  --slot-asset-filter: hue-rotate(140deg) saturate(0.9) brightness(1.08) drop-shadow(0 0 6px rgba(226, 201, 107, 0.58));
}

body.theme-marco {
  --slot-asset-filter: hue-rotate(18deg) saturate(1.2) drop-shadow(0 0 6px rgba(180, 108, 255, 0.62));
}

body.theme-tobias {
  --slot-asset-filter: hue-rotate(285deg) saturate(1.25) drop-shadow(0 0 6px rgba(115, 220, 255, 0.62));
}

body.theme-norman {
  --slot-asset-filter: hue-rotate(300deg) saturate(0.48) brightness(1.02) drop-shadow(0 0 6px rgba(155, 181, 200, 0.55));
}

body.theme-bambi {
  --slot-asset-filter: hue-rotate(130deg) saturate(0.42) sepia(0.14) brightness(1.03) drop-shadow(0 0 6px rgba(199, 177, 136, 0.54));
}

.slot-body-node strong,
.slot-body-node small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.slot-body-node strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.02;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.slot-body-node small {
  margin-top: 2px;
  color: var(--theme-muted, #d5c28f);
  font-size: 9px;
  line-height: 1;
}

/* First equipment pass: character paper with ten equipped slots and a five-slot bag. */
.equipment-character-panel,
.equipment-bag-panel {
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
}

.equipment-character-board {
  position: relative;
  height: clamp(470px, 60vh, 590px);
  margin-top: 10px;
  overflow: hidden;
  background-color: #05040a;
  background-image:
    linear-gradient(180deg, rgba(4, 3, 8, 0.02), rgba(4, 3, 8, 0.18)),
    var(--equipment-portrait);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #b66dff) 45%, #302339);
  border-radius: 6px;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.58);
}

.equipment-character-panel .equipment-character-board {
  margin-top: 0;
}

.equipment-character-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 2, 7, 0.68), transparent 24%, transparent 76%, rgba(3, 2, 7, 0.68)),
    linear-gradient(180deg, rgba(3, 2, 7, 0.28), transparent 24%, transparent 78%, rgba(3, 2, 7, 0.58));
}

.equipment-body-slot {
  position: absolute;
  z-index: 2;
  left: var(--slot-x);
  top: var(--slot-y);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 92px;
  height: auto;
  min-width: 0;
  min-height: 78px;
  padding: 5px 4px 4px;
  color: #fff5d3;
  background: linear-gradient(145deg, rgba(34, 25, 42, 0.96), rgba(7, 8, 13, 0.97));
  border: 1px solid rgba(176, 143, 205, 0.58);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 4px 12px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}

body[class*="theme-"] .equipment-body-slot {
  background: linear-gradient(145deg, rgba(34, 25, 42, 0.96), rgba(7, 8, 13, 0.97));
  border-color: color-mix(in srgb, var(--theme-accent, #b66dff) 58%, #303039);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.09),
    0 4px 12px rgba(0, 0, 0, 0.55);
}

.equipment-body-slot:hover,
.equipment-body-slot:focus-visible,
.equipment-body-slot.can-equip {
  border-color: color-mix(in srgb, var(--theme-accent, #b66dff) 52%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent, #b66dff) 28%, transparent);
  transform: translate(-50%, -50%);
}

body[class*="theme-"] .equipment-body-slot:hover,
body[class*="theme-"] .equipment-body-slot:focus-visible,
body[class*="theme-"] .equipment-body-slot.can-equip {
  background: linear-gradient(145deg, rgba(42, 30, 52, 0.98), rgba(9, 8, 17, 0.98));
  border-color: color-mix(in srgb, var(--theme-accent, #b66dff) 52%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent, #b66dff) 28%, transparent);
}

.equipment-body-slot.can-equip {
  cursor: pointer;
  border-color: #67d6ff;
  box-shadow: 0 0 14px rgba(103, 214, 255, 0.48);
}

.equipment-body-slot > .equipment-slot-visual {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.equipment-body-slot > .equipment-slot-visual > .item-icon {
  width: 56px;
  height: 56px;
}

.equipment-body-slot.empty .equipment-slot-visual {
  opacity: 0.72;
  filter: saturate(0.72);
}

.equipment-body-slot small {
  width: 100%;
  color: #e2d5ae;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.equipment-bag-copy {
  display: grid;
  gap: 4px;
  margin: 12px 0 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(240, 213, 107, 0.16);
}

.equipment-bag-copy strong {
  color: #fff0b8;
  font-size: 14px;
}

.equipment-bag-copy span {
  color: var(--theme-muted, #c8bb9c);
  font-size: 11px;
  line-height: 1.35;
}

.equipment-bag-grid {
  grid-template-columns: repeat(5, minmax(54px, 1fr));
  gap: 9px;
}

.equipment-bag-grid .inventory-slot {
  max-width: 82px;
  justify-self: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(197, 146, 255, 0.09), transparent 62%),
    rgba(4, 4, 10, 0.72);
  border-color: rgba(218, 190, 118, 0.3);
}

.equipment-bag-grid .inventory-slot.is-selected,
.shop-inventory-slot.is-selected {
  border-color: #ffe071;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 113, 0.55), 0 0 15px rgba(255, 224, 113, 0.4);
}

@media (max-width: 820px) {
  .equipment-character-board {
    height: 520px;
  }

  .equipment-bag-grid,
  .inventory-view-panel .equipment-bag-grid {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
  }
}

@media (max-width: 560px) {
  .character-board-stats {
    gap: 2px;
    width: calc(100% - 12px);
  }

  .character-board-stats dt {
    font-size: 7px;
  }

  .character-board-stats dd {
    font-size: 10px;
  }

  .equipment-character-board {
    height: 470px;
  }

  .equipment-body-slot {
    width: 60px;
  }

  .equipment-slot-visual {
    width: 38px;
    height: 38px;
  }

  .equipment-slot-visual > .item-icon {
    width: 34px;
    height: 34px;
  }
}

.slot-upgrade-grid {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.slot-upgrade-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(86px, auto);
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--theme-ink, #fff7df);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(143, 211, 255, 0.14);
  border-radius: 8px;
}

.slot-upgrade-card > .slot-icon {
  width: 34px;
  height: 34px;
}

.slot-upgrade-card strong,
.slot-upgrade-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.slot-upgrade-card small {
  margin-top: 3px;
  color: var(--theme-muted, #d5c28f);
  font-size: 11px;
  line-height: 1.25;
}

.slot-upgrade-card button {
  min-height: 36px;
  padding: 7px 9px;
  white-space: nowrap;
}

.item-context-menu {
  position: fixed;
  z-index: 200;
  width: 220px;
  padding: 9px;
  color: #fff4cf;
  background:
    linear-gradient(145deg, rgba(44, 18, 8, 0.96), rgba(8, 4, 3, 0.98)),
    #1e0d07;
  border: 2px solid var(--theme-border, #9b5a24);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 146, 0.12),
    0 14px 26px rgba(0, 0, 0, 0.5),
    0 0 18px color-mix(in srgb, var(--theme-glow, #a66cff) 45%, transparent);
}

.item-context-menu.hidden {
  display: none;
}

.item-context-menu strong,
.item-context-menu small,
.item-context-menu button {
  display: block;
  width: 100%;
}

.item-context-menu strong {
  font-size: 16px;
  line-height: 1.1;
}

.item-context-menu small {
  margin: 4px 0 8px;
  color: var(--theme-muted, #f0d493);
  font-size: 11px;
  line-height: 1.25;
}

.item-context-menu button {
  min-height: 34px;
  margin-top: 6px;
  padding: 7px 9px;
  text-align: left;
}

.item-context-menu button:disabled {
  text-align: left;
}

.ghost {
  min-height: 34px;
  padding: 7px 10px;
  background: linear-gradient(#fff0ba, #c88937);
}

pre {
  min-height: 225px;
  max-height: calc(100vh - 270px);
  margin: 14px 0 0;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.4;
  color: #ffe9b0;
  background: #23130d;
  border: 3px solid #130805;
  border-radius: 7px;
}

@keyframes xpFloat {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  72% {
    opacity: 1;
    transform: translateY(-18px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-32px) scale(0.96);
  }
}

@keyframes navXpRise {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  18% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }
  68% {
    opacity: 1;
    transform: translateY(-34px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-52px) scale(0.96);
  }
}

@keyframes navLevelRoll {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.86);
  }
  34% {
    opacity: 1;
    transform: translateY(-4px) scale(1.16);
    text-shadow:
      0 2px 2px rgba(0, 0, 0, 0.95),
      0 0 9px rgba(255, 207, 56, 0.95),
      0 0 18px rgba(255, 235, 136, 0.72);
  }
  62% {
    transform: translateY(1px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes navLevelRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.9);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }
  68% {
    opacity: 1;
    transform: translate(-50%, -22px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -38px) scale(0.96);
  }
}

@keyframes logPulse {
  0%,
  100% {
    box-shadow: 0 4px 0 #45230f, 0 8px 16px var(--shadow);
  }
  50% {
    box-shadow: 0 4px 0 #45230f, 0 0 18px rgba(112, 198, 255, 0.78);
  }
}

@keyframes weaponToEnemy {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(0.86) rotate(-18deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(310px, -18px) scale(1.18) rotate(28deg);
  }
}

@keyframes combat-impact {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    transform: translateX(0) scale(1);
  }
  34% {
    filter: brightness(1.38) saturate(1.22);
    transform: translateX(var(--combat-hit-shift)) scale(0.985);
  }
  68% {
    filter: brightness(1.08) saturate(1.08);
    transform: translateX(0) scale(1.005);
  }
}

@keyframes weaponToHero {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(0.86) rotate(18deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-310px, -18px) scale(1.18) rotate(-28deg);
  }
}

@keyframes roundPop {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes damageFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.78);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -62px) scale(0.96);
  }
}

@keyframes levelBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.8);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.08);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(0.94);
  }
}

@keyframes levelNamePulse {
  0%,
  100% {
    text-shadow: none;
  }
  35% {
    color: #fff7cf;
    text-shadow: 0 0 10px rgba(178, 111, 255, 0.88), 0 0 20px rgba(255, 220, 104, 0.48);
  }
}

@media (max-width: 820px) {
  .shell,
  .content-grid,
  .shop-hub,
  .leaderboard-stage.leaderboard-selector,
  .guild-stage {
    grid-template-columns: 1fr;
  }

  .shop-hub.shop-selector {
    grid-template-columns: 1fr;
  }

  .shop-entry {
    min-height: 260px;
  }

  .leaderboard-entry {
    min-height: 260px;
  }

  .shop-room {
    min-height: 460px;
  }

  .shop-counter-layout {
    grid-template-columns: 1fr;
  }

  .shop-character-side,
  .shop-merchant-side {
    min-height: 520px;
  }

  .shell:not(:has(#login:not(.hidden))) .sidebar {
    grid-template-columns: 1fr;
  }

  .shell:not(:has(#login:not(.hidden))) .profile-panel,
  .shell:not(:has(#login:not(.hidden))) .topnav {
    grid-column: 1;
  }

  .shell:not(:has(#login:not(.hidden))) .topnav {
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.shop-view .content-grid,
  body.inventory-view .content-grid {
    margin-top: 0;
  }

  body.shop-view .action-panel,
  body.inventory-view .action-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body.shop-view .action-panel #actions,
  body.inventory-view .action-panel #actions {
    overflow: visible;
  }

  .inventory-view-panel .inventory-grid {
    grid-template-columns: repeat(4, var(--inventory-slot-size));
  }

  .inventory-view-panel {
    --inventory-slot-size: 62px;
    --inventory-icon-size: 50px;
    --inventory-gap: 7px;
  }

  .inventory-view-panel .inventory-slot {
    width: var(--inventory-slot-size);
  }

  .inventory-layout {
    grid-template-columns: 1fr;
  }

  .slot-detail-stats {
    grid-template-columns: 1fr;
  }

  .slot-body-board {
    min-height: 0;
    height: 500px;
  }

  .slot-body-node {
    grid-template-columns: 28px minmax(0, 1fr);
    width: clamp(76px, 30%, 92px);
    height: 52px;
    min-height: 0;
    padding: 5px;
  }

  .slot-body-node .slot-icon {
    width: 28px;
    height: 28px;
  }

  .slot-body-node strong {
    font-size: 10px;
  }

  .inventory-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell:has(#login:not(.hidden)) {
    grid-template-columns: 1fr;
  }

  .shell:has(#login:not(.hidden)) .sidebar {
    display: block;
  }

  .login-panel {
    display: block;
  }

  .login-description {
    margin-top: 14px;
  }

  .log-panel {
    position: static;
    width: auto;
    max-height: none;
    opacity: 0;
    pointer-events: none;
    transform: none;
  }

  .log-panel.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .log-panel:not(.visible) {
    display: none;
  }

  .scene {
    height: 240px;
  }

  .fight-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .action-panel:has(#actions.fight-stage) {
    min-height: auto;
    overflow: visible;
  }

  .action-panel:has(#actions.fight-stage) #actions {
    display: block;
  }

  .fight-center {
    min-height: 200px;
  }

  body.dungeon-view .action-panel {
    min-height: auto;
  }

  body.dungeon-view .fight-stage .combatant {
    grid-template-rows: 260px 32px auto;
  }

  body.dungeon-view .fight-stage .combatant-art {
    min-height: 190px;
  }

  body.dungeon-view .fight-stage .fight-controls button {
    flex: 1 1 160px;
  }

  .dungeon-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-stall {
    min-height: auto;
    padding: 0;
  }

  .shop-stall-header {
    min-height: auto;
    display: block;
  }

  .shopkeeper {
    display: none;
  }

  .shop-controls {
    top: 3.5%;
    right: 3.5%;
    min-width: min(190px, 34%);
  }

  .shop-offer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
  }

  body.dungeon-view .dungeon-stage,
  body.dungeon-view .dungeon-stage:has(> .dungeon-retry-countdown) {
    height: auto;
    grid-template-rows: none;
  }

  body.dungeon-view .dungeon-detail {
    grid-template-columns: 1fr;
  }

  body.dungeon-view .dungeon-preview-art {
    min-height: 240px;
  }

  body.dungeon-view .dungeon-start-button {
    width: 100%;
    min-width: 0;
  }

  .guild-member {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .guild-member .guild-portrait {
    width: 44px;
    min-width: 44px;
  }

  .guild-member .guild-member-status {
    grid-column: 2 / 4;
  }

  .guild-bonuses {
    grid-template-columns: 1fr;
  }

  .raid-encounter-track {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .combatant {
    grid-template-rows: 260px 32px auto;
  }

  .fight-stage .combatant {
    grid-template-rows: 260px 32px auto;
  }

  .combatant-art {
    min-height: 190px;
  }

  .inventory-panel {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin-top: 14px;
    border-radius: 8px;
    opacity: 1;
    transform: none;
  }

  .inventory-tab {
    display: none;
  }

  .town {
    right: 18px;
    transform: scale(0.78);
    transform-origin: right bottom;
  }

  .hero-stand {
    left: 34px;
    transform: scale(0.82);
    transform-origin: left bottom;
  }
}

.session-logout {
  width: calc(100% - 24px);
  min-height: 36px;
  margin: 8px 12px 12px;
  color: #d9caef;
  font: 700 14px Georgia, serif;
  border: 1px solid rgba(174, 126, 231, 0.55);
  border-radius: 6px;
  background: rgba(12, 7, 18, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.session-logout-placeholder:disabled {
  cursor: default;
  opacity: 1;
}

.shell:has(#login:not(.hidden)) .session-logout {
  display: none;
}

body[class*="theme-"] #characterEquipment .equipment-body-slot {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 92px;
  height: auto;
  min-height: 78px;
  padding: 5px 4px 4px;
  background: linear-gradient(145deg, rgba(34, 25, 42, 0.96), rgba(7, 8, 13, 0.97));
  border: 1px solid color-mix(in srgb, var(--theme-accent, #b66dff) 58%, #303039);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 4px 12px rgba(0, 0, 0, 0.55);
}

#characterEquipment .equipment-body-slot[data-slot="weaponMain"],
#characterEquipment .equipment-body-slot[data-slot="weaponOff"] {
  top: 80%;
}

#characterEquipment .equipment-body-slot small {
  overflow: visible;
  font-size: 8px;
  text-overflow: clip;
  white-space: normal;
}

.character-equipment-toggle {
  display: grid;
  place-items: center;
  right: 6px;
  width: 48px;
  height: 44px;
  padding: 0;
  background: rgba(8, 6, 15, 0.92);
  border-color: rgba(210, 164, 230, 0.8);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.62), 0 0 8px rgba(181, 91, 232, 0.32);
  cursor: pointer;
}

.character-equipment-toggle::before {
  content: "";
  width: 44px;
  height: 38px;
  background: url("assets/ui/equipment-mask.png") center / contain no-repeat;
  opacity: 0.7;
}

.character-equipment-toggle:has(input:checked)::before {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(192, 112, 255, 0.7));
}

.character-equipment-toggle:has(input:focus-visible) {
  outline: 2px solid #e5b7ff;
  outline-offset: 2px;
}

.character-equipment-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.character-equipment-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 620px) {
  #profile .character-paper.portrait-card {
    margin-top: 52px;
    overflow: visible;
  }

  #profile .character-equipment-toggle {
    top: -50px;
    right: 0;
  }

  body[class*="theme-"] #characterEquipment .equipment-body-slot {
    width: 60px;
    min-height: 64px;
  }

  #characterEquipment .equipment-body-slot[data-slot="weaponMain"],
  #characterEquipment .equipment-body-slot[data-slot="weaponOff"] {
    top: 72%;
  }

  #characterEquipment .equipment-body-slot > .equipment-slot-visual {
    width: 38px;
    height: 38px;
  }

  #characterEquipment .equipment-body-slot > .equipment-slot-visual > .item-icon {
    width: 34px;
    height: 34px;
  }

  #characterEquipment .equipment-body-slot small {
    font-size: 7px;
  }
}

@media (max-width: 700px) {
  .inventory-subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .seal-overview-head {
    flex-direction: column;
  }

  .universal-seal {
    width: 100%;
  }

  .seal-shard-bar,
  .seal-slot-grid {
    grid-template-columns: 1fr;
  }

  .seal-shard-bar {
    max-height: 220px;
    overflow-y: auto;
  }

  .seal-passive small {
    white-space: normal;
  }

  .character-screen {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "stats"
      "passives"
      "gold";
    min-height: 0;
  }

  .character-screen .character-paper {
    min-height: 520px;
  }

  .character-screen .stats {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .character-screen .stats .skill-row[data-stat-row] {
    grid-column: 1;
    grid-row: auto;
  }

  .active-seal-passives {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

@media (max-width: 820px) {
  .inventory-view-panel .equipment-bag-grid {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
  }
}

.inventory-view-panel .equipment-bag-grid {
  grid-template-columns: repeat(5, minmax(48px, 1fr));
}

body[class*="theme-"] .action-panel:has(#actions.arena-profile-stage),
body.shop-view .action-panel:has(#actions.shop-room-stage) {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.arena-profile-layout {
  gap: 24px;
}

.arena-profile-art {
  border: 1px solid rgba(202, 177, 217, 0.48);
  border-radius: 3px;
  box-shadow: inset 0 -42px 62px rgba(20, 8, 4, 0.62);
}

.arena-profile-art figcaption {
  left: 16px;
  right: 16px;
  bottom: 26px;
  padding: 14px 8px 8px;
  background: linear-gradient(transparent, rgba(6, 4, 12, 0.9));
  border: 0;
  border-radius: 0;
}

.arena-profile-stats {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 0;
}

.arena-profile-stats .arena-profile-stat:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  min-height: 66px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(202, 177, 217, 0.25);
  border-radius: 0;
  box-shadow: none;
}

.arena-profile-equipment .equipment-body-slot {
  width: 92px;
  height: auto;
  min-height: 78px;
  padding: 5px 4px 4px;
}

.arena-profile-equipment .equipment-body-slot[data-slot="weaponMain"],
.arena-profile-equipment .equipment-body-slot[data-slot="weaponOff"] {
  top: 80%;
}

.arena-profile-equipment-toggle {
  top: 0;
  right: -8px;
  margin: 0;
}

body.shop-view .shop-room.shop-counter-layout {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.shop-character-side {
  z-index: 2;
  overflow: visible;
}

body.shop-view .shop-character-paper .equipment-body-slot.shop-slot-preview {
  z-index: 5;
  border-color: #ffe5a5;
  background: linear-gradient(145deg, rgba(75, 49, 37, 0.98), rgba(18, 11, 20, 0.98));
  box-shadow: 0 0 0 2px rgba(255, 227, 154, 0.55), 0 0 26px rgba(255, 208, 112, 0.9), inset 0 0 15px rgba(255, 211, 138, 0.28);
}

body.shop-view .action-panel:has(#actions.shop-hub.shop-selector),
body.leaderboard-view .action-panel:has(#actions.hall-of-fame) {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.shop-view .shop-hub.shop-selector,
body.leaderboard-view .hall-of-fame {
  overflow: visible;
}

body.shop-view .shop-entry {
  border-width: 1px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

body.leaderboard-view .hall-columns {
  background: rgba(7, 7, 14, 0.45);
}

body.leaderboard-view .hall-entry,
body.leaderboard-view .hall-entry:nth-child(odd),
body.leaderboard-view .hall-entry.is-podium,
body.leaderboard-view .hall-entry.rank-2,
body.leaderboard-view .hall-entry.rank-3 {
  background: rgba(4, 4, 10, 0.48);
  border-bottom-color: rgba(197, 167, 209, 0.22);
}

@media (max-width: 620px) {
  .arena-profile-art {
    margin-top: 52px;
    overflow: visible;
  }

  .arena-profile-equipment-toggle {
    top: -50px;
    right: 0;
  }

  .arena-profile-equipment .equipment-body-slot {
    width: 60px;
    min-height: 64px;
  }

  .arena-profile-equipment .equipment-body-slot[data-slot="weaponMain"],
  .arena-profile-equipment .equipment-body-slot[data-slot="weaponOff"] {
    top: 72%;
  }

  .arena-profile-equipment .equipment-body-slot > .equipment-slot-visual {
    width: 38px;
    height: 38px;
  }

  .arena-profile-equipment .equipment-body-slot > .equipment-slot-visual > .item-icon {
    width: 34px;
    height: 34px;
  }

  .arena-profile-equipment .equipment-body-slot small {
    font-size: 7px;
  }
}

.settings-password {
  width: min(760px, 100%);
  border-top: 1px solid rgba(214, 169, 82, 0.26);
  padding-top: 18px;
}

.settings-password h3 {
  margin: 0 0 16px;
  color: #fff1c2;
  font-size: 20px;
}

.settings-password-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-password-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #d3b4e7;
  font-size: 13px;
}

.settings-password-form label:first-child {
  grid-column: 1 / -1;
}

.settings-password-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #8050a5;
  border-radius: 4px;
  background: #100c16;
  color: #fff7d9;
  font: inherit;
}

.settings-password-form input:focus-visible {
  outline: 2px solid #67c8ff;
  outline-offset: 2px;
}

.settings-password-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-password-footer p {
  flex: 1 1 260px;
  margin: 0;
  min-height: 20px;
  color: #ffaaa8;
  font-size: 13px;
}

.settings-password-footer p.is-success { color: #a8e6bd; }
.settings-password-footer button { min-height: 42px; margin-left: auto; }

@media (max-width: 620px) {
  .settings-password-form { grid-template-columns: minmax(0, 1fr); }
}

.password-modal-card {
  width: min(430px, 100%);
}

.password-modal-card h2 {
  font-size: 32px;
}

.password-field {
  display: grid;
  gap: 7px;
  margin-top: 20px;
  color: #dcc8fa;
  font-weight: 700;
}

.password-field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: #fff8df;
  font: 700 18px Georgia, serif;
  letter-spacing: 0;
  border: 2px solid #6d4797;
  border-radius: 6px;
  outline: none;
  background: #0c0712;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
}

.password-field input:focus {
  border-color: #e1b866;
  box-shadow: 0 0 0 3px rgba(225, 184, 102, 0.2), inset 0 0 14px rgba(0, 0, 0, 0.55);
}

.password-error {
  min-height: 22px;
  margin: 9px 0 0;
  color: #ff9d9d;
  font-weight: 700;
}

.password-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.password-actions button {
  min-height: 44px;
  color: #fff4d2;
  font: 700 16px Georgia, serif;
  border: 2px solid #6d4797;
  border-radius: 6px;
  background: linear-gradient(#532181, #241039);
}

.password-actions .password-submit {
  color: #1d1205;
  border-color: #e6bd70;
  background: linear-gradient(#ffd67a, #bb762c);
}