* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, #3d2a67 0%, #1c1531 38%, #100d1b 100%);
  color: #f4efff;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  overflow: hidden;
}

button {
  font: inherit;
}

.game-shell {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(10, 8, 18, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand h1 {
  margin: 0;
  font-size: 1.3rem;
}

.brand p {
  margin: 2px 0 0;
  color: #c9bdf3;
  font-size: 0.85rem;
}

.brand-crest {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(225, 188, 95, 0.34));
}

.topbar-actions {
  display: flex;
  gap: 10px;
}

.ui-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #6c4cff;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ui-btn:hover {
  transform: translateY(-1px);
  background: #7d60ff;
}

.game-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  padding: 14px;
  min-height: 0;
}

.canvas-panel,
.side-panel {
  min-height: 0;
}

.canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #1a1430;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at 50% 50%, #2a7d67 0%, #205f50 42%, #17463d 72%, #143630 100%);
}

.hud {
  position: absolute;
  display: flex;
  gap: 10px;
  z-index: 4;
}

.hud-top-left {
  top: 16px;
  left: 16px;
}

.hud-top-right {
  top: 16px;
  right: 16px;
  flex-direction: column;
  width: 250px;
}

.hud-bottom-left {
  left: 16px;
  bottom: 16px;
  flex-wrap: wrap;
  max-width: 440px;
}

.hud-card {
  background: rgba(17, 11, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 86px;
  backdrop-filter: blur(8px);
}

.hud-card.wide {
  min-width: 100%;
}

.hud-label {
  font-size: 0.75rem;
  color: #cabdf7;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hud-value {
  font-size: 1.1rem;
  font-weight: 800;
}

.stat-card {
  min-width: 74px;
}

.bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
}

.hp-fill {
  background: linear-gradient(90deg, #ff5d7a, #ff8b67);
}

.mana-fill {
  background: linear-gradient(90deg, #54a7ff, #78d7ff);
}

.xp-fill {
  background: linear-gradient(90deg, #ffd34d, #ffe985);
}

.bar-text {
  font-size: 0.8rem;
  color: #efe9ff;
  margin-top: 6px;
}

.message-banner {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(9, 7, 16, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 18px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 5, 14, 0.62);
  backdrop-filter: blur(8px);
}

.hidden {
  display: none !important;
}

.panel {
  width: min(720px, calc(100% - 28px));
  background: linear-gradient(180deg, #271d45, #181128);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.large-panel {
  width: min(860px, calc(100% - 28px));
}

.small-panel {
  width: min(360px, calc(100% - 28px));
}

.small-panel .ui-btn + .ui-btn {
  margin-left: 8px;
}

.pause-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(5, 3, 9, 0.58);
  backdrop-filter: blur(4px);
}

.confirm-panel {
  text-align: center;
  border-color: rgba(229, 183, 93, 0.5);
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.confirm-actions .ui-btn + .ui-btn {
  margin-left: 0;
}

.confirm-main-menu-btn {
  border-color: rgba(235, 121, 98, 0.85);
  color: #ffe0d4;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 1.8rem;
}

.panel-copy {
  margin: 0 0 18px;
  color: #d7cdf7;
}

.class-grid,
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.class-card,
.choice-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.class-card:hover,
.choice-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
}

.class-card h3,
.choice-card h3 {
  margin: 0 0 8px;
}

.class-card p,
.choice-card p {
  margin: 0;
  color: #e3dbff;
  line-height: 1.45;
}

.class-card.warrior {
  background: linear-gradient(180deg, rgba(200, 74, 74, 0.22), rgba(255, 255, 255, 0.05));
}

.class-card.mage {
  background: linear-gradient(180deg, rgba(80, 132, 255, 0.22), rgba(255, 255, 255, 0.05));
}

.class-card.archer {
  background: linear-gradient(180deg, rgba(63, 195, 110, 0.22), rgba(255, 255, 255, 0.05));
}

.side-panel {
  background: rgba(14, 10, 23, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.panel-section {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

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

.equip-slot,
.item-card {
  border-radius: 14px;
  padding: 12px;
  min-height: 78px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.slot-name {
  color: #bfb1ed;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.slot-item {
  font-weight: 700;
  line-height: 1.35;
}

.inventory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.item-card {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}

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

.item-name {
  font-weight: 800;
}

.item-slot,
.item-stats {
  color: #ddd4fb;
  font-size: 0.88rem;
  line-height: 1.45;
}

.run-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.log-entry {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 12px;
  padding: 10px 12px;
  color: #ddd4fb;
  font-size: 0.88rem;
  line-height: 1.4;
}

.rarity-common {
  color: #f2f2f2;
}

.rarity-rare {
  color: #58a6ff;
}

.rarity-epic {
  color: #c56cff;
}

.rarity-legendary {
  color: #ffae42;
}

.rarity-dippydot {
  color: #8ff7ff;
  text-shadow:
    0 0 8px rgba(143, 247, 255, 0.75),
    0 0 18px rgba(255, 211, 77, 0.45);
}

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

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

  .canvas-panel {
    min-height: 70vh;
  }

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

/* First visual pass: original, old-school fantasy adventure styling. */
html,
body {
  background: radial-gradient(circle at top, #31452f 0%, #19261b 48%, #0d120e 100%);
  color: #f5e7bd;
  font-family: Georgia, "Times New Roman", serif;
}

.topbar,
.side-panel {
  background: rgba(23, 29, 20, 0.94);
  border-color: rgba(206, 169, 94, 0.34);
}

.brand h1,
.panel h2,
.section-head h2 {
  color: #f1d886;
  letter-spacing: 0.025em;
}

.brand p,
.panel-copy,
.hud-label,
.slot-name,
.item-slot,
.item-stats,
.log-entry {
  color: #d6c9a1;
}


.canvas-wrap,
.hud-card,
.panel,
.panel-section,
.equip-slot,
.item-card {
  border-color: rgba(211, 175, 92, 0.36);
  box-shadow: inset 0 0 0 1px rgba(38, 24, 13, 0.65);
}

.canvas-wrap {
  border-radius: 10px;
  background: #314a2d;
}

.hud-card,
.panel-section,
.equip-slot,
.item-card {
  background: rgba(36, 30, 19, 0.86);
  border-radius: 7px;
}

.panel {
  border-radius: 10px;
  background: linear-gradient(180deg, #40351f, #211b12);
}

.ui-btn {
  border: 1px solid #efcf73;
  border-radius: 5px;
  background: linear-gradient(#8c6031, #4e301a);
  color: #fff3cf;
  font-family: inherit;
  text-shadow: 0 1px 1px #201408;
}

.ui-btn:hover {
  background: linear-gradient(#ad7b40, #623b1e);
}

.gold-display,
.shop-gold {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(244, 201, 91, 0.54);
  border-radius: 12px;
  padding: 9px 12px;
  background: rgba(50, 35, 15, 0.82);
  color: #ffe19a;
  font-weight: 800;
  box-shadow: inset 0 0 12px rgba(236, 177, 57, 0.12);
}

.gold-display span,
.shop-gold span { color: #ffd45e; font-size: 1.15rem; }

.shop-panel { width: min(930px, calc(100vw - 36px)); max-height: calc(100vh - 34px); overflow-y: auto; text-align: center; }
.shop-panel h2 { margin: 5px 0 6px; color: #ffe9b4; }
.shop-gold { margin: 8px 0 15px; }
.shop-heading { margin: 16px 0 8px; color: #e8ce8b; font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; }
.shop-offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shop-offer,
.shop-sell-item { border: 1px solid rgba(218, 179, 90, 0.45); border-radius: 10px; padding: 12px 10px; background: linear-gradient(160deg, rgba(69, 49, 24, 0.94), rgba(28, 20, 12, 0.96)); color: #f7ebcf; }
.shop-offer { min-height: 164px; display: flex; flex-direction: column; align-items: center; }
.shop-offer h4 { margin: 8px 0 6px; font-size: 0.95rem; }
.shop-offer p { margin: 0; color: #d4c6a8; font-size: 0.78rem; line-height: 1.35; }
.shop-offer-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 9px; background: rgba(14, 10, 7, 0.72); color: #ffe28b; font-size: 1.8rem; }
.shop-offer-icon img,
.shop-item-art { width: 100%; height: 100%; object-fit: contain; }
.shop-offer-icon .gear-art { width: 100%; height: 100%; display: block; background-repeat: no-repeat; background-size: 500% 200%; }
.shop-fallback-art { display: grid; width: 100%; height: 100%; place-items: center; }
.shop-price,
.shop-sell-price { margin-top: auto; color: #ffd45e; font-size: 0.78rem; font-weight: 800; }
.shop-buy,
.shop-sell-btn { margin-top: 8px; border: 1px solid #d8ad51; border-radius: 7px; padding: 7px 9px; background: #6b4a20; color: #fff1c5; cursor: pointer; font-size: 0.76rem; font-weight: 800; }
.shop-buy:disabled { cursor: not-allowed; opacity: 0.38; }
.shop-sell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 160px; overflow-y: auto; text-align: left; }
.shop-sell-item { display: flex; align-items: center; gap: 9px; padding: 8px; }
.shop-sell-art { display: block; width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; border: 1px solid rgba(216, 176, 87, 0.38); border-radius: 5px; background-color: rgba(16, 12, 8, 0.64); }
.shop-sell-art.gear-art { background-repeat: no-repeat; background-size: 500% 200%; }
.shop-sell-item strong { display: block; font-size: 0.78rem; }
.shop-sell-item small { display: block; font-size: 0.7rem; }
.shop-sell-btn { margin: 0 0 0 auto; white-space: nowrap; }
.shop-empty { grid-column: 1 / -1; padding: 12px; color: #bba982; font-size: 0.86rem; }
.shop-leave { margin-top: 18px; background: #89612e; }
.shop-leave:hover { background: #a47738; }

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

.class-card,
.choice-card {
  border-color: rgba(231, 196, 111, 0.42);
  border-radius: 8px;
  background: rgba(47, 38, 22, 0.92);
}

.class-card:hover,
.choice-card:hover,
.item-card:hover {
  border-color: #f2d475;
  background: rgba(79, 61, 29, 0.94);
}

.class-card.warrior { background: linear-gradient(180deg, rgba(135, 55, 38, 0.9), rgba(47, 38, 22, 0.94)); }
.class-card.mage { background: linear-gradient(180deg, rgba(47, 69, 125, 0.9), rgba(47, 38, 22, 0.94)); }
.class-card.archer { background: linear-gradient(180deg, rgba(52, 94, 51, 0.9), rgba(47, 38, 22, 0.94)); }

/* Character select: a proper raider roster instead of plain text blocks. */
.class-select-panel {
  width: min(1120px, calc(100% - 36px));
  padding: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -12%, rgba(242, 208, 111, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(66, 54, 29, 0.98), rgba(25, 20, 13, 0.99));
}

.class-select-panel::before,
.class-select-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.class-select-panel::before {
  inset: 8px;
  border: 1px solid rgba(243, 208, 117, 0.18);
  border-radius: 6px;
}

.class-select-panel::after {
  width: 220px;
  height: 220px;
  top: -140px;
  left: calc(50% - 110px);
  border: 1px solid rgba(244, 211, 123, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(244, 211, 123, 0.1);
}

.class-select-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 21px;
}

.class-select-heading h2 {
  margin: 3px 0 5px;
  color: #f5d978;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.035em;
  text-shadow: 0 2px 0 #281d0e, 0 0 20px rgba(238, 197, 84, 0.18);
}

.eyebrow,
.class-role,
.class-statline,
.class-pick {
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow { color: #d9b95d; font-size: 0.68rem; }
.class-select-heading .panel-copy { color: #d9ceab; margin: 0; }

.class-select-panel .class-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.class-select-panel .class-card {
  position: relative;
  min-height: 382px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--class-edge);
  border-radius: 11px;
  color: #fff7dd;
  text-align: left;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(10, 7, 4, 0.8), 0 8px 17px rgba(0, 0, 0, 0.26);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.class-select-panel .class-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, var(--class-wash) 0%, rgba(29, 23, 14, 0.08) 49%, rgba(21, 16, 10, 0.97) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 37%);
}

.class-select-panel .class-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid rgba(255, 238, 184, 0.13);
  border-radius: 7px;
  pointer-events: none;
}

.class-select-panel .class-card:hover {
  transform: translateY(-7px) scale(1.012);
  border-color: var(--class-glow);
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 205, 0.13), 0 0 0 1px var(--class-glow), 0 14px 28px rgba(0, 0, 0, 0.42), 0 0 28px var(--class-aura);
}

.class-select-panel .warrior { --class-edge: #9a5d45; --class-glow: #f0a061; --class-aura: rgba(220, 89, 55, 0.27); --class-wash: rgba(120, 37, 27, 0.87); }
.class-select-panel .mage { --class-edge: #586fc3; --class-glow: #91d8ff; --class-aura: rgba(83, 139, 255, 0.3); --class-wash: rgba(34, 58, 132, 0.87); }
.class-select-panel .archer { --class-edge: #628d56; --class-glow: #b9df81; --class-aura: rgba(105, 168, 78, 0.28); --class-wash: rgba(39, 86, 42, 0.87); }

.class-portrait {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 196px;
  align-self: center;
  margin: 5px 0 -8px;
  background-image: url("./assets/heroes-sprite-sheet-v1.png");
  background-repeat: no-repeat;
  background-size: 1536px 1024px;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.48));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.warrior .class-portrait { background-position: center -15px; }
.mage .class-portrait { background-position: center -15px; }
.archer .class-portrait { background-position: center -15px; }
.class-select-panel .warrior .class-portrait {
  background-image: url("./assets/class-warrior-portrait-v1.png");
  background-position: center;
  background-size: contain;
}
.class-select-panel .mage .class-portrait {
  background-image: url("./assets/class-mage-portrait-v1.png");
  background-position: center;
  background-size: contain;
}
.class-select-panel .archer .class-portrait {
  background-image: url("./assets/class-archer-portrait-v1.png");
  background-position: center;
  background-size: contain;
}
.class-select-panel .class-card:hover .class-portrait { transform: translateY(-4px) scale(1.055); filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.58)) brightness(1.08); }

.class-card-copy { position: relative; z-index: 3; padding: 0 18px 10px; }
.class-select-panel .class-card h3 { margin: 3px 0 5px; color: #fff3cf; font-size: 1.52rem; text-shadow: 0 2px 0 rgba(20, 13, 8, 0.8); }
.class-role { color: var(--class-glow); font-size: 0.63rem; }
.class-select-panel .class-card p { min-height: 43px; color: #ebe0c7; font-size: 0.87rem; line-height: 1.35; }
.class-statline { display: flex; gap: 6px; margin-top: 11px; color: var(--class-glow); font-size: 0.59rem; }
.class-statline span { border: 1px solid color-mix(in srgb, var(--class-glow) 54%, transparent); border-radius: 3px; padding: 4px 5px; background: rgba(8, 6, 4, 0.34); }
.class-skills { margin-top: 11px; color: #d9ceb6; font-size: 0.71rem; line-height: 1.55; }
.class-skills b { display: inline-block; min-width: 14px; color: #2c2112; background: var(--class-glow); border-radius: 2px; text-align: center; font-size: 0.61rem; }
.class-pick { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; margin: auto 18px 17px; padding-top: 10px; border-top: 1px solid rgba(255, 242, 200, 0.16); color: #f8e9bc; font-size: 0.66rem; }
.class-pick i { color: var(--class-glow); font-size: 1.1rem; font-style: normal; transition: transform 0.2s ease; }
.class-select-panel .class-card:hover .class-pick i { transform: translateX(4px); }
.class-select-tip { position: relative; z-index: 1; margin: 18px 0 0; color: #bfb28f; font-size: 0.77rem; text-align: center; }

@media (max-width: 780px) {
  .class-select-panel { padding: 22px 16px; }
  .class-select-panel .class-grid { grid-template-columns: 1fr; gap: 12px; }
  .class-select-panel .class-card { min-height: 212px; display: grid; grid-template-columns: 132px 1fr; }
  .class-portrait { width: 132px; height: 174px; margin: 8px 0 0; }
  .class-card-copy { padding: 19px 14px 4px 0; }
  .class-select-panel .class-card p { min-height: 0; margin: 4px 0; }
  .class-pick { grid-column: 1 / -1; margin: 0 15px 13px; }
  .class-select-tip { margin-top: 14px; }
}

.bar {
  border: 1px solid rgba(233, 204, 128, 0.34);
  background: #19150f;
}

.restart-btn { margin-top: 16px; }

.discard-btn {
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid #955045;
  border-radius: 4px;
  background: #43231d;
  color: #f3cbc2;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}

.discard-btn:hover {
  background: #683129;
  color: #fff1df;
}

.boss-hud {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 50%;
  width: min(460px, calc(100% - 48px));
  transform: translateX(-50%);
  padding: 8px 12px 10px;
  border: 1px solid #d29955;
  border-radius: 6px;
  background: rgba(40, 13, 19, 0.93);
  box-shadow: 0 3px 0 rgba(19, 8, 8, 0.8), 0 8px 20px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.boss-name {
  margin-bottom: 6px;
  color: #ffd6a2;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.boss-bar {
  height: 13px;
  overflow: hidden;
  border: 1px solid #f0b06b;
  background: #230b10;
}

.boss-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7e1e32, #df5346, #ff9c5c);
  transition: width 0.08s linear;
}

.spell-bar {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.spell-card {
  display: grid;
  grid-template-columns: 27px auto;
  align-items: center;
  gap: 0 7px;
  min-width: 132px;
  padding: 7px 10px;
  border: 1px solid #7c9bd2;
  border-radius: 6px;
  background: rgba(22, 25, 56, 0.92);
  color: #e2e9ff;
  box-shadow: inset 0 0 0 1px rgba(112, 151, 225, 0.2);
}

.spell-card b {
  grid-row: span 2;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #b2ccff;
  border-radius: 3px;
  color: #fff4c5;
  background: #31487e;
}

.spell-card span { font-size: 0.8rem; font-weight: 700; }
.spell-card em { color: #9ed2ff; font-size: 0.74rem; font-style: normal; }

.main-menu-panel {
  width: min(460px, calc(100% - 28px));
  text-align: center;
  border-color: rgba(239, 207, 115, 0.66);
  background: linear-gradient(180deg, rgba(62, 48, 28, 0.98), rgba(24, 19, 13, 0.98));
}

.menu-crest {
  display: block;
  width: 88px;
  height: 88px;
  margin: -62px auto 4px;
  object-fit: contain;
}

.main-menu-panel h2 { font-size: 2.6rem; margin-bottom: 3px; }
.menu-kicker { margin: 0; color: #d5ad58; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.main-menu-actions { display: grid; gap: 9px; margin: 24px auto 14px; max-width: 310px; }
.menu-play { padding: 13px 18px; font-size: 1.05rem; }
.menu-option { display: flex; justify-content: space-between; padding: 10px 12px; border: 1px solid rgba(211, 175, 92, 0.36); border-radius: 5px; background: rgba(22, 18, 12, 0.7); color: #f0dfaf; cursor: pointer; font: inherit; }
.menu-option:hover { background: rgba(92, 67, 31, 0.66); }
.menu-option span { color: #af9b70; font-size: 0.76rem; }
.menu-notice { min-height: 2.5em; margin: 0; color: #cdbf98; font-size: 0.86rem; }

#settingsOverlay {
  background: rgba(3, 10, 12, 0.72);
}

.settings-panel {
  width: min(430px, calc(100% - 32px));
  padding: 34px 38px 30px;
  text-align: center;
  border: 1px solid rgba(230, 190, 99, 0.72);
  background: linear-gradient(180deg, rgba(32, 39, 34, 0.98), rgba(14, 23, 21, 0.98));
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.62), inset 0 0 26px rgba(203, 151, 53, 0.08);
}

.settings-panel h2 { margin-bottom: 10px; }

.volume-control {
  display: block;
  margin: 18px 0;
  text-align: left;
  color: #f2dfac;
  font-size: 0.96rem;
  font-weight: 700;
}

.volume-control span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}

.volume-control b { color: #ffd76b; }

.volume-control input {
  width: 100%;
  accent-color: #e2b84f;
  cursor: pointer;
}

.settings-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 154px;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid #efcf73;
  border-radius: 6px;
  background-image: none !important;
  background: linear-gradient(#8c6031, #4e301a);
  color: #fff3cf;
  cursor: pointer;
  font: 700 1rem Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 1px #201408;
  user-select: none;
  touch-action: manipulation;
}

.settings-close:hover { background: linear-gradient(#ad7b40, #623b1e); }

/* Talent Tree test board.  The first pass uses the approved concept artwork
   as its map, with only the Warrior's inner glyphs made interactive. */
.talent-tree-panel {
  width: min(1280px, calc(100% - 32px));
  padding: 32px 38px 28px;
  text-align: center;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.62), inset 0 0 26px rgba(203, 151, 53, 0.08);
}

.talent-tree-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; }
.talent-tree-heading h2 { margin: 3px 0 5px; }
.talent-tree-heading .panel-copy { margin: 0; }
.talent-point-preview { display: grid; min-width: 106px; padding: 9px 12px; border: 1px solid rgba(218, 181, 91, 0.48); border-radius: 8px; background: rgba(19, 15, 9, 0.62); color: #d9c896; }
.talent-point-preview b { color: #f5d77c; font: 700 1.65rem Georgia, serif; line-height: 1; }
.talent-point-preview span { margin-top: 4px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

.talent-tree-artboard { position: relative; width: 100%; aspect-ratio: 1672 / 941; margin: 22px 0 10px; overflow: hidden; border: 1px solid rgba(190, 154, 73, 0.38); border-radius: 10px; background: #0b0d12 url("./assets/ui-talent-tree-board-v2.png") center / cover no-repeat; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45); }
.talent-tree-node-layer { position: absolute; inset: 0; }
.talent-path-segment { position: absolute; z-index: 1; left: var(--path-x); top: var(--path-y); width: var(--path-width); height: 5px; overflow: hidden; border-radius: 999px; transform: translateY(-50%); pointer-events: none; }
.talent-path-segment::after { content: ""; position: absolute; inset: 0; transform: scaleX(1); transform-origin: left center; background: linear-gradient(90deg, rgba(255, 211, 122, 0.3), #ffdb8b 58%, rgba(255, 247, 205, 0.98)); box-shadow: 0 0 8px rgba(255, 188, 66, 0.92), 0 0 16px rgba(255, 115, 35, 0.68); }
.talent-path-segment.is-new::after { animation: talent-path-charge 680ms ease-out both; }
.talent-path-segment[data-class="mage"]::after { background: linear-gradient(90deg, rgba(90, 151, 255, 0.32), #5bbcff 58%, #dcf8ff); box-shadow: 0 0 8px rgba(68, 176, 255, 0.95), 0 0 16px rgba(79, 95, 255, 0.65); }
.talent-path-segment[data-class="archer"]::after { background: linear-gradient(90deg, rgba(133, 211, 83, 0.3), #9dff69 58%, #f4ffb8); box-shadow: 0 0 8px rgba(128, 255, 96, 0.9), 0 0 16px rgba(214, 255, 81, 0.62); }
@keyframes talent-path-charge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.talent-tree-node-button { position: absolute; z-index: 2; left: var(--node-x); top: var(--node-y); width: clamp(30px, 4.5vw, 60px); aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: filter 150ms ease, opacity 150ms ease, transform 150ms ease; }
.talent-tree-node-button.major { width: clamp(45px, 6.5vw, 86px); }
.talent-tree-node-button:hover { transform: translate(-50%, -50%) scale(1.08); }
.talent-tree-node-button:focus-visible { outline: 2px solid #ffe391; outline-offset: 4px; border-radius: 50%; }
.talent-node-ring, .talent-node-core, .talent-node-glyph { position: absolute; display: block; pointer-events: none; background-repeat: no-repeat; }
.talent-node-ring { inset: -10%; z-index: 3; background-image: var(--ring-asset); background-size: contain; background-position: center; }
.talent-node-core { inset: 16%; z-index: 1; border: 1px solid rgba(240, 198, 101, 0.42); border-radius: 50%; background: radial-gradient(circle at 42% 35%, #28231d 0%, #100f0e 58%, #030303 100%); box-shadow: inset 0 1px 5px rgba(255, 213, 129, 0.18), inset 0 0 9px rgba(0, 0, 0, 0.95); }
.talent-node-glyph { inset: 26%; z-index: 2; background-image: var(--glyph-dark); background-size: contain; background-position: center; }
.talent-tree-node-button.major.is-bought .talent-node-core { transform: translate(-3px, 3px); }
.talent-tree-node-button.major.is-bought .talent-node-glyph { transform: translate(-3px, 3px); }
.talent-tree-node-button.is-unselected { opacity: 0.52; filter: grayscale(0.8) saturate(0.55); }
.talent-tree-node-button.is-unselected:hover { opacity: 0.9; filter: grayscale(0.2) saturate(0.9); }
.talent-tree-node-button.is-locked { cursor: not-allowed; opacity: 0.34; filter: grayscale(0.95) brightness(0.72); }
.talent-tree-node-button.is-locked:hover { transform: translate(-50%, -50%); }
.talent-tree-node-button.is-bought .talent-node-ring { filter: drop-shadow(0 0 6px rgba(255, 55, 25, 0.96)) drop-shadow(0 0 15px rgba(255, 173, 61, 0.78)); }
.talent-tree-node-button.is-bought .talent-node-glyph { background-image: var(--glyph-active); filter: drop-shadow(0 0 4px rgba(255, 76, 31, 0.9)) drop-shadow(0 0 10px rgba(255, 177, 67, 0.55)); }
.talent-tree-node-button[data-class="mage"].is-bought .talent-node-glyph { filter: drop-shadow(0 0 4px rgba(50, 174, 255, 0.95)) drop-shadow(0 0 10px rgba(86, 110, 255, 0.6)); }
.talent-tree-node-button[data-class="archer"].is-bought .talent-node-glyph { filter: drop-shadow(0 0 4px rgba(109, 255, 73, 0.95)) drop-shadow(0 0 10px rgba(208, 255, 87, 0.55)); }
.talent-node-cost { position: absolute; right: -10%; bottom: -8%; min-width: 26px; padding: 2px 4px; border: 1px solid rgba(242, 201, 100, 0.6); border-radius: 999px; background: rgba(21, 14, 10, 0.9); color: #f6d782; font: 700 clamp(0.48rem, 0.72vw, 0.66rem) Georgia, serif; line-height: 1; white-space: nowrap; pointer-events: none; }
.talent-tree-node-button.is-bought .talent-node-cost { border-color: rgba(255, 139, 55, 0.9); color: #ffe2a6; }
.talent-tree-note { margin: 12px auto 15px; color: #c8b78b; font-size: 0.78rem; }
.talent-tree-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.talent-reset-test { min-width: 150px; padding: 9px 14px; border: 1px solid rgba(201, 115, 63, 0.82); border-radius: 6px; background: linear-gradient(180deg, #5e3023, #261711); color: #ffd3aa; font: 700 0.8rem Georgia, serif; cursor: pointer; }
.talent-reset-test:hover { background: linear-gradient(180deg, #85442c, #3c1f16); color: #fff0d3; }

@media (max-width: 620px) {
  .talent-tree-panel { padding: 22px 16px 20px; }
  .talent-tree-heading { align-items: flex-start; }
  .talent-point-preview { min-width: 82px; padding: 8px; }
  .talent-tree-node-button { width: clamp(26px, 8vw, 43px); }
  .talent-tree-node-button.major { width: clamp(38px, 11vw, 59px); }
}

/* Moonlit gothic menu art kit.  The frame, cards, buttons and hover state are
   standalone transparent assets so the menu sits over the ruin scene. */
#mainMenuOverlay,
#classOverlay {
  background:
    linear-gradient(rgba(3, 12, 14, 0.15), rgba(2, 8, 10, 0.25)),
    url("./assets/ui-menu-moonlit-ruins-bg-v1.png") center / cover no-repeat;
  backdrop-filter: none;
}

/* Main-menu experiment: move the ornate border from the title card out around
   the whole moonlit scene, leaving the title and actions unboxed. */
#mainMenuOverlay::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  background: url("./assets/ui-menu-ornate-frame-v2.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

#mainMenuOverlay .main-menu-panel {
  position: relative;
  z-index: 1;
}

/* The title screen is deliberately clean: the inventory only returns when a
   run starts.  The class-picker keeps its own roster-focused presentation. */
.game-layout:has(#mainMenuOverlay:not(.hidden)) {
  grid-template-columns: minmax(0, 1fr);
}

.game-shell:has(#mainMenuOverlay:not(.hidden)) .topbar {
  display: none;
}

.game-layout:has(#mainMenuOverlay:not(.hidden)) #inventoryPanel {
  display: none;
}

.topbar {
  position: relative;
  z-index: 8;
  min-height: 72px;
  background: linear-gradient(90deg, rgba(8, 11, 10, 0.97), rgba(25, 21, 13, 0.93), rgba(8, 11, 10, 0.97));
  border-bottom: 0;
  box-shadow: inset 0 -1px rgba(239, 195, 82, 0.82), 0 5px 18px rgba(0, 0, 0, 0.42);
}

.topbar::after {
  content: none;
}

.main-menu-panel {
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.main-menu-panel {
  width: min(900px, calc(100% - 36px));
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: clamp(34px, 4.5vh, 48px) clamp(74px, 9vw, 104px) clamp(22px, 3vh, 34px);
}

.main-menu-panel h2 {
  margin: 14px 0 7px;
  color: #f4ce78;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.95rem, 3.4vw, 2.75rem);
  letter-spacing: 0.075em;
  font-variant: small-caps;
  text-shadow: 0 3px 0 #24150a, 0 0 20px rgba(244, 189, 69, 0.22);
}

.main-menu-panel .panel-copy,
.class-select-heading .panel-copy {
  color: #e0c58d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
}

.menu-crest {
  width: 92px;
  height: 92px;
  margin: -102px auto 0;
  filter: drop-shadow(0 0 10px rgba(245, 188, 62, 0.6));
}

.menu-kicker { color: #f0d38f; letter-spacing: 0.27em; }

.menu-ornament {
  display: none;
}

.main-menu-actions { gap: 1px; max-width: 320px; margin: 10px auto 8px; }

.ui-btn,
.menu-option,
.class-pick {
  border: 0;
  border-radius: 0;
  color: #fff3cf;
  background: url("./assets/ui-menu-button-normal-v2.png") center / 100% 100% no-repeat;
  text-shadow: 0 2px 1px #1c1006;
}

.ui-btn:hover,
.menu-option:hover,
.class-card:hover .class-pick {
  /* Keep the full, dedicated hover asset inside the button's paint area. */
  background: url("./assets/ui-menu-button-highlight-v2.png") center / 100% 100% no-repeat;
  filter: none;
}

.menu-play {
  min-height: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  letter-spacing: 0.025em;
}

.menu-option {
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.93rem;
}

.menu-option span { color: #c8b487; font-size: 0.73rem; }

/* The painted button skins are 2.8:1.  Size the controls to that ratio so
   they retain their intended shape in normal and hover states. */
.main-menu-actions .menu-play,
.main-menu-actions .menu-option {
  width: 308px;
  aspect-ratio: 2042 / 550;
  justify-self: center;
}

.class-select-panel {
  width: min(1600px, calc(100% - 24px));
  padding: 106px 132px 170px;
  border: 0;
  border-radius: 0;
  background: url("./assets/ui-menu-ornate-frame-v2.png") center / 100% 100% no-repeat;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.44), 0 0 28px rgba(198, 145, 45, 0.1);
}

.class-select-panel::before {
  display: none;
}
.class-select-panel::after { border: 0; box-shadow: none; }
.class-select-heading { margin-bottom: 18px; }
.class-select-heading h2 { font-family: Georgia, "Times New Roman", serif; }

.class-select-panel .class-card {
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--class-wash), rgba(12, 13, 11, 0.95));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.52);
}

.class-select-panel .class-card::after {
  inset: 0;
  z-index: 5;
  border: 0;
  border-radius: 0;
  background: url("./assets/ui-menu-class-card-frame-v2.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.class-select-panel .class-card:hover {
  border: 0;
  background: linear-gradient(180deg, var(--class-wash), rgba(12, 13, 11, 0.95));
  box-shadow: 0 16px 31px rgba(0, 0, 0, 0.6), 0 0 31px var(--class-aura);
}

.class-pick {
  min-height: 50px;
  margin: auto 15px 14px;
  padding: 14px 26px 12px;
  border-top: 0;
  justify-content: center;
  gap: 22px;
}

/* Keep the ornate card rim clear of the hero information. */
.class-select-panel .class-grid { width: min(1080px, 100%); margin-inline: auto; gap: 30px; }
.class-select-panel .class-card,
.class-select-panel .class-card:hover {
  min-height: 480px;
  background: transparent !important;
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* The class colour now sits within the gold card art instead of forming an
   external rectangle around it. */
.class-select-panel .class-card::before {
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.class-select-panel .warrior::before { background: url("./assets/ui-class-panel-warrior-red-v2.png") center / 100% 100% no-repeat; }
.class-select-panel .mage::before { background: url("./assets/ui-class-panel-mage-blue-v2.png") center / 100% 100% no-repeat; }
.class-select-panel .archer::before { background: url("./assets/ui-class-panel-archer-green-v2.png") center / 100% 100% no-repeat; }

.class-select-panel .class-card::after { z-index: 2; }
.class-select-panel .class-portrait {
  z-index: 3;
  width: 150px;
  height: 220px;
  margin: 18px 0 2px;
}
.class-card-copy {
  z-index: 4;
  margin-top: 12px;
  padding: 0 36px 8px;
}
.class-pick { z-index: 4; margin: auto 30px 14px; }
.class-select-panel .class-card h3 { font-size: 1.24rem; margin: 2px 0 4px; }
.class-select-panel .class-card p { min-height: 34px; font-size: 0.76rem; line-height: 1.3; }
.class-role { font-size: 0.57rem; }
.class-statline { margin-top: 8px; font-size: 0.53rem; }
.class-skills { margin-top: 8px; font-size: 0.63rem; }

.side-panel {
  border: 1px solid rgba(206, 169, 94, 0.34);
  border-radius: 12px;
  background: rgba(13, 15, 11, 0.93);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.52);
}

@media (max-width: 780px) {
  .main-menu-panel { aspect-ratio: auto; min-height: 0; padding: 48px 42px 38px; }
  .class-select-panel { padding: 44px 34px 31px; }
}

.equip-slot[data-tooltip] { position: relative; cursor: help; }
.equip-slot[data-tooltip]::after {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 0;
  width: 220px;
  padding: 9px 10px;
  border: 1px solid #d8b65f;
  border-radius: 5px;
  background: rgba(22, 18, 12, 0.98);
  color: #f6e8bd;
  content: attr(data-tooltip);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.equip-slot[data-tooltip]:hover::after { opacity: 1; transform: translateY(0); }

.objective-hud {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(218, 177, 91, 0.55);
  border-radius: 5px;
  background: rgba(27, 22, 14, 0.9);
  color: #f2e1ad;
  font-size: 0.78rem;
}
.objective-row { display: flex; align-items: center; gap: 7px; padding: 0 3px; }
.objective-row #objectiveArrow { color: #ffcd62; font-size: 1.15rem; transition: transform 0.1s linear; }

.potion-hud { display: flex; gap: 6px; }
.potion-slot {
  position: relative;
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216, 176, 87, 0.48);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(59, 45, 24, 0.94), rgba(20, 16, 10, 0.96));
  cursor: help;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.potion-slot img { width: 35px; height: 35px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72)); }
.potion-slot b {
  position: absolute;
  top: 2px;
  left: 2px;
  min-width: 13px;
  padding: 1px 2px;
  border-radius: 2px;
  background: #f0d27b;
  color: #332310;
  font: 800 0.62rem "Trebuchet MS", sans-serif;
  text-align: center;
}
.potion-slot em {
  position: absolute;
  right: 2px;
  bottom: 1px;
  min-width: 13px;
  color: #fff5d3;
  font: 800 0.75rem "Trebuchet MS", sans-serif;
  font-style: normal;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.health-potion:hover { border-color: #ee7474; box-shadow: 0 0 10px rgba(230, 72, 76, 0.32); }
.mana-potion:hover { border-color: #79b4ff; box-shadow: 0 0 10px rgba(74, 145, 255, 0.34); }
.potion-slot:hover { transform: translateY(-2px); }
.potion-slot::after {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% + 8px);
  width: 205px;
  padding: 8px 9px;
  border: 1px solid #d8b65f;
  border-radius: 5px;
  background: rgba(22, 18, 12, 0.98);
  color: #f6e8bd;
  content: attr(data-tooltip);
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.potion-slot:hover::after { opacity: 1; transform: translateY(0); }

/* Level-up rewards: stat colour tells you the kind of reward at a glance.
   The badge belongs to the reward itself, never to the selected hero class. */
.level-up-panel {
  width: min(940px, calc(100% - 28px));
  text-align: center;
  border-color: rgba(238, 202, 112, 0.72);
  background: linear-gradient(180deg, rgba(64, 52, 31, 0.98), rgba(24, 19, 13, 0.98));
}

.level-up-panel h2 {
  color: #ffe6a1;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: 0.045em;
}

.level-up-panel .panel-copy { color: #d8c99b; }

.reward-card {
  --reward-main: #d65848;
  --reward-bright: #ffc4a1;
  --reward-deep: #4c1b18;
  position: relative;
  display: flex;
  min-height: 264px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 18px 16px 14px;
  border: 2px solid color-mix(in srgb, var(--reward-main) 72%, #f6d782);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--reward-main) 28%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--reward-main) 33%, #231b12), var(--reward-deep));
  box-shadow: inset 0 0 0 2px rgba(20, 12, 8, 0.6), inset 0 0 28px color-mix(in srgb, var(--reward-main) 22%, transparent), 0 4px 12px rgba(0, 0, 0, 0.42);
  text-align: center;
}

.reward-card::after {
  position: absolute;
  right: 7px;
  bottom: 5px;
  left: 7px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--reward-bright), transparent);
  content: "";
  opacity: 0.72;
}

.reward-card::before {
  position: absolute;
  z-index: 1;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--reward-bright) 58%, transparent);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reward-main) 30%, transparent);
  content: "";
  opacity: 0.82;
  pointer-events: none;
}

.reward-card > * { position: relative; z-index: 2; }

.reward-card:hover {
  border-color: var(--reward-bright);
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--reward-main) 44%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--reward-main) 48%, #302315), var(--reward-deep));
  box-shadow: 0 0 12px color-mix(in srgb, var(--reward-bright) 56%, transparent), 0 0 32px color-mix(in srgb, var(--reward-main) 62%, transparent), 0 12px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(28, 16, 10, 0.64);
  transform: translateY(-7px) scale(1.025);
}

.reward-card:hover::before {
  border-color: var(--reward-bright);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--reward-main) 30%, transparent), 0 0 12px color-mix(in srgb, var(--reward-bright) 42%, transparent);
}

.reward-strength { --reward-main: #c94c42; --reward-bright: #ffb196; --reward-deep: #4a1c19; }
.reward-agility { --reward-main: #56b76a; --reward-bright: #c6f3a5; --reward-deep: #173c25; }
.reward-mana { --reward-main: #4e91dc; --reward-bright: #b5e3ff; --reward-deep: #172c58; }
.reward-vitality { --reward-main: #c85e57; --reward-bright: #ffd0b4; --reward-deep: #52201c; }

.reward-art {
  display: block;
  width: 112px;
  height: 112px;
  margin: -7px auto 4px;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(9, 5, 3, 0.7));
}

.reward-stat {
  margin-bottom: 7px;
  color: var(--reward-bright);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.reward-card h3 {
  margin: 0 0 10px;
  color: #fff4d3;
  font-size: 1.2rem;
}

.reward-card p {
  margin: 0;
  color: #fff5dc;
  font-size: 0.88rem;
  line-height: 1.45;
}

.reward-pick {
  margin-top: auto;
  color: var(--reward-bright);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .level-up-panel { max-height: calc(100vh - 28px); overflow-y: auto; }
  .level-up-panel .choice-grid { grid-template-columns: 1fr; }
  .reward-card { min-height: 184px; }
  .reward-art { width: 86px; height: 86px; }
}

/* Equipment paper-doll: original Tiny Raiders layout, built around the
   equipped item slots rather than a plain vertical list. */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 86px 104px 92px;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(216, 176, 87, 0.36);
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(119, 86, 43, 0.27), transparent 48%),
    linear-gradient(145deg, rgba(27, 22, 14, 0.96), rgba(53, 41, 23, 0.86));
}

.equip-slot {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 4px;
  border: 1px solid rgba(192, 155, 78, 0.38);
  border-radius: 7px;
  background: radial-gradient(circle at 50% 42%, rgba(95, 73, 38, 0.52), rgba(25, 20, 13, 0.92));
  box-shadow: inset 0 0 0 1px rgba(20, 14, 8, 0.84);
}

.gear-slot-weapon { grid-column: 1; grid-row: 2; }
.gear-slot-head { grid-column: 2; grid-row: 1; }
.gear-slot-chest { grid-column: 2; grid-row: 2; }
.gear-slot-boots { grid-column: 2; grid-row: 3; }
.gear-slot-ring { grid-column: 3; grid-row: 2; }
.gear-slot-amulet { grid-column: 1; grid-row: 3; }

.slot-name {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 0;
  width: 100%;
  color: #d9c58f;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.slot-art {
  width: 55px;
  height: 55px;
  margin-top: 6px;
  object-fit: contain;
  opacity: 0.42;
  filter: grayscale(0.4) brightness(0.82) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.78));
  transition: opacity 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.gear-art {
  background-repeat: no-repeat;
  background-size: 500% 200%;
  background-position: 0 0;
}
.gear-art-0 { background-position: 0% 0%; }
.gear-art-1 { background-position: 25% 0%; }
.gear-art-2 { background-position: 50% 0%; }
.gear-art-3 { background-position: 75% 0%; }
.gear-art-4 { background-position: 100% 0%; }
.gear-art-5 { background-position: 0% 100%; }
.gear-art-6 { background-position: 25% 100%; }
.gear-art-7 { background-position: 50% 100%; }
.gear-art-8 { background-position: 75% 100%; }
.gear-art-9 { background-position: 100% 100%; }

.inventory-item-art {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(216, 176, 87, 0.5);
  border-radius: 6px;
  background-color: rgba(16, 12, 8, 0.64);
  box-shadow: inset 0 0 0 1px rgba(15, 9, 4, 0.72), 0 2px 5px rgba(0, 0, 0, 0.32);
}

.inventory-slot-art {
  box-sizing: border-box;
  padding: 5px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
}

.inventory-loot-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inventory-item-details { min-width: 0; flex: 1; }
.inventory-item-details .item-topline { margin-bottom: 2px; }
.inventory-item-details .item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-rarity { flex: 0 0 auto; font-size: 0.78rem; font-weight: 800; }
.inventory-item-details .item-slot,
.inventory-item-details .item-stats { font-size: 0.78rem; line-height: 1.35; }
.item-card .discard-btn { margin-top: 9px; }

.gear-slot-chest .slot-art { width: 66px; height: 66px; }
.gear-slot-weapon .slot-art { transform: rotate(-35deg); }
.gear-slot-amulet .slot-art { width: 60px; height: 60px; }

.slot-item {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: 4px;
  left: 4px;
  overflow: hidden;
  color: #978967;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px #160e07;
  white-space: nowrap;
}

.equip-slot.is-equipped {
  border-color: currentColor;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, currentColor 20%, transparent), rgba(25, 20, 13, 0.92));
  box-shadow: 0 0 11px color-mix(in srgb, currentColor 30%, transparent), inset 0 0 0 1px rgba(20, 14, 8, 0.84);
}

.equip-slot.is-equipped .slot-art {
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.78));
}

.equip-slot.is-equipped .slot-item { color: currentColor; }
.equip-slot:hover { z-index: 10; border-color: #f1d579; transform: translateY(-1px); }
.equip-slot:hover .slot-art { opacity: 1; filter: brightness(1.12) drop-shadow(0 0 7px rgba(245, 208, 107, 0.42)); }

/* Class roster: the portraits stay, while the cards use the taller, clean
   reference layout and leave all colour storytelling to their ability art. */
.class-select-panel .class-grid {
  width: min(1080px, 100%);
  gap: 30px;
}

.class-select-panel .class-card,
.class-select-panel .class-card:hover {
  min-height: 570px;
  overflow: visible;
  background: transparent !important;
  border: 0;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46);
}

/* This is deliberately an in-card backing, not an outside rectangular glow. */
.class-select-panel .class-card::before,
.class-select-panel .warrior::before,
.class-select-panel .mage::before,
.class-select-panel .archer::before {
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
}

/* The coloured backing artwork is aligned one-to-one beneath its matching
   gold card frame; it replaces the temporary neutral backing entirely. */
.class-select-panel .warrior::before {
  background: url("./assets/ui-class-panel-warrior-red-v2.png") center / 100% 100% no-repeat !important;
}
.class-select-panel .mage::before {
  background: url("./assets/ui-class-panel-mage-blue-v2.png") center / 100% 100% no-repeat !important;
}
.class-select-panel .archer::before {
  background: url("./assets/ui-class-panel-archer-green-v2.png") center / 100% 100% no-repeat !important;
}

.class-select-panel .class-card::after { z-index: 2; }

.class-select-panel .class-portrait {
  z-index: 3;
  width: 156px;
  height: 208px;
  margin: 38px auto 0;
  transform: translateY(42px);
}

.class-card-copy {
  z-index: 4;
  margin-top: 13px;
  padding: 0 35px 6px;
  text-align: left;
}

.class-role {
  color: #dfbc63;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}

.class-select-panel .class-card h3 {
  margin: 4px 0 5px;
  color: #fff0c8;
  font-size: 1.46rem;
}

.class-select-panel .class-card p {
  min-height: 34px;
  color: #e3d8c1;
  font-size: 0.78rem;
  line-height: 1.35;
}

.class-statline {
  gap: 18px;
  margin-top: 0;
  color: #e4bf66;
  font-size: 0.72rem;
}

.class-statline span {
  border-color: rgba(224, 186, 93, 0.6);
  background: rgba(15, 14, 11, 0.72);
  padding: 6px 10px;
}

/* Stat tags echo each raider's in-card panel colour, like the reference. */
.class-select-panel .warrior .class-statline { color: #ffb19a; }
.class-select-panel .warrior .class-statline span {
  border-color: rgba(214, 84, 66, 0.9);
  background: linear-gradient(180deg, rgba(104, 28, 23, 0.88), rgba(44, 15, 13, 0.9));
}
.class-select-panel .mage .class-statline { color: #9bd6ff; }
.class-select-panel .mage .class-statline span {
  border-color: rgba(83, 143, 239, 0.9);
  background: linear-gradient(180deg, rgba(29, 72, 142, 0.88), rgba(13, 31, 75, 0.9));
}
.class-select-panel .archer .class-statline { color: #c7ec93; }
.class-select-panel .archer .class-statline span {
  border-color: rgba(104, 163, 72, 0.92);
  background: linear-gradient(180deg, rgba(44, 100, 38, 0.88), rgba(19, 54, 23, 0.9));
}

.class-skills {
  display: grid;
  gap: 5px;
  margin-top: 20;
  color: #f3e7ce;
  font-size: 0.68rem;
  line-height: 1;
}

.class-skill {
  display: grid;
  grid-template-columns: 31px 23px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  min-height: 31px;
  white-space: nowrap;
}

.class-skill img {
  display: block;
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  padding: 3px;
  object-fit: contain;
  border: 1px solid rgba(202, 153, 65, 0.78);
  border-radius: 3px;
  background: radial-gradient(circle at 50% 35%, rgba(65, 49, 28, 0.72), rgba(13, 11, 9, 0.97));
  box-shadow: inset 0 0 0 1px rgba(8, 6, 4, 0.82), 0 1px 2px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.64));
}

.class-skills b {
  box-sizing: border-box;
  min-width: 23px;
  padding: 5px 0;
  color: #f2d27d;
  border: 1px solid rgba(206, 160, 73, 0.78);
  border-radius: 3px;
  background: linear-gradient(180deg, #302719, #0c0b09);
  box-shadow: inset 0 0 0 1px rgba(5, 4, 3, 0.82), 0 1px 2px rgba(0, 0, 0, 0.55);
  font-size: 0.59rem;
  line-height: 1;
}

/* Preserve the lowered portrait position during the card hover animation. */
.class-select-panel .class-card:hover .class-portrait {
  transform: translateY(38px) scale(1.055);
}

/* The raider screen now sits directly on the moonlit scene; only the three
   hero cards retain ornate frames. */
.class-select-panel {
  width: min(1240px, calc(100% - 32px));
  padding: 42px 42px 36px;
  background: none;
  box-shadow: none;
}

.class-select-heading h2 {
  font-family: "Old English Text MT", "UnifrakturCook", "Lucida Blackletter", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-shadow: 0 3px 0 rgba(12, 7, 3, 0.85), 0 0 16px rgba(225, 177, 68, 0.22);
}

/* Travelling merchant: the shop is a real stall, with live stock resting on
   its shelf bays instead of standard UI cards. */
#shopOverlay {
  padding: 10px;
  background: rgba(3, 7, 9, 0.76);
}

.shop-stall {
  position: relative;
  width: min(1672px, calc(100vw - 20px));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border: 1px solid rgba(226, 178, 76, 0.42);
  border-radius: 12px;
  background: #0f1413;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.76), 0 0 36px rgba(211, 145, 45, 0.16);
}

.shop-stall-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.shopkeeper-sprite {
  position: absolute;
  z-index: 3;
  bottom: 28%;
  left: 41.5%;
  width: 15.5%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.46));
  /* The idle and finger sprites share a fixed canvas, so swapping frames only moves the hand. */
  animation: none;
}

.shop-stall-ui { position: absolute; inset: 0; z-index: 2; }

.shop-stall-header {
  position: absolute;
  z-index: 4;
  top: 2.6%;
  left: 50%;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  color: #f8dfa0;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.82);
}

.shop-stall-header .eyebrow { color: #e5b45f; font-size: clamp(0.52rem, 0.7vw, 0.78rem); }
.shop-stall-header h2 { margin: 1px 0 5px; color: #fff0c4; font-size: clamp(1.25rem, 2.3vw, 2.25rem); }
.shop-stall-header .shop-gold { margin: 0; padding: 5px 10px; border-radius: 8px; font-size: clamp(0.62rem, 0.8vw, 0.82rem); }
.shop-stall-header .shop-gold span { font-size: 0.9rem; }

.shop-offers {
  position: absolute;
  z-index: 3;
  top: 27%;
  right: 14.5%;
  bottom: 35%;
  left: 14.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  pointer-events: none;
}

.shop-offer {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  color: #fff0c6;
  background: none;
  border: 0;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.shop-offer:nth-child(1) { grid-column: 1; grid-row: 1; }
.shop-offer:nth-child(2) { grid-column: 1; grid-row: 2; }
.shop-offer:nth-child(3) { grid-column: 1; grid-row: 3; }
.shop-offer:nth-child(4) { grid-column: 2; grid-row: 1; }
.shop-offer:nth-child(5) { grid-column: 2; grid-row: 2; }
.shop-offer:nth-child(6) { grid-column: 3; grid-row: 1; }
.shop-offer:nth-child(7) { grid-column: 3; grid-row: 2; }
.shop-offer:nth-child(8) { grid-column: 3; grid-row: 3; }

.shop-offer-icon {
  position: relative;
  display: grid;
  width: clamp(32px, 4.1vw, 62px);
  height: clamp(32px, 4.1vw, 62px);
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: #ffe28b;
  font-size: 1.8rem;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.76));
  animation: shelf-item-float 2.3s ease-in-out infinite;
  top: 8px;
}

.shop-offer-icon::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 14%;
  bottom: -7px;
  width: 72%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0) 72%);
  filter: blur(2px);
}

.shop-offer-icon > * { position: relative; z-index: 1; }

.shop-offer-icon.is-empty { visibility: hidden; animation: none; }

.shop-offer:nth-child(2n) .shop-offer-icon { animation-delay: -0.9s; }
.shop-offer:nth-child(3n) .shop-offer-icon { animation-delay: -1.55s; }
@keyframes shelf-item-float { 50% { transform: translateY(-5px); } }

.shop-offer-icon img,
.shop-offer-icon .shop-item-art { width: 100%; height: 100%; object-fit: contain; }
.shop-offer-icon .gear-art { display: block; background-repeat: no-repeat; background-size: 500% 200%; }

.shop-price { position: relative; top: 15px; display: grid; width: clamp(43px, 4.9vw, 72px); height: clamp(28px, 3.35vw, 49px); place-items: center; margin-top: -2px; }
.shop-price img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shop-price b { position: relative; z-index: 1; margin-top: 8%; color: #2b1908; font-size: clamp(0.5rem, 0.85vw, 0.86rem); text-shadow: 0 1px rgba(255, 226, 155, 0.48); }

.shop-offer-tooltip {
  position: absolute;
  z-index: 10;
  bottom: 95%;
  left: 50%;
  display: grid;
  width: min(170px, 16vw);
  gap: 3px;
  padding: 9px 10px;
  color: #f5e7c8;
  border: 1px solid rgba(225, 181, 91, 0.7);
  border-radius: 7px;
  background: rgba(14, 12, 8, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.58);
  font-size: clamp(0.52rem, 0.7vw, 0.76rem);
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.shop-offer-tooltip strong { font-size: 1em; }
.shop-offer-tooltip small { color: #d6c7a7; font-size: 0.9em; }
.shop-offer-tooltip em { margin-top: 2px; color: #f0c76d; font-size: 0.86em; font-style: normal; }
.shop-offer:hover { z-index: 12; transform: translateY(-4px) scale(1.06); filter: brightness(1.12); }
.shop-offer:hover .shop-offer-tooltip { opacity: 1; transform: translate(-50%, 0); }
.shop-offer:disabled { cursor: not-allowed; filter: grayscale(0.45) brightness(0.65); }
.shop-offer:disabled:hover { transform: none; }
.shop-offer.is-sold { filter: none; }
.shop-offer.is-sold .shop-price b { color: #5a2717; font-size: clamp(0.48rem, 0.78vw, 0.76rem); letter-spacing: 0.08em; }

.sell-pack {
  position: absolute;
  z-index: 5;
  bottom: 5.5%;
  left: 4%;
  display: grid;
  gap: 2px;
  padding: 8px 15px;
  color: #ffe9b3;
  border: 1px solid rgba(223, 174, 77, 0.75);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(70, 47, 23, 0.96), rgba(22, 15, 9, 0.96));
  box-shadow: inset 0 0 0 1px rgba(13, 8, 4, 0.74), 0 4px 12px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  font-family: Georgia, serif;
  text-align: left;
}

.sell-pack span { font-weight: 800; font-size: clamp(0.62rem, 0.95vw, 0.92rem); }
.sell-pack small { color: #d6ba7b; font-size: clamp(0.48rem, 0.67vw, 0.65rem); }
.sell-pack:hover { filter: brightness(1.2); transform: translateY(-2px); }

.sell-drawer {
  position: absolute;
  z-index: 20;
  bottom: 13%;
  left: 3.3%;
  width: min(390px, 32%);
  padding: 13px;
  border: 1px solid rgba(226, 179, 84, 0.76);
  border-radius: 10px;
  background: rgba(13, 12, 9, 0.96);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7);
}

.sell-drawer[hidden] { display: none; }
.sell-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.sell-drawer h3 { margin: 0; color: #f2d18a; font-size: clamp(0.68rem, 1vw, 0.98rem); }
.sell-drawer-head button { color: #f4d68d; border: 0; background: none; cursor: pointer; font-size: 1.25rem; }
.sell-drawer .shop-sell-grid { grid-template-columns: 1fr; max-height: 220px; }
.sell-drawer .shop-sell-item { border-color: rgba(218, 179, 90, 0.34); background: rgba(49, 34, 18, 0.84); }

.shop-leave { position: absolute; z-index: 5; right: 4%; bottom: 5.5%; margin: 0; padding: 11px 19px; font-size: clamp(0.66rem, 1vw, 0.96rem); }

/* End-of-run recap: enough detail to celebrate a strong attempt without
   making the player sift through the hidden event log. */
#deathRecapOverlay {
  z-index: 12;
  background: rgba(4, 7, 9, 0.78);
  backdrop-filter: blur(3px);
}

.death-recap-panel {
  width: min(700px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  text-align: center;
  border-color: rgba(233, 182, 82, 0.72);
  background: linear-gradient(180deg, rgba(47, 26, 23, 0.98), rgba(18, 15, 13, 0.99));
  box-shadow: 0 18px 62px rgba(0, 0, 0, 0.72), inset 0 0 36px rgba(150, 58, 40, 0.16);
}

.death-recap-panel h2 { margin: 3px 0 6px; color: #f3c86f; font-size: clamp(1.7rem, 3.3vw, 2.45rem); }
.death-recap-panel .panel-copy { margin-bottom: 18px; color: #dfcfaa; }

.death-recap-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.death-recap-stats div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(218, 174, 87, 0.3);
  border-radius: 6px;
  background: rgba(14, 12, 10, 0.46);
}

.death-recap-stats span { color: #ccb98d; font-size: 0.84rem; }
.death-recap-stats b { color: #ffe2a0; white-space: nowrap; }
.death-recap-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.death-recap-actions .ui-btn { min-width: 148px; padding: 11px 16px; font-size: 0.92rem; }

@media (max-width: 560px) {
  .death-recap-stats { grid-template-columns: 1fr; }
  .death-recap-panel { max-height: calc(100% - 18px); }
}

@media (max-width: 760px) {
  .shop-stall { width: calc(100vw - 10px); border-radius: 5px; }
  .shop-offers { top: 26%; right: 12%; bottom: 34%; left: 12%; }
  .shop-offer-tooltip { width: 130px; }
  .sell-drawer { width: 44%; }
}

.class-pick {
  z-index: 4;
  margin: auto 34px 24px;
  padding-top: 13px;
  border-top-color: rgba(225, 190, 102, 0.43);
  color: #f7e5b3;
  font-size: 0.67rem;
}

@media (max-width: 780px) {
  .class-select-panel .class-card,
  .class-select-panel .class-card:hover {
    min-height: 470px;
    display: flex;
  }

  .class-select-panel .class-portrait {
    width: 132px;
    height: 174px;
    margin-top: 22px;
  }

  .class-card-copy { padding-inline: 32px; }
}