/* ==========================================================================
   Math Cave screens. Uses the shared tokens from style.css / themes.css.
   The play screen is one viewport tall: the page never scrolls, only the
   stage (shop lists and the like) can.
   ========================================================================== */

.menu-tile-gold .menu-tile-icon {
  background: var(--gold-soft);
  color: var(--gold);
}

.cave-hub-screen,
.cave-character-screen,
.bestiary-screen,
.achievements-screen {
  gap: 12px;
}

/* --------------------------------- play screen -------------------------------- */

.cave-screen {
  /* One viewport tall. .app pads 12px on top and 40px below, so lean 28px into the bottom padding. */
  height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
  min-height: 0;
  margin-bottom: -28px;
  gap: 6px;
  overflow: hidden;
}

.cave-bar {
  flex: none;
  display: grid;
  gap: 4px;
}

.cave-bar-row {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.cave-bar .icon-btn {
  border: 1px solid var(--line);
  background: rgba(10, 22, 48, 0.4);
}

.bar-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bar-stat-text {
  overflow: hidden;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-stat .progress {
  height: 8px;
}

.cave-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.cave-xp {
  flex: 1 1 96px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 24px;
}

.cave-chips .pill {
  min-height: 24px;
  padding: 2px 10px;
  font-size: 0.75rem;
  white-space: normal;
}

.progress-hp .progress-fill {
  background: linear-gradient(90deg, #3fae5a, var(--success));
}

.progress-danger .progress-fill {
  background: linear-gradient(90deg, var(--danger-strong), var(--danger));
}

.progress-xp .progress-fill {
  background: linear-gradient(90deg, var(--warning), var(--gold));
}

.progress-mana .progress-fill {
  background: linear-gradient(90deg, var(--primary-strong), #78b6ff);
}

.cave-log-card,
.cave-room,
.cave-teleport,
.cave-menu,
.cave-gate,
.cave-history {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* The latest result, one tap from the full history. */
.cave-log-card {
  position: relative;
  flex: none;
  display: block;
  width: 100%;
  min-height: 0;
  padding-right: 30px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cave-log-card.cave-log-good {
  border-color: rgba(126, 211, 33, 0.6);
}

.cave-log-card.cave-log-bad {
  border-color: rgba(255, 92, 116, 0.65);
}

.cave-log {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 2.7em;
  list-style: none;
  font-size: 0.84rem;
  line-height: 1.35;
}

.cave-state-battle .cave-log {
  min-height: 4.05em;
}

.cave-log li {
  color: var(--text-muted);
}

.cave-log-latest {
  color: var(--text);
  font-weight: 750;
}

.cave-log-more {
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.cave-history {
  display: grid;
  gap: 6px;
}

.cave-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cave-history-head .cave-section-title {
  margin: 0;
}

.cave-history-list {
  display: grid;
  gap: 6px;
  list-style: none;
  font-size: 0.88rem;
}

.cave-history-list li {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
}

.cave-history-list li:first-child {
  color: var(--text);
  font-weight: 700;
}

.cave-section-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
}

.cave-stage {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: auto;
}

.cave-controls {
  flex: none;
  display: grid;
  gap: 8px;
}

.cave-controls:empty {
  display: none;
}

/* ----------------------------------- the map ---------------------------------- */

.cave-map-row {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
}

.cave-map-wrap {
  flex: 1 1 0;
  display: grid;
  place-items: start center;
  min-width: 0;
  max-height: 100%;
  aspect-ratio: 1;
  container-type: size;
}

.cave-map {
  display: grid;
  grid-template-columns: repeat(var(--cols, 15), minmax(0, 1fr));
  gap: 1px;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #070d1d;
}

.tile {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  border-radius: 14%;
}

.tile-wall {
  background:
    linear-gradient(90deg, transparent 49%, rgba(0, 0, 0, 0.35) 50%, transparent 52%) 0 0 / 50% 50%,
    linear-gradient(0deg, transparent 47%, rgba(0, 0, 0, 0.4) 50%, transparent 53%) 0 0 / 100% 50%,
    #3a4462;
}

.tile-floor {
  background: #1b2442;
}

.tile-special {
  background: #27325a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.tile[data-tile='@'] {
  background: #22305e;
  box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(255, 211, 110, 0.55);
  z-index: 1;
}

.tile-art {
  display: block;
  width: 88%;
  height: 88%;
}

.tile-art svg,
.portrait svg,
.look-art svg,
.dpad-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cave-scene,
.cave-region {
  flex: none;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cave-region {
  color: var(--text);
}

/* ---------------------------------- controls ---------------------------------- */

.cave-controls:has(.dpad) {
  justify-items: center;
}

/* Items, up, Spells over left, down, right. */
.dpad {
  flex: none;
  align-self: flex-start;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-areas:
    'm t h'
    'i n p'
    'w s e';
  gap: 6px;
}

.dpad-m {
  grid-area: m;
}

.dpad-t {
  grid-area: t;
}

.dpad-h {
  grid-area: h;
}

.dpad-i {
  grid-area: i;
}

.dpad-n {
  grid-area: n;
}

.dpad-p {
  grid-area: p;
}

.dpad-e {
  grid-area: e;
}

.dpad-s {
  grid-area: s;
}

.dpad-w {
  grid-area: w;
}

.dpad-btn {
  position: relative;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 850;
}

.dpad-art {
  display: block;
  width: 26px;
  height: 26px;
}

.dpad-btn .answer-key {
  top: 3px;
  left: 5px;
}

/* ----------------------------------- battle ----------------------------------- */

.cave-battle,
.cave-gate {
  display: grid;
  align-content: start;
  gap: 6px;
}

.cave-gate {
  padding: 8px 12px;
}

.battle-banner {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  line-height: 1.2;
  text-align: center;
  text-indent: 0.3em;
}

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

.monster-card {
  min-width: 0;
}

.fighter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.fighter-info {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fighter .progress {
  width: 100%;
  height: 8px;
}

.portrait {
  display: block;
  width: clamp(36px, 7dvh, 56px);
  aspect-ratio: 1;
  animation: fighter-bob 2.4s ease-in-out infinite;
}

.portrait-monster {
  animation-delay: -1.2s;
}

@keyframes fighter-bob {
  50% {
    transform: translateY(-3px);
  }
}

.fighter-name {
  margin: 0;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fighter-sub {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fighter-hp {
  margin: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.battle-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.battle-prompt-row .btn {
  min-height: 44px;
  padding: 6px 14px;
}

.battle-prompt {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 750;
  text-align: center;
}

.battle-prompt-row .battle-prompt {
  text-align: left;
}

.cave-screen .equation {
  padding: 4px 12px;
  font-size: clamp(1.9rem, 7dvh, 2.8rem);
}

.cave-screen .answers {
  gap: 8px;
}

.cave-screen .answer-btn {
  min-height: 52px;
}

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

.command-btn {
  position: relative;
  min-height: 52px;
  font-size: 1.05rem;
}

.command-attack {
  border-color: var(--gold);
}

.gate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gate-head .btn {
  min-height: 44px;
  padding: 6px 14px;
}

.cave-gate .cave-section-title {
  margin: 0;
}

.gate-progress {
  justify-self: start;
}

.cave-gate-note {
  margin: 0;
  font-size: 0.82rem;
}

/* ---------------------------- rows, rooms and menus ---------------------------- */

.cave-room p,
.cave-teleport p {
  margin: 0 0 8px;
}

.cave-rows {
  display: grid;
  gap: 8px;
  list-style: none;
}

.cave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(10, 22, 48, 0.35);
}

.cave-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.cave-row-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.cave-row .btn {
  min-height: 44px;
  padding: 8px 16px;
}

.cave-summary {
  display: grid;
  gap: 6px;
  list-style: none;
  font-weight: 650;
}

.cave-spend {
  color: #b6f56a;
}

.cave-links {
  display: grid;
  gap: 10px;
}

.bestiary-list,
.achievement-list {
  display: grid;
  gap: 8px;
  list-style: none;
}

.bestiary-entry,
.achievement {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(10, 22, 48, 0.35);
}

.achievement {
  justify-items: start;
}

.achievement-done {
  border-color: rgba(126, 211, 33, 0.35);
}

.achievement-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
}

@media (min-width: 560px) {
  .cave-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Landscape phones: the log and controls on the left, the stage on the right. */
@media (max-height: 560px) and (orientation: landscape) {
  .cave-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      'bar bar'
      'log stage'
      'controls stage';
    column-gap: 12px;
  }

  .cave-bar {
    grid-area: bar;
  }

  .cave-log-card {
    grid-area: log;
  }

  .cave-stage {
    grid-area: stage;
  }

  .cave-controls {
    grid-area: controls;
    align-self: start;
  }

  .portrait {
    width: clamp(32px, 12dvh, 52px);
  }
}

@media (max-height: 560px) {
  .cave-screen .answer-btn,
  .command-btn {
    min-height: 48px;
  }
}

/* ------------------------------------ looks ------------------------------------ */

.look-title {
  margin: 8px 0 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 750;
}

.look-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.look-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 4px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(10, 22, 48, 0.35);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.look-btn.is-selected {
  border-color: var(--gold);
  background: rgba(255, 211, 110, 0.12);
}

.look-art {
  display: block;
  width: 48px;
  height: 48px;
}

.look-token {
  padding: 4px;
  border-radius: 10px;
  background: #22305e;
}

.look-name {
  font-size: 0.8rem;
  font-weight: 700;
}

.cave-key {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  list-style: none;
}

.cave-key-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 650;
}

.cave-key-item .tile {
  flex: none;
  width: 32px;
  height: 32px;
}

.dpad-h .icon {
  width: 24px;
  height: 24px;
}

/* ---------------------------------- full map ---------------------------------- */

.map-modal {
  display: grid;
  gap: 8px;
}

.map-here {
  margin: 0;
  font-weight: 700;
}

.map-scroll {
  max-height: min(48dvh, 420px);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #070d1d;
}

.map-canvas {
  display: block;
  max-width: none;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  list-style: none;
  font-size: 0.78rem;
}

.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.map-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.map-places {
  font-size: 0.82rem;
}

.map-places ul {
  display: grid;
  gap: 2px;
  max-height: 120px;
  margin-top: 6px;
  overflow: auto;
  list-style: none;
  color: var(--text-muted);
}

.room-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.room-head .cave-section-title {
  margin: 0;
}

.room-art {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}

.room-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cave-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}

.cave-quick-actions .btn {
  min-height: 48px;
  padding: 8px 14px;
}

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

.room-head .btn {
  min-height: 44px;
  margin-left: auto;
  padding: 6px 14px;
}

.dpad-btn {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}