:root {
  --ink: #f7efda;
  --ink-dark: #172130;
  --muted: #b8c0c7;
  --blue-950: #0d1726;
  --blue-900: #14243a;
  --blue-800: #1b3151;
  --blue-700: #244b7c;
  --blue-600: #2f63a2;
  --gold-300: #f2cd6c;
  --gold-500: #c8902d;
  --gold-700: #77521a;
  --green-400: #68b85f;
  --red-400: #e16b58;
  --red-700: #8e322c;
  --iron-900: #171b20;
  --iron-800: #222831;
  --iron-700: #323a43;
  --paper: #ded1af;
  --paper-ink: #392f24;
  --focus: #ffe69a;
  --panel-shadow: 0 14px 32px rgba(2, 7, 13, .38);
  --soft-shadow: 0 8px 20px rgba(2, 7, 13, .26);
  color-scheme: dark;
  font-family: "Barlow", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #081018;
}

button {
  font: inherit;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: .46;
  filter: saturate(.45);
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  background: #081018;
}

.topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(180px, 1fr);
  align-items: stretch;
  background: var(--blue-950);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .34);
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: #8d682d;
  box-shadow: 0 1px 0 #2c1c0b;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px;
  min-width: 0;
  color: var(--gold-300);
}

.brand-crest {
  width: 35px;
  height: 44px;
  flex: 0 0 auto;
}

.brand-lockup h1,
.brand-lockup p {
  margin: 0;
}

.brand-lockup h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.75rem;
  line-height: .95;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.brand-lockup p {
  margin-top: 4px;
  color: #aeb7c4;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.battle-status {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .05), inset -1px 0 rgba(255, 255, 255, .05);
}

.status-unit,
.integrity-unit {
  min-width: 112px;
  padding: 11px 18px 9px;
  display: grid;
  align-content: center;
  gap: 2px;
  box-shadow: inset -1px 0 rgba(206, 166, 77, .18);
}

.status-unit span,
.integrity-label span {
  color: #95a4b4;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.status-unit strong,
.integrity-label strong {
  font-family: "Barlow Condensed", sans-serif;
  color: #fff5d8;
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
}

.currency-unit {
  grid-template-columns: 24px auto;
  column-gap: 8px;
}

.currency-unit svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 23px;
  fill: #e8b84e;
  stroke: #7e541e;
  stroke-width: 1;
}

.integrity-unit {
  min-width: 170px;
}

.integrity-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}

.integrity-track {
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  background: #080d12;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), 0 1px rgba(255, 255, 255, .04);
  border-radius: 3px;
}

.integrity-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: #6abf67;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .25s;
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #d8c58e;
  background: #17263a;
  border: 1px solid #40506a;
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s, color .18s;
}

.icon-button:hover {
  color: #fff1bd;
  background: #203858;
  transform: translateY(-1px);
}

.icon-button:active {
  transform: translateY(1px);
}

.icon-button svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-off,
.play-icon,
#soundButton[aria-pressed="true"] .sound-on,
#pauseButton[aria-pressed="true"] .pause-icon {
  display: none;
}

#soundButton[aria-pressed="true"] .sound-off,
#pauseButton[aria-pressed="true"] .play-icon {
  display: block;
}

.game-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
}

.battlefield-frame {
  --wall-status-height: 36px;
  --battle-bottom-inset: 0px;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #132216;
  box-shadow: inset -8px 0 22px rgba(0, 0, 0, .32);
}

#gameCanvas {
  width: 100%;
  height: calc(100% - var(--wall-status-height) - var(--battle-bottom-inset));
  display: block;
  cursor: default;
  touch-action: none;
}

.boss-hud {
  position: absolute;
  z-index: 8;
  inset: 12px 20px auto;
  max-width: 720px;
  margin-inline: auto;
  padding: 11px 16px 10px;
  color: #fff0ce;
  background: #15202bf5;
  border-top: 2px solid #d98f59;
  box-shadow: 0 8px 24px #07101666;
  pointer-events: none;
}

.boss-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.boss-heading strong { font: 800 clamp(1.1rem, 2.3vw, 1.6rem)/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .035em; }
.boss-heading span { color: #e6c99a; font: 700 12px/1.2 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boss-health { height: 7px; margin-top: 8px; background: #080f17; overflow: hidden; }
.boss-health i { display: block; height: 100%; background: #dc7954; transform-origin: left; transition: transform .1s linear; }
.boss-traits { margin: 7px 0 0; font-size: 12px; line-height: 1.4; color: #e2dac9; }
.boss-action { margin: 3px 0 0; font-size: 12px; font-weight: 700; line-height: 1.4; color: #f2bc72; }
.boss-arriving { top: 48%; padding-block: 22px; text-align: center; border-bottom: 2px solid #d98f59; }
.boss-arriving .boss-heading { flex-direction: column-reverse; align-items: center; gap: 8px; }
.boss-arriving .boss-heading strong { font-size: clamp(1.8rem, 4vw, 3rem); }
.boss-arriving .boss-traits { margin-top: 12px; }
.boss-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1024px) {
  .boss-hud { inset: 8px 10px auto; width: auto; margin-inline: auto; padding: 8px 10px; }
  .boss-hud .boss-heading { flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
  .boss-hud .boss-heading strong { font-size: 16px; line-height: 1.1; letter-spacing: 0; }
  .boss-hud .boss-heading span { font-size: 11px; }
  .boss-hud .boss-traits { margin-top: 5px; font-size: 11px; line-height: 1.3; text-align: left; }
  .boss-hud .boss-action { font-size: 11px; text-align: left; }
  .boss-hud .boss-health { height: 4px; margin-top: 5px; }

}

@media (prefers-reduced-motion: reduce) {
  .boss-health i { transition: none; }
}

.wall-health {
  position: absolute;
  z-index: 8;
  inset-inline: 0;
  bottom: var(--battle-bottom-inset);
  height: var(--wall-status-height);
  padding: 6px 12px;
  color: #f7edcf;
  background: #101d2a;
  border-top: 1px solid #384451;
  pointer-events: none;
}

.wall-health > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wall-health span {
  color: #d8c58e;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wall-health strong {
  font: 800 .78rem "Barlow Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wall-health i {
  height: 5px;
  display: block;
  margin-top: 6px;
  overflow: hidden;
  background: #27313a;
  border-radius: 3px;
}

.wall-health b {
  width: 100%;
  height: 100%;
  display: block;
  background: #69bd65;
  border-radius: inherit;
  transform-origin: left center;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s;
}

.wall-health.critical strong {
  color: #ffb09f;
}

.wall-health.hit {
  animation: wall-impact .24s cubic-bezier(.16, 1, .3, 1);
}

@keyframes wall-impact {
  35% { filter: brightness(1.55);  }
}

kbd {
  display: inline-block;
  min-width: 25px;
  padding: 2px 5px;
  color: #1c2734;
  background: #efe3c3;
  border-radius: 4px;
  box-shadow: 0 2px 0 #8f794f;
  font: 700 .66rem/1.2 "Barlow", sans-serif;
  text-align: center;
}

.build-popover {
  position: absolute;
  z-index: 12;
  width: 226px;
  padding: 10px;
  color: #f7efd9;
  background: #17202a;
  border: 1px solid #75633f;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
  transform: translate(-50%, calc(-100% - 18px));
}

.build-popover p {
  margin: 0 0 8px;
  font: 700 .78rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.build-popover-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.build-popover-actions button {
  padding: 7px 3px;
  color: #ebdec0;
  background: #243342;
  border: 0;
  border-radius: 7px;
  font-size: .66rem;
  font-weight: 700;
  cursor: pointer;
}

.build-popover-actions button:hover {
  background: #315071;
}

.build-popover-actions span {
  display: block;
  margin-top: 3px;
  color: var(--gold-300);
}

.screen-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 74px);
  background: rgba(6, 15, 21, .68);
  backdrop-filter: blur(5px);
}

.screen-layer[hidden] {
  display: none;
}

.spell-draft,
.level-camp {
  z-index: 34;
  padding: clamp(16px, 3vw, 38px);
  background: rgba(5, 12, 19, .82);
  backdrop-filter: blur(8px);
}

.draft-panel,
.camp-panel {
  width: min(1180px, 100%);
  max-height: 100%;
  padding: clamp(20px, 3vw, 34px);
  overflow: auto;
  color: #edf2ee;
  background: #111e2b;
  border-radius: 14px;
  box-shadow: 0 24px 54px rgba(2, 7, 12, .48);
}

.camp-panel {
  width: min(920px, 100%);
}

.draft-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.draft-heading h2,
.draft-heading p {
  margin: 0;
}

.draft-heading h2 {
  color: #fff0c1;
  font: 800 clamp(2.15rem, 4vw, 3.4rem)/.92 "Barlow Condensed", sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.draft-heading p {
  max-width: 58ch;
  margin-top: 10px;
  color: #bdc9ce;
  font-size: .86rem;
  line-height: 1.45;
}

.draft-heading-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-heading-actions > small {
  color: #93a5b3;
  font: 700 .61rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.draft-heading-actions > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #1b1b17;
  background: var(--gold-300);
  border-radius: 6px;
  font: 800 .76rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

.draft-choice {
  position: relative;
  min-height: 244px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px;
  overflow: hidden;
  color: #edf2ee;
  text-align: left;
  background: #1a2a3b;
  border: 1px solid #405064;
  border-radius: 13px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .18s, border-color .18s;
}

.draft-choice::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -32px;
  width: 110px;
  height: 110px;
  background: var(--ward);
  border-radius: 50%;
  filter: blur(38px);
  opacity: .12;
  pointer-events: none;
}

.draft-choice:hover {
  background: #22364b;
  border-color: var(--ward);
  transform: translateY(-3px);
}

.draft-choice.cataclysm {
  background: #272638;
  border-color: color-mix(in srgb, var(--ward) 62%, #405064);
  box-shadow: 0 10px 24px rgba(4, 7, 16, .28);
}

.draft-choice.cataclysm:hover {
  background: #302e45;
}

.draft-tier {
  display: block;
  margin: -7px 0 8px;
  color: var(--ward);
  font: 800 .64rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.draft-affinity {
  display: block;
  margin: -7px 0 8px;
  color: #d7c99f;
  font: 800 .61rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.draft-tier + .draft-affinity {
  margin-top: 0;
}

.damage-type-badge {
  display: inline-flex;
  width: max-content;
  margin: -2px 0 7px;
  padding: 3px 7px;
  color: var(--damage-type);
  font: 800 .58rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--damage-type) 12%, #111a28);
  border: 1px solid color-mix(in srgb, var(--damage-type) 55%, #3a485a);
  border-radius: 999px;
}

.draft-choice:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.draft-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  color: var(--ward);
  overflow: hidden;
  background: #111a24;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(232, 210, 154, .12), inset 0 -8px 18px rgba(0, 0, 0, .24);
}

.draft-icon svg,
.arsenal-slot svg,
.tower-slot svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spell-art {
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("assets/spell-icons-v1.png");
  background-repeat: no-repeat;
  background-position: calc(var(--icon-column) * 25%) calc(var(--icon-row) * 25%);
  background-size: 500% 500%;
  filter: drop-shadow(0 4px 6px rgba(1, 5, 10, .48));
  transform: scale(1.04);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), filter .22s;
}

.spell-art-expansion {
  background-image: url("assets/spell-icons-expansion-v1.png");
  background-position: calc(var(--icon-column) * 50%) 0;
  background-size: 300% 100%;
}
.spell-art-identity {
  background-image: url("assets/spell-icons-identity-v2.png");
  background-size: 300% 100%;
  background-position: calc(var(--icon-column) * 50%) 0;
}

.command-art {
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--blue-950);
  background-image: url("assets/command-icons-v1.png");
  background-repeat: no-repeat;
  background-position: calc(var(--command-column) * 25%) calc(var(--command-row) * 33.333333%);
  background-size: 500% 400%;
  border-radius: inherit;
  filter: drop-shadow(0 4px 6px rgba(1, 5, 10, .48));
  transform: scale(1.04);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), filter .22s;
}

.draft-choice:hover :is(.spell-art, .command-art) {
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--ward) 48%, transparent));
  transform: scale(1.12) rotate(-2deg);
}

.draft-choice strong {
  display: block;
  color: #fff2c9;
  font: 800 1.3rem "Barlow Condensed", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.draft-action {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 6px;
  color: var(--path, var(--ward));
  background: #101b27;
  border-radius: 5px;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.draft-choice small {
  display: block;
  margin-top: 13px;
  color: #bdc7cc;
  font-size: .76rem;
  line-height: 1.42;
}

.draft-choice em {
  margin-top: auto;
  padding-top: 16px;
  color: #dde4e2;
  font: 700 .7rem "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.draft-capacity {
  margin: 18px 0 0;
  color: #8f9da6;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.camp-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.camp-heading h2,
.camp-heading p {
  margin: 0;
}

.camp-heading h2 {
  color: #fff0c1;
  font: 800 clamp(2.4rem, 5vw, 4rem)/.9 "Barlow Condensed", sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.camp-heading p {
  max-width: 62ch;
  margin-top: 10px;
  color: #bdc9ce;
  font-size: .86rem;
  line-height: 1.45;
}

.camp-treasury {
  flex: 0 0 auto;
  min-width: 148px;
  padding: 11px 13px;
  text-align: right;
  background: #18283a;
  border: 1px solid #405064;
  border-radius: 9px;
}

.camp-treasury span,
.camp-treasury strong {
  display: block;
}

.camp-treasury > span {
  color: #93a5b3;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.camp-treasury strong {
  margin-top: 4px;
  color: var(--gold-300);
  font: 800 1rem "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.camp-treasury strong span {
  display: inline;
}

.camp-report {
  margin-bottom: 18px;
  padding: 15px;
  background: #0d1925;
  border: 1px solid #35485b;
  border-radius: 12px;
}

.camp-report-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.camp-report-heading h3,
.camp-report-heading small,
.camp-report-heading strong {
  display: block;
}

.camp-report-heading h3 {
  margin: 0;
  color: #fff0c1;
  font: 800 1.2rem "Barlow Condensed", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.camp-report-heading small {
  margin-top: 2px;
  color: #91a8b8;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.camp-report-heading strong {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #17202b;
  background: var(--gold-300);
  border-radius: 6px;
  font: 800 .68rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.camp-report-grid {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.camp-report-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  background: #34475a;
  border-radius: 9px;
  gap: 1px;
}

.camp-report-stats div {
  min-width: 0;
  padding: 10px 11px;
  background: #142436;
}

.camp-report-stats > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.camp-report-stats dt {
  color: #91a8b8;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.camp-report-stats dd {
  margin: 4px 0 0;
  color: #f4e8c7;
  font: 800 1rem "Barlow Condensed", sans-serif;
}

.camp-reward-column {
  min-width: 0;
}

.camp-reward-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: #34475a;
  border-radius: 8px;
}

.camp-reward-ledger > span {
  min-width: 0;
  padding: 7px 9px;
  background: #142436;
}

.camp-reward-ledger small,
.camp-reward-ledger strong {
  display: block;
}

.camp-reward-ledger small {
  color: #91a8b8;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.camp-reward-ledger strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--gold-300);
  font: 800 .82rem "Barlow Condensed", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camp-loot-result,
.camp-spoil-result {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--loot-rarity) 9%, #142436);
  border: 1px solid color-mix(in srgb, var(--loot-rarity) 58%, #405064);
  border-radius: 9px;
}

.camp-spoil-result[hidden] {
  display: none;
}

.camp-loot-art {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101923;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--loot-rarity);
}

.camp-loot-art > .gear-art {
  width: 100%;
  height: 100%;
}

.camp-loot-result small,
.camp-loot-result strong,
.camp-loot-result em,
.camp-spoil-result small,
.camp-spoil-result strong,
.camp-spoil-result em {
  display: block;
}

.camp-loot-result small,
.camp-spoil-result small {
  color: var(--loot-rarity);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.camp-loot-result strong,
.camp-spoil-result strong {
  margin-top: 2px;
  overflow: hidden;
  color: #fff0c1;
  font: 800 .9rem "Barlow Condensed", sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.camp-loot-result em,
.camp-spoil-result em {
  margin-top: 2px;
  color: #b8c8cf;
  font-size: .61rem;
  font-style: normal;
  line-height: 1.3;
}

.camp-wall-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .62fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #172638;
  border: 1px solid #3b4d60;
  border-radius: 11px;
}

.camp-wall-copy {
  min-width: 0;
}

.camp-wall-copy span,
.camp-wall-copy strong,
.camp-wall-copy small {
  display: block;
}

.camp-wall-copy span {
  color: #93a5b3;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.camp-wall-copy strong {
  margin-top: 3px;
  color: #f4e8c7;
  font: 800 1.15rem "Barlow Condensed", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.camp-wall-copy small {
  margin-top: 4px;
  color: #9eacb4;
  font-size: .68rem;
  line-height: 1.35;
}

.camp-repair {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 8px 12px;
  color: #fff0b5;
  text-align: left;
  background: #26466d;
  border: 1px solid #54739a;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s, border-color .18s;
}

.camp-repair svg {
  grid-row: 1 / 3;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camp-repair > span,
.camp-repair > strong {
  display: block;
}

.camp-repair > span {
  font: 800 .8rem "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.camp-repair > strong {
  color: #c9d7e2;
  font-size: .64rem;
}

.camp-repair > strong span {
  display: inline;
}

.camp-repair:hover:not(:disabled) {
  background: #315783;
  border-color: var(--gold-300);
  transform: translateY(-2px);
}

.camp-repair:active:not(:disabled) {
  transform: translateY(1px);
}

.camp-repair:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.camp-repair:focus-visible,
.camp-actions .primary-action:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.camp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #34475a;
}

.camp-actions p {
  max-width: 58ch;
  margin: 0;
  color: #9eacb4;
  font-size: .7rem;
  line-height: 1.4;
}

.camp-actions .primary-action {
  flex: 0 0 auto;
}

.run-upgrade-shop {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #34475a;
}

.run-upgrade-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.run-upgrade-heading h3,
.run-upgrade-heading p {
  margin: 0;
}

.run-upgrade-heading h3 {
  color: #fff0c1;
  font: 800 1rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.run-upgrade-heading p {
  margin-top: 3px;
  color: #9eacb4;
  font-size: .67rem;
  line-height: 1.35;
}

.run-upgrade-heading > strong {
  flex: 0 0 auto;
  color: var(--gold-300);
  font: 800 .82rem "Barlow Condensed", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.run-upgrade-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.run-upgrade {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 10px;
  color: #e8efed;
  text-align: left;
  background: #172638;
  border: 1px solid #3b4d60;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s, border-color .18s;
}

.run-upgrade:hover:not(:disabled) {
  background: #20354c;
  border-color: #c8a854;
  transform: translateY(-2px);
}

.run-upgrade:active:not(:disabled) {
  transform: translateY(1px);
}

.run-upgrade:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.run-upgrade:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.run-upgrade-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--gold-300);
  overflow: hidden;
  background: #101b27;
  border-radius: 7px;
}

.run-upgrade-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.run-upgrade-copy {
  min-width: 0;
}

.run-upgrade-copy strong,
.run-upgrade-copy small {
  display: block;
}

.run-upgrade-copy strong {
  color: #f4e8c7;
  font: 800 .78rem "Barlow Condensed", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.run-upgrade-copy small {
  margin-top: 2px;
  color: #9eacb4;
  font-size: .6rem;
  line-height: 1.28;
}

.run-upgrade-cost {
  color: var(--gold-300);
  font: 800 .64rem "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-align: right;
  text-transform: uppercase;
}

.loot-draft {
  z-index: 35;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(5, 11, 18, .88);
  backdrop-filter: blur(9px);
}

.loot-panel {
  width: min(920px, 100%);
  max-height: 100%;
  padding: clamp(20px, 3.5vw, 36px);
  overflow: auto;
  color: #edf2ee;
  background: #111e2b;
  border: 1px solid #405064;
  border-radius: 14px;
  box-shadow: 0 28px 64px rgba(2, 7, 12, .58);
}

.loot-heading {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.loot-chest-prop {
  width: 126px;
  height: 84px;
  display: block;
  background-image: url("assets/reward-chest-v1.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 200% 100%;
  filter: drop-shadow(0 10px 10px rgba(1, 5, 9, .5));
  animation: loot-chest-arrive .42s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes loot-chest-arrive {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.loot-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.loot-title-row h2,
.loot-heading p {
  margin: 0;
}

.loot-title-row h2 {
  color: #fff0c1;
  font: 800 clamp(1.9rem, 4vw, 3rem)/.95 "Barlow Condensed", sans-serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.loot-title-row > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #2a2112;
  background: #e0bd5f;
  border-radius: 5px;
  font: 800 .66rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.loot-heading p {
  max-width: 62ch;
  margin-top: 9px;
  color: #afbec7;
  font-size: .8rem;
  line-height: 1.45;
}

.loot-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.loot-choice {
  min-width: 0;
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  color: #edf2ee;
  text-align: left;
  background: #1a2938;
  border: 1px solid color-mix(in srgb, var(--rarity) 68%, #405064);
  border-radius: 11px;
  box-shadow: inset 0 3px var(--rarity);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .18s, border-color .18s;
}

.loot-choice:hover {
  background: #22364b;
  border-color: var(--rarity);
  transform: translateY(-3px);
}

.loot-choice:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.loot-choice-icon {
  width: 70px;
  height: 70px;
  display: block;
  margin-bottom: 15px;
  overflow: hidden;
  background: #101923;
  border: 1px solid var(--rarity);
  border-radius: 10px;
}

.loot-choice-copy,
.loot-choice-copy small,
.loot-choice-copy strong,
.loot-choice-copy span {
  display: block;
}

.loot-choice-copy small {
  color: var(--rarity);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.loot-choice-copy strong {
  margin-top: 5px;
  color: #fff0c1;
  font: 800 1.15rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.loot-choice-copy span {
  margin-top: 7px;
  color: #b9c5cc;
  font-size: .7rem;
  line-height: 1.42;
}

.loot-choice > em {
  margin-top: auto;
  padding-top: 16px;
  color: var(--rarity);
  font: 800 .67rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.loot-capacity {
  margin: 16px 0 0;
  color: #8f9da6;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

.start-screen {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  background: linear-gradient(90deg, rgba(7, 16, 23, .9), rgba(7, 16, 23, .58) 58%, rgba(7, 16, 23, .78));
}

.start-copy {
  max-width: 580px;
}

.royal-seal {
  width: 62px;
  margin-bottom: 23px;
  color: var(--gold-300);
}

.royal-seal svg {
  width: 100%;
  fill: rgba(45, 94, 158, .34);
  stroke: currentColor;
  stroke-width: 2;
}

.story-line {
  margin: 0 0 10px;
  color: #d6c48f;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.start-copy h2,
.pause-screen h2,
.result-screen h2 {
  max-width: 11ch;
  margin: 0;
  color: #fff3cf;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.2rem, 7vw, 5.7rem);
  line-height: .84;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-transform: uppercase;
  text-shadow: 0 5px 18px rgba(0, 0, 0, .38);
}

.start-copy > p:not(.story-line) {
  max-width: 58ch;
  margin: 22px 0 0;
  color: #d5dcd9;
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

.campaign-picker {
  width: min(500px, 100%);
  margin-top: 24px;
}

.campaign-picker label {
  display: block;
  margin-bottom: 7px;
  color: #d9c890;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.campaign-select-wrap {
  position: relative;
}

.campaign-select-wrap select {
  width: 100%;
  min-height: 50px;
  padding: 0 46px 0 14px;
  color: #f7edcf;
  background: #14253a;
  border: 1px solid #7f704a;
  border-radius: 9px;
  box-shadow: 0 7px 17px rgba(2, 8, 13, .32);
  font: 700 .92rem "Barlow Condensed", sans-serif;
  letter-spacing: .02em;
  appearance: none;
  cursor: pointer;
}

.campaign-select-wrap select:hover {
  background: #1a3049;
  border-color: #c9aa61;
}

.campaign-select-wrap select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.campaign-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #efc35f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}

.campaign-picker > p {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 2px 0;
  color: #aebbc0;
  font-size: .68rem;
  line-height: 1.35;
}

.campaign-picker > p strong {
  color: #e5dcc0;
  font-weight: 700;
}

.campaign-picker > p span {
  text-align: right;
}

.start-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.start-actions .primary-action {
  white-space: nowrap;
}

.primary-action,
.call-wave-button {
  min-height: 48px;
  padding: 0 20px;
  color: #1d1b14;
  background: #efc35f;
  border: 1px solid #ffe59a;
  border-radius: 9px;
  box-shadow: 0 7px 16px rgba(4, 10, 16, .34);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s;
}

.primary-action:hover,
.call-wave-button:hover {
  background: #ffe08d;
  transform: translateY(-2px);
}

.primary-action:active,
.call-wave-button:active {
  transform: translateY(1px);
}

.text-action {
  padding: 8px 0;
  color: #ded3b4;
  background: none;
  border: 0;
  border-bottom: 1px solid #8f7a4f;
  cursor: pointer;
}

.text-action:hover {
  color: #fff1c7;
}

.relic-jump {
  display: none;
  align-items: center;
  gap: 5px;
}

.relic-jump svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relic-vault {
  align-self: center;
  width: min(350px, 100%);
  padding: 19px;
  color: #edf1ec;
  background: rgba(17, 31, 47, .97);
  border: 1px solid #6f6547;
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(2, 8, 12, .42);
}

.relic-vault:focus {
  outline: none;
}

.relic-vault:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.relic-vault > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.relic-vault h3 {
  margin: 0;
  color: #fff0c2;
  font: 800 1.55rem "Barlow Condensed", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.relic-vault header p {
  max-width: 25ch;
  margin: 3px 0 0;
  color: #aeb9bc;
  font-size: .68rem;
  line-height: 1.35;
}

.relic-balance {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center;
  column-gap: 5px;
  color: #f4cd74;
}

.relic-balance svg {
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  fill: rgba(240, 189, 103, .18);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.relic-balance strong {
  font: 800 1rem "Barlow Condensed", sans-serif;
  line-height: 1;
}

.relic-balance span {
  color: #9faeb5;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.relic-list {
  border-top: 1px solid #34465a;
}

.relic-row {
  width: 100%;
  min-width: 0;
  min-height: 57px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  color: #edf1ec;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #34465a;
  cursor: pointer;
  transition: background-color .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.relic-row:hover:not(:disabled) {
  background: #1b334b;
  transform: translateY(-1px);
}

.relic-row:active:not(:disabled) {
  transform: translateY(1px);
}

.relic-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.relic-row:disabled {
  cursor: default;
}

.relic-row:disabled .relic-icon,
.relic-row:disabled .relic-rank em {
  opacity: .58;
}

.relic-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--relic);
  overflow: hidden;
  background: #0e1c2a;
  border-radius: 8px;
}

.relic-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.relic-copy,
.relic-copy strong,
.relic-copy small,
.relic-rank,
.relic-rank em {
  min-width: 0;
  display: block;
}

.relic-copy strong {
  color: #f2ead4;
  font: 800 .92rem "Barlow Condensed", sans-serif;
  line-height: 1.05;
  text-transform: uppercase;
}

.relic-copy small {
  margin-top: 3px;
  color: #aab8bd;
  font-size: .68rem;
  line-height: 1.25;
}

.relic-rank {
  color: #e6d7aa;
  font: 800 .7rem "Barlow Condensed", sans-serif;
  text-align: right;
  text-transform: uppercase;
}

.relic-rank em {
  margin-top: 3px;
  color: var(--relic);
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .04em;
}

.relic-vault-note {
  margin: 11px 0 0;
  color: #9dabb1;
  font-size: .62rem;
  line-height: 1.35;
  text-align: center;
}

.hero-dossier-card {
  align-self: end;
  padding: 22px;
  color: var(--paper-ink);
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(2, 8, 12, .4);
  transform: rotate(1deg);
}

.portrait-medallion,
.mini-portrait {
  position: relative;
  display: grid;
  place-items: end center;
  overflow: hidden;
  color: #15263c;
  background: #15263c;
  border: 4px solid var(--costume-accent, #b88932);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(34, 25, 13, .25);
}

.portrait-medallion {
  width: 108px;
  height: 108px;
  margin: -62px auto 16px;
}

.portrait-silhouette {
  position: relative;
  width: 64%;
  height: 75%;
  background: var(--costume-color, #17263b);
  border-radius: 48% 48% 18% 18%;
}

.portrait-silhouette::before {
  content: "";
  position: absolute;
  top: -16%;
  left: -19%;
  width: 138%;
  height: 29%;
  background: #243754;
  border-radius: 50% 50% 26% 26%;
  transform: rotate(-5deg);
}

.mini-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-dossier-card > div:nth-child(2) {
  text-align: center;
}

.hero-dossier-card span,
.drawer-head span,
.profile-card > div:nth-child(2) > span {
  color: #79684d;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-dossier-card h3 {
  margin: 3px 0 2px;
  font: 800 1.55rem "Barlow Condensed", sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.hero-dossier-card p {
  margin: 0;
  color: #645949;
  font-size: .78rem;
}

.hero-dossier-card dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 18px -4px -4px;
  background: rgba(71, 55, 31, .22);
}

.hero-dossier-card dl div {
  padding: 10px 5px;
  text-align: center;
  background: var(--paper);
}

.hero-dossier-card dt {
  color: #77684e;
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-dossier-card dd {
  margin: 3px 0 0;
  font: 700 .78rem "Barlow Condensed", sans-serif;
}

.pause-screen > div,
.result-screen > div {
  width: min(540px, 92vw);
  padding: 42px;
  text-align: center;
  background: rgba(15, 28, 43, .96);
  border: 1px solid #8c743e;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}

.pause-screen span,
.result-screen > div > span {
  color: var(--gold-300);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.pause-screen h2,
.result-screen h2 {
  max-width: none;
  margin-top: 8px;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
}

.pause-screen p,
.result-screen p {
  color: #cbd3d6;
}

.pause-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
}

.danger-action {
  min-height: 48px;
  padding: 0 20px;
  color: #fff1e8;
  background: #98493e;
  border: 1px solid #d9806f;
  border-radius: 9px;
  box-shadow: 0 7px 16px rgba(4, 10, 16, .34);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s;
}

.danger-action:hover {
  background: #b75949;
  transform: translateY(-2px);
}

.danger-action:active {
  transform: translateY(1px);
}

.quit-action {
  color: #efa995;
  border-bottom-color: #a85d4f;
}

.quit-action:hover {
  color: #ffd2c5;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 24px 0;
  background: rgba(240, 204, 111, .22);
}

.result-stats div {
  padding: 14px 8px;
  background: #18293e;
}

.result-stats span,
.result-stats strong {
  display: block;
}

.result-stats span {
  color: #aeb9c2;
  font-size: .62rem;
  text-transform: uppercase;
}

.result-stats strong {
  margin-top: 4px;
  color: #fff0bd;
  font: 800 1.4rem "Barlow Condensed", sans-serif;
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.command-rail {
  position: relative;
  z-index: 10;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  color: #eef1ed;
  background: var(--iron-900);
  box-shadow: -7px 0 24px rgba(1, 5, 9, .36);
  padding-bottom: 0;
  scrollbar-width: thin;
  scrollbar-color: #4c5663 #15191e;
}

.hero-panel {
  padding: 14px;
  background: #172438;
  box-shadow: inset 0 -1px #465268;
}

.hero-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.mini-portrait {
  width: 48px;
  height: 48px;
  border-width: 2px;
}

.hero-summary div:nth-child(2) span,
.hero-summary div:nth-child(2) strong,
.hero-summary div:nth-child(2) small {
  display: block;
}

.hero-summary div:nth-child(2) span {
  color: #8fa0b1;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-summary div:nth-child(2) strong {
  margin-top: 2px;
  font: 800 1.05rem "Barlow Condensed", sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.hero-summary div:nth-child(2) small {
  color: #b7c1c9;
  font-size: .68rem;
}

.hero-level {
  padding: 4px 7px;
  color: #f6d678;
  background: #101a29;
  border-radius: 6px;
  font: 700 .65rem "Barlow Condensed", sans-serif;
}

.xp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #aab6c1;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.xp-row > div {
  height: 5px;
  overflow: hidden;
  background: #0a111b;
  border-radius: 3px;
}

.xp-row i {
  display: block;
  width: 100%;
  height: 100%;
  background: #4b8ed5;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.hero-combat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 0;
  padding: 8px 0;
  border-top: 1px solid #3a4657;
  border-bottom: 1px solid #3a4657;
}

.hero-combat-strip div {
  min-width: 0;
  padding: 0 8px;
  border-right: 1px solid #3a4657;
}

.hero-combat-strip div:first-child { padding-left: 0; }
.hero-combat-strip div:last-child { padding-right: 0; border-right: 0; }

.hero-combat-strip dt {
  overflow: hidden;
  color: #8fa0b1;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-combat-strip dd {
  margin: 3px 0 0;
  color: #f4d477;
  font: 800 .78rem "Barlow Condensed", sans-serif;
  white-space: nowrap;
}

.run-spoils-summary {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid #3a4657;
}

.run-spoils-summary > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9eabb7;
  font: 800 .61rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.run-spoils-summary > div:first-child span {
  color: #f1cf70;
}

.spoil-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.spoil-slot {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 4px;
  overflow: hidden;
  background: #101923;
  border: 1px solid color-mix(in srgb, var(--rarity, #52606d) 65%, #26303a);
  border-radius: 6px;
}

.spoil-slot > .gear-art {
  width: 30px;
  height: 30px;
}

.spoil-slot strong,
.spoil-slot small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spoil-slot strong {
  color: #eee7d6;
  font: 700 .58rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.spoil-slot small {
  margin-top: 2px;
  color: var(--rarity, #7f8c96);
  font-size: .5rem;
}

.spoil-slot.empty {
  grid-template-columns: 1fr;
  place-items: center;
  color: #6d7982;
  text-align: center;
  border-style: dashed;
}

.spoil-slot.empty > span {
  font-size: 1rem;
  line-height: .8;
}

.tower-doctrine {
  display: block;
  margin-top: 3px;
  color: var(--ward);
  font: 800 .54rem "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.command-section {
  padding: 17px 14px;
  box-shadow: inset 0 -1px #3a4048;
}

.section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  color: #f6e5b2;
  font: 800 1rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.section-heading p {
  margin-top: 3px;
  color: #929da6;
  font-size: .67rem;
  line-height: 1.3;
}

.shortcut-clue {
  padding: 3px 6px;
  color: #aab4bc;
  background: #101419;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 700;
}

.arsenal-count {
  padding: 3px 7px;
  color: #f4d372;
  background: #101419;
  border-radius: 5px;
  font: 800 .66rem "Barlow Condensed", sans-serif;
}

.arsenal-slots,
.tower-slots {
  display: grid;
  gap: 5px;
}

.arsenal-slots {
  max-height: min(46vh, 520px);
  padding-right: 3px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #7e6940 #171d24;
  scrollbar-width: thin;
}

.arsenal-slot,
.tower-slot {
  min-width: 0;
  min-height: 49px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  color: #e9eee9;
  text-align: left;
  background: #222a32;
  border: 0;
  border-radius: 8px;
}

.arsenal-slot:where([data-replace-spell]) {
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  cursor: pointer;
}

.arsenal-slot[data-replace-spell]:hover {
  background: #303b47;
}

.arsenal-slot[data-replace-spell]:focus-visible {
  outline: 3px solid #f2cd6c;
  outline-offset: 2px;
}

.spell-replace-label {
  color: #f2cd6c;
  font-size: 11px;
  font-style: normal;
}

.tower-slot.filled {
  width: 100%;
  cursor: pointer;
  transition: background-color .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.tower-slot.filled:hover {
  background: #303b47;
  transform: translateX(2px);
}

.arsenal-slot > span,
.tower-slot > span {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ward, #64717a);
  overflow: hidden;
  background: #151b22;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.arsenal-slot.cataclysm {
  background: #2a2938;
  box-shadow: 0 5px 13px rgba(3, 6, 12, .22), inset 0 0 0 1px color-mix(in srgb, var(--ward) 28%, transparent);
}

.arsenal-slot.evolved {
  background: linear-gradient(100deg, color-mix(in srgb, var(--ward) 13%, #222a32), #222a32 68%);
  box-shadow: inset 3px 0 var(--ward), inset 0 0 0 1px color-mix(in srgb, var(--ward) 32%, transparent);
}

.arsenal-slot.evolved strong { color: #ffe9a8; }

.slot-icon > svg,
.slot-icon > .spell-art,
.slot-icon > .command-art {
  position: relative;
  z-index: 1;
}

.slot-cooldown-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgba(5, 10, 16, .78);
  transform: scaleY(var(--cooldown-remaining, 0));
  transform-origin: bottom;
  transition: transform .1s linear;
  pointer-events: none;
}

.slot-cooldown-number {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  min-width: 26px;
  padding: 2px 3px;
  color: #fff3d1;
  background: rgba(4, 9, 14, .78);
  border-radius: 4px;
  font: 800 .55rem "Barlow Condensed", sans-serif;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.arsenal-slot.boss-silenced .slot-cooldown-number {
  width: 30px;
  padding: 3px 0;
  white-space: pre-line;
  font-size: .44rem;
  line-height: 1.2;
  color: #dfc2ff;
}

.arsenal-slot.cooldown-ready .slot-cooldown-number {
  color: #d9ffb9;
  background: rgba(13, 35, 25, .82);
  font-size: .48rem;
}

.arsenal-slot strong,
.arsenal-slot small,
.tower-slot strong,
.tower-slot small {
  display: block;
}

.arsenal-slot strong,
.tower-slot strong {
  overflow: hidden;
  color: #f2e9d4;
  font: 700 .78rem "Barlow Condensed", sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.arsenal-slot small,
.tower-slot small {
  margin-top: 2px;
  overflow: hidden;
  color: #98a4ab;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arsenal-slot.empty,
.tower-slot.empty {
  color: #6d7982;
  background: #1c2228;
  opacity: .72;
}

.keep-actions {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.keep-actions button {
  min-height: 36px;
  padding: 7px 10px;
  color: #1d1b14;
  background: #d9b45a;
  border: 0;
  border-radius: 7px;
  font-size: .69rem;
  font-weight: 800;
  cursor: pointer;
}

.keep-actions button:hover:not(:disabled) {
  background: #f0cc70;
}

.keep-actions button:disabled {
  color: #89939a;
  background: #252d34;
  cursor: not-allowed;
}

.keep-actions button span {
  margin-left: 5px;
}

.keep-actions button svg {
  width: 18px;
  height: 18px;
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.keep-actions button b {
  font: inherit;
}

.keep-actions small {
  color: #89959e;
  font-size: .58rem;
  line-height: 1.35;
  text-align: center;
}

.tower-blueprints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.blueprint {
  min-width: 0;
  padding: 9px 4px 8px;
  color: #aeb7bd;
  background: #242a31;
  border: 1px solid #3e464f;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s, border-color .18s;
}

.blueprint:hover {
  color: #f5ecd6;
  background: #303943;
  transform: translateY(-2px);
}

.blueprint.selected {
  color: #fff0b5;
  background: #26466d;
  border-color: #d3a847;
}

.blueprint svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blueprint span,
.blueprint strong,
.blueprint small {
  display: block;
}

.blueprint strong {
  margin-top: 4px;
  font: 700 .78rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.blueprint small {
  margin-top: 2px;
  color: inherit;
  font-size: .57rem;
  opacity: .8;
}

.selected-tower {
  margin-top: 9px;
  padding: 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: #11161c;
  border-radius: 8px;
}

.yard-access-actions {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.yard-access-actions button {
  min-height: 34px;
  padding: 6px 8px;
  color: #d8dfe2;
  background: #171d24;
  border: 1px solid #414952;
  border-radius: 7px;
  font-size: .62rem;
  font-weight: 800;
  cursor: pointer;
}

.yard-access-actions button:hover:not(:disabled) {
  color: #fff0bd;
  background: #2c3742;
  border-color: #9b7a3d;
}

.yard-access-actions span {
  margin-left: 4px;
  color: var(--gold-300);
}

.selected-tower[hidden] {
  display: none;
}

.selected-tower span,
.selected-tower strong {
  display: block;
}

.selected-tower > div span {
  color: #8d98a1;
  font-size: .57rem;
  font-weight: 700;
  text-transform: uppercase;
}

.selected-tower > div strong {
  margin-top: 2px;
  font: 700 .76rem "Barlow Condensed", sans-serif;
}

.selected-tower button {
  padding: 7px 9px;
  color: #1b1c18;
  background: #e1ba5e;
  border: 0;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
}

.selected-tower button span {
  display: inline;
  margin-left: 3px;
}

.upgrade-list {
  display: grid;
  gap: 5px;
}

.upgrade-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  color: #e9e5d8;
  text-align: left;
  background: #242a31;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.upgrade-row:hover:not(:disabled) {
  background: #303944;
  transform: translateX(2px);
}

.upgrade-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #e1bd67;
  background: #151a20;
  border-radius: 7px;
}

.upgrade-icon svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upgrade-row > span:nth-child(2) strong,
.upgrade-row > span:nth-child(2) small {
  display: block;
}

.upgrade-row > span:nth-child(2) strong {
  font: 700 .8rem "Barlow Condensed", sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.upgrade-row > span:nth-child(2) small {
  margin-top: 2px;
  color: #9da7ae;
  font-size: .6rem;
}

.upgrade-row em {
  min-width: 31px;
  color: #f1cc70;
  font: 800 .72rem "Barlow Condensed", sans-serif;
  text-align: right;
}

.wave-command {
  position: sticky;
  z-index: 4;
  bottom: 0;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 14px;
  background: #101a29;
  box-shadow: 0 -9px 22px rgba(0, 0, 0, .26), inset 0 1px #4f5966;
}

.next-front-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.next-front-copy span {
  color: #91a0ad;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.next-front-copy strong {
  color: #ddd5bf;
  font: 700 .72rem "Barlow Condensed", sans-serif;
}

.call-wave-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.call-wave-button svg {
  width: 20px;
  fill: currentColor;
  stroke: currentColor;
}

.call-wave-button.wave-active {
  color: #d8dee4;
  background: #2b3541;
  border-color: #505d6a;
  box-shadow: none;
}

.profiles-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: min(980px, 96vw);
  height: 100dvh;
  padding: 24px;
  overflow: auto;
  color: var(--paper-ink);
  background: #ded1af;
  background-image: url("assets/parchment-texture-v1.png");
  background-size: 640px auto;
  box-shadow: inset 0 0 0 2px rgba(200, 144, 45, .48), -18px 0 50px rgba(2, 7, 12, .45);
  animation: drawer-in .35s cubic-bezier(.16, 1, .3, 1) both;
}

.profiles-drawer[hidden],
.drawer-scrim[hidden] {
  display: none;
}

@keyframes drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(72, 56, 33, .28);
}

.drawer-head h2 {
  margin: 2px 0 0;
  font: 800 1.72rem Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.drawer-head p {
  max-width: 48ch;
  margin: 4px 0 0;
  color: #6e604b;
  font-size: .78rem;
}

.drawer-head .icon-button {
  color: #3a3329;
  background: rgba(255, 255, 255, .22);
  border-color: rgba(79, 61, 34, .28);
  box-shadow: none;
}

.loadout-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
}

.defender-inventory-preview {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1fr);
  grid-template-areas: "portrait picker" "captains captains";
  overflow: hidden;
  background: #14243a;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(45, 33, 18, .2);
}

.equipment-hero-frame {
  grid-area: portrait;
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--familiar-color) 18%, transparent), transparent 42%),
    linear-gradient(180deg, #213c61 0%, #142640 54%, #0b1524 100%);
}

.equipment-paper-doll {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.paper-doll-item {
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: visible;
  background: #101a29;
  border: 1px solid var(--rarity);
  border-radius: 13px;
  box-shadow: inset 0 0 0 2px rgba(239, 195, 95, .16), 0 8px 18px rgba(1, 5, 9, .46);
}

.paper-doll-item .gear-art {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.paper-doll-item b {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  padding: 2px 5px;
  color: #efe5ca;
  background: rgba(9, 16, 26, .88);
  border-radius: 4px;
  font: 800 .5rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.paper-doll-weapon { right: 10px; top: 46%; width: 82px; height: 66px; }
.paper-doll-helm { left: 12px; top: 16px; }
.paper-doll-armor { right: 12px; top: 16px; }
.paper-doll-charm { left: 12px; bottom: 62px; }
.paper-doll-pants { right: 12px; bottom: 88px; }

.equipment-familiar-plaque {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 50%;
  min-width: 118px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 6px;
  color: #f3ead2;
  background: rgba(10, 19, 31, .9);
  border: 1px solid color-mix(in srgb, var(--familiar-color) 68%, #30435b);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(1, 5, 9, .38);
  transform: translateX(-50%);
}

.equipment-familiar-plaque i {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  background-color: color-mix(in srgb, var(--familiar-color) 22%, #101a29);
  background-image: url("assets/familiar-sprites-v1.png");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 300% 100%;
  border: 1px solid var(--familiar-color);
  border-radius: 50%;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--familiar-color) 28%, transparent);
}

.equipment-familiar-plaque i[data-familiar="rook"] { background-position: left center; }
.equipment-familiar-plaque i[data-familiar="whelp"] { background-position: center center; }
.equipment-familiar-plaque i[data-familiar="mirecat"] { background-position: right center; }
.equipment-familiar-plaque span,
.equipment-familiar-plaque small,
.equipment-familiar-plaque strong { display: block; min-width: 0; }
.equipment-familiar-plaque small { color: #9dafb9; font-size: .46rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.equipment-familiar-plaque strong { overflow: hidden; color: var(--familiar-color); font: 800 .68rem "Barlow Condensed", sans-serif; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.equipment-weapon-readout {
  position: absolute;
  z-index: 6;
  right: 10px;
  bottom: 11px;
  max-width: calc(100% - 20px);
  padding: 7px 10px 6px;
  min-height: 48px;
  border: 1px solid transparent;
  cursor: pointer;
  color: #f6ecd1;
  text-align: right;
  background: rgba(9, 16, 26, .92);
  border-radius: 9px;
  box-shadow: 0 7px 16px rgba(1, 5, 9, .42), inset 0 0 0 1px rgba(242, 205, 108, .24);
}

.equipment-weapon-readout small,
.equipment-weapon-readout strong,
.equipment-weapon-readout span {
  display: block;
}

.equipment-weapon-readout small {
  color: #9dafb9;
  font-size: .46rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.equipment-weapon-readout strong {
  overflow: hidden;
  margin-top: 1px;
  font: 800 .76rem "Barlow Condensed", sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.equipment-weapon-readout span {
  margin-top: 1px;
  font: 800 .49rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.equipment-hero-frame::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.equipment-hero-frame::before {
  inset: 18px 20px 36px;
  border: 1px solid rgba(242, 205, 108, .32);
  clip-path: polygon(50% 0, 100% 18%, 88% 80%, 50% 100%, 12% 80%, 0 18%);
}

.equipment-hero-frame canvas {
  position: absolute;
  inset: 16px 0 0;
  z-index: 1;
  width: 100%;
  height: calc(100% - 16px);
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(2, 7, 13, .48));
}

.inventory-character-copy {
  grid-area: picker;
  min-width: 0;
  padding: 15px 16px 13px;
  color: #f7efda;
  background: #0d1726;
}

.inventory-character-copy h3,
.inventory-character-copy p {
  margin: 0;
}

.inventory-character-copy h3 {
  font: 800 1.2rem Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.inventory-character-copy p {
  margin-top: 4px;
  color: #c1c9ce;
  font-size: .75rem;
  line-height: 1.4;
}

.inventory-character-copy .inventory-discipline {
  margin-top: 8px;
  color: #f0ca68;
  font: 800 .61rem "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inventory-character-switcher {
  grid-area: captains;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #101a29;
}

.inventory-character-switcher button {
  min-width: 0;
  min-height: 50px;
  padding: 7px 6px;
  color: #aeb9c1;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(211, 220, 223, .12);
  cursor: pointer;
}

.inventory-character-switcher button:last-child {
  border-right: 0;
}

.inventory-character-switcher span,
.inventory-character-switcher small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-character-switcher span {
  color: #f1e4c8;
  font: 800 .82rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.inventory-character-switcher small {
  margin-top: 2px;
  font-size: .55rem;
}

.inventory-character-switcher button[aria-pressed="true"] {
  color: #171b20;
  background: #efc35f;
}

.inventory-character-switcher button[aria-pressed="true"] span {
  color: #171b20;
}

.inventory-character-switcher button:disabled {
  cursor: not-allowed;
  opacity: .56;
}

.inventory-character-switcher button[aria-pressed="true"]:disabled {
  opacity: 1;
}

/* Slot selection and the owned-item picker stay with the character preview. */
#inventoryCharacterBio { display: none; }
.equipment-picker { margin-top: 16px; }
.equipment-picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.equipment-picker-heading h4 { margin: 0; font: 800 1rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.equipment-picker-heading > span { color: #b8c9d2; font-size: .7rem; }
.equipment-picker-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.equipment-picker-item { display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 72px; padding: 8px; color: #f7efda; background: #1b2c3f; border: 1px solid #46566a; border-radius: 8px; text-align: left; cursor: pointer; }
.equipment-picker-icon { display: block; width: 43px; height: 46px; }
.equipment-picker-icon .gear-art { display: block; width: 100%; height: 100%; }
.equipment-picker-item strong { display: block; overflow-wrap: anywhere; font: 800 .82rem/1.05 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.equipment-picker-item small { display: block; margin-top: 4px; color: #b8c9d2; font-size: .61rem; line-height: 1.25; }
.equipment-picker-item:hover { background: #293e54; border-color: #efd18e; }
.equipment-picker-item[aria-pressed="true"] { border-color: #efc35f; background: #343829; }
.equipment-picker-item[aria-pressed="true"] small { color: #f2cd6c; }
@media (max-width: 420px) {
  .equipment-picker-items[data-slot="pants"] { grid-template-columns: minmax(0, 1fr); }
  .equipment-picker-items[data-slot="pants"] .equipment-picker-item { min-height: 58px; }
  .equipment-picker-items[data-slot="pants"] .equipment-picker-item strong { overflow-wrap: normal; }
}
.equipment-weapon-readout[aria-pressed="true"], .paper-doll-item[aria-pressed="true"] { border-color: #efc35f; }
.equipment-weapon-readout:hover, .paper-doll-item:hover { background-color: #2b3c50; }
.equipment-picker button:focus-visible, .equipment-hero-frame button:focus-visible { outline: 3px solid #ffe69a; outline-offset: 3px; }
.equipment-picker-paging { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.equipment-picker-paging[hidden] { display: none; }
.equipment-picker-paging button { min-height: 34px; padding: 6px 10px; border: 1px solid #526277; border-radius: 6px; background: #24364a; color: #f7efda; cursor: pointer; }
.equipment-picker-paging button:disabled { opacity: .42; cursor: default; }
.equipment-picker-paging span { color: #c1cdd6; font-size: .7rem; font-variant-numeric: tabular-nums; }
.equipment-picker-detail { min-height: 56px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #3a4b5d; }
.equipment-picker-detail strong, .equipment-picker-detail span { display: block; }
.equipment-picker-detail strong { color: #f2cd6c; font: 800 .9rem "Barlow Condensed", sans-serif; }
.equipment-picker-detail span { margin-top: 4px; color: #d2dce2; font-size: .72rem; line-height: 1.4; }
.inventory-character-copy .equipment-picker-rule { margin-top: 10px; color: #b8c9d2; font-size: .68rem; line-height: 1.4; }
.equipment-picker-empty { grid-column: 1 / -1; padding: 12px 0; min-height: 72px; }

.spell-school-workbench {
  margin-top: 20px;
  padding: 16px;
  color: #f5edd9;
  background: #14243a;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(45, 33, 18, .2), inset 0 0 0 1px color-mix(in srgb, var(--school-color) 38%, transparent);
}

.spell-school-heading {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--school-color) 27%, transparent);
}

.spell-school-heading h3,
.spell-school-heading p {
  margin: 0;
}

.spell-school-heading h3 {
  color: #fff2c9;
  font: 800 1.18rem Georgia, "Times New Roman", serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.spell-school-heading p {
  max-width: 62ch;
  margin-top: 4px;
  color: #bdc9d1;
  font-size: .72rem;
  line-height: 1.4;
}

.spell-school-familiar {
  width: 50px;
  height: 50px;
  padding: 3px;
  background: #0d1726;
  border: 1px solid var(--school-color);
  border-radius: 50%;
  box-shadow: 0 5px 13px rgba(1, 5, 9, .38), inset 0 0 12px color-mix(in srgb, var(--school-color) 28%, transparent);
}

.spell-school-familiar i {
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("assets/familiar-sprites-v1.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  border-radius: 50%;
}

.spell-school-familiar i[data-familiar="rook"] { background-position: left center; }
.spell-school-familiar i[data-familiar="whelp"] { background-position: center center; }
.spell-school-familiar i[data-familiar="mirecat"] { background-position: right center; }

.spell-school-bond {
  min-width: 112px;
  padding: 8px 10px;
  text-align: right;
  background: #0d1726;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--school-accent) 34%, transparent);
}

.spell-school-bond small,
.spell-school-bond strong {
  display: block;
}

.spell-school-bond small {
  color: #92a5b2;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.spell-school-bond strong {
  margin-top: 2px;
  color: var(--school-color);
  font: 800 .72rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.spell-school-roster {
  margin-top: 14px;
}

.spell-school-group + .spell-school-group {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(192, 207, 216, .12);
}

.spell-school-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.spell-school-label strong {
  color: var(--school-accent);
  font: 800 .72rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.spell-school-label span {
  color: #91a4b1;
  font-size: .61rem;
}

.spell-school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 8px;
}

.spell-school-card {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  background: #0d1726;
  border-radius: 10px;
  box-shadow: 0 5px 13px rgba(1, 5, 9, .22), inset 0 0 0 1px color-mix(in srgb, var(--spell-color) 28%, transparent);
}

.spell-school-card.cataclysm {
  background: #241e32;
}

.spell-school-card.evolved {
  background: linear-gradient(135deg, color-mix(in srgb, var(--spell-color) 13%, #0d1726), #0d1726 72%);
  box-shadow: 0 7px 19px rgba(1, 5, 9, .28), inset 0 0 0 1px color-mix(in srgb, var(--spell-color) 58%, transparent);
}

.spell-school-card.locked {
  filter: saturate(.56);
  opacity: .64;
  background: linear-gradient(135deg, color-mix(in srgb, var(--spell-color) 5%, #0b1320), #0a111c 72%);
}

.spell-school-card.locked .spell-school-icon {
  filter: grayscale(.3);
}

.spell-school-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--spell-color);
  background: #101a29;
  border: 1px solid color-mix(in srgb, var(--spell-color) 58%, #101a29);
  border-radius: 8px;
}

.spell-school-icon > :is(.spell-art, .command-art, svg) {
  width: 100%;
  height: 100%;
}

.spell-school-copy,
.spell-school-copy small,
.spell-school-copy strong,
.spell-school-copy b,
.spell-school-copy span {
  display: block;
  min-width: 0;
}

.spell-school-copy em {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--spell-color) 78%, #fff1b3);
  font: 800 .5rem "Barlow Condensed", sans-serif;
  font-style: normal;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.spell-school-copy small {
  color: #8fa3b0;
  font-size: .47rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.spell-school-copy strong {
  overflow: hidden;
  margin-top: 1px;
  color: #f8efd8;
  font: 800 .82rem "Barlow Condensed", sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.spell-school-copy b {
  margin-top: 2px;
  color: var(--damage-color);
  font-size: .54rem;
  font-weight: 800;
}

.spell-school-copy > span {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: #afbec7;
  font-size: .59rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.loadout-panel {
  min-width: 0;
}

.inventory-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.inventory-section-heading h3,
.inventory-section-heading p {
  margin: 0;
}

.inventory-section-heading h3 {
  color: #392f24;
  font: 800 1.12rem Georgia, "Times New Roman", serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.inventory-section-heading p {
  max-width: 58ch;
  margin-top: 4px;
  color: #6e604b;
  font-size: .72rem;
  line-height: 1.4;
}

.inventory-section-heading > strong {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #2d261c;
  background: #efc35f;
  border-radius: 6px;
  font: 800 .68rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.equipment-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.equipment-slot {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #ecf0ed;
  text-align: left;
  background: #222831;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(47, 34, 18, .16), inset 0 0 0 1px color-mix(in srgb, var(--rarity) 44%, transparent);
  cursor: pointer;
  transition: background-color .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.equipment-slot:hover {
  background: #2c3540;
  transform: translateY(-2px);
}

.equipment-slot-icon,
.equipment-item-icon {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--rarity);
  background: #151a20;
  border: 1px solid color-mix(in srgb, var(--rarity) 62%, #151a20);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(240, 219, 163, .06), 0 2px 6px rgba(5, 8, 12, .36);
}

.equipment-slot-icon {
  width: 46px;
  height: 46px;
}

.gear-art {
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("assets/equipment-icons-v2.png");
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: var(--gear-x) var(--gear-y);
  filter: drop-shadow(0 2px 2px rgba(1, 4, 8, .72));
}

.gear-art.gear-art-fitted { background: none; overflow: hidden; }

.equipment-slot small,
.equipment-slot strong,
.equipment-slot em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-slot small,
.equipment-item-copy > small {
  color: #98a4ad;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.equipment-slot strong {
  margin-top: 3px;
  color: #f7efda;
  font: 800 .84rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.equipment-slot em {
  margin-top: 2px;
  color: var(--rarity);
  font: 800 .58rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.equipment-stat-sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 10px 0 0;
  overflow: hidden;
  border-top: 1px solid rgba(77, 60, 37, .22);
  border-left: 1px solid rgba(77, 60, 37, .22);
  border-radius: 9px;
}

.equipment-stat-sheet div {
  min-width: 0;
  min-height: 82px;
  padding: 10px 11px;
  background: rgba(255, 248, 226, .58);
  border-right: 1px solid rgba(77, 60, 37, .22);
  border-bottom: 1px solid rgba(77, 60, 37, .22);
}

.equipment-stat-sheet dt {
  color: #756751;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.equipment-stat-sheet dd {
  margin: 4px 0 0;
  color: #30291f;
  font: 800 1rem "Barlow Condensed", sans-serif;
}

.equipment-stat-sheet small {
  display: block;
  margin-top: 4px;
  color: #756751;
  font-size: .57rem;
  line-height: 1.28;
}

.player-attribute-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 17px;
}

.player-attribute-heading h4,
.player-attribute-heading p {
  margin: 0;
}

.player-attribute-heading h4 {
  color: #392f24;
  font: 800 .92rem Georgia, "Times New Roman", serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.player-attribute-heading p {
  max-width: 58ch;
  margin-top: 3px;
  color: #6e604b;
  font-size: .65rem;
  line-height: 1.35;
}

.player-attribute-heading > strong {
  flex: 0 0 auto;
  color: #7a632e;
  font: 800 .58rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.player-combat-traits {
  margin: 8px 0 0;
  color: #665943;
  font-size: .62rem;
  line-height: 1.35;
}

.inventory-vault {
  margin-top: 24px;
  padding-top: 21px;
  border-top: 1px solid rgba(72, 56, 33, .28);
}

.run-spoils-workbench {
  margin-top: 24px;
  padding: 18px;
  color: #edf2ee;
  background: #17283b;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(47, 34, 18, .18);
}

.run-spoils-workbench .inventory-section-heading h3 {
  color: #fff0c1;
}

.run-spoils-workbench .inventory-section-heading p {
  color: #aebbc3;
}

.run-spoils-workbench .inventory-section-heading > strong {
  color: #f1cf70;
  background: #0f1a27;
}

.drawer-spoil-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.drawer-spoil {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #202f40;
  border: 1px solid color-mix(in srgb, var(--rarity, #52606d) 62%, #344556);
  border-radius: 9px;
}

.drawer-spoil-icon {
  width: 50px;
  height: 50px;
  display: block;
  overflow: hidden;
  background: #101923;
  border: 1px solid var(--rarity);
  border-radius: 8px;
}

.drawer-spoil small,
.drawer-spoil strong,
.drawer-spoil em {
  display: block;
}

.drawer-spoil small {
  color: var(--rarity, #9aa8b1);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.drawer-spoil strong {
  margin-top: 3px;
  color: #fff0c1;
  font: 800 .82rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.drawer-spoil em {
  margin-top: 3px;
  color: #b7c2ca;
  font-size: .6rem;
  line-height: 1.3;
}

.drawer-spoil.empty {
  color: #81909c;
  border-style: dashed;
}

.drawer-spoil.empty > span:first-child {
  text-align: center;
  font-size: 1.25rem;
}

.rarity-odds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 12px;
  color: #685b47;
  font-size: .62rem;
  font-weight: 700;
}

.rarity-odds span::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 5px;
  background: var(--rarity);
  border-radius: 50%;
}

.loot-preview {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 9px 12px 9px 7px;
  color: #f7efda;
  background: #1b3151;
  border: 1px solid #b77b22;
  border-radius: 11px;
  box-shadow: 0 7px 16px rgba(47, 34, 18, .18), inset 0 0 0 2px rgba(239, 195, 95, .08);
}

.loot-preview-chest {
  position: relative;
  width: 94px;
  height: 60px;
  background-image: url("assets/reward-chest-v1.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: right center;
  filter: drop-shadow(0 5px 5px rgba(2, 5, 9, .52));
}

.loot-preview-chest::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: left center;
  animation: chest-lid-open .42s .08s ease-out both;
}

.loot-preview-copy,
.loot-preview-copy small,
.loot-preview-copy strong,
.loot-preview-copy span {
  display: block;
}

.loot-preview-copy {
  min-width: 0;
}

.loot-preview-copy small {
  color: #d7a851;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.loot-preview-copy strong {
  margin-top: 2px;
  font: 800 .96rem Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}

.loot-preview-copy span {
  margin-top: 3px;
  color: #c7d0d4;
  font-size: .61rem;
  line-height: 1.35;
}

.loot-preview-copy b {
  color: #efc35f;
}

.loot-preview-unique {
  width: 58px;
  height: 58px;
  overflow: hidden;
  background-color: #101a29;
  background-image: url("assets/equipment-icons-v2.png");
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: 100% 98%;
  border: 2px solid #b77b22;
  border-radius: 9px;
  box-shadow: inset 0 0 0 2px rgba(255, 236, 180, .16), 0 0 13px rgba(183, 123, 34, .48);
}

.equipment-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.equipment-filters button {
  min-height: 34px;
  padding: 0 11px;
  color: #5e513e;
  background: rgba(255, 248, 226, .45);
  border: 1px solid rgba(83, 64, 38, .24);
  border-radius: 7px;
  font: 800 .65rem "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.equipment-filters button[aria-pressed="true"] {
  color: #f7efda;
  background: #244b7c;
  border-color: #244b7c;
}

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

.equipment-item {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #eaf0ed;
  text-align: left;
  background: #222831;
  border: 0;
  border-radius: 11px;
  box-shadow: 0 5px 13px rgba(47, 34, 18, .14), inset 0 0 0 1px color-mix(in srgb, var(--rarity) 34%, transparent);
  cursor: pointer;
  transition: background-color .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.equipment-item:hover {
  background: #2c3540;
  transform: translateY(-2px);
}

.equipment-item[aria-pressed="true"] {
  background: #1b3151;
  box-shadow: 0 7px 16px rgba(32, 39, 49, .24), inset 0 0 0 2px #efc35f;
}

.equipment-item.unique .equipment-item-icon {
  border-width: 2px;
  box-shadow: inset 0 0 0 2px rgba(255, 236, 180, .16), 0 0 13px color-mix(in srgb, var(--rarity) 48%, transparent);
}

.equipment-item-icon {
  width: 50px;
  height: 50px;
}

.equipment-item-copy {
  min-width: 0;
}

.equipment-item-copy > strong,
.equipment-item-copy > span,
.equipment-item-copy > em {
  display: block;
}

.equipment-item-copy > strong {
  margin-top: 3px;
  overflow: hidden;
  color: #f7efda;
  font: 800 .88rem "Barlow Condensed", sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.equipment-item-copy > span {
  margin-top: 3px;
  color: #b9c2c8;
  font-size: .6rem;
  line-height: 1.35;
}

.equipment-item-copy > em {
  margin-top: 5px;
  color: #e5c985;
  font-size: .59rem;
  font-style: normal;
  line-height: 1.3;
}

.equipment-item-copy > em b {
  display: block;
  color: var(--rarity);
  font: 800 .62rem "Barlow Condensed", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.equipment-item-action {
  align-self: start;
  padding: 4px 6px;
  color: #171b20;
  background: #efc35f;
  border-radius: 5px;
  font: 800 .56rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.equipment-item[aria-pressed="true"] .equipment-item-action {
  color: #d9ffb9;
  background: #244a35;
}

.inventory-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  color: #6e604b;
  text-align: center;
  background: rgba(255, 248, 226, .4);
  border-radius: 11px;
  font-size: .76rem;
}

.profile-stack {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.profile-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 248, 226, .4);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(72, 52, 23, .11);
  transition: background-color .18s, box-shadow .18s, transform .18s cubic-bezier(.16, 1, .3, 1);
}

.profile-card.active-profile {
  background: #f0e3bf;
  box-shadow: 0 10px 22px rgba(72, 52, 23, .16);
  transform: translateX(-3px);
}

.profile-emblem {
  position: relative;
  width: 74px;
  height: 88px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #315e92;
  clip-path: polygon(50% 0, 92% 13%, 92% 62%, 50% 100%, 8% 62%, 8% 13%);
}

.profile-emblem::before {
  content: "";
  width: 30px;
  height: 44px;
  background: #172943;
  border-radius: 50% 50% 25% 25%;
}

.profile-emblem.holt {
  background: #876b35;
}

.profile-emblem.holt::before {
  border-radius: 8px 8px 40% 40%;
}

.profile-emblem.sora {
  background: #6c4978;
}

.profile-emblem.sora::before {
  width: 37px;
  border-radius: 48% 48% 20% 20%;
}

.profile-card h3,
.profile-card p {
  margin: 0;
}

.profile-card h3 {
  margin-top: 3px;
  font: 800 1.25rem "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}

.profile-card p {
  margin-top: 6px;
  color: #5b5144;
  font-size: .82rem;
  line-height: 1.4;
}

.profile-card dl {
  grid-column: 2;
  display: flex;
  gap: 20px;
  margin: 0;
}

.profile-card dl div {
  display: flex;
  gap: 5px;
  align-items: baseline;
}

.profile-card dt {
  color: #83765f;
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-card dd {
  margin: 0;
  font: 700 .72rem "Barlow Condensed", sans-serif;
}

.profile-select {
  grid-column: 2;
  min-height: 36px;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #4c4130;
  background: rgba(255, 248, 226, .55);
  border: 1px solid rgba(86, 68, 40, .28);
  border-radius: 7px;
  font: 800 .7rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.profile-select:hover {
  background: rgba(255, 250, 234, .9);
  transform: translateY(-1px);
}

.profile-select:active {
  transform: translateY(1px);
}

.profile-select svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.profile-select[aria-pressed="true"] {
  color: #1d1b14;
  background: var(--gold-300);
  border-color: var(--gold-700);
}

.profile-select[aria-pressed="true"] svg {
  opacity: 1;
}

.skin-customizer {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(72, 56, 33, .28);
}

.skin-customizer h3,
.skin-customizer p {
  margin: 0;
}

.skin-customizer h3 {
  font: 800 1.25rem "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.skin-customizer p {
  margin-top: 4px;
  color: #74654e;
  font-size: .72rem;
}

.skin-customizer p strong {
  color: #403629;
}

.keep-customizer {
  margin-top: 18px;
}

.skin-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.skin-options button {
  min-height: 72px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 9px 6px;
  color: #5a4e3c;
  background: rgba(255, 248, 226, .42);
  border: 1px solid rgba(86, 68, 40, .25);
  border-radius: 9px;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s, box-shadow .18s;
}

.skin-options button:hover {
  background: rgba(255, 250, 234, .82);
  transform: translateY(-2px);
}

.skin-options button:active {
  transform: translateY(1px);
}

.skin-options button[aria-pressed="true"] {
  color: #2f281e;
  background: #f2e7c8;
  box-shadow: inset 0 0 0 2px #a87927;
}

.defender-swatch {
  width: 28px;
  height: 34px;
  display: block;
  background: var(--swatch);
  border: 3px solid var(--trim);
  clip-path: polygon(50% 0, 92% 14%, 84% 76%, 50% 100%, 16% 76%, 8% 14%);
}

.keep-swatch {
  position: relative;
  width: 40px;
  height: 32px;
  display: block;
  overflow: hidden;
  background: var(--stone);
  border: 2px solid var(--trim);
  border-radius: 3px 3px 5px 5px;
  box-shadow: inset 0 -8px 0 rgba(23, 28, 35, .22);
  clip-path: polygon(0 17%, 12% 17%, 12% 0, 30% 0, 30% 17%, 42% 17%, 42% 0, 58% 0, 58% 17%, 70% 17%, 70% 0, 88% 0, 88% 17%, 100% 17%, 100% 100%, 0 100%);
}

.keep-swatch::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 3px;
  left: 50%;
  width: 12px;
  background: var(--swatch);
  border: 1px solid var(--trim);
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.keep-swatch::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 0;
  left: 5px;
  height: 3px;
  background: var(--trim);
  opacity: .8;
}

.drawer-scrim {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(3, 8, 13, .63);
  backdrop-filter: blur(2px);
}

.camp-tabs,
.inventory-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.camp-tabs {
  margin: -4px 0 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid #34475a;
}

.camp-tabs button,
.inventory-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font: 800 .72rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.camp-tabs button {
  color: #aebcc5;
  background: #172638;
  border: 1px solid #3b4d60;
}

.camp-tabs button[aria-selected="true"] {
  color: #17202b;
  background: var(--gold-300);
  border-color: #ffe7a1;
}

.camp-pane[hidden],
.inventory-pane[hidden] { display: none; }

.skill-choice-status.chosen { color: #86d696; }
.skill-choice-status.mastered { color: #f0d37c; }

.skill-tree-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skill-mastery-complete {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  color: #f4ecd5;
  background: #172638;
  border: 1px solid #6f6446;
  border-radius: 10px;
}

.skill-mastery-complete span,
.skill-mastery-complete strong,
.skill-mastery-complete small { display: block; }
.skill-mastery-complete strong { font: 800 1rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.skill-mastery-complete small { margin-top: 3px; color: #b9c6cc; font-size: .69rem; line-height: 1.35; }
.skill-mastery-complete .primary-action { flex: 0 0 auto; }

.skill-node {
  --skill-tier: #527eaa;
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  color: #e9efed;
  text-align: left;
  background: #18293c;
  border: 1px solid color-mix(in srgb, var(--skill-tier) 72%, #40556b);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s, border-color .18s;
}

.skill-node.tier-2 { --skill-tier: #62a578; }
.skill-node.tier-3 { --skill-tier: #9670bd; }
.skill-node.tier-4 { --skill-tier: #d3a748; box-shadow: 0 0 18px rgba(211, 167, 72, .08); }
.skill-node:hover:not(:disabled) { background: #223b55; border-color: var(--gold-300); transform: translateY(-2px); }
.skill-node:disabled { cursor: not-allowed; opacity: .55; }
.skill-node > span,
.skill-node > strong,
.skill-node > small,
.skill-node > em { display: block; }
.skill-node > span { color: #92a8ba; font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.skill-node > strong { margin-top: 4px; color: #fff0c1; font: 800 1rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.skill-node > small { margin-top: 5px; color: #b9c6cc; font-size: .67rem; line-height: 1.3; }
.skill-node > em { margin-top: auto; padding-top: 8px; color: #efc968; font: 800 .61rem "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .05em; text-transform: uppercase; }

.camp-loadout-actions,
.crown-market { display: grid; gap: 9px; margin-top: 12px; }
.camp-loadout-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crown-market { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.enemy-affinity {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(2, auto);
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  padding: 9px 12px;
  color: #b8c8cf;
  font: 700 .66rem "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #101d2b;
  border: 1px solid #35485b;
  border-radius: 8px;
}
.enemy-affinity span { color: #91a8b8; }
.enemy-affinity strong { color: #efad86; }
.enemy-affinity em { color: #aee18f; font-style: normal; }
.camp-loadout-actions button,
.market-offer { min-width: 0; min-height: 70px; padding: 11px 13px; color: #e9efed; text-align: left; background: #172638; border: 1px solid #405064; border-radius: 10px; cursor: pointer; }
.camp-loadout-actions button:hover,
.market-offer:hover:not(:disabled) { background: #213850; border-color: var(--gold-300); }
.camp-loadout-actions span,
.camp-loadout-actions strong,
.market-offer small,
.market-offer strong,
.market-offer em { display: block; }
.camp-loadout-actions span,
.market-offer small { color: #94a6b4; font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.camp-loadout-actions strong,
.market-offer strong { margin-top: 4px; color: #fff0c1; font: 800 .88rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.market-offer { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 9px; border-color: color-mix(in srgb, var(--chest-rarity) 65%, #405064); }
.market-offer:disabled { cursor: not-allowed; opacity: .48; }
.market-chest { width: 64px; height: 50px; background-image: url("assets/reward-chest-v1.png"); background-repeat: no-repeat; background-position: left center; background-size: 200% 100%; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .38)) drop-shadow(0 0 7px var(--chest-rarity)); transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.market-offer.is-opening .market-chest { background-position: right center; animation: market-chest-open .48s cubic-bezier(.16, 1, .3, 1); }
@keyframes market-chest-open { 45% { transform: translateY(-6px) scale(1.08); } }
.market-offer em { margin-top: 5px; color: var(--chest-rarity); font: 800 .68rem "Barlow Condensed", sans-serif; font-style: normal; text-transform: uppercase; }
.market-reward-reveal {
  display: grid;
  grid-template-columns: 82px 62px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  padding: 12px 15px;
  color: #eaf0ed;
  background: #101d2a;
  border-radius: 12px;
  box-shadow: inset 0 2px var(--loot-rarity), 0 8px 20px rgba(2, 7, 13, .28);
}
.market-reward-reveal[hidden] { display: none; }
.market-reward-reveal.is-revealed { animation: market-reward-arrive .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes market-reward-arrive {
  from { opacity: .25; transform: translateY(-8px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.market-reward-chest {
  width: 82px;
  height: 58px;
  background: url("assets/reward-chest-v1.png") right center / 200% 100% no-repeat;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px var(--loot-rarity));
}
.market-reward-art {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--loot-rarity);
  background: #08131e;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--loot-rarity);
}
.market-reward-art > :is(.gear-art, .wall-gear-art) { width: 100%; height: 100%; }
.market-reward-copy,
.market-reward-copy > * { min-width: 0; display: block; }
.market-reward-copy small { color: var(--loot-rarity); font: 800 .58rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.market-reward-copy strong { margin-top: 3px; color: #fff1c7; font: 800 1.08rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.market-reward-copy > span { margin-top: 4px; color: #c2ced2; font-size: .66rem; line-height: 1.35; }
.market-reward-copy em { margin-top: 6px; color: #f1d179; font: 800 .63rem "Barlow Condensed", sans-serif; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.legendary-armory { margin-top: 20px; padding-top: 17px; border-top: 1px solid #3c4c5c; }
.legendary-armory-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.legendary-armory-heading h4 { color: #fff0c1; font: 800 1.18rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.legendary-armory-heading p { max-width: 68ch; margin-top: 4px; color: #aebdc4; font-size: .68rem; line-height: 1.35; }
.legendary-armory-heading > strong { color: #dcb45d; font: 800 .62rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.legendary-weapon-market { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.legendary-weapon-offer { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; color: #eaf0ed; text-align: left; background: linear-gradient(125deg, color-mix(in srgb, var(--legendary) 13%, #18283a), #111d2a 72%); border: 1px solid color-mix(in srgb, var(--legendary) 62%, #405064); border-radius: 11px; box-shadow: 0 7px 18px rgba(2, 7, 12, .24); cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), border-color .18s, background-color .18s; }
.legendary-weapon-offer:hover:not(:disabled),
.legendary-weapon-offer:focus-visible { border-color: #e8c66f; transform: translateY(-2px); }
.legendary-weapon-offer:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.legendary-weapon-offer.owned { cursor: default; opacity: .72; }
.legendary-weapon-icon { width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; color: #e0b356; background: #0d1723; border: 1px solid rgba(224, 179, 86, .48); border-radius: 9px; }
.legendary-weapon-icon > :is(.gear-art, svg) { width: 100%; height: 100%; }
.legendary-weapon-copy,
.legendary-weapon-copy > * { min-width: 0; display: block; }
.legendary-weapon-copy small { color: #bca76f; font: 800 .54rem "Barlow Condensed", sans-serif; letter-spacing: .055em; text-transform: uppercase; }
.legendary-weapon-copy strong { margin-top: 3px; color: #fff0bd; font: 800 .94rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.legendary-weapon-copy > span { margin-top: 5px; color: #aebdc5; font-size: .6rem; line-height: 1.28; }
.legendary-weapon-copy b { margin-right: 5px; color: #deb85f; font: 800 .59rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.legendary-weapon-price { min-width: 82px; color: #f3ce6d; font: 800 .72rem "Barlow Condensed", sans-serif; text-align: right; text-transform: uppercase; }
.legendary-weapon-price em { display: block; margin-top: 3px; color: #8799a5; font-size: .5rem; font-style: normal; letter-spacing: .04em; }
.camp-actions > div { display: flex; align-items: center; gap: 15px; }

.inventory-tabs {
  position: sticky;
  z-index: 5;
  top: -24px;
  margin: 0 -24px;
  padding: 12px 24px;
  background: rgba(222, 209, 175, .96);
  border-bottom: 1px solid rgba(72, 56, 33, .25);
  backdrop-filter: blur(8px);
}

.inventory-tabs button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 5px 13px 5px 6px;
  overflow: hidden;
  color: #f7efda;
  background: linear-gradient(180deg, #323a43 0%, #14243a 58%, #0d1726 100%);
  border: 1px solid #77521a;
  border-radius: 7px 7px 9px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 244, 204, .14), inset 0 -2px 0 #08111d, 0 4px 10px rgba(63, 47, 25, .18);
  text-shadow: 0 1px 1px #081018;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.inventory-tabs button::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  border-radius: 2px;
  background: #876b35;
  opacity: .7;
  transition: background 150ms ease, opacity 150ms ease;
}

.inventory-tabs button > span { position: relative; z-index: 1; white-space: nowrap; }
.inventory-tabs button:hover { color: #f7efda; background: linear-gradient(180deg, #244b7c 0%, #1b3151 58%, #14243a 100%); border-color: #c8902d; transform: translateY(-1px); }
.inventory-tabs button:active { transform: translateY(1px); }
.inventory-tabs button[aria-selected="true"] {
  color: #f7efda;
  background: linear-gradient(180deg, #2f63a2 0%, #244b7c 56%, #1b3151 100%);
  border-color: #f2cd6c;
  box-shadow: inset 0 1px 0 rgba(255, 246, 206, .3), inset 0 -2px 0 #102743, 0 5px 13px rgba(27, 49, 81, .28);
}
.inventory-tabs button[aria-selected="true"]::after { background: #f2cd6c; opacity: 1; }

.inventory-tab-icon {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 2px rgba(4, 9, 15, .45));
  transition: transform 170ms ease;
}

.inventory-tabs button:hover .inventory-tab-icon { transform: translateY(-1px) rotate(-1deg) scale(1.03); }
.tab-icon-frame { fill: #c8902d; stroke: #77521a; stroke-width: 1.2; }
.tab-icon-field { fill: #0d1726; stroke: #f2cd6c; stroke-width: .8; }
.tab-icon-mark { fill: none; stroke: #f7efda; stroke-width: 1.65; }
.inventory-tabs button[aria-selected="true"] .tab-icon-frame { fill: #f2cd6c; stroke: #77521a; }
.inventory-tabs button[aria-selected="true"] .tab-icon-field { fill: #1b3151; stroke: #f2cd6c; }
.inventory-tabs button[aria-selected="true"] .tab-icon-mark { stroke: #f7efda; }
.inventory-pane.enemy-guide > *,
.inventory-pane[data-inventory-pane="mercenaries"] > *,
.inventory-pane[data-inventory-pane="sets"] > * { max-width: none; }

.enemy-guide-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 24px 0 13px;
}
.enemy-guide-heading h3,
.enemy-guide-heading p { margin: 0; }
.enemy-guide-heading h3 { color: #332a20; font: 800 1.35rem Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.inventory-pane[data-inventory-pane="mercenaries"] > h3,
.inventory-pane[data-inventory-pane="sets"] > h3 { color: #fff0c1; font: 800 1.35rem Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.enemy-guide-heading p { max-width: 72ch; margin-top: 7px; color: #60533f; font-size: .78rem; line-height: 1.5; }
.inventory-pane[data-inventory-pane="mercenaries"] > p,
.inventory-pane[data-inventory-pane="sets"] > p { max-width: 72ch; margin-top: 7px; color: #b8c6cc; font-size: .78rem; line-height: 1.5; }
.enemy-guide-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #f5e8c7;
  background: #244b7c;
  border-radius: 6px;
  font: 800 .66rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.enemy-rank-legend { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-bottom: 16px; padding-bottom: 12px; color: #5c4f3d; border-bottom: 1px solid rgba(72, 56, 33, .26); font: 800 .66rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.enemy-rank-legend span { display: inline-flex; align-items: center; gap: 6px; }
.enemy-rank-legend i { width: 10px; height: 10px; display: inline-block; background: #5999d1; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.enemy-rank-legend i.champion { background: #d3a83e; }
.enemy-rank-legend i.general { position: relative; width: 22px; background: linear-gradient(90deg, #c94b42 0 28%, transparent 28% 36%, #c94b42 36% 64%, transparent 64% 72%, #c94b42 72%); }
.enemy-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.enemy-guide-categories { display: grid; gap: 28px; }
.enemy-guide-category > h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 12px; color: #332a20; font: 800 1.2rem Georgia, serif; }
.enemy-guide-category > h4 span { color: #60533f; font: 600 .75rem "Barlow", sans-serif; }
.enemy-category-empty { grid-column: 1 / -1; margin: 0; color: #60533f; font-size: .78rem; }
.enemy-guide-study { display: block; width: 140px; max-width: 100%; height: 150px; }
.enemy-guide-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  overflow: hidden;
  color: #e9eeeb;
  background: #152536;
  border-radius: 13px;
  box-shadow: inset 0 2px var(--enemy-accent), 0 8px 18px rgba(44, 34, 21, .22);
}
.enemy-guide-photo { position: relative; min-height: 190px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--enemy-accent) 20%, #182634), #0c1722 70%); }
.enemy-guide-sprite { position: relative; width: 132px; height: 132px; display: block; overflow: hidden; filter: drop-shadow(0 10px 9px rgba(0, 0, 0, .5)); }
.enemy-guide-sprite img { position: absolute; top: calc(var(--enemy-row) * -100%); left: 0; width: 400%; height: 400%; max-width: none; animation: enemy-field-study 1.05s linear infinite; }
@keyframes enemy-field-study {
  0%, 24.99% { transform: translateX(0); }
  25%, 49.99% { transform: translateX(-25%); }
  50%, 74.99% { transform: translateX(-50%); }
  75%, 100% { transform: translateX(-75%); }
}
.enemy-guide-class { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 5px 7px; color: #fff0c6; background: rgba(7, 14, 22, .86); border-radius: 5px; font: 800 .59rem "Barlow Condensed", sans-serif; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.enemy-guide-copy { min-width: 0; display: flex; flex-direction: column; padding: 15px; }
.enemy-guide-copy h5 { margin: 0; color: #fff0c1; font: 800 1.13rem "Barlow Condensed", sans-serif; letter-spacing: .015em; text-transform: uppercase; }
.enemy-guide-copy > p { margin: 7px 0 13px; color: #c9d2d3; font-size: .71rem; line-height: 1.45; }
.enemy-weakness { margin-top: auto; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--enemy-accent) 38%, #435062); }
.enemy-weakness span,
.enemy-weakness strong { display: block; }
.enemy-weakness span { color: var(--enemy-accent); font: 800 .57rem "Barlow Condensed", sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.enemy-weakness strong { margin-top: 4px; color: #f0e8d2; font-size: .68rem; line-height: 1.35; }
.enemy-guide-empty { grid-column: 1 / -1; min-height: 290px; display: grid; place-items: center; align-content: center; padding: 30px; color: #5c4e3b; text-align: center; border: 1px dashed rgba(72, 56, 33, .38); border-radius: 13px; }
.enemy-guide-empty > span { width: 74px; height: 74px; display: grid; place-items: center; color: #f0ddaa; background: #244b7c; border-radius: 50%; box-shadow: 0 8px 18px rgba(44, 34, 21, .25); font: 800 2.4rem Georgia, serif; }
.enemy-guide-empty strong { margin-top: 17px; color: #342a20; font: 800 1.18rem Georgia, serif; }
.enemy-guide-empty p { max-width: 48ch; margin: 7px 0 0; font-size: .76rem; line-height: 1.45; }

.inventory-pane[data-inventory-pane="mercenaries"],
.inventory-pane[data-inventory-pane="sets"] { padding-top: 24px; }
#mercenaryRoster,
#itemSets { margin-top: 17px; color: #e9efed; background: #122233; border-radius: 13px; box-shadow: 0 12px 26px rgba(43, 32, 19, .26); }
.mercenary-entry { min-height: 230px; display: grid; grid-template-columns: 188px minmax(0, 1fr); align-items: center; gap: 22px; padding: 19px 24px 19px 12px; border-bottom: 1px solid #405064; }
.mercenary-entry:last-child { border-bottom: 0; }
.mercenary-portrait { position: relative; width: 178px; height: 196px; display: block; overflow: hidden; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--mercenary-accent) 17%, #1c3042), #0c1722 72%); border-radius: 11px; box-shadow: inset 0 2px var(--mercenary-accent); }
.mercenary-portrait i { position: absolute; inset: 0; background-image: url("assets/mercenary-company-v1.png"); background-repeat: no-repeat; background-position: calc(var(--mercenary-index) * 50%) center; background-size: 300% auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .48)); }
.mercenary-entry h3 { margin: 0; color: #fff0c1; font: 800 1.32rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.mercenary-entry p { margin: 8px 0 0; color: #c1cdd1; font-size: .77rem; line-height: 1.45; }
.mercenary-entry p + p { color: #92a6b5; font-size: .69rem; font-weight: 700; }
.mercenary-entry button { margin-top: 14px; padding: 10px 15px; color: #17202b; background: var(--gold-300); border: 0; border-radius: 7px; font: 800 .73rem "Barlow Condensed", sans-serif; text-transform: uppercase; cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s; }
.mercenary-entry button:hover:not(:disabled) { background: #ffe18a; transform: translateY(-2px); }
#mercenaryStatus { min-height: 1.2em; color: #6d5c43; font-size: .72rem; }
.company-slots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 16px 0 24px; }
.company-slots label { display: grid; gap: 8px; min-width: 0; font-weight: 700; }
.company-slots select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; color: #f7efda; background: #14243a; border: 1px solid #77521a; border-radius: 7px; font: inherit; }
.company-slots select:focus-visible { outline: 2px solid #ffe69a; outline-offset: 3px; }
.company-slots select:disabled { opacity: .7; }
@media (max-width: 600px) {
  .company-slots { grid-template-columns: minmax(0,1fr); }
  #mercenaryRoster .mercenary-entry { grid-template-columns: minmax(0,1fr); padding: 16px; gap: 12px; }
  #mercenaryRoster .company-details { min-width: 0; overflow-wrap: anywhere; }
  #mercenaryRoster .company-branches { grid-template-columns: minmax(0,1fr); }
}

.set-entry { min-height: 260px; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; padding: 18px; border-bottom: 1px solid #405064; }
.set-entry:last-child { border-bottom: 0; }
.set-showcase { position: relative; min-height: 224px; overflow: hidden; background: radial-gradient(circle at 50% 46%, rgba(76, 143, 199, .2), #0b1723 72%); border-radius: 11px; box-shadow: inset 0 2px #cda74d; }
.set-showcase-art { position: absolute; inset: 0; background: url("assets/item-set-showcases-v1.png") calc(var(--set-index) * 50%) center / 300% auto no-repeat; filter: drop-shadow(0 11px 10px rgba(0, 0, 0, .5)); transform: scale(.94); }
.set-progress { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 6px 8px; color: #fff0c1; background: rgba(7, 14, 22, .88); border-radius: 5px; font: 800 .62rem "Barlow Condensed", sans-serif; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.set-entry-copy { min-width: 0; }
.set-entry-copy > h3 { margin: 1px 0 12px; color: #fff0c1; font: 800 1.3rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.set-piece-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.set-piece { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; padding: 3px 0; }
.set-piece-icon { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; background: #0b1723; border-radius: 8px; box-shadow: inset 0 0 0 1px #435165; filter: saturate(.45); }
.set-piece-icon > .gear-art { width: 100%; height: 100%; }
.set-piece strong,
.set-piece small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-piece strong { color: #d8e0dd; font: 800 .73rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.set-piece small { margin-top: 3px; color: #8799a6; font-size: .6rem; }
.set-piece.set-owned .set-piece-icon { filter: saturate(.8); box-shadow: inset 0 0 0 1px #8d794c; }
.set-piece.set-active .set-piece-icon { filter: none; box-shadow: inset 0 0 0 2px #d4b255, 0 0 12px rgba(212, 178, 85, .16); }
.set-piece.set-active strong,
.set-piece.set-active small { color: #dcecae; }
.set-bonuses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #405064; }
.set-bonuses p { margin: 0; color: #8899a5; font-size: .68rem; line-height: 1.4; }
.set-bonuses strong,
.set-bonuses span { display: block; }
.set-bonuses strong { margin-bottom: 4px; color: #a7b5bc; font: 800 .64rem "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.set-bonuses p.set-active,
.set-bonuses p.set-active strong { color: #dcecae; }
.player-skin-deck { grid-template-columns: 1fr; }
.wall-armory,
.relic-inventory-pane { margin-top: 22px; }
.wall-armory,
.keep-customizer { padding: 18px; background: rgba(255, 248, 226, .56); border: 1px solid rgba(83, 64, 38, .22); border-radius: 12px; }
.wall-equipment-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.wall-equipment-slot { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; color: #edf1ec; background: #222831; border-radius: 9px; box-shadow: inset 3px 0 var(--rarity); }
.wall-equipment-slot small,
.wall-equipment-slot strong,
.wall-equipment-slot em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-equipment-slot small { color: #9eabb5; font-size: .55rem; text-transform: uppercase; }
.wall-equipment-slot strong { margin-top: 2px; font: 800 .76rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.wall-equipment-slot em { margin-top: 2px; color: var(--rarity); font-size: .56rem; font-style: normal; }
.wall-gear-art { width: 42px; height: 42px; display: grid; place-items: center; color: var(--rarity); background: #101923; border: 1px solid currentColor; border-radius: 9px; }
.wall-gear-art svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wall-equipment-inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.wall-equipment-item { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; color: #eaf0ed; text-align: left; background: #222831; border: 0; border-radius: 10px; box-shadow: inset 3px 0 var(--rarity); cursor: pointer; }
.wall-equipment-item:hover { background: #2c3540; }
.wall-equipment-item[aria-pressed="true"] { background: #1b3151; box-shadow: inset 3px 0 var(--rarity), inset 0 0 0 2px #efc35f; }
.wall-equipment-item small,
.wall-equipment-item strong,
.wall-equipment-item em { display: block; }
.wall-equipment-item small { color: var(--rarity); font-size: .57rem; text-transform: uppercase; }
.wall-equipment-item strong { margin-top: 2px; font: 800 .84rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.wall-equipment-item em { margin-top: 3px; color: #b8c1c6; font-size: .62rem; font-style: normal; }
.wall-equipment-item > b { color: #efc35f; font: 800 .62rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.relic-inventory-pane .relic-vault { width: min(720px, 100%); margin: 0 auto; }

@media (max-width: 1080px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    grid-template-rows: 66px minmax(0, 1fr);
  }

  .topbar {
    position: sticky;
    top: 0;
    grid-template-columns: minmax(180px, 1fr) auto auto;
  }

  .battle-status {
    justify-self: end;
  }

  .top-actions {
    display: flex;
    padding-inline: 10px;
  }

  .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(460px, 64svh) auto;
  }

  .command-rail {
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(320px, 1.3fr) minmax(280px, 1fr);
    align-items: stretch;
    padding-bottom: 0;
  }

  .hero-panel,
  .arsenal-command,
  .tower-command,
  .keep-command {
    box-shadow: inset -1px 0 #3a4048;
  }

  .hero-panel {
    display: grid;
    align-content: center;
  }

  .wave-command {
    position: static;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 240px;
    align-items: center;
    gap: 14px;
  }

  .next-front-copy {
    margin: 0;
  }

  .start-screen {
    grid-template-columns: minmax(0, 560px) 270px;
  }

  .start-copy h2 {
    font-size: clamp(3rem, 8vw, 5rem);
  }

  .draft-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  :root {
    --mobile-header-height: 44px;
    --mobile-footer-height: 44px;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overscroll-behavior: none;
  }

  body {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .app-shell {
    width: 100%;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: calc(var(--mobile-header-height) + env(safe-area-inset-top)) minmax(0, 1fr);
  }

  .topbar {
    position: relative;
    top: auto;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    align-items: end;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .brand-lockup {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: var(--mobile-header-height);
    justify-content: center;
    gap: 0;
    padding: 5px 4px;
  }

  .brand-lockup > div,
  .brand-lockup p {
    display: none;
  }

  .brand-crest {
    width: 24px;
    height: 30px;
  }

  .battle-status {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    justify-content: center;
    background: transparent;
    box-shadow: inset 1px 0 rgba(255, 255, 255, .05), inset -1px 0 rgba(255, 255, 255, .05);
  }

  .top-actions {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    gap: 0;
    padding: 0;
  }

  .top-actions .icon-button {
    width: 44px;
    height: 44px;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }

  .top-actions .icon-button svg {
    width: 19px;
  }

  .status-unit,
  .integrity-unit {
    min-width: 0;
    min-height: var(--mobile-header-height);
    flex: 0 1 auto;
    padding: 7px 6px 6px;
    gap: 0;
    box-shadow: inset -1px 0 rgba(206, 166, 77, .13);
  }

  .status-unit > span,
  .integrity-label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .status-unit strong,
  .integrity-label strong {
    font-size: .88rem;
    line-height: 1;
    white-space: nowrap;
  }

  .status-unit:first-child strong::before {
    content: "L";
    margin-right: 2px;
    color: #95a4b4;
    font: 800 .56rem "Barlow", sans-serif;
  }

  .integrity-unit {
    width: 58px;
    flex: 0 0 58px;
  }

  .currency-unit {
    grid-template-columns: 14px auto;
    column-gap: 4px;
  }

  .currency-unit svg {
    grid-row: 1;
    width: 14px;
  }

  .integrity-label {
    justify-content: center;
  }

  .integrity-track {
    height: 3px;
    margin-top: 4px;
  }

  .game-layout {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .battlefield-frame {
    grid-area: 1 / 1;
    min-height: 0;
    box-shadow: none;
  }

  .command-rail {
    position: absolute;
    z-index: 11;
    inset: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: block;
    padding: 0;
    color: #eef1ed;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .hero-panel {
    display: none;
  }

  .tower-command,
  .arsenal-command {
    position: absolute;
    z-index: 2;
    top: calc(50% - var(--mobile-footer-height) / 2);
    width: 46px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .arsenal-command {
    left: max(5px, env(safe-area-inset-left));
  }

  .tower-command {
    right: max(5px, env(safe-area-inset-right));
  }

  .tower-command .section-heading,
  .arsenal-command .section-heading,
  .arsenal-slot .spell-replace-label,
  .keep-actions small {
    display: none;
  }

  .arsenal-slots,
  .tower-slots {
    gap: 4px;
  }

  .arsenal-slots {
    padding-right: 0;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .arsenal-slots::-webkit-scrollbar {
    display: none;
  }

  .arsenal-slot,
  .tower-slot {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    padding: 4px;
    background: rgba(15, 26, 38, .92);
    border: 1px solid rgba(205, 181, 117, .25);
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(1, 6, 10, .28);
  }

  .tower-slot.filled:hover {
    transform: none;
  }

  .arsenal-slot > span,
  .tower-slot > span {
    width: 36px;
    height: 36px;
    background: #101923;
    border-radius: 7px;
  }

  .arsenal-slot.empty,
  .tower-slot.empty {
    background: rgba(17, 25, 34, .64);
    border-color: rgba(151, 164, 171, .17);
    opacity: .62;
  }

  .slot-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .keep-actions {
    margin-top: 4px;
  }

  .keep-actions button {
    width: 46px;
    min-height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #211c12;
    background: #d9b45a;
    border: 1px solid #ffe59a;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(1, 6, 10, .28);
  }

  .keep-actions button svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .keep-actions .repair-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .spell-draft,
  .level-camp,
  .loot-draft {
    align-items: start;
    overflow-y: auto;
    padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + var(--mobile-footer-height) + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    scrollbar-width: none;
  }

  .spell-draft::-webkit-scrollbar,
  .level-camp::-webkit-scrollbar,
  .loot-draft::-webkit-scrollbar {
    display: none;
  }

  .draft-panel,
  .camp-panel {
    margin: auto 0;
    padding: 18px;
  }

  .camp-heading {
    gap: 12px;
    margin-bottom: 14px;
  }

  .camp-heading h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .camp-heading p {
    margin-top: 7px;
    font-size: .72rem;
  }

  .camp-treasury {
    min-width: 116px;
    padding: 9px 10px;
  }

  .camp-wall-row {
    grid-template-columns: 1fr;
    padding: 11px;
  }

  .camp-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .camp-actions .primary-action {
    width: 100%;
  }

  .draft-heading {
    gap: 12px;
    margin-bottom: 14px;
  }

  .draft-heading-actions {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .draft-heading-actions > small {
    font-size: .54rem;
  }

  .draft-heading h2 {
    font-size: clamp(1.85rem, 8vw, 2.55rem);
  }

  .draft-heading p {
    margin-top: 7px;
    font-size: .72rem;
  }

  .draft-options {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .draft-choice {
    min-height: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px;
  }

  .draft-icon {
    grid-row: 1 / 4;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 9px;
  }

  .draft-choice strong {
    font-size: 1.12rem;
  }

  .draft-action {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .draft-choice small {
    grid-column: 2 / 4;
    margin-top: 3px;
    font-size: .65rem;
  }

  .draft-choice em {
    grid-column: 2 / 4;
    margin: 0;
    padding: 4px 0 0;
    font-size: .59rem;
  }

  .draft-capacity {
    margin-top: 11px;
  }

  .run-upgrade-heading {
    align-items: start;
  }

  .run-upgrade-heading p {
    max-width: 40ch;
  }

  .run-upgrade-options {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .run-upgrade {
    min-height: 52px;
  }

  .loot-panel {
    margin: auto 0;
    padding: 17px;
  }

  .loot-heading {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 13px;
    margin-bottom: 14px;
  }

  .loot-chest-prop {
    width: 78px;
    height: 58px;
  }

  .loot-title-row {
    display: block;
  }

  .loot-title-row h2 {
    font-size: clamp(1.55rem, 7vw, 2.15rem);
  }

  .loot-title-row > span {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 6px;
    font-size: .56rem;
  }

  .loot-heading p {
    margin-top: 6px;
    font-size: .68rem;
  }

  .loot-options {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .loot-choice {
    min-height: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    box-shadow: inset 3px 0 var(--rarity);
  }

  .loot-choice-icon {
    width: 50px;
    height: 50px;
    margin: 0;
  }

  .loot-choice-copy strong {
    font-size: 1rem;
  }

  .loot-choice-copy span {
    margin-top: 3px;
    font-size: .62rem;
  }

  .loot-choice > em {
    margin: 0;
    padding: 0;
    text-align: right;
  }

  .wave-command {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--mobile-footer-height) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 7px;
    padding: 0 max(0px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    background: #101a29;
    box-shadow: 0 -7px 18px rgba(0, 0, 0, .3), inset 0 1px #4f5966;
    pointer-events: auto;
  }

  .next-front-copy {
    min-width: 0;
    height: var(--mobile-footer-height);
    display: flex;
    align-items: center;
    margin: 0;
  }

  .next-front-copy span {
    display: none;
  }

  .next-front-copy strong {
    min-width: 0;
    overflow: hidden;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .call-wave-button {
    width: auto;
    min-width: 126px;
    min-height: var(--mobile-footer-height);
    padding: 0 11px;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    font-size: .76rem;
  }

  .call-wave-button svg {
    width: 16px;
  }

  .start-screen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    inset: 0 0 calc(var(--mobile-footer-height) + env(safe-area-inset-bottom));
    padding: 18px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .royal-seal,
  .hero-dossier-card {
    display: none;
  }

  .relic-vault {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
  }

  .relic-vault > header {
    align-items: center;
    margin-bottom: 8px;
  }

  .relic-vault h3 {
    font-size: 1.2rem;
  }

  .relic-vault header p,
  .relic-vault-note {
    display: block;
    font-size: 13px;
    line-height: 1.45;
  }

  .relic-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .relic-row {
    min-height: 54px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 1px 7px;
    padding: 6px;
  }

  .relic-row:nth-child(even) {
    box-shadow: inset 1px 0 #34465a;
  }

  .relic-icon {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .relic-icon svg {
    width: 18px;
    height: 18px;
  }

  .relic-copy strong {
    overflow: hidden;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .relic-copy small {
    display: block;
    font-size: 13px;
    line-height: 1.4;
  }

  .relic-rank {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: .54rem;
    text-align: left;
  }

  .relic-rank em {
    margin: 0;
    font-size: .52rem;
  }

  .start-copy h2 {
    max-width: 15ch;
    font-size: clamp(1.85rem, 8.8vw, 2.7rem);
    line-height: .92;
  }

  .start-copy > p:not(.story-line) {
    max-width: 48ch;
    margin-top: 10px;
    font-size: .76rem;
    line-height: 1.38;
  }

  .campaign-picker {
    margin-top: 17px;
  }

  .campaign-select-wrap select {
    min-height: 46px;
    font-size: 1rem;
  }

  .campaign-picker > p {
    display: block;
  }

  .campaign-picker > p span {
    display: block;
    margin-top: 3px;
    text-align: left;
  }

  .start-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 16px;
    margin-top: 20px;
  }

  .relic-jump {
    grid-column: 1 / -1;
    display: inline-flex;
    justify-self: start;
  }

  .result-actions {
    flex-direction: column;
    gap: 10px;
  }

  .pause-actions {
    flex-direction: column;
    gap: 10px;
  }

  .battlefield-frame {
    --battle-bottom-inset: calc(var(--mobile-footer-height) + env(safe-area-inset-bottom));
  }

  .profile-card {
    grid-template-columns: 62px 1fr;
  }

  .profile-emblem {
    width: 60px;
    height: 72px;
  }

  .profile-card dl {
    grid-column: 1 / -1;
  }

  .profile-select {
    grid-column: 2;
  }
}

@media (max-width: 460px) {
  .topbar {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .brand-crest {
    width: 21px;
    height: 28px;
  }

  .status-unit,
  .integrity-unit {
    padding-inline: 4px;
  }

  .status-unit strong,
  .integrity-label strong {
    font-size: .8rem;
  }

  .integrity-unit {
    width: 52px;
    flex-basis: 52px;
  }

  .start-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }

  .start-actions .primary-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-height: 650px) and (max-width: 960px) {
  .arsenal-slot,
  .tower-slot,
  .keep-actions button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .tower-command,
  .arsenal-command {
    width: 42px;
  }

  .arsenal-slot > span,
  .tower-slot > span {
    width: 32px;
    height: 32px;
  }

  .start-screen {
    padding-top: 12px;
  }

  .story-line {
    margin-bottom: 6px;
  }
}

@media (max-height: 760px) and (max-width: 960px) {
  .start-copy > p:not(.story-line),
  .campaign-picker > p,
  .relic-jump {
    display: none;
  }

  .campaign-picker {
    margin-top: 10px;
  }

  .start-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    margin-top: 10px;
  }

  .start-actions .primary-action {
    grid-column: auto;
    width: auto;
    min-height: 44px;
  }

  .start-actions .text-action {
    font-size: .76rem;
  }
}

@media (max-height: 560px) and (min-width: 600px) and (max-width: 960px) {
  .start-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .relic-vault {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .profiles-drawer {
    width: 100vw;
    padding: 18px;
  }

  .loadout-workbench {
    grid-template-columns: 1fr;
  }

  .defender-inventory-preview {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .equipment-hero-frame {
    min-height: 360px;
  }

  .inventory-character-copy {
    display: block;
  }

  .inventory-character-switcher {
    align-self: stretch;
  }

  .equipment-inventory {
    grid-template-columns: 1fr;
  }

  .drawer-spoil-slots {
    grid-template-columns: 1fr;
  }

  .spell-school-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .profiles-drawer {
    padding: 14px;
  }

  .drawer-head h2 {
    font-size: 1.65rem;
  }

  .defender-inventory-preview {
    display: block;
  }

  .equipment-hero-frame {
    min-height: 0;
    height: 240px;
  }

  .inventory-character-copy { padding: 12px; }
  .equipment-picker { margin-top: 10px; }
  .equipment-picker-item { min-height: 60px; padding: 6px; }
  .equipment-picker-detail { min-height: 0; }

  .paper-doll-item { width: 48px; height: 48px; }
  .paper-doll-weapon { right: 7px; top: 48%; width: 66px; height: 52px; }
  .paper-doll-helm { left: 8px; top: 12px; }
  .paper-doll-armor { right: 8px; top: 12px; }
  .paper-doll-charm { left: 8px; bottom: 54px; }
  .paper-doll-pants { right: 8px; bottom: 80px; }
  .equipment-familiar-plaque { top: 10px; min-width: 104px; padding-right: 7px; }
  .equipment-weapon-readout { right: 7px; bottom: 8px; }

  .spell-school-workbench {
    padding: 14px;
  }

  .spell-school-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .spell-school-familiar {
    width: 44px;
    height: 44px;
  }

  .spell-school-bond {
    grid-column: 2;
    min-width: 0;
    padding: 7px 9px;
    text-align: left;
  }

  .spell-school-grid {
    grid-template-columns: 1fr;
  }

  .spell-school-label {
    display: block;
  }

  .spell-school-label span {
    display: block;
    margin-top: 2px;
  }

  .equipment-slots {
    grid-template-columns: 1fr;
  }

  .equipment-stat-sheet {
    grid-template-columns: repeat(2, 1fr);
  }

  .player-attribute-heading { align-items: start; }

  .run-spoils-workbench {
    padding: 14px;
  }

  .inventory-section-heading {
    gap: 9px;
  }

  .inventory-section-heading p {
    font-size: .68rem;
  }

  .equipment-item {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 9px;
  }

  .equipment-item-icon {
    width: 44px;
    height: 44px;
  }

  .loot-preview {
    grid-template-columns: 78px minmax(0, 1fr) 50px;
    gap: 8px;
    padding: 8px 9px 8px 5px;
  }

  .loot-preview-chest {
    width: 78px;
    height: 54px;
  }

  .loot-preview-unique {
    width: 50px;
    height: 50px;
  }

}

@media (max-width: 760px) {
  .camp-report-grid { grid-template-columns: 1fr; }
  .camp-report { padding: 12px; }
  .skill-tree-grid,
  .crown-market,
  .legendary-weapon-market,
  .camp-loadout-actions,
  .wall-equipment-slots,
  .wall-equipment-inventory { grid-template-columns: 1fr; }

  .enemy-affinity { grid-template-columns: 1fr; gap: 4px; }

  .skill-node { min-height: 88px; }
  .skill-mastery-complete { align-items: stretch; flex-direction: column; }
  .skill-mastery-complete .primary-action { width: 100%; }
  .camp-tabs { margin-bottom: 12px; }
  .camp-tabs button { min-height: 34px; padding-inline: 10px; font-size: .64rem; }
  .camp-actions > div { width: 100%; justify-content: space-between; }
  .inventory-tabs { top: -18px; margin-inline: -18px; padding-inline: 18px; }
  .legendary-armory-heading { align-items: start; flex-direction: column; gap: 7px; }
  .legendary-armory-heading > strong { text-align: left; }
  .enemy-guide-grid { grid-template-columns: 1fr; }
  .set-entry { grid-template-columns: 196px minmax(0, 1fr); }
  .mercenary-entry { grid-template-columns: 160px minmax(0, 1fr); padding-left: 10px; }
  .mercenary-portrait { width: 154px; }
}

@media (max-width: 460px) {
  .camp-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp-reward-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camp-reward-ledger > span { padding-inline: 6px; }
  .camp-loot-result,
  .camp-spoil-result { grid-template-columns: 44px minmax(0, 1fr); padding: 7px; }
  .camp-loot-art { width: 44px; height: 44px; }
  .inventory-tabs { top: -14px; margin-inline: -14px; padding: 9px 14px; }
  .inventory-tabs button { min-height: 46px; padding: 4px 10px 4px 5px; font-size: .64rem; }
  .camp-actions > div { align-items: stretch; flex-direction: column-reverse; gap: 8px; }
  .market-offer { min-height: 62px; }
  .legendary-weapon-offer { grid-template-columns: 50px minmax(0, 1fr); }
  .legendary-weapon-icon { width: 48px; height: 48px; }
  .legendary-weapon-price { grid-column: 2; text-align: left; }
  .inventory-tabs button { gap: 6px; }
  .inventory-tab-icon { width: 34px; height: 34px; }
  .market-reward-reveal { grid-template-columns: 64px 48px minmax(0, 1fr); gap: 8px; padding: 9px; }
  .market-reward-chest { width: 64px; height: 46px; }
  .market-reward-art { width: 48px; height: 48px; }
  .enemy-guide-heading { align-items: start; flex-direction: column; gap: 10px; }
  .enemy-guide-card { grid-template-columns: 122px minmax(0, 1fr); }
  .enemy-guide-photo { min-height: 180px; }
  .enemy-guide-sprite { width: 112px; height: 112px; }
  .enemy-guide-copy { padding: 12px; }
  .mercenary-entry,
  .set-entry { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .mercenary-portrait { width: 100%; height: 220px; }
  .mercenary-portrait i { background-size: auto 100%; }
  .set-showcase { min-height: 260px; }
  .set-piece-list,
  .set-bonuses { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Unified character spell tree */
.spell-draft .draft-panel {
  width: min(1480px, 100%);
  border: 1px solid #4b5b6c;
  background:
    radial-gradient(circle at 50% 46%, rgba(69, 115, 153, .14), transparent 42%),
    #101b28;
}

.spell-draft .draft-heading {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #35475a;
}

.spell-draft .draft-heading h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.spell-draft .draft-options {
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 18px 12px;
}

.spell-unlock-divider {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 18px;
  border-top: 1px solid #51657a;
  color: #e0d5b9;
  font: 800 1rem "Barlow Condensed", sans-serif;
}

.spell-draft .draft-options::before,
.spell-draft .draft-options::after {
  content: none;
}

.spell-tree-node {
  position: relative;
  min-width: 0;
  min-height: 208px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 8px 11px;
  padding: 13px;
  overflow: hidden;
  color: #e9efed;
  text-align: left;
  background: linear-gradient(145deg, #172638, #101c29);
  border: 1px solid #425166;
  border-radius: 9px;
  box-shadow: 0 9px 24px rgba(2, 7, 12, .25), inset 0 1px rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), border-color .18s, background-color .18s;
}

.spell-tree-node::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 27px 27px, color-mix(in srgb, var(--ward) 18%, transparent), transparent 38%);
  pointer-events: none;
}

.spell-tree-node:hover:not(:disabled),
.spell-tree-node:focus-visible {
  z-index: 2;
  border-color: var(--ward);
  background: linear-gradient(145deg, #21384d, #122231);
  transform: translateY(-3px);
}

.spell-tree-node:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.spell-tree-node.learned {
  border-color: color-mix(in srgb, var(--ward) 72%, #526173);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ward) 15%, transparent), 0 9px 24px rgba(2, 7, 12, .28);
}

.spell-tree-node.mastered {
  border-color: #d4ad53;
  background: linear-gradient(145deg, #263145, #151f2b);
}

.spell-tree-node.evolved {
  border-color: color-mix(in srgb, var(--ward) 62%, #f2c967);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ward) 13%, #263145), #151f2b 72%);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ward) 20%, transparent), 0 9px 24px rgba(2, 7, 12, .3);
}

.spell-tree-node:disabled {
  cursor: default;
}

.spell-tree-node.locked {
  color: #9da7ac;
  background: #121d28;
  border-color: #354252;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
  opacity: .68;
}

.spell-tree-node.locked .spell-tree-icon {
  filter: grayscale(.72) brightness(.72);
}

.spell-tree-node.locked .spell-node-upgrade b {
  color: #d8bd75;
}

.spell-tree-node.evolved:disabled {
  opacity: .9;
}

.spell-tree-icon,
.camp-spell-icon {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ward);
  background: #0c1723;
  border: 1px solid color-mix(in srgb, var(--ward) 56%, #344353);
  border-radius: 50%;
  box-shadow: 0 0 15px color-mix(in srgb, var(--ward) 15%, transparent);
}

.spell-tree-icon > b {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #17202a;
  background: #e6c56c;
  border: 2px solid #101b28;
  border-radius: 50%;
  font: 800 .58rem "Barlow Condensed", sans-serif;
}

.spell-tree-copy,
.spell-tree-copy small,
.spell-tree-copy strong,
.spell-tree-copy span,
.spell-node-upgrade,
.spell-node-upgrade b,
.spell-node-upgrade small,
.spell-node-upgrade em {
  min-width: 0;
  display: block;
}

.spell-tree-copy small {
  color: var(--damage-type);
  font: 800 .56rem "Barlow Condensed", sans-serif;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.spell-tree-copy strong {
  margin-top: 3px;
  color: #fff0c3;
  font: 800 1rem "Barlow Condensed", sans-serif;
  line-height: 1;
  text-transform: uppercase;
}

.spell-tree-copy > span {
  grid-column: 1 / -1;
  margin-top: 7px;
  color: #aebcc3;
  font-size: .64rem;
  line-height: 1.32;
}

.spell-node-upgrade {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: 8px;
  border-top: 1px solid #314153;
}

.spell-node-upgrade b {
  color: var(--ward);
  font: 800 .7rem "Barlow Condensed", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.spell-node-upgrade small {
  margin-top: 2px;
  color: #95a6b0;
  font-size: .56rem;
  line-height: 1.25;
}

.spell-node-upgrade em {
  margin-top: 6px;
  color: color-mix(in srgb, var(--ward) 76%, #fff0b0);
  font: 800 .56rem "Barlow Condensed", sans-serif;
  font-style: normal;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.spell-rank-status {
  grid-column: 1 / -1;
  min-width: 0;
  color: #fff0c3;
  font: 800 .72rem "Barlow Condensed", sans-serif;
  overflow-wrap: anywhere;
}

.spell-rank-status small {
  display: block;
  margin-top: 2px;
  color: #c5d0d9;
  font: 600 .62rem "Barlow", sans-serif;
}

.spell-tree-node.evolved {
  border-color: var(--ward);
}

.weapon-training .spell-tree-icon,
.weapon-training .camp-spell-icon {
  overflow: hidden;
}

.skill-tree-grid {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.camp-spell-node {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: #e9efed;
  background: #162638;
  border: 1px solid #3d4e61;
  border-radius: 8px;
}

.camp-spell-node.learned { border-color: color-mix(in srgb, var(--ward) 66%, #405064); }
.camp-spell-node.mastered { background: #222d3c; border-color: #c69d47; }
.camp-spell-node.evolved { background: linear-gradient(110deg, color-mix(in srgb, var(--ward) 12%, #222d3c), #222d3c); box-shadow: inset 3px 0 var(--ward); }
.camp-spell-node.locked { background: #121e2a; border-color: #334355; opacity: .68; }
.camp-spell-node.locked .camp-spell-icon { filter: grayscale(.72) brightness(.72); }
.camp-spell-icon { width: 48px; height: 48px; }
.camp-spell-copy,
.camp-spell-copy > * { min-width: 0; display: block; }
.camp-spell-copy small { color: var(--damage-type); font: 800 .55rem "Barlow Condensed", sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.camp-spell-copy strong { margin-top: 2px; color: #fff0c3; font: 800 .9rem "Barlow Condensed", sans-serif; text-transform: uppercase; }
.camp-spell-copy > span { margin-top: 3px; overflow: hidden; color: #9facb4; font-size: .59rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.camp-spell-copy em { margin-top: 4px; color: #d9c483; font: 800 .57rem "Barlow Condensed", sans-serif; font-style: normal; text-transform: uppercase; }
.camp-spell-node .spell-rank-status { grid-column: auto; }

.spell-progress-summary .spoil-slots { gap: 5px; }
.spell-progress-slot { min-width: 0; }
.spell-progress-slot > span:first-child:not(.spell-art):not(.command-art) { display: grid; place-items: center; color: var(--rarity); font: 800 .72rem "Barlow Condensed", sans-serif; }
.spellbook-remainder > span { color: #e5c267; font: 800 1.1rem "Barlow Condensed", sans-serif; }
.drawer-spoil-slots:has(.spellbook-stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .spell-draft .draft-options { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .spell-draft .draft-options::before,
  .spell-draft .draft-options::after { display: none; }
  .spell-tree-node { min-height: 168px; }
}

@media (max-width: 760px) {
  .spell-draft { padding: 10px; }
  .spell-draft .draft-panel { padding: 15px; }
  .spell-draft .draft-heading { display: block; }
  .spell-draft .draft-heading-actions { margin-top: 10px; }
  .spell-draft .draft-options { grid-template-columns: 1fr; }
  .spell-tree-node { min-height: 142px; }
  .skill-tree-grid { grid-template-columns: 1fr; }
  .drawer-spoil-slots:has(.spellbook-stat) { grid-template-columns: 1fr; }
}

/* Set descriptions share the armory's green set accents across item surfaces. */
.item-set-description.item-set-description {
  display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid #40524b;
  min-width: 0; color: #d2dce2; font-size: .75rem; line-height: 1.45; text-align: left;
  white-space: normal; overflow-wrap: anywhere;
}
.item-set-description .item-set-title { display: block; margin: 0; color: #a7df9b; font-size: .9rem; }
.item-set-description .item-set-progress { display: block; margin: 3px 0 8px; color: #c3d0c8; }
.item-set-description .item-set-pieces, .item-set-description .item-set-bonuses { display: block; margin: 0; }
.item-set-description .item-set-piece { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 3px 0; }
.item-set-description .item-set-piece > span { margin: 0; color: inherit; font-size: inherit; }
.item-set-description .item-set-piece > small { flex-shrink: 0; color: inherit; font: inherit; }
.item-set-description .is-equipped, .item-set-description .is-active { color: #a7df9b; }
.item-set-description .is-owned { color: #e5cf98; }
.item-set-description .is-missing { color: #bfc7cc; }
.item-set-description .item-set-bonus { display: block; margin-top: 9px; font-size: inherit; }
.item-set-description .item-set-bonus > b, .item-set-description .item-set-bonus > span { display: block; margin: 0; color: inherit; font-size: inherit; }
.item-set-description .item-set-rule { display: block; margin-top: 9px; color: #c3d0c8; font-size: .7rem; }