/* ═══════════════════════════════════════════════════
   RESUME RUN OVERLAY
   ═══════════════════════════════════════════════════ */

#resume-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
}
#resume-overlay.hidden { display: none; }

#resume-card {
  width: min(320px, 90vw);
  background: linear-gradient(160deg, #1a1528 0%, #0e0c18 100%);
  border: 2px solid rgba(140,100,220,0.55);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(180,130,255,0.1),
    0 12px 40px rgba(0,0,0,0.9);
  padding: 28px 24px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#resume-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180,130,255,0.7);
}

#resume-hero-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #e8d8ff;
  letter-spacing: 0.04em;
}

#resume-details {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 2px 0 4px;
}

#resume-details span {
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 3px 10px;
}

#resume-hint {
  font-size: 0.74rem;
  color: rgba(200,190,220,0.55);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

#resume-btns {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px;
}

#resume-yes-btn {
  background: linear-gradient(135deg, #6b38c8, #4a1f9e);
  border: 1.5px solid rgba(160,110,255,0.6);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 0;
  cursor: pointer;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(100,50,200,0.45);
  transition: filter 0.15s;
}
#resume-yes-btn:active { filter: brightness(1.2); }

#resume-no-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: rgba(200,190,220,0.6);
  font-size: 0.85rem;
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#resume-no-btn:active { color: #ff7777; border-color: rgba(255,80,80,0.4); }

/* ═══════════════════════════════════════════════════
   INFO CARD OVERLAY
   ═══════════════════════════════════════════════════ */

#info-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 90px;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.25s ease;
}

#info-card-overlay.visible {
  background: rgba(0,0,0,0.55);
  pointer-events: all;
}

#info-card {
  width: min(340px, 92vw);
  background: linear-gradient(160deg, #1e1a14 0%, #12100a 55%, #1a1610 100%);
  border: 2px solid #6b4f2a;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255,200,80,0.12),
    0 8px 32px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,200,100,0.08);
  padding: 18px 18px 20px;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.25s ease;
  /* Must stay none while overlay is hidden: children can override parent pointer-events:none */
  pointer-events: none;
}

#info-card-overlay.visible #info-card {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Card header ── */
.card-header {
  display: flex;
  gap: 14px;
  align-items: center;
}

.card-portrait-above {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.card-portrait-above.card-portrait-stack {
  position: relative;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

.card-portrait-stack .card-sprite-bg {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(107,79,42,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  display: block;
}

.card-portrait-stack .card-sprite-fg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  object-fit: contain;
  border: none;
  box-shadow: none;
}

.card-sprite-large {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(107,79,42,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.card-portrait {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(107,79,42,0.6);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-sprite {
  width: auto;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.card-emoji-large {
  font-size: 2.5rem;
  line-height: 1;
}

.card-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-name {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: bold;
  color: #f5d87a;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
}

.card-type {
  font-size: 0.65rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #a08050;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(107,79,42,0.4);
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
  align-self: flex-start;
}

.card-stats {
  display: flex;
  gap: 10px;
}

.card-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(107,79,42,0.35);
  border-radius: 6px;
  padding: 3px 8px;
}

.card-stat-icon { font-size: 0.85rem; }
.card-stat-val  { font-size: 1rem; font-weight: 800; color: #fff; font-family: ui-sans-serif, system-ui, sans-serif; }
.card-stat-label { font-size: 0.6rem; color: #a08050; text-transform: uppercase; letter-spacing: 1px; align-self: flex-end; margin-bottom: 1px; }

/* ── Divider ── */
.card-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,79,42,0.6) 30%, rgba(245,200,80,0.2) 50%, rgba(107,79,42,0.6) 70%, transparent);
  margin: 14px 0 12px;
}

/* ── Blurb ── */
.card-blurb {
  font-family: Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #c8b898;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  white-space: pre-line;
}

.card-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(107, 79, 42, 0.35);
  display: flex;
  justify-content: center;
}

.card-btn {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(160, 60, 50, 0.65);
  color: #e8c8c0;
  background: linear-gradient(160deg, rgba(90, 28, 24, 0.95), rgba(50, 14, 12, 0.98));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.card-btn:active {
  transform: scale(0.98);
}

.card-btn-drop:hover {
  border-color: rgba(200, 100, 80, 0.85);
  color: #fff;
}

/* ── Attributes ── */
.card-attrs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.card-attr {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(107,79,42,0.3);
  border-left: 3px solid #c8841a;
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
}

.card-attr-icon { font-size: 1rem; flex-shrink: 0; }

.card-attr-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.card-attr-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0c060;
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-attr-desc {
  font-size: 0.68rem;
  color: #8a7050;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════
   MAIN MENU
   ═══════════════════════════════════════════════════ */

#main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: fixed;
  inset: 0;
  background-color: transparent;
  background-image: var(--floor-bg-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 95;
  padding: 40px 24px 28px;
  overflow-y: auto;
}

#main-menu.hidden { display: none; }

/* ── Hero carousel background ── */
#menu-hero-carousel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 72%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* Fade out toward the bottom so menu content remains readable */
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 60%) 0%, rgb(0 0 0) 55%, #00000000 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 60%) 0%, rgb(0 0 0) 55%, #00000000 100%);
}

.carousel-hero {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 95%;
  width: auto;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.carousel-hero.active {
  opacity: 1;
}

/* Ensure all menu content sits above the carousel */
#main-menu > *:not(#menu-hero-carousel) {
  position: relative;
  z-index: 1;
}

#menu-title {
  font-size: 2rem;
  color: var(--torch-yellow);
  text-shadow: 0 0 24px var(--torch-orange), 0 0 60px rgba(232,132,26,0.25);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
}

/* ── Mini hero block on main menu ── */
#menu-hero-block {
  width: 100%;
  max-width: 340px;
  background: rgb(18 21 39 / 90%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#menu-hero-portrait {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

#menu-hero-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

#menu-hero-emoji {
  font-size: 2.4rem;
  line-height: 1;
}

#menu-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#menu-hero-name {
  font-size: 1rem;
  color: var(--torch-yellow);
  letter-spacing: 1px;
}

#menu-hero-meta {
  display: flex;
  gap: 12px;
  font-family: sans-serif;
  font-size: 0.75rem;
  color: var(--text-dim);
}

#menu-xp-bar-wrap {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

#menu-xp-bar {
  height: 100%;
  background: linear-gradient(90deg, #4040c0, #6060ff);
  width: 0%;
  transition: width 0.4s ease;
}

.hero-change-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: Georgia, serif;
  font-size: 0.8rem;
  cursor: pointer;
  background: rgb(18 21 39 / 90%);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary);
  letter-spacing: 0.5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.hero-change-btn:active { transform: scale(0.96); opacity: 0.8; }

/* ── Menu buttons ── */
.menu-btn {
  width: 100%;
  max-width: 340px;
  padding: 0.7em 1.7em;
  border-radius: 0.5em;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  user-select: none;
  background: var(--color-back);
  border: solid 2px #030f14;
  color: var(--btn-text);
  font-weight: 700;
  box-shadow:
    inset 0px -6px 18px -6px rgba(3, 15, 20, 0),
    inset rgba(54, 69, 75, 1) -1px -1px 6px 0px,
    inset 12px 0px 12px -6px rgba(3, 15, 20, 0),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 0),
    rgba(54, 69, 75, 1) -1px -1px 6px 0px;
  transition: all 0.3s;
}
.menu-btn:hover {
  box-shadow:
    inset 0px -6px 18px -6px rgba(3, 15, 20, 1),
    inset 0px 6px 18px -6px rgba(3, 15, 20, 1),
    inset 12px 0px 12px -6px rgba(3, 15, 20, 0),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 0),
    -1px -1px 6px 0px rgba(54, 69, 75, 1);
}
.menu-btn:hover { transform: none; }
.menu-btn:active {
  box-shadow:
    inset 0px -12px 12px -6px rgba(3, 15, 20, 1),
    inset 0px 12px 12px -6px rgba(3, 15, 20, 1),
    inset 12px 0px 12px -6px rgba(3, 15, 20, 1),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 1),
    -1px -1px 6px 0px rgba(54, 69, 75, 1);
  transform: scale(0.97);
}
.menu-btn:hover  { color: var(--btn-text); }
.menu-btn:active { color: var(--btn-text); }

.menu-btn.primary {
  font-size: 1.05rem;
  letter-spacing: 2px;
}

#new-run-btn {
  border: 2px solid #f0c040;
  box-shadow: 0 0 10px rgba(240,192,64,0.6), 0 0 24px rgba(240,192,64,0.3), inset 0 0 8px rgba(240,192,64,0.1);
  animation: golden-pulse 2.2s ease-in-out infinite;
}

@keyframes golden-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(240,192,64,0.6), 0 0 24px rgba(240,192,64,0.3), inset 0 0 8px rgba(240,192,64,0.1); }
  50%       { box-shadow: 0 0 18px rgba(240,192,64,0.9), 0 0 40px rgba(240,192,64,0.5), inset 0 0 12px rgba(240,192,64,0.2); }
}

/* The Void — locked/teaser button */
#void-btn {
  border: 2px solid rgba(140, 60, 200, 0.5);
  color: rgba(180, 120, 255, 0.7);
  background: rgba(20, 0, 40, 0.6);
  font-style: italic;
  letter-spacing: 1px;
  cursor: default;
  animation: void-pulse 3s ease-in-out infinite;
}
#void-btn:hover { transform: none; box-shadow: 0 0 14px rgba(140,60,200,0.4); }

@keyframes void-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(140,60,200,0.3); }
  50%       { box-shadow: 0 0 20px rgba(140,60,200,0.6); }
}

.menu-btn.secondary {
  font-size: 0.85rem;
}

/* ══════════════════════════════════════════════
   HOW TO PLAY
   ══════════════════════════════════════════════ */

.htp-body {
  padding: 8px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}

/* Lead + collapsible sections (How to Play) */
.htp-lead {
  font-size: 0.78rem;
  color: #a09888;
  line-height: 1.45;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  border: 1px solid rgba(240,192,96,0.15);
}
.htp-lead strong { color: #e8d0a0; }

.htp-details {
  margin: 0 0 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
}
.htp-details summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8d8b0;
  letter-spacing: 0.04em;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.htp-details summary::-webkit-details-marker { display: none; }
.htp-details summary::before {
  content: '▸';
  font-size: 0.65rem;
  opacity: 0.75;
  transition: transform 0.15s ease;
}
.htp-details[open] summary::before { transform: rotate(90deg); }
.htp-details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.htp-details-content {
  padding: 10px 12px 14px;
  font-size: 0.8rem;
  color: #bbb;
  line-height: 1.5;
}
.htp-details-content .htp-meta-list { margin-top: 8px; }
.htp-details-content .htp-tile-legend { margin-top: 8px; }
.htp-disclaimer {
  font-size: 0.72rem;
  color: #777;
  line-height: 1.45;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.htp-section {
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.htp-section:last-child { border-bottom: none; }

.htp-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f0c060;
  text-shadow: 0 0 10px rgba(240,192,96,0.4);
  margin: 0 0 10px;
  text-transform: uppercase;
}

.htp-text {
  font-size: 0.85rem;
  color: #ccc8b8;
  line-height: 1.55;
  margin: 0 0 12px;
}
.htp-text strong { color: #fff; }
.htp-text--flush { margin-bottom: 0 !important; }
.htp-more-intro { margin-bottom: 12px; }
.htp-details-content > p:first-child { margin-top: 0; }
.htp-details-content p + p { margin-top: 10px; }
.htp-details-content .htp-tip:last-child { margin-bottom: 0; }

/* Mini grid diagram */
.htp-grid-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 240px;
  margin: 0 auto 14px;
}
.htp-tile {
  background: rgba(30,20,10,0.85);
  border: 1px solid rgba(180,140,60,0.25);
  border-radius: 6px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  gap: 2px;
}
.htp-tile span { font-size: 0.48rem; color: #aaa; letter-spacing: 0.05em; text-transform: uppercase; }
.htp-tile--hidden { background: rgba(15,10,5,0.9); color: #555; font-size: 1.5rem; border-color: rgba(100,80,40,0.3); }
.htp-tile--revealed { border-color: rgba(200,160,80,0.4); }
.htp-tile--start { border-color: rgba(80,200,80,0.5); background: rgba(20,40,20,0.85); }
.htp-tile--locked { background: rgba(10,8,5,0.95); color: #333; border-color: rgba(60,50,30,0.3); }

/* Tile legend */
.htp-tile-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.htp-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #bbb;
}
.htp-legend-icon { font-size: 1rem; min-width: 28px; text-align: center; }

/* Combat diagram */
.htp-combat-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 4px 0 12px;
}
.htp-combatant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(30,18,8,0.8);
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(180,140,60,0.3);
  min-width: 90px;
}
.htp-combatant--enemy { border-color: rgba(200,60,60,0.4); }
.htp-combatant-icon { font-size: 1.8rem; }
.htp-combatant-label { font-size: 0.7rem; font-weight: 700; color: #f0c060; letter-spacing: 0.05em; }
.htp-combatant-stat { font-size: 0.72rem; color: #ccc; }
.htp-vs { font-size: 1rem; font-weight: 900; color: #f04040; text-shadow: 0 0 8px rgba(240,64,64,0.5); }

/* Tip callout */
.htp-tip {
  font-size: 0.78rem;
  color: #b8d0a0;
  background: rgba(60,100,40,0.2);
  border-left: 3px solid #6a9a4a;
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  margin: 6px 0;
  line-height: 1.45;
}
.htp-tip strong { color: #c8e8a0; }

/* Resource list */
.htp-resource-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.htp-resource {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  color: #ccc;
  line-height: 1.4;
}
.htp-res-icon { font-size: 1.1rem; min-width: 26px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.htp-resource strong { color: #fff; }

/* Rarity list */
.htp-rarity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.htp-rarity { font-size: 0.8rem; padding: 5px 10px; border-radius: 6px; }
.htp-rarity--common    { background: rgba(180,180,180,0.1); color: #c8c8c8; border-left: 3px solid #aaa; }
.htp-rarity--rare      { background: rgba(60,100,200,0.15); color: #80b8ff; border-left: 3px solid #5080e0; }
.htp-rarity--legendary { background: rgba(200,140,20,0.15); color: #ffc840; border-left: 3px solid #d09020; }

/* Ability list */
.htp-ability-list, .htp-event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.htp-ability, .htp-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  color: #ccc;
  line-height: 1.4;
}
.htp-ability span, .htp-event span { font-size: 1.2rem; min-width: 28px; text-align: center; flex-shrink: 0; }
.htp-ability strong, .htp-event strong { color: #f0c060; }

/* Biome list */
.htp-biome-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.htp-biome {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #bbb;
  padding: 3px 0;
}
.htp-biome-floors {
  font-size: 0.68rem;
  font-weight: 700;
  color: #f0c060;
  min-width: 42px;
  background: rgba(240,192,96,0.1);
  border-radius: 4px;
  padding: 2px 5px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Meta progression list */
.htp-meta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.htp-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  color: #ccc;
  line-height: 1.45;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 8px 12px;
}
.htp-meta-row span { font-size: 1.1rem; min-width: 24px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.htp-meta-row strong { color: #f0c060; }

/* Pro tips */
.htp-tips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.htp-tip-card {
  font-size: 0.8rem;
  color: #ccc;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.45;
}
.htp-tip-card strong { color: #f0c060; }

#menu-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 340px;
}

#menu-secondary .menu-btn { width: 100%; }

/* ── Difficulty selector ── */
#difficulty-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  font-family: sans-serif;
  font-size: 0.75rem;
}

.diff-label {
  color: rgba(230, 220, 200, 0.95);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

#diff-cards {
  display: flex;
  gap: 6px;
}

.diff-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgb(18 21 39 / 90%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 7px 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.diff-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(210, 205, 195, 0.98);
  font-family: sans-serif;
}

.diff-stats {
  font-size: 0.64rem;
  color: rgba(195, 185, 170, 0.92);
  font-family: sans-serif;
  line-height: 1.35;
}

.diff-btn.active {
  background: rgb(18 21 39 / 90%);
  border-color: var(--torch-orange);
}

.diff-btn.active .diff-name  { color: var(--torch-yellow); }
.diff-btn.active .diff-stats { color: rgba(255, 220, 150, 0.95); }

/* ── Save buttons (main menu) ── */
#menu-save-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

#menu-save-row .save-link {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 168px;
  padding: 10px 12px;
  background: rgb(22 26 44 / 92%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(230, 225, 215, 0.98);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: Georgia, 'Segoe UI', sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#menu-save-row .save-link:hover {
  color: #fff;
  border-color: rgba(245, 197, 24, 0.35);
  background: rgb(28 32 52 / 95%);
}

#menu-save-row .save-link:active {
  transform: scale(0.98);
  opacity: 0.95;
}

/* ── QR code (main menu) ── */
.menu-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 14px 10px;
  background: rgb(18 21 39 / 88%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.menu-qr-link {
  display: block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  transition: filter 0.15s, transform 0.1s;
}

.menu-qr-link:hover {
  filter: brightness(1.06);
}

.menu-qr-link:active {
  transform: scale(0.98);
}

.menu-qr-link img {
  display: block;
  width: 132px;
  height: 132px;
  image-rendering: pixelated;
}

.menu-qr-caption {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 195, 185, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.save-link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-family: sans-serif;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.save-link:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════
   PANEL OVERLAYS (Warrior Tree + Gold Shop)
   ═══════════════════════════════════════════════════ */

.panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 97;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-overlay.hidden { display: none; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #080810;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.panel-back-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-family: sans-serif;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.panel-back-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }

.panel-title {
  flex: 1;
  font-size: 1rem;
  color: var(--torch-yellow);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.panel-resource {
  font-family: sans-serif;
  font-size: 0.8rem;
  color: #88aaff;
}

.panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Upgrade / shop item cards ── */
.panel-card {
  background: linear-gradient(135deg, #13131f, #1a1a2e);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-card.owned  { opacity: 0.55; }
.panel-card.in-cart { border-color: var(--torch-orange); }

.panel-card-icon { font-size: 1.6rem; flex-shrink: 0; }

.panel-card-info { flex: 1; min-width: 0; }

.panel-card-name {
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.panel-card-desc {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: sans-serif;
  line-height: 1.4;
}

.panel-card-cost {
  font-size: 0.7rem;
  color: #88aaff;
  font-family: sans-serif;
  margin-top: 4px;
}

.panel-card-cost.gold-cost { color: var(--gold); }

.panel-card-action {
  flex-shrink: 0;
}

.panel-btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-family: sans-serif;
  cursor: pointer;
  transition: transform 0.1s;
  white-space: nowrap;
}
.panel-btn:active { transform: scale(0.95); }
.panel-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.panel-btn.buy {
  background: linear-gradient(135deg, #1a1a40, #282870);
  border: 1px solid #4040a0;
  color: #c0d0ff;
}

.panel-btn.buy.gold {
  background: linear-gradient(135deg, #251a00, #3d2d00);
  border: 1px solid #7a6010;
  color: var(--gold);
}

.panel-btn.remove {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-dim);
}

.panel-btn.owned-tag {
  background: none;
  border: none;
  color: #50c878;
  font-size: 0.72rem;
  cursor: default;
}

#shop-desc,
#passive-upgrades-desc {
  text-align: center;
  font-size: 0.75rem;
  font-family: sans-serif;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.passive-coming-soon {
  text-align: center;
  font-size: 0.75rem;
  font-family: sans-serif;
  color: var(--text-dim);
  font-style: italic;
  padding: 10px 0;
}

/* Built-in (class-specific) passive shown in hero accordion */
.hero-passive-builtin {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(80, 160, 80, 0.08);
  border: 1px solid rgba(80, 160, 80, 0.25);
  border-radius: 8px;
  margin-bottom: 6px;
}

.hero-passive-builtin-icon { font-size: 1.4rem; flex-shrink: 0; }

.hero-passive-builtin-info { flex: 1; min-width: 0; }

.hero-passive-builtin-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-passive-builtin-badge {
  font-size: 0.65rem;
  background: rgba(60, 180, 60, 0.25);
  border: 1px solid rgba(60, 180, 60, 0.45);
  color: #88dd88;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: sans-serif;
}

.hero-passive-builtin-desc {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-family: sans-serif;
  line-height: 1.4;
}

#shop-cart-info {
  text-align: center;
  font-size: 0.68rem;
  font-family: sans-serif;
  color: var(--torch-yellow);
  padding: 6px 12px;
  background: rgba(232,132,26,0.08);
  border-bottom: 1px solid rgba(232,132,26,0.15);
  flex-shrink: 0;
}

#shop-cart-info.hidden { display: none; }

/* ── Level-up overlay ── */
@keyframes levelup-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#level-up-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
}

#level-up-overlay.visible {
  display: flex;
  animation: levelup-fadein 0.6s ease forwards;
}

/* Ability cards are pointer-locked until the overlay fully fades in */
#level-up-overlay.visible.locked .ability-card {
  pointer-events: none;
  opacity: 0.5;
}

#level-up-title {
  font-size: 1.5rem;
  color: var(--torch-yellow);
  text-shadow: 0 0 18px var(--torch-orange);
  letter-spacing: 2px;
}

#level-up-subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: -12px;
}

#ability-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}

.ability-card {
  background: linear-gradient(135deg, #1a1a2e, #22224a);
  border: 1px solid #3a3a80;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.ability-card:hover  { border-color: #6060c0; background: linear-gradient(135deg, #20204a, #282870); }
.ability-card:active { transform: scale(0.97); border-color: #8080ff; }

.ability-icon { font-size: 1.8rem; flex-shrink: 0; }

.ability-icon--sprite {
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layered badge + bg — same art as HUD actives (Ranger practice picks) */
.levelup-ability-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.levelup-ability-bg {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.levelup-ability-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.ability-info { flex: 1; min-width: 0; }

.ability-name {
  font-size: 0.92rem;
  color: #c0d0ff;
  font-family: Georgia, serif;
  margin-bottom: 3px;
}

.ability-desc {
  font-size: 0.72rem;
  color: #7a8090;
  font-family: sans-serif;
  line-height: 1.4;
}

/* ── Killer card (death screen) ── */
.killer-card {
  width: min(320px, 88vw);
  background: linear-gradient(160deg, #1e1010 0%, #120a0a 55%, #1a1010 100%);
  border: 2px solid #8b2020;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(200,50,50,0.15), 0 8px 32px rgba(0,0,0,0.85);
  padding: 14px 16px;
  text-align: left;
}

.killer-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a04040;
  margin-bottom: 8px;
  font-family: sans-serif;
}

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

.killer-sprite {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.killer-emoji {
  font-size: 2.5rem;
  flex-shrink: 0;
  width: 56px;
  text-align: center;
}

.killer-info {
  flex: 1;
}

.killer-name {
  font-size: 1rem;
  font-weight: 700;
  color: #e8c8c8;
  margin-bottom: 2px;
}

.killer-type {
  font-size: 0.68rem;
  color: #a07070;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  font-family: sans-serif;
}

.killer-stats {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: #c8a0a0;
  font-family: sans-serif;
}

.killer-blurb {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #a08080;
  font-style: italic;
  line-height: 1.5;
  border-top: 1px solid rgba(200,50,50,0.2);
  padding-top: 8px;
}

/* ── Run summary / Game Over overlay ── */
#run-summary {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 32px;
}

#run-summary.visible {
  display: flex;
}

#run-summary h2 {
  font-size: 2rem;
  color: var(--hp-bright);
  text-shadow: 0 0 20px rgba(200,0,0,0.6);
}

#run-summary h2.escaped  { color: #50c878; text-shadow: 0 0 20px rgba(0,200,100,0.6); }
#run-summary h2.retreated { color: var(--torch-yellow); text-shadow: 0 0 20px rgba(220,150,0,0.5); }

#run-summary p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
}

#run-summary .stats {
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: sans-serif;
}

#run-summary button {
  background: var(--color-back);
  border: solid 2px #030f14;
  color: var(--btn-text);
  padding: 0.7em 1.7em;
  border-radius: 0.5em;
  font-size: 0.9rem;
  font-family: Georgia, serif;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  user-select: none;
  letter-spacing: 1px;
  box-shadow:
    inset 0px -6px 18px -6px rgba(3, 15, 20, 0),
    inset rgba(54, 69, 75, 1) -1px -1px 6px 0px,
    inset 12px 0px 12px -6px rgba(3, 15, 20, 0),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 0),
    rgba(54, 69, 75, 1) -1px -1px 6px 0px;
  transition: all 0.3s;
}
#run-summary button:hover {
  box-shadow:
    inset 0px -6px 18px -6px rgba(3, 15, 20, 1),
    inset 0px 6px 18px -6px rgba(3, 15, 20, 1),
    inset 12px 0px 12px -6px rgba(3, 15, 20, 0),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 0),
    -1px -1px 6px 0px rgba(54, 69, 75, 1);
}
#run-summary button:active {
  box-shadow:
    inset 0px -12px 12px -6px rgba(3, 15, 20, 1),
    inset 0px 12px 12px -6px rgba(3, 15, 20, 1),
    inset 12px 0px 12px -6px rgba(3, 15, 20, 1),
    inset -12px 0px 12px -6px rgba(3, 15, 20, 1),
    -1px -1px 6px 0px rgba(54, 69, 75, 1);
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════
   HERO SELECT OVERLAY
   ═══════════════════════════════════════════════════ */

#hero-select-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background-image: var(--floor-bg-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: Georgia, serif;
  max-width: 480px;
  margin: 0 auto;
}

#hero-select-overlay.hidden { display: none; }

#hero-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  background: rgb(18 21 39 / 85%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

#hero-select-title {
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--torch-yellow);
  text-transform: uppercase;
}

#hero-select-gold {
  font-family: sans-serif;
  font-size: 0.88rem;
  color: var(--gold);
}

/* Scrollable body — horizontal snap carousel */
#hero-select-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(
    180deg,
    rgb(14 10 8 / 0.88) 0%,
    rgb(16 18 28 / 0.78) 100%
  );
}

#hero-carousel-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

#hero-select-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.hero-select-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hide scrollbars — carousel + tall slides still scroll; snap / touch unchanged */
#hero-select-scroll,
.hero-select-slide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#hero-select-scroll::-webkit-scrollbar,
.hero-select-slide::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hero name block — carved wood plaque (slides use classes, not IDs) */
.hero-select-namewrap {
  width: 100%;
  max-width: 100%;
  text-align: center;
  padding: 16px 18px 14px;
  position: relative;
  border-radius: 3px;
  isolation: isolate;
  /* Plank grain + warm wood base */
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.07) 3px,
      rgba(0, 0, 0, 0.07) 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.03) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(
      168deg,
      #7a5a42 0%,
      #5c4030 18%,
      #453225 45%,
      #2e2118 72%,
      #1c1410 100%
    );
  border: 3px solid #0f0a06;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.11),
    inset 0 -12px 28px rgba(0, 0, 0, 0.28),
    0 4px 0 #0a0705,
    0 8px 22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(120, 85, 55, 0.35);
}

/* Brass corner studs */
.hero-select-namewrap::before,
.hero-select-namewrap::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  top: 10px;
  z-index: 1;
  background: radial-gradient(circle at 32% 28%, #b8a078 0%, #5c4a38 55%, #1f1812 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    0 2px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.hero-select-namewrap::before { left: 10px; }
.hero-select-namewrap::after { right: 10px; }

/* Inner carved groove under title */
.hero-select-namewrap .hero-select-name::after {
  content: '';
  display: block;
  width: min(72%, 220px);
  height: 2px;
  margin: 10px auto 0;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.55) 15%,
    rgba(0, 0, 0, 0.55) 85%,
    transparent
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-select-name {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f2e6c4;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.85),
    0 0 18px rgba(232, 132, 26, 0.35);
  margin: 0;
  text-align: center;
}

.hero-select-tagline {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #c9bda0;
  font-family: Georgia, 'Times New Roman', serif;
  margin-top: 12px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

.hero-select-xp-row {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 0.74rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8cff7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Upgrade grid */
.hero-upgrades-grid,
.hero-passive-upgrades-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

/* Ranger — passive meta upgrades (Keen Senses, Swift Shot, etc.) */
.hero-passive-wrap {
  width: 100%;
  margin-top: 6px;
}

.hero-passive-wrap[hidden] {
  display: none !important;
}

.hero-passive-accordion {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(107, 79, 42, 0.45);
  border-radius: 8px;
  overflow: hidden;
}

.hero-passive-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 14px;
  background: rgba(20, 15, 8, 0.75);
  border: none;
  color: #d4b878;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.hero-passive-accordion-toggle:active {
  background: rgba(30, 22, 10, 0.9);
}

.hero-passive-accordion-toggle .accordion-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  font-size: 0.75rem;
  color: rgba(212, 184, 120, 0.7);
  transition: transform 0.2s ease;
  transform: translateY(-50%);
}

.hero-passive-accordion.open .hero-passive-accordion-toggle .accordion-chevron {
  transform: translateY(-50%) rotate(90deg);
}

.hero-passive-accordion-body {
  display: none;
  border-top: 1px solid rgba(107, 79, 42, 0.35);
  padding: 10px 8px 12px;
}

.hero-passive-accordion.open .hero-passive-accordion-body {
  display: block;
}

.hero-upgrade-slot {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  background: rgb(18 21 39 / 90%);
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.1s;
}

.hero-upgrade-slot:active { transform: scale(0.95); }

.hero-upgrade-slot.owned {
  border-color: var(--torch-orange);
  background: rgba(232,132,26,0.12);
}

.hero-upgrade-slot.selected {
  border-color: #88aaff;
  box-shadow: 0 0 8px rgba(136,170,255,0.4);
}

.hero-upgrade-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.hero-upgrade-icon-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.hero-upgrade-icon-stack {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.hero-upgrade-icon-stack .hero-upgrade-icon-bg {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.hero-upgrade-icon-stack .hero-upgrade-icon-fg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.hero-upgrade-cost {
  font-family: sans-serif;
  font-size: 0.6rem;
  color: var(--text-dim);
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  padding: 1px 4px;
}

.hero-upgrade-slot.owned .hero-upgrade-cost {
  color: var(--torch-yellow);
}

/* Ricochet + Mastery — one tile, two tier rows with checkbox affordance */
.hero-upgrade-slot--ricochet-combo {
  width: auto;
  min-width: 72px;
  max-width: 100px;
  min-height: 92px;
  height: auto;
  padding: 6px 6px 5px;
  cursor: default;
}

.hero-upgrade-slot--ricochet-combo:active {
  transform: none;
}

.hero-upgrade-ricochet-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.hero-upgrade-slot--ricochet-combo .hero-upgrade-icon-stack {
  cursor: pointer;
}

.hero-upgrade-ricochet-tiers {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.hero-upgrade-tier {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 3px 4px;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, box-shadow 0.12s;
}

.hero-upgrade-tier:disabled,
.hero-upgrade-tier.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.hero-upgrade-tier:not(:disabled):not(.is-locked):hover {
  background: rgba(80, 90, 140, 0.35);
}

.hero-upgrade-tier.tier-selected:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(136, 170, 255, 0.65);
  background: rgba(60, 70, 120, 0.45);
}

.hero-upgrade-rchk {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
}

.hero-upgrade-tier.owned .hero-upgrade-rchk {
  background: var(--torch-orange);
  border-color: #c9781a;
}

.hero-upgrade-tier.owned .hero-upgrade-rchk::after {
  content: '✓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: #1a1420;
}

.hero-upgrade-tier-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 0;
}

.hero-upgrade-tier-label {
  font-family: sans-serif;
  font-size: 0.52rem;
  font-weight: 600;
  color: #c8d4ff;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-upgrade-tier-xp {
  font-family: sans-serif;
  font-size: 0.5rem;
  color: var(--text-dim);
  line-height: 1.1;
}

.hero-upgrade-tier.owned .hero-upgrade-tier-xp {
  color: var(--torch-yellow);
}

/* Upgrade detail panel */
#hero-upgrade-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  padding: 24px;
}

#hero-upgrade-backdrop.hidden { display: none; }

#hero-upgrade-detail {
  width: 100%;
  max-width: 320px;
  background: rgb(18 21 39 / 95%);
  border: 1px solid rgba(136,170,255,0.3);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

#hero-upgrade-detail-name {
  font-size: 1.05rem;
  color: var(--torch-yellow);
  letter-spacing: 1px;
}

#hero-upgrade-detail-desc {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-family: sans-serif;
  line-height: 1.5;
}

#hero-upgrade-detail-hint {
  font-size: 0.78rem;
  color: #c9a227;
  line-height: 1.35;
}

#hero-upgrade-detail-hint.hidden {
  display: none;
}

#hero-upgrade-buy-btn {
  margin-top: 4px;
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* Hero display row (inside each slide — portrait only; arrows live in #hero-carousel-wrap) */
.hero-display-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

#hero-carousel-wrap .hero-nav-btn {
  align-self: center;
}

.hero-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(18 21 39 / 90%);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  position: relative;
  z-index: 2;
}

.hero-nav-btn:active { transform: scale(0.92); opacity: 0.7; }
.hero-nav-btn.hidden { visibility: hidden; pointer-events: none; }

.hero-display-wrap {
  position: relative;
  width: 110px;
  height: 160px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.hero-display-gif {
  height: auto;
  width: auto;
  max-height: 160px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  display: block;
  z-index: 1;
  position: relative;
  cursor: pointer;
}

.hero-display-emoji {
  font-size: 4rem;
  line-height: 1;
  display: none;
}

.hero-display-emoji.hidden {
  display: none;
}

.hero-locked-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.hero-locked-overlay.hidden { display: none; }

.hero-lock-icon { font-size: 1.8rem; }
.hero-lock-label { font-size: 0.75rem; color: var(--text-dim); font-family: sans-serif; }

#hero-unlock-btn {
  padding: 6px 12px;
  font-size: 0.78rem;
  max-width: 140px;
}

/* Footer */
#hero-select-footer {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  background: rgb(18 21 39 / 85%);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#hero-stats-bar {
  display: flex;
  gap: 24px;
  font-family: sans-serif;
  font-size: 1.05rem;
  color: var(--text-primary);
}

#hero-select-btn {
  max-width: 280px;
}

/* ═══════════════════════════════════════════════════
   MERCHANT OVERLAY
   ═══════════════════════════════════════════════════ */

/* ── Event overlays (merchant shop, gambler, triple chest, story) ── */

#merchant-shop-overlay,
#gambler-overlay,
#triple-chest-overlay,
#story-event-overlay {
  z-index: 96;
  justify-content: flex-start;
}

/* ── Event header image ────────────────────────────────────── */
.event-header-img-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  /* Default height for overlays with an actual image */
  height: 180px;
  background: #0c0a08;
}

/* Placeholder: no image, just a styled title bar */
.event-header-img-wrap.event-header-placeholder {
  height: 64px;
  background: linear-gradient(135deg, #1a130a 0%, #0e0b06 100%);
  border-bottom: 1px solid rgba(180, 130, 60, 0.25);
}

.event-header-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Fade bottom edge into the overlay background */
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.event-header-title {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 16px 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f5e8c8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.7);
  text-align: center;
}

.event-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 24px;
  width: 100%;
}

.event-blurb {
  font-family: sans-serif;
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  line-height: 1.55;
  max-width: 300px;
}

/* Merchant shop */
.merchant-shop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

.merchant-shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  gap: 10px;
}

.merchant-shop-item-name {
  font-size: 0.85rem;
  color: var(--torch-yellow);
  font-family: Georgia, serif;
  flex: 1;
}

.merchant-buy-btn {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 6px 12px;
  width: auto;
  max-width: none;
}

/* ── Gambler ─────────────────────────────────────────────────── */
.gambler-body {
  padding: 12px 16px 20px;
  gap: 10px;
}

.gambler-phase { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gambler-phase.hidden { display: none; }

.gambler-bet-label {
  font-size: 0.85rem;
  color: #c8b07a;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gambler-bet-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.gambler-bet-btn {
  min-width: 72px;
  font-size: 1rem;
  padding: 10px 14px;
}

.gambler-bet-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gambler-canvas-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.65), inset 0 0 0 2px rgba(195,155,60,0.35);
  /* Make canvas fill width up to its natural 300px */
  width: min(300px, calc(100vw - 48px));
  aspect-ratio: 300 / 200;
}

#gambler-canvas,
#gambler-canvas-result {
  display: block;
  width: 100%;
  height: 100%;
}

.gambler-roll-hint {
  font-size: 0.78rem;
  color: #aaa;
  margin: 0;
  font-style: italic;
}

.gambler-outcome-total {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0;
}

.gambler-outcome-text {
  font-size: 0.88rem;
  text-align: center;
  line-height: 1.5;
  max-width: 280px;
  margin: 0;
}

.outcome-win  { color: #6ddc8a; }
.outcome-lose { color: #e07060; }

/* Triple chest */
.triple-chest-list {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 8px 0;
}

.triple-chest-btn {
  width: 80px;
  height: 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.triple-chest-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  pointer-events: none;
}

/* Trinket Trader */
.trinket-trader-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(180,130,60,0.35) transparent;
}

.trinket-trader-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(20, 14, 6, 0.85);
  border: 1px solid rgba(180,140,60,0.28);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background 0.15s, box-shadow 0.15s;
  width: 100%;
}

.trinket-trader-card:hover {
  background: rgba(40, 28, 10, 0.95);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

.trinket-trader-card-art {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trinket-trader-card-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.trinket-trader-card-emoji { font-size: 1.6rem; line-height: 1; }

.trinket-trader-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trinket-trader-card-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8d8b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trinket-trader-card-rarity {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trinket-trader-card-action {
  font-size: 0.75rem;
  color: #ffd080;
  font-weight: 700;
  flex-shrink: 0;
}

/* Story event */
.story-header-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 16px 12px;
}

.story-header-narrator {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8a45a;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  opacity: 0.9;
}

#story-event-title {
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 700;
  color: #f5e8c8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95);
}

.story-event-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

.story-choice-btn {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════
   PWA INSTALL NUDGE
   ═══════════════════════════════════════════════════ */

#install-nudge.install-prompt {
  width: 100%;
  max-width: 340px;
  margin-top: 16px;
  padding: 14px 14px 12px;
  box-sizing: border-box;
  background:
    linear-gradient(165deg, rgba(40, 90, 130, 0.35) 0%, rgba(18, 28, 52, 0.88) 100%);
  border: 1px solid rgba(100, 180, 255, 0.45);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 4px 22px rgba(30, 100, 180, 0.22),
    0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

#install-nudge.hidden { display: none !important; }

.install-prompt-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(180, 220, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.install-prompt-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(120, 200, 255, 0.5);
  background: linear-gradient(180deg, #2a6a9e 0%, #1a4a78 100%);
  color: #f5fbff;
  font-family: Georgia, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 14px rgba(20, 80, 140, 0.45);
  transition: filter 0.15s, transform 0.1s;
}

.install-prompt-btn:hover {
  filter: brightness(1.08);
}

.install-prompt-btn:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

#ios-install-tip {
  margin-top: 0;
  font-size: 0.78rem;
  color: rgba(210, 225, 240, 0.95);
  font-family: sans-serif;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#ios-install-tip.hidden { display: none !important; }

/* ── Delete save ── */
.settings-delete-row {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.settings-danger-btn {
  background: rgba(160, 30, 30, 0.35);
  border: 1px solid rgba(200, 50, 50, 0.5);
  color: #e07070;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
}

.settings-danger-btn:active { background: rgba(160, 30, 30, 0.6); }

.settings-safe-btn {
  background: rgba(40, 40, 40, 0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: #aaa;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
}

#delete-save-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#delete-save-confirm.hidden { display: none; }

.delete-confirm-label {
  font-size: 0.8rem;
  color: #e07070;
  width: 100%;
}

/* ── Cheat accordion ── */
.settings-accordion {
  border: 1px solid rgba(180, 40, 40, 0.3);
  border-radius: 8px;
  margin-top: 10px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: rgba(120, 20, 20, 0.25);
  border: none;
  color: #cc6666;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: left;
}

.accordion-header:active { background: rgba(120, 20, 20, 0.4); }

.accordion-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.settings-accordion.open .accordion-chevron {
  transform: rotate(90deg);
}

.accordion-body {
  display: none;
  border-top: 1px solid rgba(180, 40, 40, 0.2);
  max-height: 320px;
  overflow-y: auto;
}

.settings-accordion.open .accordion-body {
  display: block;
}

.accordion-body .settings-row:last-child {
  border-bottom: none;
}

/* ── Settings overlay ── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  margin: 4px 0;
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-label-title {
  font-size: 0.82rem;
  color: rgba(235,228,215,0.92);
  font-family: Georgia, serif;
}

.settings-label-desc {
  font-size: 0.62rem;
  color: rgba(180,170,155,0.7);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Toggle switch */
.toggle-switch {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  transition: background 0.2s;
}

.toggle-switch input:checked + .toggle-track {
  background: rgba(200,140,20,0.75);
  border-color: rgba(245,197,24,0.5);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(200,195,185,0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
  background: #ffd700;
}

/* ── Backpack drawer: slides up from HUD line, ~450px; board only (HUD z-index 60 > 55) ── */
#backpack-overlay.backpack-drawer {
  position: fixed;
  left: 50%;
  /* Clear the HUD bar + small gap so z-index 60 HUD doesn’t paint over the drawer’s bottom edge */
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  height: 450px;
  /* Short viewports: shrink height so the panel fits; inner .backpack-content scrolls */
  max-height: min(450px, calc(100dvh - 180px));
  z-index: 55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #1e1a16 0%, #0c0a08 55%, #080706 100%);
  border: 1px solid rgba(107, 79, 42, 0.55);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow:
    0 -12px 40px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 200, 120, 0.08);
  transform: translate(-50%, calc(100% + 12px));
  transition: transform 0.34s cubic-bezier(0.25, 0.85, 0.32, 1);
  pointer-events: none;
}

#backpack-overlay.backpack-drawer.is-open {
  transform: translate(-50%, 0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #backpack-overlay.backpack-drawer {
    transition: none;
  }
}

.backpack-drawer-handle {
  flex-shrink: 0;
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.backpack-drawer-header {
  flex-shrink: 0;
  padding: 2px 12px 8px;
  text-align: center;
}

.backpack-drawer-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--torch-yellow);
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.backpack-content {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 130, 60, 0.35) transparent;
}

#backpack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 16px 8px;
  width: min(300px, 88vw);
  margin: 0 auto;
  flex-shrink: 0;
}

/* Match #backpack-grid width + horizontal center (avoid align-self:stretch — it was full-bleed vs the centered grid). */
.backpack-accordion {
  box-sizing: border-box;
  width: min(300px, 88vw);
  max-width: calc(100% - 32px);
  margin: 8px auto 16px;
  border: 1px solid rgba(107, 79, 42, 0.45);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}

.backpack-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 12px 14px;
  background: rgba(20, 15, 8, 0.75);
  border: none;
  color: #d4b878;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.backpack-accordion-header:active {
  background: rgba(30, 22, 10, 0.9);
}

.backpack-accordion-header .accordion-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  font-size: 0.75rem;
  color: rgba(212, 184, 120, 0.7);
  transition: transform 0.2s ease;
  transform: translateY(-50%);
}

.backpack-accordion.open .backpack-accordion-header .accordion-chevron {
  transform: translateY(-50%) rotate(90deg);
}

.backpack-accordion-body {
  display: none;
  border-top: 1px solid rgba(107, 79, 42, 0.35);
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 130, 60, 0.35) transparent;
  text-align: center;
}

.backpack-accordion.open .backpack-accordion-body {
  display: block;
}

#backpack-overlay.backpack-drawer .backpack-accordion-body {
  max-height: 200px;
}

.backpack-levelup-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.backpack-levelup-empty {
  font-size: 0.72rem;
  color: rgba(180, 165, 140, 0.55);
  font-style: italic;
  padding: 6px 4px 10px;
  text-align: center;
}

.backpack-levelup-entry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 10px;
  width: 100%;
  max-width: 100%;
  font-size: 0.72rem;
  color: rgba(200, 185, 155, 0.88);
  line-height: 1.45;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(107, 79, 42, 0.12);
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}

.backpack-levelup-entry:last-child {
  border-bottom: none;
}

.backpack-levelup-idx {
  color: rgba(140, 130, 110, 0.75);
  font-variant-numeric: tabular-nums;
}

.backpack-levelup-lv {
  color: #f5c518;
  font-weight: 700;
  font-size: 0.68rem;
  white-space: nowrap;
}

.backpack-levelup-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.backpack-levelup-name {
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  text-align: center;
}

.backpack-slot {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.backpack-slot.occupied {
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Rarity tile backgrounds */
.backpack-slot.rarity-common {
  background-image: url('../assets/ui/common-tile.png');
  background-size: 100% 100%;
}
.backpack-slot.rarity-rare {
  background-image: url('../assets/ui/rare-tile.png');
  background-size: 100% 100%;
}
.backpack-slot.rarity-legendary {
  background-image: url('../assets/ui/legendary-tile.png');
  background-size: 100% 100%;
}

.backpack-slot.occupied:active {
  filter: brightness(0.85);
}

.bp-item-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.bp-item-emoji {
  font-size: 1.8rem;
  line-height: 1;
  pointer-events: none;
}

.bp-item-qty {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  font-family: sans-serif;
}

/* ── Backpack full / pending pickup bar ─────────────────────── */

.backpack-pending-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(60, 20, 10, 0.92);
  border-bottom: 2px solid #c8622a;
  flex-shrink: 0;
}

.backpack-pending-bar.hidden { display: none; }

.backpack-pending-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.backpack-pending-art {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.backpack-pending-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.backpack-pending-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.backpack-pending-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffd080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backpack-pending-hint {
  font-size: 0.68rem;
  color: #bbb;
  line-height: 1.3;
}

.backpack-pending-trash-btn {
  flex-shrink: 0;
  background: rgba(180, 40, 20, 0.8);
  border: 1px solid rgba(220, 80, 50, 0.6);
  border-radius: 6px;
  color: #fff;
  font-size: 0.78rem;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.backpack-pending-trash-btn:hover { background: rgba(200, 50, 30, 0.95); }

/* Slots pulse orange in replace mode */
#backpack-grid.replace-mode .backpack-slot.occupied.replace-target {
  cursor: pointer;
  animation: bp-replace-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255, 150, 50, 0.7);
}

@keyframes bp-replace-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 150, 50, 0.5); }
  50%       { box-shadow: 0 0 0 4px rgba(255, 150, 50, 0.9); }
}

.bp-replace-badge {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff9a3c;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   TRAP TILE — reveal explanation modal
   ═══════════════════════════════════════════════════ */

.trap-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.trap-modal-overlay.hidden {
  display: none;
}

.trap-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.trap-modal {
  position: relative;
  z-index: 1;
  width: min(380px, 92vw);
  background: linear-gradient(160deg, #1e1a14 0%, #12100a 55%, #1a1610 100%);
  border: 2px solid #6b4f2a;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 200, 80, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 200, 100, 0.08);
  padding: 20px 22px 22px;
  text-align: center;
}

.trap-modal-emoji {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
}

.trap-modal-title {
  font-size: 1.2rem;
  color: var(--torch-yellow);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.trap-modal-body {
  text-align: left;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 18px;
}

.trap-modal-body p {
  margin: 0 0 0.75em;
}

.trap-modal-body p:last-child {
  margin-bottom: 0;
}

.trap-modal-sub {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.trap-modal .menu-btn {
  width: 100%;
  max-width: 280px;
}

.trap-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}

.trap-modal-actions .menu-btn {
  flex: 1 1 120px;
  max-width: none;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════
   BESTIARY — in-run discovery + menu catalog
   Parchment / scroll — dungeon field journal aesthetic
   ═══════════════════════════════════════════════════ */

.bestiary-panel-desc {
  padding: 0 12px 14px;
  margin: 0;
  font-size: 0.88rem;
  color: rgba(200, 190, 175, 0.9);
  text-align: center;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  font-family: Georgia, "Palatino Linotype", serif;
}

/* Trading card proportion: 2.5 × 3.5 (portrait) */
.bestiary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 8px 20px;
  max-width: 456px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  align-items: start;
  justify-items: center;
}

/* Compact catalog cards — same scroll art as modals; padding keeps content inside parchment */
.bestiary-grid-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* Inset from rollers + torn edges (small card) */
  padding: 12px 9px 16px;
  margin: 0;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 2.5 / 3.5;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 240, 0.2) 0%, transparent 45%),
    url('../assets/ui/bestiary-scroll-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(61, 41, 20, 0.15);
  cursor: pointer;
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  color: #2a1810;
  text-align: center;
  overflow: hidden;
  min-width: 0;
  flex-shrink: 0;
}

.bestiary-grid-card:hover {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(61, 41, 20, 0.22);
  filter: brightness(1.03);
}

/* Fills space above the title; sprite sits centered horizontally, lowered toward the text */
.bestiary-grid-card-art {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  padding: 10px 4px 6px;
}

.bestiary-grid-card-art img {
  max-width: 100%;
  max-height: min(78%, 72px);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
}

.bestiary-grid-card-emoji {
  font-size: 1.45rem;
  line-height: 1;
  padding: 2px;
}


.bestiary-grid-card-name {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2a1810;
  text-shadow:
    0 0 6px rgba(255, 252, 240, 0.9),
    0 1px 0 rgba(255, 252, 240, 0.6);
  line-height: 1.2;
}

.bestiary-grid-card-type {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b4423;
  margin-top: 3px;
}

.bestiary-grid-card-head {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 2px;
  padding-bottom: 37px;
}

.bestiary-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 14px;
  color: var(--text-dim);
  margin: 0;
  font-size: 0.92rem;
}

.bestiary-discovery-overlay {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.bestiary-discovery-overlay.hidden {
  display: none;
}

.bestiary-discovery-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 6, 0.82);
  backdrop-filter: blur(3px);
}

.bestiary-discovery-modal {
  position: relative;
  z-index: 1;
  width: min(300px, 94vw, calc(88vh * 2.5 / 3.5));
  max-width: 300px;
  aspect-ratio: 2.5 / 3.5;
  max-height: 88vh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  color: #2a1810;
  /* Scroll PNG fills the card; transparent so torn/transparent areas show the overlay */
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 240, 0.25) 0%, transparent 35%, rgba(60, 40, 20, 0.06) 100%),
    url('../assets/ui/bestiary-scroll-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 4px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(61, 41, 20, 0.12);
  /* Content sits inside the parchment — clear of rollers and ragged edges */
  padding: clamp(18px, 7.5%, 30px) clamp(16px, 7%, 26px) clamp(26px, 9%, 38px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bestiary-discovery-art-wrap {
  flex: 0 0 34%;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid rgba(61, 41, 20, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bestiary-discovery-gif {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.bestiary-discovery-gif.hidden {
  display: none;
}

.bestiary-discovery-emoji-fallback {
  font-size: clamp(2rem, 12vmin, 4.5rem);
  line-height: 1;
  padding: 8px;
}
.bestiary-discovery-emoji-fallback.hidden { display: none !important; }

.bestiary-discovery-header {
  flex: 0 0 auto;
  padding: 4px 0 2px;
  text-align: center;
}

.bestiary-discovery-name {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 700;
  color: #2a1810;
  text-shadow:
    0 0 10px rgba(255, 252, 240, 0.95),
    0 1px 0 rgba(255, 252, 240, 0.7);
  letter-spacing: 0.02em;
}

.bestiary-discovery-type {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b4423;
  margin-top: 6px;
  font-weight: 600;
}

.bestiary-discovery-blurb {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #2a1810;
  font-style: italic;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  text-shadow: 0 0 8px rgba(255, 252, 240, 0.75);
  white-space: pre-line;
}

/* Bestiary modal buttons — stretch to fill, inherit base style */
.bestiary-discovery-modal .menu-btn.primary,
.bestiary-discovery-modal .menu-btn.secondary {
  max-width: none;
}

#bestiary-discovery-ok {
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

body.bestiary-discovery-open #app {
  pointer-events: none;
}

/* Bestiary menu — zoomed creature card */
.bestiary-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 970;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.bestiary-detail-overlay.hidden {
  display: none;
}

/* #bestiary-detail-* lives inside .bestiary-discovery-modal.bestiary-detail-modal — same 2.5:3.5 card */

#bestiary-detail-back {
  flex: 0 0 auto;
  margin: 0 0 4px;
  width: auto;
}

body.bestiary-detail-open #app {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   Trinket Codex
   ═══════════════════════════════════════════════════════════════ */

/* Trinket detail card — fire-ice frame, no scroll */
.trinket-detail-modal {
  background-image: url('../assets/ui/fire-ice-frame.png') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  border-radius: 10%;
  padding: 80px 71px 147px !important;
  overflow: hidden !important;
  /* Fixed height so content never scrolls */
  aspect-ratio: unset;
  width: min(360px, 96vw);
  max-width: 360px;
  min-height: min(520px, 90vh);
  max-height: 90vh;
}

/* Readable text on dark portal background */
.trinket-detail-modal .bestiary-discovery-name  { color: #fff8e8; text-shadow: 0 0 10px rgba(255,180,60,0.5); }
.trinket-detail-modal .trinket-discovery-rarity { letter-spacing: 0.16em; }
.trinket-detail-modal .trinket-rarity-common    { color: #c0b890; }
.trinket-detail-modal .trinket-rarity-rare      { color: #80c0ff; }
.trinket-detail-modal .trinket-rarity-legendary { color: #ffb848; }
.trinket-detail-modal .trinket-discovery-blurb  { color: #ddd8c0; font-style: italic; font-size: 0.82rem; line-height: 1.4; margin: 4px 0 8px; }
.trinket-detail-modal .trinket-effect-label     { color: #f0c060; }
.trinket-detail-modal .trinket-effect-desc      { color: #e8e0c8; }
.trinket-detail-modal .bestiary-discovery-header { border-bottom: 1px solid rgba(255,180,60,0.3); padding-bottom: 4px; margin-bottom: 4px; }
.trinket-detail-modal .menu-btn                 { margin-top: 10px; }

.trinket-codex-desc {
  padding: 0 12px 14px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted, #bbb);
  line-height: 1.45;
}

.trinket-codex-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 10px 24px;
  overflow-y: auto;
}

.trinket-codex-section-header {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.trinket-rarity-common  { color: #c8c8c8; }
.trinket-rarity-rare    { color: #6fa8ff; }
.trinket-rarity-legendary { color: #ffd966; }

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

/* Trinket card — square tile frame, rarity-specific background */
.trinket-codex-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1 / 1;
  padding: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s, transform 0.12s;
  font: inherit;
  color: inherit;
  position: relative;
}

.trinket-codex-card:hover  { filter: brightness(1.15); transform: scale(1.04); }
.trinket-codex-card:active { transform: scale(0.97); }

.trinket-rarity-border-common    { background-image: url('../assets/ui/common-tile.png'); }
.trinket-rarity-border-rare      { background-image: url('../assets/ui/rare-tile.png'); }
.trinket-rarity-border-legendary { background-image: url('../assets/ui/legendary-tile.png'); }

.trinket-codex-card-art {
  width: 58%;
  height: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trinket-codex-card-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.trinket-codex-card-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.trinket-codex-card-name {
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff8e0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  padding: 0 4px 6px;
}

/* ── Trinket discovery & detail card ───────────────────────── */

.trinket-discovery-overlay {
  z-index: 990; /* above bestiary-discovery (980) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 0;
}

.trinket-discovery-overlay.hidden { display: none; }

.trinket-discovery-blurb {
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4a2e14;
  text-align: center;
  margin: 0 0 8px;
  padding: 0 4px;
}

/* Thin divider between blurb and effects */
.trinket-discovery-modal .trinket-discovery-effects {
  border-top: 1px solid rgba(100, 60, 20, 0.2);
  padding-top: 8px;
  margin-top: 2px;
}

.trinket-discovery-modal {
  aspect-ratio: unset;
  width: min(340px, 96vw);
  max-width: 340px;
  min-height: min(480px, 96vh);
  max-height: 96vh;
  overflow-y: auto;
  position: relative;
  /* Fire-ice portal frame */
  background-image: url('../assets/ui/fire-ice-frame.png');
  background-size: 100% 100%;
  background-position: center center;
  background-color: transparent;
  padding: 80px 71px 97px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(120,80,20,0.3);
  border-radius: 10%;
}

/* Dark scrim behind text so it pops against the frame art */
.trinket-discovery-modal::before {
  content: '';
  position: absolute;
  top: 72px;
  left: 60px;
  right: 60px;
  bottom: 88px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}

.trinket-discovery-modal > * {
  position: relative;
  z-index: 1;
}

/* Banner sits between backdrop and the scroll card — on the dark dungeon background */
.trinket-acquired-banner {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffd770;
  text-shadow: 0 0 12px rgba(255, 180, 40, 0.7), 0 2px 4px rgba(0,0,0,0.9);
  margin-bottom: 10px;
  padding: 4px 0;
}

.trinket-discovery-art-wrap {
  flex: 0 0 auto;
  height: 90px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
}

.trinket-discovery-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.trinket-discovery-img.hidden { display: none; }

.trinket-discovery-rarity {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}

/* Effect list inside discovery / detail card */
.trinket-discovery-effects {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.trinket-effect-line {
  display: grid;
  grid-template-columns: 1.4em 4.5em 1fr;
  gap: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  align-items: baseline;
}

.trinket-effect-icon  { text-align: center; }
.trinket-effect-label { font-weight: 700; color: #c8a84e; font-size: 0.7rem; letter-spacing: 0.05em; }
.trinket-effect-desc  { color: #d4c8a8; }

/* Fire-ice portal — use bright dungeon palette, not parchment ink */
.trinket-discovery-modal .trinket-effect-label { color: #f0c060; }
.trinket-discovery-modal .trinket-effect-desc  { color: #e8dfc0; }
.trinket-discovery-modal .trinket-effect-line  { font-size: 0.76rem; }

/* Rarity colors on portal */
.trinket-discovery-modal .trinket-rarity-common    { color: #b0a880; }
.trinket-discovery-modal .trinket-rarity-rare      { color: #70b0ff; }
.trinket-discovery-modal .trinket-rarity-legendary { color: #ffb040; }

/* Item name on portal */
.trinket-discovery-modal .bestiary-discovery-name  { color: #fff8e8; text-shadow: 0 0 10px rgba(255,180,60,0.5); }

/* Blurb text */
.trinket-discovery-modal .trinket-discovery-blurb { color: #d0c8a8; font-style: italic; }

/* Divider */
.trinket-discovery-modal .bestiary-discovery-header {
  border-bottom: 1px solid rgba(255, 180, 60, 0.25);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.trinket-detail-overlay {
  z-index: 975;
}

/* ═══════════════════════════════════════════════════
   MERGED RARITY (Forge trinkets)
   ═══════════════════════════════════════════════════ */

.trinket-rarity-merged             { color: #f0c060; text-shadow: 0 0 6px rgba(255,180,60,0.5); }
.trinket-rarity-border-merged      { border-color: #c08820; box-shadow: 0 0 8px 2px rgba(255,180,60,0.3); }
.trinket-codex-section-header.trinket-rarity-merged { color: #f0c060; }
.trinket-detail-modal .trinket-rarity-merged { color: #ffb848; }
.trinket-discovery-modal .trinket-rarity-merged { color: #ffb040; }

/* ═══════════════════════════════════════════════════
   FORGE OVERLAY
   ═══════════════════════════════════════════════════ */

#forge-overlay {
  position: fixed;
  inset: 0;
  z-index: 820;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(4px);
  padding: 16px;
}
#forge-overlay.hidden { display: none; }

.forge-panel {
  width: min(480px, 96vw);
  max-height: 88vh;
  overflow-y: hidden;
  background: linear-gradient(160deg, #1a1206 0%, #0e0c04 100%);
  border: 2px solid rgba(200,140,40,0.55);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255,180,60,0.15), 0 12px 40px rgba(0,0,0,0.9);
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forge-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f0c060;
  text-align: center;
  margin: 0;
  text-shadow: 0 0 10px rgba(255,180,60,0.4);
}

.forge-desc {
  font-size: 0.78rem;
  color: #d4c88a;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.forge-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
}
.forge-recipe-list::-webkit-scrollbar { display: none; }

.forge-recipe {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,140,40,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto auto;
  gap: 6px 8px;
  align-items: center;
}
.forge-can-forge {
  border-color: rgba(200,140,40,0.5);
  background: rgba(255,180,40,0.06);
}
.forge-cannot-forge {
  opacity: 0.55;
}

.forge-ingredients {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: #ede5b0;
}
.forge-ing {
  display: flex;
  align-items: center;
  gap: 3px;
}
.forge-ing-img  { width: 20px; height: 20px; object-fit: contain; }
.forge-ing-emoji { font-size: 1rem; }
.forge-ing-name { color: #e0d8a8; }
.forge-plus     { color: #f0c060; font-weight: 700; padding: 0 2px; }

.forge-arrow {
  grid-column: 2 / 3;
  color: #f0c060;
  font-size: 1.1rem;
  padding: 0 4px;
}

.forge-result {
  grid-column: 3 / 4;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.forge-result-icon img  { width: 24px; height: 24px; object-fit: contain; }
.forge-result-icon span { font-size: 1.2rem; }
.forge-result-text { min-width: 0; }
.forge-result-name { font-size: 0.8rem; font-weight: 700; color: #f0c060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forge-result-hint { font-size: 0.68rem; color: #c8ba80; line-height: 1.3; }

.forge-missing {
  grid-column: 1 / 4;
  font-size: 0.7rem;
  color: #e07050;
  font-style: italic;
}

.forge-btn {
  grid-column: 1 / 4;
  justify-self: center;
  font-size: 0.8rem;
  padding: 6px 16px;
  min-width: 100px;
  background: linear-gradient(135deg, #8a5a10, #c08820);
  border: 1px solid rgba(255,180,60,0.5);
  border-radius: 8px;
  color: #fff8e0;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
}
.forge-btn:active:not(:disabled) { transform: scale(0.97); }
.forge-btn-disabled { opacity: 0.35; cursor: not-allowed; background: #444; border-color: #666; }

.forge-leave-btn {
  align-self: center;
  margin-top: 4px;
  font-size: 0.8rem;
  padding: 8px 24px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #b0a880;
  cursor: pointer;
}
.forge-leave-btn:active { opacity: 0.7; }

/* Forge tile — spent state */
.tile.forge-used { opacity: 0.45; filter: grayscale(0.7); }

/* ── Sub-floor overlay ────────────────────────────────────── */
.sub-floor-overlay {
  position: absolute;
  inset: 0;
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(3px);
}
.sub-floor-overlay.hidden { display: none; }

.sub-floor-modal {
  position: relative;
  width: min(420px, 96vw);
  max-height: 92vh;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: url('../assets/ui/subfloor-background.png') center/cover no-repeat;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), inset 0 0 0 2px rgba(180,140,80,0.3);
}

.sub-floor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  background: rgba(0,0,0,0.65);
  border-bottom: 1px solid rgba(180,140,80,0.25);
}

.sub-floor-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.sub-floor-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e8d090;
  letter-spacing: 0.04em;
}

.sub-floor-subtitle {
  font-size: 0.72rem;
  color: #9a8860;
  margin-top: 2px;
}

.sub-floor-grid-wrap {
  padding: 16px;
  /* block + text-align:center lets inline-grid children center when they fit,
     and scroll horizontally when they overflow — flex justify-content:center
     clips both sides and prevents scrolling. */
  display: block;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  text-align: center;
  touch-action: pan-x; /* tell browser this container handles horizontal panning */
  /* hide scrollbar visually */
  scrollbar-width: none;
}
.sub-floor-grid-wrap::-webkit-scrollbar { display: none; }

.sub-floor-grid {
  display: inline-grid; /* inline so text-align:center works for centering */
  gap: 4px;
  vertical-align: middle;
}
/* Columns set dynamically by JS: grid-template-columns */

.sub-floor-message-bar {
  min-height: 36px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.6);
  border-top: 1px solid rgba(180,140,80,0.18);
  font-size: 0.75rem;
  color: #c8b87a;
  text-align: center;
  line-height: 1.4;
}

/* ── Sub-floor tile sizing ── */
.sub-floor-grid .tile {
  width: 80px;
  height: 80px;
  font-size: 0.65rem;
  /* touch-action lives on .sub-floor-grid-wrap only — pan-x on children can steal
     scrolling from the overflow-x scroller on some browsers. */
  touch-action: manipulation;
}

/* Sub-floor tile internals — clip only the faces, not the 3D container */
.sub-floor-grid .tile-front,
.sub-floor-grid .tile-back {
  overflow: hidden;
}

.sub-floor-grid .tile-icon-wrap {
  position: absolute;
  top: 4px;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-floor-grid .tile-icon-img {
  width: 72%;
  max-width: 54px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.sub-floor-grid .tile-icon-fallback .tile-emoji {
  font-size: 1.5rem;
}

.sub-floor-grid .tile-enemy-stats {
  font-size: 0.52rem;
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
}

/* Enemies in sub-floor must be tappable */
.sub-floor-grid .tile.revealed.enemy-alive {
  pointer-events: all;
  cursor: pointer;
}

/* ── Shrine overlay ── */
.shrine-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.shrine-choice-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  line-height: 1.4;
}

.shrine-choice-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.shrine-choice-label small {
  font-size: 0.7rem;
  opacity: 0.75;
}

/* Sub-floor entry tile on main floor */
.tile.type-sub-floor-entry .tile-face { background: #1a1210; }
.tile.type-sub-floor-used { opacity: 0.5; filter: grayscale(0.6); }
.tile.type-stairs-up .tile-face { background: #12181a; }
.tile.type-shrine .tile-face { background: #1a1520; }

/* Sub-floor: all revealed tiles stay tappable — handler manages logic */
.sub-floor-grid .tile.revealed {
  pointer-events: all;
}
.sub-floor-grid .tile.revealed.tile-type-stairs_up,
.sub-floor-grid .tile.revealed.tile-type-shrine,
.sub-floor-grid .tile.revealed.tile-type-chest {
  cursor: pointer;
}