:root {
  color-scheme: dark;
  --panel: rgba(17, 16, 20, 0.86);
  --panel-strong: rgba(14, 12, 16, 0.96);
  --stroke: #64524b;
  --gold: #d7b15f;
  --blood: #b7312e;
  --ember: #ef7a2f;
  --mana: #4aa7d8;
  --toxic: #74c365;
  --text: #f0e5c8;
  --muted: #a79a84;
  --game-cursor: url("assets/ui/cursor.png") 2 2, auto;
  --ui-frame: url("assets/ui/demonic-panel-frame.png");
  --ui-button: url("assets/ui/demonic-button.png");
  --ui-button-active: url("assets/ui/demonic-button-active.png");
  --ui-banner: url("assets/ui/demonic-banner.png");
  --ui-main-menu-art: url("assets/ui/main-menu-vault-bg.png");
  --hud-scale: 1;
}

@font-face {
  font-family: "Elv Pixels";
  src: url("assets/fonts/elv-pixels-02.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050506;
  color: var(--text);
  font-family: "Elv Pixels", "Courier New", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  user-select: none;
  cursor: var(--game-cursor);
}

button {
  font: inherit;
  cursor: var(--game-cursor);
}

input,
textarea,
select,
label {
  cursor: var(--game-cursor);
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #050506;
  image-rendering: pixelated;
  object-fit: cover;
  object-position: center;
  cursor: var(--game-cursor);
}

body.aim-locked,
body.aim-locked #game {
  cursor: none;
}

body.aim-locked .hud-panel,
body.aim-locked .rpg-panel,
body.aim-locked .workbench-screen,
body.aim-locked .start-screen,
body.aim-locked .options-screen,
body.aim-locked .death-screen,
body.aim-locked .dialog-screen,
body.aim-locked .dev-console {
  cursor: var(--game-cursor);
}

.ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.dev-console {
  position: absolute;
  left: 50%;
  bottom: 114px;
  z-index: 55;
  width: min(760px, calc(100vw - 28px));
  transform: translateX(-50%);
  pointer-events: auto;
  border: 8px solid transparent;
  border-image: var(--ui-frame) 8 fill / 8px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(38, 22, 24, 0.96), rgba(8, 8, 11, 0.98)),
    rgba(13, 11, 14, 0.98);
  box-shadow: 0 0 0 2px #0b0a0c, 0 16px 30px rgba(0, 0, 0, 0.48);
  padding: 8px;
  image-rendering: pixelated;
}

.dev-console.hidden {
  display: none;
}

.dev-console-log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 132px;
  overflow: hidden;
  margin-bottom: 7px;
  color: #d8c79f;
  font-size: 9px;
  line-height: 1.25;
}

.dev-console-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-console-line.command {
  color: var(--gold);
}

.dev-console-line.error {
  color: #ff8060;
}

.dev-console.locked .dev-console-log {
  max-height: 54px;
}

.dev-console-form {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 6px;
  border: 2px solid #8c5235;
  background: rgba(8, 7, 9, 0.88);
  padding: 6px 7px;
}

.dev-console-form span {
  color: var(--ember);
  font-size: 11px;
}

.dev-console-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff2cc;
  font: inherit;
  font-size: 10px;
}

.dev-console-form input::placeholder {
  color: #8f806d;
}

.hud-panel {
  pointer-events: auto;
  border: 8px solid transparent;
  border-image: var(--ui-frame) 8 fill / 8px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(41, 28, 28, 0.9), rgba(11, 10, 12, 0.94)),
    rgba(17, 14, 17, 0.94);
  box-shadow: 0 0 0 2px #0b0a0c, 0 10px 24px rgba(0, 0, 0, 0.42);
  image-rendering: pixelated;
}

.top-left {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 350px;
  padding: 8px;
  transform: scale(var(--hud-scale));
  transform-origin: top left;
}

.top-right {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 170px;
  padding: 8px;
  transform: scale(var(--hud-scale));
  transform-origin: top right;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.game-title {
  color: var(--gold);
  font-size: 14px;
  font-weight: 900;
  text-shadow: 2px 2px #1c0a08;
}

.tag {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 22px;
  border: 2px solid #c69062;
  padding: 0 6px;
  color: #fff2cc;
  background:
    linear-gradient(180deg, #9b5a3d, #5b2d26 56%, #2f1717),
    #3f2720;
  box-shadow: inset 0 0 0 1px #ffd19a, 0 0 0 1px #1a0d0b;
  font-size: 9px;
  line-height: 12px;
  overflow: visible;
  text-align: center;
}

.bar-wrap {
  display: grid;
  grid-template-columns: 24px minmax(108px, 1fr) minmax(96px, max-content);
  align-items: center;
  gap: 6px;
  height: 20px;
  margin-top: 4px;
  font-size: 10px;
}

.bar-wrap strong {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  white-space: nowrap;
}

.bar {
  height: 14px;
  border: 4px solid transparent;
  border-image: var(--ui-frame) 7 fill / 4px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(255, 220, 144, 0.12), rgba(0, 0, 0, 0.18)),
    #1a1719;
  overflow: hidden;
  image-rendering: pixelated;
}

.bar-fill {
  height: 100%;
  width: 100%;
  transition: width 110ms linear;
  background-size: 8px 8px, 100% 100%;
}

.bar-fill.hp {
  background:
    repeating-linear-gradient(90deg, rgba(255, 238, 172, 0.18) 0 3px, transparent 3px 7px),
    linear-gradient(90deg, #8e1f1f, #ff503e);
}

.bar-fill.mp {
  background:
    repeating-linear-gradient(90deg, rgba(215, 246, 255, 0.16) 0 3px, transparent 3px 7px),
    linear-gradient(90deg, #1f4f8e, #4cc9f0);
}

.bar-fill.xp {
  background:
    repeating-linear-gradient(90deg, rgba(255, 247, 176, 0.14) 0 3px, transparent 3px 7px),
    linear-gradient(90deg, #476c2f, #b7df61);
}

#minimap {
  display: block;
  width: 144px;
  height: 144px;
  margin: 0 auto;
  background: #09090b;
  border: 7px solid transparent;
  border-image: var(--ui-frame) 8 fill / 7px / 0 stretch;
  image-rendering: pixelated;
}

.objective {
  margin-top: 8px;
  min-height: 34px;
  color: #f2d994;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.map-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: 24px;
}

.map-shell {
  width: min(620px, calc(100vw - 48px));
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(43, 29, 28, 0.96), rgba(11, 10, 12, 0.96)),
    #151013;
}

.map-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #f3cf7f;
  text-shadow: 2px 2px #190908;
}

.map-title-row strong {
  font-size: 14px;
}

.map-title-row span {
  color: #cdbf9d;
  font-size: 10px;
  text-transform: uppercase;
}

#large-map {
  display: block;
  width: min(512px, calc(100vw - 88px), calc(100vh - 170px));
  height: auto;
  aspect-ratio: 1;
  margin: 8px auto;
  border: 8px solid transparent;
  border-image: var(--ui-frame) 8 fill / 8px / 0 stretch;
  background: #060608;
  image-rendering: pixelated;
}

.map-objective {
  color: #f2d994;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  opacity: 0.82;
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: #f1d492;
  box-shadow: 0 0 6px #200b08;
}

.crosshair::before {
  left: 10px;
  top: 2px;
  width: 2px;
  height: 18px;
}

.crosshair::after {
  left: 2px;
  top: 10px;
  width: 18px;
  height: 2px;
}

.center-message {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 36px));
  padding: 12px 16px;
  text-align: center;
  color: #ffe9ad;
  background: rgba(19, 12, 11, 0.9);
  border: 2px solid #8b583a;
  box-shadow: 0 0 0 2px #120b0a, 0 12px 30px rgba(0, 0, 0, 0.45);
  font-weight: 900;
  text-transform: uppercase;
}

.pickup {
  position: absolute;
  left: 50%;
  bottom: 154px;
  transform: translateX(-50%) scale(var(--hud-scale));
  transform-origin: bottom center;
  min-width: 210px;
  padding: 8px 12px;
  border: 2px solid var(--gold);
  background: rgba(12, 11, 12, 0.9);
  color: #ffe9ad;
  text-align: center;
  font-weight: 900;
}

.dialog-screen {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: clamp(132px, 17vh, 174px);
  transform: translateX(-50%);
  width: min(780px, calc(100vw - 32px));
}

.dialog-screen.service-dialog,
.dialog-screen.stash-dialog,
.dialog-screen.gate-dialog,
.dialog-screen.quest-dialog,
.dialog-screen.difficulty-dialog,
.dialog-screen.story-dialog,
.dialog-screen.pet-pouch-dialog,
.dialog-screen.cartographer-dialog,
.dialog-screen.pet-keeper-dialog {
  width: min(900px, calc(100vw - 32px));
}

.dialog-screen.pet-pouch-dialog,
.dialog-screen.pet-keeper-dialog {
  width: min(940px, calc(100vw - 32px));
}

.dialog-screen.cartographer-dialog {
  bottom: clamp(96px, 12vh, 142px);
  width: min(1060px, calc(100vw - 24px));
}

.dialog-screen.quest-dialog {
  bottom: clamp(118px, 15vh, 162px);
  width: min(940px, calc(100vw - 28px));
}

.dialog-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 7px solid transparent;
  border-image: var(--ui-frame) 8 fill / 7px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(34, 24, 24, 0.96), rgba(10, 9, 12, 0.98)),
    #100d10;
  box-shadow: 0 0 0 3px #09080a, 0 22px 45px rgba(0, 0, 0, 0.55);
  padding: 14px;
  image-rendering: pixelated;
  max-height: min(430px, calc(100vh - 180px));
  overflow-y: auto;
}

.pet-pouch-dialog .dialog-content,
.pet-keeper-dialog .dialog-content {
  max-height: min(620px, calc(100vh - 132px));
}

.cartographer-dialog .dialog-content {
  max-height: min(720px, calc(100vh - 96px));
  padding: 14px;
}

.quest-dialog .dialog-content {
  max-height: min(560px, calc(100vh - 136px));
}

.dialog-portrait {
  display: none;
}

.dialog-main {
  min-width: 0;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dialog-speaker {
  color: var(--gold);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 2px 2px #120a08;
}

.dialog-subtitle {
  margin-top: 3px;
  color: #c5a37b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.dialog-text {
  margin: 10px 0 14px;
  color: #eadbb7;
  font-size: 12px;
  line-height: 1.55;
  text-wrap: pretty;
}

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

.service-dialog .dialog-actions,
.stash-dialog .dialog-actions,
.gate-dialog .dialog-actions,
.quest-dialog .dialog-actions,
.difficulty-dialog .dialog-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cartographer-dialog .dialog-actions,
.pet-keeper-dialog .dialog-actions {
  grid-template-columns: minmax(0, 1fr);
}

.dialog-actions button {
  min-height: 42px;
  border: 2px solid #8b6d4f;
  background: #241a19;
  color: #ffe6af;
  padding: 8px 10px;
  cursor: var(--game-cursor);
  font-weight: 900;
  font-size: 10px;
  line-height: 1.15;
  text-transform: uppercase;
}

.dialog-actions button:hover {
  border-color: var(--gold);
  background: #3a241d;
}

.dialog-actions button:disabled {
  color: #786d61;
  border-color: #4b3a31;
  background: #151111;
  cursor: var(--game-cursor);
}

.dialog-actions .service-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid #4c3c34;
  background:
    linear-gradient(180deg, rgba(30, 24, 26, 0.96), rgba(14, 12, 15, 0.98)),
    #121013;
  padding: 9px;
  text-align: left;
  text-transform: none;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.dialog-actions .service-card:hover {
  border-color: var(--gold);
  background: #241a17;
}

.dialog-actions .service-card:disabled {
  opacity: 0.58;
}

.service-card .item-icon {
  width: 42px;
  height: 42px;
}

.service-card-copy,
.service-card-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.service-card-copy strong,
.service-card-copy small,
.service-card-meta b,
.service-card-meta em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-dialog .service-card {
  min-height: 88px;
  grid-template-columns: 42px minmax(0, 1fr) minmax(108px, auto);
  align-items: stretch;
}

.quest-dialog .service-card-copy {
  justify-content: center;
}

.quest-dialog .service-card-copy strong,
.quest-dialog .service-card-copy small,
.quest-dialog .service-card-meta b,
.quest-dialog .service-card-meta em {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.quest-dialog .service-card-copy strong {
  line-height: 1.18;
}

.quest-dialog .service-card-copy small {
  color: #d9ceb5;
  font-size: 10px;
  line-height: 1.32;
}

.quest-dialog .service-card-meta {
  align-content: center;
  justify-items: end;
  border-left: 1px solid rgba(139, 109, 79, 0.35);
  padding-left: 8px;
  text-align: right;
}

.service-card-copy strong {
  color: #ffe6af;
  font-size: 12px;
  text-transform: uppercase;
}

.service-card-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.service-card-meta {
  justify-items: end;
}

.service-card-meta b {
  color: var(--gold);
  font-size: 12px;
}

.service-card-meta em {
  color: #9ff5d6;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.gate-dialog .dialog-actions > button[data-dialog-action="leave"] {
  grid-column: 1 / -1;
}

.cartographer-layout,
.pet-keeper-layout {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.cartographer-layout {
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  gap: 12px;
  align-items: start;
}

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

.cartographer-map-board,
.cartographer-route-panel,
.pet-keeper-bond,
.pet-keeper-panel {
  min-width: 0;
  border: 2px solid #4c3c34;
  background:
    linear-gradient(180deg, rgba(30, 24, 25, 0.96), rgba(13, 11, 14, 0.98)),
    #121013;
  padding: 10px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.cartographer-map-board,
.cartographer-route-panel {
  padding: 12px;
}

.cartographer-route-panel .specialist-panel-title strong,
.cartographer-map-board .specialist-panel-title strong {
  font-size: 14px;
}

.specialist-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: #ffe6af;
  text-transform: uppercase;
}

.specialist-panel-title strong,
.specialist-panel-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specialist-panel-title strong {
  font-size: 12px;
}

.specialist-panel-title span {
  color: var(--gold);
  font-size: 10px;
}

.cartographer-map-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  border: 2px solid #6b4b3d;
  background:
    linear-gradient(180deg, rgba(58, 43, 35, 0.75), rgba(20, 15, 14, 0.92)),
    #1b1413;
  padding: 8px;
}

.cartographer-map-grid i {
  aspect-ratio: 1;
  border: 1px solid rgba(139, 109, 79, 0.7);
  background: #171213;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.cartographer-map-grid i.route {
  background: #3a3024;
}

.cartographer-map-grid i.danger {
  background: #4a1b1b;
}

.cartographer-map-grid i.marker {
  border-color: var(--gold);
  background: #9f7b3e;
  box-shadow: 0 0 0 2px rgba(215, 177, 95, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.cartographer-readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.cartographer-readout span {
  min-width: 0;
  border: 1px solid #4c3c34;
  background: #171213;
  color: var(--muted);
  padding: 6px;
  font-size: 9px;
  text-align: center;
  text-transform: uppercase;
}

.cartographer-readout b {
  display: block;
  color: var(--gold);
  font-size: 13px;
}

.cartographer-map-board p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.cartographer-plan-ribbon {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  border: 1px solid #4c3c34;
  background:
    linear-gradient(90deg, rgba(56, 42, 31, 0.82), rgba(18, 14, 16, 0.96)),
    #171213;
  padding: 7px;
  text-transform: uppercase;
}

.cartographer-plan-ribbon.active {
  border-color: #9f7b3e;
  box-shadow: inset 0 0 0 1px rgba(215, 177, 95, 0.16);
}

.cartographer-plan-ribbon strong {
  min-width: 0;
  color: var(--gold);
  font-size: 11px;
}

.cartographer-plan-ribbon small {
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
}

.cartographer-route-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.cartographer-route-card,
.pet-keeper-train-card,
.pet-keeper-pet-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 70px;
  border: 2px solid #4c3c34;
  background:
    linear-gradient(180deg, rgba(28, 23, 25, 0.96), rgba(12, 10, 13, 0.98)),
    #121013;
  padding: 8px;
  text-align: left;
  text-transform: none;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.cartographer-route-card {
  grid-template-columns: 42px minmax(0, 1fr) minmax(104px, auto);
  min-height: 62px;
  gap: 10px;
  padding: 8px 10px;
}

.cartographer-route-card:hover,
.pet-keeper-train-card:hover,
.pet-keeper-pet-card:hover {
  border-color: var(--gold);
  background: #241a17;
}

.cartographer-route-card.primary-route {
  border-color: #9f7b3e;
}

.cartographer-route-card.plan-card {
  background:
    radial-gradient(circle at 22% 50%, rgba(215, 177, 95, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(29, 24, 22, 0.96), rgba(12, 10, 13, 0.98)),
    #121013;
}

.cartographer-route-card.route-cut {
  border-color: #7a604a;
}

.cartographer-route-card:disabled,
.pet-keeper-train-card:disabled,
.pet-keeper-pet-card:disabled {
  opacity: 0.58;
}

.cartographer-route-card .item-icon,
.pet-keeper-train-card .item-icon,
.pet-keeper-pet-card .item-icon {
  width: 38px;
  height: 38px;
}

.cartographer-route-card .item-icon {
  width: 40px;
  height: 40px;
}

.specialist-card-copy,
.specialist-card-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.specialist-card-copy strong,
.specialist-card-copy small,
.specialist-card-meta b,
.specialist-card-meta em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartographer-route-card .specialist-card-copy {
  gap: 3px;
}

.cartographer-route-card .specialist-card-copy strong,
.cartographer-route-card .specialist-card-copy small,
.cartographer-route-card .specialist-card-meta b,
.cartographer-route-card .specialist-card-meta em {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.cartographer-route-card .specialist-card-copy strong {
  font-size: 13px;
  line-height: 1.15;
}

.cartographer-route-card .specialist-card-copy small {
  font-size: 10px;
  line-height: 1.24;
}

.cartographer-route-card .specialist-card-meta {
  min-width: 104px;
  align-self: stretch;
  align-content: center;
  justify-items: end;
  border-left: 1px solid rgba(139, 109, 79, 0.35);
  padding-left: 8px;
  text-align: right;
}

.cartographer-route-card .specialist-card-meta b {
  font-size: 12px;
  line-height: 1.12;
}

.cartographer-route-card .specialist-card-meta em {
  font-size: 10px;
}

.specialist-card-copy strong {
  color: #ffe6af;
  font-size: 12px;
  text-transform: uppercase;
}

.specialist-card-copy small {
  color: var(--muted);
  font-size: 10px;
}

.specialist-card-meta {
  justify-items: end;
}

.specialist-card-meta b {
  color: var(--gold);
  font-size: 11px;
}

.specialist-card-meta em {
  color: #9ff5d6;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.pet-keeper-bond {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 0.75fr);
  align-items: center;
  gap: 10px;
}

.pet-keeper-bond > .item-icon {
  width: 46px;
  height: 46px;
}

.pet-keeper-bond-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.pet-keeper-bond-copy strong,
.pet-keeper-bond-copy span,
.pet-keeper-bond-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pet-keeper-bond-copy strong,
.pet-keeper-bond-copy span {
  white-space: nowrap;
}

.pet-keeper-bond-copy strong {
  color: #ffe6af;
  font-size: 13px;
  text-transform: uppercase;
}

.pet-keeper-bond-copy span,
.pet-keeper-bond-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.pet-keeper-train-slot {
  min-width: 0;
}

.pet-keeper-train-card {
  width: 100%;
  min-height: 62px;
}

.pet-keeper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pet-keeper-pet-card {
  min-height: 84px;
  grid-template-columns: auto minmax(0, 1fr);
}

.pet-keeper-pet-card .specialist-card-meta {
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-items: stretch;
}

.specialist-empty-slot {
  min-height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid #342a27;
  background: #100d10;
  color: #786d61;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.cartographer-layout + button[data-dialog-action="leave"],
.pet-keeper-layout + button[data-dialog-action="leave"] {
  grid-column: 1 / -1;
}

.pet-pouch-layout {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pet-pouch-summary {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid #4c3c34;
  background:
    linear-gradient(180deg, rgba(31, 24, 25, 0.96), rgba(13, 11, 14, 0.98)),
    #121013;
  padding: 9px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.26);
}

.pet-pouch-summary .item-icon {
  width: 42px;
  height: 42px;
}

.pet-pouch-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.pet-pouch-copy strong,
.pet-pouch-copy span,
.pet-pouch-copy small,
.pet-pouch-summary b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-pouch-copy strong {
  color: #ffe6af;
  font-size: 13px;
  text-transform: uppercase;
}

.pet-pouch-copy span,
.pet-pouch-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.pet-pouch-summary b {
  color: var(--gold);
  font-size: 14px;
}

.pet-pouch-panel {
  min-height: 245px;
  max-height: 390px;
}

.pet-pouch-dialog .pet-pouch-panel {
  min-height: 340px;
  max-height: 470px;
}

.pet-pouch-layout + button[data-dialog-action="leave"] {
  grid-column: 1 / -1;
}

.bottom-left {
  position: absolute;
  left: 14px;
  bottom: 8px;
  width: 176px;
  padding: 9px;
  transform: scale(var(--hud-scale));
  transform-origin: bottom left;
}

.bottom-right {
  position: absolute;
  right: 14px;
  bottom: 8px;
  transform: scale(var(--hud-scale));
  transform-origin: bottom right;
}

.weapon-info {
  width: 286px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.weapon-info-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.weapon-info-title span,
.weapon-info-title strong,
.weapon-info-resource,
.weapon-info-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weapon-info-title span {
  color: #ffe0a2;
  font-size: 10px;
  font-weight: 900;
}

.weapon-info-title strong {
  color: var(--gold);
  font-size: 10px;
}

.weapon-info-resource {
  color: #f2d994;
  font-size: 10px;
  font-weight: 900;
}

.weapon-info-detail {
  display: none;
  color: var(--muted);
  font-size: 11px;
}

.compact .stat-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  color: #e4d6b7;
  font-size: 11px;
}

.hotbar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%) scale(var(--hud-scale));
  transform-origin: bottom center;
  display: grid;
  grid-template-columns: minmax(150px, 1.08fr) repeat(3, minmax(156px, 1fr)) minmax(168px, 1.08fr);
  gap: 8px;
  width: 980px;
  padding: 8px;
}

.hot-slot {
  min-width: 0;
  position: relative;
  height: 76px;
  border: 2px solid #59483f;
  background:
    radial-gradient(circle at 22px 46px, rgba(215, 177, 95, 0.11), transparent 30px),
    linear-gradient(180deg, rgba(35, 27, 29, 0.96), rgba(14, 12, 15, 0.98)),
    #181419;
  color: #eeddb7;
  text-align: left;
  padding: 12px 10px 9px 38px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(20px, auto) minmax(18px, auto);
  align-content: center;
  gap: 4px;
  cursor: var(--game-cursor);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.34), 0 2px 0 #080607;
  overflow: hidden;
}

.hot-slot::before {
  content: attr(data-hotkey);
  position: absolute;
  left: 5px;
  top: 5px;
  min-width: 20px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #8b6d4f;
  background: #100d10;
  color: #ffe6af;
  padding: 0 3px;
  font-size: 8px;
  line-height: 1;
  text-shadow: 1px 1px #080607;
  box-shadow: 0 1px 0 #080607;
}

.hot-slot::after {
  content: none;
}

.hot-slot.active,
.hot-slot:hover {
  border-color: #b79261;
  background:
    radial-gradient(circle at 22px 46px, rgba(255, 220, 118, 0.15), transparent 32px),
    linear-gradient(180deg, rgba(47, 34, 30, 0.98), rgba(19, 14, 15, 0.98)),
    #2d211d;
}

.hot-slot.locked {
  opacity: 0.72;
}

.hot-slot.usable {
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(215, 177, 95, 0.24),
    0 0 10px rgba(215, 177, 95, 0.12),
    0 2px 0 #080607;
}

.hot-slot strong,
.hot-slot small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.hot-slot strong {
  display: block;
  width: 100%;
  font-size: 10px;
  color: #fff0c2;
  text-shadow: 1px 1px #080607;
}

#skill1-name,
#skill2-name,
#skill3-name {
  text-align: center;
}

.hot-slot small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.25;
}

.rpg-panel {
  pointer-events: auto;
  position: absolute;
  inset: 34px;
  background: var(--panel-strong);
  border: 3px solid #765f4a;
  box-shadow: 0 0 0 4px #0a090b, 0 20px 50px rgba(0, 0, 0, 0.62);
  padding: 16px;
  overflow: auto;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #514037;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.panel-header h2,
.panel-header p,
.panel-card h3 {
  margin: 0;
}

.panel-header h2 {
  color: var(--gold);
  font-size: 17px;
}

.panel-header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 2px solid #82664b;
  background: #231919;
  color: #ffe2b0;
  cursor: var(--game-cursor);
}

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.panel-tabs button {
  border: 2px solid #5c493d;
  background: #171317;
  color: #cdbf9d;
  padding: 9px 8px;
  cursor: var(--game-cursor);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 10px;
}

.panel-tabs button.active,
.panel-tabs button:hover {
  border-color: var(--gold);
  background: #2a1e1b;
  color: #ffe6af;
}

.panel-page {
  display: none;
}

.panel-page.active {
  display: block;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.build-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
}

.class-tree-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 12px;
  align-items: start;
}

.weapon-focus-column {
  margin-top: 12px;
}

.weapon-focus-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.build-overview-card {
  min-width: 0;
}

.build-overview {
  display: grid;
  gap: 12px;
}

.build-identity {
  border: 1px solid #705743;
  background:
    linear-gradient(180deg, rgba(49, 31, 25, 0.94), rgba(17, 13, 15, 0.96));
  padding: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 175, 0.08);
}

.build-identity strong {
  display: block;
  color: #ffe6af;
  font-size: 16px;
}

.build-identity span,
.build-identity b {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.build-identity b {
  color: #f1c875;
  text-align: right;
  font-weight: 900;
  text-transform: uppercase;
}

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

.build-metric {
  border: 1px solid #3c312c;
  background: #19161a;
  padding: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.build-metric span,
.build-metric small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.build-metric strong {
  color: #ffe6af;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.build-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.build-pill-row span {
  border: 1px solid #5c493d;
  background: rgba(36, 26, 23, 0.9);
  color: #eadbb7;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.25;
  text-transform: uppercase;
}

.class-tree-shell {
  display: grid;
  gap: 12px;
}

.class-tree-header {
  border: 2px solid #705743;
  background:
    linear-gradient(180deg, rgba(44, 29, 24, 0.96), rgba(14, 11, 13, 0.98));
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.class-tree-header h3 {
  margin-bottom: 4px;
  color: #f1c875;
  font-size: 15px;
}

.class-tree-header p {
  color: var(--muted);
  line-height: 1.35;
}

.class-tree-header strong {
  color: #ffe6af;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.tree-column {
  min-width: 0;
}

.tree-node {
  position: relative;
  border-color: #5c493d;
  background:
    linear-gradient(180deg, rgba(32, 24, 24, 0.98), rgba(15, 13, 16, 0.98));
  min-height: 108px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 175, 0.055);
}

.tree-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: #8b6d4f;
  box-shadow: 0 0 10px rgba(241, 200, 117, 0.18);
}

.tree-node.active-focus {
  border-color: #9c744f;
  background:
    linear-gradient(180deg, rgba(45, 31, 24, 0.98), rgba(17, 13, 15, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 230, 175, 0.09), 0 0 0 1px rgba(241, 200, 117, 0.1);
}

.tree-node.active-focus::before {
  background: #f1c875;
  box-shadow: 0 0 12px rgba(241, 200, 117, 0.28);
}

.tree-node-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}

.tree-node-title strong {
  color: #ffe6af;
  font-size: 12px;
}

.tree-node-title span,
.tree-node-meta {
  color: #f1c875;
  font-size: 10px;
  text-transform: uppercase;
}

.tree-node-effect {
  margin-top: 7px;
  border-top: 1px solid #332925;
  padding-top: 7px;
  color: #eadbb7;
  font-size: 10px;
  line-height: 1.35;
}

.tree-progress {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 7px;
}

.tree-progress i {
  display: block;
  height: 5px;
  background: #2a2020;
  border: 1px solid #3c312c;
}

.tree-progress i.filled {
  background: linear-gradient(90deg, #8b6d4f, #f1c875);
  border-color: #b9955a;
}

.panel-card {
  border: 2px solid #4c3c34;
  background: #121013;
  padding: 12px;
}

.panel-card.wide {
  grid-column: span 2;
}

.panel-card h3 {
  color: #f1c875;
  margin-bottom: 10px;
  font-size: 13px;
}

.attr-list,
.equipment-list,
.perk-list,
.path-list,
.skill-list,
.weapon-focus-list,
.quest-list,
.service-actions,
.inventory-list,
.log-list {
  display: grid;
  gap: 8px;
}

.attr-row,
.equip-row,
.perk-row,
.path-row,
.skill-row,
.weapon-focus-row,
.quest-row,
.inventory-row,
.log-row {
  border: 1px solid #3c312c;
  background: #19161a;
  padding: 8px;
  min-height: 36px;
}

.story-row {
  display: grid;
  gap: 4px;
  border-color: #7f6141;
  background: linear-gradient(180deg, rgba(48, 32, 27, 0.92), rgba(19, 15, 18, 0.92));
}

.story-row strong {
  color: var(--gold);
}

.story-row span {
  color: #eadbb7;
  line-height: 1.35;
}

.quest-row button {
  min-width: 72px;
  padding: 6px 8px;
  border-color: #8a4239;
  color: #ffd2a1;
  background: linear-gradient(180deg, rgba(78, 26, 24, 0.88), rgba(22, 11, 12, 0.94));
  text-transform: uppercase;
}

.quest-row button:hover {
  border-color: #ff8178;
  color: #fff0c8;
}

.attr-row,
.equip-row,
.perk-row,
.path-row,
.skill-row,
.quest-row,
.inventory-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}

.muted {
  color: var(--muted);
}

.rarity-common {
  color: #dfd8c4;
}

.rarity-uncommon {
  color: #82d46f;
}

.rarity-rare {
  color: #69b6ff;
}

.rarity-epic {
  color: #d17dff;
}

.rarity-legendary {
  color: #ffbd4a;
}

.rarity-horde {
  color: #ff4a36;
  text-shadow: 0 0 8px rgba(255, 74, 54, 0.42);
}

.point-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.point-actions button,
.perk-row button,
.path-row button,
.skill-row button,
.weapon-focus-row button,
.service-actions button,
.inventory-row button,
.lobby-form button,
.lobby-actions button,
.main-menu-actions button,
.menu-panel-header button,
.save-slot-actions button,
.start-actions button {
  border: 2px solid #8b6d4f;
  background: #241a19;
  color: #ffe6af;
  padding: 8px 10px;
  cursor: var(--game-cursor);
}

.point-actions button:hover,
.perk-row button:hover,
.path-row button:hover,
.skill-row button:hover,
.weapon-focus-row button:hover,
.service-actions button:hover,
.inventory-row button:hover,
.lobby-form button:hover,
.lobby-actions button:hover,
.main-menu-actions button:hover,
.menu-panel-header button:hover,
.save-slot-actions button:hover,
.start-actions button:hover {
  border-color: var(--gold);
  background: #3a241d;
}

.perk-row button:disabled,
.path-row button:disabled,
.skill-row button:disabled,
.weapon-focus-row button:disabled,
.service-actions button:disabled,
.lobby-form button:disabled,
.lobby-actions button:disabled,
.save-slot-actions button:disabled {
  opacity: 0.45;
  cursor: var(--game-cursor);
}

.service-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.loadout-screen {
  display: grid;
  grid-template-columns: minmax(270px, 0.82fr) minmax(360px, 1.6fr);
  gap: 14px;
  align-items: stretch;
}

.loadout-left {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  min-width: 0;
}

.paperdoll-panel,
.loadout-inventory-panel,
.loadout-stats {
  min-width: 0;
}

.equipment-list.paperdoll {
  display: block;
}

.paperdoll-stage {
  position: relative;
  min-height: 330px;
  border: 2px solid #705743;
  background:
    radial-gradient(circle at 50% 46%, rgba(241, 200, 117, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(52, 37, 35, 0.85), rgba(18, 16, 19, 0.96)),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(241, 200, 117, 0.045) 13px 14px);
  overflow: hidden;
}

.paperdoll-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(241, 200, 117, 0.18);
  pointer-events: none;
}

.paperdoll-figure {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 128px;
  height: 232px;
  transform: translateX(-50%);
}

.paperdoll-character {
  top: 82px;
  width: 160px;
  height: 160px;
  background-image: url("assets/people/main_character_idle_strip.png?v=20260528-char001-idle-anim");
  background-repeat: no-repeat;
  background-size: 640px 160px;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.5));
  animation: paperdoll-idle 1s steps(4) infinite;
  pointer-events: none;
  user-select: none;
}

@keyframes paperdoll-idle {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -640px 0;
  }
}

.player-shadow,
.player-weapon,
.player-leg,
.player-body,
.player-arm,
.player-head,
.player-face {
  position: absolute;
  display: block;
}

.player-shadow {
  left: 22px;
  right: 22px;
  bottom: 5px;
  height: 14px;
  background: #090708;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
}

.player-head {
  left: 49px;
  top: 16px;
  width: 30px;
  height: 30px;
  background: #d7b793;
  box-shadow:
    inset 0 -7px 0 #a8795d,
    0 -7px 0 #3b2419,
    -7px 4px 0 #3b2419,
    7px 4px 0 #3b2419;
}

.player-face {
  left: 55px;
  top: 30px;
  width: 5px;
  height: 4px;
  background: #211615;
  box-shadow: 14px 0 0 #211615, 7px 8px 0 #7b2925;
}

.player-body {
  left: 41px;
  top: 54px;
  width: 46px;
  height: 74px;
  background: linear-gradient(180deg, #5c4754, #2a2028);
  box-shadow:
    inset 0 0 0 5px #8b6d4f,
    inset 0 -13px 0 #151013,
    0 8px 0 #0b0809;
}

.player-body::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 26px;
  height: 18px;
  background: #f1c875;
  box-shadow: inset 0 -8px 0 #8b6d4f;
}

.player-arm {
  top: 61px;
  width: 18px;
  height: 58px;
  background: #d7b793;
  box-shadow: inset 0 -30px 0 #3a2a31, 0 5px 0 #0b0809;
}

.player-arm-left {
  left: 20px;
}

.player-arm-right {
  right: 20px;
}

.player-leg {
  top: 128px;
  width: 19px;
  height: 72px;
  background: #251d22;
  box-shadow: inset 0 -13px 0 #6b4a36, 0 6px 0 #0b0809;
}

.player-leg-left {
  left: 42px;
}

.player-leg-right {
  right: 42px;
}

.player-weapon {
  z-index: 2;
  background: #8e7362;
  box-shadow: 0 4px 0 #0b0809;
}

.paperdoll-gunslinger .player-weapon {
  right: 3px;
  top: 82px;
  width: 44px;
  height: 9px;
  background: #8e7362;
  box-shadow: 12px -5px 0 #2e2528, 30px -2px 0 -1px #d7b15f, 0 9px 0 #3b2419;
}

.paperdoll-heavy .player-weapon {
  right: -6px;
  top: 72px;
  width: 58px;
  height: 14px;
  background: #7a5b3d;
  box-shadow: 14px -8px 0 #2b2020, 42px -2px 0 -2px #d7b15f, 0 14px 0 #3b2419;
}

.paperdoll-caster .player-weapon {
  right: 12px;
  top: 32px;
  width: 8px;
  height: 124px;
  background: #8b6d4f;
  box-shadow: 0 0 0 3px #2b1c18, 0 -12px 0 3px #d17dff, 0 114px 0 -1px #d7b15f;
}

.paperdoll-armor-uncommon .player-body {
  box-shadow: inset 0 0 0 5px #4f8c48, inset 0 -13px 0 #151013, 0 8px 0 #0b0809;
}

.paperdoll-armor-rare .player-body {
  box-shadow: inset 0 0 0 5px #3b78a8, inset 0 -13px 0 #151013, 0 8px 0 #0b0809;
}

.paperdoll-armor-epic .player-body {
  box-shadow: inset 0 0 0 5px #7d4b9a, inset 0 -13px 0 #151013, 0 8px 0 #0b0809;
}

.paperdoll-armor-legendary .player-body {
  box-shadow: inset 0 0 0 5px #c58b35, inset 0 -13px 0 #151013, 0 8px 0 #0b0809;
}

.equipment-slot {
  position: absolute;
  width: clamp(104px, 30%, 128px);
  min-height: 84px;
  border: 2px solid #8b6d4f;
  background: rgba(18, 14, 15, 0.94);
  padding: 6px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "label label"
    "icon name"
    "icon power";
  gap: 5px 7px;
  box-shadow: 0 4px 0 #0b0809;
  overflow: hidden;
}

.equipment-slot.equipped {
  cursor: var(--game-cursor);
}

.equipment-slot.equipped:hover {
  border-color: var(--gold);
  background: rgba(36, 26, 23, 0.96);
  box-shadow: 0 4px 0 #0b0809, 0 0 0 2px rgba(215, 177, 95, 0.18);
}

.equipment-slot .slot-label,
.equipment-slot b,
.inventory-tile em {
  color: #f1c875;
  font-size: 10px;
  text-transform: uppercase;
}

.equipment-slot .slot-label {
  grid-area: label;
}

.equipment-slot .item-icon {
  grid-area: icon;
  width: 34px;
  height: 34px;
  align-self: center;
}

.equipment-slot strong {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  align-self: end;
}

.equipment-slot b {
  grid-area: power;
  align-self: start;
}

.equipment-slot.empty {
  border-color: #3c312c;
  background: rgba(12, 10, 12, 0.9);
}

.equipment-slot-weapon {
  left: 14px;
  top: 36px;
}

.equipment-slot-relic {
  right: 14px;
  top: 36px;
}

.equipment-slot-pet {
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
}

.equipment-slot-armor {
  left: 14px;
  top: 184px;
}

.equipment-slot-charm {
  right: 14px;
  top: 184px;
}

.equipment-slot-boots {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
}

.loadout-stat-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.loadout-stat-row {
  border: 1px solid #3c312c;
  background: #19161a;
  padding: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.loadout-stat-row span,
.loadout-stat-row small {
  color: var(--muted);
  font-size: 11px;
}

.loadout-stat-row strong {
  color: #ffe6af;
  font-size: 14px;
}

.loadout-bonus-line {
  grid-column: 1 / -1;
  border-top: 1px solid #3c312c;
  padding-top: 8px;
  line-height: 1.35;
}

.loadout-inventory-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
}

.inventory-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #3c312c;
  padding-bottom: 8px;
}

.inventory-title-row h3 {
  margin-bottom: 0;
}

.inventory-summary {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
  line-height: 1.25;
}

.inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  align-content: start;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.inventory-grid .inventory-row {
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 118px;
}

.inventory-tile {
  position: relative;
  display: grid;
  grid-template-rows: 50px 16px 14px 18px;
  gap: 5px;
  justify-items: center;
  align-items: center;
  padding: 8px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.inventory-tile:hover {
  transform: translateY(-1px);
  background: #201a1d;
}

.inventory-tile .item-icon {
  width: 46px;
  height: 46px;
  margin: 0;
  place-self: center;
}

.inventory-tile strong {
  display: block;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.inventory-tile span {
  max-width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-tile em {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  text-align: center;
}

.inventory-tile.consumable-item strong {
  max-width: 92px;
}

.inventory-tile.consumable-item span,
.inventory-tile.consumable-item em {
  color: #ffe6af;
}

.inventory-tile .tile-actions {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.inventory-tile .tile-actions.single-action {
  grid-template-columns: 1fr;
}

.inventory-tile:hover .tile-actions,
.inventory-tile:focus-within .tile-actions {
  opacity: 1;
  transform: translateY(0);
}

.inventory-tile .tile-actions button {
  min-width: 0;
  padding: 6px 5px;
}

.inventory-empty-slot {
  min-height: 118px;
  border: 1px solid #2d2624;
  background:
    linear-gradient(180deg, rgba(255, 230, 175, 0.025), rgba(0, 0, 0, 0.08)),
    #100d10;
  box-shadow: inset 0 0 0 1px rgba(241, 200, 117, 0.025);
}

.inventory-list-row {
  grid-template-columns: auto minmax(120px, 1fr) auto;
}

.inventory-list-row .item-icon {
  width: 36px;
  height: 36px;
}

.inventory-list-row .row-actions {
  justify-content: stretch;
}

.inventory-list-row .row-actions.single-action {
  min-width: 104px;
}

.inventory-list-row .row-actions button {
  flex: 1;
}

.item-icon {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid #6d5542;
  background:
    linear-gradient(180deg, rgba(255, 230, 175, 0.08), rgba(0, 0, 0, 0.1)),
    #151216;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.32), 0 2px 0 #080607;
  overflow: hidden;
}

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

.icon-weapon i {
  left: 8px;
  top: 18px;
  width: 24px;
  height: 6px;
  background: #8e7362;
  box-shadow: 6px -5px 0 #2e2528, -2px 7px 0 #4b332b;
}

.icon-weapon i::before {
  right: -5px;
  top: 1px;
  width: 7px;
  height: 4px;
  background: #d7b15f;
}

.icon-staff i,
.icon-voidstaff i,
.icon-scepter i,
.icon-chalice i {
  left: 18px;
  top: 7px;
  width: 5px;
  height: 28px;
  background: #8b6d4f;
  box-shadow: 0 0 0 2px #2b1c18;
}

.icon-staff i::before,
.icon-voidstaff i::before,
.icon-scepter i::before,
.icon-chalice i::before {
  left: -5px;
  top: -5px;
  width: 15px;
  height: 10px;
  background: #d17dff;
}

.icon-crossbow i {
  left: 8px;
  top: 17px;
  width: 26px;
  height: 5px;
  background: #d8c79f;
  box-shadow: 10px -8px 0 -1px #7a5b3d, 10px 8px 0 -1px #7a5b3d;
}

.icon-launcher i,
.icon-flamethrower i,
.icon-blunderbuss i {
  left: 6px;
  top: 16px;
  width: 28px;
  height: 9px;
  background: #8c5235;
  box-shadow: 7px -5px 0 #281814, -2px 8px 0 #3b2419;
}

.icon-armor i {
  left: 10px;
  top: 8px;
  width: 22px;
  height: 26px;
  background: #66513f;
  clip-path: polygon(15% 0, 85% 0, 100% 35%, 78% 100%, 22% 100%, 0 35%);
  box-shadow: inset 0 0 0 4px #a18f75;
}

.icon-boots i {
  left: 7px;
  top: 22px;
  width: 13px;
  height: 10px;
  background: #7a5433;
  box-shadow: 14px 0 0 #7a5433, 2px -11px 0 #3b2419, 16px -11px 0 #3b2419;
}

.icon-relic i,
.icon-charm i {
  left: 13px;
  top: 8px;
  width: 16px;
  height: 22px;
  background: #d7b15f;
  clip-path: polygon(50% 0, 100% 28%, 80% 100%, 20% 100%, 0 28%);
  box-shadow: inset 0 -8px 0 #7b5fa8;
}

.icon-charm i::before {
  left: 5px;
  top: -5px;
  width: 6px;
  height: 6px;
  background: #8b242a;
}

.icon-petEgg i {
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  background-image: var(--pet-egg-image, url("assets/items/pet-eggs/egg-green.png?v=20260606-egg02"));
  background-repeat: no-repeat;
  background-size: 32px 32px;
  image-rendering: pixelated;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.item-icon[data-atlas-icon] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 230, 175, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(255, 230, 175, 0.06), rgba(0, 0, 0, 0.16)),
    #111014;
}

.item-icon[data-atlas-icon] i {
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  background-color: transparent;
  background-image: var(--icon-image, url("assets/items/icons_full_32-v2.png?v=20260615-geargrid02"));
  background-repeat: no-repeat;
  background-size: var(--icon-bg-size, 512px 3136px);
  background-position: var(--icon-pos-x) var(--icon-pos-y);
  box-shadow: none;
  clip-path: none;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

.item-icon.socket-aura {
  border-color: var(--socket-aura-color, #d94141);
  box-shadow:
    inset 0 0 0 1px var(--socket-aura-ring, rgba(255, 255, 255, 0.18)),
    inset 0 -4px 0 rgba(0, 0, 0, 0.32),
    0 0 var(--socket-aura-size, 10px) var(--socket-aura-soft, rgba(217, 65, 65, 0.3)),
    0 2px 0 #080607;
}

.item-icon.socket-aura::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--socket-aura-color, #d94141);
  opacity: var(--socket-aura-alpha, 0.55);
  pointer-events: none;
  animation: socketAuraPulse 1.35s ease-in-out infinite;
}

.item-icon.socket-aura[data-atlas-icon] i {
  filter: drop-shadow(0 0 var(--socket-aura-size, 10px) var(--socket-aura-color, #d94141));
}

@keyframes socketAuraPulse {
  0%,
  100% {
    opacity: var(--socket-aura-low, 0.32);
  }

  50% {
    opacity: var(--socket-aura-alpha, 0.55);
  }
}

.item-icon[data-atlas-icon] i::before,
.item-icon[data-atlas-icon] i::after {
  display: none;
}

.rarity-frame-common {
  border-color: #4d453e;
}

.rarity-frame-uncommon {
  border-color: #4f8c48;
}

.rarity-frame-rare {
  border-color: #3b78a8;
}

.rarity-frame-epic {
  border-color: #7d4b9a;
}

.rarity-frame-legendary {
  border-color: #c58b35;
}

.rarity-frame-horde {
  border-color: #ff4a36;
  box-shadow: inset 0 0 0 1px rgba(255, 189, 74, 0.22), 0 0 14px rgba(255, 74, 54, 0.18);
}

.unique-item {
  background:
    linear-gradient(180deg, rgba(49, 31, 19, 0.92), rgba(19, 15, 17, 0.98)),
    repeating-linear-gradient(135deg, rgba(255, 189, 74, 0.08) 0 6px, transparent 6px 14px);
}

.inventory-row.rarity-frame-horde,
.equipment-slot.rarity-frame-horde {
  background:
    linear-gradient(180deg, rgba(63, 20, 17, 0.92), rgba(19, 12, 14, 0.98)),
    repeating-linear-gradient(135deg, rgba(255, 74, 54, 0.08) 0 5px, transparent 5px 13px);
}

.item-tooltip {
  position: fixed;
  z-index: 40;
  width: min(330px, calc(100vw - 32px));
  border: 2px solid #8b6d4f;
  background:
    linear-gradient(180deg, rgba(35, 27, 28, 0.98), rgba(10, 8, 10, 0.98)),
    #100d10;
  color: #f4e8c2;
  padding: 12px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px #1c1514 inset;
  pointer-events: none;
}

.item-tooltip.power-tooltip {
  width: min(370px, calc(100vw - 32px));
}

.item-tooltip.hidden {
  display: none;
}

.tooltip-head {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid #4c3c34;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.tooltip-head h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.tooltip-head span,
.item-tooltip footer,
.tooltip-empty p {
  color: var(--muted);
  font-size: 11px;
}

.tooltip-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.tooltip-stats div {
  border: 1px solid #332925;
  background: #171317;
  padding: 6px;
  display: grid;
  gap: 2px;
}

.tooltip-stats span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.tooltip-stats strong {
  color: #ffe6af;
  font-size: 12px;
}

.item-tooltip p {
  margin: 6px 0;
  line-height: 1.35;
}

.tooltip-tags {
  color: #f1c875;
  font-size: 11px;
}

.tooltip-section {
  display: grid;
  gap: 4px;
  border-top: 1px solid #332925;
  margin-top: 8px;
  padding-top: 8px;
}

.tooltip-section strong {
  color: #f1c875;
}

.tooltip-section span {
  color: #dfd8c4;
}

.weapon-power-section {
  border-color: #6a4f38;
  background: linear-gradient(180deg, rgba(42, 29, 24, 0.72), rgba(18, 14, 16, 0.42));
  margin-left: -2px;
  margin-right: -2px;
  padding: 9px 8px;
}

.weapon-power-section strong {
  color: #ffe6af;
  font-size: 12px;
  letter-spacing: 0;
}

.weapon-power-section span {
  line-height: 1.42;
}

.item-tooltip.compact-tooltip {
  width: min(310px, calc(100vw - 32px));
  padding: 10px;
}

.item-tooltip.power-tooltip.compact-tooltip {
  width: min(350px, calc(100vw - 32px));
}

.item-tooltip.compact-tooltip .tooltip-head {
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.item-tooltip.compact-tooltip .tooltip-head h4 {
  font-size: 13px;
}

.item-tooltip.compact-tooltip .tooltip-stats {
  gap: 5px;
  margin-bottom: 6px;
}

.item-tooltip.compact-tooltip .tooltip-stats div {
  padding: 5px;
}

.item-tooltip.compact-tooltip .tooltip-section {
  gap: 3px;
  margin-top: 6px;
  padding-top: 6px;
}

.item-tooltip.compact-tooltip .tooltip-section strong,
.item-tooltip.compact-tooltip .tooltip-tags {
  font-size: 10px;
}

.item-tooltip.compact-tooltip .tooltip-section span,
.item-tooltip.compact-tooltip p {
  font-size: 10px;
  line-height: 1.25;
}

.item-tooltip.dense-tooltip {
  width: min(300px, calc(100vw - 32px));
}

.item-tooltip.dense-tooltip .tooltip-stats span {
  font-size: 9px;
}

.item-tooltip.dense-tooltip .tooltip-stats strong {
  font-size: 11px;
  overflow-wrap: anywhere;
}

.item-tooltip.dense-tooltip .tooltip-section span {
  font-size: 9px;
  line-height: 1.22;
}

.item-tooltip.dense-tooltip footer {
  font-size: 9px;
}

.item-tooltip footer {
  border-top: 1px solid #332925;
  margin-top: 10px;
  padding-top: 8px;
  line-height: 1.35;
}

.tooltip-empty h4 {
  margin: 0 0 5px;
  color: #f1c875;
}

.start-screen,
.death-screen,
.options-screen {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background: #070608;
}

.start-screen {
  background:
    linear-gradient(90deg, rgba(5, 4, 5, 0.78), rgba(5, 4, 5, 0.26) 32%, rgba(5, 4, 5, 0.28) 68%, rgba(5, 4, 5, 0.78)),
    linear-gradient(180deg, rgba(5, 4, 5, 0.22), rgba(5, 4, 5, 0.68)),
    var(--ui-main-menu-art) center / cover no-repeat,
    #070608;
}

.death-screen,
.options-screen {
  background:
    linear-gradient(180deg, rgba(7, 6, 8, 0.76), rgba(7, 5, 5, 0.94)),
    #070608;
}

.start-screen::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.82);
}

.start-content {
  position: relative;
  width: min(880px, calc(100vw - 36px));
  overflow: hidden;
  text-align: center;
  border: 8px solid transparent;
  border-image: var(--ui-frame) 8 fill / 8px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(35, 18, 20, 0.9), rgba(12, 9, 12, 0.9)),
    #130f12;
  padding: 24px 30px 26px;
  box-shadow: 0 0 0 3px rgba(8, 6, 8, 0.96), 0 30px 70px rgba(0, 0, 0, 0.72);
  image-rendering: pixelated;
}

.start-content.menu-content {
  width: min(820px, calc(100vw - 36px));
  padding: 30px 34px 32px;
  transform: translateY(-20px);
  background:
    linear-gradient(180deg, rgba(36, 17, 20, 0.84), rgba(10, 8, 11, 0.9)),
    #130f12;
}

.start-content::before,
.start-content::after {
  content: none;
}

.start-content > * {
  position: relative;
  z-index: 1;
}

.start-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border: 7px solid transparent;
  border-image: var(--ui-frame) 8 fill / 7px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(102, 35, 31, 0.72), rgba(20, 12, 14, 0.95)),
    #2a1716;
  color: var(--gold);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 2px 2px #090505;
}

.start-mark.skull {
  border-color: #ac3730;
  color: #ff6657;
}

.start-content h1 {
  margin: 0;
  color: #f5cf82;
  font-size: clamp(34px, 4.4vw, 54px);
  text-shadow: 4px 4px #220c0c;
}

.menu-content h1 {
  margin-bottom: 24px;
  font-size: clamp(40px, 5.6vw, 66px);
  color: #ffd98d;
  text-shadow: 4px 4px #1b0707, 0 0 16px rgba(183, 49, 46, 0.24);
}

.start-content p {
  margin: 9px auto 0;
  max-width: 600px;
  color: #cdbf9d;
  font-size: 10px;
  line-height: 1.45;
}

.lobby-panel,
.menu-panel,
.options-content {
  border: 7px solid transparent;
  border-image: var(--ui-frame) 8 fill / 7px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(24, 18, 20, 0.94), rgba(9, 8, 10, 0.94)),
    rgba(12, 11, 14, 0.9);
  box-shadow: inset 0 0 0 1px #0a090b;
  image-rendering: pixelated;
}

.lobby-panel {
  padding: 10px;
  text-align: left;
}

.main-menu-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

.main-menu-actions button {
  position: relative;
  overflow: hidden;
  border: 7px solid transparent;
  border-image: var(--ui-frame) 8 fill / 7px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(88, 36, 34, 0.76), rgba(20, 12, 15, 0.96)),
    #171013;
  min-height: 52px;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffe4a7;
  text-shadow: 2px 2px #170807, 0 0 8px rgba(183, 49, 46, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 141, 0.08), 0 5px 0 #080506;
}

.main-menu-actions button::before {
  content: none;
}

.main-menu-actions button:hover {
  border-image-source: var(--ui-frame);
  background:
    linear-gradient(180deg, rgba(124, 43, 36, 0.82), rgba(29, 13, 15, 0.98)),
    #231317;
  color: #fff1c2;
  transform: translateY(-1px);
}

.main-menu-actions button:hover::before {
  content: none;
}

.menu-panel {
  margin-top: 16px;
  padding: 12px;
  text-align: left;
}

.menu-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #4a3c36;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.menu-panel-header h2 {
  margin: 0;
  color: #f1c875;
}

.menu-panel-header button {
  padding: 6px 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.menu-hint {
  margin: 0 0 10px;
  max-width: none;
  color: #bfb196;
}

.class-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.class-card {
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 156px;
  padding: 13px;
  text-align: left;
  border: 6px solid transparent;
  border-image: var(--ui-frame) 8 fill / 6px / 0 stretch;
  background:
    radial-gradient(circle at 16px 92%, rgba(255, 211, 124, 0.1), transparent 54px),
    linear-gradient(180deg, rgba(38, 26, 25, 0.92), rgba(13, 10, 12, 0.96)),
    rgba(18, 14, 15, 0.94);
  color: #f2d89b;
  cursor: pointer;
}

.class-card span {
  color: #ffdf88;
  font-size: 18px;
  text-transform: uppercase;
  text-shadow: 2px 2px #170807;
}

.class-card strong {
  color: #fff0c8;
  font-size: 12px;
}

.class-card small,
.class-card b {
  color: #bfb196;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.class-card b {
  color: #9ff5d6;
}

.class-card.selected {
  filter: brightness(1.16);
  box-shadow: inset 0 0 0 1px rgba(255, 221, 141, 0.34), 0 0 0 1px rgba(255, 221, 141, 0.2);
}

.class-start-row {
  display: grid;
  margin-top: 10px;
}

.class-start-row button {
  min-height: 48px;
  text-transform: uppercase;
}

.save-slot-list {
  display: grid;
  gap: 8px;
}

.save-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 6px solid transparent;
  border-image: var(--ui-frame) 8 fill / 6px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(33, 22, 23, 0.84), rgba(13, 10, 12, 0.92)),
    rgba(20, 17, 19, 0.92);
  padding: 10px;
}

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

.save-slot strong {
  color: #f0d08d;
}

.save-slot small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.3;
}

.save-slot.pending-delete {
  background:
    linear-gradient(180deg, rgba(59, 20, 21, 0.92), rgba(18, 8, 10, 0.96)),
    rgba(20, 8, 9, 0.94);
}

.save-slot.pending-delete strong {
  color: #ffbd4a;
}

.save-slot.pending-delete small {
  color: #ffd2a1;
}

.save-slot.final-delete strong,
.save-slot.final-delete small {
  color: #ff8178;
}

.save-slot-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.save-slot-actions button {
  min-width: 92px;
  padding: 7px 9px;
  font-size: 12px;
  text-transform: uppercase;
}

.save-slot-actions button.danger-action {
  color: #ffd2a1;
  border-color: #a84a3f;
  background:
    linear-gradient(180deg, rgba(84, 25, 23, 0.95), rgba(27, 10, 12, 0.96)),
    rgba(42, 14, 14, 0.96);
}

.save-slot-actions button.danger-action:hover {
  color: #fff0c8;
  border-color: #ff8178;
}

.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #4a3c36;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.lobby-header h2,
.options-content h1 {
  margin: 0;
  color: #f1c875;
}

.lobby-header span {
  color: #9ff5d6;
  font-size: 12px;
  text-align: right;
}

.coop-character-panel {
  border: 1px solid #4d403a;
  background: rgba(20, 17, 19, 0.88);
  padding: 8px;
  margin-bottom: 10px;
}

.coop-character-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #f0d08d;
}

.coop-character-heading span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.coop-character-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.coop-character-slot {
  min-height: 66px;
  border-color: #54443c;
  background: #151215;
  text-align: left;
  padding: 8px;
}

.coop-character-slot.selected,
.coop-character-slot:hover {
  border-color: #f1c875;
  background: #241a17;
}

.coop-character-slot strong,
.coop-character-slot small {
  display: block;
}

.coop-character-slot strong {
  color: #f0d08d;
  font-size: 13px;
}

.coop-character-slot small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  margin-top: 5px;
  text-transform: none;
}

.lobby-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.lobby-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lobby-form label,
.option-row {
  display: grid;
  gap: 6px;
  color: #cfbf9d;
  font-size: 12px;
}

.lobby-form input {
  border: 1px solid #5b4b42;
  background: #0b0a0d;
  color: #efe3c6;
  padding: 8px;
  font: 13px "Courier New", Consolas, monospace;
  text-transform: uppercase;
}

.lobby-form label input {
  text-transform: none;
}

.lobby-form .wide-field {
  grid-column: 1 / -1;
}

.lobby-code-card,
.lobby-invite-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid #4d403a;
  background: rgba(24, 18, 18, 0.9);
  padding: 8px;
}

.lobby-code-card span,
.lobby-invite-card span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.lobby-code-card strong {
  color: #9ff5d6;
  font-size: 20px;
  letter-spacing: 0;
}

.lobby-code-card button,
.lobby-invite-card button {
  grid-row: span 2;
  padding: 7px 8px;
}

.lobby-invite-card {
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
}

.lobby-invite-card input {
  grid-column: 1;
  border: 1px solid #5b4b42;
  background: #0b0a0d;
  color: #efe3c6;
  padding: 8px;
  font: 12px "Courier New", Consolas, monospace;
  text-transform: none;
}

.lobby-join-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lobby-join-row input {
  grid-column: span 2;
}

.lobby-browser {
  border: 1px solid #4d403a;
  background: rgba(12, 10, 12, 0.72);
  padding: 8px;
  margin-top: 10px;
}

.lobby-browser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #f0d08d;
  margin-bottom: 7px;
}

.lobby-browser-header button {
  padding: 6px 9px;
  font-size: 11px;
}

.public-lobby-list {
  display: grid;
  gap: 7px;
  max-height: 142px;
  overflow: auto;
}

.public-lobby-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-color: #453b37;
  background: rgba(16, 14, 17, 0.9);
  text-align: left;
  padding: 8px;
}

.public-lobby-row:hover {
  border-color: #f1c875;
  background: #241a17;
}

.public-lobby-row strong,
.public-lobby-row small,
.public-lobby-empty {
  display: block;
}

.public-lobby-row strong {
  color: #f0d08d;
  font-size: 13px;
}

.public-lobby-row small,
.public-lobby-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
}

.public-lobby-row span {
  color: #9ff5d6;
  font-size: 11px;
  text-transform: uppercase;
}

.lobby-roster {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.lobby-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #453b37;
  background: rgba(15, 13, 16, 0.82);
  padding: 8px;
}

.lobby-roster-row strong {
  color: #f0d08d;
}

.lobby-roster-row small {
  color: var(--muted);
}

.lobby-roster-row span {
  color: #9ff5d6;
  font-size: 11px;
  text-transform: uppercase;
}

.options-content {
  width: min(520px, calc(100vw - 36px));
  padding: 22px;
  text-align: center;
}

.option-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
  margin-top: 16px;
}

.option-row input[type="range"] {
  width: 220px;
}

.choice-grid {
  display: grid;
  gap: 7px;
}

.choice-card {
  width: 100%;
  min-height: 52px;
  border: 2px solid #55453d;
  background: #151216;
  color: #eadbb7;
  text-align: left;
  padding: 8px;
  cursor: var(--game-cursor);
}

.choice-card.selected {
  border-color: var(--gold);
  background: #2a1e1b;
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.25;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.start-actions button {
  min-width: 150px;
  font-weight: 900;
  text-transform: uppercase;
}

.workbench-screen {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 5, 7, 0.72);
}

.workbench-shell {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  border: 8px solid transparent;
  border-image: var(--ui-frame) 8 fill / 8px / 0 stretch;
  background:
    linear-gradient(180deg, rgba(34, 24, 24, 0.96), rgba(10, 9, 12, 0.98)),
    #100d10;
  padding: 14px;
  box-shadow: 0 0 0 3px #070608, 0 26px 70px rgba(0, 0, 0, 0.68);
  overflow: hidden;
}

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

.workbench-header,
.workbench-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.workbench-header {
  border-bottom: 1px solid #4c3c34;
  padding-bottom: 10px;
}

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

.blacksmith-tabs button {
  min-height: 34px;
  border: 2px solid #4c3c34;
  background:
    linear-gradient(180deg, rgba(34, 25, 24, 0.96), rgba(14, 11, 13, 0.98)),
    #151113;
  color: #d8c79f;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.blacksmith-tabs button:hover,
.blacksmith-tabs button.active {
  border-color: var(--gold);
  color: #ffe6af;
  background:
    radial-gradient(circle at 50% 0, rgba(215, 177, 95, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(45, 31, 25, 0.98), rgba(17, 12, 13, 0.98)),
    #1b1212;
}

.workbench-header h2,
.workbench-header p,
.workbench-title-row h3,
.workbench-status {
  margin: 0;
}

.workbench-header h2 {
  color: var(--gold);
  font-size: 18px;
}

.workbench-header p,
.workbench-title-row span,
.workbench-status {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.vault-layout,
.blacksmith-layout {
  min-height: 0;
  display: grid;
  gap: 12px;
}

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

.blacksmith-layout {
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.05fr) minmax(220px, 0.9fr);
}

.workbench-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  border: 2px solid #4c3c34;
  background: #121013;
  padding: 10px;
  overflow: hidden;
}

.workbench-panel.pet-pouch-panel {
  min-height: 245px;
  max-height: 390px;
}

.pet-pouch-panel .workbench-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 7px;
}

.pet-pouch-panel .workbench-item,
.pet-pouch-panel .workbench-empty-slot {
  min-height: 112px;
}

.pet-pouch-panel .workbench-item .item-icon {
  width: 40px;
  height: 40px;
}

.blacksmith-anvil-panel {
  grid-template-rows: auto auto auto auto;
}

.workbench-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 4px;
}

.workbench-item {
  min-width: 0;
  min-height: 122px;
  border: 1px solid #4d453e;
  background: #19161a;
  color: #eadbb7;
  padding: 8px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  align-items: start;
  gap: 5px;
  text-align: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.dialog-actions .workbench-item {
  min-height: 122px;
  border: 1px solid #4d453e;
  background: #19161a;
  color: #eadbb7;
  padding: 8px;
  font-size: 10px;
  line-height: 1.15;
  text-transform: none;
}

.workbench-item:hover,
.workbench-item.selected {
  border-color: var(--gold);
  background: #241a17;
}

.dialog-actions .workbench-item:hover,
.dialog-actions .workbench-item.selected {
  border-color: var(--gold);
  background: #241a17;
}

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

.workbench-item strong,
.workbench-item span,
.workbench-item small {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-item strong {
  font-size: 11px;
}

.workbench-item span,
.workbench-item small,
.workbench-empty-slot,
.smith-socket span {
  color: var(--muted);
  font-size: 10px;
}

.workbench-empty-slot {
  min-height: 122px;
  border: 1px solid #2d2624;
  background: #100d10;
  display: grid;
  place-items: center;
  text-align: center;
}

.workbench-grid.drag-over,
.smith-item-slot.drag-over,
.smith-gem-slots.drag-over {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.smith-item-slot {
  min-height: 140px;
  border: 2px dashed #5b4638;
  background: rgba(13, 11, 13, 0.72);
  display: grid;
  place-items: stretch;
  padding: 8px;
}

.smith-empty-anvil {
  display: grid;
  place-items: center;
  min-height: 118px;
  color: #f1c875;
  border: 1px dashed #5b4638;
  background: #100d10;
  font-size: 12px;
}

.smith-gem-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.smith-upgrade-panel {
  min-height: 104px;
  display: grid;
  gap: 8px;
}

.smith-socket {
  min-height: 78px;
  border: 1px solid #4d403a;
  background: #151216;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 7px;
  text-align: center;
}

.smith-socket.open {
  border-style: dashed;
  border-color: #8b6d4f;
}

.smith-socket.filled {
  border-color: var(--gold);
  background: #211715;
}

.smith-socket.disabled {
  opacity: 0.65;
}

.smith-socket .item-icon {
  width: 32px;
  height: 32px;
}

.smith-socket strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.smith-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smith-actions button[hidden] {
  display: none;
}

.smith-actions button:not([hidden]) {
  grid-column: 1 / -1;
}

.smith-actions button {
  border: 2px solid #8b6d4f;
  background: #241a19;
  color: #ffe6af;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
}

.smith-actions button:hover {
  border-color: var(--gold);
  background: #3a241d;
}

.smith-actions button:disabled {
  opacity: 0.45;
}

.smith-enhance-card,
.blacksmith-rule-card {
  min-width: 0;
  border: 1px solid #4c3c34;
  background:
    linear-gradient(180deg, rgba(30, 24, 25, 0.96), rgba(13, 11, 14, 0.98)),
    #121013;
  display: grid;
  gap: 7px;
  padding: 10px;
  text-transform: uppercase;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

.smith-enhance-card.locked {
  opacity: 0.68;
}

.smith-enhance-card strong,
.blacksmith-rule-card strong {
  color: #ffe6af;
  font-size: 12px;
}

.smith-enhance-card span,
.smith-enhance-card em,
.blacksmith-rule-card span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  font-style: normal;
}

.smith-enhance-card em {
  color: #9ff5d6;
}

.smith-enhance-track,
.smith-forge-rules {
  display: grid;
  gap: 5px;
}

.smith-enhance-track {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.smith-enhance-track i {
  height: 10px;
  border: 1px solid #4c3c34;
  background: #100d10;
}

.smith-enhance-track i.filled {
  border-color: #d7b15f;
  background:
    linear-gradient(180deg, #ffe6af, #b9833f),
    #d7b15f;
  box-shadow: 0 0 8px rgba(215, 177, 95, 0.18);
}

.smith-forge-rules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smith-forge-rules span {
  border: 1px solid #332925;
  background: #151216;
  color: #d8c79f;
  padding: 6px;
  text-align: center;
}

.blacksmith-info-grid {
  grid-template-columns: 1fr;
  overflow: hidden;
}

.town-editor-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 3, 5, 0.68);
  pointer-events: auto;
}

.town-editor-shell {
  width: min(1320px, calc(100vw - 28px));
  height: min(820px, calc(100vh - 28px));
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.town-editor-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.town-editor-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 230px minmax(420px, 1fr) 270px;
  gap: 10px;
}

.town-editor-tools,
.town-editor-actions,
.town-editor-map-panel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.town-editor-map-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.town-editor-mode-row,
.town-editor-palette,
.town-editor-action-grid {
  display: grid;
  gap: 7px;
}

.town-editor-mode-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.town-editor-mode-row button,
.town-editor-palette button,
.town-editor-action-grid button,
.town-editor-nudge button,
#town-editor-delete-selected {
  min-height: 30px;
  border: 2px solid #7b5a41;
  background: #211719;
  color: #ffe8b2;
  font-size: 10px;
  text-transform: uppercase;
}

.town-editor-mode-row button.active,
.town-editor-palette button.active,
.town-editor-mode-row button:hover,
.town-editor-palette button:hover,
.town-editor-action-grid button:hover,
.town-editor-nudge button:hover,
#town-editor-delete-selected:hover {
  border-color: var(--gold);
  background: #35211d;
}

.town-editor-group {
  display: grid;
  gap: 7px;
  border-top: 1px solid #3a2a25;
  padding-top: 9px;
}

.town-editor-group h3 {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
}

.town-editor-group label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.town-editor-group select,
.town-editor-group input,
#town-editor-json {
  width: 100%;
  min-width: 0;
  border: 2px solid #6c4d38;
  background: #0c0b0e;
  color: #fff0c8;
  font: inherit;
}

.town-editor-group select {
  min-height: 32px;
  padding: 5px 6px;
}

.town-editor-selected {
  min-height: 36px;
  border: 1px solid #4b3930;
  background: #100d10;
  color: #d8c79f;
  padding: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-editor-nudge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.town-editor-nudge [data-town-editor-nudge="up"],
.town-editor-nudge [data-town-editor-nudge="down"] {
  grid-column: 2;
}

.town-editor-nudge [data-town-editor-nudge="left"] {
  grid-column: 1;
}

.town-editor-nudge [data-town-editor-nudge="right"] {
  grid-column: 3;
}

#town-editor-map {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 4px solid transparent;
  border-image: var(--ui-frame) 7 fill / 4px / 0 stretch;
  background: #142015;
  image-rendering: pixelated;
}

#town-editor-json {
  min-height: 180px;
  resize: none;
  padding: 8px;
  line-height: 1.35;
  white-space: pre;
}

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

.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .rpg-panel {
    inset: 10px;
    padding: 12px;
  }

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

  .build-dashboard,
  .class-tree-grid {
    grid-template-columns: 1fr;
  }

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

  .class-tree-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .class-tree-header strong {
    text-align: left;
    white-space: normal;
  }

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

  .paperdoll-stage {
    min-height: 300px;
  }

  .inventory-grid {
    max-height: 360px;
    grid-template-columns: 1fr;
  }

  .panel-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .panel-card.wide {
    grid-column: span 1;
  }

  .service-actions {
    grid-template-columns: 1fr;
  }

  .workbench-screen {
    padding: 10px;
  }

  .workbench-shell {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 10px;
  }

  .vault-layout,
  .blacksmith-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .blacksmith-tabs {
    grid-template-columns: 1fr;
  }

  .smith-forge-rules {
    grid-template-columns: 1fr;
  }

  .town-editor-screen {
    padding: 10px;
  }

  .town-editor-shell {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .town-editor-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  #town-editor-map {
    min-height: 360px;
  }

  .workbench-panel {
    min-height: 280px;
  }

  .smith-gem-slots,
  .smith-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dialog-screen {
    bottom: 118px;
  }

  .dialog-content {
    grid-template-columns: 1fr;
  }

  .dialog-portrait {
    display: none;
  }

  .dialog-actions {
    grid-template-columns: 1fr;
  }

  .cartographer-layout,
  .pet-keeper-layout,
  .pet-keeper-bond {
    grid-template-columns: 1fr;
  }

  .cartographer-route-list {
    grid-template-columns: 1fr;
  }

  .pet-keeper-grid {
    grid-template-columns: 1fr;
  }

  .pet-keeper-train-slot {
    width: 100%;
  }

  .pet-pouch-layout {
    grid-template-columns: 1fr;
  }

  .main-menu-actions {
    grid-template-columns: 1fr;
  }

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

  .save-slot {
    grid-template-columns: 1fr;
  }

  .save-slot-actions {
    justify-content: stretch;
  }

  .save-slot-actions button {
    flex: 1;
    min-width: 0;
  }

  .lobby-form,
  .lobby-actions,
  .coop-character-list,
  .public-lobby-row,
  .lobby-join-row {
    grid-template-columns: 1fr;
  }

  .lobby-join-row input {
    grid-column: auto;
  }

  .coop-character-heading {
    display: grid;
  }

  .coop-character-heading span {
    text-align: left;
  }

  .option-row {
    grid-template-columns: 1fr;
  }

  .option-row input[type="range"] {
    width: 100%;
  }
}