#heatmap-menu {
  background-color: #000;
  z-index: 25;
  display: flex;
  flex-direction: column;
}

#heatmap-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8cqh;
  padding: 0 3cqh;
  background: #181b46;
  border-bottom: 1cqh solid #e720b8;
}

#heatmap-menu-name {
  font-size: 4cqh;
  font-weight: bold;
  color: white;
}

#heatmap-menu-stars {
  display: flex;
  align-items: center;
  gap: 1cqh;
  font-size: 3cqh;
  fill: white;
}

#heatmap-menu-stars svg {
  height: 4.5cqh;
}

#heatmap-menu-content {
  position: relative;
  width: 100%;
  height: 91%;
  display: flex;
  flex-direction: row;
}

#heatmap-menu-sidebar {
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3cqh 1cqh;
  background-color: #1a1a2e;
  gap: 2cqh;
  box-sizing: border-box;
}

.heatmap-op-button {
  width: 6cqh;
  height: 6cqh;
  border: none;
  border-radius: 1.5cqh;
  font-size: 3.5cqh;
  font-weight: 600;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.15s;
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}

.heatmap-op-button-active {
  opacity: 1;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  font-size: 5cqh;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)) brightness(1.2);
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)) brightness(1.2);
}

.heatmap-op-button:hover {
  filter: brightness(1.2);
}

.heatmap-op-button:active {
  transform: translateY(0.3cqh);
}

#heatmap-menu-main {
  flex: 1;
  padding: 2cqh 2cqh 2cqh 2cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

/* Wraps the chart/grid/legend so the crow bubble centers on the plot region
   itself — excluding the header above and the view-toggle buttons below.
   Replicates the flex context #heatmap-menu-main gave these children so the
   chart/grid (both flex: 1) still fill the area. */
#heatmap-plot-area {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

#heatmap-tour-bubble {
  position: absolute;
  top: 50%;
  /* Not 50%: the chart's plotted grid is offset right of its square's center
     because the axis padding is asymmetric (PAD_LEFT 12 vs PAD_RIGHT 4 in
     heatmap-chart.js), so its true center sits near x=54 of the viewBox.
     Nudge the bubble right to sit over the grid rather than the square. */
  left: 54%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 4.4cqw;
  line-height: 1.2;
  color: #2a1a0a;
  text-shadow: 0 0.25cqw 0 #fff, 0 -0.25cqw 0 #fff, 0.25cqw 0 0 #fff,
    -0.25cqw 0 0 #fff, 0.2cqw 0.2cqw 0 #fff, -0.2cqw 0.2cqw 0 #fff,
    0.2cqw -0.2cqw 0 #fff, -0.2cqw -0.2cqw 0 #fff;
  text-align: center;
  white-space: pre-line;
  width: max-content;
  max-width: 80%;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  z-index: 5;
}

#heatmap-tour-bubble.is-active {
  opacity: 1;
}

.heatmap-tour-locked {
  pointer-events: none;
  opacity: 0.4;
}

/* Top-left "?" — replays the crow's per-op assessment in the tour bubble.
   Sits above the chart/grid, matching the view-toggle button palette. */
#heatmap-help-button {
  position: absolute;
  top: 1.4cqh;
  left: 1.4cqh;
  z-index: 6;
  width: 4cqh;
  height: 4cqh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2cqw solid #4a3a1a;
  border-radius: 50%;
  background: #f5e9c8;
  color: #4a3a1a;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 2.6cqw;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#heatmap-help-button:hover {
  background: #4a3a1a;
  color: #f5e9c8;
}

#heatmap-chart-container {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#heatmap-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-dot tooltip. Pinned via tap, transient on hover. Pointer-events stay
   off so a tooltip floating over an adjacent dot doesn't block its click. */
#heatmap-chart-tooltip,
#heatmap-grid-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(42, 26, 10, 0.92);
  color: #fff;
  padding: 0.6cqh 1cqh;
  border-radius: 0.6cqh;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 2.2cqw;
  line-height: 1.3;
  white-space: pre-line;
  text-align: center;
  opacity: 0;
  transition: opacity 0.12s ease;
  transform: translate(-50%, calc(-100% - 0.8cqh));
  z-index: 10;
  top: 0;
  left: 0;
}

#heatmap-chart-tooltip.is-active,
#heatmap-grid-tooltip.is-active {
  opacity: 1;
}

#heatmap-chart-svg circle.heatmap-chart-dot {
  cursor: pointer;
}

/* Previous-day dots render visually at r=1.1 inside a transparent r=2.2
   hit-catcher (see renderDots). Hover or tap-pin grows the visible to
   full size via the parent group's :hover / .is-pinned state. */
.heatmap-chart-dot-visual {
  transition: r 0.12s ease;
}

#heatmap-chart-svg .heatmap-chart-dot-group:hover .heatmap-chart-dot-visual,
#heatmap-chart-svg .heatmap-chart-dot-group.is-pinned .heatmap-chart-dot-visual {
  r: 2.2;
}

#heatmap-view-toggle {
  display: flex;
  gap: 1cqh;
  margin-top: 1cqh;
  flex-shrink: 0;
}

.heatmap-view-button {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 2.4cqw;
  padding: 0.6cqh 2.4cqh;
  border: 0.2cqw solid #4a3a1a;
  border-radius: 0.8cqh;
  background: #f5e9c8;
  color: #4a3a1a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.heatmap-view-button.is-active {
  background: #4a3a1a;
  color: #f5e9c8;
}

.heatmap-view-button:not(.is-active):hover {
  background: #ebdcae;
}

#heatmap-container {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#heatmap-menu-back {
  margin-top: auto;
  fill: white;
}

#heatmap-menu-back img,
#heatmap-menu-back svg {
  height: 6cqh;
}

/* === DUNGEON MENU === */

#dungeon-menu {
  background-color: #0d1628;
  z-index: 25;
  display: none;
  transform: translateY(100svh);
  transition: transform 0.4s ease;
}

#dungeon-header {
  position: absolute;
  top: 10cqh;
  left: 0;
  right: 0;
  height: 8cqh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dungeon-header h2 {
  font-size: 5cqh;
  font-weight: 800;
  margin: 0;
}

/* Brightness + gem indicators — match the garden's chrome boxes
   (.garden-brightness-display / .garden-gem-display) so the dungeon menu
   carries the same visual identity. */
#dungeon-top-right {
  position: absolute;
  right: 2cqw;
  top: 2cqh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8cqh;
}

#dungeon-brightness-display {
  padding: 1cqh 2cqw;
  background-color: #181b46cc;
  border: 1px solid #ffffff22;
  border-radius: 1cqh;
  font-size: 3cqh;
  font-weight: 600;
}

#dungeon-gem-counter {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1cqh 2cqw;
  background-color: #181b46cc;
  border: 1px solid #ffffff22;
  border-radius: 1cqh;
  font-size: 3.5cqh;
  font-weight: 600;
}

.dungeon-gem-icon {
  width: 4cqh;
  height: 4cqh;
  fill: white;
}

/* Crow speech bubble — sits above the door. Mirrors .daily-crow-bubble in
   flower.css: bold Outfit text with a white outline, no background. */
#dungeon-crow-bubble {
  position: absolute;
  top: 38cqh;
  left: 50%;
  transform: translate(-50%, 0.5cqh);
  pointer-events: none;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 3cqh;
  line-height: 1.2;
  text-align: center;
  width: max-content;
  max-width: 80%;
  color: #2a1a0a;
  text-shadow:
    0 0.15cqh 0 #fff,
    0 -0.15cqh 0 #fff,
    0.15cqh 0 0 #fff,
    -0.15cqh 0 0 #fff;
  opacity: 0;
  transition:
    opacity 0.18s ease-out,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 30;
}

#dungeon-crow-bubble.is-talking {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Main door + burrow stats */
#dungeon-door-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqh;
}

#dungeon-main-door {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 28cqh;
  height: 35cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, transform 0.15s;
}

#dungeon-main-door:hover {
  filter: brightness(1.15) drop-shadow(0 0 1.5cqh rgba(196, 168, 255, 0.5));
}

#dungeon-main-door:active {
  transform: translateY(0.5cqh);
}

.dungeon-main-door-icon {
  width: 100%;
  height: 100%;
}

#dungeon-burrow-stats {
  text-align: center;
  font-size: 2.4cqh;
  line-height: 1.5;
  color: #ffffffd0;
}

#dungeon-burrow-bosses {
  font-weight: 600;
  color: white;
}

#dungeon-burrow-power {
  color: var(--fire-color);
}

#dungeon-burrow-brightness {
  font-size: 2.1cqh;
  color: #c4a8ff;
}

/* Fruit section sits above the element-upgrade row */
#dungeon-fruit-section {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqh;
}

/* Element upgrade row — locked square buttons at the bottom edge, sharing
   the back-button band horizontally (back button is left-aligned). */
#dungeon-element-upgrade-row {
  position: absolute;
  bottom: 3cqh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1.5cqh;
}

.dungeon-element-upgrade-button {
  position: relative;
  width: 9cqh;
  height: 9cqh;
  border-radius: 1.5cqh;
  border: 2px solid transparent;
  color: white;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: filter 0.15s;

  &:hover:not(.unaffordable) {
    filter: brightness(1.15);
  }

  /* Locked = basic attack not yet bought: still clickable (the click triggers
     the purchase), unless the player can't afford it. */
  &.locked.unaffordable {
    cursor: not-allowed;
    filter: brightness(0.6);
  }

  /* Locked but not for sale (air/water/fire until earned in the dungeon, or an
     already-pending earth attack): greyed out + inert, no purchase affordance.
     The :hover selector keeps it greyed (overrides the base hover brighten). */
  &.locked:not(.purchasable),
  &.locked:not(.purchasable):hover {
    cursor: default;
    filter: grayscale(1) brightness(0.65);
  }

  &:disabled {
    cursor: not-allowed;
    filter: brightness(0.6);
  }
}

.dungeon-element-upgrade-button[data-element="earth"] {
  background-color: var(--earth-color-shadow);
  border-color: var(--earth-color);
}

.dungeon-element-upgrade-button[data-element="air"] {
  background-color: var(--air-color-shadow);
  border-color: var(--air-color);
}

.dungeon-element-upgrade-button[data-element="water"] {
  background-color: var(--water-color-shadow);
  border-color: var(--water-color);
}

.dungeon-element-upgrade-button[data-element="fire"] {
  background-color: var(--fire-color-shadow);
  border-color: var(--fire-color);
}

/* Element icon: shown small, centered over the lock while the button is locked
   (a color hint inside the padlock), then grows to fill the button in white
   once the button is unlocked — the lock is hidden via the :not(.locked) rules
   below. */
.dungeon-element-upgrade-icon {
  position: absolute;
  width: 3cqh;
  height: 3cqh;
  /* Sits over the lock body (the lock is 70%-tall + centered), so the
     element-color icon reads as sitting inside the padlock. */
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.dungeon-element-upgrade-button[data-element="earth"] .dungeon-element-upgrade-icon {
  fill: var(--earth-color-shadow);
}

.dungeon-element-upgrade-button[data-element="air"] .dungeon-element-upgrade-icon {
  fill: var(--air-color-shadow);
}

.dungeon-element-upgrade-button[data-element="water"] .dungeon-element-upgrade-icon {
  fill: var(--water-color-shadow);
}

.dungeon-element-upgrade-button[data-element="fire"] .dungeon-element-upgrade-icon {
  fill: var(--fire-color-shadow);
}

.dungeon-element-upgrade-lock {
  width: 70%;
  height: 70%;
  fill: white;
}

/* Unlocked (no .locked): drop the lock, grow the element icon into its place
   in white. Locked buttons keep the base small-icon + visible-lock look. */
.dungeon-element-upgrade-button:not(.locked) .dungeon-element-upgrade-lock {
  display: none;
}

.dungeon-element-upgrade-button:not(.locked) .dungeon-element-upgrade-icon {
  position: static;
  width: 70%;
  height: 70%;
  transform: none;
  fill: white;
}

/* Price tag shown above a locked button: "<element-icon> 100". Hidden once the
   basic attack is owned (button no longer .locked). */
.dungeon-element-upgrade-cost {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.6cqh;
  align-items: center;
  gap: 0.3cqh;
  font-family: "Outfit", sans-serif;
  font-size: 2cqh;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0.2cqh 0.4cqh rgba(0, 0, 0, 0.6);
}

.dungeon-element-upgrade-cost svg {
  width: 2.2cqh;
  height: 2.2cqh;
  fill: white;
}

/* Price tag only on buyable (purchasable) locked buttons — earth. Air/water/
   fire are .locked but not .purchasable, so they show the lock with no cost. */
.dungeon-element-upgrade-button.locked.purchasable .dungeon-element-upgrade-cost {
  display: flex;
}

/* Bouncing nudge above the EARTH button (shown when the daily door says
   "Unlock Rock Punch first!"). z-index keeps it above the "100" price tag,
   which shares this bottom:100% spot — otherwise the tag covers the arrow's
   downward tip and it reads as broken. */
.dungeon-element-upgrade-arrow {
  position: absolute;
  width: 9cqh;
  height: 9cqh;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.8cqh;
  fill: white;
  pointer-events: none;
  z-index: 5;
  animation: dungeon-element-arrow-bounce 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0.8cqh rgba(0, 0, 0, 0.4));
}

@keyframes dungeon-element-arrow-bounce {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 1.5cqh);
  }
}

/* Footer — full-width wrapper for the back button. pointer-events:none on
   the wrapper so its empty middle (and the element-upgrade row it visually
   overlaps with at the bottom) doesn't swallow clicks; the back button
   re-enables pointer-events for itself. */
#dungeon-menu-footer {
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  pointer-events: none;
}

#dungeon-menu-footer > * {
  pointer-events: auto;
}

#dungeon-menu-back-button {
  width: 7cqh;
  height: 7cqh;
  color: white;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;

  svg {
    height: 6cqh;
    fill: white;
  }

  &:hover {
    filter: brightness(1.3);
  }
}

/* === FRUIT SUB-MENU === */

#dungeon-fruit-menu {
  position: absolute;
  inset: 0;
  background-color: #0d1628;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqh;
  padding: 4cqh 5% 10%;
}

#dungeon-fruit-menu-header h3 {
  font-size: 3cqh;
  margin: 0;
}

#dungeon-fruit-grid {
  display: flex;
  gap: 1cqh;
  flex-wrap: wrap;
  justify-content: center;
}

.dungeon-fruit-slot {
  width: 6cqh;
  height: 6cqh;
  border-radius: 1cqh;
  border: 2px solid #fff3;
  background-color: #fff1;
  fill: white;
  color: white;
  font-size: 1.5cqh;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s,
    background-color 0.15s;
  font-family: "Outfit", sans-serif;
  padding: 0;

  &:hover:not(:disabled) {
    border-color: #fff8;
    background-color: #fff2;
  }

  &:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  svg {
    width: 4cqh;
    height: 4cqh;
  }
}

.dungeon-fruit-slot-selected {
  border-color: #fffc;
  background-color: #fff3;
}

.dungeon-fruit-slot-empty {
  border-style: dashed;
}

/* Fruit info panel */
#dungeon-fruit-info {
  display: flex;
  align-items: center;
  gap: 2cqh;
  padding: 1.5cqh 2cqh;
  border: 1px solid #fff2;
  border-radius: 1cqh;
  background-color: #fff1;
  min-height: 8cqh;
  width: 100%;
  max-width: 45cqh;
  box-sizing: border-box;
}

#dungeon-fruit-info-icon {
  width: 6cqh;
  height: 6cqh;
  flex-shrink: 0;
  fill: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #5080ff;
  border-radius: 1cqh;
  background-color: #fff1;

  svg {
    width: 4.5cqh;
    height: 4.5cqh;
  }
}

#dungeon-fruit-info-text {
  font-size: 2cqh;
  line-height: 1.4;
  color: #fffc;
}

#dungeon-fruit-menu-footer {
  display: flex;
  gap: 2cqh;
}

/* Modifier panel footer */

/* === HEATMAP (kept from original) === */

#heatmap-header {
  height: 10%;
  width: 100%;
  max-width: 75vh;
  padding-left: 1cqh;
  top: 10%;
  position: fixed;
}

.heatmap-cell {
  text-align: center;
  padding: 2cqh 0.3cqh;
  font-family: "Outfit", sans-serif;
  font-size: 1.4cqh;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 0.3cqh;
}

.heatmap-row-label,
.heatmap-col-label {
  color: #aaa;
  font-family: "Outfit", sans-serif;
  font-size: 1.4cqh;
  font-weight: 700;
  text-align: center;
  padding: 0.3cqh;
}

.heatmap-row-label {
  padding-right: 1cqh;
}

.heatmap-col-label {
  padding-top: 0.8cqh;
}

#heatmap-percentage-header {
  font-family: "Outfit", sans-serif;
  font-size: 5cqh;
  font-weight: 700;
  flex-shrink: 0;
  width: 100%;
  padding-bottom: 1cqh;
}

/* Heatmap legend */
#heatmap-legend-container {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 2cqh 0;
}

#heatmap-legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.5cqh;
  padding: 1.5cqh 3cqh;
}

#heatmap-legend-bar {
  display: flex;
  align-items: center;
}

.heatmap-legend-swatch {
  width: 4cqh;
  height: 3cqh;
  display: inline-block;
}

.heatmap-legend-line {
  width: 4cqh;
  height: 2px;
  background: white;
}

#heatmap-legend-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #aaa;
  font-size: 1.5cqh;
  margin-top: 0.5cqh;
}

/* Fruit summary tile — shared style for the main-menu tile and the modifier
   panel tile. Both share state (selectedDungeonFruit) and both open the
   same #dungeon-fruit-menu chooser. */
.dungeon-fruit-summary {
  display: inline-flex;
  align-items: center;
  gap: 1cqh;
  padding: 0.8cqh 1.5cqh;
  border: 1px solid #fff3;
  border-radius: 1cqh;
  cursor: pointer;
  font-size: 1.8cqh;
}

.dungeon-fruit-summary-label {
  font-size: 2.2cqh;
  opacity: 0.7;
}

.dungeon-fruit-summary:hover {
  background: #fff1;
}

.dungeon-fruit-icon {
  width: 5cqh;
  height: 5cqh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dungeon-fruit-icon svg {
  width: 3cqh;
  height: 3cqh;
  fill: white;
}

.dungeon-fruit-info-inline {
  display: flex;
  flex-direction: column;
  font-size: 1.6cqh;
}

.dungeon-fruit-powerup-label {
  font-size: 1.3cqh;
  opacity: 0.7;
}

/* Upgrades sub-menu — full-cover overlay with the same background as the
   dungeon menu so it visually replaces (not layers on top of) the menu
   beneath. Tops the dungeon-menu z-index (25) plus the footer wrapper. */
/* AP Section (inline in the element panel, below the ability list) */
#dungeon-ap-section {
  width: 100%;
  max-width: 45cqh;
  margin: 0 auto;
}

#dungeon-ap-header {
  display: flex;
  align-items: center;
  gap: 1cqh;
  width: 100%;
}

#dungeon-element-amount {
  margin-left: auto;
}

#dungeon-element-amount {
  display: flex;
  align-items: center;
  gap: 0.5cqh;
  font-size: 2cqh;
}

#dungeon-element-amount img {
  height: 2.5cqh;
  width: 2.5cqh;
}

#dungeon-buy-ap-button {
  font-size: 1.6cqh;
  padding: 0.5cqh 1.5cqh;
  display: flex;
  align-items: center;
  gap: 0.5cqh;
}

[data-element="earth"] #dungeon-buy-ap-button { background-color: var(--earth-color); box-shadow: 0 0.5cqh 0 0 var(--earth-color-shadow); }
[data-element="air"] #dungeon-buy-ap-button { background-color: var(--air-color); box-shadow: 0 0.5cqh 0 0 var(--air-color-shadow); }
[data-element="water"] #dungeon-buy-ap-button { background-color: var(--water-color); box-shadow: 0 0.5cqh 0 0 var(--water-color-shadow); }
[data-element="fire"] #dungeon-buy-ap-button { background-color: var(--fire-color); box-shadow: 0 0.5cqh 0 0 var(--fire-color-shadow); }

.dungeon-buy-ap-cost {
  margin-left: 1.5cqh;
  display: inline-flex;
  align-items: center;
  gap: 0.3cqh;
}

#dungeon-buy-ap-button img {
  height: 2cqh;
  width: 2cqh;
  vertical-align: middle;
}

#dungeon-ap-available {
  display: flex;
  align-items: center;
  gap: 0.5cqh;
  font-size: 2cqh;
  font-weight: bold;
}

.dungeon-ap-circle {
  width: 3cqh;
  height: 3cqh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dungeon-ap-circle img {
  width: 2cqh;
  height: 2cqh;
  filter: brightness(0);
}

#dungeon-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1cqh;
  margin: 2.5cqh 0;
}

.dungeon-upgrade-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqh;
  border: 2px solid #fff4;
  border-radius: 1cqh;
  background: #fff1;
  padding: 0.8cqh 0.5cqh;
  aspect-ratio: 1;
}

[data-element="earth"] .dungeon-upgrade-button { border-color: var(--earth-color); }
[data-element="air"] .dungeon-upgrade-button { border-color: var(--air-color); }
[data-element="water"] .dungeon-upgrade-button { border-color: var(--water-color); }
[data-element="fire"] .dungeon-upgrade-button { border-color: var(--fire-color); }

.dungeon-upgrade-icon {
  height: 3cqh;
  width: 3cqh;
  background: #fff2;
  border-radius: 0.5cqh;
}

.dungeon-upgrade-name {
  font-size: 1.4cqh;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dungeon-upgrade-bonus {
  font-size: 1.5cqh;
  font-weight: bold;
}

.dungeon-upgrade-arrows {
  display: flex;
  align-items: center;
  gap: 0.5cqh;
}

.dungeon-upgrade-arrow {
  width: 3cqh;
  height: 2.5cqh;
  font-size: 1.6cqh;
  border: 1px solid #fff3;
  border-radius: 0.3cqh;
  background: #fff1;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dungeon-upgrade-arrow:hover {
  background: #fff3;
}

.dungeon-upgrade-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.dungeon-upgrade-level {
  font-size: 1.4cqh;
  min-width: 2cqh;
  text-align: center;
}

.dungeon-upgrade-total-ap {
  font-size: 1.2cqh;
  visibility: hidden;
}

.dungeon-upgrade-button-locked {
  opacity: 0.5;
  background: #fff1;
  border-color: #fff3;
  gap: 0.6cqh;
}

[data-element="earth"] .dungeon-upgrade-button-locked,
[data-element="air"] .dungeon-upgrade-button-locked,
[data-element="water"] .dungeon-upgrade-button-locked,
[data-element="fire"] .dungeon-upgrade-button-locked {
  border-color: #fff3;
}

.dungeon-upgrade-lock-icon {
  width: 3cqh;
  height: 3cqh;
  fill: white;
}

.dungeon-upgrade-locked-text {
  font-size: 1.2cqh;
  text-align: center;
  color: #ccc;
  padding: 0 0.5cqh;
}

/* Sub-menu back-arrows (element panel / fruit) */
#dungeon-modifier-back,
#dungeon-fruit-back {
  position: absolute;
  bottom: 3cqh;
  left: 3cqh;
  fill: white;
  cursor: pointer;
}

#dungeon-modifier-back svg,
#dungeon-fruit-back svg {
  height: 6cqh;
}

#dungeon-modifier-back:hover,
#dungeon-fruit-back:hover {
  opacity: 0.7;
}

/* === ELEMENT PANEL === */
/* Full-cover overlay (matches fruit/upgrades sub-menu pattern) so it
   replaces the main dungeon menu instead of layering on top of it. */
#dungeon-modifier-panel {
  position: absolute;
  inset: 0;
  background-color: #0d1628;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqh;
  overflow-y: auto;
  padding: 6cqh 5% 2cqh;
}

#dungeon-modifier-element-name {
  font-size: 5cqh;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.5cqh;
}

/* --- Ability list: 2-col icon grid (left) + detail pane (right) --- */
#dungeon-ability-list {
  width: 100%;
  max-width: 45cqh;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2cqh;
  padding-bottom: 2cqh;
  border-bottom: 2px solid #fff8;
}

/* 7 abilities in a 2-col × 4-row grid (last cell empty). */
#dungeon-ability-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 7cqh);
  grid-auto-rows: 7cqh;
  gap: 1cqh;
}

.dungeon-ability-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff2;
  border-radius: 1cqh;
  background-color: #fff1;
  cursor: pointer;
  padding: 0;
}

/* Selected cell: bright ring, tinted per element when the ability is active. */
.dungeon-ability-cell.dungeon-ability-selected {
  border-color: #fff;
}
[data-element="earth"] .dungeon-ability-cell.dungeon-ability-active.dungeon-ability-selected { border-color: var(--earth-color); }
[data-element="air"] .dungeon-ability-cell.dungeon-ability-active.dungeon-ability-selected { border-color: var(--air-color); }
[data-element="water"] .dungeon-ability-cell.dungeon-ability-active.dungeon-ability-selected { border-color: var(--water-color); }
[data-element="fire"] .dungeon-ability-cell.dungeon-ability-active.dungeon-ability-selected { border-color: var(--fire-color); }

/* Locked cells reveal only the lock; pending are slightly muted. */
.dungeon-ability-cell.dungeon-ability-locked { opacity: 0.5; }
.dungeon-ability-cell.dungeon-ability-pending { opacity: 0.85; }

/* Cropped atlas sprite (peachesIconSpriteHTML). Height drives size; width
   follows from the frame aspect-ratio. */
.dungeon-ability-sprite {
  flex: 0 0 auto;
  display: inline-block;
  height: 5cqh;
  image-rendering: pixelated;
}

/* Locked dims the underlying ability art so it doesn't read as active. */
.dungeon-ability-locked .dungeon-ability-sprite {
  filter: grayscale(1) brightness(0.7);
}

/* Lock badge overlaid on the ability icon for locked cells. */
.dungeon-ability-lock {
  position: absolute;
  width: 3cqh;
  height: 3cqh;
  fill: #fff;
  opacity: 0.9;
}

/* Detail pane: name + description of the selected ability. */
#dungeon-ability-detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6cqh;
  min-width: 0;
  padding-left: 2cqh;
  border-left: 2px solid #fff8;
}

#dungeon-ability-detail.dungeon-ability-locked {
  opacity: 0.6;
}

.dungeon-ability-detail-name {
  font-size: 3cqh;
  font-weight: 700;
}

.dungeon-ability-detail-desc {
  font-size: 2cqh;
  color: #fffb;
}

/* Hidden pending description ("???") reads as muted. */
.dungeon-ability-pending .dungeon-ability-detail-desc {
  color: #fff7;
  letter-spacing: 0.4cqh;
}

/* --- Inline upgrades section --- */
#dungeon-upgrades-section {
  width: 100%;
  max-width: 45cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqh;
  margin-top: 1cqh;
}

#dungeon-upgrades-title {
  font-size: 3cqh;
  font-weight: 700;
}

.dialog-element-icon {
  display: inline-block;
  height: 4cqh;
  vertical-align: text-bottom;
  margin-right: 1cqh;
  fill: white;
}

.dialog-element-list {
  display: inline-block;
  margin: 1.5cqh 0 0;
  padding-left: 5cqh;
  list-style: none;
  text-align: left;
}

.dialog-element-list li {
  margin: 0.5cqh 0;
}