:root {
  color-scheme: dark;
  --bg: #101216;
  --panel: #191d24;
  --panel-2: #222832;
  --line: #343c49;
  --text: #eef3f8;
  --muted: #a8b4c3;
  --accent: #f05d3f;
  --accent-2: #5dd6c9;
  --danger: #ffcf5a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root,
.app {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.authView {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 1rem;
  overflow: hidden;
  background: url("/assets/camp/login-background.png") center / cover no-repeat;
}

.authHeroLeft,
.authHeroRight {
  position: absolute;
  bottom: -2%;
  height: min(82vh, 600px);
  width: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.authHeroLeft {
  left: 12%;
  height: min(68vh, 495px);
  bottom: 4%;
  z-index: 3;
  filter:
    drop-shadow(0 0 25px rgba(140, 200, 40, 0.45))
    drop-shadow(0 0 60px rgba(100, 180, 30, 0.25))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

.authHeroRight {
  right: 5%;
  z-index: 3;
  filter:
    drop-shadow(0 0 25px rgba(220, 120, 20, 0.5))
    drop-shadow(0 0 60px rgba(200, 100, 10, 0.3))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

.authShell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.1rem;
  width: min(480px, 100%);
  padding: 2rem 2.2rem;
  background: rgba(10, 9, 7, 0.94);
  border: 2px solid rgba(180, 140, 60, 0.55);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(0, 0, 0, 0.8),
    0 0 3px rgba(200, 160, 60, 0.35);
}

.authShell::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(180, 140, 60, 0.2);
  pointer-events: none;
}

.authBrand {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  text-align: center;
}

.authBrand img {
  display: block;
  width: min(320px, 90%);
  max-height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(200, 120, 30, 0.25));
}

.authBrand p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #b8a67a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.authBrandDeco {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 155, 80, 0.6), transparent);
}

.authMode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(140, 110, 50, 0.45);
  background: rgba(14, 12, 8, 0.8);
}

.authMode button {
  padding: 0.62rem 0.5rem;
  border-radius: 0;
  background: transparent;
  color: #8a7d6a;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}

.authMode button.authModeActive {
  background: rgba(160, 125, 50, 0.18);
  color: #f0dca8;
  box-shadow: inset 0 -2px 0 rgba(220, 180, 80, 0.65);
}

.authForm {
  display: grid;
  gap: 0.85rem;
}

.authFieldLabel {
  color: #9a917e;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.authForm label {
  display: grid;
  gap: 0.22rem;
}

.authInputWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.authInputIcon {
  position: absolute;
  left: 0.72rem;
  width: 1.05rem;
  height: 1.05rem;
  fill: #6b6560;
  pointer-events: none;
  flex-shrink: 0;
}

.authInputWrap input {
  width: 100%;
  padding: 0.72rem 0.75rem 0.72rem 2.4rem;
  border: 1px solid rgba(120, 100, 55, 0.35);
  border-radius: 3px;
  background: rgba(18, 16, 12, 0.85);
  color: #e8e0d0;
  font-size: 0.82rem;
}

.authInputWrap input::placeholder {
  color: #5a5548;
}

.authInputWrap input:focus {
  border-color: rgba(200, 165, 70, 0.55);
  outline: none;
  box-shadow: 0 0 0 1px rgba(200, 165, 70, 0.18);
}

.authTogglePassword {
  position: absolute;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.authTogglePassword svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #6b6560;
}

.authTogglePassword:hover svg {
  fill: #b8a67a;
}

#authSubmitBtn {
  padding: 0.82rem 1rem;
  margin-top: 0.25rem;
  border: 1px solid rgba(200, 160, 50, 0.6);
  border-radius: 3px;
  background: linear-gradient(180deg, #7a5a20 0%, #4a3210 50%, #3a2808 100%);
  color: #f5e4b8;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 120, 0.15),
    0 2px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

#authSubmitBtn:hover:not(:disabled) {
  background: linear-gradient(180deg, #8d6a28 0%, #5a3c14 50%, #44300a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 120, 0.22),
    0 0 18px rgba(200, 150, 40, 0.2);
}

.authMessage {
  min-height: 1rem;
  margin: 0;
  color: #ff8d80;
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 900px) {
  .authHeroLeft,
  .authHeroRight {
    height: min(50vh, 340px);
    opacity: 0.35;
  }
}

@media (max-width: 560px) {
  .authHeroLeft,
  .authHeroRight {
    display: none;
  }

  .authShell {
    padding: 1.4rem 1.2rem;
  }
}

html,
body {
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at top left, #26313c 0, #101216 34rem);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

body.inGame {
  height: 100vh;
  height: 100dvh;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 700;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0e1116;
  color: var(--text);
  padding: 0.7rem;
}

.hidden {
  display: none !important;
}

.legacyLobbyState {
  display: none !important;
}

.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

.panel {
  width: min(1400px, 100%);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: 0.5rem;
}

.lobby {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(230px, 320px);
  align-items: start;
  min-height: 0;
  gap: 1rem;
  overflow: visible;
}

.lobbyPreRoom {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(230px, 320px);
}

.lobbyCore {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  height: calc(100dvh - 1rem);
  min-height: 0;
  overflow: hidden;
}

.accountBar,
.classProgressTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.accountBar {
  padding: 0.5rem 0.65rem;
  background: rgba(14, 17, 22, 0.9);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.accountBar div {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.accountBar span,
.classProgressPanel small {
  color: var(--muted);
  font-size: 0.66rem;
}

.accountBar strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountBar button {
  padding: 0.38rem 0.6rem;
  font-size: 0.68rem;
}

.classProgressPanel {
  display: grid;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem;
  background: rgba(15, 20, 26, 0.94);
  border: 1px solid rgba(93, 214, 201, 0.28);
  border-radius: 6px;
}

.classProgressTop {
  color: #dce8f4;
  font-size: 0.72rem;
  font-weight: 800;
}

.classProgressTop strong {
  color: #74e3ba;
}

.classXPTrack {
  height: 7px;
  overflow: hidden;
  background: #080b0f;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.classXPTrack span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #4ac7ff, #67e2a1);
  transition: width 180ms ease;
}

.progressionSummary,
.progressionActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.crystalCounter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #9eeeff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.crystalCounter i,
.masteryCrystal i {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  transform: rotate(45deg);
  background: #65dbff;
  border: 1px solid #dcf9ff;
  box-shadow: 0 0 8px rgba(101, 219, 255, 0.72);
}

.progressionActions button {
  flex: 1 1 0;
  padding: 0.42rem 0.5rem;
  font-size: 0.66rem;
}

.progressionModal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 6, 9, 0.82);
  backdrop-filter: blur(5px);
}

.progressionWindow,
.masteryWindow {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.85rem;
  width: min(780px, 100%);
  max-height: min(82vh, 760px);
  padding: 1rem;
  overflow: hidden;
  background: #11161d;
  border: 1px solid rgba(101, 219, 255, 0.38);
  border-radius: 7px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
}

.masteryWindow {
  width: min(980px, 100%);
}

.progressionWindow > header,
.masteryWindow > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
}

.progressionWindow h2,
.masteryWindow h2 {
  margin: 0.12rem 0 0;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.progressionWindow header small,
.masteryWindow header small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.modalCloseButton {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: #242b35;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
}

.objectiveRegions {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.85rem;
  min-height: 0;
  overflow: hidden;
}

.progressionSelectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.progressionSelectorPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.4rem;
  min-width: 0;
  padding: 0.6rem;
  background: #171b20;
  border: 1px solid #4d4435;
  border-radius: 5px;
}

.progressionSelectorPanel h3 {
  margin: 0;
  color: #e9d49b;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.progressionSelectorScroll {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  max-height: 126px;
  min-height: 40px;
  overflow-y: auto;
  scrollbar-color: #8d7040 #202126;
  scrollbar-width: thin;
}

.progressionSelectorButton {
  width: 100%;
  padding: 0.48rem 0.6rem;
  text-align: left;
  color: #c8c0b2;
  background: #24252a;
  border: 1px solid #393a3f;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 800;
}

.progressionSelectorButton:hover {
  color: #fff3cf;
  border-color: #8d7040;
}

.progressionSelectorButton.selected {
  color: #fff1c2;
  background: #4a3922;
  border-color: #c7984c;
  box-shadow: inset 3px 0 #e1b45e;
}

.selectorEmpty,
.objectiveEmpty {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.selectedBossObjectives {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.55rem;
  min-height: 0;
  overflow: hidden;
}

.selectedBossObjectives > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.15rem;
}

.selectedBossObjectives h3 {
  margin: 0.08rem 0 0;
  color: #fff4d3;
  font-size: 1rem;
  letter-spacing: 0;
}

.selectedBossObjectives header small,
.selectedBossObjectives header > span {
  color: #a99d89;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.objectiveGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.55rem;
  min-height: 0;
  overflow-y: auto;
  padding: 0.05rem 0.2rem 0.1rem 0.05rem;
}

.objectiveCard {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.38rem;
  min-height: 145px;
  padding: 0.82rem 0.82rem 2.35rem;
  color: #2d2116;
  background:
    linear-gradient(rgba(255, 246, 213, 0.12), rgba(70, 45, 20, 0.1)),
    #c9ae73;
  border: 2px solid #6d4b27;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 178, 0.45), inset 0 0 22px rgba(79, 48, 21, 0.2);
}

.objectiveCardCompleted {
  background:
    linear-gradient(rgba(198, 226, 168, 0.22), rgba(53, 91, 51, 0.13)),
    #c4ad76;
  border-color: #49613b;
}

.objectiveState {
  color: #6d4b27;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.objectiveCardCompleted .objectiveState {
  color: #35572f;
}

.objectiveCard strong {
  color: #271b11;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
}

.objectiveCard p {
  margin: 0;
  color: #483522;
  font-size: 0.7rem;
  line-height: 1.4;
}

.objectiveRewards {
  position: absolute;
  right: 0.65rem;
  bottom: 0.6rem;
  display: flex;
  gap: 0.45rem;
  color: #3b2b18;
  font-size: 0.65rem;
  font-weight: 900;
}

.objectiveRewards .crystalReward {
  color: #0b6178;
}

.masteryTreeContent {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.55rem;
  min-height: 0;
  overflow: hidden;
}

.masterySummary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem;
  color: #b8c1cd;
  background: #171c23;
  border: 1px solid #38424f;
  border-radius: 4px;
  font-size: 0.7rem;
}

.masterySummary strong {
  color: #8be8ff;
}

.masteryMessage {
  min-height: 1rem;
  margin: 0;
  color: #ffd47a;
  font-size: 0.68rem;
  text-align: center;
}

.masteryRows {
  display: grid;
  gap: 0.65rem;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.masteryRow {
  display: grid;
  gap: 0.42rem;
}

.masteryRow > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.15rem;
}

.masteryRow > header div {
  display: grid;
}

.masteryRow > header small,
.masteryRow > header span {
  color: #8d99a8;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
}

.masteryRow > header strong {
  color: #edf4ff;
  font-size: 0.78rem;
}

.masteryRowLocked > header strong {
  color: #747d88;
}

.masteryNodeGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.48rem;
}

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

.masteryNode {
  display: grid;
  grid-template-rows: auto minmax(2.5rem, 1fr) auto;
  gap: 0.35rem;
  min-height: 118px;
  padding: 0.58rem;
  color: #dce5ef;
  text-align: left;
  background: #1b2129;
  border: 1px solid #3b4653;
  border-radius: 5px;
}

.masteryNodeTop {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.35rem;
}

.masteryNodeTop strong {
  color: inherit;
  font-size: 0.72rem;
}

.masteryNodeTop b {
  flex: none;
  color: #8be8ff;
  font-size: 0.62rem;
}

.masteryNodeDescription {
  color: #aeb8c4;
  font-size: 0.62rem;
  line-height: 1.35;
}

.masteryNodeState {
  color: #7f8995;
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

.masteryNodeAvailable {
  border-color: rgba(104, 210, 255, 0.58);
  box-shadow: inset 0 0 18px rgba(67, 171, 218, 0.06), 0 0 12px rgba(67, 171, 218, 0.08);
}

.masteryNodeAvailable:hover {
  border-color: #8be8ff;
  transform: translateY(-1px);
  box-shadow: inset 0 0 22px rgba(67, 171, 218, 0.1), 0 0 16px rgba(67, 171, 218, 0.16);
}

.masteryNodeAvailable .masteryNodeState {
  color: #8be8ff;
}

.masteryNodeUnlocked {
  color: #f6ffe9;
  background: #263523;
  border-color: #7cce68;
  box-shadow: inset 0 0 22px rgba(116, 213, 91, 0.12), 0 0 14px rgba(116, 213, 91, 0.12);
}

.masteryNodeUnlocked .masteryNodeState {
  color: #8ee978;
}

.masteryNodeLocked {
  color: #777f89;
  background: #181b20;
  border-color: #2b3139;
  filter: grayscale(0.75);
  opacity: 0.58;
}

.masteryNodeLocked .masteryNodeDescription {
  color: #717984;
}

@media (max-width: 760px) {
  .masteryNodeGrid,
  .masteryNodeGrid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .masterySummary {
    display: grid;
    gap: 0.25rem;
  }
}

.brand {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin-top: 0;
  text-align: center;
}

.raidLogoCrop {
  width: min(100%, 420px);
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  transition: width 220ms ease, opacity 220ms ease;
}

.raidLogo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.lobby:not(.lobbyPreRoom) .raidLogoCrop {
  width: min(100%, 320px);
}

.lobby:not(.lobbyPreRoom) .setup,
.lobby:not(.lobbyPreRoom) .roomActions {
  display: none;
}

.brand h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  letter-spacing: 0;
}

.brand p {
  margin: 0;
  color: var(--muted);
}

.rune {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 8px;
  transform: rotate(45deg);
  background: #191d24;
  border: 3px solid #f05d3f;
  border-radius: 7px;
  box-shadow: 0 0 24px rgba(240, 93, 63, 0.26);
  flex: 0 0 auto;
}

.rune::before {
  content: "";
  position: absolute;
  inset: 14px;
  background: #5dd6c9;
  border: 3px solid #eef3f8;
  border-radius: 3px;
}

.setup,
.roomActions,
.roomPanel {
  background: rgba(25, 29, 36, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}

.setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.colorChoice {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
}

.colorChoice legend {
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.colorSwatches {
  display: flex;
  gap: 0.65rem;
}

.colorSwatches label {
  display: block;
  cursor: pointer;
}

.colorSwatches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.colorSwatches span {
  display: block;
  width: 2rem;
  height: 2rem;
  background: var(--swatch);
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
}

.colorSwatches input:checked + span {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(93, 214, 201, 0.3), 0 3px 9px rgba(0, 0, 0, 0.35);
}

.colorSwatches .colorUnavailable {
  cursor: not-allowed;
  opacity: 0.22;
  filter: grayscale(1);
}

.hostBossControls {
  padding: 0.7rem;
  background: rgba(93, 214, 201, 0.07);
  border: 1px solid rgba(93, 214, 201, 0.24);
  border-radius: 6px;
}

.lobbyReference {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  background: rgba(17, 21, 27, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lobbySpellReference {
  position: relative;
  isolation: isolate;
  overflow: visible;
  height: calc(100dvh - 1rem);
  min-height: 0;
  align-content: start;
}

.lobbySpellReference .lobbyReferenceTitle,
.lobbySpellReference .lobbySpellList {
  position: relative;
  z-index: 1;
}

.lobbySpellReference .lobbySpellList {
  margin-top: calc(min(155px, 20vh) + 0.5rem);
}

.lobbySpellReference .lobbySpellItem {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.lobbySpellReference .lobbySpellItem img {
  width: 48px;
  height: 48px;
}

.rangerLobbyArt {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  width: 100%;
  height: 58%;
  object-fit: cover;
  object-position: center 18%;
  opacity: 0.82;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.lobbyReferenceTitle,
.lobbySpellHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.lobbyReferenceTitle {
  color: #f4f8ff;
  font-size: 0.86rem;
  font-weight: 900;
}

.lobbyReferenceTitle small {
  color: var(--accent-2);
  font-size: 0.62rem;
}

.lobbySpellList,
.bossAbilityList {
  display: grid;
  gap: 0.35rem;
}

.lobbySpellItem,
.bossAbilityItem {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bossPortraitFrame {
  position: relative;
  width: 100%;
}

.bossPortrait {
  width: 100%;
  height: min(200px, 26vh);
  object-fit: contain;
  object-position: center;
  background: #030303;
  border: 1px solid rgba(255, 92, 40, 0.42);
  border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(255, 60, 20, 0.2), 0 8px 20px rgba(0, 0, 0, 0.34);
}

.bossReferenceHard {
  border-color: #8f2f24;
  box-shadow:
    inset 0 0 0 2px #190705,
    inset 0 0 34px rgba(134, 18, 10, 0.38),
    0 0 20px rgba(205, 45, 24, 0.22),
    0 8px 26px rgba(0, 0, 0, 0.56);
}

.bossReferenceHard .lobbyReferenceTitle {
  color: #ffb08b;
  border-bottom-color: rgba(218, 65, 35, 0.72);
}

.bossReferenceHard .lobbyReferenceTitle small {
  color: #ff5b3d;
  text-shadow: 0 0 9px rgba(255, 41, 20, 0.78);
}

.bossReferenceHard .bossPortrait {
  border-color: #b43a26;
  box-shadow:
    inset 0 0 38px rgba(180, 25, 12, 0.4),
    0 0 14px rgba(255, 53, 28, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.52);
}

.bossReferenceAscended .bossPortrait {
  border-color: #7d3ad8;
  box-shadow:
    inset 0 0 38px rgba(140, 60, 220, 0.5),
    0 0 18px rgba(168, 92, 255, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

.bossReferenceBroodmother .bossPortrait {
  border-color: #58b94d;
  background: radial-gradient(circle at center, rgba(31, 70, 30, 0.45), #040604 78%);
  box-shadow:
    inset 0 0 36px rgba(70, 210, 70, 0.22),
    0 0 18px rgba(80, 255, 92, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

.bossReferenceHollowWarden .bossPortrait {
  border-color: #8090c0;
  background: radial-gradient(circle at center, rgba(40, 45, 70, 0.45), #040408 78%);
  box-shadow:
    inset 0 0 36px rgba(100, 130, 200, 0.18),
    0 0 18px rgba(120, 150, 220, 0.16),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

.arenaReference {
  border-color: rgba(83, 142, 210, 0.72);
  box-shadow:
    inset 0 0 0 2px #06101c,
    inset 0 0 34px rgba(42, 103, 174, 0.28),
    0 0 20px rgba(70, 145, 255, 0.18),
    0 8px 26px rgba(0, 0, 0, 0.56);
}

.arenaReference .lobbyReferenceTitle {
  color: #dff1ff;
}

.arenaReference .lobbyReferenceTitle small {
  color: #73b8ff;
  text-shadow: 0 0 8px rgba(70, 162, 255, 0.72);
}

.arenaReference .bossPortrait {
  height: min(245px, 31vh);
  object-fit: cover;
  object-position: center 42%;
  border-color: rgba(88, 155, 232, 0.82);
  background: #080d12;
  box-shadow:
    inset 0 0 32px rgba(84, 160, 255, 0.2),
    0 0 16px rgba(75, 150, 255, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

.arenaFeatureIntro,
.arenaFeatureItem {
  padding: 0.42rem 0.5rem;
  background: linear-gradient(135deg, rgba(26, 40, 58, 0.74), rgba(12, 10, 8, 0.84));
  border: 1px solid rgba(94, 154, 218, 0.28);
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28);
}

.arenaFeatureIntro strong,
.arenaFeatureItem strong {
  color: #f2d084;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
}

.arenaFeatureIntro p,
.arenaFeatureItem p {
  margin: 0.16rem 0 0;
  color: #b9c8d4;
  font-size: 0.68rem;
  line-height: 1.25;
}

.bossReferenceHard .bossAbilityList {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.lobbySpellItem img,
.bossAbilityItem img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid rgba(255, 195, 80, 0.42);
  border-radius: 5px;
}

.lobbySpellItem strong,
.bossAbilityItem strong {
  color: #f6f9ff;
  font-size: 0.88rem;
}

.lobbySpellItem p,
.bossAbilityItem p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.loadoutSpellSelect {
  width: 100%;
  height: 1.55rem;
  margin-top: 0.18rem;
  padding: 0.12rem 1.7rem 0.12rem 0.38rem;
  color: #f3e8ca;
  background-color: #20252c;
  border-color: rgba(202, 158, 79, 0.48);
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 800;
}

.loadoutSpellSelect:focus {
  border-color: #d9aa58;
  outline: 1px solid rgba(217, 170, 88, 0.28);
}

.loadoutSpellSelect option:disabled {
  color: #777b82;
}

.lobbySpellHeading kbd {
  padding: 0.18rem 0.3rem;
  background: #151a21;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: white;
  font-size: 0.55rem;
}

label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.roomActions {
  display: flex;
  gap: 1rem;
}

.joinBox {
  display: flex;
  gap: 0.6rem;
  flex: 1;
}

.joinBox input {
  text-transform: uppercase;
}

.roomPanel {
  display: grid;
  gap: 0.65rem;
  animation: roomReveal 220ms ease both;
}

@keyframes roomReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.roomHeader,
.row,
.lobbyButtons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.roomHeader strong {
  font-size: 1.8rem;
  letter-spacing: 0.18em;
}

.playersList {
  display: grid;
  gap: 0.55rem;
}

.playerLine {
  display: grid;
  grid-template-columns: 1rem 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  background: var(--panel-2);
  border-radius: 6px;
}

.playerClass {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  white-space: nowrap;
}

.rangerBowIcon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 17px;
  flex: 0 0 auto;
  border-right: 2px solid #ffffff;
  border-radius: 0 70% 70% 0;
  background: linear-gradient(#ffffff, #ffffff) center / 12px 1.5px no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.32));
}

.rangerBowIcon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 1.5px;
  height: 15px;
  background: #ffffff;
}

.rangerBowIcon::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -1px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid #ffffff;
}

.warriorSwordIcon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 17px;
  flex: 0 0 auto;
  color: #ffffff;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}

.warriorSwordIcon::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 15px;
  left: 6px;
  top: 0;
  background: currentColor;
  border-radius: 999px 999px 2px 2px;
  transform: rotate(38deg);
}

.warriorSwordIcon::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 3px;
  left: 2px;
  top: 10px;
  background: #d7a44c;
  border-radius: 999px;
  transform: rotate(38deg);
}

.rangerBowIcon,
.warriorSwordIcon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 214, 122, 0.48));
}

.rangerBowIcon {
  background-image: url("/assets/class-icons/ranger-bow.png");
}

.warriorSwordIcon {
  background-image: url("/assets/class-icons/slayer-sword.png");
}

.wizardStaffIcon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  background-image: url("/assets/class-icons/wizard-staff.png?v=2");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
}

.rangerBowIcon::before,
.rangerBowIcon::after,
.warriorSwordIcon::before,
.warriorSwordIcon::after,
.wizardStaffIcon::before,
.wizardStaffIcon::after {
  content: none !important;
}

.dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.message {
  min-height: 1.4rem;
  color: var(--danger);
}

.game {
  display: grid;
  grid-template-columns: clamp(200px, 21.875vw, 280px) minmax(0, 1fr) clamp(190px, 20.3125vw, 260px);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.hud {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(14, 17, 22, 0.95);
  border-right: 1px solid var(--line);
}

.encounterTimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: rgba(8, 11, 15, 0.92);
  border: 1px solid rgba(255, 180, 76, 0.38);
  border-radius: 6px;
  color: #aeb8c5;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.encounterTimer strong {
  color: #ffd27a;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(255, 151, 46, 0.28);
}

.encounterTimer.timerWaiting {
  border-color: rgba(255, 255, 255, 0.14);
}

.encounterTimer.timerWaiting strong {
  color: #87919d;
  text-shadow: none;
}

.encounterTimer.timerStopped {
  border-color: rgba(110, 231, 162, 0.48);
}

.encounterTimer.timerStopped strong {
  color: #8df0b4;
}

.rightHud {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  min-height: 0;
  min-width: 0;
  padding: 1rem;
  background: rgba(14, 17, 22, 0.95);
  border-left: 1px solid var(--line);
}

.label {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.bossBox,
.partyPanel,
.cooldowns,
.logPanel {
  display: grid;
  gap: 0.65rem;
}

.cooldowns {
  align-content: start;
  min-height: 0;
}

.bossBox,
.partyPanel {
  display: none;
}

.bar {
  height: 12px;
  background: #0b0d11;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--danger));
}

.ultimatePanel {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  background: linear-gradient(180deg, rgba(25, 28, 36, 0.96), rgba(14, 17, 22, 0.96));
  border: 1px solid rgba(129, 207, 255, 0.24);
  border-radius: 6px;
}

.ultimateTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.ultimateTop strong {
  color: #f6fbff;
  font-size: 0.86rem;
}

.ultimateBar {
  height: 11px;
  background: #080b10;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.ultimateBar span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #4ac7ff, #9b7cff, #ffcf5a);
  box-shadow: 0 0 14px rgba(129, 207, 255, 0.5);
  transition: width 120ms linear;
}

.ultimatePanel.ultimateReady {
  border-color: rgba(255, 207, 90, 0.72);
}

.ultimatePanel.ultimateReady .ultimateTop strong {
  color: #ffcf5a;
}

.ultimatePanel.ultimateReady .ultimateBar span {
  box-shadow: 0 0 18px rgba(255, 207, 90, 0.8);
}

.damagePanel,
.eventLogPanel {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem;
  background: rgba(17, 21, 27, 0.94);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.eventLogPanel {
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

.eventLogPanel .logPanel {
  align-content: start;
  overflow: hidden;
}

.damagePanelTitle,
.damageRowTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.damagePanelTitle {
  color: #edf5ff;
  font-size: 0.82rem;
  font-weight: 800;
}

.damagePanelTitle small {
  color: #6ee7a2;
  font-size: 0.65rem;
}

.damageMeter {
  display: grid;
  gap: 0.48rem;
}

.damageRow {
  display: grid;
  gap: 0.25rem;
  padding-left: 0.35rem;
  border-left: 2px solid transparent;
}

.damageRowSelf {
  border-left-color: #ffffff;
}

.damageRowTop {
  color: var(--muted);
  font-size: 0.76rem;
}

.damageRowTop span {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.damageRowTop i {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  margin-right: 0.35rem;
  border-radius: 50%;
}

.damageRowTop strong {
  color: #f4f8ff;
  font-variant-numeric: tabular-nums;
}

.damageTrack {
  height: 5px;
  overflow: hidden;
  background: #080b10;
  border-radius: 999px;
}

.damageTrack span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  transition: width 150ms linear;
}

.partyMember,
.cooldownItem,
.logItem {
  padding: 0.65rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.partyTop {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.cooldownItem {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 62px;
  padding: 0.42rem 0.5rem;
}

.sidebarReadyDot {
  position: absolute;
  z-index: 2;
  top: 0.3rem;
  left: 0.3rem;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(235, 250, 255, 0.92);
  border-radius: 50%;
  pointer-events: none;
}

.readyDotDodge {
  background: #54bfff;
  box-shadow: 0 0 7px #54bfff;
}

.readyDotSupport {
  background: #55df83;
  box-shadow: 0 0 7px #55df83;
}

.readyDotBarrier {
  background: #ffffff;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.9);
}

.spellIcon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid rgba(255, 195, 80, 0.58);
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
}

.spellIconFallback {
  background: #10141a;
}

.spellIdentity {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.spellName {
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
  white-space: normal;
  -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.95);
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.spellCategory {
  display: block;
  margin-top: 0.08rem;
  color: #75d9c8;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.spellIdentity small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}

.spellControl {
  display: grid;
  justify-items: end;
  gap: 0.3rem;
}

.spellControl kbd {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.55rem;
  padding: 0 0.32rem;
  background: linear-gradient(180deg, #313946, #151a21);
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-bottom-width: 3px;
  border-radius: 4px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

.spellControl strong {
  min-width: 3.35rem;
  padding: 0.18rem 0.3rem;
  background: #0b0f15;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #f2f6ff;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.spellCooling .spellIcon {
  filter: grayscale(1) brightness(0.48) contrast(0.86);
  opacity: 0.72;
}

.spellCooling .spellName,
.spellCooling .spellIdentity small {
  color: #7f8792;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
}

.spellCooling .spellControl kbd {
  filter: grayscale(1);
  opacity: 0.62;
}

.spellCooling .spellControl strong {
  border-color: rgba(255, 255, 255, 0.12);
  color: #b6bdc7;
}

.spellAutoActive {
  border-color: rgba(91, 226, 132, 0.78);
  box-shadow: inset 0 0 0 1px rgba(91, 226, 132, 0.18), 0 0 13px rgba(50, 185, 97, 0.18);
}

.spellAutoActive::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(112, 255, 154, 0.78);
  border-radius: 6px;
  pointer-events: none;
}

.autoToggle {
  display: grid;
  grid-template-columns: 18px auto;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.36rem;
  background: rgba(39, 128, 70, 0.3);
  border: 1px solid rgba(104, 241, 145, 0.7);
  border-radius: 999px;
  color: #a9ffc3;
}

.autoToggle i {
  position: relative;
  width: 18px;
  height: 10px;
  background: #52d77c;
  border-radius: 999px;
  box-shadow: 0 0 7px rgba(82, 215, 124, 0.7);
}

.autoToggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.autoToggle b {
  font-size: 0.55rem;
}

.spellAutoActive .spellControl strong {
  border-color: rgba(104, 241, 145, 0.45);
  color: #a9ffc3;
}

.spellTooltip {
  display: none;
  position: absolute;
  left: 0;
  width: 320px;
  top: calc(100% + 0.35rem);
  z-index: 20;
  padding: 0.55rem 0.65rem;
  background: rgba(7, 10, 14, 0.98);
  border: 1px solid rgba(129, 207, 255, 0.35);
  border-radius: 6px;
  color: #eaf3ff;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.globalSpellTooltip {
  position: fixed;
  z-index: 2147483647;
  display: grid;
  gap: 0.42rem;
  width: min(320px, calc(100% - 20px));
  padding: 0.65rem 0.75rem;
  background: rgba(7, 10, 14, 0.99);
  border: 1px solid rgba(129, 207, 255, 0.58);
  border-radius: 6px;
  color: #eaf3ff;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.levelRewardPopup {
  position: fixed;
  z-index: 5200;
  top: 18%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.24rem;
  min-width: 260px;
  padding: 0.85rem 1.15rem;
  transform: translateX(-50%);
  color: #fff5ca;
  text-align: center;
  background: rgba(15, 20, 18, 0.94);
  border: 1px solid rgba(116, 226, 133, 0.72);
  border-radius: 6px;
  box-shadow: 0 0 26px rgba(80, 211, 112, 0.25), 0 12px 35px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.levelRewardPopup small {
  color: #83e79b;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.levelRewardPopup strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.levelRewardPopup span {
  color: #edf6ef;
  font-size: 0.76rem;
  font-weight: 800;
}

.levelRewardPopupVisible {
  animation: levelRewardReveal 2s ease forwards;
}

@keyframes levelRewardReveal {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.96); }
  10%, 62% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -12px) scale(0.98); }
}

.cooldownItem:hover .spellTooltip,
.lobbySpellItem:hover .spellTooltip {
  display: none !important;
}

.cooldownItem:hover {
  z-index: 30;
}

.cooldownItem:hover .spellTooltip {
  display: grid;
  gap: 0.42rem;
}

.lobbySpellItem .spellTooltip {
  left: calc(100% + 0.75rem);
  top: 0;
}

.lobbyPreRoom .bossReference.hidden {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

.secondaryButton {
  background: #2a313c;
  border: 1px solid #485363;
  color: #e8edf4;
}

.leaveGameButton {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: rgba(113, 25, 25, 0.76);
  border: 1px solid rgba(255, 91, 91, 0.48);
}

.confirmModal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 9, 0.68);
  backdrop-filter: blur(3px);
}

.confirmDialog {
  width: min(380px, calc(100% - 2rem));
  padding: 1.2rem;
  background: #171c23;
  border: 1px solid #485363;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.confirmDialog strong {
  display: block;
  font-size: 1.05rem;
}

.confirmActions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.lobbySpellItem:hover {
  z-index: 30;
}

.lobbySpellItem:hover .spellTooltip {
  display: grid;
  gap: 0.42rem;
}

.spellTooltipLine {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: 0.5rem;
}

.spellTooltipLine strong {
  color: #ffffff;
  font-size: 0.76rem;
}

.spellTooltipLine > span {
  color: #c7d1dd;
}

.spellTooltipBurn strong {
  color: #ff5353;
  text-shadow: 0 0 10px rgba(255, 48, 48, 0.42);
}

.spellTooltipSlow strong {
  color: #72d8ff;
  text-shadow: 0 0 10px rgba(62, 184, 255, 0.38);
}

.spellTooltipRoot strong {
  color: #e6b84e;
  text-shadow: 0 0 10px rgba(231, 176, 58, 0.44);
}

.logItem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  padding: 0.42rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.3;
}

.logItem span {
  min-width: 0;
}

.logAbilityIcon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.38);
}

.arenaWrap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: hidden;
}

#arena {
  width: min(100%, calc((100dvh - 2rem) * 1.5));
  max-width: 100%;
  max-height: calc(100dvh - 2rem);
  aspect-ratio: 3 / 2;
  height: auto;
  border: 1px solid var(--line);
  background: #151a1f;
  border-radius: 8px;
  cursor: crosshair;
}

.endBanner {
  position: absolute;
  inset: auto 2rem 2rem;
  text-align: center;
  padding: 1rem;
  background: rgba(15, 18, 23, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 800;
}

.endBanner button {
  margin-top: 0.8rem;
}

.endBannerVictory {
  z-index: 60;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  background:
    radial-gradient(circle, rgba(255, 207, 75, 0.2), transparent 42%),
    rgba(5, 8, 12, 0.74);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 120px rgba(255, 183, 40, 0.12);
}

.victoryTitle {
  color: #ffe58a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 #7a3c0a,
    0 0 18px rgba(255, 224, 112, 0.85),
    0 0 52px rgba(255, 113, 24, 0.52);
}

.endBannerVictory #backToLobbyBtn {
  min-width: 170px;
  margin-top: 1.5rem;
  background: linear-gradient(180deg, #ffcf58, #c66a17);
  border: 1px solid #ffe6a3;
  color: #211307;
  box-shadow: 0 8px 24px rgba(255, 137, 28, 0.28);
}

.announcement {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: 0.55rem;
  width: min(300px, calc(100% - 1.6rem));
  min-height: 3.25rem;
  padding: 0.42rem 0.58rem;
  background: rgba(12, 14, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  opacity: 0.88;
  pointer-events: none;
}

.announcement::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.12;
  background: linear-gradient(90deg, currentColor, transparent);
  pointer-events: none;
}

.announcementIcon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid currentColor;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 12px currentColor;
}

.announcementIcon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.announcementIcon span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.announcement strong,
.announcement span {
  position: relative;
  display: block;
}

.announcement strong {
  font-size: 0.9rem;
}

.announcement span {
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
}

.announcement-ice,
.announcement-lightning {
  color: #84d9ff;
}

.announcement-ice {
  background:
    linear-gradient(135deg, rgba(11, 36, 58, 0.62), rgba(31, 106, 148, 0.54)),
    repeating-linear-gradient(60deg, rgba(210, 246, 255, 0.16) 0 2px, transparent 2px 13px);
  border-color: rgba(177, 237, 255, 0.5);
  box-shadow: 0 0 16px rgba(102, 205, 255, 0.2), 0 7px 18px rgba(0, 0, 0, 0.22);
}

.announcement-ice::after {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: 6px;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(218, 250, 255, 0.24) 43% 45%, transparent 46%),
    linear-gradient(20deg, transparent 0 55%, rgba(218, 250, 255, 0.16) 56% 58%, transparent 59%);
  pointer-events: none;
}

.announcement-ice .announcementIcon {
  background: radial-gradient(circle, rgba(230, 252, 255, 0.36), rgba(84, 185, 239, 0.12));
  text-shadow: 0 0 10px rgba(232, 252, 255, 0.95);
}

.announcement-halo {
  color: #a6784d;
}

.announcement-meteor {
  color: #ff4f32;
}

.announcement-apocalypse {
  color: #b40018;
}

.announcement-reinforcement {
  color: #ffd75a;
}

.announcement-mender {
  color: #75ef9b;
  background: linear-gradient(135deg, rgba(8, 38, 24, 0.7), rgba(31, 102, 62, 0.58));
  border-color: rgba(115, 239, 155, 0.54);
  box-shadow: 0 0 17px rgba(56, 211, 112, 0.22), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-brood-venom {
  color: #76ff5f;
  background: linear-gradient(135deg, rgba(8, 38, 16, 0.68), rgba(25, 102, 32, 0.52));
  border-color: rgba(118, 255, 95, 0.5);
  box-shadow: 0 0 17px rgba(76, 255, 78, 0.22), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-brood-web {
  color: #cfd5d0;
  background: linear-gradient(135deg, rgba(42, 44, 45, 0.72), rgba(115, 121, 116, 0.44));
  border-color: rgba(214, 220, 216, 0.45);
  box-shadow: 0 0 16px rgba(210, 220, 216, 0.16), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-brood-egg {
  color: #ffab3d;
  background: linear-gradient(135deg, rgba(55, 25, 6, 0.7), rgba(155, 78, 17, 0.5));
  border-color: rgba(255, 169, 64, 0.52);
  box-shadow: 0 0 18px rgba(255, 132, 36, 0.22), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-brood-widow {
  color: #2fba5f;
  background: linear-gradient(135deg, rgba(5, 24, 13, 0.76), rgba(15, 70, 32, 0.58));
  border-color: rgba(47, 186, 95, 0.5);
  box-shadow: 0 0 17px rgba(21, 134, 58, 0.24), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-brood-storm {
  color: #a7efad;
  background:
    linear-gradient(135deg, rgba(44, 48, 46, 0.7), rgba(46, 103, 61, 0.52)),
    repeating-linear-gradient(60deg, rgba(190, 255, 197, 0.1) 0 2px, transparent 2px 13px);
  border-color: rgba(166, 239, 173, 0.52);
  box-shadow: 0 0 17px rgba(96, 224, 118, 0.2), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-warden-chain-slam {
  color: #ffe0a0;
  background:
    linear-gradient(135deg, rgba(60, 48, 28, 0.7), rgba(120, 85, 30, 0.52)),
    repeating-linear-gradient(60deg, rgba(255, 200, 80, 0.1) 0 2px, transparent 2px 13px);
  border-color: rgba(255, 180, 50, 0.52);
  box-shadow: 0 0 17px rgba(255, 170, 50, 0.2), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-warden-prison-sigils {
  color: #d8b8ff;
  background:
    linear-gradient(135deg, rgba(50, 30, 70, 0.7), rgba(100, 60, 140, 0.52)),
    repeating-linear-gradient(60deg, rgba(180, 120, 255, 0.1) 0 2px, transparent 2px 13px);
  border-color: rgba(180, 120, 255, 0.52);
  box-shadow: 0 0 17px rgba(160, 100, 240, 0.2), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-warden-pull {
  color: #e0d8c0;
  background:
    linear-gradient(135deg, rgba(55, 48, 38, 0.7), rgba(100, 85, 60, 0.52)),
    repeating-linear-gradient(60deg, rgba(200, 180, 140, 0.1) 0 2px, transparent 2px 13px);
  border-color: rgba(200, 180, 140, 0.52);
  box-shadow: 0 0 17px rgba(180, 160, 120, 0.2), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-warden-soul-lantern {
  color: #a0ffe0;
  background:
    linear-gradient(135deg, rgba(28, 50, 42, 0.7), rgba(40, 100, 80, 0.52)),
    repeating-linear-gradient(60deg, rgba(100, 255, 180, 0.1) 0 2px, transparent 2px 13px);
  border-color: rgba(100, 255, 180, 0.52);
  box-shadow: 0 0 17px rgba(80, 220, 150, 0.2), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-warden-judgment {
  color: #fff8d0;
  background:
    linear-gradient(135deg, rgba(60, 55, 30, 0.7), rgba(120, 105, 40, 0.52)),
    repeating-linear-gradient(60deg, rgba(255, 240, 160, 0.1) 0 2px, transparent 2px 13px);
  border-color: rgba(255, 240, 160, 0.52);
  box-shadow: 0 0 17px rgba(255, 230, 100, 0.25), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.announcement-generic {
  color: #ffffff;
}

.chainStacksHUD {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem;
  background: rgba(0, 0, 0, 0.65);
  border: 1.5px solid rgba(200, 170, 100, 0.5);
  border-radius: 8px;
  pointer-events: auto;
  cursor: default;
  z-index: 5;
  transition: opacity 0.25s;
}

.chainStacksHUD.hidden {
  display: none;
}

.chainStacksHUD.danger {
  border-color: rgba(255, 80, 60, 0.7);
}

.chainStacksHUD .chainStackLabel {
  font-weight: bold;
  font-size: 11px;
  color: #e0c880;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.chainStacksHUD.danger .chainStackLabel {
  color: #ff8866;
}

.chainStacksHUD img {
  width: 48px;
  height: 48px;
  display: block;
}

.chainStacksHUD .chainStackCount {
  font-weight: bold;
  font-size: 20px;
  color: #ffd080;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  line-height: 1;
}

.chainStacksHUD.danger .chainStackCount {
  color: #ff6644;
}

.gameError {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.65rem;
  background: rgba(35, 6, 6, 0.82);
  border: 1px solid rgba(255, 80, 80, 0.65);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.95rem;
  font-weight: 800;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .lobby {
    grid-template-columns: minmax(200px, 24%) minmax(0, 1fr) minmax(210px, 24%);
    gap: 0.65rem;
  }

  .lobbyPreRoom {
    grid-template-columns: minmax(200px, 24%) minmax(0, 1fr) minmax(210px, 24%);
  }

  .game {
    grid-template-columns: clamp(190px, 23vw, 240px) minmax(0, 1fr) clamp(185px, 22vw, 225px);
  }

  .hud,
  .rightHud {
    padding: 0.7rem;
  }
}

@media (max-width: 900px) {
  .lobbySpellItem p,
  .bossAbilityItem p {
    display: none;
  }
}

@media (max-width: 820px) {
  .panel {
    padding: 0.35rem;
  }

  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(180px, 23%) minmax(0, 1fr) minmax(195px, 25%);
    gap: 0.45rem;
  }

  .game {
    grid-template-columns: 180px minmax(0, 1fr) 180px;
  }

  .lobbyReference,
  .setup,
  .roomActions,
  .roomPanel {
    padding: 0.55rem;
  }

  .playerLine {
    gap: 0.4rem;
    font-size: 0.78rem;
  }

  .hud,
  .rightHud {
    padding: 0.45rem;
  }
}

@media (max-height: 760px) {
  .panel {
    padding-block: 0.35rem;
  }

  .lobbyCore,
  .lobbySpellReference {
    height: calc(100dvh - 0.7rem);
  }

  .lobbyCore {
    gap: 0.45rem;
  }

  .raidLogoCrop {
    width: min(100%, 300px);
  }

  .lobby:not(.lobbyPreRoom) .raidLogoCrop {
    width: min(100%, 220px);
  }

  .brand {
    gap: 0.15rem;
  }

  .brand p {
    font-size: 0.8rem;
  }

  .lobbyReference {
    gap: 0.4rem;
    padding: 0.6rem;
  }

  .bossPortrait {
    height: min(150px, 22dvh);
  }

  .lobbySpellReference .lobbySpellList {
    margin-top: calc(min(150px, 22dvh) + 0.4rem);
  }

  .lobbySpellList,
  .bossAbilityList {
    gap: 0.2rem;
  }

  .lobbySpellReference .lobbySpellItem,
  .bossAbilityItem {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.4rem;
    padding: 0.28rem 0;
  }

  .lobbySpellReference .lobbySpellItem img,
  .bossAbilityItem img {
    width: 42px;
    height: 42px;
  }

  .lobbySpellItem strong,
  .bossAbilityItem strong {
    font-size: 0.78rem;
  }

  .lobbySpellItem p,
  .bossAbilityItem p {
    margin-top: 0.1rem;
    font-size: 0.65rem;
    line-height: 1.18;
  }

  .setup,
  .roomActions,
  .roomPanel {
    padding: 0.65rem;
  }

  .roomPanel,
  .playersList {
    gap: 0.4rem;
  }

  .hostBossControls {
    padding: 0.45rem;
  }

  .colorChoice legend {
    margin-bottom: 0.3rem;
  }

  .colorSwatches span {
    width: 1.65rem;
    height: 1.65rem;
  }

  .playerLine {
    padding: 0.32rem 0.5rem;
  }

  .roomHeader strong {
    font-size: 1.45rem;
  }

  .lobbyButtons button,
  .roomActions button {
    padding-block: 0.55rem;
  }

  .hud,
  .rightHud {
    gap: 0.4rem;
    padding: 0.5rem;
  }

  .leaveGameButton {
    padding: 0.38rem 0.55rem;
  }

  .label {
    margin-bottom: 0.08rem;
    font-size: 0.7rem;
  }

  .ultimatePanel {
    gap: 0.25rem;
    padding: 0.45rem;
  }

  .encounterTimer {
    padding: 0.42rem 0.5rem;
    font-size: 0.62rem;
  }

  .encounterTimer strong {
    font-size: 0.92rem;
  }

  .ultimateBar {
    height: 10px;
  }

  .cooldowns {
    gap: 0.32rem;
  }

  .cooldownItem {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.28rem 0.38rem;
  }

  .spellIcon {
    width: 38px;
    height: 38px;
  }

  .spellName {
    font-size: 0.72rem;
  }

  .spellIdentity small,
  .spellControl kbd,
  .spellControl strong {
    font-size: 0.58rem;
  }

  .spellControl {
    gap: 0.16rem;
  }

  .spellControl kbd {
    height: 1.3rem;
    border-bottom-width: 2px;
  }

  .spellControl strong {
    min-width: 2.8rem;
    padding: 0.12rem 0.2rem;
  }

  .autoToggle {
    grid-template-columns: 14px auto;
    gap: 0.2rem;
    padding: 0.12rem 0.25rem;
  }

  .autoToggle i {
    width: 14px;
    height: 8px;
  }

  .autoToggle i::after {
    top: 1px;
    width: 6px;
    height: 6px;
  }

  .damagePanel,
  .eventLogPanel {
    gap: 0.35rem;
    padding: 0.5rem;
  }

  .logItem {
    padding: 0.3rem 0.38rem;
    font-size: 0.7rem;
  }

  .logAbilityIcon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .damageMeter {
    gap: 0.3rem;
  }

  .arenaWrap {
    padding: 0.5rem;
  }

  #arena {
    width: min(100%, calc((100dvh - 1rem) * 1.5));
    max-height: calc(100dvh - 1rem);
  }
}

@media (max-height: 560px) {
  .lobbySpellItem p,
  .bossAbilityItem p,
  .spellIdentity small,
  .damageTrack {
    display: none;
  }

  .bossPortrait {
    height: 105px;
  }

  .lobbySpellReference .lobbySpellList {
    margin-top: calc(105px + 0.4rem);
  }

  .lobbySpellReference .lobbySpellItem,
  .bossAbilityItem {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 40px;
  }

  .lobbySpellReference .lobbySpellItem img,
  .bossAbilityItem img {
    width: 36px;
    height: 36px;
  }

  .cooldownItem {
    min-height: 42px;
  }

  .roomPanel {
    gap: 0.3rem;
    padding: 0.45rem;
  }

  .playersList {
    gap: 0.25rem;
  }

  .hostBossControls {
    padding: 0.35rem;
  }

  .lobbyButtons button {
    padding-block: 0.45rem;
  }

  .damageRow {
    gap: 0.08rem;
  }
}

@media (max-width: 700px) {
  .progressionSelectors {
    gap: 0.45rem;
  }

  .progressionSelectorPanel {
    padding: 0.45rem;
  }

  .progressionSelectorScroll {
    max-height: 92px;
  }

  .objectiveGrid {
    grid-template-columns: 1fr;
  }

  .progressionWindow,
  .masteryWindow {
    max-height: calc(100dvh - 1rem);
    padding: 0.75rem;
  }
}

/* Medieval lobby theme */
.lobby {
  background:
    linear-gradient(rgba(10, 9, 8, 0.5), rgba(10, 9, 8, 0.72)),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0, 0, 0, 0.14) 79px 81px),
    #282722;
}

.lobbyCore,
.lobbyReference {
  border: 2px solid #4c443a;
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 38%),
    repeating-linear-gradient(0deg, #22231f 0 37px, #1d1e1b 38px 40px);
  box-shadow: inset 0 0 0 2px #151612, inset 0 0 28px rgba(0, 0, 0, 0.46), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.lobbyCore {
  padding: 0.55rem;
}

.accountBar,
.classProgressPanel,
.setup,
.roomActions,
.roomPanel,
.hostBossControls {
  border-color: #66533a;
  border-radius: 4px;
  background:
    linear-gradient(rgba(255, 220, 157, 0.05), rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(90deg, #382719 0 96px, #302116 97px 100px);
  box-shadow: inset 0 0 0 1px rgba(232, 188, 112, 0.12), 0 3px 8px rgba(0, 0, 0, 0.32);
}

.accountBar span,
.classProgressPanel small,
.colorChoice legend,
label {
  color: #c6b491;
}

.brand p {
  color: #d2c29f;
  text-shadow: 0 2px 3px #000;
}

.classProgressPanel {
  grid-template-columns: minmax(140px, 200px) max-content minmax(0, 1fr);
  grid-template-rows: auto 14px auto;
  align-items: center;
  gap: 0.28rem 1.25rem;
  min-height: 72px;
  padding: 0.52rem 0.7rem;
}

.classProgressTop,
.classXPTrack,
.progressionSummary {
  grid-column: 1;
}

.classProgressTop {
  grid-row: 1;
  justify-content: flex-start;
}

.classProgressTop > span,
#classXPText {
  display: none;
}

.classProgressTop strong {
  color: #8dc8ff;
}

.classXPTrack {
  position: relative;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: 14px;
  background: #0a1018;
  border-color: #527ca5;
}

.classXPTrack span {
  background: linear-gradient(90deg, #2469a6, #66c8ff);
  box-shadow: 0 0 8px rgba(76, 177, 255, 0.52);
}

#classXPHover {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.classXPTrack:hover #classXPHover {
  opacity: 1;
}

.bossModeIndicator strong {
  display: block;
  color: #f0c77f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  line-height: 1.2;
}

.progressionActions {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  justify-content: flex-start;
}

.progressionSummary {
  grid-row: 3;
  justify-content: flex-start;
}

.progressionActions button,
#progressionBtn,
#scoreboardBtn,
#inventoryBtn {
  flex: 0 0 auto;
  min-width: 84px;
  color: #3b2814;
  background:
    linear-gradient(90deg, rgba(104, 62, 22, 0.22), transparent 12% 88%, rgba(104, 62, 22, 0.22)),
    #d5b97f;
  border: 1px solid #7b542b;
  box-shadow: inset 0 0 0 1px #ead6a2, 0 2px 5px rgba(0, 0, 0, 0.35);
  font-family: Georgia, "Times New Roman", serif;
}

.scoreboardAction {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.scoreboardWindow {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.65rem;
  width: min(920px, calc(100vw - 1rem));
  height: min(680px, calc(100dvh - 1rem));
  padding: 0.9rem;
  color: #d7c39d;
  background:
    linear-gradient(135deg, rgba(255, 215, 145, 0.035), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    #14140f;
  border: 2px solid #665034;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #070806, inset 0 0 38px rgba(0, 0, 0, 0.7), 0 22px 70px rgba(0, 0, 0, 0.72);
}

.scoreboardWindow::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(166, 124, 66, 0.3);
  pointer-events: none;
}

.scoreboardWindow > header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 0.15rem 0.55rem;
  border-bottom: 1px solid #5c4930;
}

.scoreboardTitleIcon {
  margin-right: 0.3rem;
}

.scoreboardWindow h2 {
  margin: 0;
  color: #ddc38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  text-shadow: 0 2px 2px #000;
}

.scoreboardWindow .modalCloseButton {
  width: 2rem;
  height: 2rem;
  color: #d5c29c;
  background: linear-gradient(#352e22, #1d1b16);
  border: 1px solid #69583e;
  border-radius: 3px;
}

.scoreboardViewTabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.scoreboardViewTabs button {
  padding: 0.65rem 0.5rem;
  color: #a99878;
  background: linear-gradient(#1e1c16, #141210);
  border: 1px solid #54462f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.scoreboardViewTabs button:first-child {
  border-radius: 3px 0 0 3px;
}

.scoreboardViewTabs button:last-child {
  border-radius: 0 3px 3px 0;
}

.scoreboardViewTabs button.selected {
  color: #1a1206;
  background: linear-gradient(#e0c172, #c9a44e);
  border-color: #8e642e;
  box-shadow: inset 0 0 0 1px rgba(240, 214, 149, 0.5), 0 0 12px rgba(209, 166, 83, 0.3);
}

.scoreboardViewPanel {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.scoreboardViewPanel.hidden {
  display: none;
}

.scoreboardGeneralGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  min-height: 0;
  flex: 1;
}

.scoreboardPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(9, 10, 8, 0.5);
  border: 1px solid #51432f;
  border-radius: 3px;
  overflow: hidden;
}

.scoreboardPanel h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  color: #ddc38d;
  background: rgba(30, 27, 20, 0.9);
  border-bottom: 1px solid #51432f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scoreboardPanelIcon {
  font-size: 1rem;
}

.scoreboardRegionLabel {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #a98d60;
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
}

.scoreboardRegionLabel select {
  height: 1.6rem;
  padding: 0 0.4rem;
  color: #e1cca5;
  background: #211e17;
  border: 1px solid #715737;
  border-radius: 2px;
  font-size: 0.7rem;
}

.scoreboardPanel .scoreboardTableWrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: none;
  background: none;
}

.scoreboardTableWrap {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: auto;
  background: rgba(9, 10, 8, 0.7);
  border: 1px solid #51432f;
}

.scoreboardTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.scoreboardTable th,
.scoreboardTable td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(118, 93, 58, 0.42);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboardTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #bca372;
  background: #211e17;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.scoreboardTable th:first-child,
.scoreboardTable td:first-child {
  width: 14%;
  text-align: center;
}

.scoreboardTable th:nth-child(3),
.scoreboardTable td:nth-child(3) {
  width: 20%;
}

.scoreboardTable th:last-child,
.scoreboardTable td:last-child {
  text-align: right;
}

.scoreboardTable tbody tr:nth-child(odd) {
  background: rgba(202, 159, 87, 0.035);
}

.scoreboardRank {
  color: #e5be69;
  font-size: 0.85rem;
}

.scoreboardRankBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.scoreboardRankBadge1 {
  color: #3a2508;
  background: linear-gradient(135deg, #f5d76e, #c5991a);
  border: 2px solid #a07818;
  box-shadow: 0 0 6px rgba(245, 215, 110, 0.4);
}

.scoreboardRankBadge2 {
  color: #2a2a30;
  background: linear-gradient(135deg, #d4d4d8, #9a9aa0);
  border: 2px solid #7a7a80;
  box-shadow: 0 0 6px rgba(180, 180, 190, 0.3);
}

.scoreboardRankBadge3 {
  color: #3a1e08;
  background: linear-gradient(135deg, #cd8a52, #a06028);
  border: 2px solid #7a4818;
  box-shadow: 0 0 6px rgba(180, 120, 60, 0.3);
}

.scoreboardPoints {
  color: #e5be69;
  font-variant-numeric: tabular-nums;
}

.scoreboardTime {
  color: #8ed9ff;
  font-variant-numeric: tabular-nums;
}

.scoreboardRegionTable th:nth-child(4),
.scoreboardRegionTable td:nth-child(4) {
  width: 18%;
  text-align: right;
}

.scoreboardRegionTable th:last-child,
.scoreboardRegionTable td:last-child {
  width: 20%;
}

.scoreboardEmpty,
.scoreboardLoading {
  color: #99896e;
  font-size: 0.78rem;
  text-align: center !important;
}

.scoreboardEmpty {
  position: absolute;
  inset: 48% 0 auto;
  margin: 0;
}

.scoreboardLegend {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem 0.8rem;
  padding: 0.6rem 0.8rem;
  background: rgba(20, 18, 12, 0.8);
  border: 1px solid #51432f;
  border-radius: 3px;
}

.scoreboardLegendBadge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
}

.scoreboardLegendBadgeIcon {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.85;
}

.scoreboardLegendBadgeRank {
  position: absolute;
  bottom: 0.15rem;
  left: 50%;
  transform: translateX(-50%);
  color: #ddc38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
}

.scoreboardLegendBody h4 {
  margin: 0 0 0.25rem;
  color: #ddc38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scoreboardLegendRules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
}

.scoreboardLegendDiff {
  font-weight: 700;
  margin-right: 0.25rem;
}

.scoreboardLegendNormal {
  color: #d5c29c;
}

.scoreboardLegendHard {
  color: #f0a040;
}

.scoreboardLegendAscended {
  color: #d8a0ff;
}

.scoreboardLegendFormulas {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  color: #b8a580;
}

.scoreboardLegendFormulas p {
  margin: 0;
}

.scoreboardFormulaDiamond {
  color: #c9a44e;
  margin-right: 0.2rem;
}

.scoreboardRegionControls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 0.8rem;
  padding: 0.55rem 0.65rem;
  background: rgba(20, 18, 12, 0.7);
  border: 1px solid #51432f;
  border-radius: 3px;
}

.scoreboardRegionControlRegion {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: #1a1812;
  border: 1px solid #51432f;
  border-radius: 3px;
  cursor: pointer;
}

.scoreboardRegionControlIcon {
  font-size: 0.9rem;
}

.scoreboardRegionControlRegion select {
  height: 1.6rem;
  padding: 0 0.3rem;
  color: #e1cca5;
  background: transparent;
  border: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  cursor: pointer;
}

.scoreboardRegionControlGroup {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.scoreboardRegionControlLabel {
  color: #a98d60;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scoreboardFilterButtons {
  display: flex;
  gap: 0.2rem;
}

.scoreboardFilterButtons button {
  padding: 0.38rem 0.6rem;
  color: #a99878;
  background: linear-gradient(#2a271f, #191813);
  border: 1px solid #54462f;
  border-radius: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  cursor: pointer;
  white-space: nowrap;
}

.scoreboardFilterButtons button.selected {
  color: #1a1206;
  background: linear-gradient(#e0c172, #c9a44e);
  border-color: #8e642e;
  box-shadow: inset 0 0 0 1px rgba(240, 214, 149, 0.4);
}

.scoreboardRegionContent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.5rem;
  gap: 0.6rem;
  flex: 1;
  min-height: 0;
}

.scoreboardRegionTableWrap {
  min-height: 0;
}

.scoreboardScoringAside {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem;
  background: rgba(9, 10, 8, 0.7);
  border: 1px solid #51432f;
  border-radius: 3px;
}

.scoreboardScoringIcon {
  margin-right: 0.25rem;
}

.scoreboardScoringAside h4 {
  margin: 0;
  color: #ddc38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.scoreboardScoringRules {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scoreboardScoringRule {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
}

.scoreboardScoringRuleDiff {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.scoreboardScoringRule strong {
  display: block;
  margin-bottom: 0.1rem;
}

.scoreboardScoringDivider {
  margin: 0.2rem 0;
  border: none;
  border-top: 1px dashed rgba(118, 93, 58, 0.5);
}

.scoreboardScoringNote {
  margin: 0;
  color: #b8a580;
  font-size: 0.68rem;
  line-height: 1.4;
}

.inventoryWindow,
.relicActionWindow {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 0.42rem;
  width: min(900px, calc(100vw - 0.8rem));
  height: min(660px, calc(100dvh - 0.8rem));
  padding: 0.68rem;
  color: #d8c199;
  background:
    linear-gradient(135deg, rgba(225, 176, 91, 0.08), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    #14120e;
  border: 2px solid #674d2c;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #090806, inset 0 0 42px rgba(0, 0, 0, 0.7), 0 22px 70px rgba(0, 0, 0, 0.72);
}

.relicActionWindow {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(460px, calc(100vw - 1rem));
  height: auto;
  min-height: 220px;
}

.shopWindow {
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(980px, calc(100vw - 0.8rem));
}

.inventoryWindow > header,
.relicActionWindow > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.34rem;
  border-bottom: 1px solid rgba(166, 124, 66, 0.45);
}

.inventoryWindow h2,
.relicActionWindow h2 {
  margin: 0;
  color: #e3c17a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  text-shadow: 0 2px 2px #000;
}

.inventoryWindow header small {
  color: #a98a55;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.inventoryBalances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  color: #a89470;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
}

.inventoryBalances span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.22rem 0.42rem;
  background: rgba(8, 9, 7, 0.72);
  border: 1px solid rgba(126, 96, 52, 0.55);
}

.inventoryBalances img {
  width: 0.9rem;
  height: 0.9rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.inventoryBalances b {
  color: #7ad8ff;
}

.inventoryTabs,
.inventoryFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.inventoryFilters button,
.inventoryCard button,
.relicActionFooter button {
  color: #3b2814;
  background: #d5b97f;
  border: 1px solid #7b542b;
  box-shadow: inset 0 0 0 1px #ead6a2, 0 2px 5px rgba(0, 0, 0, 0.35);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.inventoryFilters button {
  padding: 0.2rem 0.42rem;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.inventoryFilters button.selected {
  color: #fff5c8;
  background: linear-gradient(#68461f, #2b1c0f);
  border-color: #d5a24e;
}

.inventoryTabs button {
  padding: 0.24rem 0.56rem;
  color: #d9c18c;
  background: linear-gradient(#2b2118, #120e0a);
  border: 1px solid #7a5a31;
  box-shadow: inset 0 0 0 1px rgba(218, 174, 86, 0.18), 0 2px 5px rgba(0, 0, 0, 0.38);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inventoryTabs button.selected {
  color: #3b2814;
  background: linear-gradient(#ecd08a, #a9762d);
  border-color: #f0d184;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 190, 0.5), 0 0 10px rgba(216, 160, 67, 0.28);
}

.inventoryContent {
  min-height: 0;
  overflow: auto;
  padding-right: 0.18rem;
}

@media (max-width: 860px) {
  .relicShopGrid {
    grid-template-columns: 1fr;
  }

  .relicShopFooter {
    grid-template-columns: 1fr auto;
  }

  .relicShopCost {
    grid-column: 1 / 2;
  }
}

.inventoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.55rem;
}

.relicShopGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.5rem;
  align-items: stretch;
  padding: 0.48rem 0.04rem 0.04rem;
}

.relicShopCard {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(1.8rem, auto) auto;
  gap: 0.1rem;
  min-height: 116px;
  padding: 0.36rem 0.42rem 0.4rem;
  color: #cbb68c;
  background:
    linear-gradient(135deg, rgba(230, 174, 70, 0.08), transparent 26%, transparent 72%, rgba(214, 151, 45, 0.06)),
    radial-gradient(circle at 50% 0%, rgba(123, 76, 22, 0.28), transparent 52%),
    linear-gradient(180deg, #17110a, #090806);
  border: 2px solid #7d5724;
  box-shadow:
    inset 0 0 0 2px rgba(12, 8, 4, 0.88),
    inset 0 0 28px rgba(0, 0, 0, 0.65),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

.relicShopIconFrame {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  grid-row: 1 / span 2;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.relicShopIconFrame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.8));
}

.relicShopTop {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.34rem;
  row-gap: 0.05rem;
  min-width: 0;
}

.relicShopTop h3 {
  margin: 0;
  color: #f1d58b;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.72rem, 1.05vw, 0.92rem);
  line-height: 1.02;
  text-shadow: 0 2px 2px #000, 0 0 10px rgba(255, 191, 86, 0.24);
}

.relicShopMeta {
  margin: 0;
  color: #b88232;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.53rem;
  font-weight: 700;
}

.relicShopMeta span {
  color: #7c5525;
  padding: 0 0.18rem;
}

.relicCategoryBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.22rem;
  padding: 0.04rem 0.28rem !important;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(10, 7, 4, 0.72);
  font-size: 0.52rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.58), 0 1px 3px rgba(0, 0, 0, 0.65);
}

.relicCategory-offensive {
  color: #ff6a54 !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 78, 52, 0.45);
}

.relicCategory-defensive {
  color: #76bfff !important;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(78, 160, 255, 0.42);
}

.relicCategory-utility {
  color: #f2ead8 !important;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 240, 206, 0.35);
}

.relicCategorySymbol {
  display: inline-block;
  width: 0.74rem;
  height: 0.74rem;
  margin-left: 0.34rem;
  vertical-align: 0.14rem;
  filter: drop-shadow(0 1px 2px #000);
}

.relicCategorySymbol-offensive {
  width: 0.62rem;
  height: 0.62rem;
  transform: rotate(45deg);
  border: 1px solid #ffb08c;
  background:
    linear-gradient(135deg, #ff412b, #741004 62%, #260201);
  box-shadow: 0 0 8px rgba(255, 72, 42, 0.65), inset 0 0 5px rgba(255, 199, 130, 0.35);
}

.relicCategorySymbol-defensive {
  clip-path: polygon(50% 3%, 91% 15%, 84% 66%, 50% 98%, 16% 66%, 9% 15%);
  border: 1px solid #b5e0ff;
  background:
    linear-gradient(135deg, #b8e9ff, #3b91db 48%, #0b2a6a);
  box-shadow: 0 0 8px rgba(84, 170, 255, 0.65), inset 0 0 6px rgba(255, 255, 255, 0.34);
}

.relicCategorySymbol-utility {
  border-radius: 50%;
  border: 1px solid #fff8e7;
  background:
    radial-gradient(circle at 35% 32%, #ffffff 0 12%, #e9e1cf 18%, #8d8678 64%, #292724);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.48), inset 0 0 5px rgba(255, 255, 255, 0.42);
}

.relicShopMeta .relicTierBasic,
.relicTooltipHeader .relicTierBasic {
  color: #c79143;
  padding: 0;
}

.relicShopMeta .relicTierHigh,
.relicTooltipHeader .relicTierHigh {
  color: #a7d7e8;
  padding: 0;
  text-shadow:
    0 1px 2px #000,
    0 0 6px rgba(167, 215, 232, 0.72),
    0 0 12px rgba(110, 202, 238, 0.35);
}

.relicKeywordBurn {
  color: #ff594b;
  font-weight: 800;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 61, 43, 0.45);
}

.relicKeywordFrozen {
  color: #8dd8ff;
  font-weight: 800;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(82, 190, 255, 0.45);
}

.relicKeywordRoot {
  color: #ffd56b;
  font-weight: 800;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 196, 58, 0.42);
}

.relicKeywordPoison {
  color: #2f8f45;
  font-weight: 800;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(30, 120, 52, 0.5);
}

.relicKeywordSlow {
  color: #a7d7e8;
  font-weight: 800;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(120, 205, 235, 0.45);
}

.relicShopDivider,
.relicTooltipDivider {
  height: 1px;
  margin: 0.1rem 0;
  background:
    linear-gradient(90deg, transparent, rgba(121, 78, 29, 0.78), transparent);
}

.relicTooltipDivider::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: -3px auto 0;
  border: 1px solid #7d5522;
  transform: rotate(45deg);
  background: #160f08;
}

.relicShopDividerSmall {
  margin-top: 0.2rem;
}

.relicShopDescription {
  margin: 0.02rem 0 0.04rem;
  color: #c9b693;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.57rem;
  line-height: 1.12;
}

.relicShopFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.16rem;
}

.relicShopInfo,
.relicShopCost {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  margin: 0;
  color: #bca77f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.52rem;
  font-weight: 700;
}

.relicShopHourglass {
  color: #e8c66e;
  font-size: 0.7rem;
  filter: drop-shadow(0 1px 2px #000);
}

.relicShopCost img {
  width: 0.72rem;
  height: 0.72rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.82));
}

.relicShopCost {
  justify-self: end;
  white-space: nowrap;
}

.relicShopBuyButton {
  width: 56px;
  margin-top: 0;
  padding: 0.16rem 0.32rem;
  justify-self: end;
  color: #3b2107;
  background: linear-gradient(#f1d58a, #b88435);
  border: 2px solid #77511f;
  border-radius: 0.28rem;
  box-shadow:
    inset 0 0 0 2px rgba(255, 241, 185, 0.46),
    0 3px 9px rgba(0, 0, 0, 0.48);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.relicShopBuyButton:hover,
.relicShopBuyButton:focus-visible {
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 2px rgba(255, 245, 190, 0.62),
    0 0 14px rgba(235, 182, 72, 0.32);
}

.shopWindow {
  width: min(1260px, calc(100vw - 0.8rem));
  max-height: min(760px, calc(100vh - 0.9rem));
}

.shopContent {
  overflow-x: hidden;
}

.relicShopFilters {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.66fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 0.42rem;
  margin: 0.02rem 0 0.58rem;
  padding: 0.3rem 0.44rem;
  background:
    linear-gradient(135deg, rgba(218, 164, 72, 0.08), transparent 38%),
    rgba(9, 7, 5, 0.78);
  border: 1px solid rgba(127, 87, 39, 0.75);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.62),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

.relicShopFilterGroup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}

.relicShopFilterGroup > span {
  color: #9f7841;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.relicShopFilterGroup > div {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.24rem;
  min-width: 0;
}

.relicShopFilterGroup button {
  min-width: 0;
  height: 1.3rem;
  padding: 0 0.52rem;
  color: #d2ba89;
  background: linear-gradient(#1b140d, #090705);
  border: 1px solid rgba(112, 76, 34, 0.9);
  box-shadow: inset 0 0 0 1px rgba(231, 181, 88, 0.08), 0 2px 5px rgba(0, 0, 0, 0.38);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.relicShopFilterGroup-category button[data-shop-relic-filter="offensive"] {
  color: #ff654d;
  border-color: rgba(255, 101, 77, 0.74);
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 73, 45, 0.42);
}

.relicShopFilterGroup-category button[data-shop-relic-filter="defensive"] {
  color: #73bcff;
  border-color: rgba(115, 188, 255, 0.74);
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(84, 171, 255, 0.42);
}

.relicShopFilterGroup-category button[data-shop-relic-filter="utility"] {
  color: #f8f3e7;
  border-color: rgba(248, 243, 231, 0.7);
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 244, 218, 0.35);
}

.relicShopFilterGroup-tier button[data-shop-relic-filter="basic"] {
  color: #d0a563;
  border-color: rgba(208, 165, 99, 0.74);
}

.relicShopFilterGroup-tier button[data-shop-relic-filter="high"] {
  color: #9ce8ff;
  border-color: rgba(156, 232, 255, 0.74);
  text-shadow:
    0 1px 2px #000,
    0 0 7px rgba(156, 232, 255, 0.76),
    0 0 13px rgba(89, 199, 255, 0.38);
}

.relicShopFilterGroup button.selected {
  color: #3a260e;
  background: linear-gradient(#f0d080, #b87e2e);
  border-color: #f0d184;
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 196, 0.48),
    0 0 11px rgba(226, 172, 65, 0.26);
}

.relicShopFilterGroup-category button[data-shop-relic-filter="offensive"].selected {
  color: #fff1e8;
  background: linear-gradient(#743027, #24100c);
  border-color: #ff654d;
  box-shadow: inset 0 0 0 1px rgba(255, 183, 150, 0.32), 0 0 12px rgba(255, 73, 45, 0.34);
}

.relicShopFilterGroup-category button[data-shop-relic-filter="defensive"].selected {
  color: #eff9ff;
  background: linear-gradient(#244b70, #081622);
  border-color: #73bcff;
  box-shadow: inset 0 0 0 1px rgba(185, 224, 255, 0.34), 0 0 12px rgba(84, 171, 255, 0.34);
}

.relicShopFilterGroup-category button[data-shop-relic-filter="utility"].selected {
  color: #fffdf7;
  background: linear-gradient(#625d50, #161410);
  border-color: #f8f3e7;
  box-shadow: inset 0 0 0 1px rgba(255, 252, 237, 0.34), 0 0 12px rgba(255, 244, 218, 0.25);
}

.relicShopFilterGroup-tier button[data-shop-relic-filter="basic"].selected {
  color: #fff2d1;
  background: linear-gradient(#5d421d, #171008);
  border-color: #d0a563;
}

.relicShopFilterGroup-tier button[data-shop-relic-filter="high"].selected {
  color: #f1fcff;
  background: linear-gradient(#24647a, #071b24);
  border-color: #9ce8ff;
  box-shadow: inset 0 0 0 1px rgba(197, 243, 255, 0.36), 0 0 12px rgba(89, 199, 255, 0.35);
}

.relicShopFilterGroup-boss {
  justify-self: stretch;
}

.relicShopGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.68rem;
  align-items: stretch;
  padding: 0.08rem 0.04rem 0.14rem;
}

.relicShopCard {
  min-height: 204px;
  grid-template-rows: auto 76px auto minmax(2.85rem, 1fr) auto;
  justify-items: center;
  gap: 0.26rem;
  padding: 0.32rem 0.52rem 0.42rem;
  border: 1px solid #755223;
  background:
    radial-gradient(circle at 50% 0%, rgba(134, 87, 28, 0.24), transparent 45%),
    linear-gradient(180deg, #1a130c, #0a0806);
  box-shadow:
    inset 0 0 0 1px rgba(8, 5, 2, 0.92),
    inset 0 0 22px rgba(0, 0, 0, 0.66),
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.relicShopDuration {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  margin: 0;
  color: #c9b992;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.55rem;
  font-weight: 800;
}

.relicShopCardIcon {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.82));
}

.relicShopCardTitle {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.relicShopCardTitle h3 {
  margin: 0 0 0.24rem;
  color: #f0d68e;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.05;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(255, 193, 88, 0.22);
}

.relicShopBadgeRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.24rem;
}

.relicShopTypeBadge,
.relicShopTierBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0.72rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid currentColor;
  background: rgba(9, 7, 5, 0.72);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.47rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.52);
}

.relicShopType-offensive {
  color: #ff654d;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 73, 45, 0.42);
}

.relicShopType-defensive {
  color: #73bcff;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(84, 171, 255, 0.42);
}

.relicShopType-utility {
  color: #f8f3e7;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255, 244, 218, 0.35);
}

.relicShopTierBadge.relicTierBasic {
  color: #d0a563;
}

.relicShopTierBadge.relicTierHigh {
  color: #9ce8ff;
  text-shadow:
    0 1px 2px #000,
    0 0 7px rgba(156, 232, 255, 0.76),
    0 0 13px rgba(89, 199, 255, 0.38);
}

.relicShopDescription {
  display: -webkit-box;
  width: 100%;
  margin: 0.2rem 0 0;
  overflow: hidden;
  color: #cbb996;
  font-size: 0.6rem;
  line-height: 1.24;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.relicShopFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  gap: 0.34rem;
  align-items: center;
  margin-top: 0.02rem;
}

.relicShopCost {
  justify-self: start;
  gap: 0.15rem;
  color: #e1c078;
  font-size: 0.62rem;
  font-weight: 800;
}

.relicShopBuyButton {
  width: 54px;
  min-height: 1.34rem;
  padding: 0.12rem 0.24rem;
  border-width: 1px;
  border-radius: 0.18rem;
  font-size: 0.58rem;
}

@media (max-width: 1100px) {
  .relicShopGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .relicShopFilters {
    grid-template-columns: 1fr;
  }

  .relicShopFilterGroup > div {
    flex-wrap: wrap;
  }

  .relicShopGrid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.inventorySlotGrid {
  --inventory-slot-size: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--inventory-slot-size), var(--inventory-slot-size)));
  grid-auto-rows: var(--inventory-slot-size);
  justify-content: start;
  align-content: start;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  min-height: 100%;
  padding: 0.45rem;
  background:
    linear-gradient(135deg, rgba(217, 164, 75, 0.06), transparent 45%),
    #1a1712;
  border: 2px solid #4d3a25;
  box-shadow:
    inset 0 0 0 1px #0c0906,
    inset 0 0 36px rgba(0, 0, 0, 0.62);
}

.inventorySlot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--inventory-slot-size);
  height: var(--inventory-slot-size);
  padding: 0;
  color: #d8c199;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 224, 160, 0.035), transparent 54%),
    linear-gradient(145deg, #27231d, #16130f);
  border: 2px solid #3b3328;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 10px rgba(0, 0, 0, 0.6);
}

.inventorySlot:hover {
  z-index: 80;
}

.inventorySlot:not(.empty) {
  cursor: pointer;
}

.inventorySlot:not(.empty):hover {
  border-color: #b98a42;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 12px rgba(217, 166, 79, 0.16),
    0 0 12px rgba(211, 158, 65, 0.22);
}

.inventorySlot.empty {
  opacity: 0.78;
}

.inventorySlot .chestIcon,
.inventorySlot .relicImageFrame {
  width: 48px;
  height: 48px;
}

.inventorySlot.relicUpgraded .relicImageFrame {
  box-shadow:
    0 0 5px rgba(255, 215, 100, 0.5),
    0 0 12px rgba(255, 195, 60, 0.28);
  border-radius: 3px;
}

.inventorySlot.fragmentSlot > img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.inventorySlot .relicImageFrame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inventorySlot .equippedRelicBadge {
  right: -0.4rem;
  bottom: -0.34rem;
}

.inventoryStackCount {
  position: absolute;
  right: 0.18rem;
  bottom: 0.12rem;
  min-width: 1.15rem;
  padding: 0.08rem 0.18rem;
  color: #f7e8bd;
  background: rgba(5, 5, 4, 0.82);
  border: 1px solid rgba(213, 172, 92, 0.72);
  border-radius: 2px;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.chestSlot .chestStackCount {
  right: auto;
  left: 0.12rem;
  bottom: 0.1rem;
}

.inventoryItemTooltip {
  position: fixed;
  z-index: 30000;
  display: grid;
  gap: 0.18rem;
  max-width: 280px;
  padding: 0.48rem 0.55rem;
  color: #d9c39b;
  background:
    linear-gradient(180deg, rgba(49, 34, 18, 0.98), rgba(13, 10, 7, 0.98));
  border: 1px solid #bb8847;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  line-height: 1.25;
  pointer-events: none;
}

.inventoryItemTooltip strong {
  color: #f3d48c;
  font-size: 0.78rem;
}

.inventoryItemTooltip span {
  color: #c8b590;
}

.inventoryItemTooltip.relicItemTooltip {
  gap: 0.18rem;
  max-width: 355px;
  min-width: 300px;
  padding: 0.55rem 0.64rem 0.62rem;
  color: #cbb68c;
  background:
    linear-gradient(135deg, rgba(214, 158, 56, 0.08), transparent 32%, transparent 70%, rgba(214, 158, 56, 0.06)),
    radial-gradient(circle at 50% 0%, rgba(117, 76, 28, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(29, 20, 10, 0.99), rgba(8, 7, 5, 0.99));
  border: 2px solid #8e6126;
  box-shadow:
    inset 0 0 0 2px rgba(4, 3, 2, 0.86),
    inset 0 0 22px rgba(0, 0, 0, 0.72),
    0 12px 28px rgba(0, 0, 0, 0.72);
}

.relicTooltipHeader {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0.52rem;
  align-items: center;
}

.relicTooltipIconFrame {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background:
    radial-gradient(circle at 50% 42%, rgba(237, 178, 63, 0.14), transparent 58%),
    linear-gradient(#211609, #080604);
  border: 2px solid #9c6d28;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.78);
}

.relicTooltipIconFrame img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.85));
}

.relicItemTooltip .relicTooltipHeader strong {
  display: block;
  color: #f1d58b;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.05;
  text-shadow: 0 2px 2px #000;
}

.relicTooltipHeader em {
  display: block;
  margin-top: 0.14rem;
  color: #b88232;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}

.relicTooltipHeader em b {
  color: #7c5525;
  font-weight: 900;
}

.relicItemTooltip p {
  margin: 0;
  color: #cab895;
  font-size: 0.68rem;
  line-height: 1.2;
}

.relicTooltipUpgrade {
  padding-top: 0.1rem;
}

.relicTooltipUpgrade.relicTooltipUpgradeActive {
  color: #f0cf83 !important;
}

.relicTooltipUpgrade:not(.relicTooltipUpgradeActive) {
  color: #6b6560 !important;
}

.relicTooltipStatus {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.12rem !important;
  padding-top: 0.18rem;
  color: #bda680 !important;
  border-top: 1px solid rgba(121, 78, 29, 0.48);
  font-size: 0.64rem !important;
}

.inventoryCard {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.62rem;
  background: rgba(13, 13, 10, 0.82);
  border: 1px solid rgba(144, 104, 52, 0.62);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45);
}

.relicCard {
  position: relative;
}

.relicCard.equipped {
  border-color: #ffd978;
  box-shadow:
    inset 0 0 0 2px rgba(255, 229, 142, 0.65),
    inset 0 0 20px rgba(255, 190, 74, 0.12),
    0 0 18px rgba(229, 175, 67, 0.32);
}

.relicCardUpgradeText {
  margin: 0.18rem 0 0;
  font-size: 0.66rem;
  line-height: 1.25;
  color: #6b6560;
}

.relicCardUpgradeText.relicCardUpgradeActive {
  color: #f0cf83;
}

.relicUpgradeRune {
  min-width: 84px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 210, 112, 0.86);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(103, 65, 23, 0.96), rgba(36, 23, 12, 0.98));
  color: #ffd981;
  font-family: Georgia, serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 0 8px rgba(255, 198, 82, 0.2), 0 0 8px rgba(255, 174, 38, 0.16);
  cursor: pointer;
}

.relicUpgradeRune:hover,
.relicUpgradeRune:focus-visible {
  color: #fff3bf;
  border-color: #fff0a3;
  box-shadow: inset 0 0 10px rgba(255, 222, 123, 0.28), 0 0 12px rgba(255, 190, 61, 0.34);
}

.relicImageFrame {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
}

.relicUpgraded .relicImageFrame {
  box-shadow:
    0 0 6px rgba(255, 215, 100, 0.45),
    0 0 14px rgba(255, 195, 60, 0.25),
    inset 0 0 6px rgba(255, 210, 90, 0.18);
  border-radius: 4px;
}

.relicImageFrame img {
  width: 100%;
  height: 100%;
}

.equippedRelicBadge {
  position: absolute;
  right: -0.18rem;
  bottom: -0.18rem;
  padding: 0.08rem 0.18rem;
  color: #241607;
  background: #ffd978;
  border: 1px solid #7a4e18;
  border-radius: 2px;
  font-size: 0.42rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.relicContextMenu {
  position: fixed;
  z-index: 10000;
  min-width: 7.5rem;
  padding: 0.25rem;
  background: rgba(16, 13, 8, 0.96);
  border: 1px solid #d4a64e;
  box-shadow: inset 0 0 0 1px #392713, 0 10px 28px rgba(0, 0, 0, 0.62);
}

.relicContextMenu button {
  width: 100%;
  padding: 0.42rem 0.55rem;
  color: #f0d394;
  background: linear-gradient(#342414, #17100a);
  border: 1px solid #785529;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  text-align: left;
}

.relicContextMenu button:hover {
  color: #fff2bf;
  border-color: #e0b55d;
  box-shadow: 0 0 10px rgba(224, 181, 93, 0.26);
}

.relicSlotMiniMenu {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 8;
  display: grid;
  gap: 0.3rem;
  width: 7.75rem;
  padding: 0.5rem 0.46rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 78, 35, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(47, 30, 16, 0.98), rgba(17, 12, 8, 0.98)),
    #16100b;
  border: 2px solid #8f672d;
  box-shadow:
    inset 0 0 0 1px rgba(238, 190, 95, 0.18),
    inset 0 0 18px rgba(0, 0, 0, 0.62),
    0 12px 24px rgba(0, 0, 0, 0.58);
}

.relicSlotMenuRow {
  display: grid;
  grid-template-columns: minmax(0, 4.35rem) 2.55rem;
  align-items: center;
  gap: 0.18rem;
  min-height: 2.45rem;
  padding: 0.08rem 0;
}

.relicSlotMenuRow > span {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-align: left;
  pointer-events: none;
  -webkit-text-stroke: 0.16px rgba(5, 4, 3, 0.82);
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 0 3px rgba(0, 0, 0, 0.65);
}

.relicSlotMenuRow > button {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.4rem;
  overflow: hidden;
  color: #10100e;
  background: linear-gradient(#565049, #2e2a25);
  border: 1px solid rgba(219, 172, 79, 0.35);
  border-radius: 0.45rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.52);
  cursor: pointer;
}

.relicSlotMenuRow > button.hasRelic {
  position: relative;
  overflow: hidden;
  width: 2.55rem;
  height: 2.4rem;
  align-self: center;
  transform: none;
  background: linear-gradient(#332920, #14100c);
  border-color: rgba(241, 190, 18, 0.72);
  border-radius: 0.45rem;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.44),
    0 0 8px rgba(241, 190, 18, 0.3);
}

.relicSlotMiniMenu span {
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.relicSlotLabel-offensive {
  color: #ff5d48;
}

.relicSlotLabel-defensive {
  color: #61a7ff;
}

.relicSlotLabel-utility {
  color: #f4f1e6;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.55);
}

.relicSlotMenuRow > button:hover {
  border-color: #f1be12;
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.24),
    0 0 8px rgba(241, 190, 18, 0.45);
}

.relicSlotMiniMenu img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}

.relicSlotMiniMenu .relicSlotMenuRow > button.hasRelic img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.inventoryCard footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.inventoryCard img,
.chestIcon {
  width: 54px;
  height: 54px;
  object-fit: cover;
  background:
    radial-gradient(circle at 50% 36%, rgba(97, 209, 255, 0.28), transparent 34%),
    linear-gradient(#332312, #100c07);
  border: 1px solid #8b6738;
  box-shadow: inset 0 0 0 1px #1b1208;
}

.chestIcon {
  position: relative;
  overflow: visible;
  background: transparent;
  border-color: #6e4a23;
}

.chestIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.chestIcon::before,
.chestIcon::after {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}

.chestIcon::before {
  content: attr(data-boss-glyph);
  right: -0.2rem;
  top: -0.16rem;
  color: #fff2c8;
  background: #2b1910;
  border: 1px solid #d0a35a;
}

.chestIcon::after {
  content: "";
  right: -0.2rem;
  bottom: -0.12rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.chestIcon-normal::after {
  background: #2f8d42;
}

.chestIcon-hard::after {
  background: #9c342b;
}

.chestIcon-ascended::after {
  background: #6b3cc0;
}

.inventoryCard small {
  color: #b49258;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.inventoryCard strong {
  display: block;
  color: #e5c989;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.96rem;
}

.inventoryCard p,
.inventoryCard li,
.inventoryCard em {
  margin: 0.16rem 0 0;
  color: #bfb096;
  font-size: 0.72rem;
  line-height: 1.25;
}

.inventoryCard ul {
  margin: 0.3rem 0 0;
  padding-left: 1rem;
}

.inventoryEmpty {
  margin: 0;
  padding: 1rem;
  color: #a99878;
  text-align: center;
}

.relicLoadoutSlots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.loadoutSlot.selected {
  border-color: #e0ba62;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 139, 0.24), 0 0 16px rgba(211, 159, 61, 0.25);
}

.relicSelectionPanel {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(126, 96, 52, 0.55);
}

.relicSelectionPanel h3 {
  margin: 0 0 0.45rem;
  color: #d5b876;
  font-size: 0.95rem;
}

.relicChoice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-bottom: 0.35rem;
  padding: 0.35rem;
  color: #d9c5a0;
  background: rgba(16, 14, 10, 0.84);
  border: 1px solid rgba(119, 89, 48, 0.6);
  text-align: left;
}

.relicChoice img {
  width: 38px;
  height: 38px;
}

.relicChoice.selected {
  border-color: #e3bb60;
  box-shadow: 0 0 12px rgba(224, 174, 72, 0.28);
}

.relicActionBody {
  display: grid;
  gap: 0.45rem;
  overflow: auto;
}

.relicActionBody article {
  padding: 0.5rem;
  background: rgba(7, 8, 6, 0.72);
  border: 1px solid rgba(126, 96, 52, 0.5);
}

.relicActionBody p {
  margin: 0.12rem 0;
  color: #dfc795;
}

.relicActionFooter {
  display: flex;
  justify-content: flex-end;
}

.relicLoadoutButton {
  position: absolute;
  right: 0.42rem;
  bottom: 2.86rem;
  z-index: 7;
  padding: 0.34rem 0.58rem;
  color: #3b2814;
  background: #d5b97f;
  border: 1px solid #7b542b;
  box-shadow: inset 0 0 0 1px #ead6a2, 0 2px 5px rgba(0, 0, 0, 0.35);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.bossGuideWindow {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.42rem;
  width: min(1060px, calc(100vw - 1rem));
  height: min(690px, calc(100dvh - 1rem));
  padding: 1.05rem 1.25rem 1.05rem;
  color: #3c2612;
  border: 3px solid #5c3518;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 104%, rgba(46, 20, 7, 0.52), transparent 42%),
    linear-gradient(90deg, rgba(31, 13, 5, 0.7), transparent 4%, transparent 96%, rgba(31, 13, 5, 0.72)),
    linear-gradient(180deg, rgba(255, 232, 160, 0.2), transparent 13%, transparent 87%, rgba(72, 31, 9, 0.22)),
    #5a3217;
  box-shadow:
    inset 0 0 0 1px rgba(255, 216, 135, 0.38),
    inset 0 0 22px rgba(25, 10, 3, 0.62),
    0 24px 72px rgba(0, 0, 0, 0.72);
  isolation: isolate;
}

.bossGuideWindow::before {
  content: "";
  position: absolute;
  inset: 0.42rem;
  z-index: 0;
  border: 1px solid rgba(74, 39, 15, 0.45);
  border-radius: 7px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 250, 207, 0.64), transparent 17%),
    radial-gradient(circle at 92% 14%, rgba(255, 236, 176, 0.34), transparent 18%),
    radial-gradient(circle at 15% 92%, rgba(91, 42, 14, 0.16), transparent 22%),
    radial-gradient(circle at 82% 88%, rgba(84, 39, 13, 0.14), transparent 20%),
    linear-gradient(90deg,
      #d3a969 0%,
      #f2d99d 7%,
      #e9c985 45%,
      #9a6938 49.1%,
      #5a3318 50%,
      #a06d3a 50.9%,
      #edd08f 55%,
      #f0d899 94%,
      #c99555 100%
    );
  box-shadow:
    inset 0 0 0 2px rgba(255, 235, 170, 0.22),
    inset 0 0 46px rgba(93, 48, 19, 0.24);
  pointer-events: none;
}

.bossGuideWindow::after {
  content: "";
  position: absolute;
  top: 0.62rem;
  bottom: 0.62rem;
  left: 50%;
  z-index: 0;
  width: 28px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(36, 15, 6, 0.34), transparent 58%),
    linear-gradient(90deg, transparent, rgba(45, 20, 8, 0.3), transparent);
  filter: blur(0.2px);
  pointer-events: none;
}

.bossGuideWindow > header,
.bossGuideControls,
.bossGuideContent {
  position: relative;
  z-index: 1;
}

.bossGuideWindow > header,
.bossGuideControls {
  z-index: 2;
}

.bossGuideWindow > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.2rem;
  padding: 0.1rem 1.4rem 0.18rem 1.65rem;
  border-bottom: 0;
}

.bossGuideWindow header small {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #7b5730;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bossGuideWindow header small::before,
.bossGuideWindow header small::after {
  content: "";
  width: 1.7rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109, 70, 31, 0.72), transparent);
}

.bossGuideWindow h2 {
  margin: 0;
  color: #3b2310;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 239, 181, 0.72), 0 2px 4px rgba(76, 38, 10, 0.28);
}

.bossGuideWindow .modalCloseButton {
  width: 2.25rem;
  height: 2.25rem;
  color: #4b2d14;
  background: linear-gradient(#d7b277, #a66f35);
  border: 1px solid #70451f;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 238, 180, 0.62), 0 2px 6px rgba(65, 31, 10, 0.3);
  font-size: 1.35rem;
}

.bossGuideControls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.82rem;
  width: calc(50% - 1.65rem);
  padding: 0 0.5rem 0.05rem 1.15rem;
}

.bossGuideControls label {
  position: relative;
  display: grid;
  gap: 0.18rem;
  color: #754f24;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bossGuideControls label::after {
  content: "";
  position: absolute;
  right: 0.58rem;
  bottom: 0.52rem;
  width: 0;
  height: 0;
  border-left: 0.28rem solid transparent;
  border-right: 0.28rem solid transparent;
  border-top: 0.36rem solid #d9ad5f;
  filter: drop-shadow(0 1px 1px rgba(28, 14, 5, 0.75));
  pointer-events: none;
}

.bossGuideControls select {
  appearance: none;
  -webkit-appearance: none;
  height: 1.75rem;
  padding: 0 1.55rem 0 0.65rem;
  color: #f4dfae;
  background: linear-gradient(#3f2815, #211307);
  border: 1px solid #815424;
  border-radius: 4px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
}

.bossGuideContent {
  display: block;
  column-count: 2;
  column-gap: 3.3rem;
  column-fill: auto;
  min-height: 0;
  margin-top: -2rem;
  overflow: hidden;
  height: calc(100% + 2rem);
  padding: 0 1.15rem 0.1rem;
}

.bossGuideIntro {
  display: inline-grid;
  grid-template-columns: 6.1rem minmax(0, 1fr);
  gap: 0.82rem;
  align-items: start;
  width: 100%;
  min-height: 0;
  margin-top: 2rem;
  margin-bottom: 0.46rem;
  padding: 0.48rem;
  break-inside: avoid;
  page-break-inside: avoid;
  border: 1px solid rgba(104, 65, 28, 0.5);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(78, 47, 19, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(255, 239, 183, 0.28), rgba(108, 61, 24, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 165, 0.16),
    0 1px 2px rgba(94, 47, 15, 0.18);
}

.bossGuideBossPortrait {
  width: 5.85rem;
  height: 5.85rem;
  align-self: center;
  object-fit: cover;
  border: 2px solid #6b3c17;
  border-radius: 3px;
  background: #130d08;
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 122, 0.32),
    0 3px 8px rgba(55, 31, 12, 0.34);
}

.bossGuideIntro small {
  color: #7a5122;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bossGuideIntro h3 {
  margin: 0.06rem 0 0.16rem;
  color: #3d260f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.24rem;
  line-height: 1.05;
}

.bossGuideIntro p {
  margin: 0;
  color: #5d3b18;
  font-size: 0.68rem;
  line-height: 1.2;
}

.bossGuideTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.52rem;
}

.bossGuideTags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.16rem;
  padding: 0.14rem 0.42rem;
  color: #5a3513;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.57rem;
  font-weight: 800;
  border: 1px solid rgba(117, 75, 31, 0.34);
  border-radius: 3px;
  background: linear-gradient(#e9cf97, #c99e5c);
  box-shadow: inset 0 1px 0 rgba(255, 244, 196, 0.58);
}

.bossGuideAbilities {
  display: contents;
}

.bossGuideAbility {
  position: relative;
  display: inline-grid;
  grid-template-columns: 3.65rem minmax(0, 1fr);
  align-items: start;
  gap: 0.52rem;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 4.28rem;
  margin: 0 0 0.4rem;
  padding: 0.42rem 0.5rem;
  break-inside: avoid;
  page-break-inside: avoid;
  border: 1px solid rgba(96, 58, 25, 0.38);
  border-radius: 4px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 244, 191, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(255, 241, 182, 0.2), rgba(93, 52, 19, 0.08)),
    rgba(70, 39, 15, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 170, 0.14),
    0 1px 2px rgba(92, 47, 15, 0.16);
}

.bossGuideAbility::before,
.bossGuideAbility::after {
  content: "";
  position: absolute;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #efe0b3, #6a3c17 70%);
  box-shadow: 0 1px 2px rgba(46, 20, 6, 0.42);
}

.bossGuideAbility::before {
  top: 0.22rem;
  left: 0.22rem;
}

.bossGuideAbility::after {
  top: 0.22rem;
  right: 0.22rem;
}

.bossGuideAbility img {
  width: 3.08rem;
  height: 3.08rem;
  border: 2px solid #6b401c;
  border-radius: 3px;
  object-fit: cover;
  background: #140d08;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 128, 0.18),
    0 2px 4px rgba(55, 31, 12, 0.32);
}

.bossGuideAbility strong {
  display: block;
  margin-bottom: 0.14rem;
  color: #3d250e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  line-height: 1.08;
}

.bossGuideAbility p,
.bossGuideAbility em {
  display: block;
  margin: 0;
  color: #5a3916;
  font-size: 0.62rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.bossGuideAbility em {
  margin-top: 0.2rem;
  color: #2f5228;
  font-style: normal;
  font-weight: 800;
}

.bossGuideAbility .bossGuideLayer + .bossGuideLayer,
.bossGuideAbility em + .bossGuideLayer,
.bossGuideAbility .bossGuideLayer + em {
  margin-top: 0.24rem;
}

.bossGuideAbility .bossGuideLayerHard {
  color: #a72616;
  font-weight: 500;
}

.bossGuideAbility .bossGuideLayerAscended {
  color: #6532ad;
  font-weight: 500;
}

.bossGuideDifficultyLabel {
  display: inline-flex;
  align-items: center;
  margin-right: 0.28rem;
  padding: 0.04rem 0.2rem;
  border-radius: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  vertical-align: 0.08rem;
}

.bossGuideNameFlag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.32rem;
  padding: 0.04rem 0.22rem;
  border-radius: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.47rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  vertical-align: 0.12rem;
}

.bossGuideDifficultyHard {
  color: #ffe0d7;
  background: #9b2518;
  border: 1px solid rgba(90, 13, 8, 0.65);
}

.bossGuideDifficultyAscended {
  color: #f0dcff;
  background: #5e2ca4;
  border: 1px solid rgba(45, 11, 88, 0.7);
}

@media (max-width: 720px) {
  .scoreboardWindow {
    height: calc(100dvh - 0.5rem);
  }

  .scoreboardGeneralGrid {
    grid-template-columns: 1fr;
  }

  .scoreboardLegend {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .scoreboardLegendBadge {
    display: none;
  }

  .scoreboardRegionContent {
    grid-template-columns: 1fr;
  }

  .scoreboardScoringAside {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.8rem;
  }

  .scoreboardScoringAside h4 {
    width: 100%;
  }

  .bossGuideWindow {
    height: calc(100dvh - 0.5rem);
  }

  .bossGuideControls,
  .bossGuideIntro {
    width: 100%;
  }

  .bossGuideControls,
  .bossGuideAbilities {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .bossGuideContent {
    column-count: 1;
    column-gap: 0;
    height: 100%;
    margin-top: 0;
  }

  .bossGuideIntro {
    margin-top: 0;
  }
}

.crystalCounter {
  gap: 0.32rem;
  color: #d7edff;
  font-size: 0.72rem;
  text-shadow: 0 0 6px rgba(71, 183, 255, 0.65);
}

.crystalCounter b {
  color: #7fd5ff;
  font-variant-numeric: tabular-nums;
}

.crystalCounter i,
.masteryCrystal i {
  width: 0.78rem;
  height: 1rem;
  transform: none;
  clip-path: polygon(50% 0, 92% 28%, 72% 100%, 28% 100%, 8% 28%);
  background: linear-gradient(135deg, #e8fbff 0 18%, #54c8ff 19% 55%, #176db5 56%);
  border: 0;
  box-shadow: 0 0 9px rgba(91, 205, 255, 0.88);
}

.masteryWoodButton {
  position: relative;
  isolation: isolate;
  padding: 0.3rem 0.55rem;
  color: #f5deb0;
  background:
    linear-gradient(rgba(255, 220, 150, 0.1), rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(90deg, #633f23 0 30px, #56351e 31px 34px);
  border: 1px solid #bd8c4d;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #382113, 0 2px 5px #000;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
}

.masteryWoodButton.masteryCapacityAvailable::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 2px solid #8be4ff;
  border-radius: 7px;
  box-shadow:
    0 0 5px #d7f7ff,
    0 0 12px #58cfff,
    0 0 22px rgba(61, 177, 255, 0.82),
    inset 0 0 8px rgba(167, 235, 255, 0.55);
  animation: masteryGlow 1.35s ease-in-out infinite alternate;
}

.masteryWoodButton.masteryCapacityAvailable {
  color: #fff3cf;
  border-color: #bfefff;
  box-shadow:
    inset 0 0 0 1px #382113,
    0 0 8px rgba(111, 219, 255, 0.72),
    0 0 18px rgba(59, 164, 255, 0.42);
}

@keyframes masteryGlow {
  from {
    opacity: 0.62;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1.03);
  }
}

.setup {
  grid-template-columns: 1fr;
}

.lobbyReferenceTitle {
  min-height: 1.8rem;
  color: #f1dfbd;
  font-family: Georgia, "Times New Roman", serif;
}

.lobbySpellItem,
.bossAbilityItem {
  border-top-color: rgba(184, 147, 94, 0.24);
}

.lobbySpellItem > img,
.bossAbilityItem img {
  border-color: #80603b;
  box-shadow: inset 0 0 0 1px #1b140d, 0 2px 5px rgba(0, 0, 0, 0.5);
}

.lobbySpellItem p,
.bossAbilityItem p {
  color: #b9ad99;
}

.loadoutSpellPicker {
  position: relative;
  margin-top: 0.18rem;
}

.loadoutSpellSelect {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) 0.55rem;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  height: 1.7rem;
  margin: 0;
  padding: 0.18rem 0.38rem;
  color: #f3e1bd;
  text-align: left;
  background: linear-gradient(#5a3b23, #382416);
  border: 1px solid #916a3c;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #24170e;
  font-size: 0.66rem;
}

.loadoutSpellSelect img,
.lobbySpellItem .loadoutSpellSelect img {
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: 2px;
}

.loadoutSpellSelect i {
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid #e6c98f;
}

.loadoutSpellMenu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  display: none;
  padding: 0.2rem;
  background: #20170f;
  border: 1px solid #a07845;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
}

.lobbySpellItem[data-loadout-category="support"] .loadoutSpellMenu {
  top: auto;
  bottom: calc(100% + 3px);
}

.lobbySpellItem[data-loadout-category="support"].loadoutOpen .loadoutSpellSelect i {
  transform: rotate(0deg);
  border-top: 0;
  border-bottom: 5px solid #e6c98f;
}

.loadoutOpen {
  z-index: 90;
}

.loadoutOpen .loadoutSpellMenu {
  display: grid;
  gap: 0.18rem;
}

.loadoutOpen .loadoutSpellSelect i {
  transform: rotate(180deg);
}

.lobbySpellOption {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.28rem;
  color: #ead9b9;
  text-align: left;
  background: #352519;
  border: 1px solid transparent;
  border-radius: 2px;
}

.lobbySpellOption:hover,
.lobbySpellOption.selected {
  background: #51351f;
  border-color: #a77a43;
}

.lobbySpellOption:disabled {
  filter: grayscale(0.9);
  opacity: 0.48;
}

.lobbySpellOption img,
.lobbySpellItem .lobbySpellOption img {
  width: 2rem;
  height: 2rem;
  border: 1px solid #6e5032;
}

.lobbySpellOption span {
  display: grid;
  gap: 0.08rem;
}

.lobbySpellOption small {
  color: #a89a85;
  font-size: 0.55rem;
}

.progressionModal {
  background: rgba(10, 8, 5, 0.78);
}

.progressionWindow {
  color: #392816;
  background:
    linear-gradient(90deg, rgba(83, 48, 19, 0.18), transparent 7% 93%, rgba(83, 48, 19, 0.18)),
    repeating-linear-gradient(0deg, rgba(88, 54, 23, 0.035) 0 2px, transparent 2px 7px),
    #d6bc82;
  border: 2px solid #79522b;
  box-shadow: inset 0 0 35px rgba(83, 48, 20, 0.26), 0 22px 70px rgba(0, 0, 0, 0.58);
}

.progressionWindow h2,
.progressionWindow h3,
.progressionWindow .selectedBossObjectives h3 {
  color: #372313;
  font-family: Georgia, "Times New Roman", serif;
}

.progressionWindow > header small,
.progressionWindow .selectedBossObjectives header small,
.progressionWindow .selectedBossObjectives header > span {
  color: #74552f;
}

.progressionSelectorPanel {
  background: rgba(91, 62, 31, 0.14);
  border-color: #8a6537;
}

.progressionSelectorPanel h3 {
  color: #513619;
}

.progressionSelectorButton {
  color: #4a321b;
  background: rgba(255, 244, 210, 0.34);
  border-color: #9a7745;
}

.progressionSelectorButton.selected {
  color: #2e1c0c;
  background: #e7c975;
  border-color: #74481f;
  box-shadow: inset 3px 0 #8b4d1f;
}

.objectiveGrid {
  gap: 0.42rem;
}

.objectiveCard {
  gap: 0.24rem;
  min-height: 108px;
  padding: 0.58rem 0.65rem 1.85rem;
  background: linear-gradient(rgba(255, 231, 158, 0.16), rgba(65, 42, 20, 0.16)), #b79558;
  border-color: #624421;
  box-shadow: inset 0 0 15px rgba(53, 30, 10, 0.22);
}

.objectiveCardCompleted {
  background: linear-gradient(rgba(255, 246, 165, 0.5), rgba(214, 163, 39, 0.08)), #e3c65c;
  border-color: #9a6818;
  box-shadow: inset 0 0 0 1px #fff0a0, 0 0 10px rgba(239, 192, 52, 0.4);
}

.objectiveCardCompleted .objectiveState {
  color: #376321;
}

.objectiveCard p {
  font-size: 0.66rem;
  line-height: 1.3;
}

.masteryWindow {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), transparent),
    repeating-linear-gradient(90deg, #282a27 0 74px, #242522 75px 77px);
  border: 2px solid #725438;
  box-shadow: inset 0 0 0 2px #171814, 0 22px 70px rgba(0, 0, 0, 0.65);
}

.masterySummary {
  padding-right: 9rem;
  background: #302216;
  border-color: #7a5834;
}

.resetMasteryButton {
  position: absolute;
  top: 4.55rem;
  right: 1.1rem;
  padding: 0.4rem 0.65rem;
  color: #f0ddbb;
  background: linear-gradient(#704628, #472b19);
  border: 1px solid #a57843;
  border-radius: 3px;
  font-size: 0.62rem;
}

.masteryWindow {
  position: relative;
}

.masteryRow > header {
  justify-content: flex-start;
  border-bottom: 1px solid rgba(177, 139, 84, 0.32);
}

.masteryRow > header strong {
  color: #e7d0a6;
  font-family: Georgia, "Times New Roman", serif;
}

/* Dungeon progression ledger */
.progressionWindow {
  position: relative;
  width: min(730px, calc(100vw - 1rem));
  height: min(680px, calc(100dvh - 1rem));
  max-height: calc(100dvh - 1rem);
  gap: 0.65rem;
  padding: 0.8rem 0.9rem 0.9rem;
  color: #d6c29a;
  background:
    linear-gradient(135deg, rgba(255, 224, 165, 0.025), transparent 32%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    #15140f;
  border: 2px solid #5f4b31;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px #080906,
    inset 0 0 38px rgba(0, 0, 0, 0.72),
    0 22px 70px rgba(0, 0, 0, 0.72);
}

.progressionWindow::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(149, 111, 61, 0.32);
  pointer-events: none;
}

.progressionWindow > header {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 0.05rem 0.15rem 0.5rem;
  border-bottom: 1px solid #5c4930;
}

.progressionWindow > header small {
  display: none;
}

.progressionWindow h2 {
  margin: 0;
  color: #d8bd83;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  text-shadow: 0 2px 2px #000;
}

.progressionWindow .modalCloseButton {
  width: 2rem;
  height: 2rem;
  color: #d5c29c;
  background: linear-gradient(#352e22, #1d1b16);
  border: 1px solid #69583e;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #0c0c09, 0 2px 6px #000;
}

.objectiveRegions {
  position: relative;
  z-index: 1;
  gap: 0.62rem;
}

.progressionSelectors {
  gap: 0.62rem;
}

.progressionSelectorPanel {
  gap: 0.38rem;
  min-height: 138px;
  padding: 0.55rem;
  background:
    linear-gradient(rgba(255, 216, 145, 0.02), transparent),
    #1b1914;
  border: 1px solid #54442f;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #090a07, inset 0 0 18px rgba(0, 0, 0, 0.45);
}

.progressionSelectorPanel h3 {
  color: #b79459;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.65rem;
}

.progressionSelectorScroll {
  gap: 0.28rem;
  max-height: 103px;
  scrollbar-color: #8b7048 #171712;
}

.progressionSelectorButton {
  min-height: 29px;
  padding: 0.38rem 0.55rem;
  color: #bda980;
  background: #2b2821;
  border: 1px solid #4c4436;
  border-radius: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.32);
}

.progressionSelectorButton:hover {
  color: #f0d79d;
  background: #373126;
  border-color: #886a3d;
}

.progressionSelectorButton.selected {
  color: #32210f;
  background: linear-gradient(#efca70, #c99b42);
  border-color: #f4d27d;
  box-shadow: inset 0 0 0 1px #9b6927, 0 0 8px rgba(218, 166, 67, 0.18);
}

.selectedBossObjectives {
  gap: 0.42rem;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.objectiveTabs {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: start;
  gap: 0.16rem;
  min-height: 0;
  padding: 0 0.12rem 0.04rem;
  flex-wrap: nowrap;
}

.objectiveTabs button {
  width: auto;
  min-width: 0;
  height: 1.42rem;
  min-height: 0;
  padding: 0.14rem 0.46rem;
  color: #bca77c;
  background: linear-gradient(#2c261b, #15120d);
  border: 1px solid #5a4628;
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.objectiveTabs button:hover,
.objectiveTabs button.selected {
  color: #2b1b0b;
  background: linear-gradient(#efcf79, #b9802d);
  border-color: #f4d88b;
  box-shadow: inset 0 0 0 1px rgba(99, 57, 16, 0.7), 0 0 8px rgba(221, 167, 65, 0.25);
}

.selectedBossObjectives > header {
  min-height: 39px;
  padding: 0 0.18rem;
}

.progressionWindow .selectedBossObjectives h3 {
  margin-top: 0.05rem;
  color: #d8bd83;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  text-shadow: 0 1px 2px #000;
}

.progressionWindow .selectedBossObjectives header small,
.progressionWindow .selectedBossObjectives header > span {
  color: #b48e4e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.59rem;
}

.objectiveGrid {
  grid-auto-rows: minmax(98px, auto);
  gap: 0.36rem;
  padding: 0.05rem 0.35rem 0.1rem 0.05rem;
  scrollbar-color: #836b46 #171712;
  scrollbar-width: thin;
}

.objectiveCard {
  gap: 0.18rem;
  min-height: 98px;
  padding: 0.5rem 0.58rem 1.65rem;
  color: #d3c09a;
  background:
    linear-gradient(135deg, rgba(219, 176, 96, 0.035), transparent 46%),
    #242117;
  border: 1px solid #665033;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #11110c, inset 0 0 15px rgba(0, 0, 0, 0.38);
}

.objectiveCard::before,
.objectiveCard::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: #8d6d3d;
  pointer-events: none;
}

.objectiveCard::before {
  top: 3px;
  left: 3px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.objectiveCard::after {
  right: 3px;
  bottom: 3px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.objectiveCard .objectiveState {
  color: #aa8c59;
  font-size: 0.55rem;
}

.objectiveCard strong {
  color: #d5bd8c;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px #000;
}

.objectiveCard p {
  color: #bcae91;
  font-size: 0.61rem;
  line-height: 1.28;
}

.objectiveRewards {
  right: 0.55rem;
  bottom: 0.42rem;
  color: #d4a84f;
  font-size: 0.62rem;
}

.objectiveRewards .crystalReward {
  color: #58c6f0;
  text-shadow: 0 0 5px rgba(74, 187, 236, 0.34);
}

.objectiveCardCompleted {
  color: #30210f;
  background:
    linear-gradient(rgba(255, 242, 176, 0.3), rgba(184, 119, 28, 0.08)),
    #d6ac51;
  border-color: #f1cd70;
  box-shadow:
    inset 0 0 0 1px #8d5d20,
    inset 0 0 18px rgba(255, 242, 170, 0.32),
    0 0 9px rgba(224, 168, 56, 0.22);
}

.objectiveCardCompleted .objectiveState {
  color: #23713a;
}

.objectiveCardCompleted strong,
.objectiveCardCompleted p,
.objectiveCardCompleted .objectiveRewards {
  color: #352310;
  text-shadow: none;
}

.objectiveCardCompleted .crystalReward {
  color: #0876a7;
}

.weeklyObjectiveCard .objectiveRewards span {
  color: #67d0ff;
  text-shadow: 0 0 6px rgba(79, 194, 255, 0.34);
}

.weeklyChestReward {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  color: #67d0ff;
}

.weeklyChestReward img {
  width: 1.28rem;
  height: 1.28rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.weeklyChestReward b {
  font-size: 0.68rem;
  line-height: 1;
}

/* Reworked Challenges modal */
.progressionWindow {
  width: min(1180px, calc(100vw - 1rem));
  height: min(710px, calc(100dvh - 0.9rem));
  padding: 0.7rem 0.82rem 0.82rem;
}

.progressionWindow > header {
  align-items: center;
  min-height: 46px;
  padding: 0.02rem 0.25rem 0.48rem 0.4rem;
}

.progressionWindow h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.22rem);
}

.objectiveRegions {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.62rem;
  min-height: 0;
  overflow: hidden;
}

.objectiveSidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.42rem;
  min-height: 0;
  padding: 0.58rem;
  background:
    linear-gradient(90deg, rgba(229, 180, 83, 0.045), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px),
    #11120f;
  border: 1px solid #51402a;
  box-shadow: inset 0 0 0 1px #060706, inset 0 0 26px rgba(0,0,0,0.55);
}

.objectiveSidebarTitle,
.objectiveResultSection h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #d7ad62;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.objectiveSidebarTitle::before,
.objectiveSidebarTitle::after,
.objectiveResultSection h4::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(189, 139, 69, 0.68), transparent);
}

.objectiveRegionList,
.objectiveBossList {
  display: grid;
  align-content: start;
  gap: 0.38rem;
  min-width: 0;
}

.objectiveBossList {
  overflow-y: auto;
  padding-right: 0.15rem;
  scrollbar-color: #82653c #17140f;
  scrollbar-width: thin;
}

.objectiveNavButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 36px;
  padding: 0.36rem 0.58rem;
  color: #cdb98c;
  text-align: left;
  background: linear-gradient(90deg, #242016, #12110d);
  border: 1px solid #4d3c25;
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.55), inset 0 0 12px rgba(0,0,0,0.42);
}

.objectiveNavButton span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.objectiveRegionButton span:first-child,
.objectiveBossButton span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.objectiveNavButton:hover {
  color: #f3dca6;
  border-color: #a57b3f;
  background: linear-gradient(90deg, #302817, #17130e);
}

.objectiveNavButton.selected {
  color: #ffe3a5;
  border-color: #d4a24f;
  background: linear-gradient(90deg, rgba(178, 116, 31, 0.42), #20190e);
  box-shadow: inset 3px 0 #f0c76a, inset 0 0 16px rgba(234, 179, 78, 0.16), 0 0 10px rgba(217, 162, 66, 0.18);
}

.objectiveRegionButton {
  color: #d7d0bd;
  background:
    linear-gradient(90deg, rgba(54, 55, 51, 0.98), rgba(25, 24, 22, 0.98)),
    repeating-linear-gradient(135deg, rgba(210, 198, 170, 0.04) 0 2px, transparent 2px 6px);
  border-color: #7a7160;
}

.objectiveRegionButton:hover,
.objectiveRegionButton.selected {
  color: #f2e7cb;
  background:
    linear-gradient(90deg, rgba(67, 65, 58, 0.98), rgba(31, 29, 25, 0.98)),
    repeating-linear-gradient(135deg, rgba(210, 198, 170, 0.06) 0 2px, transparent 2px 6px);
  border-color: #b3a06f;
}

.objectiveNavIcon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  color: #d5a64f;
  font-size: 0.95rem;
  text-shadow: 0 1px 2px #000;
}

.objectiveRegionChevron {
  flex: 0 0 auto;
  overflow: visible;
  color: #d5a64f;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.objectiveRegionButton.expanded .objectiveRegionChevron {
  transform: rotate(180deg);
}

.objectiveBossList.collapsed {
  display: none;
}

.selectedBossObjectives {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 0.38rem;
  min-height: 0;
  overflow: hidden;
}

.objectiveBossHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.1rem 0.2rem;
}

.progressionWindow .selectedBossObjectives .objectiveBossHeader h3 {
  margin: 0.12rem 0 0;
  color: #e0c38b;
  font-size: 1.2rem;
}

.progressionWindow .selectedBossObjectives .objectiveBossHeader small {
  color: #ad8b55;
  font-size: 0.68rem;
  text-transform: none;
}

.objectiveProgressSummary {
  display: grid;
  gap: 0.35rem;
  width: min(290px, 40%);
  color: #d0b07a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  text-align: right;
}

.objectiveProgressSummary b {
  color: #f2c66a;
  font-size: 1.05rem;
}

.objectiveProgressTrack {
  height: 0.75rem;
  padding: 2px;
  background: #0e0d0a;
  border: 1px solid #5c4528;
  border-radius: 4px;
  box-shadow: inset 0 0 7px #000;
}

.objectiveProgressTrack i {
  display: block;
  height: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, #8d5d1f, #edcb70);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(232, 181, 77, 0.36);
}

.objectiveTabs {
  display: flex;
  align-items: flex-end;
  gap: 0.18rem;
  padding: 0 0.2rem;
  border-bottom: 1px solid rgba(132, 95, 48, 0.72);
}

.objectiveTabs button,
.objectiveFilterRow button {
  height: 2rem;
  padding: 0.22rem 0.86rem;
  color: #c2ae82;
  background: linear-gradient(#272117, #11100c);
  border: 1px solid #514027;
  border-radius: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.objectiveTabs button {
  height: 1.9rem;
  min-width: 7.2rem;
  margin-bottom: -1px;
  color: #ad9a72;
  background: linear-gradient(#1f1b14, #11100c);
  border-color: #4c3a23;
  border-bottom-color: rgba(132, 95, 48, 0.72);
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.42);
}

.objectiveTabs button:hover {
  color: #e2c98f;
  background: linear-gradient(#292217, #15120d);
  border-color: #8a6634;
  border-bottom-color: rgba(132, 95, 48, 0.72);
}

.objectiveTabs button.selected {
  color: #ffe3a5;
  background: linear-gradient(#3a2a16, #1b150d);
  border-color: #d0a251;
  border-bottom-color: #1b150d;
  box-shadow: inset 0 1px 0 rgba(255, 229, 166, 0.22), 0 -2px 10px rgba(221, 167, 65, 0.12);
}

.objectiveFilterRow button:hover,
.objectiveFilterRow button.selected {
  color: #2b1b0b;
  background: linear-gradient(#f0cf78, #b9822f);
  border-color: #f4d88b;
  box-shadow: inset 0 0 0 1px rgba(99, 57, 16, 0.7), 0 0 8px rgba(221, 167, 65, 0.25);
}

.objectiveFilterPanel {
  display: grid;
  grid-template-rows: auto auto;
  align-items: start;
  justify-content: start;
  gap: 0.26rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.objectiveFilterRow {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.24rem;
  min-width: 0;
}

.objectiveDifficultyFilters button {
  min-width: 4.75rem;
}

.objectiveCompletionFilters button {
  min-width: 5.4rem;
}

.objectiveFilterRow button {
  height: 1.62rem;
  padding: 0.14rem 0.48rem;
  font-size: 0.68rem;
  white-space: nowrap;
}

.objectiveGrid {
  display: block;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.05rem 0.3rem 0.25rem 0;
  scrollbar-color: #836b46 #171712;
  scrollbar-width: thin;
}

.objectiveResultSection {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.72rem;
}

.objectiveResultSection h4 span {
  color: #8f7850;
  font-size: 0.68rem;
  letter-spacing: 0;
}

.objectiveResultSectionCompleted h4 {
  color: #84c47b;
}

.objectiveResultGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.objectiveCard {
  min-height: 106px;
  padding: 0.58rem 0.66rem 1.75rem;
  background:
    linear-gradient(135deg, rgba(219, 176, 96, 0.045), transparent 46%),
    #1d1b14;
  border: 1px solid #725934;
  box-shadow: inset 0 0 0 1px #0a0a07, inset 0 0 17px rgba(0,0,0,0.45);
}

.objectiveCard .objectiveState {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: #b69a64;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.objectiveCard strong {
  color: #dfc18b;
  font-size: 0.92rem;
}

.objectiveCard p {
  color: #c1b193;
  font-size: 0.68rem;
  line-height: 1.28;
}

.objectiveRewards {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  right: 0.7rem;
  bottom: 0.52rem;
  color: #e2ad4f;
  font-size: 0.78rem;
  font-family: Georgia, "Times New Roman", serif;
}

.objectiveCardCompleted {
  background:
    linear-gradient(rgba(255, 236, 159, 0.28), rgba(184, 119, 28, 0.08)),
    #c99e45;
  border-color: #f1cd70;
}

.objectiveCardCompleted strong,
.objectiveCardCompleted p,
.objectiveCardCompleted .objectiveRewards {
  color: #2d1f0f;
}

.objectiveCardCompleted .objectiveState {
  color: #196f34;
}

.weeklyChestReward img {
  width: 1.55rem;
  height: 1.55rem;
}

@media (max-width: 860px) {
  .progressionWindow {
    width: calc(100vw - 0.75rem);
  }

  .objectiveRegions {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .objectiveSidebar {
    grid-template-rows: auto auto auto;
  }

  .objectiveBossList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .objectiveResultGrid {
    grid-template-columns: 1fr;
  }

  .objectiveProgressSummary {
    width: min(250px, 48%);
  }
}

@media (max-height: 650px) {
  .progressionSelectorPanel {
    min-height: 112px;
  }

  .progressionSelectorScroll {
    max-height: 78px;
  }

  .objectiveGrid {
    grid-auto-rows: minmax(88px, auto);
  }

  .objectiveCard {
    min-height: 88px;
  }
}

/* Symmetrical raid lobby */
.lobby {
  --lobby-media-height: clamp(150px, 24dvh, 190px);
  align-items: stretch;
  background:
    linear-gradient(rgba(5, 6, 5, 0.3), rgba(5, 6, 5, 0.62)),
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(0, 0, 0, 0.16) 93px 95px),
    #20211d;
}

.lobbyReference {
  grid-template-rows: 2rem var(--lobby-media-height) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  gap: 0.48rem;
  height: calc(100dvh - 1rem);
  padding: 0.68rem;
  overflow: hidden;
  border-color: #75572f;
  background:
    linear-gradient(135deg, rgba(225, 174, 87, 0.035), transparent 30%),
    repeating-linear-gradient(0deg, #171813 0 37px, #141510 38px 40px);
  box-shadow:
    inset 0 0 0 2px #080906,
    inset 0 0 26px rgba(0, 0, 0, 0.68),
    0 8px 26px rgba(0, 0, 0, 0.48);
}

.lobbyReferenceTitle {
  grid-row: 1;
  min-height: 0;
  padding: 0 0.18rem 0.34rem;
  border-bottom: 1px solid rgba(157, 116, 60, 0.5);
  color: #e4c991;
  font-size: 0.92rem;
  text-transform: uppercase;
  text-shadow: 0 2px 2px #000;
}

.lobbySpellReference .lobbyReferenceTitle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.skinButton {
  position: relative;
  isolation: isolate;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  z-index: 2;
  margin: 0.42rem 0.42rem 0 0;
  min-width: 0;
  padding: 0.18rem 0.42rem;
  border: 1px solid #9a6c31;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #7d5629, #3a2511),
    #513419;
  color: #f8dfaa;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 150, 0.15), 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.skinButton:hover {
  filter: brightness(1.1);
  border-color: #d5aa5c;
}

.skinButton.skinUnlockAvailable {
  color: #fff3cf;
  border-color: #bfefff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 222, 150, 0.15),
    0 0 8px rgba(111, 219, 255, 0.72),
    0 0 18px rgba(59, 164, 255, 0.42);
}

.skinButton.skinUnlockAvailable::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 2px solid #8be4ff;
  border-radius: 6px;
  box-shadow:
    0 0 5px #d7f7ff,
    0 0 12px #58cfff,
    0 0 22px rgba(61, 177, 255, 0.82),
    inset 0 0 8px rgba(167, 235, 255, 0.55);
  animation: masteryGlow 1.35s ease-in-out infinite alternate;
}

.lobbySpellReference .lobbyReferenceTitle {
  padding-left: 0.18rem;
}

.lobbySpellReference .lobbyReferenceTitle span {
  justify-self: start;
  min-width: 0;
  text-align: left;
  line-height: 1.05;
}

.lobbySpellReference .masteryWoodButton {
  justify-self: end;
  min-width: 0;
  max-width: 5.2rem;
  padding-inline: 0.45rem;
  line-height: 1.05;
}

.rangerLobbyArt,
.bossPortrait {
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 22%;
  background: #080a07;
  border: 1px solid #79572e;
  border-radius: 2px;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.52), 0 3px 8px rgba(0, 0, 0, 0.42);
}

.rangerLobbyArt {
  position: static;
  z-index: auto;
  inset: auto;
  opacity: 1;
  mask-image: none;
}

.skinWindow {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(96vw, 760px);
  max-width: min(96vw, 760px);
  max-height: min(92dvh, 560px);
  padding: 0.85rem;
  overflow: hidden;
  color: #d6c29a;
  border: 1px solid #6a4d2b;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(211, 145, 52, 0.1), transparent 38%),
    repeating-linear-gradient(0deg, #171813 0 37px, #141510 38px 40px);
  box-shadow:
    inset 0 0 0 2px #080906,
    inset 0 0 34px rgba(0, 0, 0, 0.58),
    0 20px 60px rgba(0, 0, 0, 0.62);
}

.skinWindow > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(157, 116, 60, 0.5);
}

.skinWindow h2 {
  margin: 0.1rem 0 0;
  color: #d8bd83;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.skinWindow header small {
  color: #b48e4e;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.skinGrid {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-height: 0;
  padding-top: 0.65rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.skinGroup {
  display: grid;
  gap: 0.42rem;
}

.skinGroup h3 {
  margin: 0;
  color: #d7b66f;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
}

.skinGroupGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 104px));
  justify-content: start;
  gap: 0.48rem;
}

.skinCard {
  display: grid;
  grid-template-rows: 84px auto auto;
  gap: 0.24rem;
  min-height: 0;
  padding: 0.32rem;
  border: 1px solid #634721;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 218, 146, 0.06), rgba(0, 0, 0, 0.18)),
    #11130f;
  color: #d6c29a;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(5, 6, 4, 0.82);
}

.skinCard:hover:not(:disabled),
.skinCard.selected {
  border-color: #e2bf6b;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 171, 0.24), 0 0 18px rgba(224, 159, 55, 0.34);
}

.skinCard.selected {
  border-color: #ffd978;
  box-shadow:
    inset 0 0 0 2px rgba(255, 236, 159, 0.72),
    inset 0 0 22px rgba(255, 184, 70, 0.14),
    0 0 22px rgba(235, 174, 61, 0.55);
  transform: translateY(-1px);
}

.skinCard.selected .skinImageWrap {
  border-color: #ffe18a;
  box-shadow:
    inset 0 0 0 2px rgba(255, 222, 123, 0.82),
    0 0 14px rgba(255, 198, 74, 0.45);
}

.skinCard:disabled {
  cursor: not-allowed;
}

.skinImageWrap {
  position: relative;
  display: block;
  width: 100%;
  height: 84px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #7c5a31;
  border-radius: 2px;
  background: #080a07;
}

.skinImageWrap img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.skinPetalPreview {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 184, 219, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(63, 20, 45, 0.8), rgba(9, 8, 13, 0.94));
}

.skinPetalPreview i {
  position: absolute;
  width: 22px;
  height: 11px;
  border-radius: 70% 30% 70% 30%;
  background: linear-gradient(135deg, #ffd6e5, #ff77aa 58%, #d8346f);
  box-shadow: 0 0 9px rgba(255, 114, 170, 0.55);
  transform: rotate(22deg);
}

.skinPetalPreview i:nth-child(1) { left: 18%; top: 65%; transform: rotate(-18deg) scale(0.82); }
.skinPetalPreview i:nth-child(2) { left: 36%; top: 36%; transform: rotate(31deg) scale(0.66); }
.skinPetalPreview i:nth-child(3) { left: 56%; top: 48%; transform: rotate(-48deg) scale(0.9); }
.skinPetalPreview i:nth-child(4) { left: 68%; top: 22%; transform: rotate(18deg) scale(0.58); }
.skinPetalPreview i:nth-child(5) { left: 44%; top: 72%; transform: rotate(64deg) scale(0.72); }

.skinPreview-waves {
  background:
    radial-gradient(circle at 18% 72%, rgba(235, 255, 255, 0.6), transparent 18%),
    linear-gradient(135deg, rgba(12, 82, 150, 0.92), rgba(9, 14, 26, 0.96));
}

.skinPreview-waves i {
  width: 44px;
  height: 9px;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(90deg, #efffff, #52d9ff 45%, #126ce0);
  box-shadow: 0 0 10px rgba(72, 205, 255, 0.72);
}

.skinPreview-shadows {
  background:
    radial-gradient(circle at 70% 35%, rgba(116, 52, 255, 0.28), transparent 30%),
    linear-gradient(135deg, rgba(12, 8, 20, 0.96), rgba(42, 24, 76, 0.92));
}

.skinPreview-shadows i {
  width: 34px;
  height: 13px;
  border-radius: 70% 30% 80% 20%;
  background: linear-gradient(135deg, rgba(17, 8, 28, 0.95), rgba(111, 44, 255, 0.7));
  box-shadow: 0 0 12px rgba(132, 61, 255, 0.78);
}

.skinPreview-leaves {
  background:
    radial-gradient(circle at 20% 75%, rgba(184, 255, 80, 0.35), transparent 30%),
    linear-gradient(135deg, rgba(19, 66, 28, 0.92), rgba(6, 20, 12, 0.96));
}

.skinPreview-leaves i {
  width: 22px;
  height: 10px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #dbff80, #57c937 54%, #1b6f2d);
  box-shadow: 0 0 8px rgba(126, 255, 67, 0.62);
}

.skinCard.locked .skinImageWrap img {
  filter: grayscale(1) brightness(0.55);
}

.skinCard.locked .skinImageWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.skinLockIcon {
  position: absolute;
  right: 0.22rem;
  top: 0.22rem;
  z-index: 1;
  padding: 0.1rem 0.22rem;
  border: 1px solid #8c754b;
  border-radius: 999px;
  background: rgba(16, 13, 9, 0.86);
  color: #e8d5ac;
  font-size: 0.46rem;
  font-weight: 800;
  text-transform: uppercase;
}

.skinCard strong {
  color: #e2cc9e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.56rem;
  line-height: 1.05;
}

.skinCard small {
  min-height: 0.8rem;
  color: #b8aa8d;
  font-size: 0.47rem;
  line-height: 1.12;
}

.skinPrice {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  color: #69dfff;
  font-size: 0.58rem;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(79, 200, 255, 0.55);
}

.skinPrice i {
  display: inline-block;
  width: 0.52rem;
  height: 0.52rem;
  transform: rotate(45deg);
  background: #65dbff;
  border: 1px solid #dcf9ff;
  box-shadow: 0 0 8px rgba(101, 219, 255, 0.72);
}

.skinCard.selected small {
  color: #ffd978;
  font-weight: 800;
  text-transform: uppercase;
}

.skinPurchaseWindow {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0.55rem;
  width: min(92vw, 520px);
  max-height: min(88dvh, 560px);
  padding: 0.55rem;
  border: 1px solid rgba(226, 191, 107, 0.62);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(108, 76, 32, 0.42), rgba(11, 10, 7, 0.92)),
    #11100c;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 156, 0.14), 0 0 20px rgba(83, 51, 16, 0.45);
}

.skinPurchasePreview {
  position: relative;
  grid-row: 1 / span 2;
  overflow: hidden;
  min-height: 260px;
  border: 1px solid #96703a;
  border-radius: 3px;
  background: #050604;
}

.skinPurchasePreview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.skinPurchasePreview.hasModelPreview > img {
  filter: saturate(1.04) contrast(1.02);
}

.skinPurchaseModelPreview {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(235, 203, 126, 0.78);
  border-radius: 5px;
  background:
    radial-gradient(circle at 45% 36%, rgba(255, 226, 147, 0.16), transparent 58%),
    rgba(8, 8, 7, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 245, 190, 0.12), 0 0 12px rgba(0, 0, 0, 0.55);
}

.skinPurchaseModelPreview img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

@media (max-width: 560px) {
  .skinPurchaseWindow {
    grid-template-columns: 1fr;
  }

  .skinPurchasePreview {
    grid-row: auto;
  }
}

.skinPurchaseCopy {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.skinPurchaseCopy > span:not(.skinPrice) {
  color: #d9c398;
  font-size: 0.86rem;
  line-height: 1.25;
}

.skinPurchaseCopy strong {
  color: #f0d59a;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.12rem;
}

.skinPurchasePrice {
  font-size: 0.9rem;
}

.skinPurchaseActions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.45rem;
}

.bossPortrait {
  object-fit: contain;
  object-position: center;
}

.lobbySpellReference .lobbySpellList,
.bossAbilityList {
  grid-row: 3;
  grid-template-rows: repeat(6, minmax(64px, 1fr));
  gap: 0.24rem;
  min-height: 0;
  margin-top: 0;
  overflow: visible;
}

.lobbySpellReference .lobbySpellItem,
.bossAbilityItem {
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  gap: 0.44rem;
  min-height: 0;
  padding: 0.28rem 0.34rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(211, 158, 71, 0.025), transparent),
    rgba(13, 15, 12, 0.72);
  border: 1px solid #5f482c;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(5, 6, 4, 0.82);
}

.lobbySpellReference .lobbySpellItem.loadoutOpen {
  overflow: visible;
}

.lobbySpellReference .lobbySpellItem > img,
.bossAbilityItem > img {
  width: 48px;
  height: 48px;
  border-color: #8b6332;
  border-radius: 2px;
}

.lobbySpellItem strong,
.bossAbilityItem strong {
  color: #e2cc9e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
}

.lobbySpellItem p,
.bossAbilityItem p {
  color: #b8aa8d;
  font-size: 0.58rem;
  line-height: 1.12;
}

.lobbySpellReference .lobbySpellItem > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.12rem;
  min-width: 0;
}

.lobbySpellReference .lobbySpellHeading {
  grid-column: 1;
  min-width: 0;
  gap: 0.28rem;
}

.lobbySpellReference .lobbySpellHeading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobbySpellReference .lobbySpellHeading kbd {
  flex: 0 0 auto;
  font-size: 0.5rem;
  padding: 0.08rem 0.2rem;
}

.lobbySpellReference .loadoutSpellPicker {
  grid-column: 1;
  width: 100%;
  margin: 0;
}

.lobbySpellReference .loadoutSpellSelect {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) 0.45rem;
  align-items: center;
  gap: 0.26rem;
  width: 100%;
  height: 1.35rem;
  padding: 0.12rem 0.3rem;
  font-size: 0.58rem;
}

.lobbySpellReference .loadoutSpellSelect img {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

.lobbySpellReference .loadoutSpellSelect span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobbySpellReference .loadoutSpellSelect i {
  margin: 0;
}

.lobbySpellReference .loadoutSpellMenu {
  right: 0;
  left: auto;
  width: min(14rem, calc(100vw - 2rem));
}

.lobbySpellReference .lobbySpellItem p {
  grid-column: 1;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lobbyCore {
  border-color: #665035;
  background:
    linear-gradient(rgba(255, 221, 155, 0.018), rgba(0, 0, 0, 0.14)),
    repeating-linear-gradient(90deg, #171814 0 106px, #141510 107px 110px);
  box-shadow:
    inset 0 0 0 2px #080906,
    inset 0 0 34px rgba(0, 0, 0, 0.52),
    0 8px 28px rgba(0, 0, 0, 0.42);
}

.accountBar {
  border-color: #5f492f;
  background: rgba(12, 13, 11, 0.88);
}

.brand {
  padding: 0.35rem 0 0.5rem;
  border-bottom: 1px solid rgba(148, 107, 55, 0.42);
}

.classProgressPanel {
  border-color: #735730;
  background:
    linear-gradient(90deg, rgba(115, 75, 37, 0.18), transparent 48%),
    rgba(17, 18, 14, 0.9);
}

.classProgressTop strong,
.crystalCounter b {
  color: #62c8ff;
  text-shadow: 0 0 7px rgba(50, 167, 232, 0.38);
}

.roomPanel {
  border-color: #74552f;
  background:
    linear-gradient(rgba(255, 213, 136, 0.03), rgba(0, 0, 0, 0.13)),
    repeating-linear-gradient(90deg, #2a1d13 0 98px, #23180f 99px 102px);
}

.roomHeader {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid rgba(177, 127, 62, 0.42);
  font-family: Georgia, "Times New Roman", serif;
}

.roomHeader strong {
  color: #e2c384;
  text-shadow: 0 2px 2px #000;
}

.roomVisibilityControl {
  justify-self: end;
}

.hostBossControls select,
.joinBox input,
.setup select {
  background: #161611;
  border-color: #6f5433;
  border-radius: 2px;
  color: #dfcca5;
}

.playerLine {
  background: #11130f;
  border-color: #53472f;
  border-radius: 2px;
}

.lobbyButtons button,
.roomActions button {
  border: 1px solid #7e5c31;
  border-radius: 3px;
  color: #e7d4ae;
  background: linear-gradient(#46311f, #281b12);
  box-shadow: inset 0 0 0 1px #17100b, 0 2px 5px rgba(0, 0, 0, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}

#readyBtn:not(:disabled) {
  color: #f0e0b9;
  background: linear-gradient(#315b35, #17341f);
  border-color: #7a9d62;
  box-shadow: inset 0 0 0 1px #102315, 0 0 10px rgba(72, 144, 73, 0.24);
}

@media (max-height: 640px) {
  .lobby {
    --lobby-media-height: 120px;
  }

  .lobbySpellReference .lobbySpellItem,
  .bossAbilityItem {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 0.2rem 0.3rem;
  }

  .lobbySpellReference .lobbySpellItem > img,
  .bossAbilityItem > img {
    width: 40px;
    height: 40px;
  }
}

/* Compact icon-based Ranger mastery tree */
.masteryWindow {
  position: relative;
  width: min(680px, calc(100vw - 1rem));
  height: min(620px, calc(100dvh - 1rem));
  max-height: calc(100dvh - 1rem);
  gap: 0.55rem;
  padding: 0.8rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(224, 178, 94, 0.025), transparent 34%),
    repeating-linear-gradient(0deg, #191a16 0 38px, #151611 39px 41px);
  border: 2px solid #715534;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #090a07, inset 0 0 34px rgba(0, 0, 0, 0.6), 0 22px 70px rgba(0, 0, 0, 0.72);
}

.masteryWindow > header {
  min-height: 42px;
  padding: 0 0.15rem 0.5rem;
  border-bottom-color: #604a30;
}

.masteryWindow header small {
  display: none;
}

.masteryWindow h2 {
  margin: 0;
  color: #e0c58e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  text-shadow: 0 2px 2px #000;
}

.masteryTreeContent {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.42rem;
  overflow: hidden;
}

.masterySummary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.48rem 0.65rem;
  color: #c4b89f;
  background: #171812;
  border: 1px solid #55442f;
  border-radius: 2px;
  font-size: 0.68rem;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.4);
}

.masterySummary strong {
  color: #72d9ff;
  text-shadow: 0 0 5px rgba(80, 192, 241, 0.38);
}

.masteryMessage {
  min-height: 1rem;
  color: #d7b56f;
}

.masteryRows {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-content: center;
  justify-items: center;
  gap: 0.72rem;
  overflow: hidden;
  padding: 0.1rem 0.3rem;
}

.masteryRow {
  display: block;
  width: 100%;
}

.masteryRow > header {
  display: none;
}

.masteryNodeGrid,
.masteryNodeGrid3 {
  display: grid;
  grid-template-columns: repeat(4, 124px);
  justify-content: center;
  gap: 1.45rem;
}

.masteryNodeGrid3 {
  grid-template-columns: repeat(2, 124px);
  gap: 2.2rem;
}

.masteryNode {
  position: relative;
  display: block;
  width: 124px;
  height: 120px;
  min-height: 0;
  padding: 3px;
  overflow: hidden;
  color: #d7c8a8;
  background: #080a08;
  border: 1px solid #5e4b32;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #030403, 0 3px 8px rgba(0, 0, 0, 0.5);
}

.masteryNodeArt {
  position: absolute;
  inset: 3px auto auto 3px;
  display: block;
  width: 116px;
  height: 112px;
  overflow: hidden;
  background-image: url("/assets/mastery/ranger-mastery-icons.png");
  background-repeat: no-repeat;
  background-size: 593px 396px;
  background-position: var(--mastery-icon-x) var(--mastery-icon-y);
  transition: filter 160ms ease, opacity 160ms ease;
}

.masteryNodeLocked .masteryNodeArt {
  filter: grayscale(1) saturate(0) brightness(0.52) contrast(1.05);
}

.masteryNodeLocked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: rgba(4, 6, 7, 0.2);
  pointer-events: none;
}

.masteryNodeAvailable {
  border-color: #8b6d42;
  cursor: pointer;
  filter: none;
}

.masteryNodeAvailable .masteryNodeArt {
  filter: saturate(1.12) brightness(1.02) contrast(1.04);
}

.masteryNodeAvailable:hover,
.masteryNodeAvailable:focus-visible {
  transform: translateY(-1px);
  border-color: #c49b58;
  outline: 1px solid rgba(216, 177, 102, 0.42);
  box-shadow: inset 0 0 0 1px #171006, 0 0 11px rgba(211, 166, 79, 0.28);
}

.masteryNodeUnlocked {
  color: #fff3c4;
  background: #171006;
  border-color: #ffd36c;
  box-shadow:
    inset 0 0 0 2px rgba(255, 221, 127, 0.48),
    inset 0 0 20px rgba(255, 199, 68, 0.18),
    0 0 16px rgba(255, 198, 70, 0.62),
    0 0 30px rgba(255, 166, 40, 0.25);
}

.masteryNodeUnlocked .masteryNodeArt {
  filter: saturate(1.28) brightness(1.18) contrast(1.08);
}

.masteryNodeLocked {
  cursor: help;
  opacity: 0.78;
}

.masteryCostBadge {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: 4px;
  min-width: 2.45rem;
  padding: 0.14rem 0.26rem;
  color: #59e2ff;
  text-align: center;
  background: rgba(2, 8, 12, 0.94);
  border: 1px solid #247b9a;
  border-radius: 2px;
  box-shadow: 0 1px 4px #000, inset 0 0 5px rgba(53, 181, 226, 0.13);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 1px 2px #000;
}

.masteryNodeUnlocked .masteryCostBadge {
  color: #9cf0ff;
  border-color: #55b8d5;
}

.masteryFooter {
  display: flex;
  justify-content: flex-end;
  min-height: 32px;
  padding-top: 0.42rem;
  border-top: 1px solid rgba(112, 82, 47, 0.45);
}

.resetMasteryButton {
  position: static;
  width: auto;
  height: auto;
  padding: 0.42rem 0.72rem;
  color: #ead6ae;
  background: linear-gradient(#563720, #302014);
  border: 1px solid #8b683d;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1b120b, 0 2px 5px rgba(0, 0, 0, 0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.65rem;
}

.masteryTooltip {
  position: absolute;
  z-index: 20;
  display: grid;
  gap: 0.35rem;
  width: min(290px, calc(100% - 20px));
  padding: 0.68rem;
  color: #d8c9aa;
  background: rgba(17, 17, 13, 0.98);
  border: 1px solid #96703e;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #070806, 0 8px 22px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.masteryTooltip > strong {
  color: #e7cd94;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
}

.masteryTooltipMeta {
  color: #75d9f6;
  font-size: 0.62rem;
  font-weight: 800;
}

.masteryTooltip p {
  margin: 0;
  color: #c4b79e;
  font-size: 0.68rem;
  line-height: 1.38;
}

.masteryTooltipStatus {
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.masteryTooltipStatusUnlocked { color: #83dc6b; }
.masteryTooltipStatusAvailable { color: #63d9ff; }
.masteryTooltipStatusLocked { color: #a79d8b; }

.masteryKeyword {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.masteryKeyword--frozen {
  color: #6ad0ff;
  text-shadow: 0 0 6px rgba(106, 208, 255, 0.45);
}
.masteryKeyword--burn {
  color: #ff5e4a;
  text-shadow: 0 0 6px rgba(255, 94, 74, 0.45);
}
.masteryKeyword--root {
  color: #d9a441;
  text-shadow: 0 0 6px rgba(217, 164, 65, 0.45);
}

.masteryKeyword--storm {
  color: #ffe15f;
  text-shadow: 0 0 7px rgba(255, 225, 95, 0.55);
}

.masteryKeyword--stun {
  color: #f2d4ff;
  text-shadow: 0 0 7px rgba(204, 128, 255, 0.48);
}

.masteryTooltip small {
  color: #a9997e;
  font-size: 0.61rem;
}

#resetMasteryConfirmModal {
  z-index: 5000;
}

.masteryResetDialog {
  color: #dfccaa;
  background:
    linear-gradient(rgba(255, 218, 149, 0.025), transparent),
    #181914;
  border-color: #745735;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #080906, 0 18px 48px rgba(0, 0, 0, 0.7);
}

.masteryResetDialog strong {
  color: #e3c58c;
  font-family: Georgia, "Times New Roman", serif;
}

.masteryResetDialog p {
  margin: 0.65rem 0 0;
  color: #b9ad96;
  font-size: 0.75rem;
  line-height: 1.4;
}

.masteryResetDialog #confirmResetMasteryBtn {
  background: #743329;
  border: 1px solid #a65a49;
}

@media (max-height: 620px) {
  .masteryWindow {
    height: calc(100dvh - 0.6rem);
    padding: 0.55rem;
  }

  .masteryRows {
    gap: 0.4rem;
  }

  .masteryNodeGrid,
  .masteryNodeGrid3 {
    transform: scale(0.88);
    transform-origin: center;
    margin-block: -0.45rem;
  }
}

/* Compact in-game HUD */
:root {
  --game-hud-height: clamp(84px, 11.5dvh, 108px);
}

.game {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #080b10;
}

.game .arenaWrap {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(3px, 0.55dvh, 7px);
  overflow: hidden;
  background: radial-gradient(circle at center, #171c22, #080b10 78%);
}

.game #arena {
  display: block;
  width: min(100%, calc((100dvh - var(--game-hud-height) - 8px) * 1.5));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(124, 151, 177, 0.42);
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.62);
}

.bottomHud {
  position: relative;
  z-index: 80;
  display: grid;
  grid-template-columns:
    minmax(145px, 0.9fr)
    minmax(100px, 0.6fr)
    minmax(430px, 2.55fr)
    minmax(220px, 1.25fr)
    minmax(165px, 1fr);
  flex: 0 0 var(--game-hud-height);
  width: 100%;
  height: var(--game-hud-height);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(26, 32, 40, 0.98), rgba(8, 12, 17, 0.99)),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(255, 255, 255, 0.015) 81px);
  border-top: 1px solid rgba(104, 139, 169, 0.55);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.48);
}

.hudSection {
  min-width: 0;
  min-height: 0;
  padding: clamp(4px, 0.65dvh, 8px);
  overflow: hidden;
  border-right: 1px solid rgba(96, 119, 140, 0.28);
  border-radius: 0;
}

.hudSection:last-child {
  border-right: 0;
}

.sessionHud {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  overflow: visible;
}

.sessionHudTop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
  min-width: 0;
}

.sessionHudBottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sessionHud .leaveGameButton {
  align-self: start;
  padding: 0.34rem 0.55rem;
  border: 1px solid rgba(245, 92, 86, 0.55);
  border-radius: 4px;
  background: linear-gradient(#7d2829, #4b171a);
  color: #fff3f2;
  font-size: clamp(0.58rem, 0.72vw, 0.7rem);
  line-height: 1;
  box-shadow: inset 0 0 8px rgba(255, 112, 99, 0.12);
}

.sessionDetails {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
  align-self: center;
}

.sessionDetails span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sessionDetails small,
.encounterTimer span,
.ultimateTop span {
  color: #8fa0b2;
  font-size: clamp(0.48rem, 0.58vw, 0.62rem);
  font-weight: 800;
  text-transform: uppercase;
}

.sessionDetails strong {
  overflow: hidden;
  color: #edf5ff;
  font-size: clamp(0.58rem, 0.72vw, 0.74rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionDetails .bossModeIndicator strong {
  color: #ffcf69;
}

.sessionHud .encounterTimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.25rem 0.42rem;
  background: rgba(4, 8, 12, 0.68);
  border: 1px solid rgba(93, 214, 201, 0.2);
  border-radius: 3px;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}

.sessionHud .encounterTimer strong {
  color: #79f0ae;
  font-size: clamp(0.72rem, 1.05vw, 1.08rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 8px rgba(68, 235, 145, 0.38);
}

.bottomHud .ultimatePanel {
  display: grid;
  align-content: center;
  gap: 0.45rem;
  background: transparent;
  border: 0;
}

.bottomHud .ultimateTop {
  font-size: inherit;
}

.bottomHud .ultimateTop strong {
  color: #f5f8ff;
  font-size: clamp(0.68rem, 0.86vw, 0.88rem);
  font-variant-numeric: tabular-nums;
}

.bottomHud .ultimateBar {
  height: clamp(7px, 1.15dvh, 11px);
  border-color: rgba(151, 187, 219, 0.38);
}

.spellActionHud {
  display: grid;
  align-items: stretch;
  padding-inline: clamp(5px, 0.65vw, 10px);
}

.bottomHud .cooldowns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(2px, 0.32vw, 5px);
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bottomHud .cooldownItem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  place-items: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 29, 37, 0.98), rgba(7, 11, 16, 0.98));
  border: 1px solid rgba(92, 120, 145, 0.44);
  border-radius: 4px;
  color: #eef5fc;
  cursor: pointer;
}

.bottomHud .cooldownItem:focus-visible {
  outline: 2px solid #78d9ff;
  outline-offset: -2px;
}

.bottomHud .spellIcon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 3px;
  filter: saturate(1.12) brightness(1.06);
}

.bottomHud .spellIconWrap {
  grid-row: 1;
  position: relative;
  display: block;
  width: clamp(42px, 6dvh, 56px);
  height: clamp(42px, 6dvh, 56px);
  max-width: 100%;
  border-radius: 3px;
  overflow: hidden;
}

.bottomHud .cooldownRadial {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  background:
    conic-gradient(from -90deg,
      rgba(7, 11, 18, 0.76) 0 var(--cooldown-sweep, 0%),
      rgba(255, 255, 255, 0.04) var(--cooldown-sweep, 0%) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(204, 226, 255, 0.18),
    inset 0 0 14px rgba(0, 0, 0, 0.66);
  transition: opacity 120ms linear;
}

.bottomHud .cooldownRadial::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(180, 220, 255, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(79, 176, 255, 0.2);
}

.bottomHud .cooldownRadial::after {
  content: none;
}

.bottomHud .spellCooling .cooldownRadial,
.bottomHud .spellAutoCooling .cooldownRadial {
  opacity: 1;
}

.bottomHud .spellIdentity {
  display: contents;
}

.bottomHud .spellIdentity small {
  display: none;
}

.bottomHud .spellName {
  grid-row: 2;
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: clamp(0.5rem, 0.61vw, 0.66rem);
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottomHud .spellControl {
  display: contents;
}

.bottomHud .spellControl kbd,
.bottomHud .autoToggle {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.12rem;
  padding: 0 0.22rem;
  background: rgba(4, 8, 12, 0.9);
  border: 1px solid rgba(218, 232, 245, 0.58);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: #ffffff;
  font-size: clamp(0.46rem, 0.54vw, 0.58rem);
  line-height: 1;
}

.bottomHud .autoToggle {
  grid-template-columns: 1fr;
  color: #83f5a7;
  border-color: rgba(89, 226, 133, 0.75);
}

.bottomHud .autoToggle i {
  display: none;
}

.bottomHud .autoToggle b {
  font-size: inherit;
}

.bottomHud .spellControl strong {
  grid-row: 3;
  min-width: 0;
  width: 100%;
  padding: 1px 2px;
  background: rgba(3, 7, 11, 0.88);
  border: 0;
  border-radius: 2px;
  color: #dce8f4;
  font-size: clamp(0.48rem, 0.58vw, 0.62rem);
  line-height: 1.05;
}

.bottomHud .spellAutoActive {
  border-color: rgba(76, 224, 122, 0.78);
  box-shadow: inset 0 0 0 1px rgba(65, 232, 119, 0.16), 0 0 9px rgba(43, 205, 98, 0.18);
}

.bottomHud .spellAutoActive::after {
  border-radius: 4px;
}

.bottomHud .spellCooling {
  cursor: not-allowed;
}

.bottomHud .spellCooling .spellIcon {
  filter: grayscale(1) brightness(0.42) contrast(0.88);
  opacity: 0.72;
}

.bottomHud .spellAutoCooling .spellIcon {
  filter: saturate(0.9) brightness(0.8);
}

.bottomHud .spellCooling .spellName,
.bottomHud .spellCooling .spellControl strong {
  color: #7f8792;
}

.bottomHud .spellUltimateReady {
  border-color: rgba(118, 225, 255, 0.95);
  animation: ultimateIconReady 1.8s ease-in-out infinite;
}

@keyframes ultimateIconReady {
  0%, 100% { box-shadow: 0 0 6px rgba(91, 206, 255, 0.42), inset 0 0 5px rgba(119, 225, 255, 0.12); }
  50% { box-shadow: 0 0 17px rgba(107, 222, 255, 0.9), inset 0 0 10px rgba(151, 235, 255, 0.28); }
}

.bottomHud .sidebarReadyDot {
  top: 4px;
  left: 4px;
}

.bottomHud .eventLogPanel,
.bottomHud .damagePanel {
  display: grid;
  align-content: stretch;
  gap: 2px;
  padding: clamp(4px, 0.55dvh, 7px);
  overflow: hidden;
  background: transparent;
  border: 0;
}

.bottomHud .damagePanelTitle {
  min-height: 12px;
  color: #e8f0f8;
  font-size: clamp(0.52rem, 0.64vw, 0.68rem);
  line-height: 1;
}

.bottomHud .logPanel {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr)) auto;
  gap: 1px;
  min-height: 0;
  overflow: hidden;
}

.bottomHud .logItem {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 1px 2px;
  overflow: hidden;
  background: rgba(4, 8, 12, 0.36);
  border: 0;
  border-radius: 2px;
  color: #9eabba;
  font-size: clamp(0.45rem, 0.56vw, 0.59rem);
  line-height: 1;
}

.bottomHud .logItem span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottomHud .logAbilityIcon {
  width: clamp(12px, 1.65dvh, 17px);
  height: clamp(12px, 1.65dvh, 17px);
  border-radius: 2px;
}

.logMore {
  color: #7f8c99;
  font-size: clamp(0.44rem, 0.52vw, 0.56rem);
  font-weight: 800;
}

.bottomHud .damageMeter {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}

.bottomHud .damageRow {
  gap: 1px;
  min-height: 0;
  padding-left: 3px;
}

.bottomHud .damageRowTop {
  font-size: clamp(0.46rem, 0.58vw, 0.62rem);
  line-height: 1;
}

.bottomHud .damageTrack {
  height: 2px;
}

@media (max-width: 1200px) {
  .bottomHud {
    grid-template-columns: 135px 90px minmax(390px, 2.5fr) minmax(175px, 1.1fr) minmax(145px, 0.9fr);
  }

  .sessionDetails {
    gap: 0.3rem;
  }

}

@media (max-height: 700px) {
  :root {
    --game-hud-height: 82px;
  }

  .bottomHud .spellIcon {
    width: 36px;
    height: 36px;
  }
}

/* === Custom additions === */

#arena {
  cursor: none;
}

body:not(.inGame) #arena {
  cursor: crosshair;
}

.sessionHud .sessionDetails .bossModeIndicator strong {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.15;
  font-size: clamp(0.6rem, 0.74vw, 0.78rem);
  word-break: break-word;
}

.sessionHudButtons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
}

.sessionHudButtons button {
  width: 100%;
  padding: 0.34rem 0.55rem;
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  line-height: 1;
  border-radius: 4px;
}

.restartMatchButton {
  background: linear-gradient(#3a5b2a, #21391a);
  border: 1px solid rgba(132, 217, 99, 0.55);
  color: #f4ffe8;
}

.pauseGameButton {
  background: linear-gradient(#324059, #1f2840);
  border: 1px solid rgba(122, 174, 245, 0.5);
  color: #e8efff;
}

.settingsButton {
  background: linear-gradient(#363b46, #24272f);
  border: 1px solid rgba(180, 200, 220, 0.4);
  color: #eef2f8;
}

.settingsButtonGame {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 4px;
}

.lobbyBossModeBanner {
  display: grid;
  gap: 0.18rem;
  align-content: center;
  padding: 0.55rem 0.8rem;
  margin-left: 0.85rem;
  background: rgba(7, 12, 18, 0.75);
  border: 1px solid rgba(120, 140, 170, 0.35);
  border-radius: 6px;
  min-width: 180px;
}

.lobbyBossModeBanner small {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8fa0b2;
}

.lobbyBossModeBanner strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #79f0ae;
}

.lobbyBossModeBanner.lobbyBossModeHard strong {
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 90, 90, 0.45);
}

.colorChoiceRow {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.colorChoiceRow .colorChoice {
  flex: 1 1 auto;
  min-width: 0;
}

.confirmModal {
  z-index: 6000 !important;
}

.settingsAction {
  margin-top: 0.4rem;
}

.popupStack {
  position: fixed;
  z-index: 5200;
  top: 12%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
  width: min(360px, calc(100% - 2rem));
}

.popupItem {
  display: grid;
  justify-items: center;
  gap: 0.24rem;
  width: 100%;
  padding: 0.85rem 1.15rem;
  color: #fff5ca;
  text-align: center;
  background: rgba(15, 20, 18, 0.94);
  border: 1px solid rgba(116, 226, 133, 0.72);
  border-radius: 6px;
  box-shadow: 0 0 26px rgba(80, 211, 112, 0.25), 0 12px 35px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

.popupItem small {
  color: #83e79b;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.popupItem strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.popupItem span {
  color: #edf6ef;
  font-size: 0.76rem;
  font-weight: 800;
}

.popupItemVisible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.popupItemFading {
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
}

.endBannerActions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.pauseOverlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(4, 7, 12, 0.7);
  backdrop-filter: blur(2px);
}

.pauseOverlayInner {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  padding: 1.6rem 2.2rem;
  background: rgba(15, 20, 27, 0.96);
  border: 1px solid rgba(122, 174, 245, 0.55);
  border-radius: 10px;
  color: #e8efff;
  text-align: center;
}

.pauseOverlayInner strong {
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pauseOverlayInner span {
  color: #b6c4d8;
  font-size: 0.85rem;
}

.settingsWindow {
  width: min(540px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  display: grid;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background: #171c23;
  border: 1px solid #485363;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  overflow: auto;
}

.settingsWindow header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.settingsWindow header small {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
}

.settingsWindow header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.modalCloseButton {
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.6rem;
}

.settingsBody {
  display: grid;
  gap: 0.75rem;
}

.settingsTabs {
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid #2a313c;
  padding-bottom: 0.4rem;
}

.settingsTab {
  background: transparent;
  color: var(--muted);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

.settingsTab.selected {
  background: #2a313c;
  color: #fff;
}

.audioSettingRow {
  display: grid;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2a313c;
  border-radius: 8px;
}

.audioSettingLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #e6e9ef;
}

.audioSettingValue {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.2rem;
  text-align: right;
}

.audioSlider {
  width: 100%;
  accent-color: #6ad0ff;
  cursor: pointer;
}

.settingsHint {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.keybindList {
  display: grid;
  gap: 0.4rem;
}

.keybindRow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background: #0e1116;
  border: 1px solid #2a313c;
  border-radius: 6px;
}

.keybindLabel {
  font-weight: 700;
}

.keybindField {
  background: #1f2530;
  border: 1px solid #3b4452;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  min-width: 90px;
  color: #eef3f8;
}

.keybindField:hover {
  border-color: #6b7a90;
}

.keybindField.keybindListening {
  border-color: #ffcf5a;
  background: #2c2716;
  color: #ffcf5a;
}

.keybindField kbd {
  font-family: inherit;
  font-weight: 700;
}

.keybindMessage {
  margin: 0;
  min-height: 1em;
  color: #8be0a4;
  font-size: 0.78rem;
}

.keybindMessage.keybindMessageError {
  color: #ff8a8a;
}

.settingsFooter {
  gap: 0.5rem;
}

#saveKeybindsBtn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.settingsFooter {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

/* === Mastery tree v2 (two trees, connectors) === */
.masteryTreesContainer {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
}
.masteryTreePanel {
  background: rgba(8, 14, 22, 0.55);
  border: 1px solid #2a313c;
  border-radius: 8px;
  padding: 10px 12px 14px;
}
.masteryTreeHeader h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #cfd8e3;
}
.masteryTreeBody {
  position: relative;
}
.masteryConnectorLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.masteryConnector {
  stroke: #4a5060;
  stroke-width: 2;
  stroke-dasharray: 4 4;
}
.masteryConnectorActive {
  stroke: #f7c66b;
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(247, 198, 107, 0.5));
}
.masteryRow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.masteryRowMeta {
  display: grid;
  gap: 2px;
  text-align: right;
}
.masteryRowMeta strong { color: #f4d28a; font-size: 0.8rem; }
.masteryRowMeta small { color: var(--muted); font-size: 0.65rem; }
.masteryNodeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.masteryNodeRow .masteryNode {
  width: 110px;
  min-height: 78px;
  display: grid;
  grid-template-rows: 36px auto auto;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
}
.masteryNodeName {
  font-size: 0.7rem;
  font-weight: 700;
  color: #e8eef7;
  line-height: 1.1;
}
.masteryNode .masteryCostBadge {
  position: static;
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffe9a3;
}
.masteryRowLocked .masteryNode { opacity: 0.45; cursor: not-allowed; }

/* === Mastery tree v2 sizing overrides === */
.masteryWindow {
  width: min(1400px, 96vw) !important;
  max-height: min(96vh, 920px) !important;
  padding: 0.85rem 1rem;
}
.masteryTreeContent {
  gap: 0.45rem;
}
.masterySummary { font-size: 0.7rem; padding: 0.45rem 0.6rem; }
.masteryMessage { min-height: 0.85rem; }
.masteryRows {
  overflow: auto;
  padding-right: 0.15rem;
}
.masteryTreesContainer {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: start;
}
.masteryTreePanel {
  padding: 8px 10px 10px;
}
.masteryTreeHeader h3 { margin: 0 0 6px; font-size: 0.85rem; }
.masteryRow {
  grid-template-columns: 60px 1fr;
  gap: 8px;
  padding: 4px 0;
}
.masteryRowMeta strong { font-size: 0.7rem; }
.masteryRowMeta small { font-size: 0.58rem; }
.masteryNodeRow { gap: 6px; }
.masteryNodeRow .masteryNode {
  position: relative;
  width: 74px;
  min-height: 90px;
  grid-template-rows: 54px auto auto;
  gap: 2px;
  padding: 4px 3px;
}
.masteryNodeRow .masteryNodeArt {
  position: relative;
  inset: auto;
  width: 54px;
  height: 52px;
  margin: 0 auto;
  background-size: 275px 184px;
  background-position:
    calc(var(--mastery-icon-x, 0px) * 0.464)
    calc(var(--mastery-icon-y, 0px) * 0.464);
}
.masteryNodeRow .masteryNodeName {
  font-size: 0.62rem;
  line-height: 1.05;
  word-break: break-word;
}
.masteryNodeRow .masteryNode .masteryCostBadge {
  position: static;
  font-size: 0.56rem;
  padding: 0 5px;
}
.masteryNodeRow .masteryNode::after { content: none; }

@media (max-width: 1100px) {
  .masteryTreesContainer { grid-template-columns: 1fr; }
}

/* === Mastery tree v3 ultra-compact === */
.masteryWindow {
  width: min(1320px, 96vw) !important;
  max-height: min(96vh, 880px) !important;
  padding: 0.6rem 0.8rem !important;
  gap: 0.4rem !important;
}
.masteryWindow > header {
  padding-bottom: 0.4rem;
}
.masteryWindow h2 { font-size: 1rem !important; }
.masteryWindow header small { font-size: 0.58rem; }
.masteryTreeContent {
  gap: 0.3rem;
}
.masterySummary {
  padding: 0.3rem 0.55rem;
  font-size: 0.64rem;
}
.masteryMessage { font-size: 0.62rem; min-height: 0.75rem; }
.masteryRows {
  overflow: visible;
  padding-right: 0;
}
.masteryFooter { padding-top: 0.3rem !important; }
.resetMasteryButton { padding: 0.32rem 0.7rem !important; font-size: 0.7rem !important; }

.masteryTreesContainer {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1.05fr);
  gap: 8px;
  align-items: start;
}
.masteryTreePanel { padding: 6px 8px 8px; }
.masteryTreeHeader h3 {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.masteryRow {
  grid-template-columns: 44px 1fr;
  gap: 6px;
  padding: 2px 0;
}
.masteryRowMeta strong { font-size: 0.62rem; }
.masteryRowMeta small { font-size: 0.5rem; }

.masteryNodeRow { gap: 4px; flex-wrap: nowrap; }
.masteryNodeRow .masteryNode {
  width: 58px;
  min-height: 76px;
  grid-template-rows: 46px auto auto;
  gap: 1px;
  padding: 3px 2px;
  border-radius: 4px;
}
.masteryNodeRow .masteryNodeArt {
  position: relative;
  inset: auto;
  width: 46px;
  height: 44px;
  margin: 0 auto;
  background-size: 235px 157px;
  background-position:
    calc(var(--mastery-icon-x, 0px) * 0.397)
    calc(var(--mastery-icon-y, 0px) * 0.397);
}
.masteryNodeRow .masteryNodeName {
  font-size: 0.55rem;
  line-height: 1;
  word-break: break-word;
  text-align: center;
}
.masteryNodeRow .masteryNode .masteryCostBadge {
  font-size: 0.52rem;
  padding: 0 4px;
  line-height: 1.2;
}

@media (max-width: 1000px) {
  .masteryTreesContainer { grid-template-columns: 1fr; }
  .masteryRows { overflow: auto; }
}

/* === Mastery tree v4 centered, content-sized === */
.masteryWindow {
  width: min(1100px, 96vw) !important;
}
.masteryTreesContainer {
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  padding: 6px 8px 8px;
  box-sizing: border-box;
}
.masteryTreePanel {
  flex: 0 0 auto;
  padding: 6px 10px 8px;
}
.masteryTreePanel-main { max-width: 560px; }
.masteryTreePanel-support { max-width: 320px; }

.masteryRow {
  grid-template-columns: 36px auto;
  gap: 6px;
  padding: 2px 0;
  justify-content: start;
}
.masteryRowMeta { padding-right: 0; }
.masteryNodeRow {
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* Make sure the rows panel doesn't clip nodes */
.masteryRows { overflow: visible; padding: 0; }
.masteryTreeContent { overflow: visible; }

/* Header/footer spacing */
.masteryTreeContent { gap: 0.45rem; }
.masterySummary { margin-bottom: 0.15rem; }
.masteryFooter { margin-top: 0.35rem; }

@media (max-width: 980px) {
  .masteryTreesContainer { flex-direction: column; align-items: center; }
}

/* === Mastery tree v5: flex-column modal + JS auto-fit === */
.masteryWindow {
  display: flex !important;
  flex-direction: column;
  height: min(96vh, 760px) !important;
  max-height: 96vh !important;
  box-sizing: border-box;
  overflow: hidden;
}
.masteryWindow > header { flex: 0 0 auto; }
.masteryTreeContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
}
.masterySummary { flex: 0 0 auto; }
.masteryMessage { flex: 0 0 auto; }
.masteryFooter { flex: 0 0 auto; }
.masteryRows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* The JS scaler sets explicit transform/size; keep it a centered block. */
.masteryTreesContainer {
  margin: 0 auto;
}

/* Keep the tree block at natural size before JS scales it (prevents flex shrink skewing measurement) */
.masteryRows > .masteryTreesContainer { flex: 0 0 auto; }

/* === Mastery tree v6: square nodes, tighter block === */
.masteryNodeRow .masteryNode {
  width: 60px;
  min-height: auto;
  grid-template-rows: 56px auto auto;
  gap: 2px;
  padding: 3px;
}
/* Square icon frame */
.masteryNodeRow .masteryNodeArt {
  width: 54px;
  height: 54px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 4px;
  /* Uniform sprite scale (same factor on X and Y) so artwork never stretches. */
  background-size: 270px 180px;
  background-position:
    calc(var(--mastery-icon-x, 0px) * 0.4655)
    calc(var(--mastery-icon-y, 0px) * 0.4655);
}
.masteryNodeRow .masteryNodeName { font-size: 0.56rem; }

/* Hug content; small gap between the two trees */
.masteryTreesContainer { gap: 22px; padding: 4px 6px; }
.masteryTreePanel { padding: 6px 8px; }
.masteryTreePanel-main { max-width: none; }
.masteryTreePanel-support { max-width: none; }
.masteryRow { grid-template-columns: 34px auto; gap: 6px; padding: 3px 0; }
.masteryNodeRow { gap: 5px; }

/* === Mastery tree v7: fully square card, label outside === */
.masteryNodeRow { gap: 8px; align-items: flex-start; }
.masteryNodeCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
}
/* The clickable card is a perfect square — text never affects its height */
.masteryNodeRow .masteryNode {
  width: 76px;
  height: 76px;
  min-height: 0;
  display: block;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
}
.masteryNodeRow .masteryNodeArt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  /* Uniform sprite scale (X and Y equal) so artwork never stretches.
     Sprite sheet is 593x396 with ~118px cells; scale so a cell ~= 76px. */
  background-size: 382px 255px;
  background-position:
    calc(var(--mastery-icon-x, 0px) * 0.6585)
    calc(var(--mastery-icon-y, 0px) * 0.6585);
}
.masteryNodeRow .masteryNode .masteryCostBadge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 0.6rem;
  padding: 0 5px;
  line-height: 1.3;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffe9a3;
}
.masteryNodeRow .masteryNode::after { content: none; }
.masteryNodeCell .masteryNodeName {
  margin-top: 3px;
  font-size: 0.58rem;
  line-height: 1.05;
  text-align: center;
  color: #e8eef7;
  word-break: break-word;
}
.masteryRowLocked .masteryNodeCell { opacity: 0.5; }

/* === Mastery tree v8: final polish === */
/* Slightly larger square nodes (~12%) */
.masteryNodeCell { width: 86px; }
.masteryNodeRow .masteryNode { width: 86px; height: 86px; }
.masteryNodeRow .masteryNodeArt {
  background-size: 432px 289px;
  background-position:
    calc(var(--mastery-icon-x, 0px) * 0.745)
    calc(var(--mastery-icon-y, 0px) * 0.745);
}
.masteryNodeRow .masteryNode .masteryCostBadge { font-size: 0.64rem; }

/* Readable labels with clean 2-line wrap */
.masteryNodeCell .masteryNodeName {
  margin-top: 4px;
  font-size: 0.66rem;
  line-height: 1.12;
  max-width: 86px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Locked: darken the icon card only, keep the name legible */
.masteryRowLocked .masteryNodeCell { opacity: 1; }
.masteryRowLocked .masteryNodeCell .masteryNodeName,
.masteryNodeLocked + .masteryNodeName { color: #aab4c1; }

/* Use modal space better: tighten gaps, balance the two panels vertically */
.masteryTreeContent { gap: 0.3rem; }
.masterySummary { margin-bottom: 0; }
.masteryMessage:empty { display: none; }
.masteryRows { align-items: center; padding-top: 2px; }
.masteryTreesContainer { align-items: center; gap: 26px; }
.masteryTreePanel { padding: 8px 10px; }

/* ===== Mastery tree v9: stone frame, circular nodes, aligned support rows ===== */
.masteryWindow {
  background:
    linear-gradient(180deg, rgba(30, 25, 18, 0.95) 0%, rgba(18, 15, 10, 0.98) 100%) !important;
  border: 3px solid #5a4a32 !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 3px rgba(90, 74, 50, 0.25),
    inset 0 0 50px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(0, 0, 0, 0.8) !important;
}

.masteryWindow::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(120, 95, 55, 0.2);
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
}

.masteryWindow > header {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.5rem 0.55rem !important;
  border-bottom: 1px solid rgba(120, 95, 55, 0.35) !important;
}

.masteryWindow > header > div {
  text-align: center;
}

.masteryWindow header small {
  display: block !important;
  color: #8a7d6a;
  font-size: 0.55rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.masteryWindow h2 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.35rem !important;
  color: #e8d5a8 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

.masteryWindow > header .modalCloseButton {
  position: absolute;
  right: 0.5rem;
  top: 0.4rem;
}

.masterySummary {
  position: relative;
  z-index: 1;
  text-align: center !important;
  justify-content: center !important;
  background: rgba(12, 10, 7, 0.6) !important;
  border-color: rgba(100, 80, 45, 0.3) !important;
  color: #b8a882 !important;
  font-size: 0.65rem !important;
}

.masteryTreePanel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 6px !important;
}

.masteryTreePanel-main {
  border-right: 1px solid rgba(100, 80, 45, 0.25) !important;
  padding-right: 18px !important;
}

.masteryTreeHeader h3 {
  text-align: center;
  color: #d4c5a0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(120, 95, 55, 0.22);
  margin-bottom: 8px !important;
}

.masteryTreePanel-support .masteryTreeBody {
  padding-top: 101px;
}

.masteryNodeCell { width: 80px !important; }

.masteryNodeRow .masteryNode {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 2px solid #4a4035 !important;
  background: rgba(12, 10, 8, 0.9) !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.masteryNodeRow .masteryNodeArt {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  transform: scale(1.25);
}

.masteryNodeAvailable {
  border-color: #8b7a52 !important;
}

.masteryNodeAvailable:hover,
.masteryNodeAvailable:focus-visible {
  border-color: #c9a855 !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(200, 165, 70, 0.3),
    0 0 20px rgba(200, 165, 70, 0.15) !important;
  transform: translateY(-1px);
}

.masteryNodeUnlocked {
  border-color: #e8c45a !important;
  background: rgba(20, 16, 8, 0.95) !important;
  box-shadow:
    inset 0 0 8px rgba(255, 200, 60, 0.12),
    0 0 12px rgba(255, 200, 70, 0.5),
    0 0 28px rgba(255, 180, 40, 0.22) !important;
}

.masteryNodeLocked {
  opacity: 0.7 !important;
}

.masteryNodeLocked .masteryNodeArt {
  filter: grayscale(0.85) brightness(0.45) contrast(1.1) !important;
}

.masteryNodeCell .masteryNodeName {
  margin-top: 5px !important;
  font-size: 0.58rem !important;
  color: #c8bda0 !important;
  line-height: 1.1 !important;
  max-width: 80px !important;
}

.masteryNodeUnlocked + .masteryNodeName {
  color: #f0dca0 !important;
}

.masteryRowLocked .masteryNodeCell .masteryNodeName,
.masteryNodeLocked + .masteryNodeName {
  color: #7a7468 !important;
}

.masteryRow {
  grid-template-columns: 30px auto !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

.masteryRowMeta strong {
  font-size: 0.58rem !important;
  color: #b8a57a !important;
}

.masteryRowMetaEmpty {
  visibility: hidden;
}

.masteryConnector {
  stroke: #3a3428 !important;
  stroke-width: 2 !important;
  stroke-dasharray: none !important;
}

.masteryConnectorActive {
  stroke: #c9a44a !important;
  stroke-width: 2.5 !important;
  filter: drop-shadow(0 0 3px rgba(200, 165, 70, 0.4)) !important;
}

.masteryFooter {
  position: relative;
  z-index: 1;
  border-top-color: rgba(100, 80, 45, 0.3) !important;
}

.resetMasteryButton {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem !important;
  background: linear-gradient(180deg, #3a2e1e, #241c12) !important;
  border: 1px solid rgba(140, 110, 55, 0.45) !important;
  border-radius: 4px !important;
  color: #d4c5a0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.resetMasteryButton:hover {
  background: linear-gradient(180deg, #4a3a24, #2e2216) !important;
  border-color: rgba(180, 145, 70, 0.55) !important;
}

.masteryNodeRow .masteryNode .masteryCostBadge {
  display: none !important;
}

@media (max-width: 980px) {
  .masteryTreePanel-main {
    border-right: none !important;
    border-bottom: 1px solid rgba(100, 80, 45, 0.25) !important;
    padding-right: 6px !important;
    padding-bottom: 12px !important;
  }
  .masteryTreePanel-support .masteryTreeBody {
    padding-top: 0;
  }
}

/* ===== Admin Panel ===== */
.accountBarActions { display: flex; gap: 0.5rem; align-items: center; }
.adminPanelButton { background: linear-gradient(135deg, #4a1a3a, #2a0f24); color: #ffd1f0; border: 1px solid #8e3d76; }
.adminPanelButton:hover { background: linear-gradient(135deg, #5a2148, #3a1530); }

.adminPanelWindow {
  position: relative;
  width: min(1180px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #1a0d18 0%, #16131c 60%, #0e0b14 100%);
  border: 1px solid #5a3a5e;
  border-radius: 14px;
  padding: 1.1rem 1.3rem 1.3rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 200, 240, 0.05);
  overflow: hidden;
}
.adminPanelWindow > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(180, 110, 170, 0.25);
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
}
.adminPanelWindow > header small { color: #c69cd0; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
.adminPanelWindow > header h2 { margin: 0.1rem 0 0; color: #ffd9f3; font-family: Cinzel, Georgia, serif; }

.adminTabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(180, 110, 170, 0.2);
  margin-bottom: 0.6rem;
}
.adminTab {
  background: transparent;
  color: #c8a8d0;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 0.45rem 0.85rem;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.adminTab:hover { background: rgba(120, 70, 110, 0.18); color: #ffe3f4; }
.adminTab.selected {
  background: linear-gradient(180deg, rgba(120, 60, 110, 0.32), rgba(60, 30, 70, 0.45));
  color: #fff0fb;
  border-color: rgba(180, 110, 170, 0.35);
}

.adminMessage {
  min-height: 1.1rem;
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  color: #d0b6d8;
}
.adminMessage[data-kind="success"] { color: #8be7ad; }
.adminMessage[data-kind="error"]   { color: #ff8d92; }

.adminPanelBody {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.adminToolbar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  align-items: center;
}
.adminToolbar input[type="search"] {
  flex: 1;
  background: rgba(20, 12, 24, 0.85);
  border: 1px solid #4d3550;
  color: #f3e8f7;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}

.adminTableWrap { width: 100%; overflow: auto; }
.adminTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  color: #ebd9ee;
}
.adminTable th, .adminTable td {
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid rgba(140, 90, 140, 0.18);
  text-align: left;
  vertical-align: top;
}
.adminTable th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #c69cd0;
  background: rgba(40, 18, 40, 0.55);
}
.adminTable tbody tr:hover { background: rgba(120, 60, 120, 0.08); }
.adminTable small { color: rgba(220, 200, 230, 0.65); }
.adminTable code { background: rgba(80, 40, 80, 0.3); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.78rem; }

.adminRoleBadge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.adminRoleBadge--admin { background: linear-gradient(135deg, #b54a8a, #6e2658); color: #fff0fa; }
.adminRoleBadge--player { background: rgba(120, 110, 140, 0.32); color: #d8d0e2; }

.adminActionsCell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.adminAction {
  background: linear-gradient(180deg, #3a2538, #261628);
  color: #f3e3f8;
  border: 1px solid #5a3a5c;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.adminAction:hover { background: linear-gradient(180deg, #4a2f48, #321b34); }
.adminAction--warn { border-color: #b86a3a; color: #ffd9b5; background: linear-gradient(180deg, #4a2a18, #2d1810); }
.adminAction--warn:hover { background: linear-gradient(180deg, #5e3422, #3a1d12); }
.adminAction--danger { border-color: #c93340; color: #ffd5d8; background: linear-gradient(180deg, #4a161c, #2c0c10); }
.adminAction--danger:hover { background: linear-gradient(180deg, #66202a, #3c1018); }

.adminEmpty {
  text-align: center;
  padding: 1.4rem 0;
  color: rgba(220, 200, 230, 0.5);
  font-style: italic;
}

.adminRoomList { display: flex; flex-direction: column; gap: 0.7rem; }
.adminRoomCard {
  background: rgba(28, 16, 32, 0.7);
  border: 1px solid rgba(140, 90, 140, 0.3);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}
.adminRoomCard header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.adminRoomCard header strong { color: #ffd1f0; font-size: 1.05rem; letter-spacing: 0.07em; }
.adminRoomCard header small { display: block; color: rgba(220, 200, 230, 0.65); font-size: 0.72rem; }
.adminRoomPlayers { list-style: none; padding: 0; margin: 0 0 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.adminRoomPlayers li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(40, 24, 44, 0.55);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
}
.adminRoomPlayers li strong { color: #efe0f4; }
.adminRoomPlayerSwatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.adminRoomTag {
  font-size: 0.66rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: rgba(120, 70, 130, 0.4);
  color: #f6e6fa;
  letter-spacing: 0.04em;
}
.adminRoomTag--ready { background: rgba(60, 130, 80, 0.55); color: #e3ffe9; }
.adminRoomMeta { color: rgba(220, 200, 230, 0.55); }
.adminRoomPlayers li .adminAction { margin-left: auto; }

.adminAnnouncementForm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.adminAnnouncementForm textarea {
  background: rgba(20, 12, 24, 0.9);
  border: 1px solid #4d3550;
  color: #f3e8f7;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
}
.adminAnnouncementFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adminAnnouncementFooter small { color: rgba(220, 200, 230, 0.55); }
.adminHint { color: rgba(220, 200, 230, 0.65); font-size: 0.8rem; margin: 0 0 0.7rem; }

/* Global admin broadcast banner */
.adminBroadcast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  max-width: min(560px, 92vw);
  padding: 0.65rem 1.1rem;
  background: linear-gradient(135deg, rgba(80, 24, 70, 0.95), rgba(40, 12, 36, 0.95));
  border: 1px solid #b34a8a;
  border-radius: 12px;
  color: #ffe3f4;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 18px rgba(200, 80, 160, 0.35);
  text-align: center;
  pointer-events: none;
}
.adminBroadcast strong {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffaee0;
}
.adminBroadcast span { font-size: 0.95rem; line-height: 1.3; }

.adminMaintenanceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
}
.adminMaintenanceCard {
  background: rgba(28, 16, 32, 0.7);
  border: 1px solid rgba(140, 90, 140, 0.3);
  border-radius: 10px;
  padding: 0.7rem 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.adminMaintenanceCard header { display: flex; flex-direction: column; gap: 0.2rem; }
.adminMaintenanceCard header strong { color: #ffd1f0; font-size: 0.95rem; }
.adminMaintenanceCard header small { color: rgba(220, 200, 230, 0.65); font-size: 0.74rem; line-height: 1.3; }
.adminMaintenanceCard button { align-self: flex-start; }
.adminBossToggleList { display: flex; flex-direction: column; gap: 0.4rem; }
.adminBossToggleRow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.04); }
.adminBossToggleRow span { color: #e0d6f0; font-size: 0.82rem; font-weight: 500; }
.adminBossToggleBtn { padding: 0.25rem 0.7rem; border-radius: 5px; font-size: 0.72rem; font-weight: 600; cursor: pointer; border: 1px solid; transition: background 0.15s, border-color 0.15s; }
.adminBossToggleBtn[data-enabled="true"] { background: linear-gradient(180deg, #1e5a2a, #133d1a); border-color: #3a9b55; color: #b8f5c8; }
.adminBossToggleBtn[data-enabled="true"]:hover { background: linear-gradient(180deg, #267034, #184a20); }
.adminBossToggleBtn[data-enabled="false"] { background: linear-gradient(180deg, #4a161c, #2c0c10); border-color: #c93340; color: #ffd5d8; }
.adminBossToggleBtn[data-enabled="false"]:hover { background: linear-gradient(180deg, #66202a, #3c1018); }

/* ===== Lobby top header (compact, polished fantasy) =====
   Wraps account bar + brand + progression panel in a single framed group so the
   three pieces read as one ornate banner instead of disconnected boxes. */
.lobbyHeader {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem 0.7rem;
  margin-bottom: 0.25rem;
  background:
    radial-gradient(ellipse at top, rgba(255, 220, 150, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(40, 30, 18, 0.55), rgba(20, 14, 8, 0.55));
  border: 1px solid #6b5436;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(232, 188, 112, 0.18),
    inset 0 0 28px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.45);
}
/* Forged corner pegs — subtle metallic dots at each corner. */
.lobbyHeader::before,
.lobbyHeader::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, #f1d28f, #6c4a23 70%, #2b1c0d);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.lobbyHeader::before { left: -3px; }
.lobbyHeader::after { right: -3px; }

/* Compact account strip at the very top. */
.lobbyHeader .accountBar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.32rem 0.55rem;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(90deg, #2a1d12 0 96px, #251a10 97px 100px);
  border: 1px solid #5a4226;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(232, 188, 112, 0.1);
}
.lobbyHeader .accountBarIdentity {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
}
.lobbyHeader .accountBarIdentity span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b09877;
  white-space: nowrap;
}
.lobbyHeader .accountBarIdentity strong {
  font-size: 0.82rem;
  color: #fff3cf;
  text-shadow: 0 1px 2px #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobbyHeader .accountBar button {
  padding: 0.28rem 0.55rem;
  font-size: 0.66rem;
  line-height: 1.05;
}

.lobbyHeader .accountBar .settingsButton {
  color: #f1f6ff;
  background:
    linear-gradient(180deg, rgba(220, 232, 250, 0.14), rgba(0, 0, 0, 0.22)),
    linear-gradient(#363b46, #24272f);
  border-color: rgba(180, 200, 220, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(220, 232, 250, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.32);
}

.lobbyHeader .accountBar .settingsButton:hover {
  border-color: rgba(219, 231, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(230, 240, 255, 0.22),
    0 0 12px rgba(143, 179, 231, 0.18);
}

/* Brand block: tighter logo, ornament lines flanking the title. */
.lobbyHeader .brandCompact {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 0.7rem;
  padding: 0.15rem 0 0.25rem;
  text-align: center;
}
.lobbyHeader .brandCompact .raidLogoCrop {
  width: min(100%, 240px);
  aspect-ratio: 2.4 / 1;
  filter: drop-shadow(0 2px 8px rgba(255, 120, 50, 0.22));
}
.lobby:not(.lobbyPreRoom) .lobbyHeader .brandCompact .raidLogoCrop {
  width: min(100%, 200px);
}
.lobbyHeader .brandCompact p {
  grid-column: 1 / -1;
  margin: 0;
  color: #d2c29f;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
.brandOrnament {
  display: block;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(232, 188, 112, 0.65) 30% 70%, transparent);
  position: relative;
}
.brandOrnament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: radial-gradient(circle, #f1d28f, #7d572a 70%, #2b1c0d);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255, 200, 120, 0.6);
}
.brandOrnamentLeft::after { right: 0; }
.brandOrnamentRight::after { left: 0; }

/* Progression panel — clean two-row layout that visually merges level, XP,
   crystals and the three action buttons. Overrides earlier grid-based layout. */
.lobbyHeader .classProgressPanel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.05)),
    repeating-linear-gradient(90deg, #2c1d11 0 96px, #261a10 97px 100px);
  border: 1px solid #6e5230;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(232, 188, 112, 0.14);
}

.lobbyHeader .classProgressPanel .lobbyHelpCorner {
  position: absolute;
  right: 0.25rem;
  bottom: 0.22rem;
  z-index: 3;
  padding: 0;
}
.lobbyHeader .progressionLeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}
.levelBadge {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 0.25rem 0.7rem;
  background:
    linear-gradient(180deg, rgba(255, 220, 150, 0.18), rgba(0, 0, 0, 0.4)),
    linear-gradient(135deg, #43321b, #2a1e10);
  border: 1px solid #b5894a;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, 0.22), 0 2px 4px rgba(0, 0, 0, 0.45);
  min-width: 84px;
}
.levelBadge small {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b09877;
  line-height: 1;
}
.levelBadge strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  color: #fff1c2;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(245, 198, 112, 0.45);
  margin-top: 1px;
  white-space: nowrap;
}

.classXPColumn {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.lobbyHeader .classXPColumn .classXPTrack {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  background: linear-gradient(180deg, #050608, #0c121a);
  border: 1px solid #527ca5;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 188, 112, 0.15);
}
.lobbyHeader .classXPColumn .classXPTrack span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2469a6, #66c8ff 70%, #b6ecff);
  box-shadow: 0 0 10px rgba(76, 177, 255, 0.55);
  transition: width 220ms ease;
}
.lobbyHeader .classXPColumn #classXPHover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.lobbyHeader .classXPColumn .classXPTrack:hover #classXPHover { opacity: 1; }
.lobbyHeader .classXPColumn #classXPText {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: #b8a279;
  text-align: center;
}

.lobbyHeader .crystalCounter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  color: #d7edff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2));
  border: 1px solid #325f8a;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(160, 220, 255, 0.18), 0 0 8px rgba(76, 177, 255, 0.18);
  text-shadow: 0 0 6px rgba(71, 183, 255, 0.55);
}
.lobbyHeader .crystalCounter span {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: #9ec5e8;
  text-transform: uppercase;
}
.lobbyHeader .crystalCounter b {
  color: #b8eaff;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

/* Equal-sized, visually-cohesive action row. */
.lobbyHeader .progressionActionRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
  .lobbyHeader .progressionActionRow button {
    width: 100%;
    min-width: 0;
    padding: 0.42rem 0.32rem;
    font-size: 0.64rem;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  color: #3b2814;
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.18), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, #c19a5a, #d8be84 50%, #c19a5a);
  border: 1px solid #7b542b;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 178, 0.55),
    inset 0 -2px 6px rgba(85, 50, 18, 0.4),
    0 2px 5px rgba(0, 0, 0, 0.35);
  transition: filter 110ms ease, transform 110ms ease;
}
.lobbyHeader .progressionActionRow button:hover { filter: brightness(1.08); }
.lobbyHeader .progressionActionRow button:active { transform: translateY(1px); }

.lobbyHeader .progressionActionRow #bossGuideBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  color: #ffe4a8;
  background:
    linear-gradient(90deg, rgba(58, 31, 13, 0.72) 0 14%, transparent 15%),
    linear-gradient(180deg, #8c5a2b, #3b2414);
  border-color: #b98743;
  text-shadow: 0 1px 1px #000;
}

.lobbyHeader .progressionActionRow #bossGuideBtn i {
  position: relative;
  width: 0.86rem;
  height: 0.68rem;
  flex: 0 0 auto;
  border: 1px solid #e1bd72;
  border-radius: 2px 4px 4px 2px;
  background:
    linear-gradient(90deg, #4e2f18 0 14%, #c79042 15% 21%, #f0d38d 22% 100%);
  box-shadow: inset -2px 0 0 rgba(95, 55, 22, 0.42), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.lobbyHeader .progressionActionRow #bossGuideBtn i::after {
  content: "";
  position: absolute;
  left: 0.18rem;
  top: 0.1rem;
  bottom: 0.1rem;
  border-left: 1px solid rgba(63, 38, 21, 0.58);
}
.lobbyHeader .progressionActionRow .settingsButton {
  /* Settings still belongs to the same family — slightly cooler tint. */
  color: #1f2733;
  background:
    linear-gradient(180deg, rgba(220, 232, 250, 0.18), rgba(0, 0, 0, 0.2)),
    linear-gradient(90deg, #6e7b94, #99aac5 50%, #6e7b94);
  border-color: #41506b;
  box-shadow:
    inset 0 0 0 1px rgba(220, 232, 250, 0.55),
    inset 0 -2px 6px rgba(20, 28, 42, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.35);
}

/* Neutralise the legacy progressionActions / scoreboardAction / settingsAction
   grid placement now that the buttons live in a single flex/grid row. */
.lobbyHeader .classProgressPanel .progressionActions,
.lobbyHeader .classProgressPanel .scoreboardAction,
.lobbyHeader .classProgressPanel .settingsAction { display: none; }

/* ===== Arena PvP ===== */
.roomModeChoice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c8d4e0;
  font-size: 13px;
  margin-right: 10px;
}
.roomModeChoice select {
  padding: 6px 10px;
  border-radius: 6px;
  background: #1d2735;
  color: #e8eef5;
  border: 1px solid #364457;
}

.roomActions .roomModeChoice {
  display: none;
}

.roomConfigRow {
  display: grid;
  grid-template-columns: minmax(10rem, 0.82fr) minmax(12rem, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
}

.roomConfigRow .roomModeChoice,
.roomConfigRow .hostBossControls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  padding: 0.32rem 0.42rem;
  border: 1px solid rgba(116, 85, 47, 0.72);
  border-radius: 3px;
  background:
    linear-gradient(rgba(255, 213, 136, 0.035), rgba(0, 0, 0, 0.12)),
    rgba(18, 15, 10, 0.76);
  color: #b99357;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: none;
}

.roomConfigRow .hostBossControls {
  border-color: rgba(116, 85, 47, 0.72);
  border-radius: 3px;
  background:
    linear-gradient(rgba(255, 213, 136, 0.035), rgba(0, 0, 0, 0.12)),
    rgba(18, 15, 10, 0.76);
}

.roomConfigRow .roomModeChoice select,
.roomConfigRow .hostBossControls select {
  width: 100%;
  height: 1.58rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid #6f5433;
  border-radius: 2px;
  background: #161611;
  color: #dfcca5;
  font-family: Georgia, "Times New Roman", serif;
}

.roomConfigRow .roomModeChoice.modeLocked {
  opacity: 0.72;
}

.roomConfigRow .hostBossControls.hidden {
  display: none;
}

.legacyBossSelect {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.encounterPicker {
  display: grid;
  grid-template-columns: minmax(168px, 0.78fr) minmax(210px, 1fr);
  grid-template-rows: auto auto;
  gap: 0.55rem;
  padding: 0.62rem;
  border: 1px solid rgba(122, 88, 42, 0.55);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(10, 13, 12, 0.78), rgba(22, 15, 8, 0.76)),
    repeating-linear-gradient(90deg, rgba(255, 175, 74, 0.03) 0 1px, transparent 1px 72px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72), inset 0 0 26px rgba(0, 0, 0, 0.48);
}

.encounterPicker small,
.roomClassPicker small {
  color: #d8a84c;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.encounterRegionCard {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-height: 0;
}

.encounterRegionArt {
  min-height: 92px;
  border: 1px solid rgba(129, 91, 45, 0.62);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.62)),
    radial-gradient(circle at 50% 88%, rgba(244, 94, 24, 0.38), transparent 24%),
    linear-gradient(135deg, #111714, #070807 58%, #1b0d07);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.62);
}

.encounterRegionCard strong {
  color: #f0c56b;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
}

.encounterRegionCard p {
  margin: 0;
  color: #c2b18f;
  font-size: 0.68rem;
  line-height: 1.25;
}

.encounterBossColumn {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.36rem;
  min-height: 0;
}

.encounterBossList {
  display: grid;
  gap: 0.36rem;
}

.encounterBossCard {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 64px;
  padding: 0.36rem 0.48rem;
  border: 1px solid rgba(104, 76, 39, 0.68);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(17, 14, 10, 0.96), rgba(4, 6, 5, 0.88));
  color: #e4d1ad;
  font-family: Cinzel, Georgia, serif;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.64);
}

.encounterBossCard img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 3px;
  background: #050604;
  filter: drop-shadow(0 0 8px rgba(255, 116, 28, 0.18));
}

.encounterBossCard span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.encounterBossCard b {
  color: #ffd45f;
  font-size: 1.1rem;
  text-shadow: 0 0 9px rgba(255, 190, 48, 0.8);
}

.encounterBossCard.selected {
  border-color: #e5b347;
  box-shadow: inset 0 0 0 1px rgba(255, 221, 122, 0.24), 0 0 17px rgba(223, 154, 40, 0.34);
}

.encounterBossCard:disabled {
  cursor: default;
}
.encounterBossCard.adminDisabled {
  opacity: 0.35;
  filter: grayscale(0.7);
  pointer-events: none;
}

.encounterDifficultyRow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.55rem;
}

.encounterDifficultyList {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
}

.encounterDifficultyButton {
  min-height: 2.1rem;
  border: 1px solid rgba(103, 76, 39, 0.75);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(60, 42, 24, 0.86), rgba(17, 13, 10, 0.95));
  color: #ead8b5;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  cursor: pointer;
}

.encounterDifficulty-normal.selected {
  border-color: #8ed86a;
  background: linear-gradient(180deg, rgba(46, 112, 38, 0.9), rgba(20, 55, 22, 0.96));
  box-shadow: 0 0 13px rgba(99, 210, 82, 0.36);
}

.encounterDifficulty-hard.selected {
  border-color: #d8a34e;
  background: linear-gradient(180deg, rgba(102, 70, 31, 0.94), rgba(50, 31, 15, 0.96));
}

.encounterDifficulty-ascended.selected {
  border-color: #e76a48;
  background: linear-gradient(180deg, rgba(103, 37, 25, 0.94), rgba(47, 18, 15, 0.96));
}

.encounterDifficultyButton:disabled {
  color: #776e62;
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.72);
}

.roomClassPicker {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid rgba(122, 88, 42, 0.42);
  border-radius: 4px;
  background: rgba(8, 10, 9, 0.52);
}

.roomClassOptions {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.roomClassOptions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-width: 7.4rem;
  min-height: 2rem;
  padding: 0.28rem 0.54rem;
  border: 1px solid rgba(103, 76, 39, 0.75);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(34, 26, 17, 0.9), rgba(10, 9, 8, 0.92));
  color: #e4d1ad;
  font-family: Cinzel, Georgia, serif;
  cursor: pointer;
}

.roomClassOptions button.selected {
  border-color: #d9b35f;
  color: #fff1c1;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 156, 0.18), 0 0 11px rgba(217, 164, 65, 0.24);
}

.bossSelectHasLockedOption {
  border-color: rgba(160, 120, 70, 0.85);
}
.arenaTeamsPanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.arenaTeamsPanel.hidden { display: none; }
.arenaTeamColumn {
  border-radius: 10px;
  padding: 10px;
  background: rgba(30, 40, 56, 0.75);
  border: 1px solid #3a4a60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arenaTeam1 { border-color: #4a90d9; }
.arenaTeam2 { border-color: #d9514a; }
.arenaTeamColumn header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 13px;
}
.arenaTeam1 header { color: #6cb6ff; }
.arenaTeam2 header { color: #ff7a73; }
.arenaTeamColumn header small {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.75;
}
.arenaTeamList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 56px;
}
.arenaTeamRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(16, 22, 32, 0.5);
  font-size: 13px;
}
.arenaTeamRow .arenaTeamSwatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.4);
}
.arenaTeamRow .arenaTeamReady {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.85;
}
.arenaSwitchBtn {
  align-self: stretch;
  font-size: 12px;
  padding: 6px;
}
.arenaCountdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 96px;
  font-weight: 800;
  color: #ffe28a;
  text-shadow: 0 0 14px rgba(0,0,0,0.8), 0 0 30px rgba(255, 200, 80, 0.6);
  z-index: 8;
}
.arenaEndBanner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 4px 18px rgba(0,0,0,0.8);
  z-index: 9;
}
.arenaEndBanner.team1 { color: #6cb6ff; }
.arenaEndBanner.team2 { color: #ff7a73; }
.arenaEndBanner.draw { color: #d6d6d6; }

/* === RESPONSIVE OVERRIDE LAYER ===
   Appended to keep existing styles untouched. Goal: no page scroll, fluid
   layout from ~1920 down to ~1280x720 (and short laptop viewports).
   Uses min()/clamp() so existing fixed sizes only shrink when needed.
*/

html,
body,
#root,
.app {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Modal viewport caps: never let any modal/dialog push page scroll. */
.progressionModal,
.confirmModal {
  padding: clamp(0.4rem, 1vw, 1rem);
}

.progressionWindow,
.masteryWindow {
  width: min(97vw, 1180px);
  max-width: min(97vw, 1180px);
  max-height: min(90dvh, 760px);
}

.masteryWindow {
  width: min(95vw, 980px);
  max-width: min(95vw, 980px);
}

.adminPanelWindow {
  width: min(95vw, 1180px);
  max-width: min(95vw, 1180px);
  max-height: min(90dvh, 92vh);
}

/* Make sure the scrollable inner area of each modal scrolls, not the page. */
.progressionWindow > *:last-child,
.masteryWindow > *:last-child,
.adminPanelBody {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* === Light compression: ≤ 1600px === */
@media (max-width: 1600px) {
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) minmax(210px, 290px);
    gap: 0.85rem;
  }
  .lobbyHeader {
    padding-inline: clamp(0.6rem, 1.5vw, 1rem);
  }
}

/* === Moderate compression: ≤ 1366px === */
@media (max-width: 1366px) {
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) minmax(190px, 260px);
    gap: 0.7rem;
  }
  .lobbyCore {
    gap: 0.55rem;
  }
  .lobbyButtons button,
  .accountBar button,
  .progressionActions button {
    font-size: clamp(0.62rem, 0.78vw, 0.78rem);
    padding: 0.38rem 0.55rem;
  }
  .lobbyReferenceTitle {
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
  }
  .bottomHud {
    grid-template-columns:
      minmax(130px, 0.85fr)
      minmax(90px, 0.55fr)
      minmax(380px, 2.55fr)
      minmax(200px, 1.2fr)
      minmax(150px, 0.95fr);
  }
}

/* === Aggressive compression: ≤ 1280px wide AND ≤ 800px tall === */
@media (max-width: 1280px) and (max-height: 800px) {
  :root {
    --game-hud-height: clamp(74px, 10.5dvh, 96px);
  }
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(170px, 230px);
    gap: 0.55rem;
  }
  .lobbyCore {
    height: calc(100dvh - 0.5rem);
    gap: 0.45rem;
  }
  .hudSection {
    padding: clamp(3px, 0.5dvh, 6px);
  }
  .bottomHud {
    grid-template-columns:
      minmax(120px, 0.8fr)
      minmax(80px, 0.5fr)
      minmax(340px, 2.6fr)
      minmax(180px, 1.15fr)
      minmax(140px, 0.9fr);
  }
  .spellActionHud {
    padding-inline: clamp(3px, 0.5vw, 7px);
  }
}

/* === Vertical-constrained: short viewports === */
@media (max-height: 800px) {
  .lobbyHeader {
    padding-block: clamp(0.25rem, 0.6dvh, 0.55rem);
  }
  .lobbyCore {
    gap: 0.5rem;
  }
  .progressionWindow,
  .masteryWindow {
    padding: 0.75rem;
    max-height: min(92dvh, 760px);
  }
  .adminPanelWindow {
    padding: 0.75rem 0.9rem 0.9rem;
    max-height: min(94dvh, 92vh);
  }
}

/* === Very narrow / very short safety net === */
@media (max-width: 1100px) {
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .lobbyCore {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}
/* === /RESPONSIVE OVERRIDE LAYER === */


/* === Ascended Mode label === */
.ascendedModeLabel,
.ascendedModeLabel strong,
.ascendedModeLabel #bossReferenceMode {
  color: #c89cff !important;
}
.lobbyBossModeBanner.ascendedModeLabel {
  border-color: rgba(168, 92, 255, 0.6);
  box-shadow: 0 0 14px rgba(168, 92, 255, 0.35);
}

/* === Ranger spell panel final layout ===
   Keeps the left lobby panel close to the provided mockup. This block is last
   on purpose because older lobby and responsive rules above use competing
   grid/absolute positioning for the same elements. */
.lobby,
.lobbyPreRoom {
  grid-template-columns: minmax(270px, 280px) minmax(0, 1fr) minmax(210px, 290px);
}

.bossReferenceAscended .bossPortrait {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bossReferenceAscended .bossAbilityList {
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 0.24rem;
  overflow: hidden;
}

.bossReferenceAscended .bossAbilityItem {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.44rem;
  padding: 0.28rem 0.34rem;
}

.bossReferenceAscended .bossAbilityItem > img {
  width: 48px;
  height: 48px;
}

.bossReferenceAscended .bossAbilityItem strong {
  font-size: 0.76rem;
}

.bossReferenceAscended .bossAbilityItem p {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.12;
}

.bossReferenceAscended.bossReferenceLongAbilityList .bossAbilityList {
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: 0.18rem;
}

.bossReferenceAscended.bossReferenceLongAbilityList .bossAbilityItem {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.36rem;
  padding: 0.22rem 0.3rem;
}

.bossReferenceAscended.bossReferenceLongAbilityList .bossAbilityItem > img {
  width: 42px;
  height: 42px;
}

.bossReferenceAscended.bossReferenceLongAbilityList .bossAbilityItem strong {
  font-size: 0.68rem;
}

.bossReferenceAscended.bossReferenceLongAbilityList .bossAbilityItem p {
  font-size: 0.54rem;
}

.lobbySpellReference {
  display: grid;
  grid-template-rows: 2rem clamp(152px, 24dvh, 178px) minmax(0, 1fr);
  gap: 0.42rem;
  height: calc(100dvh - 1rem);
  padding: 0.7rem;
  overflow: hidden;
  align-content: stretch;
}

.lobbySpellReference .lobbyReferenceTitle {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-height: 0;
  padding: 0 0 0.38rem;
  border-bottom: 1px solid rgba(157, 116, 60, 0.55);
}

.lobbySpellReference .lobbyReferenceTitle span {
  flex: 1 1 auto;
  min-width: 0;
  color: #f0d38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-shadow: 0 2px 2px #000;
}

.lobbySpellReference .masteryWoodButton {
  flex: 0 0 auto;
  min-width: 5.3rem;
  max-width: 5.3rem;
  min-height: 1.42rem;
  padding: 0.16rem 0.35rem;
  font-size: 0.62rem;
  line-height: 1.05;
}

.lobbySpellReference .rangerLobbyFrame {
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #8b6332;
  border-radius: 2px;
  background: #080a07;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.52), 0 3px 8px rgba(0, 0, 0, 0.42);
}

.lobbySpellReference .rangerLobbyArt {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 18%;
  opacity: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  mask-image: none;
}

.lobbySpellReference .skinButton {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
  z-index: 3;
  margin: 0;
  padding: 0.16rem 0.38rem;
  min-width: 0;
  font-size: 0.58rem;
  line-height: 1;
}

.lobbySpellReference .relicLoadoutButton {
  position: absolute;
  right: 0.38rem;
  bottom: 2.34rem;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  margin: 0;
  min-width: 0;
  height: 1.04rem;
  padding: 0.08rem 0.28rem 0.08rem 0.18rem;
  color: #f8dfaa;
  background:
    linear-gradient(180deg, #7d5629, #3a2511),
    #513419;
  border: 1px solid #9a6c31;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 150, 0.15), 0 2px 8px rgba(0, 0, 0, 0.35);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  cursor: pointer;
}

.lobbySpellReference .relicLoadoutButton img {
  width: 0.72rem;
  height: 0.72rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}

.lobbySpellReference .relicLoadoutButton:hover {
  filter: brightness(1.1);
  border-color: #d5aa5c;
}

.lobbySpellReference .relicSlotMiniMenu {
  width: 6.7rem;
  gap: 0.24rem;
  padding: 0.34rem 0.3rem;
  border-width: 2px;
}

.lobbySpellReference .relicSlotMenuRow {
  grid-template-columns: minmax(0, 1fr) 1.78rem;
  gap: 0.22rem;
  min-height: 1.78rem;
  padding: 0;
  font-size: 0.58rem;
  line-height: 1;
}

.lobbySpellReference .relicSlotMiniMenu span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lobbySpellReference .relicSlotMenuRow > button {
  width: 1.78rem;
  height: 1.64rem;
  border-radius: 0.34rem;
}

.lobbySpellReference .debuffPreviewRow {
  position: absolute;
  right: 0.42rem;
  bottom: 0.42rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  max-width: calc(100% - 0.84rem);
  padding: 0.18rem 0.22rem;
  border: 1px solid rgba(219, 170, 91, 0.42);
  border-radius: 999px;
  background: rgba(5, 7, 8, 0.58);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.62), 0 3px 12px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

.lobbySpellReference .classStatPreview {
  position: absolute;
  left: 0.42rem;
  bottom: 0.42rem;
  z-index: 4;
  display: grid;
  gap: 0.12rem;
  min-width: 5.25rem;
  padding: 0.24rem 0.34rem;
  border: 1px solid rgba(219, 170, 91, 0.48);
  border-radius: 4px;
  background:
    radial-gradient(circle at 14% 20%, rgba(226, 179, 85, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(24, 18, 11, 0.84), rgba(5, 6, 7, 0.78));
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.62), 0 3px 12px rgba(0, 0, 0, 0.38);
  color: #f4dfb2;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.58rem;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  backdrop-filter: blur(2px);
}

.lobbySpellReference .classStatPreview span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  white-space: nowrap;
}

.lobbySpellReference .classStatPreview b {
  color: #8ee7ff;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
}

.bossPortraitFrame .debuffPreviewRow {
  position: absolute;
  right: 0.42rem;
  bottom: 0.42rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  padding: 0.18rem 0.22rem;
  border: 1px solid rgba(219, 170, 91, 0.42);
  border-radius: 999px;
  background: rgba(5, 7, 8, 0.62);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.62), 0 3px 12px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

.bossChestDropPreview {
  position: absolute;
  left: 0.42rem;
  bottom: 0.42rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.18rem 0.36rem 0.18rem 0.22rem;
  color: #f6da94;
  background:
    linear-gradient(180deg, rgba(43, 28, 13, 0.95), rgba(10, 7, 4, 0.96));
  border: 1px solid rgba(204, 151, 65, 0.75);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 151, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.48);
  cursor: help;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.bossChestDropPreview .chestIcon {
  width: 1.72rem;
  height: 1.72rem;
}

.bossChestDropPreview .chestIcon img {
  width: 100%;
  height: 100%;
}

.bossChestDropPreview .chestIcon::before,
.bossChestDropPreview .chestIcon::after {
  width: 0.58rem;
  height: 0.58rem;
  font-size: 0.32rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.bossChestDropPreview .chestIcon::before {
  right: -0.08rem;
  top: -0.06rem;
}

.bossChestDropPreview .chestIcon::after {
  right: -0.05rem;
  bottom: -0.02rem;
  width: 0.42rem;
  height: 0.42rem;
}

.bossChestDropPreview b {
  color: #f6da94;
  font-size: 0.68rem;
}

.bossChestDropPreview em {
  color: #8fe1ff;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.debuffPreviewIcon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.34rem;
  height: 1.34rem;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255, 226, 152, 0.58);
  border-radius: 50%;
  background: rgba(8, 11, 14, 0.85);
  box-shadow: inset 0 0 7px rgba(255, 255, 255, 0.08), 0 0 9px rgba(0, 0, 0, 0.5);
  cursor: help;
}

.debuffPreviewIcon > span:first-child {
  position: relative;
  display: block;
  width: 0.82rem;
  height: 0.82rem;
  filter: drop-shadow(0 0 4px currentColor);
}

.debuffPreviewImage {
  display: block;
  width: 0.98rem;
  height: 0.98rem;
  border-radius: 50%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 5px currentColor);
}

.debuffPreviewStorm .debuffPreviewImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.debuffPreviewBurn {
  color: #ff7448;
  border-color: rgba(255, 113, 62, 0.72);
  background: radial-gradient(circle at 50% 62%, rgba(255, 76, 28, 0.42), rgba(24, 7, 3, 0.9) 70%);
}

.debuffPreviewBurn > span:first-child {
  border-radius: 58% 42% 62% 38% / 62% 48% 52% 38%;
  background:
    radial-gradient(circle at 50% 72%, #fff2a4 0 13%, transparent 14%),
    linear-gradient(140deg, transparent 0 24%, #ffcf48 25% 46%, #ff4a1f 47% 72%, transparent 73%),
    linear-gradient(42deg, transparent 0 25%, #ff7a22 26% 58%, #b80f0f 59% 82%, transparent 83%);
  transform: rotate(8deg);
}

.debuffPreviewFrozen {
  color: #74dcff;
  border-color: rgba(103, 210, 255, 0.76);
  background: radial-gradient(circle, rgba(47, 176, 255, 0.36), rgba(3, 12, 28, 0.92) 72%);
}

.debuffPreviewFrozen > span:first-child {
  clip-path: polygon(50% 0, 62% 34%, 100% 18%, 72% 50%, 100% 82%, 62% 66%, 50% 100%, 38% 66%, 0 82%, 28% 50%, 0 18%, 38% 34%);
  background: linear-gradient(180deg, #e9fbff, #61d5ff 45%, #1977e4);
}

.debuffPreviewRoot {
  color: #e6b84e;
  border-color: rgba(236, 182, 64, 0.76);
  background: radial-gradient(circle, rgba(232, 172, 48, 0.32), rgba(18, 11, 2, 0.92) 72%);
}

.debuffPreviewRoot > span:first-child {
  clip-path: polygon(46% 0, 78% 0, 58% 38%, 88% 38%, 34% 100%, 48% 55%, 22% 55%);
  background: linear-gradient(180deg, #fff6b8, #ffc83c 48%, #b46b08);
}

.debuffPreviewPoison {
  color: #86ff58;
  border-color: rgba(118, 255, 86, 0.78);
  background: radial-gradient(circle, rgba(78, 255, 58, 0.34), rgba(4, 24, 7, 0.92) 72%);
}

.debuffPreviewPoison > span:first-child {
  border-radius: 54% 46% 62% 38% / 44% 58% 42% 56%;
  background:
    radial-gradient(circle at 42% 35%, #ecffb1 0 10%, transparent 11%),
    radial-gradient(circle at 62% 64%, #c9ff5c 0 13%, transparent 14%),
    linear-gradient(140deg, #dfff73, #52ff38 48%, #137e20);
  box-shadow: inset 0 0 0 2px rgba(226, 255, 158, 0.48);
  transform: rotate(-14deg);
}

.debuffPreviewStorm {
  color: #ffdd55;
  border-color: rgba(255, 222, 92, 0.9);
  background: radial-gradient(circle, rgba(255, 218, 50, 0.35), rgba(24, 16, 2, 0.92) 72%);
  box-shadow: 0 0 8px rgba(255, 217, 72, 0.5);
}

.debuffPreviewStorm > span:first-child {
  clip-path: polygon(54% 0, 38% 42%, 60% 42%, 44% 100%, 88% 34%, 65% 35%);
  background: linear-gradient(180deg, #fff8b8, #ffd13d 45%, #8a5a04);
}

.lobbySpellReference .lobbySpellList {
  grid-row: 3;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 0.22rem;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.lobbySpellReference .lobbySpellItem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.22rem 0.32rem;
  overflow: hidden;
  border: 1px solid #6a4f2e;
  border-radius: 2px;
}

.lobbySpellReference .lobbySpellItem.loadoutOpen {
  overflow: visible;
}

.lobbySpellReference .lobbySpellItem > img {
  width: 46px;
  height: 46px;
  align-self: center;
}

.lobbySpellReference .lobbySpellItem > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.09rem;
  min-width: 0;
  align-self: center;
}

.lobbySpellReference .lobbySpellHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.lobbySpellReference .lobbySpellHeading strong {
  min-width: 0;
  overflow: hidden;
  color: #ffe0a0;
  font-size: 0.76rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobbySpellReference .lobbySpellHeading kbd {
  flex: 0 0 auto;
  padding: 0.08rem 0.2rem;
  font-size: 0.48rem;
}

.lobbySpellReference .loadoutSpellPicker {
  width: 100%;
  margin: 0;
}

.lobbySpellReference .loadoutSpellSelect {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) 0.45rem;
  align-items: center;
  gap: 0.28rem;
  width: 100%;
  height: 1.34rem;
  padding: 0.12rem 0.32rem;
  font-size: 0.58rem;
  line-height: 1;
}

.lobbySpellReference .loadoutSpellSelect img {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

.lobbySpellReference .loadoutSpellSelect span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobbySpellReference .lobbySpellItem p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #b8aa8d;
  font-size: 0.56rem;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.publicRoomToggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0;
  width: 5.35rem;
  min-width: 5.35rem;
  height: 1.62rem;
  min-height: 1.62rem;
  padding: 0 0.26rem 0 0.54rem;
  overflow: hidden;
  border: 1px solid #77b85b;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.32), transparent 30%),
    linear-gradient(180deg, #83d966 0%, #55b13e 52%, #3a8f30 100%);
  color: #f4ffe9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.38),
    inset 0 -2px 4px rgba(0, 0, 0, 0.24),
    0 2px 5px rgba(0, 0, 0, 0.35);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.lobbyPreRoom .roomActions {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr);
  align-items: end;
  gap: 0.5rem;
}

.publicRoomToggle.visibilityLocked {
  opacity: 0.72;
  cursor: default;
}

.publicRoomToggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.publicRoomSwitchText {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.54);
}

.publicRoomSwitchText b {
  grid-area: 1 / 1;
  font: inherit;
  letter-spacing: 0.02em;
  transition: opacity 140ms ease, transform 160ms ease;
}

.publicRoomOff {
  opacity: 0;
  transform: translateX(-0.4rem);
}

.publicRoomToggle i {
  position: relative;
  z-index: 2;
  display: block;
  width: 1.32rem;
  height: 1.32rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 26%, #ffffff 0, #f5f5f2 24%, #d7d7d2 68%, #b8b8b4 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -1px 3px rgba(0, 0, 0, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.42);
  transition: transform 180ms ease;
}

.publicRoomToggle:has(input:not(:checked)) {
  grid-template-columns: auto 1fr;
  padding: 0 0.54rem 0 0.18rem;
  border-color: #d14e3b;
  background:
    radial-gradient(circle at 68% 20%, rgba(255, 255, 255, 0.3), transparent 30%),
    linear-gradient(180deg, #ef7767 0%, #d64a35 52%, #a92e24 100%);
  color: #ffe5df;
}

.publicRoomToggle:has(input:not(:checked)) .publicRoomSwitchText {
  grid-column: 2;
  justify-items: end;
}

.publicRoomToggle:has(input:not(:checked)) i {
  grid-column: 1;
  grid-row: 1;
}

.publicRoomToggle:has(input:not(:checked)) .publicRoomOn {
  opacity: 0;
  transform: translateX(0.4rem);
}

.publicRoomToggle:has(input:not(:checked)) .publicRoomOff {
  opacity: 1;
  transform: translateX(0);
}

.publicRoomToggle:hover {
  filter: brightness(1.08);
}

.publicRoomToggle:focus-within {
  outline: 2px solid rgba(240, 211, 141, 0.82);
  outline-offset: 2px;
}

.publicRoomsPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.36rem;
  min-height: 0;
  max-height: clamp(112px, 18dvh, 156px);
  padding: 0.52rem;
  overflow: hidden;
  border: 1px solid #74552f;
  border-radius: 3px;
  background:
    linear-gradient(rgba(255, 213, 136, 0.035), rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(90deg, #241910 0 98px, #1d140d 99px 102px);
  box-shadow:
    inset 0 0 0 1px #0d0906,
    inset 0 0 18px rgba(0, 0, 0, 0.48);
}

.lobby:not(.lobbyPreRoom) .publicRoomsPanel {
  display: none;
}

.publicRoomsPanel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 0;
  padding-bottom: 0.34rem;
  border-bottom: 1px solid rgba(177, 127, 62, 0.36);
}

.publicRoomsPanel header div {
  display: grid;
  min-width: 0;
}

.publicRoomsPanel small {
  color: #b99357;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.publicRoomsPanel strong {
  overflow: hidden;
  color: #f0d38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publicRoomsPanel header button {
  flex: 0 0 auto;
  min-width: 4.3rem;
  min-height: 1.45rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid #8b6332;
  border-radius: 3px;
  background: linear-gradient(#4d3622, #281b12);
  color: #f2dba8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.publicRoomsList {
  display: grid;
  gap: 0.24rem;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #8f6a37 #17100a;
}

.publicRoomEntry {
  display: grid;
  grid-template-columns: 3.3rem minmax(0, 1.25fr) 4.8rem 2.8rem 4.4rem;
  align-items: center;
  gap: 0.38rem;
  min-height: 1.72rem;
  padding: 0.16rem 0.38rem;
  border: 1px solid #5d472c;
  border-radius: 2px;
  background: rgba(12, 13, 10, 0.92);
  color: #d7c5a0;
  text-align: left;
  cursor: pointer;
}

.publicRoomEntry:hover:not(:disabled),
.publicRoomEntry:focus-visible:not(:disabled) {
  border-color: #c79042;
  background: rgba(40, 28, 17, 0.96);
  outline: none;
  filter: brightness(1.08);
}

.publicRoomEntry:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.publicRoomCode {
  color: #f6d994;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.publicRoomBoss,
.publicRoomDifficulty,
.publicRoomPlayers,
.publicRoomStatus {
  min-width: 0;
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publicRoomDifficulty {
  color: #dfc383;
}

.publicRoomDifficultyHard {
  color: #ff9b58;
}

.publicRoomDifficultyAscended {
  color: #f064ff;
}

.publicRoomPlayers {
  color: #7fd6ff;
  text-align: right;
}

.publicRoomStatus {
  color: #8ee18f;
  text-align: right;
}

.publicRoomsEmpty {
  display: grid;
  place-items: center;
  min-height: 2.2rem;
  margin: 0;
  border: 1px dashed rgba(143, 106, 55, 0.44);
  color: #9f9278;
  font-size: 0.68rem;
}

@media (max-width: 1366px) {
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(266px, 274px) minmax(0, 1fr) minmax(185px, 250px);
  }
}

@media (max-width: 1280px) and (max-height: 800px) {
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(262px, 270px) minmax(0, 1fr) minmax(170px, 225px);
  }

  .lobbySpellReference {
    grid-template-rows: 1.9rem 142px minmax(0, 1fr);
    gap: 0.34rem;
    padding: 0.58rem;
  }

  .lobbySpellReference .lobbySpellItem {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.38rem;
    padding: 0.2rem 0.3rem;
  }

  .lobbySpellReference .lobbySpellItem > img {
    width: 44px;
    height: 44px;
  }

  .lobbySpellReference .lobbySpellHeading strong {
    font-size: 0.73rem;
  }

  .lobbySpellReference .loadoutSpellSelect {
    height: 1.28rem;
  }

  .lobbySpellReference .lobbySpellItem p {
    font-size: 0.54rem;
  }

  .publicRoomsPanel {
    max-height: 118px;
    padding: 0.42rem;
  }

  .publicRoomEntry {
    grid-template-columns: 3rem minmax(0, 1fr) 4.15rem 2.45rem 3.8rem;
    gap: 0.28rem;
    min-height: 1.55rem;
  }

  .publicRoomBoss,
  .publicRoomDifficulty,
  .publicRoomPlayers,
  .publicRoomStatus {
    font-size: 0.56rem;
  }
}

@media (max-width: 1100px) {
  .lobby,
  .lobbyPreRoom {
    grid-template-columns: minmax(0, 1fr);
  }

  .publicRoomsPanel {
    max-height: 150px;
  }

  .lobbyPreRoom .roomActions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lobbyPreRoom .roomActions .joinBox {
    grid-column: 1 / -1;
  }

  .roomConfigRow {
    grid-template-columns: 1fr;
  }
}

.masteryRows .masteryNodeAvailable .masteryNodeArt {
  filter: saturate(1.12) brightness(1.02) contrast(1.04);
  opacity: 1;
}

.masteryRows .masteryNodeLocked .masteryNodeArt {
  filter: grayscale(1) saturate(0) brightness(0.52) contrast(1.05);
}

.masteryRows .masteryNodeUnlocked {
  border-color: #ffd36c;
  box-shadow:
    inset 0 0 0 2px rgba(255, 221, 127, 0.5),
    inset 0 0 20px rgba(255, 199, 68, 0.18),
    0 0 16px rgba(255, 198, 70, 0.62),
    0 0 30px rgba(255, 166, 40, 0.25);
}

.masteryRows .masteryNodeUnlocked .masteryNodeArt {
  filter: saturate(1.28) brightness(1.18) contrast(1.08);
}

html,
body,
#root {
  overflow: hidden;
}

.levelBadge {
  appearance: none;
  cursor: pointer;
  grid-template-rows: auto auto auto;
  gap: 0.12rem;
  min-width: 116px;
  padding: 0.34rem 0.62rem;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.levelBadge:hover,
.levelBadge:focus-visible {
  border-color: #e6bd67;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, 0.28), 0 0 14px rgba(225, 171, 72, 0.28);
  transform: translateY(-1px);
}

.classBadgeTop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  color: #f3d188;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.classBadgeTop b {
  font-weight: 900;
}

.classBadgeTop i {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.levelBadge strong {
  font-size: 0.92rem;
}

.levelBadge em {
  color: #9edbff;
  font-size: 0.5rem;
  font-style: normal;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(69, 183, 255, 0.42);
}

.legacyClassSelect {
  display: none !important;
}

.lobby:not(.lobbyPreRoom) {
  gap: 0.55rem;
}

.lobby:not(.lobbyPreRoom) .lobbyHeader {
  gap: 0.32rem;
  padding: 0.42rem 0.55rem;
}

.lobby:not(.lobbyPreRoom) .brandCompact {
  padding: 0;
}

.lobby:not(.lobbyPreRoom) .brandCompact p {
  display: none;
}

.lobby:not(.lobbyPreRoom) .classProgressPanel {
  padding: 0.38rem 0.5rem;
  gap: 0.32rem;
}

.lobby:not(.lobbyPreRoom) .progressionActionRow button {
  min-height: 1.75rem;
  padding: 0.28rem 0.42rem;
  font-size: 0.62rem;
}

.lobby:not(.lobbyPreRoom) .roomPanel {
  gap: 0.46rem;
  padding: 0.55rem;
}

.lobby:not(.lobbyPreRoom) .roomHeader {
  min-height: 2.05rem;
}

.encounterRegionButton {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(129, 91, 45, 0.62);
  border-radius: 3px;
  background: #060605;
  cursor: pointer;
  overflow: hidden;
}

.encounterRegionButton:hover,
.encounterRegionButton:focus-visible {
  border-color: #d5a54c;
  outline: none;
  box-shadow: 0 0 14px rgba(221, 166, 62, 0.28);
}

.encounterRegionArt,
.regionMapArt {
  display: block;
  width: 100%;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.34)),
    url("/assets/regions/deep-dungeon.png");
  background-position: center;
  background-size: cover;
  position: relative;
}

.encounterRegionArt::before,
.regionMapArt::before {
  display: none;
}

.encounterPicker {
  grid-template-columns: minmax(128px, 0.58fr) minmax(220px, 1fr);
  gap: 0.42rem;
  padding: 0.46rem;
}

.encounterRegionCard {
  gap: 0.22rem;
}

.encounterRegionCard p {
  display: none;
}

.encounterRegionCard strong {
  text-align: center;
  font-size: 0.88rem;
}

.encounterRegionArt {
  min-height: 82px;
}

.encounterBossList {
  gap: 0.28rem;
}

.encounterBossCard {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 50px;
  padding: 0.24rem 0.38rem;
}

.encounterBossCard img {
  width: 46px;
  height: 46px;
}

.encounterDifficultyRow {
  gap: 0.4rem;
}

.encounterDifficultyButton {
  min-height: 1.8rem;
  font-size: 0.66rem;
}

.roomClassPicker {
  padding: 0.32rem 0.42rem;
}

.roomClassOptions button {
  min-width: 6.2rem;
  min-height: 1.74rem;
  font-size: 0.68rem;
}

.colorChoiceRow {
  gap: 0.42rem;
}

.playersList {
  max-height: 138px;
  overflow: hidden;
}

.playerLine {
  min-height: 2.05rem;
}

.regionWindow,
.classSelectWindow {
  width: min(92vw, 620px);
  max-height: min(88dvh, 540px);
  padding: 0.82rem;
  overflow: hidden;
  color: #d7c5a2;
  border: 1px solid #6d4f2c;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 20%, rgba(213, 158, 66, 0.12), transparent 38%),
    linear-gradient(180deg, #15120d, #080806 75%);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.68),
    inset 0 0 38px rgba(0, 0, 0, 0.62),
    0 22px 68px rgba(0, 0, 0, 0.72);
}

.regionWindow > header,
.classSelectWindow > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(157, 116, 60, 0.5);
}

.regionWindow h2,
.classSelectWindow h2 {
  margin: 0;
  color: #e8c77d;
  font-family: Cinzel, Georgia, serif;
}

.regionWindow small,
.classSelectWindow small {
  color: #b48e4e;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.regionMap {
  position: relative;
  min-height: 300px;
  margin-top: 0.72rem;
  border: 1px solid rgba(102, 77, 45, 0.58);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 48%, rgba(187, 126, 45, 0.13), transparent 24%),
    radial-gradient(circle at 18% 45%, rgba(255, 255, 255, 0.04), transparent 20%),
    radial-gradient(circle at 82% 44%, rgba(255, 255, 255, 0.04), transparent 20%),
    linear-gradient(145deg, #1a150e, #070706);
  overflow: hidden;
}

.regionMap::before,
.regionMap::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170, 124, 65, 0.58), transparent);
}

.regionMapNode {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  width: 190px;
  padding: 0.36rem;
  border: 1px solid #d9a84c;
  border-radius: 5px;
  background: rgba(8, 7, 5, 0.72);
  color: #e9c577;
  font-family: Cinzel, Georgia, serif;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(211, 143, 37, 0.34), inset 0 0 0 1px rgba(255, 230, 158, 0.16);
}

.regionMapNode .regionMapArt {
  height: 112px;
  min-height: 112px;
  border-radius: 4px;
  border: 1px solid rgba(130, 92, 42, 0.65);
}

.classSelectList {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.72rem;
}

.classSelectList button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 4.1rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(109, 79, 43, 0.75);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(42, 31, 18, 0.88), rgba(10, 9, 7, 0.94));
  color: #ead8b5;
  text-align: left;
  cursor: pointer;
}

.classSelectList button.selected {
  border-color: #e0b75f;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, 0.2), 0 0 16px rgba(224, 171, 72, 0.28);
}

.classSelectList button > i {
  width: 1.65rem;
  height: 1.65rem;
}

.classSelectList button span {
  display: grid;
  gap: 0.12rem;
}

.classSelectList button strong {
  color: #fff0be;
  font-family: Cinzel, Georgia, serif;
}

.classSelectList button small {
  color: #9edbff;
  letter-spacing: 0.05em;
}

@media (max-height: 780px) {
  .lobby:not(.lobbyPreRoom) .accountBar {
    min-height: 0;
    padding-block: 0.22rem;
  }

  .lobby:not(.lobbyPreRoom) .lobbyHeader .brandCompact .raidLogoCrop {
    width: min(100%, 168px);
  }

  .encounterRegionArt {
    min-height: 64px;
  }

  .encounterBossCard {
    min-height: 44px;
  }

  .encounterBossCard img {
    width: 40px;
    height: 40px;
  }

  .playersList {
    max-height: 112px;
  }
}

/* Final compact lobby polish */
.lobbyHeader .progressionLeader {
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr) auto;
}

.levelBadge {
  position: relative;
  grid-template-columns: 2.15rem minmax(0, 1fr) 0.8rem;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: stretch;
  column-gap: 0.48rem;
  row-gap: 0.04rem;
  min-width: 154px;
  min-height: 3.05rem;
  padding: 0.38rem 0.72rem 0.36rem 0.56rem;
  overflow: hidden;
  border: 1px solid #e1ad53;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(255, 212, 103, 0.12), transparent 18%, transparent 82%, rgba(255, 212, 103, 0.1)),
    radial-gradient(circle at 16% 45%, rgba(255, 192, 68, 0.18), transparent 26%),
    linear-gradient(180deg, #4b331a 0%, #25170c 46%, #0e0b08 100%);
  box-shadow:
    inset 0 0 0 2px rgba(25, 16, 8, 0.82),
    inset 0 0 0 3px rgba(255, 223, 130, 0.18),
    inset 0 0 20px rgba(255, 174, 47, 0.12),
    0 0 12px rgba(238, 176, 67, 0.22),
    0 5px 12px rgba(0, 0, 0, 0.38);
}

.levelBadge::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255, 225, 145, 0.28);
  border-radius: 6px;
  box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.72);
}

.levelBadge::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: 0;
  height: 0;
  border-left: 0.32rem solid transparent;
  border-right: 0.32rem solid transparent;
  border-top: 0.46rem solid #f2c86e;
  filter: drop-shadow(0 0 5px rgba(255, 194, 78, 0.6));
}

.levelBadge:hover,
.levelBadge:focus-visible {
  border-color: #ffd56f;
  box-shadow:
    inset 0 0 0 2px rgba(30, 18, 8, 0.82),
    inset 0 0 0 3px rgba(255, 235, 169, 0.26),
    inset 0 0 24px rgba(255, 182, 53, 0.16),
    0 0 18px rgba(255, 194, 77, 0.34),
    0 7px 14px rgba(0, 0, 0, 0.42);
}

.classBadgeTop {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-content: start;
  gap: 0.46rem;
  min-width: 0;
  color: #ffd76f;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 1px #000, 0 0 7px rgba(255, 188, 53, 0.62);
}

.classBadgeTop i {
  width: 1.45rem;
  height: 1.45rem;
  filter: drop-shadow(0 0 5px rgba(255, 199, 78, 0.55));
}

.classBadgeTop b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.levelBadge strong {
  grid-column: 2;
  grid-row: 2;
  color: #fff4d4;
  font-size: 0.82rem;
  line-height: 1;
  text-align: left;
  text-shadow: 0 1px 2px #000;
}

.levelBadge em {
  grid-column: 1 / 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  color: #77dfff;
  font-size: 0.44rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
}

.encounterPicker {
  grid-template-columns: minmax(110px, 0.48fr) minmax(190px, 1fr);
  gap: 0.34rem;
  padding: 0.38rem;
}

.encounterPicker small,
.roomClassPicker small {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.encounterRegionArt {
  min-height: 64px;
}

.encounterRegionCard {
  gap: 0.16rem;
}

.encounterRegionCard strong {
  font-size: 0.76rem;
}

.encounterBossColumn {
  gap: 0.24rem;
}

.encounterBossList {
  gap: 0.22rem;
}

.encounterBossCard {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 42px;
  gap: 0.4rem;
  padding: 0.2rem 0.32rem;
}

.encounterBossCard img {
  width: 38px;
  height: 38px;
}

.encounterBossCard b {
  font-size: 0.88rem;
}

.encounterBossCard span {
  font-size: 0.76rem;
}

.encounterDifficultyRow {
  gap: 0.3rem;
}

.encounterDifficultyList {
  gap: 0.36rem;
}

.encounterDifficultyButton {
  min-height: 1.55rem;
  padding: 0.16rem 0.34rem;
  font-size: 0.58rem;
}

/* Room-fit pass: keep a 4-player room inside the viewport. */
.lobby:not(.lobbyPreRoom) .brandCompact {
  display: none;
}

.lobby:not(.lobbyPreRoom) .lobbyHeader {
  gap: 0.22rem;
  padding: 0.32rem 0.46rem;
  margin-bottom: 0;
}

.lobby:not(.lobbyPreRoom) .accountBar {
  padding: 0.22rem 0.46rem;
}

.lobby:not(.lobbyPreRoom) .classProgressPanel {
  padding: 0.28rem 0.42rem;
}

.lobby:not(.lobbyPreRoom) .roomPanel {
  gap: 0.34rem;
  padding: 0.42rem;
  border-color: rgba(91, 75, 56, 0.86);
  background:
    radial-gradient(circle at 13% 14%, rgba(158, 132, 84, 0.13) 0 2px, transparent 3px 100%),
    radial-gradient(circle at 78% 35%, rgba(114, 103, 82, 0.11) 0 3px, transparent 4px 100%),
    radial-gradient(circle at 43% 84%, rgba(0, 0, 0, 0.3) 0 2px, transparent 4px 100%),
    linear-gradient(118deg, transparent 0 18%, rgba(232, 190, 108, 0.045) 18.3% 18.8%, transparent 19.2% 53%, rgba(0, 0, 0, 0.34) 53.4% 54%, transparent 54.4%),
    repeating-linear-gradient(96deg, rgba(255, 219, 148, 0.026) 0 1px, transparent 1px 74px),
    linear-gradient(180deg, rgba(31, 29, 25, 0.99), rgba(13, 13, 12, 0.99)),
    #12110f;
  box-shadow:
    inset 0 0 0 1px rgba(240, 202, 123, 0.055),
    inset 0 0 42px rgba(0, 0, 0, 0.62),
    0 18px 46px rgba(0, 0, 0, 0.48);
}

.lobby:not(.lobbyPreRoom) .roomHeader {
  min-height: 1.72rem;
  border-bottom-color: rgba(132, 100, 58, 0.46);
}

.lobby:not(.lobbyPreRoom) .roomHeader strong {
  font-size: 1.34rem;
  color: #dbc493;
  text-shadow: 0 2px 2px #000, 0 0 8px rgba(218, 162, 68, 0.18);
}

.lobby:not(.lobbyPreRoom) .roomHeader span,
.lobby:not(.lobbyPreRoom) .roomConfigRow .roomModeChoice,
.lobby:not(.lobbyPreRoom) .roomClassPicker small,
.lobby:not(.lobbyPreRoom) .encounterPicker small {
  color: #baad91;
}

.lobby:not(.lobbyPreRoom) .roomConfigRow .roomModeChoice,
.lobby:not(.lobbyPreRoom) .roomConfigRow .hostBossControls,
.lobby:not(.lobbyPreRoom) .roomClassPicker,
.lobby:not(.lobbyPreRoom) .encounterRegionCard,
.lobby:not(.lobbyPreRoom) .encounterBossCard,
.lobby:not(.lobbyPreRoom) .encounterDifficultyButton,
.lobby:not(.lobbyPreRoom) .colorChoice,
.lobby:not(.lobbyPreRoom) .lobbyBossModeBanner {
  border-color: rgba(86, 72, 53, 0.78);
  background:
    radial-gradient(circle at 18% 18%, rgba(157, 126, 77, 0.1) 0 2px, transparent 3px 100%),
    linear-gradient(180deg, rgba(56, 48, 37, 0.62), rgba(13, 13, 12, 0.78)),
    repeating-linear-gradient(135deg, rgba(232, 190, 108, 0.024) 0 1px, transparent 1px 38px),
    rgba(17, 16, 14, 0.88);
  box-shadow: inset 0 0 0 1px rgba(238, 199, 121, 0.045), inset 0 0 18px rgba(0, 0, 0, 0.42);
}

.lobby:not(.lobbyPreRoom) .roomConfigRow .roomModeChoice select,
.lobby:not(.lobbyPreRoom) .roomConfigRow .hostBossControls select,
.lobby:not(.lobbyPreRoom) .hostBossControls select {
  border-color: rgba(109, 89, 58, 0.82);
  background: linear-gradient(#272018, #11100e);
  color: #e0d1ad;
}

.lobby:not(.lobbyPreRoom) .encounterBossCard.selected {
  border-color: #ffd65a;
  box-shadow:
    inset 0 0 0 2px rgba(255, 234, 142, 0.7),
    inset 0 0 22px rgba(204, 126, 26, 0.24),
    0 0 18px rgba(255, 204, 67, 0.55),
    0 0 32px rgba(255, 171, 29, 0.22);
  background:
    radial-gradient(circle at 14% 45%, rgba(255, 183, 49, 0.16), transparent 42%),
    linear-gradient(90deg, rgba(44, 34, 20, 0.98), rgba(13, 12, 10, 0.94));
}

.lobby:not(.lobbyPreRoom) .encounterDifficulty-normal.selected {
  border-color: #8cff66;
  box-shadow:
    inset 0 0 0 2px rgba(185, 255, 145, 0.54),
    inset 0 0 20px rgba(69, 170, 48, 0.24),
    0 0 14px rgba(108, 255, 82, 0.48),
    0 0 26px rgba(72, 205, 55, 0.2);
  background:
    radial-gradient(circle at 50% 20%, rgba(142, 255, 112, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(43, 99, 34, 0.94), rgba(15, 42, 18, 0.98));
}

.lobby:not(.lobbyPreRoom) .encounterDifficulty-hard.selected {
  border-color: #ff5b4a;
  box-shadow:
    inset 0 0 0 2px rgba(255, 132, 112, 0.52),
    inset 0 0 20px rgba(168, 35, 24, 0.3),
    0 0 14px rgba(255, 69, 55, 0.5),
    0 0 26px rgba(198, 38, 30, 0.22);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 97, 69, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(105, 28, 22, 0.95), rgba(45, 13, 13, 0.98));
}

.lobby:not(.lobbyPreRoom) .encounterDifficulty-ascended.selected {
  border-color: #bc7cff;
  box-shadow:
    inset 0 0 0 2px rgba(210, 159, 255, 0.54),
    inset 0 0 20px rgba(115, 53, 181, 0.32),
    0 0 14px rgba(176, 92, 255, 0.52),
    0 0 28px rgba(115, 55, 204, 0.24);
  background:
    radial-gradient(circle at 50% 20%, rgba(188, 124, 255, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(68, 37, 105, 0.96), rgba(27, 16, 45, 0.98));
}

.lobby:not(.lobbyPreRoom) .playersList {
  gap: 0.22rem;
  max-height: none;
  overflow: visible;
}

.lobby:not(.lobbyPreRoom) .playerLine {
  min-height: 1.54rem;
  gap: 0.42rem;
  padding: 0.22rem 0.44rem;
  font-size: 0.72rem;
  border-radius: 4px;
  border-color: rgba(81, 68, 50, 0.78);
  background:
    radial-gradient(circle at 22% 20%, rgba(145, 112, 67, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(43, 36, 27, 0.72), rgba(12, 12, 11, 0.84)),
    rgba(16, 15, 13, 0.94);
}

.lobby:not(.lobbyPreRoom) .lobbyButtons {
  gap: 0.42rem;
}

.lobby:not(.lobbyPreRoom) .lobbyButtons button {
  min-height: 1.92rem;
  padding-block: 0.28rem;
  font-size: 0.72rem;
  border-color: rgba(101, 82, 54, 0.82);
  background:
    linear-gradient(180deg, rgba(54, 44, 31, 0.98), rgba(20, 18, 15, 0.99)),
    #211d17;
  color: #e1d0ac;
  box-shadow: inset 0 0 0 1px rgba(236, 199, 116, 0.07), 0 2px 7px rgba(0, 0, 0, 0.48);
}

.lobby:not(.lobbyPreRoom) #readyBtn:not(:disabled) {
  border-color: rgba(126, 165, 105, 0.78);
  background: linear-gradient(180deg, #314439, #17211d);
}

.lobby:not(.lobbyPreRoom) #startBtn:not(:disabled) {
  border-color: rgba(185, 151, 84, 0.8);
  background: linear-gradient(180deg, #4a3d28, #211b13);
}

.lobbyHeader .progressionLeader {
  grid-template-columns: minmax(142px, 0.38fr) minmax(0, 1fr) auto;
  gap: 0.48rem;
}

.levelBadge {
  grid-template-columns: 2.58rem minmax(0, 1fr) 0.72rem;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  min-width: 148px;
  min-height: 3.18rem;
  padding: 0.3rem 0.6rem 0.28rem 0.48rem;
}

.classBadgeTop {
  grid-column: 1 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: 2.58rem minmax(0, 1fr) 0.72rem;
  align-items: center;
  justify-items: center;
  width: 100%;
  gap: 0.18rem;
  text-align: center;
  transform: translateY(1px);
}

.classBadgeTop i {
  grid-column: 1;
  justify-self: center;
  width: 2.2rem;
  height: 2.2rem;
}

.classBadgeTop b {
  grid-column: 2;
  justify-self: center;
  width: 100%;
  text-align: center;
}

.levelBadge strong {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: 100%;
  text-align: center;
  transform: translateY(-2px);
}

.levelBadge em {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  width: 100%;
  margin-top: 0;
  color: #7edfff;
  font-size: 0.48rem;
  text-align: center;
  transform: translateY(-3px);
}

.levelBadge::after {
  position: absolute;
  right: 0.58rem;
  top: 0.9rem;
  grid-column: auto;
  grid-row: auto;
}

.levelBadge:hover,
.levelBadge:focus-visible {
  transform: translateY(-1px) scale(1.012);
}

.classSelectList button > i,
.roomClassOptions button > i,
.playerClass > i {
  width: 1.12rem;
  height: 1.12rem;
}

.encounterPicker {
  grid-template-columns: minmax(100px, 0.42fr) minmax(180px, 1fr);
  padding: 0.32rem;
}

.encounterRegionArt {
  min-height: 56px;
}

.encounterBossCard {
  min-height: 38px;
}

.encounterBossCard img {
  width: 34px;
  height: 34px;
}

.encounterDifficultyButton {
  min-height: 1.42rem;
}

@media (max-height: 760px) {
  .lobby:not(.lobbyPreRoom) .classProgressPanel {
    padding-block: 0.22rem;
  }

  .lobby:not(.lobbyPreRoom) .roomPanel {
    gap: 0.26rem;
    padding: 0.34rem;
  }

  .encounterRegionArt {
    min-height: 48px;
  }

  .encounterBossCard {
    min-height: 34px;
    padding-block: 0.14rem;
  }

  .encounterBossCard img {
    width: 30px;
    height: 30px;
  }

  .lobby:not(.lobbyPreRoom) .playerLine {
    min-height: 1.42rem;
    padding-block: 0.16rem;
  }
}

/* Class button final alignment: icon panel left, text stack centered. */
.levelBadge {
  grid-template-columns: 2.95rem minmax(0, 1fr) 0.54rem;
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  justify-items: center;
  column-gap: 0.2rem;
  row-gap: 0;
  min-width: 154px;
  min-height: 3.1rem;
  padding: 0.22rem 0.5rem 0.2rem 0.36rem;
}

.classBadgeTop {
  display: contents;
}

.classBadgeTop i {
  grid-column: 1;
  grid-row: 1 / 5;
  align-self: center;
  justify-self: center;
  width: 2.72rem;
  height: 2.72rem;
  padding: 0.16rem;
  border: 1px solid rgba(205, 150, 60, 0.42);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 215, 104, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(23, 15, 8, 0.82), rgba(7, 5, 3, 0.9));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.72), 0 0 7px rgba(255, 186, 62, 0.18);
}

.classBadgeTop .rangerBowIcon,
.classSelectList .rangerBowIcon {
  background:
    url("/assets/class-icons/ranger-bow.png") center / 84% 84% no-repeat,
    radial-gradient(circle at 50% 45%, rgba(255, 215, 104, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(23, 15, 8, 0.82), rgba(7, 5, 3, 0.9));
}

.classBadgeTop .warriorSwordIcon,
.classSelectList .warriorSwordIcon {
  background:
    url("/assets/class-icons/slayer-sword.png") center / 84% 84% no-repeat,
    radial-gradient(circle at 50% 45%, rgba(255, 215, 104, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(23, 15, 8, 0.82), rgba(7, 5, 3, 0.9));
}

.classBadgeTop .wizardStaffIcon,
.classSelectList .wizardStaffIcon {
  background:
    url("/assets/class-icons/wizard-staff.png?v=2") center / 84% 84% no-repeat,
    radial-gradient(circle at 50% 45%, rgba(140, 160, 255, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(12, 10, 22, 0.82), rgba(5, 3, 12, 0.9));
}

.classBadgeTop b {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  width: 100%;
  color: #ffd76f;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 0.95;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 7px rgba(255, 188, 53, 0.62);
  transform: translateY(-2px);
}

.levelBadge strong {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  width: 100%;
  color: #fff4d4;
  font-size: 0.68rem;
  line-height: 0.9;
  text-align: center;
  transform: none;
}

.levelBadge em {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  justify-self: center;
  width: 100%;
  color: #74ddff;
  font-size: 0.42rem;
  letter-spacing: 0.06em;
  line-height: 0.95;
  text-align: center;
  transform: translateY(2px);
}

.levelBadge::after {
  right: 0.42rem;
  top: 0.46rem;
  border-left-width: 0.24rem;
  border-right-width: 0.24rem;
  border-top-width: 0.34rem;
}

.classSelectList button {
  grid-template-columns: 3.1rem minmax(0, 1fr);
}

.classSelectList button > i {
  width: 2.72rem;
  height: 2.72rem;
  padding: 0.18rem;
  border: 1px solid rgba(223, 174, 78, 0.46);
  border-radius: 6px;
  background:
    radial-gradient(circle, rgba(255, 212, 95, 0.16), transparent 58%),
    rgba(9, 7, 5, 0.76);
  box-shadow: inset 0 0 11px rgba(0, 0, 0, 0.66), 0 0 8px rgba(255, 190, 72, 0.16);
}

.classSelectList .rangerBowIcon {
  background:
    url("/assets/class-icons/ranger-bow.png") center / 84% 84% no-repeat,
    radial-gradient(circle, rgba(255, 212, 95, 0.16), transparent 58%),
    rgba(9, 7, 5, 0.76);
}

.classSelectList .warriorSwordIcon {
  background:
    url("/assets/class-icons/slayer-sword.png") center / 84% 84% no-repeat,
    radial-gradient(circle, rgba(255, 212, 95, 0.16), transparent 58%),
    rgba(9, 7, 5, 0.76);
}

.classSelectList .wizardStaffIcon {
  background:
    url("/assets/class-icons/wizard-staff.png?v=2") center / 84% 84% no-repeat,
    radial-gradient(circle, rgba(140, 160, 255, 0.16), transparent 58%),
    rgba(5, 3, 12, 0.76);
}

.accountHelpLine {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  align-self: flex-start;
  min-width: 0;
}

.helpButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.28rem;
  min-width: 1.28rem;
  height: 1.28rem;
  padding: 0;
  border: 1px solid rgba(231, 184, 88, 0.78);
  border-radius: 50%;
  color: #ffe4a0;
  background: radial-gradient(circle at 45% 28%, rgba(115, 82, 33, 0.95), rgba(37, 23, 11, 0.95));
  box-shadow: inset 0 0 9px rgba(255, 207, 103, 0.16), 0 0 8px rgba(225, 167, 60, 0.2);
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

#bossGuideModal:not(.hidden) {
  z-index: 4200;
}

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 6, 9, 0.72);
  backdrop-filter: blur(4px);
}

.helpButton:hover,
.helpButton.helpOpen {
  border-color: #ffe19a;
  box-shadow: inset 0 0 12px rgba(255, 215, 121, 0.22), 0 0 14px rgba(245, 191, 72, 0.42);
}

.helpMenu {
  position: fixed;
  top: 3.7rem;
  right: auto;
  z-index: 1300;
  width: min(170px, calc(100vw - 1rem));
  padding: 0.36rem;
  border: 1px solid rgba(221, 171, 84, 0.72);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(31, 22, 13, 0.98), rgba(10, 8, 6, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 20px rgba(217, 151, 56, 0.08);
}

.helpMenu button,
.tutorialButtons button,
.tutorialModalActions button,
.trainingExitBtn {
  border: 1px solid rgba(223, 174, 78, 0.72);
  border-radius: 6px;
  color: #f5dfae;
  background: linear-gradient(180deg, rgba(82, 52, 25, 0.95), rgba(34, 22, 12, 0.96));
  font-family: Cinzel, Georgia, serif;
  font-weight: 800;
  cursor: pointer;
}

.helpMenu button {
  width: 100%;
  margin: 0.12rem 0;
  padding: 0.34rem 0.42rem;
  text-align: left;
  font-size: 0.72rem;
}

.helpMenu button:hover,
.tutorialButtons button:hover,
.tutorialModalActions button:hover,
.trainingExitBtn:hover {
  border-color: #ffe09a;
  color: #fff5d7;
  box-shadow: 0 0 12px rgba(237, 184, 77, 0.35);
}

.helpMenu button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.helpSubmenu {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(203, 151, 68, 0.28);
}

.tutorialLayer {
  position: fixed;
  inset: 0;
  z-index: 1250;
  pointer-events: auto;
}

.tutorialDim {
  position: fixed;
  background: rgba(0, 0, 0, 0.72);
  transition: inset 160ms ease, width 160ms ease, height 160ms ease;
}

.tutorialMultiDim {
  position: fixed;
  inset: 0;
  z-index: 1251;
  pointer-events: none;
}

.tutorialSpotlight {
  position: fixed;
  z-index: 1252;
  border: 2px solid rgba(255, 209, 97, 0.95);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0), 0 0 22px rgba(255, 197, 58, 0.7);
  animation: tutorialPulse 1.35s ease-in-out infinite;
  pointer-events: none;
}

.tutorialExtraSpotlight {
  position: fixed;
  z-index: 1252;
  border: 2px solid rgba(255, 221, 104, 0.98);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(255, 202, 67, 0.82), inset 0 0 12px rgba(255, 215, 95, 0.18);
  animation: tutorialPulse 1.15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tutorialPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 197, 58, 0.45); }
  50% { box-shadow: 0 0 26px rgba(255, 222, 116, 0.9); }
}

.tutorialBox,
.tutorialModal {
  z-index: 1253;
  border: 1px solid rgba(224, 174, 86, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(49, 34, 18, 0.98), rgba(16, 12, 8, 0.98)),
    radial-gradient(circle at 20% 0, rgba(255, 215, 118, 0.12), transparent 48%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), inset 0 0 18px rgba(255, 192, 76, 0.08);
}

.tutorialBox {
  position: fixed;
  width: min(300px, calc(100vw - 28px));
  padding: 0.68rem;
  color: #f7e4bd;
}

.tutorialBox small,
.trainingPanel small {
  color: #83dfff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tutorialBox h2,
.tutorialModal h2,
.trainingPanel h2 {
  margin: 0.14rem 0 0.28rem;
  color: #ffd67b;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.98rem;
}

.tutorialBox p,
.tutorialModal p,
.trainingPanel p {
  margin: 0;
  line-height: 1.28;
  font-size: 0.78rem;
}

.tutorialButtons,
.tutorialModalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
  margin-top: 0.58rem;
}

.tutorialButtons button,
.tutorialModalActions button {
  flex: 1 1 auto;
  padding: 0.38rem 0.48rem;
  font-size: 0.72rem;
}

.tutorialModal {
  width: min(470px, calc(100vw - 2rem));
  padding: 1rem;
  color: #f7e4bd;
  position: relative;
}

.tutorialModal .modalClose {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(211, 157, 65, 0.45);
  border-radius: 50%;
  background: rgba(20, 13, 7, 0.86);
  color: #d8bd83;
  font-size: 1rem;
  line-height: 1;
  box-shadow: inset 0 0 8px rgba(255, 207, 112, 0.1);
  cursor: pointer;
}

.tutorialModal .modalClose:hover,
.tutorialModal .modalClose:focus-visible {
  border-color: rgba(255, 211, 110, 0.85);
  color: #fff0c4;
  background: rgba(44, 27, 13, 0.96);
}

.trainingPromptClassIcon {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 0 0.42rem;
  border: 1px solid rgba(226, 176, 81, 0.78);
  border-radius: 10px;
  background-color: rgba(22, 15, 8, 0.94);
  background-size: 78%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 14px rgba(255, 196, 82, 0.12),
    0 0 14px rgba(255, 196, 82, 0.12);
}

.rangerTrainingView {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  background: #060503;
}

.trainingArena {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(42, 59, 45, 0.38), transparent 42%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #11100d;
  background-size: auto, 58px 58px, 58px 58px, auto;
}

.trainingWorld {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.trainingPanel {
  position: absolute;
  left: 50%;
  top: 0.8rem;
  z-index: 3;
  width: min(390px, calc(100vw - 2rem));
  transform: translateX(-50%);
  padding: 0.5rem 0.68rem;
  border: 1px solid rgba(226, 176, 81, 0.72);
  border-radius: 8px;
  color: #f7e4bd;
  background: rgba(20, 14, 8, 0.92);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  text-align: center;
}

.trainingPanel strong {
  display: block;
  margin-top: 0.24rem;
  color: #ffffff;
  font-size: 0.78rem;
}

.trainingPanel em {
  display: block;
  margin-top: 0.18rem;
  color: #9ee8ff;
  font-size: 0.66rem;
  font-style: normal;
}

.trainingExitBtn {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 4;
  padding: 0.45rem 0.7rem;
}

.inGameTrainingPanel {
  z-index: 7;
  pointer-events: auto;
}

.inGameTutorialStepNav {
  justify-content: center;
  margin-top: 0.42rem;
}

.inGameTutorialStepNav button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.inGameTrainingPanel h2 {
  font-size: 0.94rem;
  margin: 0.14rem 0 0.22rem;
}

.inGameTrainingPanel p {
  font-size: 0.74rem;
  line-height: 1.22;
}

.inGameTrainingPanel small {
  font-size: 0.62rem;
}

.trainingPanel strong.tutorialStepCompleted {
  color: #70ff8b;
  text-shadow: 0 0 10px rgba(84, 255, 121, 0.65), 0 1px 0 rgba(0, 0, 0, 0.8);
  font-size: 0.95rem;
}

.inGameTrainingPanel .tutorialModalActions {
  justify-content: center;
}

.inGameTrainingExit {
  z-index: 8;
}

.trainingDummy,
.trainingPlayer,
.trainingDanger {
  position: absolute;
  transform: translate(-50%, -50%);
}

.trainingPlayer {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, #7fe070 0 26%, #315e27 28% 58%, #14200e 60%);
  border: 2px solid #78dfff;
  box-shadow: 0 0 16px rgba(88, 208, 255, 0.35);
}

.trainingDummy {
  width: 52px;
  height: 64px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, #6f4d2c, #2c1a0d);
  border: 2px solid rgba(226, 176, 81, 0.8);
  box-shadow: 0 0 14px rgba(255, 198, 84, 0.25);
}

.trainingDummy.trainingTarget::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 2px solid #ffd45e;
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd45e;
}

.trainingDanger {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid rgba(255, 70, 54, 0.9);
  background: rgba(170, 24, 16, 0.18);
  animation: trainingDangerPulse 0.65s ease-in-out infinite;
}

@keyframes trainingDangerPulse {
  50% { background: rgba(230, 36, 24, 0.34); box-shadow: 0 0 22px rgba(255, 57, 43, 0.45); }
}

.trainingSpellBar {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  gap: 0.48rem;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
}

.trainingSpellButton {
  position: relative;
  width: clamp(52px, 6vw, 72px);
  aspect-ratio: 1;
  border: 1px solid rgba(198, 151, 68, 0.72);
  border-radius: 8px;
  background: #100d09;
  opacity: 0.45;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.7);
}

.trainingSpellButton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.trainingSpellButton kbd {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0,0,0,0.82);
  font-size: 0.68rem;
}

.trainingSpellButton.trainingSpellActive {
  opacity: 1;
  border-color: #ffd45e;
  box-shadow: 0 0 18px rgba(255, 207, 82, 0.78), inset 0 0 10px rgba(255, 205, 75, 0.18);
}

.contextualHintLayer {
  position: fixed;
  left: 50%;
  bottom: 8.6rem;
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(520px, calc(100vw - 2rem));
  padding: 0.65rem 0.8rem;
  transform: translateX(-50%);
  border: 1px solid rgba(228, 178, 83, 0.72);
  border-radius: 8px;
  color: #fff3d1;
  background: rgba(15, 10, 6, 0.94);
  box-shadow: 0 14px 30px rgba(0,0,0,0.48);
}

.contextualHintLayer button {
  border: 0;
  color: #ffd67b;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
}

.tutorialHudHighlight {
  position: relative;
  z-index: 3;
  outline: 2px solid rgba(255, 218, 96, 0.98);
  outline-offset: 3px;
  box-shadow: 0 0 16px rgba(255, 210, 72, 0.88), 0 0 34px rgba(255, 170, 34, 0.52), inset 0 0 16px rgba(255, 224, 98, 0.22);
  animation: tutorialHudShine 0.9s ease-in-out infinite;
}

@keyframes tutorialHudShine {
  0%, 100% {
    filter: brightness(1.08);
    box-shadow: 0 0 14px rgba(255, 210, 72, 0.75), 0 0 28px rgba(255, 170, 34, 0.42), inset 0 0 14px rgba(255, 224, 98, 0.18);
  }
  50% {
    filter: brightness(1.32);
    box-shadow: 0 0 24px rgba(255, 230, 118, 1), 0 0 46px rgba(255, 178, 42, 0.7), inset 0 0 20px rgba(255, 234, 130, 0.28);
  }
}

/* === Compact class spell selection cards === */
.lobbySpellReference .lobbySpellList {
  grid-template-rows: repeat(6, 60px);
  gap: 0.32rem;
  overflow-x: hidden;
  overflow-y: visible;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.lobbySpellReference {
  overflow-x: hidden;
}

.lobbySpellReference .lobbySpellItem {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 60px;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lobbySpellReference .lobbySpellItem.loadoutOpen {
  z-index: 120;
}

.lobbySpellReference .loadoutSpellSelect {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 0.32rem 0.42rem;
  gap: 0.42rem;
  color: #f0d9a6;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(206, 150, 62, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(37, 27, 18, 0.95), rgba(12, 10, 8, 0.96));
  border: 1px solid #6c4a24;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(5, 4, 3, 0.9), 0 4px 10px rgba(0, 0, 0, 0.36);
  cursor: pointer;
}

.lobbySpellReference .loadoutSpellSelect:hover,
.lobbySpellReference .loadoutSpellSelect:focus-visible {
  background:
    linear-gradient(90deg, rgba(222, 167, 72, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(48, 35, 22, 0.98), rgba(18, 13, 9, 0.98));
  border-color: #a57938;
  outline: none;
}

.lobbySpellReference .lobbySpellItem.loadoutOpen .loadoutSpellSelect {
  background:
    linear-gradient(90deg, rgba(230, 178, 83, 0.17), transparent 62%),
    linear-gradient(180deg, #302113, #15100b);
  border-color: #d1a557;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellIcon {
  flex: 0 0 auto;
  display: block;
  width: 46px !important;
  height: 46px !important;
  object-fit: cover;
  border: 1px solid #8b6332;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1b140d, 0 2px 6px rgba(0, 0, 0, 0.55);
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.14rem;
  padding-right: 3.05rem;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText strong {
  overflow: hidden;
  color: #f4d99d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.73rem;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px #000;
  white-space: nowrap;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText small {
  display: -webkit-box;
  overflow: hidden;
  color: #b8ab91;
  font-size: 0.46rem;
  font-weight: 400;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellActions {
  position: absolute;
  top: 0.34rem;
  right: 0.4rem;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.28rem;
  min-width: max-content;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellActions kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.22rem;
  color: #f5dfaa;
  background: rgba(8, 7, 6, 0.76);
  border: 1px solid rgba(180, 137, 67, 0.72);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 145, 0.12);
  font-size: 0.46rem;
  line-height: 1;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellActions i {
  display: block;
  flex: 0 0 auto;
  width: 0 !important;
  height: 0 !important;
  border-top: 6px solid #d7ad5b !important;
  border-right: 5px solid transparent !important;
  border-bottom: 0 !important;
  border-left: 5px solid transparent !important;
  transition: transform 0.12s ease, border-top-color 0.12s ease;
}

.lobbySpellReference .loadoutSpellSelect:hover > .loadoutSpellActions i,
.lobbySpellReference .loadoutSpellSelect:focus-visible > .loadoutSpellActions i {
  border-top-color: #ffe1a0;
}

.lobbySpellReference .lobbySpellItem.loadoutOpen .loadoutSpellSelect > .loadoutSpellActions i {
  transform: rotate(180deg);
  border-top: 6px solid #d7ad5b !important;
  border-bottom: 0 !important;
}

.lobbySpellReference .loadoutSpellMenu {
  display: none !important;
}

.spellSelectorOverlay {
  position: fixed;
  z-index: 12000;
  display: grid;
  gap: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.24rem;
  background: #17100a;
  border: 1px solid #b18442;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 142, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.78);
}

.spellSelectorOption {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  min-height: 54px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.48rem;
  gap: 0.48rem;
  color: #ead9b9;
  text-align: left;
  background: #21170e;
  border: 0;
  border-bottom: 1px solid rgba(117, 82, 41, 0.72);
  cursor: pointer;
}

.spellSelectorOption:last-child {
  border-bottom: 0;
}

.spellSelectorOption:hover:not(:disabled),
.spellSelectorOption.selected {
  color: #fff0c4;
  background: #3a2815;
  box-shadow: inset 0 0 0 1px rgba(220, 172, 83, 0.58);
}

.spellSelectorOption.locked,
.spellSelectorOption:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.spellSelectorOption img {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #6f502b;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.52);
}

.spellSelectorOption span {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.1rem;
}

.spellSelectorOption strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.7rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spellSelectorOption small {
  overflow: hidden;
  color: #b8aa8d;
  font-size: 0.54rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spellSelectorOption b,
.spellSelectorOption em {
  flex: 0 0 auto;
  min-width: 1.3rem;
  color: #f4cf7d;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 1px #000;
}

.spellSelectorOption em {
  min-width: 1.8rem;
  color: #967f58;
  font-size: 0.48rem;
}

.spellSelectorOption > .spellTooltip {
  display: none !important;
}

.lobbySpellReference .lobbySpellItem > .spellTooltip {
  display: none !important;
}

.lobbySpellReference .lobbySpellItem:hover > .spellTooltip,
.lobbySpellReference .lobbySpellItem:focus-within > .spellTooltip {
  display: none !important;
}

.lobbySpellReference .lobbySpellItem.loadoutOpen > .spellTooltip {
  display: none !important;
}

/* === Class portrait header polish === */
.lobbySpellReference {
  grid-template-rows: 2.15rem clamp(240px, 36dvh, 305px) minmax(0, 1fr);
  gap: 0.48rem;
}

.lobbySpellReference .lobbyReferenceTitle {
  align-items: center;
  padding: 0 0.08rem 0.26rem;
  border-bottom: 0;
}

.lobbySpellReference .lobbyReferenceTitle span {
  font-size: 1.28rem;
  color: #f4d796;
}

.lobbySpellReference .masteryWoodButton {
  min-width: 6.9rem;
  max-width: 6.9rem;
  min-height: 1.86rem;
  padding: 0.3rem 0.52rem;
  color: #f5dfaa;
  background:
    linear-gradient(180deg, rgba(62, 42, 21, 0.96), rgba(17, 12, 8, 0.98)),
    #24180d;
  border: 1px solid #ad7c39;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 223, 153, 0.1), 0 2px 10px rgba(0, 0, 0, 0.42);
  font-size: 0.68rem;
}

.lobbySpellReference .rangerLobbyFrame {
  display: block;
  overflow: hidden;
  border: 1px solid #9a7133;
  background:
    linear-gradient(180deg, rgba(30, 22, 13, 0.32), rgba(5, 5, 4, 0.12)),
    #060705;
  box-shadow:
    inset 0 0 0 1px rgba(7, 5, 3, 0.92),
    inset 0 0 24px rgba(0, 0, 0, 0.66),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

.lobbySpellReference .rangerLobbyFrame::before,
.lobbySpellReference .rangerLobbyFrame::after {
  content: "";
  position: absolute;
  inset: 0.22rem;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(180, 132, 57, 0.36);
}

.lobbySpellReference .rangerLobbyFrame::after {
  inset: 0.42rem;
  border-color: rgba(238, 190, 94, 0.14);
}

.lobbySpellReference .rangerLobbyArt {
  display: block;
  width: 100%;
  height: calc(100% - 3.1rem);
  object-fit: cover;
  object-position: center 17%;
}

.lobbySpellReference .classStatPreview {
  left: 50%;
  right: auto;
  bottom: 3.1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(12.8rem, calc(100% - 2.4rem));
  min-width: 0;
  padding: 0.42rem 0.62rem;
  gap: 1.35rem;
  transform: translateX(-50%);
  border: 1px solid rgba(217, 164, 78, 0.66);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(19, 13, 8, 0.96), rgba(35, 24, 14, 0.96), rgba(19, 13, 8, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 142, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.55);
  font-size: 0.66rem;
}

.lobbySpellReference .classStatPreview span {
  justify-content: center;
  gap: 0.26rem;
}

.lobbySpellReference .classStatPreview b {
  color: #efd196;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.classStatPreview i {
  display: inline-grid;
  place-items: center;
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
}

.classStatHpIcon::before {
  content: "";
  width: 0.72rem;
  height: 0.64rem;
  background: radial-gradient(circle at 30% 30%, #ff8b61, #c62219 58%, #6b0707 100%);
  transform: rotate(45deg);
  border-radius: 55% 55% 8% 55%;
  box-shadow: 0 0 7px rgba(225, 45, 30, 0.42);
}

.classStatDamageIcon::before {
  content: "";
  width: 0.88rem;
  height: 0.88rem;
  background:
    linear-gradient(135deg, transparent 0 38%, #f7dc8b 39% 48%, #6e4b1d 49% 55%, transparent 56%),
    linear-gradient(45deg, transparent 0 45%, #c89538 46% 54%, transparent 55%);
  transform: rotate(-12deg);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
}

.lobbySpellReference .classFrameActions {
  position: absolute;
  left: 50%;
  bottom: 0.72rem;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.36rem;
  width: min(12.8rem, calc(100% - 2.4rem));
  transform: translateX(-50%);
}

.lobbySpellReference .classFrameActions .skinButton {
  grid-column: 1;
  grid-row: 1;
}

.lobbySpellReference .classFrameActions .relicLoadoutButton {
  grid-column: 2;
  grid-row: 1;
}

.lobbySpellReference .skinButton,
.lobbySpellReference .relicLoadoutButton {
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  height: 1.82rem;
  margin: 0;
  padding: 0.28rem 0.44rem;
  gap: 0.28rem;
  color: #f2d69a;
  background:
    linear-gradient(180deg, rgba(61, 42, 22, 0.98), rgba(17, 12, 8, 0.98)),
    #21150b;
  border: 1px solid #ac7a35;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 145, 0.09), 0 3px 10px rgba(0, 0, 0, 0.44);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  text-shadow: 0 1px 2px #000;
}

.lobbySpellReference .skinButton span {
  width: 0.76rem;
  height: 0.76rem;
  background:
    radial-gradient(circle at 50% 20%, #f5d284 0 18%, transparent 19%),
    linear-gradient(90deg, transparent 0 22%, #d8bd83 23% 34%, transparent 35% 65%, #d8bd83 66% 77%, transparent 78%),
    radial-gradient(circle at 50% 58%, #8f7443 0 32%, transparent 33%);
  filter: drop-shadow(0 1px 1px #000);
}

.lobbySpellReference .relicLoadoutButton img {
  width: 0.92rem;
  height: 0.92rem;
}

.classStatHpIcon::before {
  content: "♥";
  width: auto;
  height: auto;
  color: #e02b1f;
  background: none;
  border-radius: 0;
  box-shadow: 0 0 7px rgba(225, 45, 30, 0.42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1;
  transform: none;
}

.classStatDamageIcon::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82));
}

.classStatPreview-ranger .classStatDamageIcon::before {
  background-image: url("/assets/class-icons/ranger-bow.png");
}

.campHeroStageStats-ranger .classStatDamageIcon::before {
  background-image: url("/assets/class-icons/ranger-bow.png");
}

.classStatPreview-warrior .classStatDamageIcon::before,
.classStatPreview-slayer .classStatDamageIcon::before {
  background-image: url("/assets/class-icons/slayer-sword.png");
}

.campHeroStageStats-warrior .classStatDamageIcon::before,
.campHeroStageStats-slayer .classStatDamageIcon::before {
  background-image: url("/assets/class-icons/slayer-sword.png");
}

.campHeroStageStats .classStatHpIcon::before {
  content: "\2665";
}

.campHeroStageStats .classStatHpIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.campHeroStageStats .classStatDamageIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lobbySpellReference .skinButton:hover,
.lobbySpellReference .relicLoadoutButton:hover,
.lobbySpellReference .masteryWoodButton:hover {
  border-color: #e3b765;
  filter: brightness(1.08);
}

.lobbySpellReference .rangerLobbyFrame > .debuffPreviewRow {
  top: 0.68rem;
  right: 0.68rem;
  bottom: auto;
  z-index: 7;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText small {
  font-size: 0.58rem;
  line-height: 1.16;
}

/* Compact lobby quick action buttons. */
.lobbyHeader .progressionActionRow {
  grid-template-columns: repeat(4, minmax(6.4rem, 8.8rem));
  justify-content: center;
  gap: 0.36rem;
}

.lobbyHeader .progressionActionRow button {
  width: 100%;
  max-width: 8.8rem;
  padding-inline: 0.55rem;
}

/* Boss reference and guide final polish */
#bossReference .bossPortrait {
  object-fit: contain;
  object-position: center 22%;
  border-color: #4b9f43;
}

#bossReference.bossReferenceHard .bossPortrait {
  border-color: #c94634;
}

#bossReference.bossReferenceAscended .bossPortrait {
  height: 100%;
  object-fit: contain;
  object-position: center 22%;
  border-color: #9c68ff;
}

button.bossAbilityItem {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.bossAbilityItem:hover,
button.bossAbilityItem:focus-visible {
  border-color: rgba(255, 210, 113, 0.82);
  background:
    linear-gradient(90deg, rgba(220, 163, 73, 0.09), transparent),
    rgba(17, 18, 14, 0.86);
  outline: none;
}

.bossChestDropPreview {
  gap: 0.16rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bossChestDropPreview .chestIcon {
  width: 2.08rem;
  height: 2.08rem;
}

.bossChestDropPreview b {
  margin-left: -0.06rem;
  color: #f7d98b;
  font-size: 0.7rem;
  text-shadow: 0 2px 3px #000, 0 0 6px rgba(255, 190, 75, 0.45);
}

.bossGuideRelicDrops {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.48rem;
}

.bossGuideRelicDrops > span {
  color: #6f4b22;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bossGuideRelicDrops > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.bossGuideRelicDropIcon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  background: rgba(46, 28, 11, 0.64);
  border: 1px solid rgba(116, 72, 25, 0.65);
  border-radius: 2px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.42);
  cursor: help;
}

.bossGuideRelicDropIcon:hover,
.bossGuideRelicDropIcon:focus-visible {
  border-color: rgba(184, 119, 32, 0.9);
  outline: none;
}

.bossGuideRelicDropIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.relicActionWarning {
  color: #ff9d7a;
  font-weight: 800;
}

/* === Viewport-safe lobby and macOS compatibility pass === */
html,
body,
#root,
.app {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

img,
canvas,
video,
svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  min-width: 0;
  font: inherit;
}

button,
select,
input:not([type="checkbox"]):not([type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
}

.panel.lobby {
  --lobby-gap: clamp(0.32rem, 0.62vw, 0.62rem);
  --lobby-pad: clamp(0.28rem, 0.62vw, 0.62rem);
  --lobby-left-width: clamp(228px, 20.5vw, 292px);
  --lobby-right-width: clamp(214px, 20vw, 292px);
  display: grid;
  grid-template-columns: minmax(0, var(--lobby-left-width)) minmax(390px, 1fr) minmax(0, var(--lobby-right-width));
  align-items: stretch;
  width: min(100%, 1480px);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: var(--lobby-pad);
  gap: var(--lobby-gap);
  overflow: hidden;
}

.panel.lobby > *,
.lobbyCore,
.lobbyHeader,
.lobbyReference,
.roomPanel,
.encounterPicker,
.classProgressPanel,
.publicRoomsPanel {
  min-width: 0;
  min-height: 0;
}

.lobbyCore,
.lobbyReference {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.lobbyCore {
  display: grid;
  align-content: stretch;
  gap: clamp(0.22rem, 0.5dvh, 0.5rem);
}

.lobby:not(.lobbyPreRoom) .lobbyCore {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lobbyPreRoom .lobbyCore {
  grid-template-rows: auto auto minmax(0, auto) minmax(0, 1fr) auto;
}

.lobbyReference {
  grid-template-rows: auto minmax(112px, var(--lobby-media-height)) minmax(0, 1fr);
  padding: clamp(0.42rem, 0.75vw, 0.68rem);
  gap: clamp(0.28rem, 0.55dvh, 0.48rem);
}

.lobbySpellReference {
  grid-template-rows: auto clamp(190px, 31dvh, 292px) minmax(0, 1fr);
}

.lobbySpellReference .lobbySpellList,
.bossAbilityList,
.publicRoomsList,
.playersList {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.lobbySpellReference .lobbySpellList {
  grid-template-rows: repeat(6, minmax(52px, 1fr));
  overflow-y: auto;
  padding-right: 0.08rem;
}

.bossAbilityList,
.publicRoomsList {
  overflow-y: auto;
}

.lobby:not(.lobbyPreRoom) .playersList {
  max-height: none;
  overflow-y: auto;
}

.lobby:not(.lobbyPreRoom) .roomPanel {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.lobbyButtons {
  flex-wrap: nowrap;
  min-height: 0;
}

.lobbyButtons button,
.progressionActionRow button,
.encounterDifficultyButton,
.encounterBossCard,
.roomClassOptions button {
  box-sizing: border-box;
}

.lobbyHeader {
  overflow: visible;
}

.lobbyHeader .accountBar,
.lobbyHeader .classProgressPanel,
.lobbyHeader .progressionLeader,
.lobbyHeader .progressionActionRow {
  min-width: 0;
}

.lobbyHeader .progressionActionRow {
  grid-template-columns: repeat(4, minmax(5.35rem, 7.8rem));
  justify-content: center;
}

.lobbyHeader .progressionActionRow button {
  max-width: 7.8rem;
  min-height: clamp(1.48rem, 3.6dvh, 1.92rem);
  white-space: nowrap;
}

.encounterBossCard,
.bossAbilityItem {
  overflow: hidden;
}

.encounterBossCard b,
.encounterBossCard span,
.bossAbilityItem strong,
.bossAbilityItem p,
.playerLine,
.roomHeader strong,
.lobbyBossModeBanner strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bossAbilityItem {
  grid-template-columns: clamp(32px, 3.5dvh, 46px) minmax(0, 1fr);
  min-height: clamp(38px, 7.3dvh, 58px);
  padding-block: clamp(0.12rem, 0.38dvh, 0.3rem);
}

.bossAbilityItem > img {
  width: clamp(32px, 3.5dvh, 46px);
  height: clamp(32px, 3.5dvh, 46px);
}

.bossAbilityItem p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.roomPanel,
.lobbyReference,
.lobbyHeader {
  -webkit-backdrop-filter: blur(0);
}

@media (max-width: 1400px), (max-height: 860px) {
  .panel.lobby {
    --lobby-left-width: clamp(214px, 20vw, 260px);
    --lobby-right-width: clamp(202px, 19vw, 260px);
    grid-template-columns: minmax(0, var(--lobby-left-width)) minmax(360px, 1fr) minmax(0, var(--lobby-right-width));
  }

  .lobbySpellReference {
    grid-template-rows: auto clamp(168px, 28dvh, 244px) minmax(0, 1fr);
  }

  .lobbySpellReference .loadoutSpellSelect {
    min-height: 52px;
    padding-block: 0.22rem;
  }

  .lobbySpellReference .loadoutSpellSelect > .loadoutSpellIcon {
    width: 42px !important;
    height: 42px !important;
  }

  .lobbyHeader .progressionActionRow {
    grid-template-columns: repeat(4, minmax(4.9rem, 7.2rem));
    gap: 0.28rem;
  }

  .lobbyHeader .progressionActionRow button {
    max-width: 7.2rem;
    font-size: 0.58rem;
  }
}

@media (max-height: 760px) {
  .panel.lobby {
    --lobby-gap: 0.28rem;
    --lobby-pad: 0.26rem;
  }

  .lobbyReference {
    padding: 0.34rem;
    gap: 0.22rem;
  }

  .lobbySpellReference {
    grid-template-rows: auto clamp(138px, 25dvh, 196px) minmax(0, 1fr);
  }

  .lobbySpellReference .lobbyReferenceTitle span {
    font-size: 1rem;
  }

  .lobbySpellReference .masteryWoodButton {
    min-height: 1.5rem;
    font-size: 0.58rem;
  }

  .lobbySpellReference .classStatPreview {
    bottom: 2.76rem;
    padding-block: 0.28rem;
    gap: 0.9rem;
  }

  .lobbySpellReference .classFrameActions {
    bottom: 0.46rem;
  }

  .lobbySpellReference .skinButton,
  .lobbySpellReference .relicLoadoutButton {
    height: 1.48rem;
    font-size: 0.62rem;
  }

  .lobbySpellReference .loadoutSpellSelect {
    min-height: 48px;
  }

  .lobbySpellReference .lobbySpellList {
    grid-template-rows: repeat(6, minmax(46px, 1fr));
    gap: 0.18rem;
  }

  .lobbySpellReference .loadoutSpellSelect > .loadoutSpellText small {
    -webkit-line-clamp: 1;
  }

  .bossAbilityItem p {
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 1160px) {
  .panel.lobby {
    grid-template-columns: minmax(224px, 0.38fr) minmax(0, 1fr);
    width: 100%;
  }

  #bossReference {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .panel.lobby {
    grid-template-columns: minmax(0, 1fr);
  }

  .lobbySpellReference {
    display: none !important;
  }

  .lobbyCore {
    overflow: hidden;
  }

  .lobbyHeader .progressionLeader {
    grid-template-columns: minmax(128px, auto) minmax(0, 1fr);
  }

  .lobbyHeader .crystalCounter {
    grid-column: 1 / -1;
    justify-self: end;
  }

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

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

@supports (-webkit-touch-callout: none) {
  body,
  .app,
  .panel.lobby,
  .game {
    min-height: -webkit-fill-available;
  }

  .lobbyCore,
  .lobbyReference,
  .roomPanel {
    min-height: 0;
  }
}

/* Portrait overlay compression: keep the class art as the main visual signal. */
.lobbySpellReference .rangerLobbyArt {
  height: 100%;
  object-position: center 12%;
}

.lobbySpellReference .classStatPreview {
  bottom: 1.88rem;
  width: min(10.8rem, calc(100% - 2.2rem));
  min-height: 1.45rem;
  padding: 0.22rem 0.4rem;
  gap: 0.72rem;
  background:
    linear-gradient(90deg, rgba(10, 7, 4, 0.84), rgba(28, 18, 9, 0.86), rgba(10, 7, 4, 0.84));
}

.lobbySpellReference .classStatPreview span {
  gap: 0.18rem;
  white-space: nowrap;
}

.lobbySpellReference .classStatPreview b {
  font-size: 0.56rem;
}

.lobbySpellReference .classStatPreview i {
  width: 0.72rem;
  height: 0.72rem;
}

.lobbySpellReference .classFrameActions {
  bottom: 0.28rem;
  width: min(10.8rem, calc(100% - 2.2rem));
  gap: 0.3rem;
}

.lobbySpellReference .skinButton,
.lobbySpellReference .relicLoadoutButton {
  height: 1.42rem;
  padding: 0.18rem 0.34rem;
  gap: 0.2rem;
  font-size: 0.62rem;
  background:
    linear-gradient(180deg, rgba(52, 35, 18, 0.9), rgba(12, 9, 6, 0.92)),
    #1c1209;
}

.lobbySpellReference .skinButton span {
  width: 0.62rem;
  height: 0.62rem;
}

.lobbySpellReference .relicLoadoutButton img {
  width: 0.72rem;
  height: 0.72rem;
}

/* Final left-panel balance: tighter spell stack and a cleaner portrait footer. */
.lobbySpellReference .rangerLobbyFrame {
  background:
    linear-gradient(180deg, rgba(30, 22, 13, 0.22), rgba(5, 5, 4, 0.34)),
    #060705;
}

.lobbySpellReference .rangerLobbyArt {
  height: 100%;
  object-position: center 12%;
}

.lobbySpellReference .classStatPreview {
  bottom: 1.78rem;
  width: min(10rem, calc(100% - 2.6rem));
  min-height: 1.22rem;
  padding: 0.16rem 0.34rem;
  gap: 0.62rem;
  background:
    linear-gradient(90deg, rgba(10, 7, 4, 0.96), rgba(32, 21, 11, 0.98), rgba(10, 7, 4, 0.96));
}

.lobbySpellReference .classStatPreview b {
  font-size: 0.52rem;
}

.lobbySpellReference .classFrameActions {
  bottom: 0.32rem;
  width: min(10rem, calc(100% - 2.6rem));
  gap: 0.22rem;
}

.lobbySpellReference .skinButton,
.lobbySpellReference .relicLoadoutButton {
  height: 1.24rem;
  padding: 0.12rem 0.28rem;
  font-size: 0.58rem;
}

.lobbySpellReference .lobbySpellList {
  align-content: start;
  grid-template-rows: repeat(6, 62px);
  gap: 0.24rem;
  overflow-y: auto;
}

.lobbySpellReference .lobbySpellItem {
  min-height: 62px;
}

.lobbySpellReference .loadoutSpellSelect {
  min-height: 62px;
  padding: 0.22rem 0.42rem;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellIcon {
  width: 42px !important;
  height: 42px !important;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText {
  gap: 0.08rem;
  overflow: visible;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText strong {
  font-size: 0.72rem;
}

.lobbySpellReference .loadoutSpellSelect > .loadoutSpellText small {
  font-size: 0.54rem;
  line-height: 1.08;
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: unset;
}

/* === Camp lobby prototype === */
.campPrototypeButton {
  border-color: rgba(151, 116, 55, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(45, 34, 20, 0.94), rgba(18, 12, 8, 0.96)) !important;
  color: #f6d891 !important;
}

.campLobbyView {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  color: #f7e2b2;
  background: #071226;
}

.campLobbyView.hidden {
  display: none;
}

.campBackdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), transparent 15%, transparent 84%, rgba(0, 0, 0, 0.52)),
    linear-gradient(180deg, rgba(3, 7, 16, 0.18), transparent 24%, rgba(0, 0, 0, 0.28)),
    url("/assets/camp/medieval-raid-outpost-bg-v2.webp?v=3") center / cover no-repeat;
}

.campBackdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 155, 42, 0.12), transparent 20%),
    radial-gradient(circle at 50% 22%, rgba(132, 74, 202, 0.18), transparent 17%),
    linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.25));
}

.campBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 41%, rgba(255, 184, 72, 0.22) 0 0.55%, transparent 1.25%),
    radial-gradient(circle at 29% 38%, rgba(255, 184, 72, 0.2) 0 0.46%, transparent 1.1%),
    radial-gradient(circle at 58% 38%, rgba(255, 184, 72, 0.2) 0 0.48%, transparent 1.15%),
    radial-gradient(circle at 89% 52%, rgba(255, 184, 72, 0.18) 0 0.5%, transparent 1.18%);
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: campLanternFlicker 3.4s ease-in-out infinite;
}

@keyframes campLanternFlicker {
  0%, 100% { opacity: 0.32; filter: brightness(0.95); }
  28% { opacity: 0.48; filter: brightness(1.08); }
  48% { opacity: 0.36; filter: brightness(0.98); }
  71% { opacity: 0.54; filter: brightness(1.14); }
}

.campLocationBaseSprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0.98;
}

.campTopPanel {
  position: absolute;
  top: clamp(12px, 1.2vw, 20px);
  right: clamp(12px, 1.2vw, 20px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.18rem;
  width: max-content;
  max-width: min(650px, calc(100vw - 24px));
  padding: 0.18rem 0.24rem;
  border: 1px solid rgba(176, 126, 57, 0.52);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.42), inset 0 0 12px rgba(211, 154, 69, 0.06);
  background:
    linear-gradient(180deg, rgba(18, 15, 13, 0.84), rgba(8, 7, 6, 0.8));
}

.campCurrencies {
  display: flex;
  gap: 0.16rem;
}

.campCurrency,
.campPlayerMenuBtn,
.campXpPanel {
  border: 1px solid rgba(99, 73, 42, 0.9);
  background: rgba(5, 5, 5, 0.72);
  box-shadow: inset 0 0 12px rgba(255, 201, 112, 0.06);
}

.campCurrency {
  min-width: 3.55rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.12rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: help;
}

.campCurrency i {
  width: 0.82rem;
  height: 0.94rem;
  display: inline-block;
  clip-path: polygon(50% 0, 88% 28%, 70% 100%, 30% 100%, 12% 28%);
}

.campCurrencyFragments i {
  width: 1rem;
  height: 1rem;
  background: url("/assets/icons/relic-fragment.png") center / contain no-repeat;
  clip-path: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

.campCurrencyCrystals i {
  background: linear-gradient(135deg, #81f2ff, #2186ff 55%, #d8fbff);
}

.campDailyChallengeBanner {
  position: absolute;
  top: clamp(3.1rem, 4.2vw, 4.25rem);
  right: clamp(12px, 1.2vw, 20px);
  z-index: 5;
  width: min(20rem, calc(100vw - 24px));
  display: grid;
  gap: 0.08rem;
  padding: 0.34rem 0.55rem;
  border: 1px solid rgba(186, 133, 54, 0.64);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(24, 18, 12, 0.88), rgba(8, 7, 6, 0.82));
  color: #efd19a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(255, 184, 77, 0.06);
}

.campDailyChallengeBanner span {
  color: #d69f45;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.campDailyChallengeBanner strong {
  color: #ffe5ae;
  font-size: 0.74rem;
  line-height: 1.05;
}

.campDailyChallengeBanner small {
  color: #bfc6c4;
  font-size: 0.62rem;
}

.campDailyChallengeBanner:hover,
.campDailyChallengeBanner:focus-visible {
  border-color: rgba(255, 208, 113, 0.94);
  box-shadow: 0 0 16px rgba(237, 178, 73, 0.24), inset 0 0 12px rgba(255, 184, 77, 0.08);
}

.campDailyChallengeBannerComplete {
  border-color: rgba(79, 194, 94, 0.72);
}

.campPlayerPanel {
  position: relative;
}

.campPlayerMenuBtn {
  min-width: 6.7rem;
  height: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  padding: 0 0.38rem;
  color: #f6dfad;
  cursor: pointer;
}

.campPlayerMenuBtn:hover,
.campPlayerMenuBtn:focus-visible {
  border-color: #d8a84e;
  box-shadow: 0 0 12px rgba(229, 175, 82, 0.25);
}

.campPlayerDropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 9rem;
  z-index: 60;
  padding: 0.28rem;
  border: 1px solid rgba(185, 135, 60, 0.9);
  background: rgba(14, 9, 6, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.campPlayerDropdown button {
  width: 100%;
  min-height: 1.8rem;
  font-size: 0.68rem;
  text-align: left;
  color: #f2d498;
  border: 0;
  background: transparent;
}

.campPlayerDropdown button:hover,
.campPlayerDropdown button:focus-visible {
  background: rgba(204, 148, 60, 0.18);
}

.campXpPanel {
  display: grid;
  grid-template-columns: auto minmax(74px, 108px) auto;
  align-items: center;
  gap: 0.24rem;
  height: 1.45rem;
  padding: 0.12rem 0.3rem;
}

.campXpPanel span {
  color: #ffd27a;
  font-weight: 900;
  font-size: 0.68rem;
}

.campXpTrack {
  height: 0.24rem;
  overflow: hidden;
  border: 1px solid #2e1f12;
  background: #050608;
}

.campXpTrack i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #0d70c8, #6fd6ff);
}

.campXpPanel small {
  color: #d9c6a2;
  font-size: 0.52rem;
}

.campLoadoutPanel {
  position: absolute;
  left: clamp(10px, 1.2vw, 20px);
  top: clamp(88px, 13vh, 122px);
  bottom: auto;
  width: clamp(178px, 13vw, 224px);
  max-height: calc(100vh - 140px);
  z-index: 4;
  display: grid;
  grid-template-rows: auto;
  gap: 0.68rem;
  padding: 0.48rem;
  overflow: hidden;
  border: 2px ridge rgba(139, 96, 46, 0.96);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.58), inset 0 0 18px rgba(222, 164, 69, 0.06);
  background:
    linear-gradient(180deg, rgba(24, 17, 12, 0.96), rgba(7, 6, 5, 0.96));
}

.campLoadoutLogo {
  position: absolute;
  left: clamp(10px, 1.2vw, 20px);
  top: clamp(10px, 2vh, 22px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(178px, 13vw, 224px);
  height: clamp(58px, 8vh, 84px);
  pointer-events: none;
}

.campLoadoutLogo img {
  width: 88%;
  max-height: 2.6rem;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.65));
}

.campLoadoutPanel header {
  display: grid;
  justify-items: center;
  border-bottom: 1px solid rgba(138, 101, 56, 0.55);
  padding-bottom: 0.24rem;
}

.campLoadoutPanel header span,
.campLoadoutGroup small {
  color: #c79a54;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.56rem;
}

.campLoadoutPanel header strong {
  color: #f5ddb0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px #000;
}

.campLoadoutGroup {
  display: grid;
  gap: 0.38rem;
}

.campRelicsGroup {
  margin-top: 0.34rem;
}

.campDebuffsGroup {
  margin-top: 0.42rem;
}

.campSpellGrid,
.campRelicGrid,
.campStatusGrid {
  display: grid;
  gap: 0.28rem;
}

.campSpellGrid {
  grid-template-columns: 1fr;
}

.campRelicGrid {
  grid-template-columns: repeat(3, minmax(0, 2.54rem));
  gap: 0.34rem;
  justify-content: start;
}

.campStatusGrid {
  grid-template-columns: repeat(5, minmax(0, 1.35rem));
  align-items: center;
  gap: 0.16rem;
}

.campSpellButton,
.campRelicSlot {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.campSpellButton {
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  align-items: center;
  min-height: 2.75rem;
  gap: 0.38rem;
  padding: 0.28rem 2.05rem 0.24rem 0.28rem;
  border: 1px solid rgba(119, 84, 42, 0.88);
  background: radial-gradient(circle, rgba(49, 33, 18, 0.95), rgba(8, 7, 6, 0.96));
}

.campRelicSlot {
  display: grid;
  place-items: center;
  width: 2.44rem;
  height: 2.44rem;
  border: 0;
  background: var(--camp-relic-slot-bg, rgba(232, 230, 220, 0.08));
  padding: 0;
  overflow: visible;
  border-radius: 0.28rem;
  box-shadow:
    inset 0 0 0 1px var(--camp-relic-slot-edge, rgba(232, 230, 220, 0.14)),
    inset 0 0 13px var(--camp-relic-slot-bg, rgba(232, 230, 220, 0.08)),
    0 0 8px rgba(0, 0, 0, 0.42);
}

.campRelicSlot::before,
.campRelicSlot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.campRelicSlot::before {
  background: var(--camp-relic-border, rgba(232, 230, 220, 0.88));
  filter:
    drop-shadow(0 0 7px var(--camp-relic-glow, rgba(255, 255, 255, 0.22)))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
  z-index: 1;
}

.campRelicSlot::after {
  inset: 2px;
  background:
    radial-gradient(circle at 42% 32%, rgba(54, 36, 20, 0.92), rgba(9, 7, 6, 0.98) 74%),
    linear-gradient(145deg, rgba(77, 51, 27, 0.22), rgba(0, 0, 0, 0.42));
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, 0.08),
    inset 0 0 12px rgba(0, 0, 0, 0.72);
  z-index: 2;
}

.campSpellButton:hover,
.campSpellButton:focus-visible {
  border-color: #e3b65b;
  box-shadow: 0 0 12px rgba(235, 184, 81, 0.24);
}

.campRelicSlot:hover::before,
.campRelicSlot:focus-visible::before {
  filter: drop-shadow(0 0 10px var(--camp-relic-glow, rgba(255, 255, 255, 0.28))) brightness(1.18);
}

.campSpellButton img {
  width: 2.15rem;
  height: 2.15rem;
  object-fit: contain;
}

.campRelicSlot img {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
  margin: auto;
  filter: drop-shadow(0 0 7px rgba(255, 217, 134, 0.3));
  pointer-events: none;
  position: relative;
  z-index: 4;
}

.campRelicSlotEquipped {
  background: var(--camp-relic-slot-bg, rgba(232, 230, 220, 0.08));
}

.campRelicSlot span {
  display: none;
}

.campRelicSlot-offensive {
  --camp-relic-border: linear-gradient(135deg, #ffc0a8 0%, #e66b4e 22%, #65150f 48%, #c23a29 72%, #ffb49d 100%);
  --camp-relic-slot-bg: rgba(173, 39, 26, 0.18);
  --camp-relic-slot-edge: rgba(255, 138, 115, 0.26);
  --camp-relic-glow: rgba(222, 72, 49, 0.44);
}

.campRelicSlot-offensive::before,
.campRelicSlot-offensive::after {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.campRelicSlot-defensive {
  --camp-relic-slot-bg: rgba(60, 132, 194, 0.17);
  --camp-relic-slot-edge: rgba(168, 219, 255, 0.25);
  --camp-relic-glow: rgba(76, 154, 255, 0.4);
}

.campRelicSlot-defensive::before,
.campRelicSlot-defensive::after {
  clip-path: none;
}

.campRelicSlot-defensive::before {
  inset: 1px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='18' y1='8' x2='82' y2='106' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f5fcff'/%3E%3Cstop offset='0.24' stop-color='%238fd1ff'/%3E%3Cstop offset='0.5' stop-color='%2320528c'/%3E%3Cstop offset='0.76' stop-color='%2366ace8'/%3E%3Cstop offset='1' stop-color='%23eaf9ff'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-35%25' y='-25%25' width='170%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='2.2' flood-color='%234c9aff' flood-opacity='0.5'/%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='1.1' flood-color='%23000000' flood-opacity='0.5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M50 5 C65 8 79 12 91 19 C94 42 90 67 77 86 C67 101 56 111 50 114 C44 111 33 101 23 86 C10 67 6 42 9 19 C21 12 35 8 50 5 Z' fill='none' stroke='url(%23g)' stroke-width='5.4' stroke-linejoin='round' filter='url(%23s)'/%3E%3Cpath d='M50 14 C63 17 75 20 84 25 C86 44 82 63 72 79 C63 92 54 100 50 103 C46 100 37 92 28 79 C18 63 14 44 16 25 C25 20 37 17 50 14 Z' fill='none' stroke='%23bfe7ff' stroke-opacity='0.2' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: none;
}

.campRelicSlot-defensive::after {
  inset: 5px 4px 4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 14 C63 17 75 20 84 25 C86 44 82 63 72 79 C63 92 54 100 50 103 C46 100 37 92 28 79 C18 63 14 44 16 25 C25 20 37 17 50 14 Z' fill='%23090706'/%3E%3Cpath d='M50 14 C63 17 75 20 84 25 C86 44 82 63 72 79 C63 92 54 100 50 103 C46 100 37 92 28 79 C18 63 14 44 16 25 C25 20 37 17 50 14 Z' fill='%23362414' opacity='0.46'/%3E%3C/svg%3E")
    center / contain no-repeat;
  box-shadow: none;
}

.campRelicSlot-utility {
  --camp-relic-border: linear-gradient(135deg, #ffffff 0%, #d5d0c5 25%, #75736d 52%, #c7c1b2 76%, #fff8ea 100%);
  --camp-relic-slot-bg: rgba(240, 234, 220, 0.14);
  --camp-relic-slot-edge: rgba(255, 255, 255, 0.22);
  --camp-relic-glow: rgba(255, 255, 255, 0.28);
}

.campRelicSlot-utility::before,
.campRelicSlot-utility::after {
  border-radius: 50%;
}

.campSpellButtonText {
  position: static;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  clip: auto;
  line-height: 1;
}

.campSpellButtonText strong {
  position: static;
  width: auto;
  height: auto;
  overflow: hidden;
  clip: auto;
  color: #f5ddb0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campSpellSummary {
  min-width: 0;
  color: #cdbb99;
  font-size: 0.56rem;
  font-weight: 400;
  line-height: 1.16;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.campSpellButtonControls {
  position: absolute;
  top: 0.22rem;
  right: 0.28rem;
  display: flex;
  align-items: center;
  gap: 0.22rem;
  pointer-events: none;
}

.campSpellButtonControls kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.78rem;
  padding: 0.04rem 0.1rem;
  border: 1px solid rgba(222, 177, 90, 0.72);
  border-radius: 0.18rem;
  background: rgba(11, 8, 5, 0.84);
  color: #f2d991;
  font-size: 0.42rem;
  font-weight: 800;
  text-shadow: 0 1px 1px #000;
}

.campSpellSelectArrow {
  width: 0.38rem;
  height: 0.38rem;
  border-right: 2px solid #d9b15c;
  border-bottom: 2px solid #d9b15c;
  transform: rotate(45deg);
  transition: transform 120ms ease, border-color 120ms ease;
}

.campSpellButton[aria-expanded="true"] .campSpellSelectArrow {
  transform: translateY(0.15rem) rotate(225deg);
}

.campSpellButton:hover .campSpellSelectArrow,
.campSpellButton:focus-visible .campSpellSelectArrow {
  border-color: #ffe09a;
}

.campStatusGrid .debuffPreviewIcon {
  width: 1.32rem;
  height: 1.32rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 139, 71, 0.92);
  border-radius: 50%;
  padding: 0.12rem;
  background: radial-gradient(circle, rgba(58, 36, 18, 0.72), rgba(14, 9, 5, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 218, 145, 0.12), 0 0 7px rgba(190, 132, 58, 0.22);
  cursor: help;
  transform: none;
  transform-origin: center;
}

.campStatusGrid .debuffPreviewIcon span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.campStatusGrid .debuffPreviewImage {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.campStatusGrid .debuffPreviewStorm .debuffPreviewImage {
  object-fit: cover;
}

.campStatusGrid em {
  transform: scale(0.7);
  transform-origin: center;
  grid-column: 1 / -1;
  color: #9e8b70;
  font-size: 0.62rem;
}

.campLocationLayer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.campLocation {
  position: absolute;
  z-index: var(--camp-z, 3);
  left: var(--camp-x);
  top: var(--camp-y);
  width: var(--camp-w);
  height: var(--camp-h);
  transform: translate(-50%, -50%);
  display: block;
  padding: 0;
  color: #f8dfad;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  transition: filter 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
  user-select: none;
  touch-action: none;
  overflow: visible;
}

.campLocation::before {
  content: none;
}

.campLocation::after {
  content: none;
}

.campLocation:hover,
.campLocation:focus-visible {
  outline: 0;
  filter: none;
  box-shadow: none;
}

.campLocation:active {
  filter: none;
}

.campLocationArt {
  position: absolute;
  top: 16%;
  left: 50%;
  width: 56%;
  height: 46%;
  transform: translateX(-50%);
}

.campLocationHasSprite {
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.campLocationHasSprite::before {
  display: none;
}

.campLocationHasSprite::after {
  content: none;
}

.campLocationHasSprite .campLocationArt,
.campLocationHasSprite.campLocation-portal .campLocationArt,
.campLocationHasSprite.campLocation-campfire .campLocationArt,
.campLocationHasSprite.campLocation-shrine .campLocationArt,
.campLocationHasSprite.campLocation-scoreboard .campLocationArt,
.campLocationHasSprite.campLocation-challenges .campLocationArt,
.campLocationHasSprite.campLocation-shop .campLocationArt,
.campLocationHasSprite.campLocation-inventory .campLocationArt,
.campLocationHasSprite.campLocation-library .campLocationArt,
.campLocationHasSprite.campLocation-arena .campLocationArt,
.campLocationHasSprite.campLocation-sign .campLocationArt,
.campLocationHasSprite.campLocation-hall .campLocationArt {
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  animation: none;
}

.campLocationHasSprite .campLocationArt img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.62));
  transition: transform 140ms ease, filter 140ms ease;
}

.campLocationHasSprite.campLocation-portal .campLocationArt img {
  filter: drop-shadow(0 0 26px rgba(153, 83, 255, 0.68)) drop-shadow(0 20px 22px rgba(0, 0, 0, 0.68));
}

.campLocationArtAnimated {
  position: absolute;
  --camp-frame-cycle: 0.9s;
}

.campLocationHasSprite .campLocationArtAnimated .campLocationFrame {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: translateX(-50%);
  opacity: 0;
  animation: campPortalFrameCycle var(--camp-frame-cycle) steps(1, end) infinite;
}

.campLocationHasSprite .campLocationArtAnimated .campLocationFrame1 { animation-delay: 0s; }
.campLocationHasSprite .campLocationArtAnimated .campLocationFrame2 { animation-delay: calc(var(--camp-frame-cycle) * -0.833333); }
.campLocationHasSprite .campLocationArtAnimated .campLocationFrame3 { animation-delay: calc(var(--camp-frame-cycle) * -0.666667); }
.campLocationHasSprite .campLocationArtAnimated .campLocationFrame4 { animation-delay: calc(var(--camp-frame-cycle) * -0.5); }
.campLocationHasSprite .campLocationArtAnimated .campLocationFrame5 { animation-delay: calc(var(--camp-frame-cycle) * -0.333333); }
.campLocationHasSprite .campLocationArtAnimated .campLocationFrame6 { animation-delay: calc(var(--camp-frame-cycle) * -0.166667); }

.campLocation-portal .campLocationArtAnimated {
  --camp-frame-cycle: 0.95s;
}

.campLocation-campfire .campLocationArtAnimated {
  --camp-frame-cycle: 1.15s;
}

.statueModal {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.statueModal.hidden {
  display: none;
}

.statueModalWindow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.2rem 2rem;
  color: #d7c39d;
  background:
    linear-gradient(135deg, rgba(255, 215, 145, 0.035), transparent 34%),
    #14140f;
  border: 2px solid #665034;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #070806, inset 0 0 28px rgba(0, 0, 0, 0.6), 0 16px 50px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.statueModalWindow::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(166, 124, 66, 0.3);
  pointer-events: none;
}

.statueModalClose {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  color: #d5c29c;
  background: linear-gradient(#352e22, #1d1b16);
  border: 1px solid #69583e;
  border-radius: 3px;
  cursor: pointer;
}

.statueModalSubtitle {
  margin: 0;
  color: #a98d60;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-style: italic;
}

.statueModalName {
  display: block;
  color: #f0d695;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.statueModalTimer {
  display: block;
  color: #8ed9ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.statueChampionOverlay {
  position: absolute;
  z-index: 5;
  bottom: 16%;
  left: 22%;
  right: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2%;
  pointer-events: none;
}

.statueChampionName {
  display: block;
  box-sizing: border-box;
  width: min(68%, 7.2rem);
  max-width: 100%;
  padding: 1.3% 2.4%;
  color: #ddc38d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.34rem, 0.52vw, 0.46rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statueChampionTimer {
  display: block;
  box-sizing: border-box;
  width: min(70%, 7.4rem);
  max-width: 100%;
  padding: 0.9% 2.4%;
  color: #b8a580;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.34rem, 0.54vw, 0.48rem);
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campLocation:hover .statueChampionName,
.campLocation:focus-visible .statueChampionName,
.campLocationLinkedHover .statueChampionName,
.campLocation:hover .statueChampionTimer,
.campLocation:focus-visible .statueChampionTimer,
.campLocationLinkedHover .statueChampionTimer {
  color: #ffe3a6;
  text-shadow:
    0 0 8px rgba(232, 177, 72, 0.62),
    0 1px 2px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 0 8px rgba(232, 177, 72, 0.34));
}

@keyframes campPortalFrameCycle {
  0%, 16.66% { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}

.campLocation-portal .campLocationArt {
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: campPortalPulse 2.6s ease-in-out infinite alternate;
}

@keyframes campPortalPulse {
  from { filter: saturate(1) brightness(1); transform: translateX(-50%) scale(0.96); }
  to { filter: saturate(1.25) brightness(1.15); transform: translateX(-50%) scale(1.04); }
}

@keyframes campMasterySpark {
  0%, 82%, 100% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  86% { opacity: 1; transform: translate(0.2rem, -0.18rem) scale(1); }
  92% { opacity: 0.65; transform: translate(-0.16rem, -0.52rem) scale(0.7); }
}

.campLocation:hover .campLocationArt,
.campLocation:focus-visible .campLocationArt,
.campLocationLinkedHover .campLocationArt {
  filter: brightness(1.12) drop-shadow(0 0 14px rgba(232, 177, 72, 0.48));
}

.campLocation:hover .campLocationArt:not(.campLocationArtAnimated) img,
.campLocation:focus-visible .campLocationArt:not(.campLocationArtAnimated) img,
.campLocationLinkedHover .campLocationArt:not(.campLocationArtAnimated) img {
  transform: scale(1.04);
}

.campLocation:active .campLocationArt:not(.campLocationArtAnimated) img {
  transform: scale(1.015);
}

.campLocationSign {
  position: absolute;
  left: 50%;
  bottom: 0.08rem;
  z-index: 3;
  display: none;
  justify-items: center;
  min-width: max-content;
  max-width: calc(100% + 0.45rem);
  padding: 0.08rem 0.38rem 0.1rem;
  transform: translateX(-50%);
  border: 1px solid rgba(102, 62, 27, 0.96);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(16, 8, 4, 0.92), rgba(54, 31, 15, 0.96) 20% 80%, rgba(16, 8, 4, 0.93)),
    repeating-linear-gradient(90deg, rgba(255, 222, 143, 0.05) 0 1px, transparent 1px 20px);
  box-shadow: 0 2px 0 #130904, inset 0 0 8px rgba(255, 208, 111, 0.1), 0 7px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.campLocationSignTop {
  top: 0.08rem;
  bottom: auto;
}

.campLocation:hover .campLocationSign,
.campLocation:focus-visible .campLocationSign {
  border-color: #e5b85d;
  filter: brightness(1.12);
  box-shadow: 0 2px 0 #130904, inset 0 0 10px rgba(255, 215, 123, 0.16), 0 0 16px rgba(228, 169, 64, 0.4);
}

.campLocationSign strong {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.68rem, 0.76vw, 0.9rem);
  line-height: 1;
  text-shadow: 0 2px 3px #000;
}

.campLocationSign small {
  color: #c9b58b;
  font-size: clamp(0.4rem, 0.45vw, 0.52rem);
  line-height: 1.05;
  margin-top: 0.05rem;
  text-shadow: 0 1px 2px #000;
}

.campLobbyView:not(.campEditMode):not(.campDebugMode) .campLocation-mastery::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 26%;
  z-index: 4;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  border: 0;
  background: #ffdc76;
  box-shadow: 0 0 9px rgba(255, 215, 85, 0.82), 0 0 18px rgba(255, 121, 28, 0.35);
  animation: campMasterySpark 5.4s ease-in-out infinite;
  pointer-events: none;
}

.campLobbyView:not(.campEditMode):not(.campDebugMode) .campLocation-shrine:not(.campLocation-mastery)::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 30%;
  z-index: 4;
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  border: 0;
  background: #9be7ff;
  box-shadow: 0 0 8px rgba(125, 222, 255, 0.88), 0 0 18px rgba(42, 134, 255, 0.4);
  animation: campClassSpark 6.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes campClassSpark {
  0%, 84%, 100% { opacity: 0; transform: translate(0, 0) scale(0.35); }
  88% { opacity: 0.92; transform: translate(-0.1rem, -0.16rem) scale(1); }
  94% { opacity: 0.5; transform: translate(0.14rem, -0.48rem) scale(0.68); }
}

.campLocationHeroStage .campLocationArt {
  height: 100%;
}

.campHeroStageCharacter {
  position: absolute;
  left: 50%;
  bottom: 15%;
  z-index: 2;
  width: 32.8%;
  height: 41.3%;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}

.campHeroStageCharacter img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 8px rgba(91, 255, 118, 0.18));
}
.campHeroStageCharacter[data-hero-class="wizard"] {
  width: 52%;
  height: 65%;
  bottom: 2%;
}

.campHeroStageCharacter[data-hero-class="wizard"][data-hero-skin="hollow_warden_ascended"] {
  width: 33%;
  height: 42%;
  bottom: 13%;
}

.campHeroStageStats {
  position: absolute;
  left: 50%;
  bottom: 57%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: max-content;
  padding: 0.18rem 0.48rem;
  transform: translateX(-50%) translateY(0.2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f8dfad;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.48rem, 0.58vw, 0.68rem);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
  transition: opacity 140ms ease, transform 140ms ease, filter 140ms ease;
}

.campHeroStageStats span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  white-space: nowrap;
}

.campHeroStageStats i {
  width: 0.7rem;
  height: 0.7rem;
}

.campLocationHeroStage:hover .campHeroStageStats,
.campLocationHeroStage:focus-visible .campHeroStageStats {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  filter: drop-shadow(0 0 7px rgba(255, 207, 116, 0.28));
}

.campLocationHeroStage:hover .campHeroStageCharacter img,
.campLocationHeroStage:focus-visible .campHeroStageCharacter img {
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 14px rgba(132, 255, 131, 0.35));
}

.campLobbyView:has(.campLocationHeroStage:hover) .campLoadoutPanel,
.campLobbyView:has(.campLocationHeroStage:focus-visible) .campLoadoutPanel {
  border-color: rgba(222, 179, 83, 0.98);
  box-shadow: 0 0 24px rgba(118, 255, 111, 0.2), 0 0 22px rgba(230, 174, 69, 0.26), inset 0 0 20px rgba(222, 164, 69, 0.08);
}

.campDebugMode .campLocation {
  background: rgba(64, 147, 255, 0.14);
  border-color: rgba(108, 187, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.campDebugMode .campLocation::before {
  content: attr(data-camp-location);
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  z-index: 8;
  padding: 0.08rem 0.18rem;
  border: 1px dashed rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.62);
  color: #d8ecff;
  font-size: 0.52rem;
}

.campEditMode .campLocation {
  z-index: 2;
  cursor: move;
  border-color: rgba(90, 189, 255, 0.92);
  background: rgba(29, 70, 106, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 16px rgba(73, 166, 255, 0.25);
}

.campEditMode .campLocation:hover,
.campEditMode .campLocation:focus-visible,
.campEditMode .campLocationEditing {
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 2px rgba(90, 189, 255, 0.72),
    0 0 22px rgba(73, 166, 255, 0.38);
}

.campEditMode .campLocation::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  outline: 1px dashed rgba(255, 216, 131, 0.68);
  pointer-events: none;
}

.campLocationResizeHandle {
  position: absolute;
  right: -0.28rem;
  bottom: -0.28rem;
  width: 0.78rem;
  height: 0.78rem;
  z-index: 4;
  display: none;
  border: 1px solid rgba(255, 229, 160, 0.95);
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 229, 160, 0.95) 43% 57%, transparent 58%),
    radial-gradient(circle, rgba(55, 139, 218, 0.96), rgba(13, 33, 55, 0.98));
  box-shadow: 0 0 10px rgba(93, 183, 255, 0.62);
  cursor: nwse-resize;
}

.campEditMode .campLocationResizeHandle {
  display: block;
}

.campActionButtons button {
  min-height: 1.8rem;
  padding: 0.3rem 0.58rem;
  color: #f7ddab;
  font-size: 0.68rem;
  border: 1px solid rgba(184, 129, 56, 0.88);
  background: linear-gradient(180deg, rgba(67, 43, 21, 0.94), rgba(18, 11, 6, 0.96));
  cursor: pointer;
}

.campActionButtons button:hover,
.campActionButtons button:focus-visible {
  border-color: #f0c36a;
  box-shadow: 0 0 12px rgba(232, 180, 80, 0.24);
}

.campActionDialog {
  width: min(1180px, calc(100vw - 34px));
  max-width: none;
  max-height: min(820px, calc(100vh - 34px));
  overflow: hidden;
  padding: 0.7rem 0.8rem 0.8rem;
  border-color: rgba(158, 100, 43, 0.92);
  background:
    linear-gradient(180deg, rgba(33, 23, 15, 0.98), rgba(9, 7, 5, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 214, 137, 0.035) 0 1px, transparent 1px 22px);
}

.campActionDialog:has(.campRoomEntryModal) {
  width: min(540px, calc(100vw - 34px));
}

.campActionDialog h2 {
  margin: 0 0 0.4rem;
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  letter-spacing: 0.04em;
}

.campActionDialog > p {
  display: none;
}

.campActionBody {
  display: grid;
  gap: 0;
}

.campRoomModal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(220px, 0.92fr) minmax(330px, 1.35fr);
  grid-template-rows: auto 1fr auto;
  gap: 0.7rem;
  min-height: 0;
}

.campRoomEntryModal {
  display: grid;
  gap: 0.5rem;
  max-width: 460px;
  width: min(460px, calc(100vw - 48px));
  margin: 0 auto;
}

.campRoomEntryPanel,
.campRoomEntrySection {
  display: grid;
  gap: 0.4rem;
  min-height: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(102, 68, 36, 0.88);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(16, 11, 8, 0.92), rgba(8, 6, 5, 0.96)),
    repeating-linear-gradient(0deg, rgba(255, 208, 120, 0.025) 0 1px, transparent 1px 24px);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.campEntrySectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #d6a65d;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.campRoomCreateHero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  border: 1px solid rgba(92, 153, 57, 0.92);
  border-radius: 3px;
  color: #f7e0a7;
  background: linear-gradient(180deg, rgba(42, 88, 24, 0.94), rgba(12, 34, 8, 0.97));
  box-shadow: inset 0 0 14px rgba(137, 255, 97, 0.08);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
}

.campRoomCreateHero:hover,
.campRoomCreateHero:focus-visible {
  border-color: #b4f07c;
  box-shadow: inset 0 0 14px rgba(137, 255, 97, 0.14), 0 0 12px rgba(100, 209, 67, 0.22);
}

.campRoomCreateHero strong {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.campRoomEntryFooter {
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr);
  justify-content: center;
}

.campPublicRoomsPanel header,
.campPublicRoomsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.campPublicRoomsPanel header button {
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(131, 87, 42, 0.92);
  border-radius: 3px;
  color: #f5ddb0;
  background: rgba(18, 12, 8, 0.86);
  cursor: pointer;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campPublicRoomsList {
  display: grid;
  gap: 0.28rem;
  max-height: 8.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.12rem;
}

.campPublicRoomsList p,
.campPublicRoomsEmpty {
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(88, 58, 33, 0.55);
  border-radius: 2px;
  color: rgba(239, 207, 141, 0.5);
  font-size: 0.7rem;
  font-style: italic;
  text-align: center;
}

.campPublicRoomEntry {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid rgba(94, 62, 34, 0.9);
  border-radius: 2px;
  color: #e9c891;
  background: linear-gradient(180deg, rgba(18, 12, 8, 0.92), rgba(6, 5, 4, 0.94));
  cursor: pointer;
  font-size: 0.72rem;
  text-align: left;
}

.campPublicRoomEntry:hover,
.campPublicRoomEntry:focus-visible {
  border-color: #e8b65a;
  box-shadow: 0 0 14px rgba(232, 179, 84, 0.2);
}

.campPublicRoomEntry strong {
  color: #ffe2a3;
  font-family: Georgia, "Times New Roman", serif;
}

.campPublicRoomEntry span,
.campPublicRoomEntry small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campPublicRoomEntry small {
  color: #9fd5ff;
  font-size: 0.68rem;
}

.campArenaRoomModal {
  grid-template-columns: minmax(270px, 0.8fr) minmax(460px, 1.2fr);
}

.campRoomModalTop {
  position: absolute;
  right: 3.1rem;
  top: -3.05rem;
  z-index: 2;
}

.campRoomPublicToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.18rem 0.28rem 0.18rem 0.65rem;
  border: 1px solid rgba(151, 104, 52, 0.85);
  border-radius: 0.35rem;
  color: #e6c37d;
  background: rgba(10, 7, 5, 0.88);
  cursor: pointer;
}

.campRoomPublicToggle:disabled {
  cursor: default;
  opacity: 0.65;
}

.campRoomPublicToggle i {
  width: 2.5rem;
  height: 1.2rem;
  border: 1px solid rgba(207, 158, 89, 0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, #24170e, #61351e);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}

.campRoomPublicToggle i::after {
  content: "";
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0.1rem;
  border-radius: 50%;
  background: #85544c;
  transition: transform 140ms ease, background 140ms ease;
}

.campRoomPublicToggle.selected i::after {
  transform: translateX(1.25rem);
  background: radial-gradient(circle, #e6b3ff, #823bd4);
}

.campRoomCreatePanel,
.campRoomBossList,
.campRoomPreview,
.campArenaModePanel,
.campArenaPreview {
  min-height: 0;
  border: 1px solid rgba(102, 68, 36, 0.88);
  background:
    linear-gradient(180deg, rgba(16, 11, 8, 0.9), rgba(8, 6, 5, 0.94)),
    repeating-linear-gradient(0deg, rgba(255, 208, 120, 0.025) 0 1px, transparent 1px 24px);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.42);
}

.campRoomCreatePanel,
.campArenaModePanel {
  display: grid;
  align-content: start;
  gap: 0.78rem;
  padding: 0.85rem;
}

.campRoomField {
  display: grid;
  gap: 0.32rem;
  color: #c99445;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.campRoomField input,
.campRoomRegionCard,
.campRoomJoinRow button,
.campRoomDifficulty,
.campArenaModeOption,
.campRoomPrimaryButton,
.campRoomLeaveButton {
  min-height: 2rem;
  border: 1px solid rgba(131, 87, 42, 0.92);
  border-radius: 3px;
  color: #f5ddb0;
  background: linear-gradient(180deg, rgba(37, 24, 14, 0.92), rgba(9, 7, 5, 0.95));
  box-sizing: border-box;
  font-size: 0.72rem;
}

.campRoomField input {
  min-width: 0;
  padding: 0 0.55rem;
  letter-spacing: 0.06em;
}

.campRoomRegionCard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.65rem;
  opacity: 1;
}

.campRoomRegionImageCard {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  padding: 0.45rem;
  isolation: isolate;
}

.campRoomRegionImageCard img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  filter: saturate(1.1) contrast(1.05) brightness(0.88);
}

.campRoomRegionImageCard::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.8rem;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}

.campRoomRegionImageCard strong {
  color: #ffe0a1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.88);
}

.campRegionArrow {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 224, 161, 0.6);
}

.campRoomDifficultyList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.campRoomDifficulty {
  min-height: 1.65rem;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campRoomDifficulty.selected {
  color: #fff5cf;
  box-shadow: 0 0 14px rgba(255, 208, 98, 0.22), inset 0 0 13px rgba(255, 232, 136, 0.09);
}

.campRoomDifficulty-normal.selected {
  border-color: #6fda4f;
  background: linear-gradient(180deg, rgba(36, 92, 23, 0.92), rgba(10, 35, 9, 0.94));
}

.campRoomDifficulty-hard.selected {
  border-color: #d15a4c;
  background: linear-gradient(180deg, rgba(91, 31, 23, 0.92), rgba(38, 9, 7, 0.94));
}

.campRoomDifficulty-ascended.selected {
  border-color: #a56cff;
  background: linear-gradient(180deg, rgba(64, 34, 101, 0.94), rgba(22, 9, 42, 0.96));
}

.campRoomDifficulty.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.campRoomBossOption.locked {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.42);
}

.campRoomBossOption.locked:hover,
.campRoomBossOption.locked:focus-visible {
  border-color: rgba(238, 178, 83, 0.72);
  box-shadow: inset 0 0 0 1px rgba(238, 178, 83, 0.18), 0 0 10px rgba(238, 178, 83, 0.16);
}

.campRoomJoinRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
}

.campRoomJoinRow button {
  min-width: 3.6rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campRoomBossList {
  display: grid;
  gap: 0.48rem;
  padding: 0.75rem;
  align-content: start;
}

.campRoomBossOption {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.62rem;
  min-height: 4.1rem;
  padding: 0.36rem 0.55rem;
  border: 1px solid rgba(94, 62, 34, 0.9);
  color: #e9c891;
  background: linear-gradient(180deg, rgba(18, 12, 8, 0.92), rgba(6, 5, 4, 0.94));
  cursor: pointer;
  text-align: left;
}

.campRoomBossOption img {
  width: 3.05rem;
  height: 3.05rem;
  object-fit: contain;
}

.campRoomBossOption span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  white-space: nowrap;
}

.campActiveBossSelect .campRoomBossOption span {
  font-size: 0.76rem;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
}

.campRoomBossOption:hover,
.campRoomBossOption:focus-visible,
.campArenaModeOption:hover,
.campArenaModeOption:focus-visible,
.campRoomJoinRow button:hover,
.campRoomPrimaryButton:hover,
.campRoomLeaveButton:hover {
  border-color: #e8b65a;
  box-shadow: 0 0 14px rgba(232, 179, 84, 0.2);
}

.campRoomBossOption.selected {
  border-color: #ffc65c;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 128, 0.32), 0 0 16px rgba(255, 190, 75, 0.25);
  background: linear-gradient(180deg, rgba(58, 35, 14, 0.94), rgba(13, 8, 5, 0.96));
}

.campRoomPreview,
.campArenaPreview {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 0.75rem;
}

.campActiveDetailPanel > h3 {
  margin: 0;
  color: #d7a75d;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.campRoomBossPreview,
.campArenaHeroCard {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 6.7rem;
  padding: 0.55rem;
  border: 1px solid rgba(107, 71, 38, 0.88);
  background: rgba(5, 5, 4, 0.62);
}

.campActiveDetailPanel .campRoomBossPreview {
  grid-template-columns: 3.8rem minmax(0, 1fr);
  min-height: 4rem;
  padding: 0.35rem;
}

.campActiveDetailPanel .campRoomBossPreview img {
  width: 3.5rem;
  height: 3.3rem;
}

.campActiveDetailPanel .campRoomBossPreview strong {
  font-size: 0.88rem;
}

.campRoomBossPreview img,
.campArenaHeroCard img {
  width: 6.6rem;
  height: 6rem;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.65));
}

.campRoomBossPreview strong,
.campArenaHeroCard strong,
.campArenaModeOption strong {
  color: #ffd985;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.campRoomBossPreview p,
.campArenaHeroCard p,
.campArenaModeOption span,
.campArenaFeatureGrid p,
.campRoomChestPreview small {
  color: #d5c0a0;
  font-size: 0.7rem;
  line-height: 1.25;
}

.campRoomDebuffRow {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0.15rem;
}

.campRoomDebuffRow .debuffPreviewIcon {
  width: 1.4rem;
  height: 1.4rem;
}

.campRoomDifficultyFrame-hard {
  border-color: rgba(194, 75, 58, 0.86);
}

.campRoomDifficultyFrame-ascended {
  border-color: rgba(151, 100, 255, 0.86);
}

.campRoomInfoGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.68fr);
  gap: 0.65rem;
}

.campRoomAbilityPanel,
.campRoomRewardPanel {
  min-height: 0;
  padding: 0.4rem;
  border: 1px solid rgba(90, 59, 33, 0.88);
  border-radius: 2px;
  background: rgba(7, 6, 5, 0.58);
}

.campRoomAbilityPanel h3,
.campRoomRewardPanel h3,
.campArenaModePanel h3 {
  margin: 0 0 0.32rem;
  color: #d7a75d;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.campRoomAbilityPanel > div {
  display: grid;
  gap: 0.32rem;
  max-height: 20.2rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.12rem;
}

.campRoomAbility {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0.18rem 0.3rem;
  border: 1px solid rgba(92, 60, 33, 0.82);
  border-radius: 2px;
  color: #f0d7a4;
  background: rgba(12, 9, 6, 0.78);
  cursor: pointer;
  text-align: left;
}

.campRoomAbility img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
}

.campRoomAbility span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.campRoomAbility b,
.campRoomAbility small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campRoomAbility b {
  color: #f3d494;
  font-size: 0.66rem;
}

.campRoomAbility small {
  color: #cbb594;
  font-size: 0.58rem;
}

.campRoomChestPreview {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  color: #efcf8d;
}

.campRoomChestPreview img {
  width: 3.8rem;
  height: 3.2rem;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.62));
}

.campRoomChestPreview strong {
  font-size: 0.66rem;
}

.campRoomChestPreview span {
  color: #7fd3ff;
  font-size: 0.64rem;
  font-weight: 900;
}

.campRoomModalFooter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(180px, 0.72fr) minmax(150px, 0.55fr);
  gap: 0.42rem;
  margin-top: 0.05rem;
}

.campRoomPrimaryButton,
.campRoomLeaveButton {
  min-height: 2rem;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.campRoomPrimaryButton {
  border-color: rgba(81, 151, 51, 0.9);
  background: linear-gradient(180deg, rgba(38, 93, 23, 0.96), rgba(10, 35, 8, 0.98));
}

.campRoomLeaveButton {
  border-color: rgba(145, 75, 43, 0.9);
  background: linear-gradient(180deg, rgba(74, 34, 18, 0.95), rgba(22, 9, 5, 0.98));
}

.campArenaModeList,
.campArenaFeatureGrid {
  display: grid;
  gap: 0.5rem;
}

.campArenaModeOption {
  display: grid;
  gap: 0.16rem;
  min-height: 4.4rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  text-align: left;
}

.campArenaModeOption.selected {
  border-color: #7fc5ff;
  box-shadow: inset 0 0 0 1px rgba(145, 211, 255, 0.24), 0 0 15px rgba(89, 174, 255, 0.22);
  background: linear-gradient(180deg, rgba(20, 43, 66, 0.95), rgba(6, 10, 16, 0.96));
}

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

.campArenaFeatureGrid article {
  min-height: 5rem;
  padding: 0.58rem;
  border: 1px solid rgba(95, 64, 36, 0.82);
  background: rgba(8, 6, 5, 0.66);
}

.campArenaFeatureGrid strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #f1ce88;
  font-family: Georgia, "Times New Roman", serif;
}

.campActiveRoomModal {
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.42rem;
}

.campActiveRoomHeader {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(144, 95, 45, 0.78);
  background: linear-gradient(180deg, rgba(34, 20, 12, 0.94), rgba(12, 8, 6, 0.96));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.campRoomPartyPanel header,
.campArenaTeamCard header {
  color: #c69143;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.campActiveRoomHeader strong {
  color: #ffe3a1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.campActiveHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.campActiveHeaderActions .campRoomPublicToggle {
  min-height: 1.7rem;
  font-size: 0.68rem;
}

.campActiveRoomMain,
.campArenaActiveMain,
.campRoomPartyPanel,
.campRoomWaitingPanel {
  padding: 0.56rem;
  border: 1px solid rgba(95, 64, 36, 0.82);
  background: rgba(9, 7, 5, 0.78);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.46);
}

.campActiveRoomMain,
.campArenaActiveMain {
  display: grid;
  gap: 0.72rem;
}

.campActiveRoomModal .campArenaActiveMain {
  grid-column: 1 / -1;
}

.campPveSetupPanel {
  display: block;
  min-height: 0;
  padding: 0.4rem;
  border: 1px solid rgba(95, 64, 36, 0.82);
  background: rgba(9, 7, 5, 0.78);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4);
}

.campPveSetupGrid {
  display: grid;
  grid-template-columns: minmax(140px, 0.58fr) minmax(200px, 1.42fr);
  grid-template-areas:
    "region boss"
    "difficulty difficulty"
    "color color"
    "party party";
  gap: 0.38rem;
  min-height: 0;
}

.campPveSetupGrid > .campRoomField {
  min-height: 0;
  padding: 0.38rem;
  border: 1px solid rgba(86, 56, 31, 0.78);
  background: rgba(7, 6, 5, 0.5);
}

.campRoomRegionField {
  grid-area: region;
  display: flex;
  flex-direction: column;
}

.campRoomBossField {
  grid-area: boss;
  display: flex;
  flex-direction: column;
}

.campRoomDifficultyField {
  grid-area: difficulty;
}

.campRoomColorField {
  grid-area: color;
}

.campColorRow {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.campColorCircle {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 224, 151, 0.35);
  background: var(--cc);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.campColorCircle:hover:not(:disabled) {
  border-color: rgba(255, 224, 151, 0.7);
}

.campColorCircle.selected {
  border-color: #ffe097;
  box-shadow: 0 0 0 2px rgba(255, 224, 151, 0.5), 0 0 10px rgba(255, 200, 80, 0.4);
}

.campColorCircle.taken {
  opacity: 0.3;
  cursor: not-allowed;
}

.campPveSetupGrid .campRoomPartyPanel {
  grid-area: party;
}

.campActiveDetailPanel {
  min-height: 0;
  gap: 0.4rem;
  padding: 0.55rem;
}

.campActiveBossSelect {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  flex: 1;
}

.campActiveBossSelect .campRoomBossOption {
  grid-template-columns: 2.2rem minmax(0, 1fr);
  min-height: 2.4rem;
  padding: 0.22rem 0.4rem;
  border-radius: 2px;
}

.campActiveBossSelect .campRoomBossOption img {
  width: 2rem;
  height: 2rem;
}

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

.campActiveDetailPanel .campRoomInfoGrid {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.5fr);
  gap: 0.38rem;
}

.campActiveDetailPanel .campRoomAbilityPanel > div {
  max-height: 13rem;
}

.campRoomPartyPanel {
  display: grid;
  gap: 0.3rem;
}

.campRoomMemberGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}

.campRoomMemberCard,
.campRoomEmptySlot {
  min-height: 0;
  padding: 0.3rem 0.38rem;
  border: 1px solid rgba(115, 78, 42, 0.8);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(31, 22, 14, 0.92), rgba(9, 7, 5, 0.95));
}

.campRoomMemberCard {
  position: relative;
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.08rem 0.35rem;
  border-left: 2px solid var(--player-color, rgba(115, 78, 42, 0.8));
}

.campRoomMemberCard.self {
  border-color: rgba(115, 78, 42, 0.8);
  border-left-color: var(--player-color, rgba(117, 198, 85, 0.8));
  box-shadow: inset 0 0 0 1px rgba(117, 198, 85, 0.15);
}

.campMemberSwatch {
  grid-row: 1 / 3;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 224, 151, 0.7);
}

.campRoomMemberCard strong {
  min-width: 0;
  overflow: hidden;
  color: #ffe2a3;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campRoomMemberCard small {
  grid-column: 2;
  color: #c9ad77;
  font-size: 0.62rem;
}

.campRoomMemberCard em {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  color: #6fc3ff;
  font-style: normal;
  font-size: 0.48rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}

.campRoomMemberCard em.ready {
  color: #80e36d;
}

.campRoomEmptySlot {
  display: grid;
  place-items: center;
  min-height: 2.2rem;
  color: rgba(239, 207, 141, 0.35);
  font-size: 1rem;
}

.campEmptySlotIcon {
  font-weight: 300;
  line-height: 1;
}

.campArenaTeamGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.campArenaTeamCard {
  display: grid;
  gap: 0.46rem;
  padding: 0.62rem;
  border: 1px solid rgba(95, 64, 36, 0.82);
  background: rgba(6, 5, 4, 0.58);
}

.campArenaTeam1 {
  box-shadow: inset 0 0 18px rgba(74, 136, 255, 0.12);
}

.campArenaTeam2 {
  box-shadow: inset 0 0 18px rgba(255, 72, 51, 0.12);
}

.campArenaTeamActions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.campArenaTeamActions button,
.campRoomStartButton {
  min-height: 2rem;
  border: 1px solid rgba(158, 109, 51, 0.82);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(45, 31, 18, 0.96), rgba(13, 9, 7, 0.98));
  color: #f6d48b;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 900;
}

.campArenaTeamActions button:hover,
.campArenaTeamActions button:focus-visible,
.campRoomStartButton:hover:not(:disabled),
.campRoomStartButton:focus-visible:not(:disabled) {
  border-color: #efc56d;
  box-shadow: 0 0 14px rgba(226, 173, 76, 0.2);
}

.campRoomStartButton {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.campRoomStartButton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.5);
}

.campActiveRoomFooter {
  grid-template-columns: minmax(100px, 0.42fr) minmax(160px, 0.72fr) minmax(130px, 0.55fr);
}

.campRoomWaitingPanel {
  grid-column: 1 / -1;
  min-height: 14rem;
  place-content: center;
  text-align: center;
}

.campRoomWaitingPanel strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #ffe2a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}

.campRoomWaitingPanel p {
  color: #c9ad77;
}

@media (max-width: 980px) {
  .campActionDialog {
    overflow-y: auto;
  }

  .campRoomModal,
  .campArenaRoomModal,
  .campActiveRoomModal {
    grid-template-columns: 1fr;
  }

  .campRoomModalTop {
    position: static;
    justify-self: end;
    margin-top: -0.25rem;
  }

  .campRoomModalFooter {
    grid-template-columns: 1fr;
  }

  .campRoomInfoGrid,
  .campArenaFeatureGrid,
  .campRoomMemberGrid,
  .campArenaTeamGrid,
  .campPveSetupGrid,
  .campActiveBossSelect {
    grid-template-columns: 1fr;
  }

  .campPveSetupGrid {
    grid-template-areas:
      "region"
      "boss"
      "difficulty"
      "color"
      "party";
  }

  .campActiveRoomFooter {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .campActionDialog {
    max-height: calc(100vh - 20px);
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
  }

  .campActionDialog h2 {
    margin-bottom: 0.35rem;
    font-size: 1.8rem;
  }

  .campRoomCreatePanel,
  .campArenaModePanel,
  .campRoomBossList,
  .campRoomPreview,
  .campArenaPreview {
    padding: 0.55rem;
  }

  .campRoomBossOption {
    min-height: 3.45rem;
  }

  .campRoomBossOption img {
    width: 2.55rem;
    height: 2.55rem;
  }

  .campRoomBossPreview,
  .campArenaHeroCard {
    min-height: 5.5rem;
  }

  .campRoomBossPreview img,
  .campArenaHeroCard img {
    width: 5.5rem;
    height: 4.9rem;
  }

  .campRoomAbilityPanel > div {
    max-height: 15rem;
  }

  .campArenaFeatureGrid article {
    min-height: 4.1rem;
  }
}

@media (max-width: 1160px) {
  .campTopPanel {
    max-width: calc(100vw - 24px);
  }

  .campLoadoutPanel {
    width: clamp(130px, 13vw, 170px);
  }

  .campLocationSign strong {
    font-size: 0.68rem;
  }
}

@media (max-height: 720px) {
  .campLoadoutPanel {
    gap: 0.28rem;
    padding: 0.38rem;
  }

  .campLocationSign small {
    display: none;
  }
}