healer-man/src/styles.css

:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  --ink: #eef2df;
  --muted: #aab6a2;
  --moss: #92b77b;
  --moss-bright: #c7dc8b;
  --gold: #d4ab55;
  --dispel-bright: #57ff68;
  --dispel-rgb: 87, 255, 104;
  --cave: #07110d;
  --panel: rgba(8, 20, 15, 0.84);
  --panel-solid: #0b1a14;
  --edge: rgba(183, 207, 151, 0.22);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cave);
}

body { color: var(--ink); }
button { font: inherit; }

.ability-tooltip {
  position: fixed;
  z-index: 10000;
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--gold);
  border-radius: 8px 3px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
}
.ability-tooltip header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ability-tooltip header strong { color: var(--gold); font: 600 16px Georgia, serif; }
.ability-tooltip kbd { color: var(--muted); font-size: 10px; }
.ability-tooltip p { margin: 8px 0; white-space: pre-line; overflow-wrap: anywhere; }
.ability-tooltip footer { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--edge); color: var(--moss-bright); font-size: 11px; }
.ability-tooltip .ability-tooltip__lock { margin-bottom: 0; color: var(--gold); }

.game-shell, .scene-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.game-shell,
.arena-runtime {
  -webkit-user-select: none;
  user-select: none;
}

.game-shell :is(input, textarea, [contenteditable]:not([contenteditable="false"])),
.arena-runtime :is(input, textarea, [contenteditable]:not([contenteditable="false"])) {
  -webkit-user-select: text;
  user-select: text;
}

.scene-shell {
  z-index: 0;
  isolation: isolate;
  cursor: crosshair;
}
.scene-shell canvas { display: block; }

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.manastorm-status {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  min-width: 330px;
  align-items: center;
  gap: 11px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(171,226,239,.4);
  border-radius: 25px 9px 9px 25px;
  background: linear-gradient(105deg, rgba(55,31,92,.9), rgba(7,29,36,.88));
  box-shadow: 0 9px 30px rgba(0,0,0,.42), inset 0 0 18px rgba(153,99,220,.13);
  transform: translateX(-50%);
  backdrop-filter: blur(9px);
}
.manastorm-status > div { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; align-content: center; border: 1px solid rgba(166,237,244,.62); border-radius: 50%; background: rgba(31,16,54,.84); }
.manastorm-status > div span { color: #a9dce7; font-size: 5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.manastorm-status > div strong { color: #f1e8ff; font: 18px Georgia, serif; line-height: 1; }
.manastorm-status > div small { color: #91bcc6; font-size: 5px; line-height: 1; }
.manastorm-status > p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.manastorm-status > p b { overflow: hidden; color: #f0e7ff; font: 12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.manastorm-status > p small { margin-top: 2px; color: #a9c7d0; font-size: 6px; letter-spacing: .03em; }
.manastorm-affixes { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.manastorm-affixes i { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid rgba(186,132,234,.35); border-radius: 5px; color: #d8bdf1; font-size: 5px; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.manastorm-affixes img { width: 10px; height: 10px; border-radius: 2px; object-fit: cover; }
.manastorm-objective {
  position: absolute;
  top: max(184px, calc(env(safe-area-inset-top) + 172px));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  display: flex;
  width: min(260px, calc(100vw - 24px));
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(174,203,211,.2);
  border-radius: 14px;
  background: rgba(5,15,20,.78);
  color: #d8e7e8;
  font-size: 7px;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  transform: none;
  backdrop-filter: blur(7px);
}
.manastorm-objective > span { color: #ac73ef; font-size: 12px; }
.manastorm-objective--portal-ready { border-color: rgba(132,237,241,.5); color: #eaffff; box-shadow: 0 0 18px rgba(102,211,228,.16); }
.manastorm-objective--portal-ready > span { color: #9ef7ff; }
.manastorm-client-overlay {
  --manastorm-bubble-tone: #79d599;
  --manastorm-bubble-glow: rgba(82,213,135,.18);
  position: absolute;
  top: max(104px, calc(env(safe-area-inset-top) + 92px));
  left: 50%;
  display: flex;
  max-width: min(340px, calc(100vw - 28px));
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  transform: translateX(-50%);
}
.manastorm-client-overlay--warning { --manastorm-bubble-tone: #e7bd55; --manastorm-bubble-glow: rgba(231,189,85,.21); }
.manastorm-client-overlay--danger { --manastorm-bubble-tone: #ed665f; --manastorm-bubble-glow: rgba(237,102,95,.25); }
.manastorm-countdown,
.manastorm-safety-bubble {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--manastorm-bubble-tone) 52%, transparent);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(8,23,28,.92), rgba(30,18,47,.9));
  box-shadow: 0 7px 20px rgba(0,0,0,.34), 0 0 16px var(--manastorm-bubble-glow);
  backdrop-filter: blur(7px);
}
.manastorm-countdown {
  display: flex;
  min-width: 76px;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  color: #c8dfe4;
}
.manastorm-countdown span,
.manastorm-safety-bubble p span { font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.manastorm-countdown strong { color: #f2e7ff; font: 13px Georgia, serif; }
.manastorm-safety-bubble { width: 178px; padding: 5px 7px 6px; }
.manastorm-safety-bubble p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; color: #c8dfe4; }
.manastorm-safety-bubble p strong { color: var(--manastorm-bubble-tone); font: 11px Georgia, serif; }
.manastorm-safety-bubble > i { display: block; height: 4px; margin-top: 3px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.62); }
.manastorm-safety-bubble > i > b { display: block; height: 100%; border-radius: inherit; background: var(--manastorm-bubble-tone); box-shadow: 0 0 8px var(--manastorm-bubble-tone); transition: width 160ms linear, background-color 160ms ease; }
.manastorm-cache-open { position: absolute; top: max(104px, calc(env(safe-area-inset-top) + 92px)); left: 50%; padding: 4px 9px; border: 1px solid rgba(217,178,91,.5); border-radius: 12px; background: rgba(46,31,11,.86); color: #f3dda0; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); pointer-events: auto; }
.hud:has(.manastorm-client-overlay) .manastorm-cache-open { top: max(150px, calc(env(safe-area-inset-top) + 138px)); }
.loot-reward {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px));
  display: grid;
  max-width: min(310px, calc(100vw - 28px));
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(226, 197, 101, .52);
  border-radius: 8px 3px 8px 3px;
  background: linear-gradient(110deg, rgba(38,31,12,.94), rgba(8,22,15,.94));
  box-shadow: 0 10px 30px rgba(0,0,0,.48);
  backdrop-filter: blur(7px);
}
.loot-reward > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #dac46d; border-radius: 50%; color: #f2dd89; }
.loot-reward p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.loot-reward strong { color: #f1dfa2; font: 11px Georgia, serif; }
.loot-reward small { margin-top: 2px; overflow: hidden; color: #d8d9c2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.loot-reward em { margin-top: 3px; color: #8fb78a; font-size: 6px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }

.dungeon-complete-banner {
  position: fixed;
  z-index: 48;
  top: 62px;
  left: 50%;
  display: flex;
  width: min(460px, calc(100vw - 24px));
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #c8a64b;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(25, 28, 18, .96), rgba(10, 15, 12, .94));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .52), inset 0 0 18px rgba(196, 157, 57, .08);
  transform: translateX(-50%) scale(var(--game-ui-scale, 1));
  transform-origin: top center;
  pointer-events: auto;
}

.dungeon-complete-banner > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid #e2ca70;
  border-radius: 50%;
  color: #f5df8a;
}

.dungeon-complete-banner p {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  margin: 0;
}

.dungeon-complete-banner strong { color: #f0dda0; font: 13px Georgia, serif; }
.dungeon-complete-banner small { margin-top: 3px; color: #cbd2bf; font-size: 8px; line-height: 1.35; }
.dungeon-complete-banner .button { min-width: 112px; padding: 7px 10px; font-size: 8px; }

.boss-loot-window {
  position: absolute;
  top: 50%;
  right: max(16px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(226, 197, 101, .62);
  border-radius: 12px 4px 12px 4px;
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 174, 68, .17), transparent 38%),
    linear-gradient(145deg, rgba(27, 24, 11, .98), rgba(6, 18, 13, .98));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .62), inset 0 0 28px rgba(202, 172, 76, .05);
  transform: translateY(-50%);
  pointer-events: auto;
  backdrop-filter: blur(12px);
  animation: boss-loot-arrive 260ms ease-out both;
}
.boss-loot-window > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  padding: 10px 10px 9px;
  border-bottom: 1px solid rgba(224, 195, 103, .24);
  background: linear-gradient(90deg, rgba(113, 87, 25, .22), transparent);
}
.boss-loot-window > header > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(236, 207, 111, .7);
  border-radius: 50%;
  color: #f3dd86;
  box-shadow: inset 0 0 12px rgba(232, 194, 77, .12);
}
.boss-loot-window > header p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.boss-loot-window > header small { color: #bba96d; font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.boss-loot-window > header strong { margin-top: 2px; overflow: hidden; color: #f5e9bd; font: 15px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.boss-loot-window > header button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(225, 204, 136, .24);
  border-radius: 5px;
  background: rgba(0, 0, 0, .22);
  color: #d4ca9e;
  cursor: pointer;
}
.boss-loot-window__body { padding: 11px; }
.boss-loot-window__eyebrow { margin: 0 0 7px; color: #8fb78a; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.boss-loot-window__items { display: grid; max-height: min(210px, 38vh); gap: 6px; overflow-y: auto; }
.boss-loot-window__item {
  display: grid;
  min-height: 52px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--item-quality) 42%, transparent);
  border-left: 3px solid var(--item-quality);
  border-radius: 5px;
  background: color-mix(in srgb, var(--item-quality) 8%, rgba(4, 12, 8, .86));
}
.boss-loot-window__item > b {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--item-quality) 55%, transparent);
  border-radius: 5px;
  background: rgba(0, 0, 0, .3);
  color: var(--item-quality);
  font: 11px Georgia, serif;
}
.boss-loot-window__item > p { display: flex; min-width: 0; flex-direction: column; margin: 0; }
.boss-loot-window__item strong { overflow: hidden; color: var(--item-quality); font: 12px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.boss-loot-window__item small { margin-top: 3px; color: #bdc8b6; font-size: 7px; text-transform: capitalize; }
.boss-loot-window__item em { color: #d9c873; font-size: 9px; font-style: normal; }
.boss-loot-window__empty { margin: 6px 0; color: var(--muted); font-size: 9px; }
.boss-loot-window > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-top: 1px solid rgba(224, 195, 103, .17);
  background: rgba(0, 0, 0, .18);
}
.boss-loot-window > footer span { color: #aebaa8; font-size: 7px; }
.boss-loot-window > footer button {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(226, 197, 101, .48);
  border-radius: 5px;
  background: linear-gradient(#5d4d1f, #30280f);
  color: #f3e5ae;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}
@keyframes boss-loot-arrive {
  from { opacity: 0; transform: translate(18px, -50%) scale(.97); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--moss-bright);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.objective-chip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  width: min(330px, calc(100vw - 36px));
  padding: 13px 17px 12px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--gold);
  border-radius: 4px 13px 13px 4px;
  background: linear-gradient(110deg, rgba(7, 18, 13, 0.94), rgba(12, 27, 20, 0.77));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.objective-chip h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.015em;
}

.objective-chip > p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.status-strip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.status-strip > span:not(.compass) {
  min-width: 53px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.status-strip strong { color: var(--ink); font-size: 0.9rem; }
.status-strip button, .icon-button {
  min-height: 31px;
  border: 1px solid rgba(202, 218, 173, 0.16);
  border-radius: 8px;
  background: rgba(149, 183, 124, 0.08);
  color: var(--ink);
  cursor: pointer;
}
.status-strip button { padding: 0 9px; font-size: 0.72rem; }
.status-strip button:hover, .icon-button:hover { background: rgba(149, 183, 124, 0.2); }
kbd { color: var(--moss-bright); font: inherit; font-size: 0.64rem; }

.compass {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(207, 222, 181, 0.2);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.58rem;
}
.compass__needle {
  position: absolute;
  width: 2px;
  height: 11px;
  transform-origin: 50% 100%;
  background: linear-gradient(var(--gold) 50%, transparent 50%);
}

.control-hint {
  position: absolute;
  bottom: max(19px, env(safe-area-inset-bottom));
  left: 50%;
  padding: 8px 13px;
  transform: translateX(-50%);
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(5, 14, 10, 0.78);
  color: #d8e0cb;
  font-size: 0.72rem;
  white-space: nowrap;
  box-shadow: 0 9px 30px rgba(0, 0, 0, 0.32);
  transition: opacity 500ms ease;
}
.control-hint--settled { opacity: 0.35; }

.reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(235, 241, 214, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(196, 219, 150, 0.5);
}

.asset-notice {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  max-width: 310px;
  flex-direction: column;
  padding: 9px 12px;
  border: 1px solid rgba(212, 171, 85, 0.3);
  border-radius: 9px;
  background: rgba(35, 28, 10, 0.86);
  color: #d9c98e;
  font-size: 0.67rem;
}
.asset-notice span { opacity: 0.75; }

.loading-screen, .scene-error, .graphics-recovery {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(45, 85, 56, 0.38), transparent 31%),
    #06100c;
  text-align: center;
  pointer-events: auto;
  z-index: 60;
}
.loading-screen__mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid rgba(199, 220, 139, 0.34);
  border-radius: 50% 44% 51% 43%;
  color: var(--moss-bright);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  box-shadow: inset 0 0 20px rgba(115, 155, 99, 0.18), 0 0 40px rgba(115, 155, 99, 0.15);
}
.loading-screen h1, .scene-error h1, .graphics-recovery h1 {
  margin: 0 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 400;
}
.loading-screen__track {
  width: min(340px, 72vw);
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}
.loading-screen__track span { display: block; height: 100%; background: var(--moss); transition: width 180ms ease; }
.loading-screen__item { color: var(--muted); font-size: 0.72rem; }
.defeated-prompt {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(12, 3, 3, .26) 72%, rgba(8, 1, 1, .56));
  pointer-events: none;
}
.defeated-prompt__panel {
  display: grid;
  width: min(390px, calc(100vw - 28px));
  justify-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(205, 124, 105, .34);
  border-radius: 14px 5px 14px 5px;
  background: linear-gradient(145deg, rgba(29, 10, 9, .94), rgba(8, 18, 13, .94));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 0 28px rgba(135, 47, 37, .08);
  text-align: center;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.defeated-prompt__panel .eyebrow { margin: 0 0 4px; color: #e49682; }
.defeated-prompt__panel h2 { margin: 0; font: 500 clamp(1.25rem, 4vw, 1.65rem) Georgia, serif; }
.defeated-prompt__panel > p:not(.eyebrow) { margin: 8px 0 14px; color: #bfc8b8; font-size: .72rem; line-height: 1.45; }
.defeated-prompt__panel .button { min-width: min(260px, 100%); }
.defeated-prompt__panel > small { margin-top: 8px; color: #a69f97; font-size: .58rem; line-height: 1.35; }
.graphics-recovery p:not(.eyebrow) { max-width: 550px; color: var(--muted); }
.graphics-recovery .button { margin-top: 10px; }

.map-panel {
  position: absolute;
  top: 50%;
  right: max(18px, env(safe-area-inset-right));
  z-index: 30;
  width: min(760px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 18px;
  transform: translateY(-50%);
  overflow: auto;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(12, 29, 21, 0.97), rgba(6, 16, 12, 0.97));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.map-panel header { display: flex; align-items: start; justify-content: space-between; }
.map-panel h2 { margin: 0; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.map-panel__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted); font-size: .7rem; }
.map-panel__tools label { display: flex; align-items: center; gap: 8px; }
.map-panel__tools select { max-width: min(260px, 60vw); padding: 6px 8px; border: 1px solid var(--edge); border-radius: 6px; color: var(--text); background: #122319; }
.map-panel__patrol-toggle input { accent-color: #cdb67b; }
.map-marker-label { fill: #fff1c0; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.icon-button { width: 34px; color: var(--muted); }
.map-panel__canvas { margin: 14px 0 12px; overflow: hidden; border: 1px solid rgba(187, 208, 160, 0.14); border-radius: 10px; background: #07140f; }
.map-panel svg { display: block; width: 100%; height: auto; }
.map-contour { fill: none; stroke: rgba(133, 175, 114, 0.3); stroke-width: 15; stroke-linecap: round; }
.map-contour--thin { stroke: rgba(179, 199, 142, 0.15); stroke-width: 6; }
.map-patrol polyline { fill: none; stroke: rgba(221, 155, 77, 0.72); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 4; }
.map-patrol circle { fill: #d99a4f; stroke: #ffe2a5; stroke-width: 1; }
.map-anchor circle { fill: #a78649; stroke: #e1c77d; stroke-width: 1.5; }
.map-anchor--entrance circle { fill: #7fb68b; stroke: #d8e8b9; }
.map-player-glow { fill: rgba(195, 222, 144, 0.55); }
.map-player { fill: #f2f2d5; stroke: #3e6d4c; stroke-width: 2; }
.map-heading { stroke: #f2f2d5; stroke-width: 2.5; stroke-linecap: round; }
.map-panel__readout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.map-panel__readout div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(185, 204, 156, 0.12); border-radius: 8px; background: rgba(148, 179, 124, 0.05); }
.map-panel__readout span, .map-panel__readout strong { display: block; }
.map-panel__readout span { margin-bottom: 3px; color: var(--muted); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; }
.map-panel__readout strong { overflow: hidden; font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }
.map-panel__note { margin: 10px 2px 0; color: var(--muted); font-size: 0.66rem; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 7, 5, 0.67);
  backdrop-filter: blur(7px);
}
.pause-menu {
  width: min(440px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(22px, 5vw, 34px);
  border: 1px solid var(--edge);
  border-radius: 17px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}
.pause-menu h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 400; }
.pause-menu > p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
.pause-menu__actions { display: grid; gap: 8px; margin: 21px 0; }
.pause-menu--hub { width: min(860px, 100%); padding: clamp(16px, 2vw, 24px); }
.pause-menu__header { text-align: center; }
.pause-menu--hub h2 { font-family: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.pause-menu__character { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.pause-menu__character img { width: 48px; height: 48px; flex: none; border: 2px solid var(--edge); border-radius: 10px; object-fit: cover; }
.pause-menu__character div { display: grid; gap: 3px; min-width: 0; text-align: left; }
.pause-menu__character strong { overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.pause-menu__character span, .pause-menu__context { color: var(--muted); font-size: 0.78rem; }
.pause-menu__context { margin: 7px 0 0; }
.pause-menu__resume { display: flex; justify-content: center; margin: 14px 0; }
.pause-menu__resume .button { width: min(320px, 100%); }
.pause-menu__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pause-menu__group { min-width: 0; padding: 12px; border: 1px solid rgba(188, 207, 160, 0.15); border-radius: 10px; background: rgba(170, 194, 141, 0.035); }
.pause-menu__group h3 { margin: 0 0 9px; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pause-menu--hub .pause-menu__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pause-menu--hub .pause-menu__actions .button { width: 100%; min-width: 0; padding: 7px 9px; line-height: 1.15; }
.button { min-height: 42px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 9px; background: rgba(170, 194, 141, 0.07); color: var(--ink); cursor: pointer; }
.button:hover { background: rgba(170, 194, 141, 0.16); }
.button--primary { border-color: rgba(200, 222, 151, 0.32); background: #587348; color: #fbfee9; }
.button--primary:hover { background: #688558; }
.controls-list { margin: 0; color: var(--muted); font-size: 0.72rem; }
.controls-list div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-top: 1px solid rgba(188, 207, 160, 0.09); }
.controls-list dt { color: var(--ink); }
.controls-list dd { margin: 0; text-align: right; }

.scene-error { position: relative; height: 100%; }
.scene-error p:not(.eyebrow) { max-width: 550px; color: var(--muted); }
.scene-error .button { margin-top: 10px; }

@media (max-width: 960px), (max-height: 620px) {
  .objective-chip { top: 12px; left: 12px; padding: 10px 13px; }
  .status-strip { top: 12px; right: 12px; }
  .control-hint { bottom: 12px; }
  .asset-notice { right: 12px; bottom: 50px; }
  .map-panel { right: 12px; max-height: calc(100vh - 24px); }
}

@media (max-width: 620px) {
  .pause-menu__groups { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pause-menu--hub .pause-menu__group { padding: 9px; }
  .pause-menu--hub .pause-menu__character { margin-top: 8px; }
  .pause-menu--hub .pause-menu__resume { margin: 10px 0; }
  .objective-chip { width: calc(100vw - 116px); }
  .objective-chip .eyebrow, .objective-chip > p:last-child { display: none; }
  .objective-chip h1 { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
  .status-strip { min-height: 38px; }
  .status-strip > span:not(.compass), .status-strip button:first-of-type kbd, .status-strip button:last-of-type kbd { display: none; }
  .status-strip button { width: 34px; overflow: hidden; padding: 0; font-size: 0; }
  .status-strip button::first-letter { font-size: 0.7rem; }
  .compass { width: 25px; height: 25px; }
  .control-hint { max-width: calc(100vw - 24px); overflow: hidden; font-size: 0.64rem; text-overflow: ellipsis; }
  .map-panel { right: 10px; width: calc(100vw - 20px); padding: 14px; }
  .map-panel__readout { grid-template-columns: 1fr; }
  .map-panel__readout div:last-child { display: none; }
}

@media (max-height: 540px) {
  .objective-chip > p:last-child { display: none; }
  .map-panel { width: min(420px, calc(100vw - 24px)); padding: 12px; }
  .map-panel header .eyebrow, .map-panel__note { display: none; }
  .map-panel h2 { font-size: 1.1rem; }
  .map-panel__canvas { margin: 8px 0; max-height: 280px; }
  .map-panel svg { max-height: 280px; }
  .pause-menu { padding: 20px; }
  .pause-menu > p:not(.eyebrow) { margin: 7px 0; }
  .pause-menu__actions { margin: 12px 0; grid-template-columns: 1fr 1fr; }
  .defeated-prompt__panel { padding: 12px 16px; }
  .defeated-prompt__panel > p:not(.eyebrow) { margin: 5px 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Playable MMO HUD and game panels */
.player-frame {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  width: 262px;
  grid-template-columns: 58px 1fr;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(190, 214, 157, .24);
  border-radius: 14px 5px 14px 5px;
  background: linear-gradient(125deg, rgba(5, 15, 11, .96), rgba(14, 31, 22, .87));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 0 22px rgba(116, 156, 93, .05);
  backdrop-filter: blur(8px);
}
.player-frame__portrait {
  position: relative;
  display: grid;
  height: 58px;
  place-items: center;
  border: 2px solid var(--moss);
  border-radius: 50% 43% 48% 43%;
  background: radial-gradient(circle, rgba(118, 155, 93, .26), rgba(4, 12, 9, .92));
  color: var(--moss-bright);
  font: 700 17px Georgia, serif;
}
.player-frame__portrait b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(230, 205, 129, .5);
  border-radius: 50%;
  background: #172219;
  color: #f1d88a;
  font: 700 10px "Segoe UI", sans-serif;
}
.player-frame__body { min-width: 0; }
.player-frame__body header { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; margin-bottom: 5px; }
.player-frame__body header strong { overflow: hidden; font: 600 15px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.player-frame__body header span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.player-frame__meter { margin-top: 3px; }
.player-frame__meter-label { display: flex; justify-content: space-between; color: #dce6d1; font-size: 8px; }
.player-frame__meter-label span { text-transform: uppercase; letter-spacing: .08em; }
.player-frame__meter-track { height: 7px; margin-top: 2px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; background: rgba(0,0,0,.52); }
.player-frame__meter-track span { display: block; height: 100%; background: linear-gradient(90deg, #417b43, #84c665); box-shadow: 0 0 8px rgba(113, 196, 97, .25); transition: width 180ms ease; }
.player-frame__meter--mana .player-frame__meter-track span { background: linear-gradient(90deg, #315f9b, #599fd4); }
.player-frame__meter--rage .player-frame__meter-track span { background: linear-gradient(90deg, #87342c, #c95947); }
.player-frame__meter--energy .player-frame__meter-track span { background: linear-gradient(90deg, #958321, #e0cb43); }
.player-frame__meter--runic-power .player-frame__meter-track span { background: linear-gradient(90deg, #327784, #62c5ce); }
.player-frame__meter--nature-power .player-frame__meter-track span { background: linear-gradient(90deg, #497d32, #8fc45a); }
.player-frame__meter--psi .player-frame__meter-track span { background: linear-gradient(90deg, #704292, #bd7bdd); }
.player-frame__meter--focus .player-frame__meter-track span { background: linear-gradient(90deg, #4b7d6b, #71c8a7); }
.player-frame__shield, .player-frame__dead-label { position: absolute; right: 9px; bottom: -15px; color: #8bcce9; font-size: 8px; }
.player-frame__dead-label { color: #e17b6d; }
.player-frame--dead { filter: saturate(.25); }

.party-frames {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  width: 224px;
  gap: 3px;
  pointer-events: auto;
  scale: var(--game-ui-scale, 1);
  transform-origin: top left;
}
.party-frames > header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; color: #aebca3; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.party-frames > header b { color: #dfce8a; }
.party-frames > header b.is-warning { color: #e9a36f; }
.party-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 39px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid rgba(190, 214, 157, .16);
  border-radius: 5px 2px 6px 2px;
  background: linear-gradient(100deg, rgba(5, 15, 11, .93), rgba(12, 27, 19, .77));
  color: #e4ebdc;
  box-shadow: 0 5px 16px rgba(0,0,0,.26);
  cursor: pointer;
  text-align: left;
}
.party-frame:hover, .party-frame:focus-visible { border-color: rgba(213, 229, 176, .42); outline: none; }
.party-frame.is-selected { border-color: rgba(229, 207, 110, .75); background: linear-gradient(100deg, rgba(39, 43, 20, .96), rgba(18, 38, 24, .88)); box-shadow: 0 0 0 1px rgba(229,207,110,.14), 0 6px 18px rgba(0,0,0,.32); }
.party-frame.is-dispellable { border-color: var(--dispel-bright); box-shadow: 0 0 0 1px rgba(var(--dispel-rgb),.72), 0 0 12px rgba(var(--dispel-rgb),.62), 0 6px 18px rgba(0,0,0,.32); }
.party-frame.is-down { filter: grayscale(.75); opacity: .58; }
.party-rez-button { display: grid; width: 100%; min-height: 44px; gap: 3px; padding: 6px 8px; border: 1px solid var(--party-rez-border, rgba(224,197,101,.5)); border-radius: 4px; background: var(--party-rez-background, linear-gradient(110deg, rgba(41,45,23,.96), rgba(13,28,20,.94))); color: var(--party-rez-color, #fff0b0); cursor: pointer; }
.party-rez-button strong { font-size: 10px; }
.party-rez-button small { color: #b6c4a8; font-size: 8px; }
.party-rez-button:hover:not(:disabled), .party-rez-button:focus-visible { border-color: #fff0b0; outline: 1px solid #fff0b0; outline-offset: 2px; }
.party-rez-button:disabled { opacity: .6; cursor: not-allowed; }
.party-resurrection { display: grid; gap: 4px; }
.resurrection-destination { display: grid; width: 100%; gap: 3px; margin-bottom: 6px; color: #b6c4a8; font-size: 10px; text-align: left; }
.resurrection-destination select { width: 100%; min-width: 0; min-height: 44px; padding: 4px 7px; border: 1px solid rgba(224,197,101,.5); border-radius: 4px; background: #142219; color: #fff0b0; font: inherit; }
.resurrection-destination select:focus-visible { outline: 1px solid #fff0b0; outline-offset: 2px; }
.resurrection-destination select:disabled { opacity: .6; }
.party-frame--player { opacity: .9; }
.party-frame--player.is-selected { opacity: 1; }
.party-frame--online { border-color: rgba(79,184,154,.3); background: linear-gradient(100deg, rgba(9,35,31,.94), rgba(11,24,21,.9)); }
.party-frame__online-status { display: flex; align-items: center; gap: 4px; color: #8fd5bd; font-size: 6px; letter-spacing: .06em; text-transform: uppercase; }
.party-frame__online-status i { width: 5px; height: 5px; border-radius: 50%; background: #55d79f; box-shadow: 0 0 5px rgba(85,215,159,.72); }
.party-frame__sigil { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid color-mix(in srgb, var(--party-class-color, #789b68), white 18%); border-radius: 50%; background: color-mix(in srgb, var(--party-class-color, #789b68) 22%, #06100c); color: #eef4e7; font-size: 7px; font-weight: 800; }
.party-frame__body { display: grid; min-width: 0; gap: 3px; }
.party-frame__identity { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; }
.party-frame__identity strong { overflow: hidden; font: 600 10px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.party-frame__identity small { overflow: hidden; color: #a9b69e; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.party-frame__health { position: relative; display: block; height: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; background: rgba(0,0,0,.62); }
.party-frame__health i { display: block; height: 100%; background: linear-gradient(90deg, #3e793e, #79b958); transition: width 150ms ease; }
.party-frame__health em { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(92,176,219,.72), rgba(151,222,244,.94)); box-shadow: 0 0 5px rgba(104,202,238,.55); }
.party-frame__health b { position: absolute; inset: -1px 2px 0; color: rgba(246,252,240,.9); font-size: 6px; line-height: 8px; text-align: right; text-shadow: 0 1px 2px #000; }
.party-frame__resource { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(0,0,0,.65); }
.party-frame__resource i { display: block; height: 100%; background: linear-gradient(90deg, #315f9b, #599fd4); transition: width 150ms ease; }
.party-frame__resource--rage i { background: linear-gradient(90deg, #87342c, #c95947); }
.party-frame__resource--energy i { background: linear-gradient(90deg, #958321, #e0cb43); }
.party-frame__resource--runic-power i { background: linear-gradient(90deg, #327784, #62c5ce); }
.party-frame__resource--focus i { background: linear-gradient(90deg, #4b7d6b, #71c8a7); }
.party-frame__dispel { justify-self: end; margin-top: -2px; padding: 1px 3px; border: 1px solid rgba(var(--dispel-rgb),.78); border-radius: 3px; color: #9dffa7; font-size: 5px; letter-spacing: .08em; box-shadow: 0 0 5px rgba(var(--dispel-rgb),.35); }
.party-frame__heal-popups { position: absolute; z-index: 4; inset: 0; overflow: visible; pointer-events: none; }
.party-frame__heal-popup { position: absolute; top: 45%; right: 10px; color: #72f59c; font: 800 12px Georgia, serif; letter-spacing: .01em; text-shadow: 0 1px 2px #001d09, 0 0 6px rgba(65,220,112,.78); opacity: 0; animation: party-frame-heal-float 1.5s ease-out forwards; }
.party-frame__heal-popup.is-critical { color: #b0ffc7; font-size: 14px; text-shadow: 0 1px 2px #001d09, 0 0 9px rgba(92,255,143,.95); }
@keyframes party-frame-heal-float {
  0% { opacity: 0; transform: translate(var(--party-heal-x, 0), 5px) scale(.82); }
  14% { opacity: 1; transform: translate(var(--party-heal-x, 0), 0) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--party-heal-x, 0), -27px) scale(1.05); }
}
.summon-frames { position: absolute; top: max(101px, calc(env(safe-area-inset-top) + 89px)); left: max(244px, calc(env(safe-area-inset-left) + 232px)); display: grid; width: 150px; gap: 3px; scale: var(--game-ui-scale, 1); transform-origin: top left; }
.summon-frame { width: 100%; padding: 4px 6px; border: 1px solid rgba(115,183,205,.28); border-radius: 5px; background: rgba(5,16,19,.88); box-shadow: 0 5px 14px rgba(0,0,0,.3); color: inherit; text-align: left; cursor: pointer; }
.summon-frame.is-selected { border-color: rgba(117,225,181,.82); box-shadow: 0 0 0 1px rgba(117,225,181,.28), 0 5px 14px rgba(0,0,0,.3); }
.summon-frame header { display: flex; justify-content: space-between; gap: 5px; color: #dff4ec; font-size: 7px; }
.summon-frame header span, .summon-frame small { color: #93b4b0; font-size: 5px; text-transform: uppercase; }
.summon-frame > div { height: 4px; margin-top: 3px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.65); }
.summon-frame > div i { display: block; height: 100%; background: linear-gradient(90deg, #417b64, #78c7a2); }
.summon-frame--totem { border-color: rgba(220,188,91,.38); }
.summon-frame--totem > div i { background: linear-gradient(90deg, #8a6d2b, #d5b755); }
.ground-target-reticle { position: absolute; top: 50%; left: 50%; z-index: 20; display: grid; width: 220px; justify-items: center; gap: 5px; color: #f4e8ae; text-align: center; text-shadow: 0 2px 4px #000; transform: translate(-50%, -50%); pointer-events: auto; }
.ground-target-reticle > div { position: relative; width: 58px; height: 58px; border: 2px solid rgba(239,210,91,.9); border-radius: 50%; box-shadow: 0 0 18px rgba(238,199,71,.42), inset 0 0 16px rgba(238,199,71,.18); }
.ground-target-reticle > div i, .ground-target-reticle > div b { position: absolute; top: 50%; left: 50%; background: rgba(250,222,116,.95); transform: translate(-50%, -50%); }
.ground-target-reticle > div i { width: 76px; height: 1px; }
.ground-target-reticle > div b { width: 1px; height: 76px; }
.ground-target-reticle strong { font: 600 12px Georgia, serif; }
.ground-target-reticle small { max-width: 210px; color: #d5ddca; font-size: 7px; }
.ground-target-reticle span { display: flex; gap: 5px; }
.ground-target-reticle button { padding: 3px 8px; border: 1px solid rgba(232,207,116,.38); border-radius: 4px; background: rgba(7,18,12,.9); color: #edf2d9; font-size: 7px; }
.timed-effect-strip {
  display: flex;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
}
.timed-effect {
  position: relative;
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(222, 151, 112, .92);
  border-radius: 3px;
  background: #170a08;
  box-shadow: 0 2px 6px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.08);
}
.timed-effect--hot { border-color: rgba(107, 221, 137, .94); background: #07170d; }
.timed-effect img { width: 100%; height: 100%; object-fit: cover; }
.timed-effect__fallback { color: #f1ba92; font-size: 12px; font-weight: 900; }
.timed-effect--hot .timed-effect__fallback { color: #9ae7ac; }
.timed-effect__timer {
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  color: #fff;
  font: 800 7px/8px "Segoe UI", sans-serif;
  letter-spacing: -.03em;
  text-align: right;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.timed-effect--inspectable { cursor: help; transition: border-color 100ms ease, filter 100ms ease, transform 100ms ease; }
.timed-effect--inspectable:hover, .timed-effect--inspectable:focus-visible { z-index: 2; border-color: #f4dd8c; outline: 1px solid rgba(244,221,140,.58); filter: brightness(1.16); transform: translateY(-1px); }
.timed-effect-strip--party { min-height: 16px; margin-top: 1px; }
.timed-effect-strip--party .timed-effect { width: 16px; height: 16px; }
.timed-effect-strip--party .timed-effect__timer { font-size: 6px; line-height: 7px; }
.timed-effect-strip--target { justify-content: center; margin-top: 4px; }
.timed-effect-strip--target + small { display: block; margin-top: 1px; }
.timed-effect-strip--world { width: 144px; justify-content: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.85)); }
.timed-effect-strip--world .timed-effect { width: 22px; height: 22px; border-width: 2px; }
.timed-effect-strip--world .timed-effect__timer { font-size: 8px; line-height: 9px; }

.aura-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.aura { position: relative; display: inline-grid; width: 22px; height: 22px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; color: #fff; background: linear-gradient(145deg, #42669a, #18273e); box-shadow: 0 1px 3px rgba(0,0,0,.7); }
.aura--debuff { border-color: rgba(243,118,105,.75); background: linear-gradient(145deg, #8c3d45, #35191f); }
.aura__icon { width: 100%; height: 100%; object-fit: cover; }
.aura__initial { font: 700 11px/1 var(--font-ui); text-shadow: 0 1px 2px #000; }
.aura__timer { position: absolute; right: 1px; bottom: 0; font: 700 7px/8px var(--font-ui); text-shadow: 0 1px 2px #000; }
.aura__stacks { position: absolute; right: 1px; top: 0; font: 700 8px/8px var(--font-ui); color: #fff4b8; text-shadow: 0 1px 2px #000; }
.aura--inspectable { cursor: help; transition: border-color 100ms ease, filter 100ms ease, transform 100ms ease; }
.aura--inspectable:hover, .aura--inspectable:focus-visible { z-index: 2; border-color: #f4dd8c; outline: 1px solid rgba(244,221,140,.58); filter: brightness(1.16); transform: translateY(-1px); }
.aura--dispellable, .aura--dispellable:hover, .aura--dispellable:focus-visible { z-index: 1; border: 2px solid var(--dispel-bright); outline-color: rgba(var(--dispel-rgb),.78); box-shadow: 0 0 0 1px rgba(13,44,18,.82), 0 0 8px rgba(var(--dispel-rgb),.82); }
.aura-strip--target { justify-content: center; margin-top: 3px; }
.aura-strip--party { min-height: 16px; margin-top: 1px; }
.aura-strip--party .aura { width: 16px; height: 16px; }
.aura-strip--party .aura__initial { font-size: 8px; }
.aura-strip--party .aura__timer, .aura-strip--party .aura__stacks { font-size: 6px; line-height: 6px; }
.aura-strip--world { width: 144px; justify-content: center; margin-top: 2px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.85)); }
.aura-strip--world .aura { width: 20px; height: 20px; }
.party-command-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.party-command-bar button { display: flex; min-width: 0; min-height: 28px; align-items: center; justify-content: space-between; gap: 4px; padding: 3px 5px; border: 1px solid rgba(190,214,157,.18); border-radius: 4px; background: linear-gradient(110deg, rgba(5,15,11,.94), rgba(13,28,20,.86)); color: #c4d0ba; cursor: pointer; }
.party-command-bar button:hover, .party-command-bar button:focus-visible { border-color: rgba(213,229,176,.44); color: #f0f5e7; }
.party-command-bar button.is-active { border-color: rgba(224,197,101,.68); background: linear-gradient(110deg, rgba(77,70,29,.88), rgba(25,45,27,.94)); color: #fff0b0; box-shadow: inset 0 0 12px rgba(217,190,91,.1), 0 3px 12px rgba(0,0,0,.24); }
.party-command-bar strong { min-width: 0; overflow: hidden; font-size: 7px; letter-spacing: .03em; text-overflow: ellipsis; text-transform: uppercase; }
.party-command-bar kbd { flex: 0 0 auto; padding: 1px 3px; border: 1px solid rgba(230,213,147,.2); border-radius: 3px; background: rgba(0,0,0,.35); color: #dfcf91; font-size: 6px; }

.hud-top-right {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  width: 154px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 6px;
  pointer-events: none;
  scale: var(--game-ui-scale, 1);
  transform-origin: top right;
}
.hud-minimap {
  position: relative;
  width: 100%;
  text-align: center;
  pointer-events: auto;
}
.hud-minimap__map {
  position: relative;
  width: 132px;
  height: 132px;
  padding: 0;
  overflow: hidden;
  border: 3px solid #8d7541;
  border-radius: 50%;
  background: #07140f;
  color: var(--ink);
  box-shadow: 0 10px 32px rgba(0,0,0,.48), 0 0 0 2px rgba(10,25,17,.88), inset 0 0 18px #000;
  cursor: pointer;
}
.hud-minimap__viewport { position: absolute; inset: -9px; display: block; opacity: .88; transform: rotate(var(--minimap-turn, 0rad)); transition: transform 140ms linear; }
.hud-minimap__viewport svg { width: 100%; height: 100%; }
.hud-minimap__north { position: absolute; top: 2px; left: 50%; z-index: 2; transform: translateX(-50%); color: #f4d886; font: 700 10px Georgia, serif; text-shadow: 0 1px 3px #000; }
.hud-minimap__heading { position: absolute; right: 15px; bottom: 10px; z-index: 2; padding: 2px 4px; border-radius: 4px; background: rgba(0,0,0,.65); color: #dce7cc; font-size: 7px; }
.hud-minimap__caption { margin-top: -4px; padding: 6px 7px 5px; border: 1px solid rgba(193,210,158,.2); border-radius: 5px 5px 10px 10px; background: rgba(5,15,11,.9); box-shadow: 0 7px 20px rgba(0,0,0,.3); }
.hud-minimap__caption strong, .hud-minimap__caption span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-minimap__caption strong { font: 600 11px Georgia, serif; }
.hud-minimap__caption span { margin-top: 2px; color: var(--muted); font-size: 7px; }

.player-status-panel { position: relative; display: grid; width: 100%; min-width: 0; gap: 4px; pointer-events: auto; }
.player-status-panel__section { padding: 4px; border: 1px solid rgba(164,202,137,.24); border-radius: 5px 2px 7px 2px; background: linear-gradient(105deg, rgba(5,15,11,.92), rgba(12,29,20,.84)); box-shadow: 0 5px 16px rgba(0,0,0,.3); backdrop-filter: blur(5px); }
.player-status-panel__section--debuffs { border-color: rgba(219,112,94,.28); background: linear-gradient(105deg, rgba(29,10,10,.91), rgba(22,15,13,.86)); }
.player-status-panel__section > header { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 3px; color: #c7d8b8; font-size: 6px; letter-spacing: .11em; text-transform: uppercase; }
.player-status-panel__section--debuffs > header { color: #e7b09e; }
.player-status-panel__section > header b { display: grid; min-width: 13px; height: 13px; place-items: center; border-radius: 7px; background: rgba(135,176,107,.16); color: #e5efdb; font-size: 6px; }
.player-status-panel__section--debuffs > header b { background: rgba(205,94,77,.16); color: #ffd2c2; }
.player-status-panel__icons { display: flex; min-height: 22px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px; }
.player-status-panel__strip { display: contents; }
.player-status-panel__empty { align-self: center; color: rgba(177,192,166,.62); font-size: 6px; letter-spacing: .05em; text-transform: uppercase; }
.player-status-panel__section--debuffs .player-status-panel__empty { color: rgba(211,166,151,.6); }
.player-status-panel__synthetic { flex: 0 0 auto; }
.player-status-panel__synthetic .aura__timer:empty { display: none; }
.player-status-tooltip { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(250px, calc(100vw - 24px)); padding: 8px 9px; border: 1px solid rgba(190,218,157,.42); border-radius: 7px 2px 9px 2px; background: linear-gradient(145deg, rgba(8,21,14,.98), rgba(3,10,7,.98)); box-shadow: 0 12px 30px rgba(0,0,0,.58), inset 0 0 18px rgba(122,176,91,.06); color: #e9efe2; text-align: left; pointer-events: none; }
.player-status-tooltip--debuff { border-color: rgba(228,122,101,.5); background: linear-gradient(145deg, rgba(35,12,11,.98), rgba(12,7,7,.98)); }
.player-status-tooltip > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.player-status-tooltip > header strong { font: 600 11px Georgia, serif; }
.player-status-tooltip > header span { color: #9ece87; font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.player-status-tooltip--debuff > header span { color: #ef9b86; }
.player-status-tooltip p { margin: 5px 0 7px; color: #c3cebb; font-size: 8px; line-height: 1.42; }
.player-status-tooltip footer { display: flex; flex-wrap: wrap; gap: 3px 7px; padding-top: 5px; border-top: 1px solid rgba(200,220,177,.12); color: #dfcb83; font-size: 7px; text-transform: capitalize; }
.encounter-timeline { width: 100%; min-width: 0; overflow: hidden; border: 1px solid rgba(225,185,91,.38); border-radius: 6px 2px 9px 2px; background: linear-gradient(115deg, rgba(24,17,8,.94), rgba(8,18,13,.94)); box-shadow: 0 7px 22px rgba(0,0,0,.42), inset 0 0 18px rgba(233,187,75,.04); color: #edf2e6; pointer-events: auto; backdrop-filter: blur(5px); }
.encounter-timeline > header { display: grid; padding: 5px 6px 4px; border-bottom: 1px solid rgba(225,185,91,.18); }
.encounter-timeline > header span { color: #d8ba69; font-size: 6px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.encounter-timeline > header strong { overflow: hidden; margin-top: 1px; font: 600 9px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.encounter-timeline__rows { display: grid; }
.encounter-timeline__row { position: relative; display: grid; min-width: 0; grid-template-columns: 13px minmax(0,1fr) auto; align-items: center; gap: 3px; padding: 5px 6px 6px; overflow: hidden; border-top: 1px solid rgba(213,224,196,.08); }
.encounter-timeline__row:first-child { border-top: 0; }
.encounter-timeline__glyph { color: #e5c66e; font-size: 8px; text-align: center; text-shadow: 0 0 7px currentColor; }
.encounter-timeline__name { overflow: hidden; font-size: 7px; font-weight: 700; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.encounter-timeline__row > strong { color: #f2dfa3; font-size: 7px; font-variant-numeric: tabular-nums; }
.encounter-timeline__row > i { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; overflow: hidden; background: rgba(255,255,255,.05); }
.encounter-timeline__row > i > b { display: block; width: 100%; height: 100%; background: #dcb754; transform-origin: left center; transition: transform 100ms linear; }
.encounter-timeline__row--casting { background: rgba(179,59,39,.16); }
.encounter-timeline__row--casting > i > b { background: #f27454; }
.encounter-timeline__row--health > strong { color: #eaa08c; }
.encounter-timeline__row[data-school="fire"] .encounter-timeline__glyph { color: #ff765b; }
.encounter-timeline__row[data-school="frost"] .encounter-timeline__glyph { color: #79d5ff; }
.encounter-timeline__row[data-school="nature"] .encounter-timeline__glyph { color: #8ee070; }
.encounter-timeline__row[data-school="arcane"] .encounter-timeline__glyph,
.encounter-timeline__row[data-school="shadow"] .encounter-timeline__glyph { color: #c78aef; }

.hud-bottom-stack {
  position: absolute;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  left: 50%;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  transform-origin: bottom center;
  pointer-events: none;
  scale: var(--game-ui-scale, 1);
}
.hud-bottom-stack > .action-bar {
  position: relative;
  bottom: auto;
  left: auto;
  width: min(420px, calc(100vw - 24px));
  margin-top: 20px;
  transform: none;
  scale: none;
}
.hud-bottom-stack > .cast-bar,
.hud-bottom-stack > .control-hint {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: min(560px, calc(100vw - 24px));
  transform: none;
  scale: none;
}

.action-bar {
  --action-slot-size: 42px;
  position: absolute;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  left: 50%;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: auto;
}
.action-bar__layer-status { display: flex; width: max-content; align-items: center; gap: 2px; margin: 0 auto 3px; padding: 2px; border: 1px solid rgba(202,219,166,.18); border-radius: 999px; background: rgba(4,12,8,.88); box-shadow: 0 7px 18px rgba(0,0,0,.34); }
.action-bar__layer-status span { min-width: 42px; padding: 2px 7px; border-radius: 999px; color: #8f9d88; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.action-bar__layer-status span.is-active { background: linear-gradient(180deg, rgba(182,205,123,.3), rgba(88,120,70,.24)); color: #eff7cf; box-shadow: inset 0 0 0 1px rgba(223,236,177,.24); }
.action-bar__controller { display: grid; min-height: 130px; grid-template-columns: 104px 118px 130px; grid-template-rows: 1fr; align-items: end; justify-content: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(202,219,166,.2); border-radius: 34px 34px 17px 17px; background: linear-gradient(180deg, rgba(9,21,15,.74), rgba(4,12,8,.92)); box-shadow: 0 12px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.action-cluster { position: relative; display: grid; align-items: center; justify-content: center; }
.action-cluster--dpad { grid-column: 1; grid-row: 1; grid-template-columns: var(--action-slot-size) 18px var(--action-slot-size); align-self: end; padding-bottom: 24px; }
.action-cluster__dpad-center { display: grid; width: 18px; height: 22px; place-items: center; color: rgba(211,224,190,.38); font: 700 15px Georgia, serif; }
.action-cluster--shoulders { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, 56px); align-self: start; gap: 4px; padding-top: 4px; }
.action-cluster--shoulders::after { grid-column: 1 / 3; height: 43px; margin: 3px 14px 0; border: 1px solid rgba(204,220,177,.08); border-radius: 50%; content: ""; opacity: .75; }
.action-cluster--face { width: 130px; height: 130px; grid-column: 3; grid-row: 1; grid-template: repeat(3, var(--action-slot-size)) / repeat(3, var(--action-slot-size)); gap: 2px; }
.action-cluster--face .action-slot--face-top { grid-area: 1 / 2; }
.action-cluster--face .action-slot--face-right { grid-area: 2 / 3; }
.action-cluster--face .action-slot--face-bottom { grid-area: 3 / 2; }
.action-cluster--face .action-slot--face-left { grid-area: 2 / 1; }
.action-slot {
  --ability-color: #789b68;
  position: relative;
  display: grid;
  width: var(--action-slot-size);
  min-width: var(--action-slot-size);
  height: var(--action-slot-size);
  place-items: center;
  padding: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ability-color) 54%, #c9d7aa 12%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ability-color) 35%, transparent), rgba(6,15,10,.96) 70%);
  color: var(--ink);
  cursor: pointer;
}
.action-cluster--shoulders .action-slot { width: 56px; min-width: 56px; border-radius: 10px 10px 7px 7px; }
.action-cluster--dpad .action-slot { border-radius: 7px; }
.action-slot:not(.action-slot--disabled):hover { border-color: var(--moss-bright); transform: translateY(-1px); }
.action-slot--disabled { cursor: default; filter: saturate(.4); opacity: .7; }
.action-slot:focus-visible { outline: 2px solid #f0dc8d; outline-offset: 2px; }
.action-slot__binding { position: absolute; top: 2px; left: 2px; z-index: 5; display: grid; min-width: 15px; height: 15px; place-items: center; border: 1px solid rgba(239,221,158,.3); border-radius: 50%; background: rgba(0,0,0,.76); color: #f2dc93; font-size: 8px; line-height: 1; }
.action-slot--face-top .action-slot__binding { color: #77d982; }
.action-slot--face-right .action-slot__binding { color: #ef7373; }
.action-slot--face-bottom .action-slot__binding { color: #75bcea; }
.action-slot--face-left .action-slot__binding { color: #e89bc9; }
.action-slot__icon { position: relative; z-index: 2; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50% 40% 48% 42%; color: #f3f1d7; font: 700 9px Georgia, serif; text-shadow: 0 1px 3px #000; }
.action-slot > strong, .action-slot > small { display: none; }
.action-slot__unlock { position: absolute; right: 2px; bottom: 2px; z-index: 5; padding: 1px 3px; border: 1px solid rgba(221,201,139,.24); border-radius: 4px; background: rgba(7,8,7,.88); color: #d7c483; font-size: 5px; font-weight: 900; letter-spacing: .03em; }
.action-slot--friendly { border-color: rgba(105, 210, 137, .72); }
.action-slot__target { position: absolute; top: 3px; right: 3px; z-index: 3; padding: 1px 2px; border-radius: 3px; background: rgba(22, 91, 46, .9); color: #c9f6d5; font-size: 4px; font-weight: 800; letter-spacing: .04em; }
.action-slot__cooldown { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: var(--cooldown-fill); background: rgba(0,0,0,.68); pointer-events: none; }
.action-slot > em { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: #fff1b6; font: 700 14px Georgia, serif; font-style: normal; text-shadow: 0 2px 4px #000; }
.action-slot--empty { opacity: .35; }
.action-bar__detail { grid-column: 2; grid-row: 1; z-index: 3; display: flex; width: 108px; min-width: 0; align-self: end; justify-self: center; flex-direction: column; margin-bottom: 21px; padding: 3px 5px; overflow: hidden; border: 1px solid rgba(201,218,172,.12); border-radius: 5px; background: rgba(2,8,5,.76); text-align: center; pointer-events: none; }
.action-bar__detail strong, .action-bar__detail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-bar__detail strong { color: #eef4d9; font-size: 8px; }
.action-bar__detail span { margin-top: 1px; color: #aebba4; font-size: 6px; }
.action-bar__feedback { position: absolute; right: 0; bottom: 100%; left: 0; min-height: 18px; padding-bottom: 4px; color: #f1d68d; font-size: 10px; font-weight: 700; text-align: center; text-shadow: 0 1px 4px #000; }
.cast-bar { position: absolute; bottom: 198px; left: 50%; width: min(330px, calc(100vw - 42px)); padding: 7px 9px 6px; transform: translateX(-50%); border: 1px solid rgba(231,207,126,.42); border-radius: 6px 6px 11px 11px; background: rgba(5,13,9,.92); box-shadow: 0 8px 24px rgba(0,0,0,.45); color: #f2e8be; text-align: center; }
.cast-bar header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 11px Georgia, serif; }
.cast-bar header span, .cast-bar small { color: #c8d6b9; font: 700 8px "Segoe UI", sans-serif; }
.cast-bar__track { height: 9px; margin-top: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: rgba(0,0,0,.7); }
.cast-bar__track span { display: block; height: 100%; background: linear-gradient(90deg, #c39a47, #f2dc80); box-shadow: 0 0 9px rgba(240,210,111,.42); transition: width 80ms linear; }
.cast-bar--channel .cast-bar__track span { background: linear-gradient(90deg, #7551a9, #bc8be2); }
.player-frame, .target-frame { scale: var(--game-ui-scale, 1); }
.player-frame { transform-origin: top left; }
.target-frame { transform-origin: top center; }
.action-slot__icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

.experience-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 17px; border-top: 1px solid rgba(205,181,108,.32); background: rgba(4,10,7,.92); }
.experience-bar__track { position: absolute; inset: 0; overflow: hidden; }
.experience-bar__track span { display: block; height: 100%; background: linear-gradient(90deg, rgba(97,59,151,.85), rgba(148,91,209,.9)); box-shadow: 0 0 10px rgba(151,97,218,.35); transition: width 250ms ease; }
.experience-bar__label { position: relative; z-index: 1; display: flex; height: 100%; align-items: center; justify-content: center; gap: 10px; color: #f0e5ff; font-size: 8px; text-shadow: 0 1px 3px #000; }
.experience-bar__label strong { color: #fff3b7; }

.target-frame {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  width: 225px;
  padding: 7px 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(209,117,89,.35);
  border-radius: 4px 4px 12px 12px;
  background: rgba(18,11,9,.88);
  box-shadow: 0 9px 26px rgba(0,0,0,.4);
  text-align: center;
}
.target-frame header { display: flex; justify-content: center; gap: 7px; font: 600 12px Georgia, serif; }
.target-frame header span { color: #d5b56d; font: 700 8px "Segoe UI", sans-serif; text-transform: uppercase; }
.target-frame__track { height: 6px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.65); }
.target-frame__track span { display: block; height: 100%; background: linear-gradient(90deg, #7f302e, #c85d45); transition: width 160ms ease; }
.target-frame__cast { margin-top: 5px; }
.target-frame__cast header { justify-content: space-between; color: #f3dda0; font-size: 9px; }
.target-frame__cast header span { color: #f0c65f; }
.target-frame__cast-track { height: 5px; margin-top: 2px; overflow: hidden; border: 1px solid rgba(245, 208, 105, .28); border-radius: 3px; background: rgba(0, 0, 0, .72); }
.target-frame__cast-track span { display: block; height: 100%; background: linear-gradient(90deg, #b77822, #f1d36e); transition: width 80ms linear; }
.target-frame__cast--locked header { color: #c5c8cc; }
.target-frame__cast--locked header span { color: #9da3aa; }
.target-frame__cast--locked .target-frame__cast-track span { background: linear-gradient(90deg, #666b72, #a8adb3); }
.target-frame small { color: #d6c4b7; font-size: 7px; }
.target-frame--friendly { border-color: rgba(93, 190, 119, .88); background: linear-gradient(180deg, rgba(14, 43, 29, .94), rgba(5, 18, 12, .92)); }
.target-frame--friendly header span { color: #8ed9a2; }
.target-frame--friendly .target-frame__track span { background: linear-gradient(90deg, #368b50, #78d493); }

.threat-widget {
  position: absolute;
  z-index: 8;
  width: 156px;
  overflow: hidden;
  border: 1px solid rgba(209,117,89,.42);
  border-radius: 5px 5px 9px 9px;
  background: rgba(15,10,8,.9);
  box-shadow: 0 6px 18px rgba(0,0,0,.38);
  color: #e5d7c3;
  pointer-events: auto;
  scale: var(--game-ui-scale, 1);
  transform: translate(-50%, -50%);
  transform-origin: center;
  user-select: none;
}
.threat-widget.is-dragging { border-color: rgba(236,198,99,.72); box-shadow: 0 8px 22px rgba(0,0,0,.48), 0 0 0 1px rgba(236,198,99,.14); }
.threat-widget__drag-handle {
  display: grid;
  width: 100%;
  min-height: 17px;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 0;
  border-bottom: 1px solid rgba(213,181,109,.16);
  background: linear-gradient(90deg, rgba(74,35,27,.82), rgba(32,22,16,.82));
  color: inherit;
  cursor: grab;
  touch-action: none;
}
.threat-widget.is-dragging .threat-widget__drag-handle { cursor: grabbing; }
.threat-widget__drag-handle:focus-visible { outline: 1px solid #e9c65e; outline-offset: -2px; }
.threat-widget__drag-handle strong { color: #e8d4a5; font: 700 7px Georgia, serif; text-transform: uppercase; }
.threat-widget__drag-handle span { overflow: hidden; color: #b8a995; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.threat-widget__drag-handle > i { color: #b6a782; font-size: 10px; font-style: normal; line-height: 1; }
.threat-widget__victim {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 5px;
  color: #9f907b;
  font-size: 5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.threat-widget__victim b { overflow: hidden; color: #e4c982; font-size: 6px; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.threat-widget__rows { padding: 0 3px 3px; }
.threat-widget__row { margin-top: 1px; padding: 1px 2px; border: 1px solid transparent; border-radius: 2px; }
.threat-widget__row.is-target { border-color: rgba(221,91,68,.48); background: rgba(118,35,27,.18); }
.threat-widget__row.is-forced { border-color: rgba(233,189,78,.62); }
.threat-widget__row > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 5px; line-height: 6px; }
.threat-widget__row > span b { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.threat-widget__row > span i { color: #a99a86; font-style: normal; font-weight: 800; }
.threat-widget__row.is-forced > span i { color: #f2cb63; }
.threat-widget__row > em { display: block; height: 2px; margin-top: 1px; overflow: hidden; border-radius: 2px; background: rgba(0,0,0,.64); }
.threat-widget__row > em > i { display: block; height: 100%; background: #a05b4b; }
.threat-widget__row--tank > em > i { background: #6188b4; }
.threat-widget__row--healer > em > i { background: #6cae72; }
.threat-widget__row--damage > em > i { background: #b66750; }

.game-panel-backdrop { padding: 14px; }
.game-panel {
  width: min(780px, 100%);
  max-height: min(610px, 100%);
  overflow: auto;
  padding: clamp(17px, 3vw, 25px);
  border: 1px solid rgba(190, 211, 157, .25);
  border-radius: 17px 6px 17px 6px;
  background: linear-gradient(145deg, rgba(13,30,22,.99), rgba(5,14,10,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 0 46px rgba(93,128,74,.06);
}
.game-panel__header { display: flex; align-items: center; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid rgba(193,211,160,.14); }
.game-panel__header > div:first-child { flex: 1; }
.game-panel__header .eyebrow { margin-bottom: 3px; }
.game-panel h2 { margin: 0; font: 400 clamp(22px, 4vw, 31px) Georgia, serif; }
.game-panel h3 { margin: 5px 0 9px; font: 500 21px Georgia, serif; }
.game-panel__footer { display: flex; justify-content: flex-end; gap: 18px; padding-top: 9px; color: var(--muted); font-size: 9px; }
.game-panel__empty { color: var(--muted); text-align: center; }
.boss-guide-panel {
  --guide-gold: #ddc77d;
  --guide-line: rgba(193, 211, 160, .14);
  display: grid;
  width: min(1180px, 100%);
  max-height: calc(100vh - 28px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.boss-guide-panel__header > p {
  display: flex;
  max-width: 180px;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  color: var(--muted);
  text-align: right;
}
.boss-guide-panel__header > p strong { color: var(--guide-gold); font: 20px Georgia, serif; }
.boss-guide-panel__header > p span { font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.boss-guide-panel__layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(165px, .65fr) minmax(190px, .75fr) minmax(360px, 2fr);
  gap: 11px;
  padding-top: 12px;
}
.boss-guide-panel__layout nav, .boss-guide-panel__details {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--guide-line);
  border-radius: 10px 4px 10px 4px;
  background: rgba(2, 9, 6, .42);
}
.boss-guide-panel__layout nav { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.boss-guide-panel__layout nav h3 {
  margin: 0;
  padding: 9px 10px 7px;
  border-bottom: 1px solid var(--guide-line);
  color: #b9c6aa;
  font: 700 8px "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.boss-guide-panel__layout nav > div { padding: 5px; overflow: auto; scrollbar-width: thin; }
.boss-guide-panel__layout nav button {
  width: 100%;
  min-height: 39px;
  margin-bottom: 4px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px 2px 6px 2px;
  background: rgba(151, 181, 121, .045);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.boss-guide-panel__layout nav button:hover,
.boss-guide-panel__layout nav button.is-active {
  border-color: rgba(200, 222, 151, .25);
  background: linear-gradient(100deg, rgba(93, 135, 70, .22), rgba(255, 255, 255, .025));
}
.boss-guide-panel__layout nav button strong,
.boss-guide-panel__layout nav button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-guide-panel__layout nav button strong { font: 12px Georgia, serif; }
.boss-guide-panel__layout nav button small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.boss-guide-panel__bosses button { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 6px; }
.boss-guide-panel__bosses button > b { color: var(--guide-gold); font: 15px Georgia, serif; }
.boss-guide-panel__bosses button > span { min-width: 0; }
.boss-guide-panel__empty { margin: 8px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.boss-guide-panel__details { padding: 13px; overflow-y: auto; scrollbar-width: thin; }
.boss-guide-panel__details > header { margin-bottom: 11px; }
.boss-guide-panel__details > header .eyebrow { margin: 0 0 3px; }
.boss-guide-panel__details > header h3 { margin: 0; color: #f1e8c6; font-size: clamp(20px, 2.5vw, 27px); }
.boss-guide-panel__details > header > p:last-child { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.boss-guide-mechanics { display: grid; margin: 0; padding: 0; gap: 9px; list-style: none; }
.boss-guide-mechanic {
  padding: 10px;
  border: 1px solid rgba(192, 207, 164, .13);
  border-left: 3px solid #879c72;
  border-radius: 7px 3px 7px 3px;
  background: rgba(151, 181, 121, .045);
}
.boss-guide-mechanic--source { border-left-color: #83b56d; }
.boss-guide-mechanic--fallback { border-left-color: #d69458; }
.boss-guide-mechanic--authored { border-left-color: #7897b7; }
.boss-guide-mechanic > header { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.boss-guide-mechanic > header > b { color: var(--guide-gold); font: 16px Georgia, serif; }
.boss-guide-mechanic h4 { margin: 0; font: 15px Georgia, serif; }
.boss-guide-mechanic > header > span {
  padding: 3px 6px;
  border: 1px solid rgba(131, 181, 109, .28);
  border-radius: 999px;
  color: #b9dda5;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.boss-guide-mechanic--fallback > header > span { border-color: rgba(214, 148, 88, .38); color: #ebbd88; }
.boss-guide-mechanic--authored > header > span { border-color: rgba(120, 151, 183, .38); color: #afc9df; }
.boss-guide-mechanic dl { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 0; gap: 1px 13px; }
.boss-guide-mechanic dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .055); }
.boss-guide-mechanic dt { color: #a9b59d; font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.boss-guide-mechanic dd { margin: 0; color: #d5dacd; font-size: 8px; line-height: 1.35; }
.boss-guide-mechanic__response { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.boss-guide-mechanic__response p { margin: 0; padding: 7px 8px; border-radius: 5px; background: rgba(0, 0, 0, .2); color: #c5cdbf; font-size: 8px; line-height: 1.45; }
.boss-guide-mechanic__response strong { display: block; margin-bottom: 2px; color: var(--guide-gold); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.boss-guide-panel__no-specials { margin: 30px auto; max-width: 390px; padding: 22px; border: 1px dashed rgba(211, 195, 142, .2); border-radius: 9px; color: var(--muted); text-align: center; }
.boss-guide-panel__no-specials strong { color: var(--guide-gold); font: 18px Georgia, serif; }
.boss-guide-panel__no-specials p { margin: 7px 0 0; font-size: 9px; line-height: 1.5; }
.spellbook-panel__progress { display: grid; grid-template-columns: auto auto 1px auto auto; align-items: baseline; gap: 4px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.spellbook-panel__progress strong { color: #e7d491; font: 700 14px Georgia, serif; }
.spellbook-panel__progress i { width: 1px; height: 19px; margin: 0 5px; background: rgba(216,226,194,.15); }
.spellbook-panel__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.spellbook-panel__filter { display: flex; min-height: 28px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(190,210,157,.17); border-radius: 999px; background: rgba(152,181,122,.05); color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.spellbook-panel__filter:hover { border-color: rgba(190,210,157,.32); background: rgba(152,181,122,.11); color: var(--ink); }
.spellbook-panel__filter > span { position: relative; width: 22px; height: 12px; border: 1px solid rgba(190,210,157,.26); border-radius: 999px; background: rgba(0,0,0,.26); }
.spellbook-panel__filter > span::after { position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #899080; content: ""; transition: transform 120ms ease, background 120ms ease; }
.spellbook-panel__filter.is-active { border-color: rgba(137,190,102,.38); background: rgba(137,190,102,.1); color: #c8dfa9; }
.spellbook-panel__filter.is-active > span::after { background: #acd584; transform: translateX(10px); }
.spellbook-panel__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: 14px; margin-top: 8px; }
.spellbook-panel__list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 7px; }
.spellbook-ability { display: grid; min-width: 0; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 57px; padding: 7px; border: 1px solid rgba(190,210,157,.13); border-radius: 7px; background: rgba(152,181,122,.05); color: var(--ink); text-align: left; cursor: pointer; }
.spellbook-ability:hover:not(.spellbook-ability--locked) { background: rgba(152,181,122,.13); }
.spellbook-ability > span:nth-child(2) { min-width: 0; }
.spellbook-ability strong, .spellbook-ability small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spellbook-ability strong { font-size: 11px; }
.spellbook-ability small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.spellbook-ability > em { align-self: start; padding: 3px 5px; border: 1px solid rgba(175,183,172,.2); border-radius: 999px; background: rgba(0,0,0,.22); color: #aeb5ad; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.spellbook-ability > em.spellbook-ability__known { border-color: rgba(137,190,102,.2); color: #9cc882; }
.spellbook-ability--locked { border-color: rgba(171,178,174,.12); background: rgba(118,127,123,.045); color: #a9afaa; }
.spellbook-ability--locked:hover { border-color: rgba(211,195,142,.3); background: rgba(164,151,110,.08); }
.spellbook-ability--locked .spellbook-ability__icon { filter: grayscale(1) brightness(.58); }
.spellbook-ability--locked small { color: #c1ad75; }
.spellbook-ability__icon { --ability-color: #73965e; display: grid; width: 41px; height: 41px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ability-color) 70%, #ddd 15%); border-radius: 7px; background: radial-gradient(circle, color-mix(in srgb, var(--ability-color) 45%, #08120d), #08120d); color: #f1f0d8; }
.spellbook-ability__icon img { width: 100%; height: 100%; object-fit: cover; }
.spellbook-ability__icon b { font: 700 12px Georgia, serif; }
.spellbook-panel__details { min-width: 0; padding: 14px; border: 1px solid rgba(210,188,119,.18); border-radius: 10px; background: rgba(22,20,12,.4); }
.spellbook-panel__details > p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.45; }
.spellbook-panel__details dl { margin: 12px 0; }
.spellbook-panel__details dl div { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 9px; }
.spellbook-panel__details dd { margin: 0; color: #e6d293; }
.spellbook-panel__ranks { margin: 12px 0; }
.spellbook-panel__ranks h4 { margin: 0 0 7px; color: #d8c27d; font: 700 10px Georgia, serif; text-transform: uppercase; }
.spellbook-panel__ranks ol { display: grid; max-height: 190px; margin: 0; padding: 0; gap: 5px; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.spellbook-panel__ranks li { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; padding: 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 5px; background: rgba(0,0,0,.16); font-size: 8px; }
.spellbook-panel__ranks li.is-current { border-color: rgba(137,190,102,.38); background: rgba(137,190,102,.08); }
.spellbook-panel__ranks li > span { color: #d5c891; }
.spellbook-panel__ranks li > small { color: var(--muted); }
.spellbook-panel__ranks li > p { grid-column: 1 / -1; margin: 2px 0 0; color: #b8c0b5; font-size: 8px; line-height: 1.35; }

.talents-panel { width: min(1180px, 100%); max-height: calc(100vh - 28px); }
.talents-panel--loading .game-panel__empty { display: grid; min-height: min(360px, 55vh); place-items: center; margin: 0; }
.talents-panel__points { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; }
.talents-panel__points strong { color: #f0d477; font: 700 27px Georgia, serif; }
.talents-panel__points span { max-width: 55px; color: var(--muted); font-size: 8px; line-height: 1.1; text-transform: uppercase; }
.talents-panel__intro { margin: 9px 0; color: var(--muted); font-size: 10px; }
.talents-panel__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.talent-tree-tab { --talent-color: #76965e; display: grid; min-width: 0; min-height: 36px; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid rgba(193,211,160,.12); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
.talent-tree-tab.is-active { border-color: color-mix(in srgb, var(--talent-color) 55%, #d7dcbd 18%); background: color-mix(in srgb, var(--talent-color) 22%, rgba(7,17,12,.9)); }
.talent-tree-tab__icon, .talent-tree-board__icon, .talent-details__icon { display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.4); }
.talent-tree-tab__icon { width: 27px; height: 27px; border-radius: 50%; }
.talent-tree-tab__icon img, .talent-tree-board__icon img, .talent-details__icon img { width: 100%; height: 100%; object-fit: cover; }
.talent-tree-tab > span:last-child { min-width: 0; }
.talent-tree-tab strong, .talent-tree-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talent-tree-tab strong { font: 12px Georgia, serif; }
.talent-tree-tab small { margin-top: 1px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.talent-art-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #e9d89e; font: 700 8px Georgia, serif; text-shadow: 0 1px 3px #000; }
.talents-panel__workspace { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 245px; align-items: start; gap: 10px; }
.talents-panel__boards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 7px; }
.talent-tree-board { --talent-color: #76965e; min-width: 0; overflow: hidden; border: 1px solid rgba(188,205,161,.16); border-radius: 9px 4px 9px 4px; background: rgba(3,8,6,.88); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.talent-tree-board.is-active { border-color: color-mix(in srgb, var(--talent-color) 58%, #d8d9b0 15%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--talent-color) 24%, transparent), 0 8px 18px rgba(0,0,0,.33); }
.talent-tree-board__header { display: grid; min-height: 42px; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 7px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, color-mix(in srgb, var(--talent-color) 18%, rgba(5,13,9,.94)), rgba(3,8,6,.94)); }
.talent-tree-board__icon { width: 29px; height: 29px; border-radius: 50%; }
.talent-tree-board__header > span:nth-child(2) { min-width: 0; }
.talent-tree-board__header strong, .talent-tree-board__header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talent-tree-board__header strong { font: 13px Georgia, serif; }
.talent-tree-board__header small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.talent-tree-board__header b { color: #f2d378; font: 700 18px Georgia, serif; }
.talent-tree-board__canvas { position: relative; display: grid; width: 100%; max-width: 218px; aspect-ratio: 1 / 2; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(11, minmax(0, 1fr)); align-items: center; justify-items: center; margin: 0 auto; overflow: hidden; isolation: isolate; background-image: linear-gradient(rgba(2,7,4,.24), rgba(2,7,4,.5)), var(--talent-background); background-position: center; background-repeat: no-repeat; background-size: cover; }
.talents-panel--coa .talents-panel__points { grid-template-columns: auto auto auto auto; }
.talents-panel--coa .talents-panel__points span { max-width: 72px; }
.talents-panel--coa .talents-panel__tabs { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.talents-panel--coa .talents-panel__boards { grid-template-columns: minmax(0, 1fr); }
.talents-panel--coa .talent-tree-board { display: none; }
.talents-panel--coa .talent-tree-board.is-active { display: block; }
.talents-panel--coa .talent-tree-board__canvas { max-width: 760px; aspect-ratio: 11 / 10; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); background-image: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--talent-color) 16%, transparent), transparent 58%), linear-gradient(rgba(2,7,4,.34), rgba(2,7,4,.72)); }
.talent-tree-board__canvas::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 18%, transparent 82%, rgba(0,0,0,.14)); content: ""; pointer-events: none; }
.talent-tree-board__connectors { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.talent-tree-board__connectors line { stroke: rgba(12,13,10,.93); stroke-linecap: round; stroke-width: 6px; vector-effect: non-scaling-stroke; }
.talent-tree-board__connectors line.is-earned { stroke: #d7a842; filter: drop-shadow(0 0 2px rgba(246,206,89,.65)); }
.talent-node { position: relative; z-index: 1; display: grid; width: clamp(34px, 3.25vw, 40px); height: clamp(34px, 3.25vw, 40px); place-items: center; align-self: center; justify-self: center; padding: 0; overflow: visible; border: 2px solid #565b50; border-radius: 7px 3px 7px 3px; background: #101511; color: var(--ink); cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08); }
.talent-node > img { width: 100%; height: 100%; border-radius: 4px 1px 4px 1px; object-fit: cover; }
.talent-node:not(.is-learned).is-locked > img, .talent-node:not(.is-learned).is-locked > .talent-art-fallback { filter: grayscale(1) brightness(.34); }
.talent-node:not(.is-learned).is-unavailable > img, .talent-node:not(.is-learned).is-unavailable > .talent-art-fallback { filter: grayscale(.75) brightness(.58); }
.talent-node.is-learned { border-color: #78a956; box-shadow: 0 0 0 1px rgba(138,199,88,.28), 0 2px 6px #000; }
.talent-node.is-max { border-color: #e7bc4f; box-shadow: 0 0 0 1px rgba(255,220,100,.38), 0 0 8px rgba(218,168,50,.5), 0 2px 6px #000; }
.talent-node.is-inspected { transform: translateY(-1px); }
.talent-node.is-controller-selected, .talent-node:focus-visible { z-index: 3; }
.talent-node__rank { position: absolute; right: -5px; bottom: -5px; display: grid; min-width: 19px; height: 14px; place-items: center; padding: 0 3px; border: 1px solid rgba(210,217,192,.35); border-radius: 7px; background: rgba(2,5,3,.95); color: #d5d7ca; font-size: 7px; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px #000; }
.talent-node.is-learned .talent-node__rank { color: #bce58f; }
.talent-node.is-max .talent-node__rank { border-color: #c99d3a; color: #ffe393; }
.talent-details { position: sticky; top: 0; min-height: 250px; padding: 12px; border: 1px solid rgba(191,211,158,.15); border-radius: 9px 4px 9px 4px; background: linear-gradient(145deg, rgba(18,34,25,.96), rgba(4,11,8,.96)); box-shadow: inset 0 0 24px rgba(107,147,78,.05); }
.talent-details__heading { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
.talent-details__icon { width: 44px; height: 44px; border-color: rgba(227,194,102,.35); border-radius: 8px 3px 8px 3px; }
.talent-details__heading small { color: #c6aa62; font-size: 7px; text-transform: uppercase; }
.talent-details h3 { margin: 3px 0 0; font-size: 17px; line-height: 1.05; }
.talent-details > p { margin: 11px 0; color: #d2d7c9; font-size: 9px; line-height: 1.5; }
.talent-details__rank { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.talent-details__rank i { width: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.talent-details__rank i.is-filled { background: #d5ab4e; box-shadow: 0 0 3px rgba(226,184,75,.45); }
.talent-details__rank strong { margin-left: auto; color: #f2d273; font-size: 9px; }
.talent-details__requirements { display: grid; gap: 4px; margin: 10px 0; padding: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(0,0,0,.2); }
.talent-details__requirements small { color: var(--muted); font-size: 6px; letter-spacing: .12em; text-transform: uppercase; }
.talent-details__requirements span { color: #d17d70; font-size: 8px; }
.talent-details__requirements span::before { margin-right: 4px; content: "○"; }
.talent-details__requirements span.is-met { color: #a9d47f; }
.talent-details__requirements span.is-met::before { content: "✓"; }
.talent-details__status { display: block; margin-top: 10px; color: #d9907d; font-size: 8px; line-height: 1.35; }
.talent-details__status.is-ready { color: #b7dc83; }
.talent-details__status.is-max { color: #f0cb66; }
.talents-panel__summary { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 10px; }
.talents-panel__summary strong { color: var(--ink); }
.talents-panel__footer { padding-top: 6px; }

.options-panel { width: min(670px, 100%); }
.options-panel__list { margin-top: 10px; }
.option-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 42px; padding: 6px 2px; border-bottom: 1px solid rgba(198,214,170,.09); }
.option-row > span { min-width: 0; }
.option-row > span strong, .option-row > span small { display: block; overflow-wrap: anywhere; }
.option-row > span strong { font-size: 11px; }
.option-row > span small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.option-row button { min-width: 68px; min-height: 29px; border: 1px solid rgba(191,209,159,.18); border-radius: 7px; background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; }
.option-row button.is-on { border-color: rgba(171,213,127,.35); background: rgba(109,155,79,.3); color: #effbdc; }
.option-stepper { display: grid; grid-template-columns: 30px 52px 30px; align-items: center; gap: 4px; }
.option-stepper button { min-width: 30px; }
.option-stepper output { font-size: 10px; text-align: center; }
.options-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.options-panel__section-title { margin: 13px 0 3px; color: #f0d477; font: 700 13px Georgia, serif; letter-spacing: .04em; }
.options-panel__combat-group { display: contents; }
.option-audio-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.ability-bindings-panel { width: min(980px, 100%); max-height: calc(100vh - 28px); }
.ability-bindings__layouts { display: flex; gap: 6px; margin-top: 10px; }
.ability-bindings__layouts button { flex: 1; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(193,211,160,.18); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; }
.ability-bindings__layouts button.is-active { border-color: rgba(196,221,144,.4); background: rgba(103,148,78,.25); }
.ability-bindings__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.ability-bindings__bars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ability-bindings__wow { display: flex; min-width: 0; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid rgba(190,210,157,.14); border-radius: 12px; background: rgba(4,12,8,.58); }
.ability-bindings__wow-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ability-bindings__wow-slots .ability-binding-slot { min-height: 76px; }
.ability-bindings__wow-slots .ability-binding-slot strong { font-size: 10px; }
.ability-bindings__wow-slots .ability-binding-slot small { font-size: 8px; }
.ability-bindings__wow-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.ability-bindings__wow .ability-bindings__restore { margin-top: auto; }
.ability-bindings__wow + .ability-bindings__picker .ability-bindings__choices { max-height: min(280px, 36vh); overflow: auto; padding: 2px; }
.ability-bindings__layers button { display: grid; min-width: 0; min-height: 42px; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(193,211,160,.13); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
.ability-bindings__layers button.is-active { border-color: rgba(196,221,144,.4); background: rgba(103,148,78,.25); }
.ability-bindings__layers kbd { display: grid; width: 29px; height: 27px; place-items: center; border: 1px solid rgba(229,210,138,.24); border-radius: 7px; background: rgba(0,0,0,.28); color: #ecd98c; }
.ability-bindings__layers strong, .ability-bindings__layers small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ability-bindings__layers strong { font-size: 10px; }
.ability-bindings__layers small { margin-top: 1px; color: var(--muted); font-size: 7px; }
.ability-bindings__layout { display: grid; min-height: 350px; grid-template-columns: minmax(500px, 1fr) minmax(225px, 270px); gap: 12px; }
.ability-bindings__diagram { display: grid; min-width: 0; grid-template-columns: minmax(185px, .8fr) minmax(285px, 1.2fr); grid-template-rows: auto 1fr auto; align-items: center; gap: 5px 10px; padding: 11px; border: 1px solid rgba(190,210,157,.14); border-radius: 36px 36px 15px 15px; background: radial-gradient(circle at 66% 54%, rgba(103,141,79,.09), transparent 36%), rgba(4,12,8,.58); }
.ability-bindings__shoulders { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 112px)); justify-content: center; gap: 7px; }
.ability-bindings__dpad { grid-column: 1; display: grid; grid-template-columns: minmax(0, 96px) 24px minmax(0, 96px); align-items: center; justify-content: center; }
.ability-bindings__dpad > span { color: rgba(219,230,200,.35); font: 700 21px Georgia, serif; text-align: center; }
.ability-bindings__face { grid-column: 2; display: grid; width: min(100%, 318px); min-height: 210px; grid-template: repeat(3, 66px) / repeat(3, minmax(88px, 102px)); justify-content: center; gap: 5px; margin: 0 auto; }
.ability-bindings__face .ability-binding-slot--face-top { grid-area: 1 / 2; }
.ability-bindings__face .ability-binding-slot--face-right { grid-area: 2 / 3; }
.ability-bindings__face .ability-binding-slot--face-bottom { grid-area: 3 / 2; }
.ability-bindings__face .ability-binding-slot--face-left { grid-area: 2 / 1; }
.ability-binding-slot { position: relative; display: grid; min-width: 0; min-height: 62px; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 5px; padding: 5px; border: 1px solid rgba(194,214,165,.16); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--ink); cursor: pointer; text-align: left; }
.ability-binding-slot:hover, .ability-binding-slot.is-editing { border-color: rgba(210,226,174,.42); background: rgba(113,153,87,.16); }
.ability-binding-slot.is-locked { filter: grayscale(.9); opacity: .62; }
.ability-binding-slot > kbd { position: absolute; align-self: start; justify-self: start; z-index: 2; min-width: 15px; padding: 1px 3px; border-radius: 4px; background: rgba(0,0,0,.78); color: #f0d989; font-size: 7px; text-align: center; }
.ability-binding-slot > span:last-child { min-width: 0; }
.ability-binding-slot strong, .ability-binding-slot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ability-binding-slot strong { font-size: 8px; }
.ability-binding-slot small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.ability-bindings__icon { --ability-color: #789b68; display: grid; width: 30px; height: 30px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ability-color) 65%, white 14%); border-radius: 7px; background: color-mix(in srgb, var(--ability-color) 20%, #08120d); font: 700 8px Georgia, serif; }
.ability-bindings__icon img { width: 100%; height: 100%; object-fit: cover; }
.ability-bindings__empty { display: grid; width: 30px; height: 30px; place-items: center; border: 1px dashed rgba(201,216,177,.2); border-radius: 7px; color: #86917f; font-size: 13px; }
.ability-bindings__restore { grid-column: 1 / 3; display: flex; justify-content: flex-end; gap: 6px; }
.ability-bindings__restore button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(198,215,169,.15); border-radius: 6px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; font-size: 7px; }
.ability-bindings__picker { min-width: 0; padding: 13px; border: 1px solid rgba(210,188,119,.16); border-radius: 10px; background: rgba(22,20,12,.34); }
.ability-bindings__picker > p:not(.eyebrow) { color: var(--muted); font-size: 10px; line-height: 1.5; }
.ability-bindings__notice { padding: 8px; border-left: 2px solid rgba(196,220,139,.46); background: rgba(105,143,76,.08); color: #dce9c9 !important; }
.ability-bindings__choices { display: grid; gap: 6px; }
.ability-bindings__choices button { display: grid; width: 100%; min-height: 47px; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(194,213,164,.13); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
.ability-bindings__choices button:hover { background: rgba(138,171,104,.1); }
.ability-bindings__choices button.is-current { border-color: rgba(151,199,108,.34); background: rgba(101,151,72,.12); }
.spellbook-ability.is-missing-from-bars, .ability-bindings__choices button.is-missing-from-bars { border-color: #92d5ff; box-shadow: inset 0 0 0 1px rgba(146,213,255,.22), 0 0 6px rgba(146,213,255,.13); }
.is-missing-from-bars :is(.spellbook-ability__icon, .ability-bindings__icon) { border-color: #92d5ff; }
.action-bar-missing-legend, .ability-bindings__picker > p.action-bar-missing-legend { color: #92d5ff; font-size: 9px; line-height: 1.4; }
.ability-bindings__choices button.is-locked { filter: grayscale(.85); opacity: .65; }
.ability-bindings__choices button.is-danger { border-color: rgba(202,111,87,.32); background: rgba(138,48,34,.14); }
.ability-bindings__choices button > span:last-child { min-width: 0; }
.ability-bindings__choices strong, .ability-bindings__choices small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ability-bindings__choices strong { font-size: 9px; }
.ability-bindings__choices small { margin-top: 2px; color: var(--muted); font-size: 7px; text-transform: capitalize; }
.ability-bindings__confirm-warning { padding: 9px; border: 1px solid rgba(202,111,87,.18); border-radius: 7px; background: rgba(112,39,30,.1); color: #dbc6ba !important; }
.ability-bindings__choices--confirm { grid-template-columns: 1fr 1fr; }

.party-management-panel { display: flex; width: min(920px, 100%); max-height: min(650px, 100%); flex-direction: column; overflow: hidden; }
.party-management__layout { display: grid; min-height: 0; flex: 1; grid-template-columns: 205px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.party-management__roster { min-height: 0; padding-right: 3px; overflow: auto; }
.party-management__roster > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 0 3px; color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.party-management__roster > header strong { color: #dce7d1; }
.party-management__member { display: grid; width: 100%; min-height: 66px; grid-template-columns: 37px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 5px; padding: 7px; border: 1px solid rgba(190,214,157,.13); border-radius: 8px 3px 8px 3px; background: rgba(255,255,255,.025); color: var(--ink); cursor: pointer; text-align: left; }
.party-management__member:hover, .party-management__member:focus-visible { border-color: rgba(213,229,176,.38); }
.party-management__member.is-active { border-color: color-mix(in srgb, var(--party-class-color) 58%, #dfcc83); background: linear-gradient(110deg, color-mix(in srgb, var(--party-class-color) 17%, #0b1811), rgba(13,30,21,.82)); }
.party-management__member.is-down { filter: grayscale(.72); opacity: .62; }
.party-management__member-sigil { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--party-class-color) 72%, white 12%); border-radius: 50% 44% 50% 43%; background: color-mix(in srgb, var(--party-class-color) 20%, #07110d); color: #f2f6ec; font-size: 8px; font-weight: 800; }
.party-management__member > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.party-management__member strong, .party-management__member small, .party-management__member em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-management__member strong { font: 600 12px Georgia, serif; }
.party-management__member small { margin-top: 2px; color: #b8c5ad; font-size: 7px; }
.party-management__member em { margin-top: 4px; color: color-mix(in srgb, var(--party-class-color) 62%, #d9e5cf); font-size: 7px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.party-management__details { min-height: 0; padding-right: 4px; overflow: auto; }
.party-management__profile { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(145px, .7fr); align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(190,214,157,.15); border-radius: 11px 4px 11px 4px; background: linear-gradient(115deg, color-mix(in srgb, var(--party-class-color) 10%, #0b1912), rgba(6,16,11,.88)); }
.party-management__portrait { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid color-mix(in srgb, var(--party-class-color) 74%, #dbd094); border-radius: 50% 43% 49% 42%; background: color-mix(in srgb, var(--party-class-color) 22%, #06100c); color: #f1f5e9; font: 700 15px Georgia, serif; }
.party-management__profile h3 { margin: 1px 0; font: 500 21px Georgia, serif; }
.party-management__profile p, .party-management__profile small { margin: 0; color: var(--muted); font-size: 8px; }
.party-management__health > span { display: flex; justify-content: space-between; gap: 8px; color: #dce8d3; font-size: 8px; }
.party-management__health > span small { color: #b8c8ad; }
.party-management__health > i { display: block; height: 8px; margin-top: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(0,0,0,.62); }
.party-management__health > i > b { display: block; height: 100%; background: linear-gradient(90deg, #3e793e, #79b958); }
.party-management__orders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: center; gap: 13px; margin: 9px 0; padding: 9px 11px; border: 1px solid rgba(220,190,91,.18); border-radius: 7px; background: rgba(75,60,22,.11); }
.party-management__orders > span { min-width: 0; }
.party-management__orders small, .party-management__orders strong { display: block; }
.party-management__orders small { color: #c9b66f; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.party-management__orders strong { margin-top: 1px; font: 500 15px Georgia, serif; }
.party-management__orders p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.party-command-bar--management button { min-height: 35px; padding: 5px 7px; }
.party-command-bar--management strong { font-size: 8px; }
.party-command-bar--management kbd { font-size: 7px; }
.party-management__talents { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.party-management__talent-column { min-width: 0; padding: 8px; border: 1px solid rgba(190,214,157,.12); border-radius: 8px; background: rgba(255,255,255,.018); }
.party-management__talent-column--next { border-color: rgba(220,190,91,.2); background: rgba(112,86,25,.055); }
.party-management__talent-column > header { display: flex; min-height: 34px; align-items: start; justify-content: space-between; gap: 9px; padding: 0 2px 7px; border-bottom: 1px solid rgba(193,211,160,.1); }
.party-management__talent-column > header span small, .party-management__talent-column > header span strong { display: block; }
.party-management__talent-column > header span small { color: var(--muted); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.party-management__talent-column > header span strong { margin-top: 2px; font: 500 13px Georgia, serif; }
.party-management__talent-column > header > b { color: #d7c17a; font-size: 7px; white-space: nowrap; }
.party-management__talent-list { display: grid; max-height: 230px; gap: 5px; margin-top: 7px; padding-right: 2px; overflow: auto; }
.party-talent-card { display: grid; min-width: 0; grid-template-columns: 37px minmax(0, 1fr); gap: 7px; padding: 6px; border: 1px solid rgba(192,211,162,.1); border-radius: 6px; background: rgba(3,10,7,.38); }
.party-talent-card--upcoming { border-color: rgba(220,190,91,.17); background: rgba(96,76,25,.12); }
.party-talent-card__icon { display: block; width: 36px; height: 36px; overflow: hidden; border: 1px solid rgba(219,203,138,.28); border-radius: 6px 2px 6px 2px; background: #07100c; }
.party-talent-card__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.party-talent-card__body { min-width: 0; }
.party-talent-card__heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 6px; }
.party-talent-card__heading strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.party-talent-card__heading b { flex: 0 0 auto; color: #d6bf76; font-size: 6px; text-transform: uppercase; }
.party-talent-card__body > small { color: #9fb094; font-size: 7px; }
.party-talent-card__body p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: #bdc9b5; font-size: 7px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.party-talent-card--upcoming .party-talent-card__body p { -webkit-line-clamp: 3; }
.party-management__empty-talents { margin: 7px 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }

@media (max-width: 680px) {
  .party-management-panel { padding: 14px; overflow: auto; }
  .party-management__layout { display: block; }
  .party-management__roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0; overflow: visible; }
  .party-management__roster > header { grid-column: 1 / -1; margin-bottom: 0; }
  .party-management__member { min-height: 54px; margin: 0; grid-template-columns: 31px minmax(0, 1fr); padding: 5px; }
  .party-management__member-sigil { width: 30px; height: 30px; }
  .party-management__member em { display: none; }
  .party-management__details { margin-top: 9px; padding: 0; overflow: visible; }
  .party-management__profile { grid-template-columns: 50px minmax(0, 1fr); }
  .party-management__portrait { width: 46px; height: 46px; }
  .party-management__health { grid-column: 1 / 3; }
  .party-management__orders { grid-template-columns: 1fr; }
  .party-management__talents { grid-template-columns: 1fr; }
  .party-management__talent-list { max-height: none; }
}

@media (pointer: coarse) {
  .party-command-bar button { min-height: 44px; }
}

@media (max-width: 760px) {
  .player-frame { width: 225px; grid-template-columns: 48px 1fr; }
  .player-frame__portrait { height: 48px; }
  .party-frames { width: 194px; }
  .hud-top-right { width: 124px; }
  .hud-minimap__map { width: 108px; height: 108px; }
  .spellbook-panel__layout { grid-template-columns: 1fr; }
  .spellbook-panel__details { display: none; }
  .talents-panel__workspace { grid-template-columns: minmax(250px, 1fr) minmax(190px, 235px); }
  .talents-panel__boards { display: block; }
  .talent-tree-board { display: none; max-width: 270px; margin: 0 auto; }
  .talent-tree-board.is-active { display: block; }
  .talent-tree-board__canvas { max-width: 210px; }
  .ability-bindings__layout { display: block; min-height: 0; }
  .ability-bindings__diagram { min-height: 320px; grid-template-columns: minmax(150px, .7fr) minmax(260px, 1.3fr); }
  .ability-bindings__picker { margin-top: 8px; }
  .ability-bindings__picker > p:not(.eyebrow) { margin-bottom: 0; }
  .ability-bindings-panel .game-panel__footer { flex-wrap: wrap; gap: 5px 12px; }
  .boss-guide-panel__header > p { display: none; }
  .boss-guide-panel__layout { grid-template-columns: minmax(135px, .65fr) minmax(155px, .75fr) minmax(270px, 1.6fr); gap: 7px; }
  .boss-guide-mechanic dl, .boss-guide-mechanic__response { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .boss-loot-window {
    top: auto;
    right: 10px;
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 66px));
    width: calc(100vw - 20px);
    transform: none;
  }
  .boss-loot-window__items { max-height: min(160px, 30vh); }
  @keyframes boss-loot-arrive {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .player-frame { width: 205px; }
  .player-frame__body header span { display: none; }
  .party-frames { width: 176px; }
  .party-frame { min-height: 34px; grid-template-columns: 25px minmax(0,1fr); padding: 3px 4px; }
  .party-frame__sigil { width: 23px; height: 23px; }
  .party-frame__identity small { display: none; }
  .hud-top-right { right: 7px; width: 94px; }
  .hud-minimap__map { width: 86px; height: 86px; }
  .hud-minimap__caption { display: none; }
  .player-status-panel__section { padding: 3px; }
  .player-status-tooltip { width: min(220px, 68vw); }
  .encounter-timeline { width: 138px; justify-self: end; }
  .encounter-timeline__row:nth-child(n+4) { display: none; }
  .hud-bottom-stack > .action-bar { width: min(360px, calc(100vw - 18px)); }
  .hud-bottom-stack > .control-hint { max-width: min(360px, calc(100vw - 18px)); }
  .action-bar { --action-slot-size: 36px; width: calc(100vw - 12px); }
  .action-bar__controller { min-height: 112px; grid-template-columns: 90px 102px 112px; gap: 4px; padding: 4px; }
  .action-cluster--face { width: 112px; height: 112px; }
  .action-cluster--shoulders { grid-template-columns: repeat(2, 48px); gap: 3px; }
  .action-cluster--shoulders .action-slot { width: 48px; min-width: 48px; }
  .action-bar__detail { width: 94px; margin-bottom: 18px; }
  .target-frame { top: 91px; width: 190px; }
  .spellbook-panel__list { grid-template-columns: 1fr; }
  .options-panel .option-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .options-panel .option-audio-controls { grid-column: 1 / -1; width: 100%; justify-content: space-between; }
  .options-panel__actions { position: sticky; bottom: -1px; padding-top: 8px; background: linear-gradient(transparent, rgba(5,14,10,.99) 28%); }
  .talents-panel__workspace { grid-template-columns: minmax(0, 1fr); }
  .talent-tree-board { max-width: 250px; }
  .talent-tree-board__canvas { max-width: 202px; }
  .talent-details { position: relative; min-height: 0; }
  .talent-tree-tab { grid-template-columns: 1fr; justify-items: center; padding: 4px; text-align: center; }
  .talent-tree-tab__icon { display: none; }
  .talent-tree-tab strong { font-size: 10px; }
  .talent-node { width: 35px; height: 35px; }
  .talents-panel__footer { justify-content: space-between; gap: 5px; }
  .ability-bindings__layers button { grid-template-columns: 1fr; justify-items: center; padding: 4px; text-align: center; }
  .ability-bindings__layers kbd, .ability-bindings__layers small { display: none; }
  .ability-bindings__diagram { display: block; min-height: 0; padding: 8px; border-radius: 16px; }
  .ability-bindings__wow-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ability-bindings__shoulders { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 7px; }
  .ability-bindings__dpad { display: grid; max-width: 230px; margin: 0 auto 7px; }
  .ability-bindings__face { transform: scale(.9); margin-block: -10px; }
  .ability-bindings__restore { margin-top: 2px; }
  .ability-bindings-panel .game-panel__footer span:nth-child(n+4) { display: none; }
  .boss-guide-panel { padding: 11px; }
  .boss-guide-panel__layout { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(86px, 28%) minmax(0, 1fr); }
  .boss-guide-panel__layout nav > div { display: flex; gap: 4px; overflow: auto; }
  .boss-guide-panel__layout nav button { min-width: 130px; margin: 0; }
  .boss-guide-panel__details { grid-column: 1 / -1; padding: 9px; }
  .boss-guide-panel__details > header { margin-bottom: 7px; }
  .boss-guide-mechanic { padding: 8px; }
  .boss-guide-mechanic > header { grid-template-columns: 18px minmax(0, 1fr); }
  .boss-guide-mechanic > header > span { grid-column: 2; justify-self: start; }
  .boss-guide-panel .game-panel__footer { justify-content: space-between; gap: 5px; }
  .boss-guide-panel .game-panel__footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .boss-loot-window { animation: none; }
  .party-frame__heal-popup { animation: none; opacity: 1; }
  .spellbook-panel__filter > span::after { transition: none; }
}

@media (max-height: 560px) {
  .player-frame { top: 7px; left: 7px; transform: scale(.88); transform-origin: top left; }
  .hud-top-right { top: 6px; right: 7px; transform: scale(.86); transform-origin: top right; }
  .hud-bottom-stack > .action-bar { width: min(360px, calc(100vw - 18px)); }
  .hud-bottom-stack > .control-hint { max-width: min(440px, calc(100vw - 18px)); }
  .action-bar { --action-slot-size: 36px; bottom: 19px; width: min(360px, calc(100vw - 18px)); }
  .action-bar__controller { min-height: 112px; grid-template-columns: 90px 102px 112px; gap: 4px; padding: 4px; }
  .action-cluster--face { width: 112px; height: 112px; }
  .action-cluster--shoulders { grid-template-columns: repeat(2, 48px); gap: 3px; }
  .action-cluster--shoulders .action-slot { width: 48px; min-width: 48px; }
  .action-bar__detail { width: 94px; margin-bottom: 18px; }
  .game-panel { max-height: calc(100vh - 18px); padding: 13px 15px; }
  .game-panel__header { padding-bottom: 7px; }
  .game-panel__footer { padding-top: 5px; }
  .spellbook-panel__layout { margin-top: 8px; }
  .spellbook-ability { min-height: 48px; }
  .spellbook-ability__icon { width: 34px; height: 34px; }
  .talents-panel__intro { margin: 7px 0; }
  .talents-panel__workspace { grid-template-columns: minmax(245px, 1fr) minmax(180px, 225px); }
  .talents-panel__boards { display: block; }
  .talent-tree-board { display: none; max-width: 252px; margin: 0 auto; }
  .talent-tree-board.is-active { display: block; }
  .talent-tree-board__canvas { max-width: 190px; }
  .talent-details { min-height: 0; padding: 9px; }
  .talent-details > p { margin: 7px 0; }
  .talent-details__requirements { margin: 6px 0; }
  .option-row { min-height: 34px; padding: 3px 2px; }
  .pause-menu:not(.pause-menu--hub) { width: min(560px, 100%); padding: 16px 20px; }
  .pause-menu:not(.pause-menu--hub) .pause-menu__actions { grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 9px 0; }
  .pause-menu:not(.pause-menu--hub) .pause-menu__actions .button { min-height: 34px; }
  .pause-menu--hub { padding: 14px 16px; }
  .pause-menu--hub .pause-menu__actions { gap: 6px; }
  .pause-menu--hub .pause-menu__group { padding: 9px; }
  .pause-menu--hub .pause-menu__group h3 { margin-bottom: 6px; }
  .pause-menu--hub .pause-menu__resume { margin: 9px 0; }
  .boss-guide-panel__layout { padding-top: 7px; }
  .boss-guide-panel__layout nav h3 { padding: 5px 8px; }
  .boss-guide-panel__layout nav button { min-height: 33px; padding: 4px 6px; }
  .boss-guide-panel__details { padding: 8px; }
  .boss-guide-mechanic dl { margin: 5px 0; }
}

@media (max-width: 520px) and (max-height: 560px) {
  .talents-panel__workspace { grid-template-columns: minmax(0, 1fr); }
  .talent-tree-board { max-width: 236px; }
  .talent-tree-board__canvas { max-width: 184px; }
}

/* Healer Man front end and AYN Thor display routing */
:root {
  --thor-main-css-width: 960px;
  --thor-main-css-height: 540px;
  --thor-bottom-css-width: 620px;
  --thor-bottom-css-height: 540px;
  --front-cream: #f2edd9;
  --front-dim: #a8b3a5;
  --front-green: #8cbf78;
  --front-green-bright: #c8e28d;
  --front-gold: #d8ae57;
  --front-red: #a94d43;
  --front-line: rgba(204, 224, 180, 0.18);
  --front-panel: rgba(8, 20, 15, 0.92);
}

button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, .is-controller-selected {
  outline: 2px solid var(--front-green-bright) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(160, 203, 116, 0.16) !important;
}

.single-display-frame,
.single-primary-surface,
.dedicated-display-surface,
.bottom-display-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.single-context-layer {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.single-context-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 5, 3, 0.76);
  backdrop-filter: blur(10px);
}
.single-context-surface {
  position: relative;
  z-index: 1;
  width: min(var(--thor-bottom-css-width), 100%);
  height: min(var(--thor-bottom-css-height), 100%);
  overflow: hidden;
  border: 1px solid rgba(200, 225, 166, 0.28);
  border-radius: 18px;
  background: #07110d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68);
}
.single-context-toggle {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 110;
  display: flex;
  min-width: 116px;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid rgba(202, 223, 170, 0.25);
  border-radius: 10px;
  background: rgba(8, 21, 15, 0.9);
  color: var(--front-cream);
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.38);
}
.single-context-toggle b { font-size: 0.72rem; }
.single-context-toggle small { color: var(--front-green-bright); font-size: 0.56rem; }
.context-open .single-context-toggle { right: calc(50% - min(310px, 50%) + 12px); }

.thor-preview-frame {
  width: 1040px;
  min-height: 1240px;
  margin: 0 auto;
  padding: 24px 40px 52px;
  background: #020504;
}
.thor-preview-label { display: flex; width: 960px; justify-content: space-between; padding: 8px 2px; color: var(--front-dim); font-size: 12px; }
.thor-preview-label b { color: var(--front-cream); }
.thor-preview-top { width: 960px; height: 540px; overflow: hidden; border: 2px solid #243027; border-radius: 16px 16px 5px 5px; }
.thor-preview-bottom { width: 620px; height: 540px; margin: 0 auto; overflow: hidden; border: 2px solid #243027; border-radius: 5px 5px 16px 16px; }
.thor-preview-hinge { display: flex; width: 960px; height: 34px; align-items: center; gap: 18px; color: #637063; font-size: 10px; letter-spacing: 0.2em; }
.thor-preview-hinge i { height: 2px; flex: 1; background: #202a22; }
html[data-display-layout="thor-preview"], html[data-display-layout="thor-preview"] body, html[data-display-layout="thor-preview"] #root { overflow: auto; }

.front-surface {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--front-cream);
  background:
    radial-gradient(circle at 21% 35%, rgba(74, 128, 81, 0.22), transparent 31%),
    radial-gradient(circle at 76% 12%, rgba(182, 141, 69, 0.08), transparent 27%),
    linear-gradient(145deg, #07120e, #040a08 70%);
}
.front-surface--top { padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.front-surface--bottom { padding: max(12px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left)); }
.front-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.025) 49% 50%, transparent 51%),
    radial-gradient(circle, rgba(218, 231, 194, 0.16) 0 1px, transparent 1px);
  background-size: 87px 87px, 19px 19px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.front-brand { display: flex; align-items: center; gap: 11px; }
.front-brand .brand-sigil {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(195, 222, 151, 0.35);
  border-radius: 50% 43% 50% 45%;
  color: var(--front-green-bright);
  font-family: Georgia, serif;
  font-size: 24px;
  box-shadow: inset 0 0 16px rgba(125, 176, 99, 0.18);
}
.front-brand > span:last-child { display: flex; flex-direction: column; }
.front-brand small { color: var(--front-green-bright); font-size: 8px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.front-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; letter-spacing: 0.02em; }
.front-brand--compact { gap: 8px; }
.front-brand--compact .brand-sigil { width: 30px; height: 30px; font-size: 18px; }
.front-brand--compact small { font-size: 7px; }
.front-brand--compact strong { font-size: 16px; }
.front-kicker, .companion-kicker { margin: 0; color: var(--front-green-bright); font-size: 9px; font-weight: 800; letter-spacing: 0.19em; text-transform: uppercase; }
.controller-legend {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(11px, env(safe-area-inset-bottom));
  z-index: 8;
  display: flex;
  gap: 15px;
  color: #87968a;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.controller-legend b { color: var(--front-cream); }
.front-button {
  display: flex;
  min-height: 41px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--front-line);
  border-radius: 8px;
  background: rgba(168, 198, 143, 0.06);
  color: var(--front-cream);
  cursor: pointer;
  text-align: left;
}
.front-button:hover { background: rgba(168, 198, 143, 0.13); }
.front-button span, .front-button small { display: block; }
.front-button span { font-size: 12px; font-weight: 800; }
.front-button small { color: var(--front-dim); font-size: 8px; font-weight: 400; }
.front-button--primary { border-color: rgba(200, 226, 142, 0.42); background: linear-gradient(135deg, #5a7848, #405f3e); }
.front-button--primary:hover { background: linear-gradient(135deg, #678854, #4c7048); }
.front-button--quiet { border-color: transparent; background: rgba(255, 255, 255, 0.025); }
.front-button--danger { border-color: rgba(209, 103, 90, 0.35); background: rgba(148, 54, 44, 0.18); }
.front-button:disabled { cursor: not-allowed; filter: saturate(0.2); opacity: 0.45; }
.companion-readiness { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 12px; }
.companion-readiness__header { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--front-line); }
.companion-readiness__header > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.companion-readiness__header span { color: var(--front-dim); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.companion-readiness__header strong { font: 20px Georgia, serif; }
.companion-readiness__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.companion-readiness__intro p:last-child { max-width: 760px; margin: 5px 0 0; color: var(--front-dim); font-size: 10px; line-height: 1.5; }
.companion-readiness__totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.readiness-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--front-line); border-radius: 999px; font-size: 8px; font-style: normal; white-space: nowrap; }
.readiness-badge--ready { border-color: rgba(140,191,120,.5); background: rgba(79,129,65,.22); color: var(--front-green-bright); }
.readiness-badge--beta { border-color: rgba(216,174,87,.5); background: rgba(152,108,30,.2); color: #f0cb76; }
.readiness-badge--needs-testing { color: var(--front-dim); }
.companion-readiness__filters { display: grid; grid-template-columns: minmax(170px, 1fr) 150px 170px auto; gap: 8px; align-items: end; }
.companion-readiness__filters label { display: grid; gap: 3px; color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
.companion-readiness__filters input, .companion-readiness__filters select, .companion-readiness__spec select { min-height: 34px; padding: 6px 8px; border: 1px solid var(--front-line); border-radius: 6px; background: #0a1812; color: var(--front-cream); }
.companion-readiness__filters > small { padding-bottom: 9px; color: var(--front-dim); font-size: 8px; }
.companion-readiness__catalog { min-height: 0; padding-right: 5px; overflow: auto; scrollbar-gutter: stable; }
.companion-readiness__class { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid rgba(204,224,180,.1); }
.companion-readiness__class h2 { margin: 7px 0; font: 16px Georgia, serif; }
.companion-readiness__class > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.companion-readiness__spec { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--front-line); border-radius: 8px; background: rgba(255,255,255,.025); }
.companion-readiness__spec > div { min-width: 0; }
.companion-readiness__spec strong, .companion-readiness__spec small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.companion-readiness__spec strong { font-size: 10px; }
.companion-readiness__spec small { margin-top: 3px; color: var(--front-dim); font-size: 7px; text-transform: capitalize; }
.companion-readiness__spec select { width: 118px; min-height: 30px; font-size: 8px; }
.companion-readiness__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 9px; border-top: 1px solid var(--front-line); }
.companion-readiness__actions > span { margin-right: auto; color: var(--front-dim); font-size: 9px; }
.companion-readiness__actions > strong { color: #e58b7e; font-size: 8px; }
.companion-pool-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--front-line); border-radius: 8px; background: rgba(255,255,255,.025); }
.companion-pool-controls label { display: flex; align-items: center; gap: 7px; color: var(--front-cream); cursor: pointer; }
.companion-pool-controls label:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.companion-pool-controls input { accent-color: var(--front-green); }
.companion-pool-controls strong, .companion-pool-controls small { display: block; }
.companion-pool-controls strong { font-size: 9px; }
.companion-pool-controls small { margin-top: 2px; color: var(--front-dim); font-size: 7px; }
.companion-pool-controls--compact { padding: 5px 7px; }
@media (max-width: 760px) {
  .companion-readiness__intro { grid-template-columns: 1fr; }
  .companion-readiness__totals { justify-content: flex-start; }
  .companion-readiness__filters { grid-template-columns: 1fr 1fr; }
  .companion-readiness__filters label:first-child { grid-column: 1 / -1; }
  .companion-readiness__class { grid-template-columns: 1fr; }
  .companion-readiness__class > div { grid-template-columns: 1fr; }
  .companion-readiness__actions { flex-wrap: wrap; }
}
.balance-tuning { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 12px; }
.balance-tuning__header { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--front-line); }
.balance-tuning__header > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.balance-tuning__header > div:nth-child(2) span, .balance-tuning__details header span { color: var(--front-dim); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.balance-tuning__header > div:nth-child(2) strong { font: 20px Georgia, serif; }
.balance-tuning__header-actions { display: flex; align-items: center; gap: 10px; }
.balance-tuning__header-actions > span { color: var(--front-gold); font-size: 8px; text-transform: uppercase; }
.balance-tuning__intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.balance-tuning__intro p:last-child { max-width: 820px; margin: 5px 0 0; color: var(--front-dim); font-size: 10px; line-height: 1.45; }
.balance-tuning__tabs { display: flex; overflow: hidden; border: 1px solid var(--front-line); border-radius: 8px; }
.balance-tuning__tabs button { min-width: 94px; min-height: 36px; border: 0; border-right: 1px solid var(--front-line); background: #0a1812; color: var(--front-dim); cursor: pointer; font: 10px Georgia, serif; }
.balance-tuning__tabs button:last-child { border-right: 0; }
.balance-tuning__tabs button[aria-selected="true"] { background: linear-gradient(135deg, rgba(89,119,71,.65), rgba(54,83,53,.65)); color: var(--front-cream); }
.balance-tuning__filters { display: grid; grid-template-columns: minmax(200px, 1fr) 210px; gap: 8px; }
.balance-tuning__filters label { display: grid; gap: 3px; color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
.balance-tuning input, .balance-tuning select { min-height: 34px; padding: 6px 8px; border: 1px solid var(--front-line); border-radius: 6px; background: #08140f; color: var(--front-cream); }
.balance-tuning__workspace { display: grid; min-height: 0; grid-template-columns: minmax(230px, 31%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--front-line); border-radius: 10px; background: linear-gradient(145deg, rgba(8,22,16,.9), rgba(5,14,11,.93)); }
.balance-tuning__catalog { min-height: 0; padding: 8px; overflow: auto; border-right: 1px solid var(--front-line); scrollbar-gutter: stable; }
.balance-tuning__catalog > button { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 0; border-bottom: 1px solid rgba(204,224,180,.08); background: transparent; color: var(--front-cream); cursor: pointer; text-align: left; }
.balance-tuning__catalog > button:hover, .balance-tuning__catalog > button[aria-current="true"] { background: rgba(168,198,143,.09); }
.balance-tuning__catalog > button[aria-current="true"] { box-shadow: inset 2px 0 var(--front-gold); }
.balance-tuning__catalog > button > span { display: block; min-width: 0; padding-left: 8px; border-left: 2px solid var(--front-line); }
.balance-tuning__catalog strong, .balance-tuning__catalog small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-tuning__catalog strong { font-size: 10px; }
.balance-tuning__catalog small { margin-top: 3px; color: var(--front-dim); font-size: 7px; text-transform: capitalize; }
.balance-tuning__catalog em { padding: 3px 5px; border: 1px solid rgba(213,177,94,.4); border-radius: 999px; color: #e7c879; font-size: 7px; font-style: normal; text-transform: uppercase; }
.balance-tuning__catalog > p { padding: 14px; color: var(--front-dim); font-size: 9px; }
.balance-tuning__details { min-height: 0; padding: 18px 20px; overflow: auto; scrollbar-gutter: stable; }
.balance-tuning__details > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.balance-tuning__details h1 { margin: 3px 0 0; color: var(--front-cream); font: 24px Georgia, serif; }
.balance-tuning__details > header button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(255,255,255,.03); color: var(--front-dim); cursor: pointer; font-size: 8px; }
.balance-tuning__details > header button:disabled { cursor: not-allowed; opacity: .4; }
.balance-tuning__description { margin: 12px 0; color: var(--front-dim); font-size: 9px; line-height: 1.5; }
.balance-tuning__source-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.balance-tuning__source-strip span { padding: 5px 7px; border: 1px solid rgba(204,224,180,.12); border-radius: 6px; color: var(--front-dim); font-size: 8px; }
.balance-tuning__source-strip b { color: var(--front-cream); font-weight: 600; }
.balance-tuning__field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.balance-tuning__field-grid label, .balance-tuning__scale-field { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid rgba(204,224,180,.12); border-radius: 8px; background: rgba(255,255,255,.025); }
.balance-tuning__field-grid label > span:first-child, .balance-tuning__scale-field > span:first-child { min-width: 0; }
.balance-tuning__field-grid strong, .balance-tuning__field-grid small, .balance-tuning__scale-field strong, .balance-tuning__scale-field small { display: block; }
.balance-tuning__field-grid strong, .balance-tuning__scale-field strong { font-size: 9px; }
.balance-tuning__field-grid small, .balance-tuning__scale-field small { margin-top: 3px; color: var(--front-dim); font-size: 7px; line-height: 1.35; }
.balance-tuning__field-grid label > span:last-child, .balance-tuning__scale-field > span:last-child { display: flex; align-items: center; gap: 4px; }
.balance-tuning__field-grid input, .balance-tuning__scale-field input { width: 78px; text-align: right; }
.balance-tuning__field-grid em, .balance-tuning__scale-field em { color: var(--front-gold); font-size: 9px; font-style: normal; }
.balance-tuning__callout { padding: 8px 10px; border-left: 2px solid var(--front-gold); background: rgba(185,139,57,.08); color: #d8c994; font-size: 9px; line-height: 1.4; }
.balance-tuning__talent-modifiers { margin-top: 12px; padding: 11px; border: 1px solid rgba(204,224,180,.12); border-radius: 8px; }
.balance-tuning__talent-modifiers > header strong, .balance-tuning__talent-modifiers > header small { display: block; }
.balance-tuning__talent-modifiers > header strong { font-size: 10px; }
.balance-tuning__talent-modifiers > header small { margin-top: 3px; color: var(--front-dim); font-size: 8px; }
.balance-tuning__talent-modifiers > div { display: grid; grid-template-columns: minmax(160px, 1fr) 100px auto; gap: 7px; align-items: center; margin-top: 9px; }
.balance-tuning__talent-modifiers > div > span { color: var(--front-gold); font-size: 8px; }
.balance-tuning__talent-modifiers ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.balance-tuning__talent-modifiers li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid rgba(213,177,94,.28); border-radius: 999px; color: var(--front-dim); font-size: 8px; }
.balance-tuning__talent-modifiers li b { color: #e7c879; }
.balance-tuning__talent-modifiers li button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--front-cream); cursor: pointer; }
.balance-tuning__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 9px; border-top: 1px solid var(--front-line); }
.balance-tuning__actions > span { margin-right: auto; color: var(--front-dim); font-size: 9px; }
@media (max-width: 760px) {
  .balance-tuning__header { align-items: flex-start; flex-wrap: wrap; }
  .balance-tuning__header-actions { margin-left: auto; }
  .balance-tuning__intro { align-items: stretch; flex-direction: column; }
  .balance-tuning__tabs button { flex: 1; }
  .balance-tuning__filters { grid-template-columns: 1fr; }
  .balance-tuning__workspace { grid-template-columns: 1fr; overflow: auto; }
  .balance-tuning__catalog { max-height: 190px; border-right: 0; border-bottom: 1px solid var(--front-line); }
  .balance-tuning__details { overflow: visible; }
  .balance-tuning__field-grid { grid-template-columns: 1fr; }
  .balance-tuning__talent-modifiers > div { grid-template-columns: 1fr 90px; }
  .balance-tuning__talent-modifiers > div > span { grid-column: 1 / -1; }
  .balance-tuning__actions { flex-wrap: wrap; }
  .balance-tuning__actions > span { width: 100%; }
}
.text-action { border: 0; background: transparent; color: var(--front-green-bright); cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.text-action--danger { color: #cf8176; }
.front-notice {
  margin: 8px 0 0;
  padding: 7px 9px;
  border-left: 2px solid var(--front-gold);
  background: rgba(185, 139, 57, 0.08);
  color: #d8c994;
  font-size: 9px;
  line-height: 1.35;
}

/* Login */
.login-screen {
  --login-ice: #9fd9df;
  --login-gold: #d2b16d;
  --login-gold-bright: #f1d99a;
  display: grid;
  grid-template-rows: minmax(98px, 1fr) auto 25px;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, .22), rgba(2, 7, 12, .12) 36%, rgba(1, 5, 9, .72) 100%),
    radial-gradient(circle at 50% 42%, transparent 0 22%, rgba(0, 4, 8, .34) 72%),
    url("./assets/ui/login/frozen-gateway.webp") center 43% / cover no-repeat,
    #071019;
  color: #f4eddd;
}
.login-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(1,4,8,.48), transparent 24% 76%, rgba(1,4,8,.48));
  content: "";
  pointer-events: none;
}
.login-screen .front-grain { opacity: .1; mix-blend-mode: screen; }
.login-title {
  position: relative;
  z-index: 2;
  align-self: start;
  min-width: min(360px, 90vw);
  padding-top: clamp(2px, 1.8vh, 15px);
  text-align: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.9));
}
.login-title__crest {
  display: grid;
  width: 44px;
  height: 44px;
  margin: 0 auto -8px;
  place-items: center;
  border: 1px solid rgba(217,190,124,.62);
  background: radial-gradient(circle, #314956 0 37%, #15252e 38% 53%, #8d7748 55% 58%, #1a1714 60%);
  box-shadow: 0 0 0 3px rgba(8,15,19,.78), 0 0 24px rgba(120,205,217,.34), inset 0 0 12px rgba(150,224,232,.3);
  color: #c6edf0;
  transform: rotate(45deg);
}
.login-title__crest i { font: normal 24px Georgia, serif; text-shadow: 0 0 8px #7ed7df; transform: rotate(-45deg); }
.login-title p { margin: 10px 0 0; color: var(--login-gold-bright); font-size: 8px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; }
.login-title h1 {
  margin: 0;
  color: #f6ebd0;
  font: 600 clamp(35px, 5vw, 54px) Georgia, "Times New Roman", serif;
  line-height: .95;
  letter-spacing: -.055em;
  text-shadow: 0 2px 0 #4b381d, 0 0 4px #000, 0 0 24px rgba(136,210,218,.25);
}
.login-title h1 em { color: var(--login-ice); font-weight: 400; }
.login-title small { color: #c8d4d2; font-family: Georgia, serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 5px #000; }
.login-form {
  position: relative;
  z-index: 2;
  grid-row: 2;
  width: min(420px, calc(100vw - 28px));
  align-self: end;
  padding: 22px 24px 15px;
  border: 1px solid rgba(176, 146, 84, .74);
  border-radius: 3px 3px 13px 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 30%),
    linear-gradient(180deg, rgba(21,30,33,.97), rgba(7,13,17,.98));
  box-shadow: 0 0 0 3px rgba(4,9,12,.86), 0 0 0 4px rgba(91,78,51,.7), 0 24px 60px rgba(0,0,0,.72), inset 0 0 38px rgba(85,122,128,.08);
  backdrop-filter: blur(7px);
}
.login-form::before, .login-form::after {
  position: absolute;
  top: 7px;
  width: 17px;
  height: 17px;
  border-color: rgba(222,190,121,.55);
  content: "";
  pointer-events: none;
}
.login-form::before { left: 7px; border-top: 1px solid; border-left: 1px solid; }
.login-form::after { right: 7px; border-top: 1px solid; border-right: 1px solid; }
.login-form__ornament { position: absolute; top: -10px; left: 50%; display: flex; width: 150px; align-items: center; gap: 7px; color: var(--login-gold-bright); transform: translateX(-50%); }
.login-form__ornament i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--login-gold)); }
.login-form__ornament i:last-child { transform: scaleX(-1); }
.login-form__ornament span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(215,183,113,.7); background: #101a1e; color: transparent; transform: rotate(45deg); }
.login-form__ornament span::after { color: var(--login-gold-bright); content: "+"; font: 15px Georgia, serif; transform: rotate(-45deg); }
.login-form header { margin-bottom: 11px; text-align: center; }
.login-form header span { display: block; color: var(--login-ice); font-size: 8px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.login-form header strong { display: block; margin: 2px 0; color: #f4e5c4; font: 400 24px Georgia, serif; text-shadow: 0 1px 0 #000; }
.login-form header small { color: #9eacac; font-size: 9px; }
.login-form > label { display: block; margin: 7px 0 4px; color: #d1c4a4; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.login-form > input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(171,151,104,.48);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(1,5,8,.9), rgba(8,16,20,.82));
  color: #f5ecda;
  font: inherit;
  font-size: 12px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.65);
}
.login-form > input::placeholder { color: #657476; }
.login-form > input.is-login-field-active { border-color: var(--login-gold-bright); box-shadow: inset 0 2px 7px rgba(0,0,0,.65), 0 0 0 2px rgba(225,190,110,.14), 0 0 15px rgba(130,211,219,.13); }
.login-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.login-form__actions .front-button {
  min-height: 45px;
  border-color: rgba(163,143,94,.38);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(50,61,61,.8), rgba(20,29,31,.86));
}
.login-form__actions .front-button:hover { border-color: rgba(224,192,119,.68); background: linear-gradient(180deg, rgba(61,74,73,.9), rgba(24,35,37,.92)); }
.login-form__actions .front-button--primary { grid-column: 1 / -1; justify-content: center; border-color: rgba(226,194,118,.76); background: linear-gradient(180deg, #806936, #473817); box-shadow: inset 0 1px 0 rgba(255,236,179,.22), 0 0 16px rgba(193,157,80,.08); text-align: center; }
.login-form__actions .front-button--primary:hover { background: linear-gradient(180deg, #967b40, #55421c); }
.login-form__actions .front-button--primary small { color: #d3c398; }
.login-form__actions .front-button--quiet { border-color: rgba(117,151,156,.24); background: linear-gradient(180deg, rgba(30,48,53,.72), rgba(13,25,29,.78)); }
.login-form footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(171,151,104,.18); color: #7f9294; font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.login-form footer span { color: #a9c5c5; }
.login-form footer i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #73b68b; box-shadow: 0 0 7px #73b68b; }
.login-lore { position: relative; z-index: 2; grid-row: 3; margin: 9px 0 0; color: rgba(225,224,211,.7); font: italic 9px Georgia, serif; letter-spacing: .08em; text-shadow: 0 2px 5px #000; }
.login-screen .controller-legend { color: #8e9b9d; text-shadow: 0 1px 4px #000; }
.login-screen .controller-legend b { color: var(--login-gold-bright); }
.login-screen :is(button, input):focus-visible, .login-screen .is-controller-selected { outline-color: var(--login-gold-bright) !important; box-shadow: 0 0 0 3px rgba(225,190,110,.2), 0 0 15px rgba(130,211,219,.2) !important; }
.single-display-frame:has(.login-screen) .single-context-toggle { border-color: rgba(176,146,84,.58); border-radius: 3px; background: rgba(11,20,24,.94); box-shadow: 0 0 0 2px rgba(4,9,12,.72), 0 12px 35px rgba(0,0,0,.55); }
.single-display-frame:has(.login-screen) .single-context-toggle small { color: #f1d99a; }
.appearance-controls > label { display: block; margin: 8px 0 4px; color: #bdc9ba; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.appearance-controls > input { width: 100%; height: 38px; padding: 0 11px; border: 1px solid rgba(200,219,177,.18); border-radius: 7px; background: rgba(2,8,5,.66); color: var(--front-cream); font: inherit; font-size: 12px; }

/* Character silhouette preview */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.character-preview { position: relative; display: grid; min-width: 0; height: 100%; margin: 0; place-items: center; overflow: hidden; }
.character-preview__aura { position: absolute; top: 44%; left: 50%; width: min(27vw, 270px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--race-accent), transparent 55%); border-radius: 50%; box-shadow: inset 0 0 70px color-mix(in srgb, var(--race-accent), transparent 80%), 0 0 70px color-mix(in srgb, var(--race-accent), transparent 84%); }
.character-preview__aura i { position: absolute; inset: 12%; border: 1px dashed rgba(220, 232, 196, 0.12); border-radius: 50%; animation: avatar-orbit 24s linear infinite; }
.character-preview__aura i:nth-child(2) { inset: 27%; animation-direction: reverse; animation-duration: 17s; }
.character-preview__aura i:nth-child(3) { inset: -8%; border-style: solid; opacity: 0.18; }
@keyframes avatar-orbit { to { transform: rotate(360deg); } }
.character-preview__viewport { position: absolute; z-index: 1; inset: 0 0 42px; pointer-events: none; filter: drop-shadow(0 25px 22px rgba(0,0,0,.55)); }
.character-preview__viewport canvas { display: block; width: 100% !important; height: 100% !important; }
.character-avatar { position: relative; z-index: 1; width: 138px; height: 250px; margin-top: -15px; transform: perspective(600px) rotateY(var(--avatar-turn)); transform-style: preserve-3d; filter: drop-shadow(0 25px 22px rgba(0,0,0,.55)); transition: transform 180ms ease; }
.character-avatar__cloak { position: absolute; top: 80px; left: 30px; width: 80px; height: 146px; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #17251d, color-mix(in srgb, var(--class-color), #18231d 70%), #0b1510); }
.character-avatar__body { position: absolute; top: 73px; left: 39px; width: 61px; height: 132px; border-radius: 23px 23px 10px 10px; background: linear-gradient(110deg, #2c3d30, color-mix(in srgb, var(--class-color), #24352b 62%) 55%, #111b15); box-shadow: inset 0 0 0 2px rgba(230,240,209,.08); }
.character-avatar__head { position: absolute; top: 23px; left: 49px; display: grid; width: 43px; height: 55px; place-items: center; border: 2px solid color-mix(in srgb, var(--race-accent), white 12%); border-radius: 49% 49% 42% 42%; background: linear-gradient(145deg, color-mix(in srgb, var(--race-accent), #27332b 58%), #152019); box-shadow: 0 -8px 0 -2px color-mix(in srgb, var(--class-color), #111 50%); }
.character-avatar__head b { color: rgba(247,248,225,.76); font-size: 10px; letter-spacing: .08em; }
.character-avatar__shoulder { position: absolute; top: 69px; width: 42px; height: 27px; border: 1px solid color-mix(in srgb, var(--class-color), white 8%); background: #26382b; }
.character-avatar__shoulder--left { left: 12px; transform: rotate(-14deg); border-radius: 18px 5px 12px 5px; }
.character-avatar__shoulder--right { right: 11px; transform: rotate(14deg); border-radius: 5px 18px 5px 12px; }
.character-avatar__staff { position: absolute; top: 36px; right: 4px; width: 5px; height: 210px; transform: rotate(7deg); border-radius: 5px; background: linear-gradient(90deg, #4a3421, #b48a4e, #422c1b); }
.character-avatar__staff i { position: absolute; top: -13px; left: -10px; width: 25px; height: 25px; border: 3px solid var(--front-green-bright); border-radius: 50% 45% 50% 42%; box-shadow: 0 0 18px rgba(186, 229, 125, 0.65); }
.character-avatar--female { transform: perspective(600px) rotateY(var(--avatar-turn)) scale(.94); }
.character-preview figcaption { position: absolute; z-index: 2; bottom: 11px; left: 50%; display: flex; width: 90%; transform: translateX(-50%); flex-direction: column; align-items: center; text-align: center; text-shadow: 0 2px 10px #000; }
.character-preview figcaption small { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }
.character-preview figcaption strong { font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.character-preview figcaption span { font-size: 10px; font-weight: 800; }
.character-preview--empty { align-content: center; gap: 8px; color: var(--front-dim); text-align: center; }
.character-preview--empty > span { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; color: var(--front-green-bright); font: 28px Georgia, serif; }
.character-preview--empty p { max-width: 180px; font-size: 10px; line-height: 1.5; }
.character-preview--compact .character-avatar { width: 80px; height: 150px; transform: perspective(400px) rotateY(var(--avatar-turn)) scale(.65); }
.character-preview--compact .character-preview__aura { width: 110px; }
.character-preview--compact figcaption strong { font-size: 16px; }
.character-preview--compact figcaption small { font-size: 7px; }

/* Character select */
.character-select-screen {
  --roster-gold: #d2b16d;
  --roster-ice: #9fd9df;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
  grid-template-rows: 58px minmax(0, 1fr) 68px;
  gap: 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, rgba(2,7,12,.42), rgba(2,7,12,.18) 58%, rgba(2,7,12,.75)),
    linear-gradient(180deg, rgba(2,7,12,.36), rgba(2,7,12,.86)),
    url("./assets/ui/login/frozen-gateway.webp") center 44% / cover no-repeat,
    #071019;
}
.character-select-screen::before, .character-create-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 39% 42%, rgba(108,197,207,.1), transparent 28%), linear-gradient(90deg, rgba(1,4,7,.28), transparent 42%, rgba(1,4,7,.48));
  content: "";
  pointer-events: none;
}
.character-select-screen .front-grain, .character-create-screen .front-grain { opacity: .1; mix-blend-mode: screen; }
.roster-header { grid-column: 1 / 3; display: flex; align-items: center; gap: 17px; padding: 0 4px 5px; border-bottom: 1px solid rgba(210,177,109,.34); }
.roster-header > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.roster-header > div:nth-child(2) span { color: #b8cbc9; font-size: 8px; text-transform: uppercase; letter-spacing: .16em; }
.roster-header > div:nth-child(2) strong { color: #f4eddd; font: 21px Georgia, serif; }
.roster-header > button, .creator-header > button { padding: 8px 12px; border: 1px solid rgba(210,177,109,.28); border-radius: 4px; background: rgba(8,17,21,.72); color: #d8d2c3; cursor: pointer; font-size: 9px; }
.roster-list { grid-column: 2; grid-row: 2; display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; padding: 14px; border: 1px solid rgba(210,177,109,.35); border-radius: 4px 4px 10px 10px; overflow: hidden; background: linear-gradient(155deg, rgba(25,35,38,.94), rgba(7,14,18,.96)); box-shadow: 0 18px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04); }
.roster-list__heading { display: flex; justify-content: space-between; margin: 0 2px 11px; padding-bottom: 8px; border-bottom: 1px solid rgba(210,177,109,.2); color: #b9c8c5; font-size: 8px; text-transform: uppercase; letter-spacing: .15em; }
.roster-list__heading b { color: var(--roster-gold); }
.roster-list__entries { min-height: 0; padding-right: 3px; overflow-y: auto; scrollbar-width: thin; }
.roster-character { display: grid; width: 100%; min-height: 61px; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; margin-bottom: 7px; padding: 8px; border: 1px solid rgba(194,213,190,.08); border-radius: 4px; background: linear-gradient(100deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); color: var(--front-cream); cursor: pointer; text-align: left; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.roster-character:hover { border-color: rgba(159,217,223,.3); background: rgba(95,143,148,.1); transform: translateX(-2px); }
.roster-character.is-active { border-color: rgba(210,177,109,.68); background: linear-gradient(100deg, rgba(141,105,38,.32), rgba(74,116,122,.12)); box-shadow: inset 3px 0 0 var(--roster-gold), 0 0 18px rgba(111,190,198,.08); }
.roster-character > span { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border: 1px solid var(--portrait-accent); border-radius: 6px; background: color-mix(in srgb, var(--portrait-accent), transparent 78%); box-shadow: inset 0 0 14px color-mix(in srgb, var(--portrait-accent), transparent 78%), 0 2px 8px rgba(0,0,0,.48); }
.roster-character__icon img { width: 100%; height: 100%; object-fit: cover; }
.roster-character i { display: flex; min-width: 0; flex-direction: column; font-style: normal; }
.roster-character i strong { overflow: hidden; font: 16px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.roster-character i small, .roster-character em { color: #a9b8b6; font-size: 7px; font-style: normal; }
.roster-new { display: flex; width: 100%; min-height: 54px; align-items: center; gap: 10px; margin-top: 9px; padding: 8px 11px; border: 1px dashed rgba(210,177,109,.4); border-radius: 4px; background: rgba(119,91,38,.08); color: var(--front-cream); cursor: pointer; text-align: left; }
.roster-new b { color: var(--roster-gold); font: 26px Georgia, serif; }
.roster-new span { display: flex; flex-direction: column; }
.roster-new span strong { font-size: 11px; }
.roster-new span small { color: #a9b8b6; font-size: 7px; }
.roster-empty { display: grid; min-height: 155px; place-content: center; justify-items: center; color: var(--front-dim); text-align: center; }
.roster-empty span { color: var(--roster-gold); font: 32px Georgia, serif; }
.roster-empty strong { color: var(--front-cream); font: 15px Georgia, serif; }
.roster-empty small { max-width: 160px; margin: 4px 0 12px; font-size: 8px; line-height: 1.4; }
.roster-stage { position: relative; grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(159,217,223,.2); border-radius: 10px 4px 4px 10px; background: radial-gradient(circle at 54% 40%, rgba(100,190,200,.18), transparent 34%), linear-gradient(145deg, rgba(4,12,17,.5), rgba(3,8,12,.83)); box-shadow: inset 0 0 70px rgba(28,65,72,.14), 0 18px 45px rgba(0,0,0,.3); }
.roster-stage::after { position: absolute; inset: 8px; z-index: 0; border: 1px solid rgba(210,177,109,.12); border-radius: 7px 2px 2px 7px; content: ""; pointer-events: none; }
.roster-stage .character-preview { z-index: 1; }
.roster-stage .character-preview figcaption { display: none; }
.roster-stage .character-preview__viewport { bottom: 8px; }
.roster-character-info { position: absolute; top: 18px; bottom: 18px; left: 18px; z-index: 3; display: flex; width: min(225px, 43%); flex-direction: column; justify-content: flex-end; padding: 18px; border-left: 2px solid rgba(210,177,109,.62); background: linear-gradient(90deg, rgba(3,9,13,.92), rgba(3,9,13,.62) 72%, transparent); text-align: left; pointer-events: none; }
.roster-character-info p { margin: 0; color: var(--roster-gold); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.roster-character-info h1 { margin: 4px 0 2px; color: #f4eddd; font: 34px Georgia, serif; line-height: .95; }
.roster-character-info strong, .roster-character-info small { display: block; }
.roster-character-info strong { font-size: 11px; }
.roster-character-info > small { margin-top: 7px; color: #b8c5c3; font-size: 8px; line-height: 1.45; }
.roster-character-info dl { margin: 15px 0 0; }
.roster-character-info dl div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px solid rgba(210,177,109,.13); }
.roster-character-info dt { color: #91a5a4; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.roster-character-info dd { overflow: hidden; margin: 0; font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.roster-footer { grid-column: 1 / 3; grid-row: 3; display: flex; align-items: center; gap: 13px; padding: 10px 0 0; border-top: 1px solid rgba(210,177,109,.28); }
.roster-footer__status { min-width: 0; flex: 1; color: #aebdbb; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.roster-footer__status .front-notice { margin: 3px 0 0; }
.roster-footer .text-action { flex: 0 0 auto; }
.roster-enter { width: min(310px, 38%); min-height: 48px; border-radius: 4px; }
.character-select-screen > .controller-legend { display: none; }
.front-modal-backdrop { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(1,5,3,.76); backdrop-filter: blur(8px); }
.front-confirm { width: min(390px, 100%); padding: 25px; border: 1px solid var(--front-line); border-radius: 14px; background: #0a1812; box-shadow: 0 30px 80px #000; }
.front-confirm h2 { margin: 7px 0; font: 27px Georgia, serif; }
.front-confirm > p:not(.front-kicker) { color: var(--front-dim); font-size: 11px; line-height: 1.5; }
.front-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }

/* Main menu */
.main-menu-screen {
  --main-menu-gold: #d2b16d;
  --main-menu-ice: #9fd9df;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 31%);
  grid-template-rows: 58px minmax(0, 1fr) 25px;
  gap: 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, rgba(2,7,12,.78), rgba(2,7,12,.38) 58%, rgba(2,7,12,.83)),
    linear-gradient(180deg, rgba(2,7,12,.38), rgba(2,7,12,.91)),
    url("./assets/ui/login/frozen-gateway.webp") center 44% / cover no-repeat,
    #071019;
}
.main-menu-header, .dungeon-select-header, .manastorm-select-header {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 17px;
  border-bottom: 1px solid var(--front-line);
}
.main-menu-header > div:nth-child(2), .dungeon-select-header > div:nth-child(2), .manastorm-select-header > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.main-menu-header > div:nth-child(2) span, .dungeon-select-header > div:nth-child(2) span, .manastorm-select-header > div:nth-child(2) span { color: var(--front-dim); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.main-menu-header > div:nth-child(2) strong, .dungeon-select-header > div:nth-child(2) strong, .manastorm-select-header > div:nth-child(2) strong { overflow: hidden; font: 18px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.main-menu-header > button {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(210,177,109,.3);
  border-radius: 4px;
  background: rgba(8,17,21,.74);
  color: #d8d2c3;
  cursor: pointer;
  font-size: 9px;
}
.main-menu-header { padding: 0 4px 5px; border-bottom-color: rgba(210,177,109,.34); }
.main-menu-header .front-brand > span:last-child { justify-content: center; }
.main-menu-sidebar {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
}
.main-menu-character {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(210,177,109,.4);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(27,38,41,.96), rgba(6,14,18,.96));
  box-shadow: 0 16px 36px rgba(0,0,0,.34), inset 3px 0 0 rgba(210,177,109,.68);
}
.main-menu-character__icon { display: block; width: 52px; height: 52px; overflow: hidden; border: 1px solid; border-radius: 7px; background: #071015; box-shadow: 0 3px 12px rgba(0,0,0,.52); }
.main-menu-character__icon img { width: 100%; height: 100%; object-fit: cover; }
.main-menu-character__summary { min-width: 0; }
.main-menu-character__summary h1 { overflow: hidden; margin: 2px 0 3px; color: #f4eddd; font: 26px Georgia, serif; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.main-menu-character__summary > strong, .main-menu-character__summary > small { display: block; }
.main-menu-character__summary > strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.main-menu-character__summary > small { color: #9fb2b0; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.main-menu-sidebar > .online-group-panel { margin: 10px 0 0; border-color: rgba(159,217,223,.3); border-radius: 4px; background: linear-gradient(155deg, rgba(14,31,32,.94), rgba(4,15,17,.96)); }
.main-menu-sidebar > .online-group-panel > summary { min-height: 46px; }
.main-menu-modes { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; padding: 0 3px 10px 0; overflow: auto; }
.main-menu-mode-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
.main-menu-card { padding: 11px; border: 1px solid rgba(210,177,109,.3); border-radius: 5px; background: linear-gradient(155deg, rgba(19,29,32,.94), rgba(5,12,16,.94)); box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.main-menu-card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(210,177,109,.17); }
.main-menu-card > header span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(210,177,109,.42); border-radius: 50%; color: var(--main-menu-gold); font: 10px Georgia, serif; }
.main-menu-card > header strong { color: #e8dec7; font: 15px Georgia, serif; font-weight: 400; letter-spacing: .04em; }
.main-menu-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.main-menu-card--adventures { border-color: rgba(159,217,223,.32); background: linear-gradient(145deg, rgba(22,46,49,.92), rgba(6,18,22,.96)); box-shadow: 0 16px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(159,217,223,.06); }
.main-menu-card--adventures .main-menu-mode { min-height: 96px; border-color: rgba(159,217,223,.42); background: linear-gradient(135deg, rgba(64,116,121,.34), rgba(21,54,58,.5)); }
.main-menu-card--adventures .main-menu-mode:hover { background: linear-gradient(135deg, rgba(77,139,145,.44), rgba(25,65,70,.6)); }
.main-menu-card--secondary .main-menu-mode { min-height: 70px; }
.main-menu-gm-stack { display: grid; gap: 8px; }
.main-menu-mode {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 9px;
  padding: 10px;
}
.main-menu-mode > b { grid-row: 1 / 3; align-self: start; color: var(--front-gold); font: 18px Georgia, serif; font-weight: 400; }
.main-menu-mode > span { min-width: 0; }
.main-menu-mode > span strong, .main-menu-mode > span small { display: block; }
.main-menu-mode > span strong { font: 16px Georgia, serif; font-weight: 400; }
.main-menu-mode > span small { margin-top: 3px; color: var(--front-dim); font-size: 7px; line-height: 1.35; }
.main-menu-mode > em { grid-column: 2; color: var(--front-dim); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.main-menu-mode--available { border-color: rgba(200,226,142,.4); background: linear-gradient(135deg, rgba(91,126,70,.32), rgba(25,48,34,.48)); }
.main-menu-mode--available > em { color: var(--front-green-bright); }
.main-menu-mode--available:hover { background: linear-gradient(135deg, rgba(105,145,80,.42), rgba(30,58,40,.58)); }
.main-menu-mode--gm-menu { border-color: rgba(210,177,109,.5); background: linear-gradient(135deg, rgba(127,91,37,.34), rgba(57,40,28,.54)); }
.main-menu-mode--gm-menu:hover { background: linear-gradient(135deg, rgba(151,109,45,.44), rgba(72,50,32,.62)); }
.main-menu-mode--coming-soon:disabled { opacity: .62; filter: saturate(.4); }
.main-menu-mode--coming-soon > b { color: #7d806f; }
.main-menu-notice { margin-right: 8px; }
.main-menu-screen > .controller-legend { grid-column: 1 / 3; grid-row: 3; position: static; align-self: end; justify-self: end; }
.main-menu-gm-modal { width: min(700px, 100%); max-height: min(440px, 100%); padding: 18px; overflow-y: auto; border: 1px solid rgba(210,177,109,.48); border-radius: 6px; background: linear-gradient(155deg, rgba(25,35,38,.98), rgba(5,12,16,.99)); box-shadow: 0 30px 80px #000, inset 3px 0 0 rgba(210,177,109,.62); }
.main-menu-gm-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(210,177,109,.22); }
.main-menu-gm-modal > header div { display: flex; flex-direction: column; }
.main-menu-gm-modal > header span { color: #9fb2b0; font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }
.main-menu-gm-modal > header h2 { margin: 2px 0 0; color: #f4eddd; font: 28px Georgia, serif; font-weight: 400; }
.main-menu-gm-modal > header button { min-height: 36px; padding: 7px 12px; border: 1px solid rgba(210,177,109,.3); border-radius: 4px; background: rgba(8,17,21,.8); color: #d8d2c3; cursor: pointer; }
.main-menu-gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.main-menu-gm-grid .main-menu-mode { min-height: 78px; border-color: rgba(210,177,109,.34); background: linear-gradient(135deg, rgba(103,76,39,.28), rgba(29,39,40,.58)); }
.main-menu-gm-grid .main-menu-mode:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.35); }
.main-menu-random-modal { width: min(450px, 100%); max-height: 100%; overflow-y: auto; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(159,217,223,.48); border-radius: 8px; background: linear-gradient(150deg, rgba(21,45,48,.98), rgba(5,15,20,.99)); box-shadow: 0 30px 80px #000, inset 3px 0 0 var(--main-menu-ice); }
.main-menu-random-modal h2 { margin: 5px 0 10px; color: #f4eddd; font: 28px Georgia, serif; font-weight: 400; }
.main-menu-random-modal > p:not(.front-kicker) { color: #b9c9c8; font-size: 12px; line-height: 1.5; }
.main-menu-random-modal__roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin: 18px 0; }
.main-menu-random-modal__role { min-height: 48px; justify-content: center; border-color: rgba(159,217,223,.35); }
.main-menu-random-modal__role[aria-pressed="true"] { border-color: var(--main-menu-ice); background: rgba(64,116,121,.5); color: #fff; }
.main-menu-random-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.main-menu-random-modal__actions .front-button { justify-content: center; min-height: 44px; }
.main-menu-random-modal__progress { min-height: 18px; }

/* Dungeon browser */
.dungeon-select-screen {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  grid-template-rows: 54px minmax(0, 1fr) 25px;
  column-gap: 18px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.dungeon-select-header > p { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
.dungeon-select-header > p b { font: 13px Georgia, serif; font-weight: 400; }
.dungeon-select-header > p small { color: var(--front-dim); font-size: 7px; }
.dungeon-select-list {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 17px 16px 12px 0;
  border-right: 1px solid var(--front-line);
}
.dungeon-select-list > header { position: relative; }
.dungeon-select-list > header h1 { margin: 3px 0 10px; font: 28px Georgia, serif; font-weight: 400; }
.dungeon-select-list > header > small { position: absolute; right: 0; bottom: 14px; color: var(--front-dim); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.dungeon-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 3px 10px; }
.dungeon-category-tab { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border: 1px solid rgba(204,224,180,.13); border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
.dungeon-category-tab strong { color: var(--front-dim); font: 14px Georgia, serif; font-weight: 400; }
.dungeon-category-tab small { color: var(--front-dim); font-size: 6px; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.dungeon-category-tab.is-active { border-color: rgba(218,192,102,.52); background: linear-gradient(120deg, rgba(111,126,66,.25), rgba(255,255,255,.03)); }
.dungeon-category-tab.is-active strong { color: var(--front-gold); }
.dungeon-category-tab.is-controller-selected { box-shadow: 0 0 0 1px rgba(218,192,102,.65), 0 0 14px rgba(151,177,91,.18); }
.dungeon-select-list__items { min-height: 0; padding: 2px 3px 8px; overflow: auto; }
.dungeon-select-row {
  display: grid;
  width: 100%;
  min-height: 66px;
  grid-template-columns: 31px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 8px;
  border: 1px solid rgba(204,224,180,.11);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: var(--front-cream);
  cursor: pointer;
  text-align: left;
}
.dungeon-select-row.is-active { border-color: rgba(200,226,142,.42); background: linear-gradient(100deg, rgba(93,135,70,.27), rgba(255,255,255,.03)); }
.dungeon-select-row > b { color: var(--front-gold); font: 17px Georgia, serif; font-weight: 400; }
.dungeon-select-row > span { display: flex; min-width: 0; flex-direction: column; }
.dungeon-select-row > span strong { overflow: hidden; font: 14px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.dungeon-select-row > span small { overflow: hidden; margin-top: 3px; color: var(--front-dim); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.dungeon-select-row > em { color: var(--front-green-bright); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dungeon-select-row:disabled { cursor: not-allowed; opacity: .48; }
.dungeon-select-back { justify-content: center; }
.dungeon-select-detail {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(210px, .9fr) minmax(245px, 1.1fr);
  align-items: stretch;
  gap: 17px;
  padding: 17px 0 12px;
}
.dungeon-select-map { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--front-line); border-radius: 13px 4px 13px 4px; background: rgba(4,16,11,.84); box-shadow: inset 0 0 35px rgba(79,119,66,.13); }
.dungeon-select-map svg { display: block; width: 100%; height: 100%; }
.dungeon-select-map__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--front-green-bright); font: 48px Georgia, serif; }
.dungeon-select-copy { min-width: 0; min-height: 0; padding: 9px 3px 5px 0; overflow: auto; }
.dungeon-select-copy h2, .dungeon-select-empty h2 { margin: 4px 0 8px; font: 29px Georgia, serif; font-weight: 400; line-height: 1; }
.dungeon-select-copy > p:not(.front-kicker):not(.front-notice) { margin: 0 0 9px; color: var(--front-dim); font-size: 9px; line-height: 1.5; }
.dungeon-select-copy dl { margin: 0 0 11px; }
.dungeon-select-copy dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(203,219,180,.09); }
.dungeon-select-copy dt { color: var(--front-dim); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.dungeon-select-copy dd { margin: 0; font-size: 8px; text-align: right; }
.dungeon-select-enter { width: 100%; }
.dungeon-role-picker { display: grid; gap: 9px; }
.dungeon-role-picker > header h3 { margin: 3px 0 4px; font: 21px Georgia, serif; font-weight: 400; }
.dungeon-role-picker > header > small { display: block; color: var(--front-dim); font-size: 8px; line-height: 1.4; }
.dungeon-role-picker__options { display: grid; gap: 6px; }
.dungeon-role-option {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(204,224,180,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: var(--front-cream);
  cursor: pointer;
  text-align: left;
}
.dungeon-role-option:hover, .dungeon-role-option.is-controller-selected { border-color: rgba(218,192,102,.62); background: rgba(111,126,66,.18); }
.dungeon-role-option > b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--front-gold); font: 17px Georgia, serif; }
.dungeon-role-option--healer > b { color: #91d9a5; }
.dungeon-role-option--damage > b { color: #d68d79; }
.dungeon-role-option > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.dungeon-role-option > span strong { font: 13px Georgia, serif; }
.dungeon-role-option > span small { color: var(--front-dim); font-size: 7px; line-height: 1.35; }
.dungeon-role-picker__back { justify-content: center; min-height: 34px; }
.dungeon-select-empty { align-self: center; }
.dungeon-select-screen > .controller-legend { grid-column: 1 / 3; grid-row: 3; position: static; align-self: end; justify-self: end; }

/* Manastorm entry */
.manastorm-select-screen {
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 25px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 22% 60%, rgba(104,71,161,.16), transparent 32%),
    radial-gradient(circle at 78% 26%, rgba(70,158,176,.11), transparent 28%);
}
.manastorm-select-header { grid-column: 1; }
.manastorm-select-header > p { display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
.manastorm-select-header > p b { font: 13px Georgia, serif; font-weight: 400; }
.manastorm-select-header > p small { color: var(--front-dim); font-size: 7px; }
.manastorm-select-content {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(250px, .9fr) minmax(310px, 1.1fr);
  gap: 24px;
  padding: 22px 4px 14px;
}
.manastorm-select-intro {
  min-height: 0;
  padding: 19px 24px;
  border: 1px solid rgba(170,143,232,.24);
  border-radius: 15px 5px 15px 5px;
  background: linear-gradient(145deg, rgba(71,43,112,.26), rgba(7,23,27,.48));
  box-shadow: inset 0 0 45px rgba(117,85,178,.08);
}
.manastorm-select-intro h1 { margin: 4px 0 8px; color: #ede2ff; font: 34px Georgia, serif; font-weight: 400; }
.manastorm-select-intro > p:not(.front-kicker) { max-width: 560px; color: var(--front-dim); font-size: 10px; line-height: 1.6; }
.manastorm-select-intro dl { margin: 18px 0 0; }
.manastorm-select-intro dl div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(207,190,236,.1); }
.manastorm-select-intro dt { color: var(--front-dim); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.manastorm-select-intro dd { margin: 0; color: #e9dcff; font-size: 9px; text-align: right; }
.manastorm-role-select { min-height: 0; padding: 13px 4px; overflow: auto; }
.manastorm-role-select > header h2 { margin: 4px 0; color: #efe7ff; font: 27px Georgia, serif; font-weight: 400; }
.manastorm-role-select > header small { color: var(--front-dim); font-size: 8px; }
.manastorm-setup-block { display: grid; gap: 5px; margin-top: 10px; }
.manastorm-setup-block > strong, .manastorm-role-label { color: #c9b7e6; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.manastorm-setup-block > small { color: var(--front-dim); font-size: 7px; }
.manastorm-party-size-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.manastorm-size-option, .manastorm-entry-option { min-height: 30px; justify-content: center; border: 1px solid rgba(174,148,226,.25); border-radius: 7px; background: rgba(77,52,111,.14); color: #d9cbed; font-size: 9px; }
.manastorm-size-option.is-active, .manastorm-entry-option.is-active { border-color: rgba(142,231,239,.72); background: rgba(81,126,143,.28); color: #efffff; box-shadow: inset 0 0 12px rgba(100,210,225,.11); }
.manastorm-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.manastorm-spell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 122px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.manastorm-spell-option { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; min-height: 38px; padding: 5px 7px; border: 1px solid rgba(174,148,226,.25); border-radius: 7px; background: rgba(77,52,111,.14); color: #d9cbed; text-align: left; }
.manastorm-spell-option img { width: 26px; height: 26px; border: 1px solid rgba(207,190,236,.26); border-radius: 4px; object-fit: cover; }
.manastorm-spell-option span { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; }
.manastorm-spell-option b { overflow: hidden; font: 9px Georgia, serif; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.manastorm-spell-option small { color: var(--front-dim); font-size: 6px; }
.manastorm-spell-option.is-active { border-color: rgba(142,231,239,.72); background: rgba(81,126,143,.28); color: #efffff; box-shadow: inset 0 0 12px rgba(100,210,225,.11); }
.manastorm-spell-option:is(:disabled, [aria-disabled="true"]) { opacity: .42; }
.manastorm-role-label { display: block; margin-top: 11px; }
.manastorm-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 5px; }
.manastorm-role-grid .dungeon-role-option { min-height: 47px; padding: 6px; }
.manastorm-role-grid .dungeon-role-option > span small { display: none; }
.manastorm-role-grid .dungeon-role-option { border-color: rgba(174,148,226,.2); background: rgba(77,52,111,.14); }
.manastorm-role-grid .dungeon-role-option:hover,
.manastorm-role-grid .dungeon-role-option.is-controller-selected { border-color: rgba(172,224,238,.66); background: rgba(80,75,139,.29); }
.manastorm-select-back { width: 100%; min-height: 36px; margin-top: 10px; justify-content: center; }
.manastorm-select-screen > .controller-legend { grid-row: 3; position: static; align-self: end; justify-self: end; }

/* Character creation */
.character-create-screen { display: grid; grid-template-columns: 280px minmax(250px, 1fr) 305px; grid-template-rows: 50px 3px minmax(0, 1fr) 58px; gap: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.creator-header { grid-column: 1 / 4; grid-row: 1; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--front-line); }
.creator-header > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.creator-header > div:nth-child(2) span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.creator-header > div:nth-child(2) strong { font: 18px Georgia, serif; }
.creator-progress { grid-column: 1 / 4; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.creator-progress i { background: rgba(255,255,255,.06); }
.creator-progress i.is-complete { background: var(--front-green); }
.creator-races, .creator-classes { min-height: 0; padding-top: 12px; overflow: hidden; }
.creator-category-tabs { display: flex; gap: 5px; margin-left: auto; }
.creator-category-tabs button { display: flex; align-items: baseline; gap: 5px; min-width: 82px; padding: 5px 8px; border: 1px solid var(--front-line); border-radius: 4px; color: var(--front-dim); background: rgba(5, 11, 13, .7); }
.creator-category-tabs button small { font-size: 6px; }
.creator-category-tabs button.is-active { border-color: var(--front-gold); color: #f0d99a; background: rgba(150, 111, 38, .18); }

.class-hall-screen { display: grid; grid-template-columns: minmax(230px, 31%) minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); gap: 14px; }
.class-hall-header { grid-column: 1 / 3; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--front-line); }
.class-hall-header > div { display: flex; flex-direction: column; flex: 1; }
.class-hall-header span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.class-hall-header strong { font: 16px Georgia, serif; }
.class-hall-character { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--front-line); background: radial-gradient(circle at 50% 35%, rgba(137,102,44,.16), transparent 55%); }
.class-hall-character > div:last-child { position: absolute; inset: auto 12px 12px; display: flex; flex-direction: column; padding: 10px; background: linear-gradient(90deg, rgba(4,10,12,.94), rgba(4,10,12,.62)); }
.class-hall-character h1 { margin: 2px 0; font: 25px Georgia, serif; }
.class-hall-content { min-height: 0; overflow-y: auto; padding: 14px; border: 1px solid var(--front-line); background: rgba(6,13,15,.72); }
.class-hall-content h2 { margin: 4px 0 10px; font: 22px Georgia, serif; }
.class-hall-locked { display: grid; place-items: center; min-height: 100%; text-align: center; }
.class-hall-locked > span { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid var(--front-gold); border-radius: 50%; color: var(--front-gold); font: 30px Georgia, serif; }
.secondary-class-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.secondary-class-option { display: grid; grid-template-columns: 34px 1fr; text-align: left; }
.secondary-class-option b { font: 22px Georgia, serif; }
.secondary-class-option span { display: flex; flex-direction: column; }
.class-orientation-card, .elite-milestones { padding: 15px; border: 1px solid var(--front-line); background: rgba(12,22,24,.76); }
.class-orientation-card h2 span { color: var(--front-gold); }
.class-orientation-card .front-button { margin-top: 12px; }
.elite-milestones { margin-top: 10px; }
.elite-milestones > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 12px 0; }
.elite-milestones > div span { padding: 7px 3px; border: 1px solid var(--front-line); color: var(--front-dim); text-align: center; }
.elite-milestones > div span.is-unlocked { border-color: #a88842; color: #f0d99a; background: rgba(150,111,38,.15); }
.rom-skills-panel { width: min(900px, 94vw); height: min(690px, 91vh); }
.rom-skills-panel__intro { display: flex; flex-direction: column; margin: 10px 0; color: var(--muted); }
.rom-skills-panel__intro strong { color: #ead69c; font: 18px Georgia, serif; }
.rom-skills-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; overflow-y: auto; }
.rom-skills-groups > section { min-height: 180px; padding: 10px; border: 1px solid rgba(218,190,121,.18); background: rgba(7,15,14,.72); }
.rom-skills-groups > section > header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.rom-skills-groups h3 { margin: 0 0 8px; color: #ead69c; font: 15px Georgia, serif; }
.rom-skills-groups > section > div { display: grid; gap: 5px; margin-top: 8px; }
.rom-skill-card { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 5px; border: 1px solid rgba(255,255,255,.08); color: #e4e1d1; background: rgba(255,255,255,.025); text-align: left; }
.rom-skill-card img { width: 30px; height: 30px; object-fit: cover; }
.rom-skill-card span { display: flex; flex-direction: column; }
.rom-skill-card small, .rom-skill-card em { color: var(--muted); font-size: 7px; }
.rom-skill-card.is-locked { opacity: .42; }
.creator-races { grid-column: 1; grid-row: 3; padding-right: 13px; border-right: 1px solid var(--front-line); overflow-y: auto; scrollbar-width: thin; }
.creator-classes { grid-column: 3; grid-row: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-left: 13px; border-left: 1px solid var(--front-line); }
.creator-races > header, .creator-classes > header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.creator-races > header > span, .creator-classes > header > span { color: var(--front-gold); font: 20px Georgia, serif; }
.creator-races > header div, .creator-classes > header div { display: flex; flex-direction: column; }
.creator-races > header strong, .creator-classes > header strong { font: 15px Georgia, serif; }
.creator-races > header small, .creator-classes > header small { color: var(--front-dim); font-size: 7px; }
.race-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.race-option { position: relative; display: grid; min-height: 44px; grid-template-columns: 29px 1fr; align-items: center; gap: 6px; padding: 5px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
.race-option.is-active { border-color: rgba(204,225,172,.3); background: rgba(103,145,82,.18); }
.race-option > b { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid; border-radius: 50%; font-size: 8px; }
.race-option > span { font-size: 9px; font-weight: 800; }
.race-option > small { position: absolute; top: 3px; right: 4px; color: var(--front-dim); font-size: 6px; }
.gender-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }
.gender-picker button { height: 30px; border: 1px solid var(--front-line); border-radius: 6px; background: transparent; color: var(--front-dim); cursor: pointer; font-size: 8px; text-transform: uppercase; }
.gender-picker button.is-active { background: rgba(107,145,82,.22); color: var(--front-cream); }
.gender-picker button:disabled { cursor: not-allowed; opacity: .32; }
.creator-races > p { margin: 8px 2px 0; color: var(--front-dim); font-size: 8px; line-height: 1.4; }
.creator-preview-stage { grid-column: 2; grid-row: 3; position: relative; min-width: 0; min-height: 0; }
.preview-rotate { position: absolute; right: 0; bottom: 1px; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; }
.preview-rotate button { width: 30px; height: 27px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(5,14,10,.7); color: var(--front-cream); cursor: pointer; }
.preview-rotate span { color: var(--front-dim); font-size: 7px; text-transform: uppercase; }
.class-grid { display: grid; min-height: 0; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px; padding-right: 4px; overflow-y: auto; scrollbar-color: rgba(151,190,119,.42) transparent; }
.class-option { position: relative; display: flex; min-height: 45px; align-items: center; gap: 7px; padding: 5px 25px 5px 6px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
.class-option.is-active { border-color: rgba(204,225,172,.3); background: rgba(103,145,82,.18); }
.class-option > b { display: grid; min-width: 32px; height: 32px; place-items: center; font-size: 9px; }
.class-option > b img { display: block; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, currentColor 70%, #fff 30%); border-radius: 5px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.72), 0 1px 4px rgba(0,0,0,.58); }
.class-option > span { display: flex; min-width: 0; flex-direction: column; }
.class-option > span strong { font-size: 8px; }
.class-option > span small { overflow: hidden; color: var(--front-dim); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.class-option > i { position: absolute; top: 4px; right: 4px; color: var(--front-gold); font-size: 5px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.class-summary { margin: 8px 2px 0; }
.class-summary strong, .class-summary span { display: block; }
.class-summary strong { font: 14px Georgia, serif; }
.class-summary span { margin-top: 2px; color: var(--front-dim); font-size: 8px; line-height: 1.35; }
.class-summary small { display: block; margin-top: 3px; color: var(--front-gold); font-size: 6px; line-height: 1.35; text-transform: capitalize; }
.creator-footer { grid-column: 1 / 4; grid-row: 4; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--front-line); }
.creator-footer .front-button { min-width: 145px; }
/* On one-screen devices the companion launcher occupies the bottom-right corner. */
.single-display-frame .creator-footer { padding-right: 156px; }
.single-display-frame .creator-footer .front-button { flex: 0 1 145px; min-width: 0; }
.character-create-screen > .controller-legend { display: none; }
.appearance-preview-stage { grid-column: 1; grid-row: 3 / 5; position: relative; min-width: 0; min-height: 0; border-right: 1px solid var(--front-line); }
.appearance-preview-stage > p { position: absolute; right: 8px; bottom: 13px; left: 8px; display: flex; flex-direction: column; text-align: center; }
.appearance-preview-stage > p strong { font: 15px Georgia, serif; }
.appearance-preview-stage > p span { color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
.appearance-controls { grid-column: 2 / 4; grid-row: 3 / 5; min-height: 0; padding: 15px 8px 8px 22px; overflow: auto; }
.appearance-controls header h1 { margin: 3px 0; font: 26px Georgia, serif; }
.appearance-controls header > small { color: var(--front-dim); font-size: 8px; }
.appearance-controls > input { max-width: 430px; height: 36px; }
.customization-list { display: grid; max-width: 610px; grid-template-columns: 1fr 1fr; gap: 6px 13px; margin-top: 11px; }
.customization-row { display: grid; min-height: 42px; grid-template-columns: 94px 27px 1fr 27px; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(201,220,178,.1); border-radius: 7px; background: rgba(255,255,255,.02); }
.customization-row > span { display: flex; min-width: 0; flex-direction: column; }
.customization-row > span strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.customization-row > span small { color: var(--front-dim); font-size: 7px; }
.customization-row button { width: 27px; height: 27px; border: 1px solid var(--front-line); border-radius: 5px; background: rgba(131,164,107,.08); color: var(--front-cream); cursor: pointer; }
.customization-row input[type="range"] { width: 100%; accent-color: var(--front-green); }
.appearance-actions { display: grid; max-width: 610px; grid-template-columns: 1fr 95px 180px; align-items: center; gap: 8px; margin-top: 10px; }

/* Character shell polish */
.companion-panel dl { margin: 0 0 14px; }
.companion-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(203,219,180,.09); }
.companion-panel dt { color: var(--front-dim); font-size: 8px; text-transform: uppercase; }
.companion-panel dd { margin: 0; font-size: 9px; text-align: right; }
.character-create-screen {
  --creator-gold: #d2b16d;
  --creator-ice: #9fd9df;
  grid-template-columns: 265px minmax(245px, 1fr) 300px;
  grid-template-rows: 58px 3px minmax(0, 1fr) 66px;
  background:
    linear-gradient(90deg, rgba(2,7,12,.67), rgba(2,7,12,.16) 47%, rgba(2,7,12,.72)),
    linear-gradient(180deg, rgba(2,7,12,.42), rgba(2,7,12,.88)),
    url("./assets/ui/login/frozen-gateway.webp") center 44% / cover no-repeat,
    #071019;
}
.creator-header { padding: 0 4px 5px; border-bottom-color: rgba(210,177,109,.34); }
.creator-header > div:nth-child(2) span { color: #b8cbc9; letter-spacing: .16em; }
.creator-header > div:nth-child(2) strong { color: #f4eddd; font-size: 20px; }
.creator-progress { gap: 5px; padding-top: 1px; }
.creator-progress i { background: rgba(255,255,255,.08); }
.creator-progress i.is-complete { background: linear-gradient(90deg, #8d713b, var(--creator-gold), #72b6bd); box-shadow: 0 0 10px rgba(123,202,210,.3); }
.creator-category-tabs button { min-height: 34px; border-color: rgba(210,177,109,.22); border-radius: 3px; background: rgba(7,15,19,.8); }
.creator-category-tabs button.is-active { border-color: rgba(210,177,109,.72); color: #f1d99a; background: linear-gradient(180deg, rgba(144,105,35,.32), rgba(79,62,31,.2)); box-shadow: inset 0 -2px 0 var(--creator-gold); }
.creator-races, .creator-classes {
  margin-top: 12px;
  margin-bottom: 10px;
  padding: 13px;
  border: 1px solid rgba(210,177,109,.28);
  border-radius: 4px;
  background: linear-gradient(155deg, rgba(24,34,37,.92), rgba(6,13,17,.95));
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
.creator-races { margin-right: 10px; overflow-y: auto; }
.creator-classes { margin-left: 10px; }
.creator-races > header, .creator-classes > header { padding-bottom: 8px; border-bottom: 1px solid rgba(210,177,109,.16); }
.creator-races > header > span, .creator-classes > header > span { color: var(--creator-gold); }
.race-option, .class-option { border-radius: 3px; border-color: rgba(194,213,190,.06); background: rgba(255,255,255,.025); }
.race-option:hover, .class-option:hover { border-color: rgba(159,217,223,.28); background: rgba(80,132,138,.1); }
.race-option.is-active, .class-option.is-active { border-color: rgba(210,177,109,.62); background: linear-gradient(100deg, rgba(141,105,38,.28), rgba(73,119,124,.1)); box-shadow: inset 2px 0 0 var(--creator-gold); }
.gender-picker button { border-radius: 3px; border-color: rgba(210,177,109,.2); background: rgba(5,12,16,.56); }
.gender-picker button.is-active { border-color: rgba(159,217,223,.4); background: rgba(77,132,138,.2); color: #d7eef0; }
.creator-preview-stage { margin: 12px 0 10px; overflow: hidden; border: 1px solid rgba(159,217,223,.2); border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(97,184,193,.18), transparent 36%), rgba(3,9,13,.48); box-shadow: inset 0 0 55px rgba(29,75,81,.13); }
.creator-preview-stage::after { position: absolute; inset: 8px; z-index: 0; border: 1px solid rgba(210,177,109,.12); border-radius: 2px; content: ""; pointer-events: none; }
.creator-preview-title { position: absolute; top: 14px; left: 15px; z-index: 4; display: flex; flex-direction: column; padding-left: 8px; border-left: 2px solid var(--creator-gold); pointer-events: none; }
.creator-preview-title small { color: var(--creator-gold); font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }
.creator-preview-title strong { color: #f4eddd; font: 14px Georgia, serif; }
.creator-preview-stage .character-preview figcaption { bottom: 36px; }
.preview-rotate { bottom: 7px; }
.preview-rotate button { border-radius: 3px; border-color: rgba(210,177,109,.3); background: rgba(5,13,17,.86); }
.class-summary { padding: 8px; border-left: 2px solid rgba(159,217,223,.5); background: rgba(5,13,17,.52); }
.creator-footer { padding-top: 9px; border-top-color: rgba(210,177,109,.28); }
.creator-footer__selection { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.creator-footer__selection small { color: #93a8a7; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.creator-footer__selection strong { overflow: hidden; color: #e8dec7; font: 14px Georgia, serif; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.creator-footer .front-button { min-height: 48px; border-radius: 4px; }
.appearance-preview-stage { margin: 12px 10px 10px 0; border: 1px solid rgba(159,217,223,.2); border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(97,184,193,.18), transparent 36%), rgba(3,9,13,.54); }
.appearance-preview-stage .character-preview figcaption { bottom: 34px; }
.appearance-preview-stage > p { display: none; }
.appearance-controls { margin: 12px 0 10px 10px; padding: 18px; border: 1px solid rgba(210,177,109,.28); border-radius: 4px; background: linear-gradient(155deg, rgba(24,34,37,.94), rgba(6,13,17,.96)); box-shadow: 0 16px 36px rgba(0,0,0,.3); }
.appearance-controls header h1 { color: #f4eddd; font-size: 30px; }
.customization-row { border-radius: 3px; border-color: rgba(210,177,109,.12); background: rgba(255,255,255,.025); }
.appearance-actions { position: sticky; bottom: -8px; z-index: 4; padding: 9px 0 0; background: linear-gradient(180deg, transparent, rgba(7,14,18,.98) 25%); }
.appearance-actions .front-button { min-height: 48px; border-radius: 4px; }

/* Companion / lower Thor screen */
.companion-panel { display: grid; grid-template-rows: 45px minmax(0, 1fr) 45px; padding: 12px 14px; }
.companion-panel > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--front-line); }
.companion-panel > header > b { color: var(--front-green-bright); font-size: 7px; letter-spacing: .15em; }
.companion-panel > main { min-height: 0; overflow: hidden; }
.companion-panel > footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--front-line); color: var(--front-dim); font-size: 7px; letter-spacing: .08em; }
.companion-login {
  background:
    linear-gradient(180deg, rgba(3,8,13,.78), rgba(2,7,11,.94)),
    url("./assets/ui/login/frozen-gateway.webp") center / cover no-repeat,
    #071019;
}
.companion-login .front-grain { opacity: .08; }
.companion-login .front-brand .brand-sigil { border-color: rgba(217,190,124,.5); color: #a9e0e4; box-shadow: inset 0 0 16px rgba(114,199,207,.18); }
.companion-login :is(.front-brand small, .companion-kicker) { color: #f1d99a; }
.companion-login > header > b { color: #9fd9df; }
.companion-login > main { display: grid; align-content: center; padding: 12px 24px; }
.companion-login h2 { max-width: 390px; margin: 6px 0 15px; font: 28px Georgia, serif; }
.companion-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.companion-feature-grid article { display: flex; min-height: 100px; flex-direction: column; justify-content: space-between; padding: 11px; border: 1px solid var(--front-line); border-radius: 9px; background: rgba(255,255,255,.025); }
.companion-feature-grid article > b { color: var(--front-gold); font: 18px Georgia, serif; }
.companion-login .companion-feature-grid article { border-color: rgba(176,146,84,.3); border-radius: 3px; background: linear-gradient(180deg, rgba(31,42,44,.86), rgba(10,18,21,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.companion-login .companion-feature-grid article > b { color: #d2b16d; }
.companion-feature-grid article span { display: flex; flex-direction: column; }
.companion-feature-grid article strong { font-size: 9px; }
.companion-feature-grid article small { margin-top: 3px; color: var(--front-dim); font-size: 7px; line-height: 1.35; }
.companion-login-keyboard { grid-template-rows: 44px minmax(0, 1fr) 31px; }
.companion-login-keyboard > main { display: grid; grid-template-rows: 48px minmax(0, 1fr); align-content: stretch; gap: 6px; padding: 7px 0; }
.login-keyboard-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.login-keyboard-fields button {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid rgba(159,217,223,.2);
  border-radius: 3px;
  background: rgba(5,13,17,.86);
  color: #899a9c;
  cursor: pointer;
  text-align: left;
}
.login-keyboard-fields button.is-active { border-color: rgba(241,217,154,.78); color: #f4eddd; background: linear-gradient(180deg, rgba(45,55,55,.9), rgba(17,27,30,.92)); box-shadow: inset 0 0 14px rgba(128,200,207,.08); }
.login-keyboard-fields small, .login-keyboard-fields strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-keyboard-fields small { color: #9fd9df; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-keyboard-fields strong { margin-top: 2px; font: 13px Georgia, serif; }
.login-keyboard-grid { display: grid; min-height: 0; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 4px; }
.login-keyboard-key {
  min-width: 0;
  min-height: 0;
  padding: 2px;
  border: 1px solid rgba(160,182,180,.25);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(43,54,56,.94), rgba(17,26,29,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 3px rgba(0,0,0,.32);
  color: #f1ead8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.login-keyboard-key:hover { border-color: rgba(241,217,154,.58); background: linear-gradient(180deg, rgba(58,70,71,.96), rgba(23,34,37,.98)); }
.login-keyboard-key.is-controller-selected { z-index: 2; border-color: #f1d99a; outline: 2px solid #f1d99a !important; outline-offset: -2px; background: linear-gradient(180deg, #806936, #473817); box-shadow: inset 0 1px 0 rgba(255,236,179,.24), 0 0 13px rgba(149,216,222,.32) !important; }
.login-keyboard-key.is-unavailable { color: #657174; background: rgba(10,17,20,.82); }
.login-keyboard-key--mode, .login-keyboard-key--field, .login-keyboard-key--space,
.login-keyboard-key--backspace, .login-keyboard-key--clear, .login-keyboard-key--done { color: #c7dadd; background: linear-gradient(180deg, rgba(35,57,62,.94), rgba(13,29,33,.96)); }
.login-keyboard-key--login { border-color: rgba(226,194,118,.58); color: #fff0c5; background: linear-gradient(180deg, #755f30, #403213); }
.login-keyboard-key--create, .login-keyboard-key--offline { border-color: rgba(176,146,84,.38); color: #eadbb8; }
.companion-login-keyboard > footer strong { overflow: hidden; color: #9fd9df; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.companion-login-keyboard > footer b { color: #f1d99a; }
.companion-roster > main { display: grid; grid-template-columns: 190px 1fr; gap: 11px; padding: 9px 0; }
.companion-dungeon-browser { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
.companion-category-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.companion-category-tabs button { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 7px; border: 1px solid rgba(204,224,180,.13); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; }
.companion-category-tabs button.is-active { border-color: rgba(218,192,102,.52); background: rgba(111,126,66,.22); }
.companion-category-tabs strong { color: var(--front-gold); font: 11px Georgia, serif; font-weight: 400; }
.companion-category-tabs small { color: var(--front-dim); font-size: 7px; }
.companion-mini-roster { min-height: 0; overflow: auto; }
.companion-mini-roster button { display: grid; width: 100%; min-height: 39px; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; margin-bottom: 4px; padding: 5px; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
.companion-mini-roster button.is-active { border-color: var(--front-line); background: rgba(99,142,79,.17); }
.companion-mini-roster button:disabled { cursor: not-allowed; opacity: .42; }
.companion-mini-roster button > span { display: grid; width: 27px; height: 27px; place-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 5px; background: rgba(0,0,0,.35); }
.companion-character-icon img { width: 100%; height: 100%; object-fit: cover; }
.companion-mini-roster button strong { font-size: 9px; }
.companion-mini-roster button small { color: var(--front-dim); font-size: 7px; }
.companion-mini-roster > p { color: var(--front-dim); font-size: 9px; }
.companion-selection-card { display: grid; min-width: 0; grid-template-columns: 145px 1fr; align-items: stretch; border: 1px solid var(--front-line); border-radius: 10px; background: rgba(255,255,255,.02); }
.companion-selection-card .character-preview { height: 100%; }
.companion-selection-card dl { align-self: center; padding-right: 12px; }
.companion-selection-card > p { align-self: center; padding: 16px; color: var(--front-dim); font-size: 9px; line-height: 1.5; }
.companion-dungeon-role > section { align-self: center; min-width: 0; padding: 10px 12px 10px 4px; }
.companion-dungeon-role h2 { margin: 3px 0 8px; font: 20px Georgia, serif; font-weight: 400; }
.companion-role-options { display: grid; gap: 5px; }
.companion-role-options button { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(126,162,99,.08); color: var(--front-cream); cursor: pointer; text-align: left; }
.companion-role-options button:hover { background: rgba(126,162,99,.2); }
.companion-role-options strong { font: 11px Georgia, serif; }
.companion-role-options small { color: var(--front-dim); font-size: 7px; text-align: right; }
.companion-actions { gap: 7px; justify-content: flex-end !important; }
.companion-actions button { min-width: 116px; min-height: 31px; border: 1px solid var(--front-line); border-radius: 6px; background: rgba(126,162,99,.09); color: var(--front-cream); cursor: pointer; font-size: 8px; }
.companion-actions button:last-child { background: #526f44; }
.companion-actions button:disabled { opacity: .4; }
.companion-create > main { display: grid; grid-template-columns: 190px 1fr; align-items: stretch; gap: 14px; padding: 9px 18px; }
.companion-create main > section { align-self: center; }
.companion-create h2 { margin: 4px 0 10px; font: 23px Georgia, serif; }
.companion-character-status { display: grid; grid-template-columns: 34px auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 8px; }
.companion-character-status > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; font-size: 8px; }
.companion-character-status strong { align-self: end; font: 13px Georgia, serif; }
.companion-character-status small { align-self: start; color: var(--front-dim); font-size: 7px; }
.companion-game { grid-template-rows: 48px minmax(0, 1fr) 48px; }
.companion-game > main { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 9px 0; }
.companion-vitals { display: grid; align-content: center; gap: 15px; padding: 10px; border: 1px solid var(--front-line); border-radius: 9px; }
.companion-vitals > div { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.companion-vitals span, .companion-vitals strong { font-size: 8px; }
.companion-vitals span { color: var(--front-dim); text-transform: uppercase; }
.companion-vitals i { grid-column: 1 / 3; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.companion-vitals i b { display: block; height: 100%; background: linear-gradient(90deg, #5e9b57, #9ad674); }
.companion-vitals > div:nth-child(2) i b { background: linear-gradient(90deg, #3f73a9, #77b7e3); }
.companion-vitals .companion-cast { padding: 4px 5px; border: 1px solid rgba(226,199,112,.2); border-radius: 5px; background: rgba(0,0,0,.24); }
.companion-vitals .companion-cast i b { background: linear-gradient(90deg, #c39a47, #f2dc80); }
.companion-vitals .companion-cast--channel i b { background: linear-gradient(90deg, #7551a9, #bc8be2); }
.companion-map-card { display: grid; min-width: 0; grid-template-columns: minmax(180px, 1fr) 132px; overflow: hidden; border: 1px solid var(--front-line); border-radius: 9px; background: #07140f; }
.companion-map-card svg { width: 100%; height: 100%; min-height: 0; }
.companion-map-card > div { align-self: center; padding: 8px; }
.companion-map-card > div span, .companion-map-card > div strong, .companion-map-card > div small { display: block; }
.companion-map-card > div span { color: var(--front-green-bright); font-size: 7px; text-transform: uppercase; }
.companion-map-card > div strong { margin: 3px 0; font: 13px Georgia, serif; }
.companion-map-card > div small { color: var(--front-dim); font-size: 7px; line-height: 1.4; }
.companion-actions--game button { min-width: 78px; }

/* Optional online groups stay collapsed until a player needs lobby controls. */
.online-group-panel { margin: 9px 0; border: 1px solid rgba(111,190,174,.24); border-radius: 8px; background: rgba(3,18,17,.72); color: var(--front-cream); }
.online-group-panel > summary { display: grid; min-height: 42px; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; padding: 6px 9px; cursor: pointer; list-style: none; }
.online-group-panel > summary::-webkit-details-marker { display: none; }
.online-group-panel > summary > span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(112,212,190,.42); border-radius: 50%; color: #87dcc7; font-size: 12px; }
.online-group-panel > summary strong { font: 12px Georgia, serif; font-weight: 400; }
.online-group-panel > summary small { color: #8fb4a9; font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }
.online-group-panel[open] > summary { border-bottom: 1px solid rgba(111,190,174,.16); background: rgba(91,155,133,.07); }
.online-group-panel__body { display: grid; gap: 8px; padding: 8px; }
.online-group-panel__body section > strong, .online-group-roster header strong, .online-group-role > strong { color: #b6dfce; font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.online-group-roster header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.online-group-roster header small { color: var(--front-dim); font-size: 7px; }
.online-group-member { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(203,219,180,.08); }
.online-group-member > span { width: 6px; height: 6px; border: 1px solid #6e776d; border-radius: 50%; background: #313b36; }
.online-group-member > span.is-ready { border-color: #72d0a0; background: #3fa16f; box-shadow: 0 0 5px rgba(92,211,143,.48); }
.online-group-member p { min-width: 0; margin: 0; }
.online-group-member p strong, .online-group-member p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-group-member p strong { font-size: 8px; }
.online-group-member p small { margin-top: 1px; color: var(--front-dim); font-size: 6px; }
.online-group-member > b { color: #d2e5da; font-size: 6px; font-weight: 600; text-transform: uppercase; }
.online-group-member button, .online-group-invites button, .online-group-role button, .online-group-invite-form button, .online-group-leave { padding: 4px 7px; border: 1px solid rgba(143,201,180,.27); border-radius: 4px; background: rgba(89,139,113,.13); color: #e7f2e9; font-size: 7px; cursor: pointer; }
.online-group-member button:disabled, .online-group-invites button:disabled, .online-group-role button:disabled, .online-group-invite-form button:disabled, .online-group-leave:disabled { cursor: not-allowed; opacity: .45; }
.online-group-invites { display: grid; gap: 4px; padding: 6px; border: 1px solid rgba(218,188,91,.2); border-radius: 6px; background: rgba(129,104,33,.09); }
.online-group-invites > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px; }
.online-group-invites span b, .online-group-invites span small { display: block; }
.online-group-invites span b { font-size: 8px; }
.online-group-invites span small { color: var(--front-dim); font-size: 6px; }
.online-group-role { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.online-group-role > div { display: flex; gap: 4px; }
.online-group-role button.is-active { border-color: rgba(116,222,178,.7); background: rgba(62,139,105,.35); color: #dffff0; }
.online-group-ai-toggle { display: flex; align-items: center; gap: 7px; padding: 6px; border-radius: 6px; background: rgba(255,255,255,.025); cursor: pointer; }
.online-group-ai-toggle input { accent-color: #5fae84; }
.online-group-ai-toggle span strong, .online-group-ai-toggle span small { display: block; }
.online-group-ai-toggle span strong { font-size: 8px; }
.online-group-ai-toggle span small { margin-top: 1px; color: var(--front-dim); font-size: 6px; }
.online-group-invite-form { display: grid; gap: 3px; }
.online-group-invite-form > label { color: var(--front-dim); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.online-group-invite-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.online-group-invite-form input { min-width: 0; padding: 6px 8px; border: 1px solid rgba(143,201,180,.22); border-radius: 5px; outline: none; background: rgba(0,0,0,.3); color: var(--front-cream); font: 8px inherit; }
.online-group-invite-form input:focus { border-color: rgba(111,211,181,.68); box-shadow: 0 0 0 2px rgba(76,165,136,.12); }
.online-group-activity { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 7px; border: 1px solid rgba(221,186,82,.3); border-radius: 6px; background: rgba(145,108,22,.12); }
.online-group-activity span strong, .online-group-activity span small { display: block; }
.online-group-activity strong { color: #efd98d; font: 10px Georgia, serif; }
.online-group-activity small { color: var(--front-dim); font-size: 6px; }
.online-group-activity button { padding: 4px 7px; border: 1px solid rgba(221,186,82,.3); border-radius: 4px; background: rgba(131,96,19,.25); color: #efdda0; font-size: 7px; cursor: pointer; }
.online-group-leave { justify-self: start; border-color: rgba(192,116,103,.28); background: rgba(126,57,49,.12); color: #e8bbb2; }
.online-group-error { margin: 0; color: #f1a99d; font-size: 7px; line-height: 1.35; }
.main-menu-modes > .online-group-panel { max-width: 570px; }
.dungeon-select-copy > .online-group-panel, .manastorm-role-select > .online-group-panel { margin: 8px 0 10px; }

/* Dedicated native WebViews own separate measured viewports. */
.native-platform, .native-platform body, .native-platform #root { width: 100%; height: 100%; overscroll-behavior: none; }
.native-platform .dedicated-display-surface { padding: 0; }
html[data-display-surface="top"] .single-context-toggle,
html[data-display-surface="bottom"] .single-context-toggle { display: none; }

@media (min-width: 1200px) and (min-height: 700px) {
  .single-context-layer { place-items: stretch end; }
  .single-context-surface { align-self: center; margin-right: 18px; }
  .context-open .single-context-toggle { right: 48px; }
}

@media (max-width: 900px) {
  .character-select-screen { grid-template-columns: minmax(0, 1fr) 300px; }
  .roster-header { grid-column: 1 / 3; }
  .character-select-screen > .controller-legend { grid-column: 1 / 3; }
  .character-create-screen { grid-template-columns: 235px minmax(220px, 1fr) 270px; }
  .main-menu-screen { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 16px; }
  .main-menu-mode { min-height: 72px; }
  .dungeon-select-screen { grid-template-columns: 255px minmax(0, 1fr); column-gap: 14px; }
  .dungeon-select-detail { grid-template-columns: minmax(190px, .82fr) minmax(220px, 1.18fr); gap: 13px; }
}

@media (max-width: 760px) {
  .front-surface--top { padding: 11px; }
  .login-screen { display: grid; grid-template-rows: minmax(94px, 1fr) auto 62px; overflow: auto; background-position: center 42%; }
  .login-title { min-width: min(330px, 88vw); padding-top: max(3px, env(safe-area-inset-top)); }
  .login-title__crest { width: 38px; height: 38px; }
  .login-title h1 { font-size: clamp(34px, 11vw, 46px); }
  .login-title small { font-size: 8px; }
  .login-form { width: min(410px, calc(100vw - 24px)); padding: 20px 17px 13px; }
  .login-form > input { height: 44px; font-size: 16px; }
  .login-form__actions .front-button { min-height: 48px; }
  .login-form__actions .front-button span { font-size: 11px; }
  .login-form__actions .front-button small { font-size: 7px; }
  .login-form footer, .login-lore { display: none; }
  .controller-legend { display: none; }
  .character-select-screen { display: grid; grid-template-columns: 43% 57%; grid-template-rows: 48px minmax(0,1fr) 62px; gap: 7px; }
  .roster-header { grid-column: 1 / 3; }
  .roster-header > div:nth-child(2) strong { font-size: 14px; }
  .roster-header > button { display: none; }
  .roster-list { padding: 9px 7px 9px 9px; }
  .roster-character { grid-template-columns: 31px 1fr; }
  .roster-character > span { width: 29px; height: 29px; }
  .roster-character > em { display: none; }
  .roster-character-info { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; padding: 10px; }
  .roster-character-info > small, .roster-character-info dl { display: none; }
  .roster-character-info h1 { font-size: 24px; }
  .roster-footer { grid-column: 1 / 3; padding-top: 6px; }
  .roster-footer__status { display: none; }
  .roster-enter { width: min(280px, 62%); margin-left: auto; }
  .character-avatar { transform: perspective(600px) rotateY(var(--avatar-turn)) scale(.78); }
  .main-menu-screen { grid-template-columns: 1fr; grid-template-rows: 48px auto minmax(0, 1fr); gap: 8px; }
  .main-menu-header { grid-column: 1; grid-row: 1; }
  .main-menu-header > button { padding: 6px 8px; }
  .main-menu-sidebar { grid-column: 1; grid-row: 2; display: grid; max-height: 176px; grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); gap: 8px; overflow-y: auto; }
  .main-menu-sidebar > .online-group-panel { margin: 0; }
  .main-menu-character { align-self: start; }
  .main-menu-character__summary h1 { font-size: 20px; }
  .main-menu-modes { grid-column: 1; grid-row: 3; padding-top: 10px; }
  .main-menu-mode-grid { margin-top: 0; }
  .main-menu-mode { min-height: 64px; }
  .main-menu-mode > span small { display: none; }
  .dungeon-select-screen { grid-template-columns: 40% minmax(0, 60%); grid-template-rows: 48px minmax(0,1fr); column-gap: 10px; }
  .dungeon-select-header { grid-column: 1 / 3; }
  .dungeon-select-header > div:nth-child(2) strong { font-size: 14px; }
  .dungeon-select-header > p { display: none; }
  .dungeon-select-list { padding: 11px 9px 7px 0; }
  .dungeon-select-list > header h1 { margin-bottom: 6px; font-size: 21px; }
  .dungeon-select-list > header > small { bottom: 9px; }
  .dungeon-select-row { min-height: 57px; grid-template-columns: 25px minmax(0,1fr); }
  .dungeon-select-row > em { display: none; }
  .dungeon-select-detail { grid-template-columns: 1fr; padding: 11px 0 7px; }
  .dungeon-select-map { display: none; }
  .dungeon-select-copy { padding: 4px 2px; }
  .dungeon-select-copy h2 { font-size: 23px; }
  .dungeon-select-copy dl div { padding: 4px 0; }
  .dungeon-role-option { min-height: 49px; }
  .dungeon-role-option > span small { display: none; }
  .manastorm-select-content { grid-template-columns: 42% minmax(0, 58%); gap: 11px; padding-top: 12px; }
  .manastorm-select-intro { padding: 13px; }
  .manastorm-select-intro h1 { font-size: 25px; }
  .manastorm-select-intro > p:not(.front-kicker) { font-size: 8px; }
  .manastorm-role-select > header h2 { font-size: 21px; }
  .character-create-screen { grid-template-columns: 42% 58%; grid-template-rows: 47px 3px minmax(0,1fr) 53px; }
  .creator-header { grid-column: 1 / 3; }
  .creator-progress { grid-column: 1 / 3; }
  .creator-races { grid-column: 1; }
  .creator-preview-stage { display: none; }
  .creator-classes { grid-column: 2; }
  .creator-footer { grid-column: 1 / 3; }
  .appearance-preview-stage { display: none; }
  .appearance-controls { grid-column: 1 / 3; padding-left: 8px; }
  .customization-list { grid-template-columns: 1fr; }
  .single-context-surface { border-radius: 10px; }
}

@media (max-width: 520px) {
  .main-menu-header .front-brand small, .main-menu-header .front-brand strong,
  .dungeon-select-header .front-brand small, .dungeon-select-header .front-brand strong,
  .manastorm-select-header .front-brand small, .manastorm-select-header .front-brand strong { display: none; }
  .main-menu-header .front-brand, .dungeon-select-header .front-brand, .manastorm-select-header .front-brand { gap: 0; }
  .main-menu-mode-grid { grid-template-columns: 1fr; }
  .main-menu-sidebar { max-height: 210px; grid-template-columns: 1fr; }
  .main-menu-card__grid, .main-menu-gm-grid { grid-template-columns: 1fr; }
  .main-menu-gm-modal { padding: 13px; }
  .main-menu-mode { min-height: 58px; }
  .dungeon-select-screen { grid-template-columns: 1fr; grid-template-rows: 48px minmax(150px, 42%) minmax(0,58%); gap: 0; }
  .dungeon-select-header { grid-column: 1; grid-row: 1; }
  .dungeon-select-list { grid-column: 1; grid-row: 2; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--front-line); }
  .dungeon-select-list > header { display: none; }
  .dungeon-select-list__items { padding-right: 2px; }
  .dungeon-select-row { min-height: 52px; }
  .dungeon-select-back { min-height: 34px; }
  .dungeon-select-detail { grid-column: 1; grid-row: 3; padding: 9px 0 0; }
  .dungeon-select-copy dl { display: none; }
  .dungeon-role-picker { gap: 5px; }
  .dungeon-role-picker > header h3 { font-size: 18px; }
  .dungeon-role-picker > header > small { display: none; }
  .dungeon-role-picker__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dungeon-role-option { display: flex; min-height: 44px; justify-content: center; padding: 5px; }
  .dungeon-role-option > b { width: 25px; height: 25px; font-size: 13px; }
  .dungeon-role-option > span small { display: none; }
  .manastorm-select-header > p { display: none; }
  .manastorm-select-content { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 7px; padding: 9px 0 0; }
  .manastorm-select-intro { padding: 9px 12px; }
  .manastorm-select-intro h1 { margin-block: 2px 4px; font-size: 21px; }
  .manastorm-select-intro > p:not(.front-kicker) { margin-block: 3px; line-height: 1.4; }
  .manastorm-select-intro dl { display: none; }
  .manastorm-role-select { padding: 5px 0; }
  .manastorm-role-select > header small { display: none; }
  .manastorm-role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
  .manastorm-role-grid .dungeon-role-option { display: flex; min-height: 44px; justify-content: center; padding: 5px; }
}

@media (pointer: coarse) {
  .main-menu-mode, .dungeon-category-tab, .dungeon-select-row, .dungeon-select-back, .dungeon-select-enter, .dungeon-role-option, .manastorm-select-back { min-height: 48px; }
}

@media (max-height: 500px) {
  .login-screen { grid-template-columns: minmax(190px, .8fr) minmax(380px, 1.2fr); grid-template-rows: 1fr; gap: 20px; overflow: auto; background-position: center 40%; }
  .login-title { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; padding-left: 10px; }
  .login-title h1 { font-size: clamp(32px, 5vw, 42px); }
  .login-form { grid-column: 2; grid-row: 1; align-self: center; width: min(560px, 100%); padding: 16px 20px 11px; }
  .login-form header { margin-bottom: 7px; }
  .login-form header strong { font-size: 20px; }
  .login-form > label { margin-top: 5px; }
  .login-form > input { height: 36px; }
  .login-form__actions { grid-template-columns: 1.1fr 1fr 1fr; margin-top: 9px; }
  .login-form__actions .front-button--primary { grid-column: auto; }
  .login-form__actions .front-button { min-width: 0; }
  .login-form__actions small { display: none; }
  .login-form footer, .login-lore { display: none; }
}

@media (max-width: 620px) and (max-height: 500px) {
  .login-screen { display: grid; grid-template-columns: 1fr; grid-template-rows: 54px auto; gap: 4px; align-content: center; background-position: center; }
  .login-title { grid-column: 1; grid-row: 1; align-self: start; display: grid; grid-template-columns: 36px auto; width: min(420px, calc(100vw - 24px)); align-items: center; justify-content: center; gap: 0 12px; padding: 0; }
  .login-title__crest { grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; }
  .login-title p { align-self: end; margin: 0; font-size: 6px; text-align: left; }
  .login-title h1 { align-self: start; font-size: 27px; text-align: left; }
  .login-title small { display: none; }
  .login-form { grid-column: 1; grid-row: 2; width: min(480px, calc(100vw - 24px)); }
}

.world-transition {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: radial-gradient(circle, rgba(79,128,76,.28), transparent 28%), #06100c;
  color: var(--front-cream);
}
.world-transition span { display: grid; width: 58px; height: 58px; margin-bottom: 9px; place-items: center; border: 1px solid var(--front-line); border-radius: 50%; color: var(--front-green-bright); font: 16px Georgia, serif; }
.world-transition strong { font: 23px Georgia, serif; }
.world-transition small { color: var(--front-dim); }

/* Tactical lower-screen gameplay surface */
.companion-game { grid-template-rows: 48px minmax(0, 1fr) 66px; }
.companion-game > main.companion-tactical { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: 74px minmax(0, 1fr) 128px; gap: 8px; }
.companion-party-strip { grid-column: 1 / 3; min-width: 0; padding: 5px 6px; border: 1px solid rgba(191,210,158,.14); border-radius: 8px; background: rgba(0,0,0,.18); }
.companion-party-strip > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 14px; }
.companion-party-strip > header strong { color: #dceacb; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.companion-party-strip > header small { color: var(--front-dim); font-size: 6px; }
.companion-party-strip > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
.companion-party-strip button { position: relative; display: grid; min-width: 0; height: 43px; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 1fr 6px; align-items: center; gap: 2px 5px; padding: 3px 4px; border: 1px solid rgba(198,216,169,.14); border-radius: 5px; background: rgba(255,255,255,.025); color: var(--front-cream); cursor: pointer; text-align: left; }
.companion-party-strip button.is-selected { border-color: rgba(231,207,105,.7); background: rgba(115,104,42,.22); }
.companion-party-strip button.is-down { opacity: .5; filter: grayscale(.7); }
.companion-party-strip button > b { display: grid; width: 23px; height: 23px; grid-row: 1; place-items: center; border: 1px solid var(--party-class-color, #789b68); border-radius: 50%; background: rgba(0,0,0,.25); font-size: 6px; }
.companion-party-strip button > span { display: flex; min-width: 0; flex-direction: column; }
.companion-party-strip button > span strong, .companion-party-strip button > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.companion-party-strip button > span strong { font-size: 7px; }
.companion-party-strip button > span small { color: var(--front-dim); font-size: 5px; }
.companion-party-strip button > i { grid-column: 1 / 3; display: block; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.66); }
.companion-party-strip button > i span { display: block; height: 100%; background: linear-gradient(90deg, #3d7a42, #7abd5e); }
.companion-tactical__status { position: relative; padding: 8px; }
.companion-tactical__status .experience-bar { position: relative; right: auto; bottom: auto; left: auto; width: 100%; height: 15px; flex: 0 0 auto; }
.companion-tactical__status .experience-bar__label { gap: 4px; font-size: 6px; }
.companion-tactical__actions { position: relative; overflow: visible; }
.companion-tactical__actions .action-bar { position: relative; bottom: auto; left: auto; width: 100%; transform: none; scale: none; }
.companion-tactical__actions .action-bar--compact { --action-slot-size: 28px; max-width: 290px; margin: 16px auto 0; }
.companion-tactical__actions .action-bar--compact .action-bar__layer-status { margin-bottom: 2px; }
.companion-tactical__actions .action-bar--compact .action-bar__layer-status span { min-width: 31px; padding: 1px 4px; font-size: 5px; }
.companion-tactical__actions .action-bar--compact .action-bar__controller { min-height: 88px; grid-template-columns: 66px 76px 88px; gap: 3px; padding: 2px 4px; border-radius: 21px 21px 9px 9px; }
.companion-tactical__actions .action-bar--compact .action-cluster--face { width: 88px; height: 88px; gap: 2px; }
.companion-tactical__actions .action-bar--compact .action-cluster--dpad { grid-template-columns: 28px 10px 28px; padding-bottom: 18px; }
.companion-tactical__actions .action-bar--compact .action-cluster__dpad-center { width: 10px; font-size: 9px; }
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders { grid-template-columns: repeat(2, 36px); gap: 2px; padding-top: 2px; }
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders .action-slot { width: 36px; min-width: 36px; }
.companion-tactical__actions .action-bar--compact .action-cluster--shoulders::after { height: 24px; margin: 2px 9px 0; }
.companion-tactical__actions .action-bar--compact .action-slot__icon { width: 20px; height: 20px; }
.companion-tactical__actions .action-bar--compact .action-slot__binding { min-width: 11px; height: 11px; font-size: 5px; }
.companion-tactical__actions .action-bar--compact .action-bar__detail { width: 70px; margin-bottom: 11px; padding: 2px 3px; }
.companion-tactical__actions .action-bar--compact .action-bar__detail strong { font-size: 6px; }
.companion-tactical__actions .action-bar--compact .action-bar__detail span { font-size: 5px; }
.companion-tactical__actions .action-bar--compact .action-slot__target { font-size: 3px; }
.companion-tactical__actions .action-bar__feedback { min-height: 15px; overflow: hidden; padding-bottom: 2px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.companion-target { padding: 7px; border: 1px solid rgba(191,210,158,.14); border-radius: 7px; background: rgba(0,0,0,.2); }
.companion-target > header { display: block; height: auto; padding: 0; border: 0; }
.companion-target > header span, .companion-target > header strong { display: block; }
.companion-target > header span { color: var(--front-dim); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.companion-target > header strong { margin-top: 2px; overflow: hidden; font: 11px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.companion-target__track { height: 6px; margin: 5px 0 3px; overflow: hidden; border-radius: 3px; background: rgba(0,0,0,.6); }
.companion-target__track span { display: block; height: 100%; background: linear-gradient(90deg, #84352e, #ca6248); }
.companion-target > small { display: block; overflow: hidden; color: var(--front-dim); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.companion-target--boss { border-color: rgba(224,176,80,.35); }
.companion-target--dead { opacity: .55; }
.companion-target__actions { display: flex; gap: 4px; margin-top: 5px; }
.companion-target__actions button { flex: 1; min-height: 24px; border: 1px solid var(--front-line); border-radius: 5px; background: rgba(139,183,112,.08); color: var(--front-cream); font-size: 7px; }
.companion-menu-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding-top: 7px; }
.companion-actions--game.companion-menu-grid button { min-width: 0; padding: 0 3px; font-size: 7px; }
.companion-menu-grid button.is-active { border-color: rgba(198,226,146,.48); background: rgba(102,151,76,.35); color: #f4ffe1; }

@media (max-width: 560px) {
  .companion-game > main.companion-tactical { grid-template-columns: 155px minmax(0, 1fr); }
  .companion-menu-grid { gap: 2px; }
  .companion-actions--game.companion-menu-grid button { font-size: 6px; }
}

/* Keep the controller readable on unusually narrow browser windows. */
@media (max-width: 460px) {
  .hud-bottom-stack > .action-bar { --action-slot-size: 32px; width: 292px; }
  .hud-bottom-stack > .control-hint { max-width: 292px; }
  .hud-bottom-stack .action-bar__controller { min-height: 100px; grid-template-columns: 80px 90px 100px; gap: 3px; padding: 3px 4px; }
  .hud-bottom-stack .action-cluster--face { width: 100px; height: 100px; }
  .hud-bottom-stack .action-cluster--dpad { grid-template-columns: 32px 14px 32px; padding-bottom: 18px; }
  .hud-bottom-stack .action-cluster__dpad-center { width: 14px; }
  .hud-bottom-stack .action-cluster--shoulders { grid-template-columns: repeat(2, 43px); gap: 3px; }
  .hud-bottom-stack .action-cluster--shoulders .action-slot { width: 43px; min-width: 43px; }
  .hud-bottom-stack .action-bar__detail { width: 82px; margin-bottom: 14px; }
}

@media (max-width: 360px) {
  .hud-bottom-stack > .action-bar { --action-slot-size: 28px; width: 252px; }
  .hud-bottom-stack > .control-hint { max-width: 252px; }
  .hud-bottom-stack .action-bar__controller { min-height: 88px; grid-template-columns: 70px 78px 88px; gap: 3px; padding: 2px 4px; }
  .hud-bottom-stack .action-cluster--face { width: 88px; height: 88px; }
  .hud-bottom-stack .action-cluster--dpad { grid-template-columns: 28px 14px 28px; padding-bottom: 16px; }
  .hud-bottom-stack .action-cluster--shoulders { grid-template-columns: repeat(2, 38px); gap: 2px; }
  .hud-bottom-stack .action-cluster--shoulders .action-slot { width: 38px; min-width: 38px; }
  .hud-bottom-stack .action-bar__detail { width: 70px; margin-bottom: 11px; padding-inline: 3px; }
  .hud-bottom-stack .action-bar__detail strong { font-size: 6px; }
  .hud-bottom-stack .action-bar__detail span { font-size: 5px; }
}

@media (pointer: coarse) {
  .hud-bottom-stack { scale: 1; }
  .hud-bottom-stack > .action-bar { --action-slot-size: 44px; width: min(400px, calc(100vw - 16px)); }
  .hud-bottom-stack > .control-hint { max-width: min(400px, calc(100vw - 16px)); }
  .hud-bottom-stack .action-bar__controller { min-height: 144px; grid-template-columns: 106px 122px 136px; gap: 5px; padding: 3px 5px; }
  .hud-bottom-stack .action-cluster--face { width: 136px; height: 136px; }
  .hud-bottom-stack .action-cluster--dpad { grid-template-columns: 44px 18px 44px; padding-bottom: 25px; }
  .hud-bottom-stack .action-cluster--shoulders { grid-template-columns: repeat(2, 58px); gap: 4px; }
  .hud-bottom-stack .action-cluster--shoulders .action-slot { width: 58px; min-width: 58px; }
  .hud-bottom-stack .action-slot__icon { width: 30px; height: 30px; }
  .hud-bottom-stack .action-bar__detail { width: 112px; margin-bottom: 24px; }

  .companion-game > main.companion-tactical { grid-template-rows: 74px minmax(0, 1fr) 176px; }
  .companion-tactical__actions .action-bar--compact { --action-slot-size: 44px; max-width: 400px; }
  .companion-tactical__actions .action-bar--compact .action-bar__controller { min-height: 144px; grid-template-columns: 106px 122px 136px; gap: 5px; padding: 3px 5px; }
  .companion-tactical__actions .action-bar--compact .action-cluster--face { width: 136px; height: 136px; }
  .companion-tactical__actions .action-bar--compact .action-cluster--dpad { grid-template-columns: 44px 18px 44px; padding-bottom: 25px; }
  .companion-tactical__actions .action-bar--compact .action-cluster__dpad-center { width: 18px; font-size: 12px; }
  .companion-tactical__actions .action-bar--compact .action-cluster--shoulders { grid-template-columns: repeat(2, 58px); gap: 4px; }
  .companion-tactical__actions .action-bar--compact .action-cluster--shoulders .action-slot { width: 58px; min-width: 58px; }
  .companion-tactical__actions .action-bar--compact .action-slot__icon { width: 30px; height: 30px; }
  .companion-tactical__actions .action-bar--compact .action-slot__binding { min-width: 15px; height: 15px; font-size: 8px; }
  .companion-tactical__actions .action-bar--compact .action-bar__detail { width: 112px; margin-bottom: 24px; padding: 3px 5px; }
  .companion-tactical__actions .action-bar--compact .action-bar__detail strong { font-size: 8px; }
  .companion-tactical__actions .action-bar--compact .action-bar__detail span { font-size: 6px; }
}

@media (max-width: 400px) and (pointer: coarse) {
  .hud-bottom-stack > .action-bar { width: 252px; }
  .hud-bottom-stack > .control-hint { max-width: 252px; }
  .hud-bottom-stack .action-bar__controller { min-height: 191px; grid-template-columns: 106px 136px; grid-template-rows: 44px 136px; gap: 3px 2px; padding: 3px; }
  .hud-bottom-stack .action-cluster--shoulders { grid-column: 1 / 3; grid-row: 1; align-self: start; justify-self: center; padding-top: 0; }
  .hud-bottom-stack .action-cluster--shoulders::after { display: none; }
  .hud-bottom-stack .action-cluster--dpad { grid-column: 1; grid-row: 2; align-self: center; padding-bottom: 0; }
  .hud-bottom-stack .action-cluster--face { grid-column: 2; grid-row: 2; }
  .hud-bottom-stack .action-bar__detail { display: none; }
}

@media (max-width: 620px), (max-height: 560px) {
  .manastorm-status { top: 6px; min-width: 190px; padding: 4px 8px 4px 5px; }
  .manastorm-status > div { width: 34px; height: 34px; flex-basis: 34px; }
  .manastorm-status > div strong { font-size: 14px; }
  .manastorm-status > p b { font-size: 9px; }
  .manastorm-status > p small { font-size: 5px; }
  .manastorm-objective { top: max(156px, calc(env(safe-area-inset-top) + 144px)); width: min(220px, calc(100vw - 24px)); padding-block: 3px; }
  .manastorm-client-overlay { top: 76px; }
  .manastorm-countdown { min-width: 66px; padding-block: 4px; }
  .manastorm-safety-bubble { width: 156px; padding-block: 4px 5px; }
  .hud:has(.manastorm-client-overlay) .manastorm-cache-open { top: 120px; }
}

@media (max-width: 520px) {
  .manastorm-objective {
    top: max(104px, calc(env(safe-area-inset-top) + 94px));
    right: 7px;
    width: 92px;
    padding-inline: 6px;
    line-height: 1.35;
  }
}

@media (max-width: 390px) {
  .manastorm-status { left: 8px; min-width: 0; max-width: calc(100vw - 116px); transform: none; }
  .manastorm-status > p small { overflow: hidden; max-width: 145px; text-overflow: ellipsis; white-space: nowrap; }
  .manastorm-objective { left: auto; max-width: 92px; }
  .manastorm-client-overlay { right: 8px; left: auto; max-width: calc(100vw - 16px); transform: none; }
}

/* Shared loot inventory and party equipment */
.manastorm-objective--awaiting-loot {
  border-color: rgba(232, 194, 96, .56);
  box-shadow: 0 0 18px rgba(224, 166, 54, .13);
  font-family: inherit;
  cursor: pointer;
}
.manastorm-objective--awaiting-loot:hover,
.manastorm-objective--awaiting-loot:focus-visible {
  border-color: rgba(255, 224, 133, .9);
  background: rgba(42, 30, 12, .92);
}

.equipment-panel { width: min(1120px, 100%); max-height: calc(100vh - 28px); overflow: hidden; }
.equipment-panel__summary { display: grid; grid-template-columns: auto auto 1px auto auto; align-items: baseline; gap: 4px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.equipment-panel__summary strong { color: #e7d491; font: 700 14px Georgia, serif; }
.equipment-panel__summary i { width: 1px; height: 19px; margin: 0 5px; background: rgba(216,226,194,.15); }
.equipment-panel__owners { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.equipment-owner {
  display: grid;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(190,210,157,.13);
  border-radius: 7px;
  background: rgba(152,181,122,.04);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.equipment-owner:hover, .equipment-owner.is-active { border-color: color-mix(in srgb, var(--equipment-class-color) 70%, #ded5a3); background: color-mix(in srgb, var(--equipment-class-color) 15%, transparent); }
.equipment-owner > b { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--equipment-class-color); border-radius: 50%; font: 700 9px Georgia, serif; }
.equipment-owner > span { min-width: 0; }
.equipment-owner strong, .equipment-owner small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-owner strong { font-size: 9px; }
.equipment-owner small { margin-top: 2px; color: var(--muted); font-size: 6px; text-transform: capitalize; }
.equipment-owner > em { color: #d8c478; font: 700 12px Georgia, serif; font-style: normal; }

.equipment-panel__body { display: grid; min-height: 0; height: min(430px, calc(100vh - 190px)); grid-template-columns: minmax(250px, .9fr) minmax(300px, 1.15fr) minmax(215px, .75fr); gap: 10px; }
.equipment-loadout, .equipment-inventory, .equipment-details { min-width: 0; min-height: 0; padding: 10px; border: 1px solid rgba(210,188,119,.15); border-radius: 9px; background: rgba(12,18,12,.5); }
.equipment-loadout > header, .equipment-inventory > header { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.equipment-loadout > header span, .equipment-inventory > header span { display: flex; flex-direction: column; }
.equipment-loadout > header small, .equipment-inventory > header small { color: var(--muted); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.equipment-loadout > header strong, .equipment-inventory > header strong { font: 15px Georgia, serif; }
.equipment-loadout > header > b, .equipment-inventory > header > b { color: #c8b66f; font-size: 7px; text-transform: uppercase; }
.equipment-stat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 4px; }
.equipment-stat-tabs button { padding: 4px 3px; border: 1px solid rgba(216,196,121,.13); border-radius: 4px; background: rgba(197,169,87,.04); color: var(--muted); font-size: 6px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.equipment-stat-tabs button:hover, .equipment-stat-tabs button.is-active { border-color: rgba(223,196,105,.48); background: rgba(197,169,87,.13); color: #ead68e; }
.equipment-character-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 7px; margin: 0 0 4px; padding: 6px; border: 1px solid rgba(216,196,121,.13); border-radius: 5px; background: rgba(197,169,87,.045); }
.equipment-character-stats > div { display: flex; min-width: 0; justify-content: space-between; gap: 4px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.035); }
.equipment-character-stats dt { overflow: hidden; color: var(--muted); font-size: 5px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.equipment-character-stats dd { margin: 0; color: #ead68e; font: 700 7px Georgia, serif; white-space: nowrap; }
.equipment-character-vitals { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: 5px; }
.equipment-character-vitals strong { color: #9fd184; font-size: 6px; }
.equipment-loadout__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow: auto; max-height: calc(100% - 153px); padding-right: 2px; }
.equipment-slot {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid rgba(178,193,151,.12);
  border-left: 3px solid var(--item-quality, rgba(178,193,151,.18));
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  color: var(--ink);
  text-align: left;
}
button.equipment-slot { cursor: pointer; }
button.equipment-slot:hover { background: rgba(174,191,131,.1); }
.equipment-slot > span { min-width: 0; }
.equipment-slot small, .equipment-slot strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-slot small { color: var(--muted); font-size: 5px; letter-spacing: .06em; text-transform: uppercase; }
.equipment-slot strong { margin-top: 2px; font-size: 7px; }
.equipment-slot > em { color: #c6b77f; font-size: 5px; font-style: normal; text-transform: uppercase; }
.equipment-slot.is-empty { opacity: .48; border-left-color: rgba(178,193,151,.12); }

.equipment-inventory__list { display: grid; align-content: start; gap: 5px; overflow: auto; max-height: calc(100% - 35px); padding-right: 3px; }
.equipment-item {
  display: grid;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(190,210,157,.13);
  border-left: 3px solid var(--item-quality, #839270);
  border-radius: 6px;
  background: rgba(152,181,122,.035);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.equipment-item:hover, .equipment-item.is-inspected { background: rgba(152,181,122,.1); }
.equipment-item.is-incompatible { opacity: .62; }
.equipment-item > b, .equipment-details__icon { display: grid; place-items: center; border: 1px solid var(--item-quality, #839270); border-radius: 6px; background: color-mix(in srgb, var(--item-quality, #839270) 18%, #08120d); color: #f1f0d8; font: 700 9px Georgia, serif; }
.equipment-item > b { width: 32px; height: 32px; }
.equipment-item > span { min-width: 0; }
.equipment-item strong, .equipment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-item strong { font-size: 9px; }
.equipment-item small { margin-top: 3px; color: var(--muted); font-size: 6px; }
.equipment-item .equipment-item__stats { color: #9fd184; }
.equipment-item > em { max-width: 72px; overflow: hidden; color: #c8b66f; font-size: 6px; font-style: normal; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.equipment-details { overflow: auto; background: rgba(22,20,12,.4); }
.equipment-details__icon { width: 48px; height: 48px; }
.equipment-details > p:not(.eyebrow) { color: var(--muted); font-size: 10px; line-height: 1.45; }
.equipment-details dl { margin: 12px 0; }
.equipment-details dl div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 8px; }
.equipment-details dd { margin: 0; color: #e6d293; text-align: right; }
.equipment-details__stats { padding: 5px 8px; border: 1px solid rgba(127,180,94,.2); border-radius: 6px; background: rgba(79,125,53,.09); }
.equipment-details .equipment-details__stats div:first-child { border-top: 0; }
.equipment-details__stats dd { color: #a9de86; font-weight: 700; }
.equipment-details__stats dd.is-beneficial { color: #72d56a; }
.equipment-details__stats dd small { color: var(--muted); font-size: 6px; font-weight: 400; }
.equipment-details__provenance { margin-top: 8px !important; }
.equipment-details__feedback { margin-top: 9px; padding: 6px; border-radius: 5px; background: rgba(111,148,81,.12); }
.equipment-details__feedback.is-error { background: rgba(157,67,49,.17); color: #f0aa94 !important; }
.equipment-quality--common { --item-quality: #b9b9b0; }
.equipment-quality--uncommon { --item-quality: #79c65d; }
.equipment-quality--rare { --item-quality: #62a7e8; }
.equipment-quality--epic { --item-quality: #aa76e8; }
.equipment-quality--legendary { --item-quality: #e9a240; }
.equipment-quality--heirloom { --item-quality: #d9b45b; }

.creator-specializations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.creator-specializations > strong {
  grid-column: 1 / -1;
  color: var(--front-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.creator-specializations button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
}

.creator-specializations button.is-active {
  border-color: var(--front-accent);
  background: rgba(218, 179, 92, 0.12);
}

@media (max-width: 820px) {
  .equipment-panel__owners { grid-template-columns: repeat(5, minmax(70px, 1fr)); overflow-x: auto; }
  .equipment-owner { grid-template-columns: 27px minmax(0, 1fr); }
  .equipment-owner > em { display: none; }
  .equipment-panel__body { grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.1fr); }
  .equipment-details { display: none; }
}

@media (max-width: 560px) {
  .equipment-panel { overflow: auto; }
  .equipment-panel__summary { display: none; }
  .equipment-panel__owners { grid-template-columns: repeat(5, 92px); }
  .equipment-panel__body { height: auto; grid-template-columns: 1fr; }
  .equipment-loadout__slots, .equipment-inventory__list { max-height: 235px; }
  .equipment-panel .game-panel__footer { position: sticky; bottom: 0; background: rgba(5,14,10,.96); }
}
.naralex-event-prompt {
  display: grid;
  min-width: 9.5rem;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgb(185 214 122 / 55%);
  border-radius: 0.45rem;
  color: #f4f0d6;
  background: rgb(7 17 13 / 88%);
  font-size: 0.72rem;
  text-align: center;
  pointer-events: auto;
}

.naralex-event-prompt small {
  color: #b9d67a;
}

.naralex-event-prompt button {
  padding: 0.3rem 0.45rem;
  border: 1px solid #91ae5f;
  border-radius: 0.35rem;
  color: #11190e;
  background: #b9d67a;
  font: inherit;
  cursor: pointer;
}

.content-manager-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100%;
}

.content-manager-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(172, 208, 157, 0.2);
}

.content-manager-header div,
.content-pack-row div {
  display: grid;
  gap: 0.2rem;
}

.content-manager-header span,
.content-pack-row small,
.content-manager-summary small {
  color: var(--text-muted, #aab7a6);
}

.content-manager-main {
  display: grid;
  grid-template-columns: minmax(17rem, 0.75fr) minmax(24rem, 1.4fr);
  gap: 1.25rem;
  min-height: 0;
  padding: 1.25rem;
}

.content-manager-summary,
.content-manager-packs {
  min-height: 0;
  padding: 1.25rem;
  border: 1px solid rgba(172, 208, 157, 0.2);
  background: rgba(4, 12, 9, 0.78);
}

.content-manager-summary__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.content-manager-packs {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  overflow: auto;
}

.content-pack-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, auto) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(172, 208, 157, 0.14);
  background: rgba(13, 27, 20, 0.72);
}

.content-pack-row > span {
  color: #d8b67c;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.content-pack-row > span.is-installed {
  color: #9ed19d;
}

.content-pack-row .content-pack-row__actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
}

.content-manager-progress {
  position: relative;
  height: 1.35rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(172, 208, 157, 0.3);
  background: #07110d;
}

.content-manager-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4e8f64, #92c889);
  transition: width 120ms linear;
}

.content-manager-progress small {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

@media (max-width: 900px) {
  .content-manager-main { grid-template-columns: 1fr; overflow: auto; }
  .content-pack-row { grid-template-columns: 1fr auto; }
  .content-pack-row > span { grid-column: 1 / -1; }
}

/* Server-authorized Manastorm administration */
.gm-admin-screen { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.gm-admin-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--front-line);
  background: rgba(3, 10, 7, .72);
}
.gm-admin-header > div:nth-child(2) { display: grid; gap: 2px; }
.gm-admin-header > div:nth-child(2) span { color: var(--front-dim); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.gm-admin-header > div:nth-child(2) strong { font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.gm-admin-header__actions { display: flex; gap: 7px; }
.gm-admin-layout { display: grid; grid-template-columns: minmax(205px, .72fr) minmax(330px, 1.55fr) minmax(240px, .82fr); min-height: 0; }
.gm-admin-options, .gm-boss-browser, .gm-boss-detail { min-width: 0; min-height: 0; padding: 16px; }
.gm-admin-options { overflow: auto; }
.gm-admin-options, .gm-boss-browser { border-right: 1px solid var(--front-line); }
.gm-admin-options h2, .gm-boss-browser h2, .gm-boss-detail h2 { margin: 4px 0 13px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.gm-random-qa { display: grid; gap: 6px; margin: -2px 0 18px; padding-bottom: 17px; border-bottom: 1px solid var(--front-line); }
.gm-random-qa h2 { margin-bottom: 2px; }
.gm-random-qa > p:not(.front-kicker) { margin: 0 0 5px; color: var(--front-dim); font-size: 8px; line-height: 1.4; }
.gm-random-qa .front-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.gm-random-qa .front-button small { color: var(--front-dim); font-size: 7px; white-space: nowrap; }
.gm-switch-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: start; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(190, 213, 172, .09); cursor: pointer; }
.gm-switch-row input { width: 17px; height: 17px; accent-color: #91bc75; }
.gm-switch-row span, .gm-switch-row strong, .gm-switch-row small { display: block; }
.gm-switch-row strong { font-size: 11px; }
.gm-switch-row small { margin-top: 3px; color: var(--front-dim); font-size: 8px; line-height: 1.35; }
.gm-admin-summary { display: grid; gap: 5px; margin-top: 14px; padding: 10px; border: 1px solid var(--front-line); border-radius: 8px; background: rgba(255,255,255,.025); font-size: 9px; }
.gm-admin-summary span { display: flex; justify-content: space-between; }
.gm-unsaved { color: #ffd06d; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.gm-boss-browser { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.gm-boss-browser > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, .75fr) 130px; align-items: end; gap: 8px; margin-bottom: 10px; }
.gm-boss-filters { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gm-boss-browser input, .gm-boss-browser select, .gm-world-editor input, .gm-world-editor select {
  width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--front-line); border-radius: 6px; outline: 0; color: var(--front-cream); background: rgba(2, 9, 6, .88); font: inherit;
}
.gm-boss-browser input:focus, .gm-boss-browser select:focus, .gm-world-editor input:focus, .gm-world-editor select:focus { border-color: rgba(169, 211, 132, .65); }
.gm-boss-list { min-height: 0; overflow: auto; border: 1px solid var(--front-line); border-radius: 8px; background: rgba(1, 8, 5, .42); }
.gm-boss-row { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; gap: 10px; padding: 10px; border: 0; border-bottom: 1px solid rgba(190, 213, 172, .08); color: var(--front-cream); background: transparent; cursor: pointer; text-align: left; }
.gm-boss-row:hover, .gm-boss-row.is-active { background: rgba(149, 190, 118, .1); }
.gm-boss-row.is-active { box-shadow: inset 3px 0 #9dcc7c; }
.gm-boss-row span, .gm-boss-row strong, .gm-boss-row small { display: block; min-width: 0; }
.gm-boss-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gm-boss-row small, .gm-boss-row em { margin-top: 3px; color: var(--front-dim); font-size: 7px; font-style: normal; }
.gm-boss-row > b { padding: 4px 5px; border-radius: 4px; color: #e8e3c8; background: rgba(173, 144, 76, .18); font-size: 7px; text-align: center; }
.gm-boss-row.is-ready > b { color: #c9f0b6; background: rgba(85, 146, 78, .24); }
.gm-boss-row.is-not-ready > b { color: #f0b6ac; background: rgba(151, 62, 53, .24); }
.gm-boss-detail { overflow: auto; background: rgba(3, 10, 7, .48); }
.gm-boss-detail > p:not(.front-kicker, .front-notice) { color: var(--front-dim); font-size: 9px; }
.gm-boss-detail dl div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(190, 213, 172, .09); font-size: 8px; }
.gm-boss-detail dd { margin: 0; color: #d7c68c; text-align: right; }
.gm-status-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 15px 0; }
.gm-status-buttons button, .gm-world-editor button { padding: 7px 9px; border: 1px solid var(--front-line); border-radius: 6px; color: var(--front-cream); background: rgba(151, 182, 127, .07); cursor: pointer; }
.gm-status-buttons button.is-active { border-color: rgba(184, 219, 144, .6); background: rgba(113, 158, 88, .26); }
.gm-status-buttons button:disabled, .gm-world-editor button:disabled { cursor: not-allowed; opacity: .4; }
.gm-review-note-editor { display: grid; gap: 6px; margin: 0 0 14px; padding: 10px; border: 1px solid rgba(190, 213, 172, .12); border-radius: 7px; background: rgba(1, 8, 5, .34); }
.gm-review-note-editor header, .gm-review-note-editor footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-review-note-editor header strong { font-size: 9px; }
.gm-review-note-editor header small, .gm-review-note-editor footer small { color: var(--front-dim); font-size: 7px; line-height: 1.4; }
.gm-review-note-editor textarea { width: 100%; min-height: 76px; padding: 8px; resize: vertical; border: 1px solid var(--front-line); border-radius: 6px; outline: 0; color: var(--front-cream); background: rgba(2, 9, 6, .88); font: inherit; font-size: 8px; line-height: 1.45; }
.gm-review-note-editor textarea:focus { border-color: rgba(169, 211, 132, .65); }
.gm-review-note-editor footer button { flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--front-line); border-radius: 5px; color: var(--front-dim); background: transparent; cursor: pointer; font-size: 7px; }
.gm-review-note-editor footer button:disabled { cursor: not-allowed; opacity: .38; }
.gm-boss-actions { display: grid; gap: 7px; }
.gm-admin-denied { display: grid; width: min(470px, calc(100% - 30px)); margin: auto; gap: 12px; padding: 26px; border: 1px solid var(--front-line); background: rgba(3, 10, 7, .75); }

/* GM server-side balance simulations */
.balance-lab-screen { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.balance-lab-screen .gm-admin-header__actions .front-button:not(.front-button--primary) { display: block; }
.balance-lab-layout { display: grid; grid-template-columns: minmax(290px, .9fr) minmax(245px, .72fr) minmax(270px, .82fr); grid-template-rows: minmax(420px, 56vh) auto; min-height: 0; overflow: auto; align-content: start; }
.balance-lab-config, .balance-lab-jobs, .balance-lab-detail { min-width: 0; min-height: 0; padding: 16px; overflow: auto; }
.balance-lab-config, .balance-lab-jobs { border-right: 1px solid var(--front-line); }
.balance-lab-config h2, .balance-lab-jobs h2, .balance-lab-detail h2 { margin: 4px 0 10px; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.balance-lab-help, .balance-lab-local-note, .balance-lab-detail > p:not(.front-kicker), .balance-lab-empty { color: var(--front-dim); font-size: 8px; line-height: 1.45; }
.balance-lab-runtime { display: grid; gap: 3px; margin-top: 10px; padding: 8px 9px; border: 1px solid rgba(121, 185, 104, .25); border-radius: 6px; color: #cbe6bb; background: rgba(53, 106, 48, .13); }
.balance-lab-runtime strong { font-size: 8px; }
.balance-lab-runtime span { color: var(--front-dim); font-size: 7px; line-height: 1.45; }
.balance-lab-runtime.is-unavailable { border-color: rgba(205, 104, 85, .4); color: #f0b6aa; background: rgba(133, 48, 39, .15); }
.balance-lab-runtime.is-unavailable span { color: #d7a89e; }
.balance-lab-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.balance-lab-form-grid label { display: grid; gap: 4px; color: var(--front-dim); font-size: 8px; }
.balance-lab-form-grid__wide { grid-column: 1 / -1; }
.balance-lab-form-grid input, .balance-lab-form-grid select, .balance-lab-boss-picker input {
  width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--front-line); border-radius: 6px; outline: 0; color: var(--front-cream); background: rgba(2, 9, 6, .88); font: inherit;
}
.balance-lab-form-grid input:focus, .balance-lab-form-grid select:focus, .balance-lab-boss-picker input:focus { border-color: rgba(169, 211, 132, .65); }
.balance-lab-boss-picker { margin-top: 10px; border: 1px solid var(--front-line); border-radius: 8px; overflow: hidden; }
.balance-lab-boss-picker > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--front-line); }
.balance-lab-boss-picker > header strong { color: #d7c68c; font-size: 8px; white-space: nowrap; }
.balance-lab-picker-actions { display: flex; align-items: center; gap: 5px; }
.balance-lab-picker-actions button { padding: 5px 7px; border: 1px solid var(--front-line); border-radius: 5px; color: var(--front-dim); background: rgba(149, 190, 118, .06); cursor: pointer; font: inherit; font-size: 7px; white-space: nowrap; }
.balance-lab-picker-actions button:hover { color: var(--front-cream); background: rgba(149, 190, 118, .12); }
.balance-lab-boss-picker > div { display: grid; max-height: 220px; overflow: auto; }
.balance-lab-boss-picker label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid rgba(190, 213, 172, .08); cursor: pointer; }
.balance-lab-boss-picker label:hover, .balance-lab-boss-picker label.is-selected { background: rgba(149, 190, 118, .1); }
.balance-lab-boss-picker label input { width: 15px; height: 15px; accent-color: #91bc75; }
.balance-lab-boss-picker label span, .balance-lab-boss-picker label strong, .balance-lab-boss-picker label small { display: block; min-width: 0; }
.balance-lab-boss-picker label strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.balance-lab-boss-picker label small { margin-top: 2px; color: var(--front-dim); font-size: 7px; }
.balance-lab-coverage-note { margin: 8px 0 0; color: var(--front-dim); font-size: 7px; line-height: 1.45; }
.balance-lab-estimate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.balance-lab-estimate span { display: grid; gap: 3px; padding: 8px; border: 1px solid rgba(190, 213, 172, .11); border-radius: 6px; color: var(--front-dim); font-size: 7px; }
.balance-lab-estimate b { color: var(--front-cream); font-size: 11px; }
.balance-lab-run { width: 100%; margin-top: 10px; }
.balance-lab-local-note { margin: 8px 0 0; }
.balance-lab-local-note code { color: #d7c68c; }
.balance-lab-jobs { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.balance-lab-jobs > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.balance-lab-jobs > header button { padding: 6px 9px; border: 1px solid var(--front-line); border-radius: 6px; color: var(--front-cream); background: transparent; cursor: pointer; font-size: 8px; }
.balance-lab-history-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 8px; }
.balance-lab-history-filters input, .balance-lab-history-filters select { min-width: 0; padding: 7px 8px; border: 1px solid var(--front-line); border-radius: 6px; outline: 0; color: var(--front-cream); background: rgba(2, 9, 6, .88); font: inherit; font-size: 8px; }
.balance-lab-history-filters input:focus, .balance-lab-history-filters select:focus { border-color: rgba(169, 211, 132, .65); }
.balance-lab-job-list { min-height: 0; overflow: auto; border: 1px solid var(--front-line); border-radius: 8px; }
.balance-lab-job-list > button { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 0; border-bottom: 1px solid rgba(190, 213, 172, .08); color: var(--front-cream); background: transparent; cursor: pointer; text-align: left; }
.balance-lab-job-list > button:hover, .balance-lab-job-list > button.is-selected { background: rgba(149, 190, 118, .1); }
.balance-lab-job-list > button.is-selected { box-shadow: inset 3px 0 #9dcc7c; }
.balance-lab-job-list span, .balance-lab-job-list strong, .balance-lab-job-list small { display: block; min-width: 0; }
.balance-lab-job-list strong { font-size: 9px; }
.balance-lab-job-list small { margin-top: 3px; color: var(--front-dim); font-size: 7px; }
.balance-lab-job-list em { padding: 4px 6px; border-radius: 4px; color: #e8e3c8; background: rgba(173, 144, 76, .18); font-size: 7px; font-style: normal; text-transform: uppercase; }
.balance-lab-job-list em.is-complete { color: #c9f0b6; background: rgba(85, 146, 78, .24); }
.balance-lab-job-list em.is-failed { color: #f0b6ac; background: rgba(151, 62, 53, .24); }
.balance-lab-job-list em.is-running { color: #cce8ff; background: rgba(68, 125, 158, .24); }
.balance-lab-empty { padding: 12px; }
.balance-lab-detail { background: rgba(3, 10, 7, .48); }
.balance-lab-progress { height: 8px; margin: 12px 0; overflow: hidden; border: 1px solid var(--front-line); border-radius: 999px; background: rgba(0,0,0,.32); }
.balance-lab-progress span { display: block; height: 100%; background: linear-gradient(90deg, #4e8f64, #92c889); transition: width 180ms linear; }
.balance-lab-detail dl div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(190, 213, 172, .09); font-size: 8px; }
.balance-lab-detail dd { margin: 0; color: #d7c68c; text-align: right; }
.balance-lab-artifacts { display: grid; gap: 6px; margin-top: 14px; }
.balance-lab-artifacts button { text-align: left; }
.balance-lab-log { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--front-line); }
.balance-lab-log summary { color: var(--front-dim); cursor: pointer; font-size: 8px; }
.balance-lab-log pre { max-height: 210px; overflow: auto; padding: 8px; border-radius: 6px; color: #bad3ae; background: rgba(0,0,0,.28); font: 7px/1.45 monospace; white-space: pre-wrap; }

/* Balance Lab historical run analysis */
.balance-lab-analysis { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--front-line); background: linear-gradient(180deg, rgba(4, 14, 10, .94), rgba(2, 9, 7, .98)); }
.balance-results { min-width: 0; padding: 20px; }
.balance-results-loading { min-height: 180px; margin: 0; padding: 30px 20px; color: var(--front-dim); font: 10px Georgia, serif; }
.balance-results__header { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(460px, 1.28fr); gap: 20px; align-items: end; }
.balance-results__header h2 { margin: 4px 0 5px; font: 25px/1.1 Georgia, serif; }
.balance-results__header > div > p:not(.front-kicker) { margin: 0; color: var(--front-dim); font-size: 8px; line-height: 1.5; }
.balance-results__filters { display: grid; grid-template-columns: minmax(165px, 1.4fr) repeat(3, minmax(110px, .75fr)); gap: 7px; }
.balance-results__filters label { display: grid; min-width: 0; gap: 4px; color: var(--front-dim); font-size: 7px; }
.balance-results__filters input, .balance-results__filters select, .balance-results-sort select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--front-line); border-radius: 6px; outline: 0; color: var(--front-cream); background: rgba(1, 7, 5, .94); font: inherit; font-size: 8px; }
.balance-results__filters input:focus, .balance-results__filters select:focus, .balance-results-sort select:focus { border-color: rgba(169, 211, 132, .65); }
.balance-results__tabs { display: flex; gap: 4px; margin: 18px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--front-line); }
.balance-results__tabs button { padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; color: var(--front-dim); background: transparent; cursor: pointer; font: inherit; font-size: 8px; text-transform: capitalize; }
.balance-results__tabs button:hover { color: var(--front-cream); background: rgba(149, 190, 118, .06); }
.balance-results__tabs button.is-active { border-color: rgba(157, 204, 124, .34); color: #dcefcf; background: rgba(110, 159, 84, .16); box-shadow: inset 0 -2px #83b76c; }
.balance-results-overview { display: grid; gap: 12px; }
.balance-results-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.balance-results-summary article { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid rgba(190, 213, 172, .12); border-radius: 7px; background: rgba(9, 24, 17, .46); }
.balance-results-summary span { color: var(--front-dim); font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.balance-results-summary strong { color: #e6dfbf; font: 17px/1 Georgia, serif; }
.balance-results-summary small { color: var(--front-dim); font: 7px system-ui, sans-serif; }
.balance-results-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.balance-results-chart { min-width: 0; overflow: hidden; border: 1px solid rgba(190, 213, 172, .13); border-radius: 8px; background: rgba(2, 10, 7, .72); }
.balance-results-chart > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid rgba(190, 213, 172, .1); }
.balance-results-chart h4 { margin: 0; font: 15px/1.2 Georgia, serif; }
.balance-results-chart header p { margin: 4px 0 0; color: var(--front-dim); font-size: 7px; line-height: 1.4; }
.balance-results-chart header > strong { min-width: 24px; padding: 4px 6px; border-radius: 999px; color: #d6e8c9; background: rgba(126, 176, 96, .14); font-size: 7px; text-align: center; }
.balance-results-chart__plot { display: grid; max-height: 328px; gap: 2px; overflow-y: auto; padding: 9px 11px; }
.balance-results-bar { display: grid; grid-template-columns: minmax(105px, 34%) minmax(70px, 1fr) minmax(44px, auto); align-items: center; gap: 8px; min-height: 18px; }
.balance-results-bar__label { display: block; min-width: 0; }
.balance-results-bar__label b, .balance-results-bar__label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-results-bar__label b { color: #dce5d5; font-size: 7px; font-weight: 600; }
.balance-results-bar__label small { margin-top: 1px; color: #718173; font-size: 6px; }
.balance-results-bar__track { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.045); }
.balance-results-bar__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a3f37, #d47c65); box-shadow: 0 0 8px rgba(213, 113, 88, .2); }
.balance-results-chart.is-party .balance-results-bar__track i { background: linear-gradient(90deg, #366e52, #79bd7a); }
.balance-results-chart.is-time .balance-results-bar__track i { background: linear-gradient(90deg, #766130, #d1aa51); }
.balance-results-chart.is-class .balance-results-bar__track i { background: linear-gradient(90deg, #395e76, #6faac4); }
.balance-results-chart.is-taken .balance-results-bar__track i { background: linear-gradient(90deg, #6b3d70, #b376b5); }
.balance-results-chart.is-healing .balance-results-bar__track i { background: linear-gradient(90deg, #327058, #73c995); }
.balance-results-chart.is-received .balance-results-bar__track i { background: linear-gradient(90deg, #426a7a, #82c5c7); }
.balance-results-bar > strong { color: #d8d2b5; font-size: 7px; text-align: right; white-space: nowrap; }
.balance-results-chart > footer { padding: 7px 11px; border-top: 1px solid rgba(190, 213, 172, .08); color: var(--front-dim); font-size: 6px; }
.balance-results-empty { padding: 18px 8px; color: var(--front-dim); font-size: 8px; text-align: center; }
.balance-results-table-panel { min-width: 0; }
.balance-results-table-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.balance-results-table-panel h3 { margin: 0; font: 17px/1.2 Georgia, serif; }
.balance-results-table-panel header p { margin: 4px 0 0; color: var(--front-dim); font-size: 7px; }
.balance-results-sort { display: grid; grid-template-columns: minmax(145px, 1fr) auto; gap: 6px; min-width: min(330px, 46vw); }
.balance-results-sort button { padding: 7px 9px; border: 1px solid var(--front-line); border-radius: 6px; color: var(--front-cream); background: rgba(1, 7, 5, .8); cursor: pointer; font: inherit; font-size: 7px; white-space: nowrap; }
.balance-results-table-wrap { max-height: min(620px, 66vh); overflow: auto; border: 1px solid var(--front-line); border-radius: 8px; background: rgba(1, 7, 5, .56); }
.balance-results-table { width: 100%; }
.balance-results table { width: 100%; border-collapse: collapse; font-size: 7px; }
.balance-results th, .balance-results td { padding: 8px 9px; border-bottom: 1px solid rgba(190, 213, 172, .075); text-align: right; white-space: nowrap; }
.balance-results th { position: sticky; z-index: 1; top: 0; color: #aebca8; background: #09120e; font-size: 6px; letter-spacing: .035em; text-transform: uppercase; }
.balance-results th:first-child, .balance-results td:first-child, .balance-results td.balance-results-members { text-align: left; }
.balance-results tbody tr:hover { background: rgba(146, 195, 112, .055); }
.balance-results td strong, .balance-results td small { display: block; }
.balance-results td strong { color: #dfe7d7; font-size: 8px; }
.balance-results td small { max-width: 180px; margin-top: 2px; overflow: hidden; color: var(--front-dim); font-size: 6px; text-overflow: ellipsis; }
.balance-results-drilldown { display: block; margin-top: 6px; padding: 4px 6px; border: 1px solid rgba(111, 170, 196, .34); border-radius: 5px; color: #b8d9e7; background: rgba(57, 94, 118, .18); cursor: pointer; font: inherit; font-size: 6px; white-space: nowrap; }
.balance-results-drilldown:hover:not(:disabled), .balance-results-drilldown:focus-visible { border-color: rgba(125, 199, 231, .7); background: rgba(57, 94, 118, .34); }
.balance-results-drilldown:disabled { border-color: var(--front-line); color: var(--front-dim); background: transparent; cursor: not-allowed; }
.balance-results td.balance-results-members { min-width: 300px; max-width: 540px; white-space: normal; line-height: 1.5; }
.balance-results-flag { display: inline-block; padding: 3px 5px; border-radius: 4px; color: #cbd7c5; background: rgba(116, 138, 107, .14); }
.balance-results-flag.is-high { color: #efb8aa; background: rgba(155, 65, 50, .18); }
.balance-results-flag.is-low { color: #b8d6ee; background: rgba(60, 111, 147, .18); }
.balance-results-abilities { display: grid; min-width: 0; gap: 10px; }
.balance-results-abilities > .balance-results-chart { width: 100%; }
.balance-results-drilldown-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(111, 170, 196, .28); border-radius: 8px; background: linear-gradient(100deg, rgba(57, 94, 118, .2), rgba(8, 19, 16, .45)); }
.balance-results-drilldown-banner > div, .balance-results-drilldown-banner span, .balance-results-drilldown-banner strong, .balance-results-drilldown-banner small { display: block; }
.balance-results-drilldown-banner span { color: #79abc1; font-size: 6px; letter-spacing: .09em; text-transform: uppercase; }
.balance-results-drilldown-banner strong { margin-top: 2px; color: #e1edf0; font: 15px/1.25 Georgia, serif; }
.balance-results-drilldown-banner small { margin-top: 2px; color: var(--front-dim); font-size: 7px; }
.balance-results-drilldown-banner button { padding: 7px 9px; border: 1px solid rgba(111, 170, 196, .34); border-radius: 6px; color: #c8e1e9; background: rgba(1, 7, 5, .62); cursor: pointer; font: inherit; font-size: 7px; white-space: nowrap; }
.balance-results-summary--abilities article:nth-child(3) strong { color: #efb8aa; }
.balance-results-ability-controls { display: grid; grid-template-columns: minmax(170px, 1.15fr) minmax(145px, .9fr) minmax(145px, .9fr) auto; gap: 6px; min-width: min(680px, 60vw); }
.balance-results-ability-controls select { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid var(--front-line); border-radius: 6px; outline: 0; color: var(--front-cream); background: rgba(1, 7, 5, .8); font: inherit; font-size: 7px; }
.balance-results-ability-controls select:focus { border-color: rgba(169, 211, 132, .65); }
.balance-results-ability-controls button { padding: 7px 9px; border: 1px solid var(--front-line); border-radius: 6px; color: var(--front-cream); background: rgba(1, 7, 5, .8); cursor: pointer; font: inherit; font-size: 7px; white-space: nowrap; }
.balance-results-abilities th:nth-child(2), .balance-results-abilities td:nth-child(2) { text-align: left; }
.balance-results-ability-name { display: flex; align-items: center; gap: 7px; min-width: 150px; }
.balance-results-ability-name > img { width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid rgba(210, 226, 194, .2); border-radius: 4px; object-fit: cover; background: #07100b; }
.balance-results-ability-name > span { display: block; min-width: 0; }
.balance-results-legacy-note { padding: 18px; border: 1px solid rgba(210, 184, 106, .24); border-radius: 8px; color: #d6c991; background: rgba(89, 69, 24, .12); font-size: 8px; line-height: 1.5; }

@media (max-width: 900px) {
  .balance-lab-layout { grid-template-columns: minmax(290px, 1fr) minmax(250px, .8fr); }
  .balance-lab-detail { grid-column: 1 / -1; border-top: 1px solid var(--front-line); }
  .balance-results__header { grid-template-columns: 1fr; }
  .balance-results__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .balance-lab-layout { display: block; overflow: auto; }
  .balance-lab-screen .gm-admin-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; padding-inline: 10px; }
  .balance-lab-screen .gm-admin-header__actions .front-button { padding-inline: 7px; font-size: 8px; }
  .balance-lab-config, .balance-lab-jobs { border-right: 0; border-bottom: 1px solid var(--front-line); }
  .balance-lab-form-grid { grid-template-columns: 1fr; }
  .balance-lab-form-grid__wide { grid-column: auto; }
  .balance-lab-analysis { border-top: 1px solid var(--front-line); }
  .balance-results { padding: 14px 10px 20px; }
  .balance-results__filters, .balance-results-summary, .balance-results-charts { grid-template-columns: 1fr; }
  .balance-results__tabs { overflow-x: auto; }
  .balance-results__tabs button { white-space: nowrap; }
  .balance-results-table-panel > header { display: grid; }
  .balance-results-sort { width: 100%; min-width: 0; }
  .balance-results-drilldown-banner { align-items: start; flex-direction: column; }
  .balance-results-ability-controls { width: 100%; min-width: 0; grid-template-columns: 1fr; }
  .balance-results-bar { grid-template-columns: minmax(90px, 40%) minmax(55px, 1fr) minmax(40px, auto); gap: 5px; }
}

.gm-review-card {
  position: absolute;
  top: max(276px, calc(env(safe-area-inset-top) + 264px));
  right: max(12px, env(safe-area-inset-right));
  z-index: 18;
  display: grid;
  width: min(248px, calc(100% - 24px));
  max-height: calc(100% - 84px);
  gap: 6px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(184, 219, 144, .38);
  border-radius: 9px 3px 9px 3px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(9, 25, 18, .94), rgba(4, 13, 10, .92));
  box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 0 18px rgba(133,181,102,.05);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
.gm-review-card.is-not-ready { border-color: rgba(226, 112, 96, .46); }
.gm-review-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-review-card > header span { color: #aac99a; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gm-review-card > header b { color: #e6cf82; font-size: 7px; text-transform: uppercase; }
.gm-review-card > strong { overflow: hidden; font: 13px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.gm-review-card > small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.gm-review-card__statuses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.gm-review-card__note { min-width: 0; border-top: 1px solid rgba(183,207,151,.12); border-bottom: 1px solid rgba(183,207,151,.12); }
.gm-review-card__note summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px 1px; cursor: pointer; list-style: none; }
.gm-review-card__note summary::-webkit-details-marker { display: none; }
.gm-review-card__note summary::before { content: "+"; color: #aac99a; font-size: 9px; }
.gm-review-card__note[open] summary::before { content: "−"; }
.gm-review-card__note[open] summary { justify-content: start; }
.gm-review-card__note[open] summary::after { content: "Editing"; color: var(--muted); font-size: 7px; }
.gm-review-card__note[open] summary small { display: none; }
.gm-review-card__note summary span { color: #c8d9bb; font-size: 7px; font-weight: 700; white-space: nowrap; }
.gm-review-card__note summary small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.gm-review-card__note textarea { display: block; width: 100%; min-height: 54px; max-height: 120px; padding: 6px; resize: vertical; border: 1px solid rgba(183,207,151,.2); border-radius: 5px; outline: 0; color: var(--ink); background: rgba(0,6,4,.72); font: inherit; font-size: 7px; line-height: 1.45; }
.gm-review-card__note textarea:focus { border-color: rgba(184,219,144,.62); }
.gm-review-card__note > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 4px 0; }
.gm-review-card__note > div span, .gm-review-card__note > p { margin: 0; color: var(--muted); font-size: 6px; line-height: 1.35; }
.gm-review-card__note > div button { padding: 3px 5px; }
.gm-review-card__note > p { padding: 0 1px 6px; }
.gm-review-card button { min-width: 0; padding: 6px 5px; border: 1px solid rgba(183,207,151,.2); border-radius: 5px; color: var(--ink); background: rgba(151,182,127,.07); cursor: pointer; font-size: 7px; }
.gm-review-card button:hover:not(:disabled), .gm-review-card button.is-active { border-color: rgba(184,219,144,.62); background: rgba(113,158,88,.25); }
.gm-review-card button:disabled { cursor: not-allowed; opacity: .38; }
.gm-review-card > p { margin: 0; color: #f0ad9f; font-size: 7px; line-height: 1.35; }
.gm-review-card > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gm-review-card > footer button:first-child { color: #f3dda0; }

.gm-world-editor {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 95;
  display: grid;
  width: min(490px, calc(100% - 20px));
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(178, 211, 154, .36);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(5, 15, 11, .96);
  box-shadow: -14px 18px 45px rgba(0,0,0,.5);
  pointer-events: auto;
}
.single-display-frame .gm-world-editor { bottom: 58px; }
.gm-world-editor__header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--edge); }
.gm-world-editor__header h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.gm-world-editor__header > span { color: #adc0a6; font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.gm-world-editor__header > span.is-dirty { color: #ffd06d; }
.gm-world-editor__telemetry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 9px 14px; border-bottom: 1px solid var(--edge); background: rgba(104, 143, 83, .08); font-size: 8px; }
.gm-world-editor__telemetry span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.gm-world-editor__telemetry b { color: var(--ink); font-weight: 600; }
.gm-world-editor__section { padding: 12px 14px; border-bottom: 1px solid var(--edge); }
.gm-world-editor__section h3 { margin: 0 0 4px; font-size: 12px; }
.gm-world-editor__section p { margin: 0 0 9px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.gm-world-editor__boss-select { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 9px; }
.gm-inline-actions { display: flex; gap: 6px; margin-top: 8px; }
.gm-world-editor__scroll { min-height: 0; overflow: auto; }
.gm-vector-editor { min-width: 0; margin: 9px 0 0; padding: 8px; border: 1px solid rgba(183, 207, 151, .16); border-radius: 7px; }
.gm-vector-editor legend { padding: 0 5px; color: #c6d9b4; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.gm-vector-editor__coordinates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gm-vector-editor__coordinates > label { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 4px; color: var(--muted); font-size: 8px; }
.gm-vector-editor__coordinates .gm-nudges { display: grid; grid-column: 2; grid-template-columns: 1fr 1fr; gap: 3px; }
.gm-vector-editor__coordinates .gm-nudges button { padding: 3px; }
.gm-yaw-editor { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 8px; }
.gm-yaw-editor label { display: flex; align-items: center; gap: 7px; }
.gm-yaw-editor input { max-width: 105px; }
.gm-yaw-editor .gm-nudges { display: flex; gap: 3px; }
.gm-yaw-editor .gm-nudges button { padding: 4px 7px; }
.gm-vector-editor > button { margin-top: 7px; }
.gm-world-editor__linked-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.gm-required-kills { display: grid; grid-template-columns: auto 70px 1fr; align-items: center; gap: 8px; margin: 8px 0; font-size: 9px; }
.gm-required-kills small { color: var(--muted); }
.gm-linked-list { display: grid; gap: 5px; }
.gm-linked-list > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border: 1px solid rgba(183, 207, 151, .1); border-radius: 5px; background: rgba(255,255,255,.02); }
.gm-linked-list code { overflow: hidden; color: #ffd774; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gm-world-editor__empty { display: grid; min-height: 0; place-items: center; padding: 20px; color: var(--muted); text-align: center; }
.gm-world-editor__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--edge); background: rgba(2, 8, 5, .78); }
.gm-world-editor__footer p { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gm-world-editor__footer i { display: inline-block; width: 7px; height: 7px; margin: 0 2px 0 6px; border-radius: 50%; }
.gm-world-editor__footer i.is-party { background: #55e8ff; }
.gm-world-editor__footer i.is-boss { background: #ff485f; }
.gm-world-editor__footer i.is-portal { background: #c26bff; }
.gm-world-editor__footer i.is-linked { background: #ffd255; }

@media (max-width: 880px) {
  .gm-admin-layout { grid-template-columns: 190px minmax(320px, 1fr); }
  .gm-boss-detail { display: none; }
  .gm-boss-browser { border-right: 0; }
  .gm-admin-header__actions .front-button:not(.front-button--primary) { display: none; }
}

@media (max-width: 600px) {
  .gm-admin-layout { display: block; overflow: auto; }
  .gm-admin-options { border-right: 0; border-bottom: 1px solid var(--front-line); }
  .gm-boss-browser { min-height: 460px; }
  .gm-boss-browser > header { grid-template-columns: 1fr 1fr; }
  .gm-boss-browser > header > div { grid-column: 1 / -1; }
  .gm-boss-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-world-editor { inset: 5px; width: auto; }
  .gm-review-card { top: auto; right: 7px; bottom: max(66px, calc(env(safe-area-inset-bottom) + 54px)); width: min(220px, calc(100% - 14px)); padding: 8px; }
}

@media (max-height: 560px) and (min-width: 601px) {
  .gm-review-card { top: auto; bottom: max(62px, calc(env(safe-area-inset-bottom) + 50px)); }
}

/* Rated arenas */
.arena-select-screen {
  display: grid;
  grid-template: 4.4rem 1fr 2.6rem / 17.5rem 1fr;
  min-height: 100%;
  color: #eef5e8;
}

.arena-select-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(205, 223, 186, .18);
  background: rgba(6, 15, 12, .86);
}

.arena-select-header > div,
.arena-select-header > p {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
}

.arena-select-header p {
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}

.arena-select-sidebar {
  padding: .9rem;
  overflow: auto;
  border-right: 1px solid rgba(205, 223, 186, .16);
  background: rgba(8, 20, 16, .88);
}

.arena-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem;
  margin: .35rem 0 1rem;
}

.arena-segmented:first-of-type {
  grid-template-columns: repeat(2, 1fr);
}

.arena-segmented button,
.arena-mode-list button,
.arena-stage-grid button,
.arena-loadout-editor button,
.arena-loadout-editor input,
.arena-loadout-editor select {
  border: 1px solid rgba(198, 219, 177, .2);
  color: inherit;
  background: rgba(20, 38, 30, .9);
}

.arena-segmented button {
  padding: .55rem .3rem;
  font-weight: 800;
  text-transform: uppercase;
}

.arena-segmented button.is-active,
.arena-mode-list button.is-active,
.arena-stage-grid button.is-active {
  border-color: #d8b962;
  background: linear-gradient(135deg, rgba(127, 102, 38, .65), rgba(29, 57, 42, .9));
  box-shadow: inset 0 0 0 1px rgba(255, 232, 154, .16);
}

.arena-mode-list {
  display: grid;
  gap: .35rem;
  margin: .35rem 0 1rem;
}

.arena-mode-list button {
  display: grid;
  gap: .18rem;
  padding: .6rem;
  text-align: left;
}

.arena-mode-list small,
.arena-stage-grid small {
  color: #aeb9ab;
  line-height: 1.25;
}

.arena-select-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr);
  gap: 1rem;
  padding: 1rem;
  overflow: auto;
  background: radial-gradient(circle at 25% 20%, rgba(54, 88, 59, .28), transparent 45%);
}

.arena-stage-browser,
.arena-configuration {
  min-width: 0;
  padding: .9rem;
  border: 1px solid rgba(205, 223, 186, .16);
  background: rgba(8, 18, 14, .76);
}

.arena-stage-browser > header,
.arena-configuration > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .6rem;
}

.arena-stage-browser h1,
.arena-configuration h2 {
  margin: .12rem 0 .65rem;
  font-family: Georgia, serif;
}

.arena-status {
  padding: .28rem .45rem;
  border: 1px solid currentColor;
  color: #d8b962;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.arena-status--validated { color: #88d49a; }
.arena-status--repair-required { color: #dc8d73; }

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

.arena-stage-grid button {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .4rem;
  padding: .55rem;
  text-align: left;
}

.arena-stage-grid button > b {
  color: #d8b962;
  font: 700 1rem Georgia, serif;
}

.arena-stage-grid button > span {
  display: grid;
  min-width: 0;
}

.arena-stage-note {
  margin: .7rem 0 0;
  color: #c7cec2;
  font-size: .74rem;
}

.arena-configuration {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.arena-configuration input[type="range"] { width: 100%; accent-color: #d8b962; }

.arena-configuration dl {
  display: grid;
  gap: .3rem;
  margin: 0;
}

.arena-configuration dl div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(205, 223, 186, .12);
}

.arena-loadout-editor,
.arena-loadout-editor label {
  display: grid;
  gap: .3rem;
}

.arena-loadout-editor {
  gap: .55rem;
}

.arena-loadout-editor label {
  color: #aeb9ab;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.arena-loadout-editor input,
.arena-loadout-editor select,
.arena-loadout-editor button {
  padding: .48rem;
}

.arena-queue-button {
  display: grid;
  gap: .15rem;
  margin-top: auto;
  padding: .8rem;
}

.arena-runtime {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: #f2f5ee;
  background: #07100d;
}

.arena-world,
.arena-world > div { position: absolute; inset: 0; }

.arena-render-fallback {
  display: grid;
  place-content: center;
  gap: .4rem;
  padding: 2rem;
  color: #e8eee4;
  text-align: center;
  background: radial-gradient(circle at center, #17251f, #07100d 68%);
}

.arena-render-fallback small { max-width: 32rem; color: #b9c4b6; }

.arena-asset-status {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(24rem, calc(100vw - 2rem));
  gap: .45rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(220, 190, 99, .5);
  text-align: center;
  background: rgba(6, 13, 10, .92);
  transform: translate(-50%, -50%);
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, .45);
  pointer-events: none;
}

.arena-asset-status > span {
  overflow: hidden;
  height: .32rem;
  background: rgba(216, 185, 98, .16);
}

.arena-asset-status > span i {
  display: block;
  height: 100%;
  background: #d8b962;
  transition: width .15s ease-out;
}

.arena-asset-status small { color: #b9c4b6; }
.arena-asset-status--fallback { top: auto; bottom: 5.3rem; transform: translateX(-50%); }

.arena-match-header {
  position: absolute;
  top: .7rem;
  left: 50%;
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .45rem .7rem;
  border: 1px solid rgba(225, 236, 214, .22);
  background: rgba(5, 12, 9, .82);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.arena-match-header span,
.arena-match-header em { color: #bac5b7; font-size: .72rem; font-style: normal; }

.arena-team-frames {
  position: absolute;
  top: 4.2rem;
  display: grid;
  width: min(16rem, 27vw);
  gap: .3rem;
}

.arena-team-frames--0 { left: .7rem; }
.arena-team-frames--1 { right: .7rem; }

.arena-team-frames button {
  display: grid;
  grid-template: auto .28rem / 1fr auto;
  gap: .22rem .6rem;
  padding: .42rem;
  border: 1px solid rgba(215, 230, 204, .2);
  color: inherit;
  text-align: left;
  background: rgba(5, 12, 9, .82);
}

.arena-team-frames--1 button { text-align: right; }
.arena-team-frames button.is-dead { opacity: .38; filter: grayscale(1); }
.arena-team-frames button > span { display: grid; }
.arena-team-frames button small { color: #acb8aa; }
.arena-team-frames button i { grid-column: 1 / -1; overflow: hidden; background: #241b1b; }
.arena-team-frames button i b { display: block; height: 100%; background: #54a55d; transition: width .1s linear; }
.arena-team-frames button em { font-style: normal; }

.arena-countdown {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  min-width: 13rem;
  padding: 1rem;
  border: 1px solid rgba(220, 190, 99, .5);
  background: rgba(6, 13, 10, .88);
  transform: translate(-50%, -50%);
}

.arena-countdown strong { color: #e1c46f; font: 700 3rem Georgia, serif; }

.arena-action-bar {
  position: absolute;
  bottom: .8rem;
  left: 50%;
  display: flex;
  gap: .3rem;
  transform: translateX(-50%);
}

.arena-action-bar button {
  display: grid;
  place-items: center;
  width: 4.2rem;
  min-height: 3.6rem;
  border: 1px solid rgba(221, 232, 210, .25);
  color: inherit;
  background: rgba(5, 12, 9, .88);
}

.arena-action-bar button b { color: #dfc16b; }
.arena-action-bar button span { font-size: .65rem; text-transform: capitalize; }

.arena-exit {
  position: absolute;
  right: .7rem;
  bottom: .8rem;
  padding: .5rem;
  border: 1px solid rgba(221, 232, 210, .2);
  color: #d2d9cd;
  background: rgba(5, 12, 9, .8);
}

.arena-result-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(27rem, 85vw);
  padding: 1.25rem;
  border: 1px solid #c4a95d;
  text-align: center;
  background: rgba(7, 15, 11, .96);
  transform: translate(-50%, -50%);
  box-shadow: 0 1rem 5rem rgba(0, 0, 0, .55);
}

.arena-result-panel h1 { margin: .2rem 0 .7rem; color: #e0c26c; font: 700 2.5rem Georgia, serif; }

@media (max-width: 760px) {
  .arena-select-screen { grid-template: auto auto 1fr auto / 1fr; }
  .arena-select-header { grid-column: 1; }
  .arena-select-sidebar { border-right: 0; border-bottom: 1px solid rgba(205, 223, 186, .16); }
  .arena-select-main { grid-template-columns: 1fr; }
  .arena-team-frames { width: 42vw; }
  .arena-match-header { left: .55rem; gap: .35rem; transform: none; }
  .arena-match-header span { display: none; }
  .arena-action-bar { bottom: .55rem; gap: .2rem; }
  .arena-action-bar button { width: 3rem; min-height: 3.25rem; }
  .arena-exit { inset: .55rem .55rem auto auto; max-width: 5.4rem; font-size: .65rem; }
}
.dungeon-interaction-prompt {
  position: absolute;
  left: 50%;
  bottom: 8.5rem;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 13rem;
  padding: 0.55rem 0.8rem;
  color: #f8ebc4;
  background: rgba(10, 13, 16, 0.88);
  border: 1px solid rgba(224, 177, 83, 0.72);
  border-radius: 0.35rem;
  transform: translateX(-50%);
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.5);
}

.dungeon-interaction-prompt__key {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  flex: 0 0 auto;
  color: #14100a;
  background: #e0b153;
  border-radius: 0.25rem;
  font-weight: 800;
}

.dungeon-interaction-prompt strong,
.dungeon-interaction-prompt small {
  display: block;
  text-align: left;
}

.dungeon-interaction-prompt small {
  margin-top: 0.12rem;
  color: #bdb6a5;
  font-size: 0.68rem;
}

.arena-player-hud {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(.6rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(56rem, calc(100% - 1.2rem));
  display: grid;
  justify-items: center;
  gap: .3rem;
  pointer-events: none;
}
.arena-player-hud > .action-bar { position: relative; inset: auto; transform: none; width: min(100%, 38rem); pointer-events: auto; }
.arena-player-status, .arena-cast-status, .arena-action-feedback {
  padding: .25rem .6rem;
  border: 1px solid #88966b77;
  border-radius: .25rem;
  background: #07130fe8;
  text-align: center;
  font-size: .75rem;
}
.arena-player-status { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.arena-player-status span { color: #d1dbc8; }
.arena-action-feedback { color: #ffe4a1; }
.arena-control-hints { font-size: .65rem; color: #e0e7d5; background: #07130fd9; padding: .2rem .4rem; text-align: center; }
.arena-personal-bars { display: grid; gap: .25rem; max-width: 100%; pointer-events: auto; }
.arena-personal-bars section { display: grid; gap: .2rem; max-width: 100%; }
.arena-personal-bars button {
  position: relative; width: clamp(2.6rem, 5vw, 4.1rem); min-width: 0; min-height: 3.9rem;
  display: grid; justify-items: center; gap: .1rem; padding: .2rem;
  border: 1px solid #9dad8277; background: #08130feb; color: #fff;
}
.arena-personal-bars button:is(:disabled, [aria-disabled="true"]) { opacity: .55; }
.arena-personal-bars button kbd { position: absolute; top: .1rem; right: .2rem; z-index: 1; color: #fff5aa; font-size: .7rem; text-shadow: 1px 1px #000; }
.arena-personal-bars button .action-slot__icon { width: 1.9rem; height: 1.9rem; }
.arena-personal-bars button > span:last-of-type { font-size: .58rem; line-height: 1.15; overflow: hidden; }
.arena-personal-bars button em { position: absolute; top: 1rem; font-size: .9rem; background: #000b; }
.arena-runtime .arena-exit { z-index: 5; bottom: auto; top: .7rem; }
.arena-result-panel { z-index: 8; }
.arena-countdown { top: 28%; pointer-events: none; }
@media (max-width: 760px) {
  .arena-player-hud { width: calc(100% - .5rem); }
  .arena-player-hud .action-slot strong { font-size: .55rem; }
  .arena-player-hud .action-bar--compact { padding: .25rem; }
  .arena-team-frames { width: min(10rem, 33vw); font-size: .72rem; }
  .arena-team-frames button small { font-size: .55rem; }
.arena-control-hints { font-size: .55rem; }
  .arena-countdown { top: 38%; min-width: 8rem; padding: .4rem; }
}
.arena-toolbar { position: absolute; z-index: 6; right: .8rem; bottom: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; max-width: 26rem; justify-content: flex-end; }
.arena-toolbar button, .arena-pet-orders button { padding: .35rem .6rem; background: #17241fe8; border: 1px solid #69837a; border-radius: .3rem; color: #dcece4; text-transform: capitalize; }
.arena-reference-panel svg { display: block; width: 100%; height: 250px; background: #11201b; border: 1px solid #728376; }
.arena-reference-panel { max-height: 85vh; overflow: auto; }
.arena-ground-hint { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); z-index: 5; padding: .6rem 1rem; border-radius: .4rem; color: #c5ffdd; background: #13291dec; pointer-events: none; }
.arena-summon-name { color: #e1eee4; font-size: 10px; white-space: nowrap; text-shadow: 0 1px 3px #000; pointer-events: none; }
.arena-extra-resources, .arena-aura-strip, .arena-pet-orders { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; font-size: .7rem; }
.arena-extra-resources span, .arena-aura-strip span { background: #12201dda; border: 1px solid #4a6860; border-radius: .25rem; padding: .2rem .4rem; }
.arena-aura-strip img { width: 20px; height: 20px; vertical-align: middle; margin-right: .25rem; }
.arena-aura-strip .is-debuff { border-color: #c65a58; }
.arena-player-hud { bottom: 3rem; }
.arena-combat-log { position: absolute; left: .7rem; top: 47%; color: #e4e3cc; font-size: .75rem; pointer-events: none; max-width: 18rem; }
.arena-team-frames button.is-selected { outline: 2px solid #ffda8b; }
@media (max-width: 760px) { .arena-toolbar { max-width: 100%; left: .5rem; justify-content: center; } .arena-toolbar button { font-size: .6rem; padding: .25rem; } }
.dungeon-sim-hud {
  position: fixed;
  inset: 16px 16px auto auto;
  z-index: 70;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  color: #e8f7ff;
  background: rgba(7, 14, 22, 0.92);
  border: 1px solid rgba(99, 211, 255, 0.42);
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
  padding: 14px;
  backdrop-filter: blur(12px);
}

.dungeon-sim-hud__header,
.dungeon-sim-hud__controls,
.dungeon-sim-hud__status div,
.dungeon-sim-hud__findings header,
.dungeon-sim-hud__findings li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dungeon-sim-hud__header { justify-content: space-between; }
.dungeon-sim-hud__header div { display: grid; }
.dungeon-sim-hud__header small { color: #86b7ca; text-transform: uppercase; letter-spacing: 0.08em; }
.dungeon-sim-hud__header strong { font-size: 1.08rem; }
.dungeon-sim-hud__header > time { color: #ffe578; font: 700 1.15rem/1 monospace; }
.dungeon-sim-hud__controls { flex-wrap: wrap; margin: 12px 0; }
.dungeon-sim-hud button { color: #dff7ff; background: #122a39; border: 1px solid #315b6e; border-radius: 6px; padding: 6px 9px; }
.dungeon-sim-hud button:hover:not(:disabled), .dungeon-sim-hud button.is-active { background: #1d526b; border-color: #70d7ff; }
.dungeon-sim-hud button.is-danger { color: #ffd8d8; border-color: #a94848; background: #502121; }
.dungeon-sim-hud button:disabled { opacity: 0.45; }
.dungeon-sim-hud__spectate { display: grid; gap: 7px; margin: 0 0 12px; padding: 10px; border: 1px solid rgba(112, 215, 255, .2); border-radius: 8px; background: rgba(7, 21, 31, .72); }
.dungeon-sim-hud__spectate > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dungeon-sim-hud__spectate > header span { color: #82aaba; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.dungeon-sim-hud__spectate > header strong { overflow: hidden; color: #e9f8ff; text-overflow: ellipsis; white-space: nowrap; }
.dungeon-sim-hud__spectate > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.dungeon-sim-hud__spectate > div > button { display: grid; min-width: 0; grid-template-columns: 5px minmax(0, 1fr); gap: 5px; padding: 6px; text-align: left; }
.dungeon-sim-hud__spectate button > i { width: 5px; height: 100%; min-height: 28px; border-radius: 99px; }
.dungeon-sim-hud__spectate button > span { min-width: 0; }
.dungeon-sim-hud__spectate button strong,
.dungeon-sim-hud__spectate button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dungeon-sim-hud__spectate button strong { font-size: .68rem; }
.dungeon-sim-hud__spectate button small { margin-top: 2px; color: #8fb5c4; font-size: .52rem; text-transform: uppercase; }
.dungeon-sim-hud__spectate button em { display: none; }
.dungeon-sim-hud__spectate > p { margin: 0; color: #8fb5c4; font-size: .68rem; }
.dungeon-sim-hud__seek { display: grid; gap: 4px; margin-bottom: 10px; color: #9cc6d5; }
.dungeon-sim-hud__seek input { width: 100%; }
.dungeon-sim-hud__status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0 0 12px; }
.dungeon-sim-hud__status div { justify-content: space-between; min-width: 0; }
.dungeon-sim-hud__status dt { color: #82aaba; }
.dungeon-sim-hud__status dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dungeon-sim-hud__findings header { justify-content: space-between; border-top: 1px solid rgba(139, 210, 236, 0.2); padding-top: 10px; }
.dungeon-sim-hud__findings ol { display: grid; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.dungeon-sim-hud__findings li { align-items: flex-start; color: #bdd5df; font-size: 0.82rem; }
.dungeon-sim-hud__findings li time { flex: 0 0 auto; color: #759aaa; font-family: monospace; }
.dungeon-sim-hud__findings li[data-severity="critical"] { color: #ffaaaa; }
.dungeon-sim-hud__findings li[data-severity="warning"] { color: #ffe09b; }

.dungeon-sim-admin { min-height: 100vh; padding: clamp(18px, 3vw, 42px); }
.dungeon-sim-admin__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 24px; }
.dungeon-sim-admin__header h1, .dungeon-sim-admin__details h2 { margin: 0; }
.dungeon-sim-admin__header-actions { display: flex; gap: 8px; }
.dungeon-sim-admin__layout { display: grid; grid-template-columns: minmax(300px, 430px) minmax(420px, 1fr); gap: 22px; }
.dungeon-sim-admin__catalog, .dungeon-sim-admin__details { background: rgba(7, 14, 22, 0.8); border: 1px solid rgba(108, 189, 220, 0.28); border-radius: 14px; padding: 18px; }
.dungeon-sim-admin label { display: grid; gap: 5px; margin-bottom: 11px; color: #a7c6d2; }
.dungeon-sim-admin input, .dungeon-sim-admin select, .dungeon-sim-admin textarea { width: 100%; color: #e8f7ff; background: #0c1c27; border: 1px solid #315164; border-radius: 6px; padding: 8px; }
.dungeon-sim-admin textarea { min-height: 70px; resize: vertical; }
.dungeon-sim-admin fieldset { display: grid; gap: 8px; border: 1px solid rgba(111, 190, 220, 0.25); border-radius: 10px; margin: 16px 0 0; padding: 14px; }
.dungeon-sim-admin legend { color: #d6f2ff; padding: 0 6px; }
.dungeon-sim-admin__route-meta { display: grid; gap: 5px; margin-top: 14px; }
.dungeon-sim-admin__route-meta code { color: #7fb7c9; font-size: 0.68rem; overflow-wrap: anywhere; }
.route-review-status { width: fit-content; border: 1px solid #647b85; border-radius: 999px; padding: 3px 8px; font-size: 0.72rem; text-transform: uppercase; }
.route-review-status--approved { color: #9cf3b8; border-color: #3c9c61; }
.route-review-status--needswork { color: #ffb1a4; border-color: #b8564a; }
.dungeon-sim-admin__replays { display: grid; gap: 9px; margin: 14px 0 24px; }
.dungeon-sim-admin__replays article { display: flex; justify-content: space-between; gap: 12px; padding: 11px; background: rgba(18, 42, 57, 0.66); border-radius: 8px; }
.dungeon-sim-admin__replays article > div { display: grid; gap: 4px; }
.dungeon-sim-admin__replays article > div:last-child { display: flex; align-items: center; }
.dungeon-sim-admin__replays small { color: #8db0bd; }
.dungeon-sim-admin__legs { display: grid; gap: 7px; padding-left: 22px; }
.dungeon-sim-admin__legs li { padding: 7px 9px; background: rgba(18, 42, 57, 0.45); }
.dungeon-sim-admin__legs li > * { display: block; }
.dungeon-sim-admin__legs span, .dungeon-sim-admin__legs small { color: #91b4c1; }
@media (max-width: 900px) {
  .dungeon-sim-admin__layout { grid-template-columns: 1fr; }
  .dungeon-sim-admin__header { grid-template-columns: 1fr; }
  .dungeon-sim-admin__replays article { flex-direction: column; }
}

.randomized-bite-sized-screen,
.randomized-creature-readiness { min-height: 100vh; padding: clamp(18px, 3vw, 42px); }
.randomized-bite-sized-screen__header,
.randomized-creature-readiness__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 24px; }
.randomized-bite-sized-screen__header > div,
.randomized-creature-readiness__header > div:first-of-type { display: grid; gap: 3px; }
.randomized-creature-readiness__header > div:last-child { display: flex; gap: 8px; }
.randomized-bite-sized-screen__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 22px; }
.randomized-bite-sized-screen__hero,
.randomized-bite-sized-screen__launch,
.randomized-creature-readiness__catalog,
.randomized-creature-readiness__details { border: 1px solid rgba(202, 160, 74, .3); border-radius: 14px; background: linear-gradient(145deg, rgba(21, 27, 32, .94), rgba(8, 15, 21, .92)); padding: clamp(18px, 3vw, 30px); }
.randomized-bite-sized-screen h1 { margin: 4px 0 10px; font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: .95; color: #f3d58e; }
.randomized-bite-sized-screen__odds,
.randomized-creature-readiness__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; }
.randomized-bite-sized-screen__odds > div,
.randomized-creature-readiness__summary > div { display: grid; gap: 4px; padding: 14px; border: 1px solid rgba(213, 176, 94, .24); background: rgba(78, 57, 25, .22); }
.randomized-bite-sized-screen__odds strong,
.randomized-creature-readiness__summary strong { color: #f0cb75; font-size: 1.6rem; }
.randomized-bite-sized-screen__odds span,
.randomized-creature-readiness__summary span { color: #b8c6cb; font-size: .75rem; text-transform: uppercase; }
.randomized-bite-sized-screen__roles { display: grid; gap: 10px; margin-top: 18px; }

.randomized-creature-readiness__summary { max-width: 700px; }
.randomized-creature-readiness__layout { display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(320px, .9fr); gap: 22px; }
.randomized-creature-readiness__filters { display: grid; grid-template-columns: 1fr 150px 180px; gap: 10px; margin-bottom: 14px; }
.randomized-creature-readiness label { display: grid; gap: 4px; color: #9eb4bd; font-size: .78rem; }
.randomized-creature-readiness input,
.randomized-creature-readiness select { width: 100%; color: #eef8fb; background: #0c1c27; border: 1px solid #3b5665; border-radius: 6px; padding: 9px; }
.randomized-creature-readiness__list { display: grid; gap: 7px; max-height: 58vh; overflow: auto; }
.randomized-creature-readiness__list > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #eaf4f7; border: 1px solid rgba(125, 158, 170, .22); border-radius: 7px; background: rgba(15, 31, 40, .72); padding: 10px; text-align: left; }
.randomized-creature-readiness__list > button.is-active { border-color: #d3ad59; background: rgba(105, 76, 25, .3); }
.randomized-creature-readiness__list span { display: grid; gap: 3px; }
.randomized-creature-readiness__list small { color: #8da7b1; }
.creature-readiness { flex: 0 0 auto; border: 1px solid currentColor; border-radius: 999px; padding: 3px 7px; font-size: .68rem; font-style: normal; text-transform: uppercase; }
.creature-readiness--ready { color: #8de2a5; }
.creature-readiness--needs-testing { color: #f0cb75; }
.creature-readiness--not-ready { color: #ff9e91; }
.randomized-creature-readiness__details dl { display: grid; gap: 8px; }
.randomized-creature-readiness__details dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.randomized-creature-readiness__details dt { color: #839da7; }
.randomized-creature-readiness__details dd { margin: 0; overflow-wrap: anywhere; }
.randomized-creature-readiness__status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }

@media (max-width: 900px) {
  .randomized-bite-sized-screen__header,
  .randomized-creature-readiness__header,
  .randomized-bite-sized-screen__layout,
  .randomized-creature-readiness__layout { grid-template-columns: 1fr; }
  .randomized-creature-readiness__filters { grid-template-columns: 1fr; }
  .randomized-bite-sized-screen__odds,
  .randomized-creature-readiness__summary { grid-template-columns: 1fr; }
}