:root {
  --bg: #04060d;
  --bg-trans: rgba(4, 6, 13, 0.85);
  --bg-panel: rgba(7, 12, 24, 0.82);
  --bg-card: rgba(12, 19, 36, 0.7);
  --fg: #dfe9ff;
  --dim: #6f7ea6;
  --cyan: #3ee7ff;
  --cyan-glow: rgba(62, 231, 255, 0.4);
  --magenta: #ff4fd8;
  --magenta-glow: rgba(255, 79, 216, 0.4);
  --lime: #b8ff3c;
  --lime-glow: rgba(184, 255, 60, 0.4);
  --orange: #ffb23c;
  --red: #ff5a5a;
  --red-glow: rgba(255, 90, 90, 0.4);
  --gold: #ffd700;
  --gold-glow: rgba(255, 215, 0, 0.5);
  --purple: #bf77ff;
  --border-cyan: rgba(62, 231, 255, 0.3);
  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Layout container ---- */
#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* Dynamic viewport height: not hidden behind mobile browser toolbars */
  height: 100dvh;
  /* The in-game chrome is a grid of real rows and the map is the one flexible cell
     (#237). The chrome used to be absolutely positioned boxes with hard-coded
     offsets drawn over a full-size canvas, so nothing could reflow. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "top     side"
    "status  side"
    "map     side"
    "log     side"
    "arsenal side"
    "actions side";
}

/* The corner mini-map (#486): placed over the map's top right corner by
   Game.updateCornerMinimap while the side panel (and its minimap) is a drawer */
.corner-minimap {
  grid-area: map;
  position: fixed;
  z-index: 20;
  width: 132px;
  height: 88px;
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 6px;
  background: rgba(2, 4, 9, 0.8);
  box-shadow: 0 0 10px rgba(62, 231, 255, 0.18);
  cursor: pointer;
  touch-action: manipulation;
}
.corner-minimap.hidden {
  display: none;
}

/* Arrows toward attackers off-screen or unseen (#1064): the map draws each arrow; these
   are their touch targets and screen-reader buttons, centred on them */
.threat-arrows {
  grid-area: map;
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
}
.threat-arrow {
  position: fixed;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.threat-arrow:focus-visible {
  outline: 2px solid rgba(255, 51, 85, 0.9);
  outline-offset: 2px;
}

#game-canvas {
  grid-area: map;
  /* A canvas is a replaced element with an aspect ratio (300x150 until resize()
     sets it). Left to its automatic minimum size it would be twice as wide as it
     is tall, which pushed the side panel off-screen (#236). Zero minimums and a
     100% box make it exactly the map cell. */
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #020307;
  cursor: crosshair;
}

/* ---- Top Header Bar ---- */
#top-bar {
  grid-area: top;
  margin: 10px 14px 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-cyan);
  box-shadow: 0 0 15px rgba(62, 231, 255, 0.12), inset 0 0 20px rgba(62, 231, 255, 0.04);
  backdrop-filter: blur(6px);
  z-index: 10;
  border-radius: 4px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.brand-link:hover .logo-text {
  text-shadow: 0 0 10px #fff, 0 0 20px var(--cyan), 0 0 35px var(--cyan);
}

.brand-link:hover .sub-text {
  color: #fff;
  text-shadow: 0 0 10px var(--magenta);
}

.logo-text {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--cyan);
}

.sub-text {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--magenta);
  text-shadow: 0 0 8px var(--magenta-glow);
}

.floor-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(62, 231, 255, 0.08);
  padding: 4px 12px;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  box-shadow: 0 0 8px var(--cyan-glow);
}

.floor-badge .label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dim);
}

.floor-badge .value {
  font-size: 15px;
  font-weight: 800;
  color: var(--cyan);
}

/* Depth badge plus the Amulet badge shown from pickup to escape (#83) */
.hud-status-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hit Dice and rests under the HP bar (#395) */
.hud-rests {
  font-size: 12px;
  color: var(--dim, #8899aa);
  letter-spacing: 0.05em;
}

/* Death saves (#767): successes and failures while down, failures held while up */
.hud-death {
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim, #8899aa);
}
.hud-death .death-lbl { color: #ff3366; font-weight: 700; }
.hud-death .death-set { display: inline-flex; gap: 3px; }
.hud-death .death-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  box-sizing: border-box;
}
.hud-death .death-pip.ok { color: #32e078; }
.hud-death .death-pip.fail { color: #ff3366; }
.hud-death .death-pip.on { background: currentColor; }

/* The hotbar on a pad (#545): while RB is held each slot shows the button that uses it */
.hotbar-pad { display: none; }
.hotbar.pad-chord .hotbar-pad {
  display: block;
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold, #ffd34d);
}
.hotbar.pad-chord .hotbar-slot { outline: 1px dashed var(--gold, #ffd34d); }
/* The effects panel (#706): a row an effect, debuffs first. Fixed row height, so a turn's
   update never shifts the layout. Buffs cyan, debuffs red. */
.effects-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.effect-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(34px, auto);
  align-items: center;
  gap: 6px;
  height: 18px;
  font-size: 12px;
  color: var(--cyan, #00f0ff);
}
.effect-row.debuff { color: var(--red, #ff5a5a); }
.effect-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.effect-tag { font-size: 10px; font-weight: 700; margin-left: 4px; opacity: 0.85; }
.effect-bar { height: 6px; border: 1px solid currentColor; box-sizing: border-box; border-radius: 2px; overflow: hidden; }
.effect-bar > span { display: block; height: 100%; background: currentColor; }
.effect-bar.none { visibility: hidden; }
.effect-left { text-align: right; font-variant-numeric: tabular-nums; }
.effect-yours { text-transform: lowercase; font-weight: 400; }
.inspect-effects { margin: 4px 0; }
/* A monster status icon (#1071) before the effect's name, as on the map */
.effect-name .status-icon { vertical-align: -2px; margin-right: 4px; }
/* On a wide screen the side panel's list takes the place of the top bar's badges (#706) */
@media (min-width: 901px) and (min-height: 501px) {
  #hud-conditions { display: none; }
}

/* A chip for a buff (#707) wears the cyan accent; debuffs stay red */
.condition-badge.buff {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cyan, #00f0ff);
  color: var(--cyan, #00f0ff);
}
.effect-popover {
  position: fixed;
  z-index: 60;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--border-cyan, #00f0ff);
  border-radius: 4px;
  background: var(--bg-panel, #0a0f1e);
  color: var(--text, #e0f7ff);
  font-size: 12px;
  line-height: 1.4;
}
@media (pointer: coarse) {
  .condition-badge { min-height: 40px; min-width: 40px; }
}

/* Breakdown tooltips (#1092): what a number is and the terms that make it */
.ui-tip {
  position: fixed;
  z-index: 70;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid var(--border-cyan, #00f0ff);
  border-radius: 4px;
  background: var(--bg-panel, #0a0f1e);
  color: var(--text, #e0f7ff);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}
.ui-tip-title { font-weight: 700; color: var(--cyan, #00f0ff); letter-spacing: 0.04em; }
.ui-tip-what { margin-top: 2px; color: var(--dim, #8aa0b8); }
.ui-tip-terms { margin-top: 6px; border-top: 1px solid rgba(0, 240, 255, 0.2); padding-top: 4px; }
.ui-tip-term { display: flex; justify-content: space-between; gap: 12px; }
.ui-tip-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-tip-total { border-top: 1px solid rgba(0, 240, 255, 0.2); margin-top: 2px; padding-top: 2px; font-weight: 700; }
.ui-tip-source { color: var(--dim, #8aa0b8); font-size: 11px; }
.ui-tip-note { margin-top: 6px; color: var(--dim, #8aa0b8); font-size: 11px; }
.ui-tip-link { margin-top: 6px; font-size: 11px; }
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: 1px dashed var(--cyan, #00f0ff); outline-offset: 2px; }

/* Conditions on the hero (#389): one small badge each, with the turns left */
.condition-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.condition-badges:empty {
  display: none;
}
.condition-badge {
  font: inherit;
  cursor: pointer;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 90, 90, 0.15);
  border: 1px solid var(--red, #ff5a5a);
  color: var(--red, #ff5a5a);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.amulet-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid var(--gold);
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-glow);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* The key of the floor's locked door, on the belt (#327) */
.amulet-badge.key-badge {
  background: rgba(255, 107, 44, 0.15);
  border-color: #ff6b2c;
  color: #ff6b2c;
  text-shadow: 0 0 10px rgba(255, 107, 44, 0.6);
  box-shadow: 0 0 12px rgba(255, 107, 44, 0.45);
}

.pulse-glow {
  animation: pulse 1.8s ease-in-out infinite alternate;
}

@keyframes pulse {
  0% { opacity: 0.75; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1.015); }
}

.top-controls {
  display: flex;
  gap: 8px;
}

.icon-btn {
  background: rgba(111, 126, 166, 0.15);
  border: 1px solid rgba(111, 126, 166, 0.35);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(62, 231, 255, 0.25);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 10px var(--cyan-glow);
}

.icon-btn.active {
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: 0 0 8px var(--lime-glow);
}

/* ---- Side HUD Panel ---- */
#side-panel {
  grid-area: side;
  width: 350px;
  height: 100%;
  min-height: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-cyan);
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(62, 231, 255, 0.04);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
  overflow-y: auto;
  z-index: 10;
}

.panel-section {
  background: var(--bg-card);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 8px;
  text-shadow: 0 0 6px var(--cyan-glow);
}

/* ---- Vitals Card ---- */
.vitals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.char-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.char-name.clickable {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.char-name.clickable:hover {
  color: var(--cyan);
  border-color: rgba(62, 231, 255, 0.4);
  background: rgba(62, 231, 255, 0.1);
  text-shadow: 0 0 10px var(--cyan);
}

.hunger-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  border-radius: 2px;
}
.hunger-badge.normal {
  color: var(--dim);
  border: 1px solid rgba(111, 126, 166, 0.3);
}
.hunger-badge.hungry {
  color: var(--orange);
  border: 1px solid var(--orange);
  background: rgba(255, 178, 60, 0.12);
  text-shadow: 0 0 6px var(--orange);
}
.hunger-badge.weak {
  color: var(--red);
  border: 1px solid var(--red);
  background: rgba(255, 90, 90, 0.15);
  text-shadow: 0 0 8px var(--red);
  animation: pulseHungerWeak 1.8s ease-in-out infinite alternate;
}
.hunger-badge.faint {
  color: #fff;
  background: var(--red);
  border: 1px solid #fff;
  animation: pulseHungerFaint 1.2s ease-in-out infinite alternate;
}

@keyframes pulseHungerWeak {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 3px rgba(255, 90, 90, 0.2);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 90, 90, 0.7);
  }
}

@keyframes pulseHungerFaint {
  0% {
    opacity: 0.7;
    transform: scale(0.97);
    box-shadow: 0 0 4px rgba(255, 51, 102, 0.4);
  }
  100% {
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 0 14px rgba(255, 51, 102, 0.9), 0 0 6px #fff;
  }
}

.stat-bar-group {
  margin-bottom: 6px;
}

.stat-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.progress-bar-bg {
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-fill {
  height: 100%;
  transition: width 0.25s ease;
}

.hp-bar .progress-fill {
  background: linear-gradient(90deg, #ff3366, #ff6b8b);
  box-shadow: 0 0 8px rgba(255, 51, 102, 0.6);
}

.xp-bar .progress-fill {
  background: linear-gradient(90deg, #4ade80, #b8ff3c);
  box-shadow: 0 0 8px rgba(184, 255, 60, 0.5);
}

/* The load bar (#459): full at carrying capacity, ticks at its thirds, coloured by tier */
.load-bar {
  background-image: linear-gradient(90deg, transparent calc(33.3% - 1px), rgba(255, 255, 255, 0.25) calc(33.3% - 1px), rgba(255, 255, 255, 0.25) 33.3%, transparent 33.3%, transparent calc(66.6% - 1px), rgba(255, 255, 255, 0.25) calc(66.6% - 1px), rgba(255, 255, 255, 0.25) 66.6%, transparent 66.6%);
}
.load-light .progress-fill { background: var(--cyan); }
.load-burdened .progress-fill { background: var(--gold); }
.load-heavy .progress-fill { background: var(--orange); }
.load-over .progress-fill { background: var(--red); }
.load-burdened #hud-load-tier { color: var(--gold); }
.load-heavy #hud-load-tier { color: var(--orange); }
.load-over #hud-load-tier { color: var(--red); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0;
  text-align: center;
}

.stat-cell {
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 2px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-lbl {
  display: block;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--dim);
}

.stat-val {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.stat-val.gold {
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold-glow);
}

/* The game clock (#1119): the glyph takes the colour of the part of the day */
.stat-val.clock-dawn > svg,
.stat-val.clock-dusk > svg { color: var(--orange); }
.stat-val.clock-day > svg { color: var(--gold); }
.stat-val.clock-night > svg { color: var(--cyan); }
#hud-clock { white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock-link { cursor: pointer; }

.equipment-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.eq-slot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.eq-type {
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.eq-name {
  color: var(--cyan);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ---- Minimap ---- */
.minimap-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.minimap-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.minimap-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #020409;
  border-radius: 3px;
  padding: 4px;
  border: 1px solid rgba(62, 231, 255, 0.15);
  transition: all 0.2s ease;
}

.minimap-wrapper.clickable {
  cursor: pointer;
}

.minimap-wrapper.clickable:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
  background: rgba(62, 231, 255, 0.05);
}

/* The layout size is fixed here; the script scales the backing store to the
   screen's pixel ratio (#243) */
#minimap-canvas {
  display: block;
  width: 180px;
  height: 120px;
  image-rendering: pixelated;
}

.minimap-coords {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--dim);
}

/* ---- Inspector Card ---- */
.inspector-content {
  font-size: 11px;
  line-height: 1.4;
  min-height: 48px;
}

.inspector-prompt {
  color: var(--dim);
  font-size: 10px;
  font-style: italic;
  padding: 8px 0;
  text-align: center;
}

.inspect-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.inspect-glyph {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  box-shadow: 0 0 6px currentColor;
}

.inspect-name {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}

.inspect-danger {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.danger-low { background: rgba(184, 255, 60, 0.2); color: var(--lime); border: 1px solid var(--lime); }
.danger-med { background: rgba(255, 178, 60, 0.2); color: var(--orange); border: 1px solid var(--orange); }
.danger-high { background: rgba(255, 90, 90, 0.25); color: var(--red); border: 1px solid var(--red); }
.danger-unknown { background: rgba(100, 130, 160, 0.15); color: var(--dim); border: 1px solid rgba(100, 130, 160, 0.4); }
.danger-fatal {
  background: #ff3366;
  color: #fff;
  animation: pulseFatalDanger 1.2s ease-in-out infinite alternate;
}

@keyframes pulseFatalDanger {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 4px rgba(255, 51, 102, 0.4);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 51, 102, 0.9);
  }
}

.inspect-details {
  font-size: 10px;
  color: var(--dim);
  margin-top: 4px;
}

.inspect-power {
  color: var(--magenta);
  font-weight: 600;
}

.inspect-dist {
  font-size: 9px;
  color: var(--dim);
  margin-left: auto;
}
.inspect-badge-asleep {
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
}
.inspect-badge-hostile {
  background: rgba(255, 90, 90, 0.2);
  color: var(--red);
  border: 1px solid var(--red);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
}
.inspect-badge-memory {
  background: rgba(111, 126, 166, 0.2);
  color: var(--dim);
  border: 1px solid var(--dim);
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
}
.inspect-badge-detected {
  background: rgba(255, 79, 216, 0.18);
  color: var(--magenta);
  border: 1px solid rgba(255, 79, 216, 0.6);
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
}
.inspect-badge-arcane {
  background: rgba(142, 68, 245, 0.22);
  color: #ba82ff;
  border: 1px solid rgba(186, 130, 255, 0.65);
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  text-shadow: 0 0 6px rgba(186, 130, 255, 0.4);
}
.inspect-hp-wrap {
  margin: 6px 0;
}
.inspect-hp-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}
.inspect-hp-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.inspect-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff3366, #ff7b90);
  box-shadow: 0 0 6px rgba(255, 51, 102, 0.5);
  transition: width 0.2s ease;
}
.inspect-threat-alert {
  background: rgba(255, 79, 216, 0.1);
  border: 1px solid rgba(255, 79, 216, 0.35);
  color: var(--magenta);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 3px;
  margin-top: 6px;
}
.inspect-combat-forecast {
  background: rgba(62, 231, 255, 0.08);
  border: 1px solid rgba(62, 231, 255, 0.25);
  padding: 6px 8px;
  border-radius: 3px;
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}
.forecast-val {
  font-weight: 700;
  color: #fff;
}
.forecast-lbl {
  color: var(--dim);
  font-size: 9px;
}

/* ---- Message Chronicle Log ---- */
.message-log-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

.message-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.message-log::-webkit-scrollbar {
  width: 4px;
}
.message-log::-webkit-scrollbar-thumb {
  background: var(--border-cyan);
  border-radius: 2px;
}

.log-entry {
  padding: 2px 4px;
  border-radius: 2px;
  word-break: break-word;
  animation: logFade 0.2s ease-out;
}
@keyframes logFade {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}

.log-entry.sys { color: var(--dim); }
.log-entry.hit-player { color: var(--red); font-weight: 600; }
.log-entry.hit-monster { color: var(--lime); }
/* A roll's detail lines under its line (#702): indented, dim, the dice in mono */
.log-entry.roll-detail { color: var(--text-dim, #8aa); padding-left: 1.2em; font-family: var(--font-mono, monospace); font-size: 0.92em; white-space: pre-wrap; }
.chronicle-row.roll-detail .chronicle-text { color: #8aa; padding-left: 1.2em; font-family: monospace; }
.log-entry.kill { color: var(--cyan); font-weight: 700; text-shadow: 0 0 6px var(--cyan-glow); }
.log-entry.item { color: var(--gold); }
.log-entry.warn { color: var(--orange); font-weight: 600; }
.log-entry.level-up { color: #fff; background: rgba(62, 231, 255, 0.2); border-left: 2px solid var(--cyan); }
.log-entry.magic { color: var(--purple); }
.log-entry.crit { color: var(--magenta); font-weight: 700; text-shadow: 0 0 6px var(--magenta-glow); }

/* Log / chronicle row icon (#77), between the turn stamp and the text */
.log-icon {
  display: inline-block;
  margin-right: 1px;
  vertical-align: middle;
  line-height: 1;
}

.log-turn {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 4px;
  user-select: none;
  opacity: 0.85;
}

.chronicle-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ---- Modals ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.75);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease-out;
}

.modal-overlay.hidden { display: none; }
.hidden { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 35px var(--cyan-glow), inset 0 0 30px rgba(62, 231, 255, 0.05);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inventory-modal {
  width: min(1180px, 96vw);
  height: min(760px, 92vh);
}

.codex-modal {
  width: min(880px, 94vw);
  height: min(640px, 90vh);
}

.help-modal {
  width: min(720px, 92vw);
  max-height: 85vh;
}

.sheet-modal {
  /* The paper sheet (#1094): three columns */
  width: min(1180px, 96vw);
  height: min(900px, 94vh);
}

.modal-header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-subtitle {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--cyan);
  opacity: 0.85;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-cyan);
  background: rgba(62, 231, 255, 0.05);
}

.modal-header h2 {
  font-size: 16px;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 10px var(--cyan);
}

.modal-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--red); }

/* Inventory UI */
.inv-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  overflow-x: auto;
}

.filter-tab {
  background: transparent;
  border: 1px solid rgba(111, 126, 166, 0.3);
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.filter-tab:hover {
  border-color: var(--cyan);
  color: #fff;
}
.filter-tab.active {
  background: rgba(62, 231, 255, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}

.inv-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* The pack's own tools (#459): beside the filter tabs, the purse, the loadout in use and
   small icon buttons; their words are tooltips and accessible names */
/* The tabs scroll on their own, so the tools beside them stay in view */
.inv-tabs {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}
.inv-bar-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.inv-purse, .inv-loadouts, .inv-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
}
.inv-purse .purse-coin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 6px;
  border-left: 2px solid currentColor;
}
.inv-purse .coin-pp { color: #e8f4ff; }
.inv-purse .coin-gp { color: var(--gold); }
.inv-purse .coin-ep { color: #b8ff3c; }
.inv-purse .coin-sp { color: var(--cyan); }
.inv-purse .coin-cp { color: var(--orange); }
.inv-loadouts .loadout-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cyan);
  font-family: var(--font-display);
  padding-right: 2px;
}
.inv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(62, 231, 255, 0.08);
  border: 1px solid rgba(62, 231, 255, 0.35);
  border-radius: 4px;
  color: var(--cyan);
  cursor: pointer;
}
.inv-icon-btn:hover, .inv-icon-btn:focus-visible { background: rgba(62, 231, 255, 0.2); border-color: var(--cyan); }
.inv-icon-btn svg { width: 16px; height: 16px; }
.inv-purse .inv-icon-btn { width: 22px; height: 22px; border-color: transparent; background: none; color: inherit; }
.inv-purse .inv-icon-btn svg { width: 13px; height: 13px; }
@media (pointer: coarse) {
  .inv-icon-btn { width: 44px; height: 44px; }
  .inv-purse .inv-icon-btn { width: 44px; height: 44px; }
}

/* The paper doll (#459 slice 7): the worn slots as a figure of icons, beside the pack */
.paper-doll {
  order: -1;
  flex: 0 0 186px;
  padding: 10px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
}
.doll-figure {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-areas:
    "neck head cloak"
    "main body off"
    "ringl hands ringr"
    "quiver belt back"
    "slung boots .";
  gap: 6px;
  justify-content: center;
}
.doll-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 10, 25, 0.5);
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  overflow: hidden;
}
.doll-slot:hover, .doll-slot:focus-visible { border-color: var(--cyan); }
.doll-slot.empty { border-style: dashed; }
.doll-slot.filled { border-color: rgba(62, 231, 255, 0.45); background: rgba(62, 231, 255, 0.06); }
.doll-slot .doll-icon { width: 30px; height: 30px; }
.doll-slot .doll-label { color: var(--dim); line-height: 1; }
.doll-slot .doll-note { position: absolute; top: 2px; right: 2px; color: var(--cyan); }
.doll-slot .doll-note svg { width: 11px; height: 11px; }
.doll-slot .doll-count { position: absolute; top: 1px; left: 1px; padding: 0 2px; border-radius: 3px; background: rgba(0, 8, 20, 0.85); color: var(--gold); font-size: 12px; line-height: 1.2; }
.crumb-doll { display: none !important; }
@media (max-width: 720px) {
  .crumb-doll { display: inline-flex !important; }
  .paper-doll { display: none; }
  .inv-body.doll-open { flex-direction: column; }
  .inv-body.doll-open .paper-doll { display: block; flex: 0 0 auto; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .inventory-modal .inv-filter-bar { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
  .inv-tabs { flex-basis: 100%; }
  .inv-bar-tools { flex-basis: 100%; flex-wrap: wrap; justify-content: space-between; gap: 6px 8px; margin-left: 0; }
}

/* The pack's grid (#459 slice 6): a cell a thing, whatever its size, as many a row as fit */
/* The tab strip (#856): as many tabs as kinds carried; on a narrow screen it scrolls sideways */
.inv-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.inv-tabs .filter-tab { flex: 0 0 auto; }

.inventory-list.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 6px;
}
.pack-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 76px;
  padding: 16px 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 10, 25, 0.5);
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
}
.pack-cell.selected { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.pack-cell.held { border-style: dashed; border-color: var(--gold); }
.pack-cell.pack-bag { background: rgba(255, 178, 60, 0.08); }
.pack-cell .cell-letter { position: absolute; top: 2px; left: 5px; color: var(--dim); }
.pack-cell .cell-canvas { width: 28px; height: 28px; }
.pack-cell .cell-glyph { font-size: 20px; line-height: 1.2; }
.pack-cell .cell-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-cell .cell-count { position: absolute; bottom: 4px; right: 5px; padding: 0 3px; border-radius: 3px; background: rgba(0, 8, 20, 0.85); color: var(--gold); }
.pack-cell .cell-tag { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); color: var(--cyan); white-space: nowrap; }
.pack-cell .cell-weight { color: var(--dim); }
.pack-cell .cell-fill { width: 80%; height: 4px; background: rgba(0, 0, 0, 0.5); border-radius: 2px; overflow: hidden; }
.pack-cell .cell-fill span { display: block; height: 100%; background: var(--orange); }
.pack-empty { grid-column: 1 / -1; color: var(--dim); padding: 12px; }
.inv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}
.inv-crumbs.hidden { display: none; }
.inv-crumbs .crumb { background: none; border: none; color: var(--cyan); cursor: pointer; font: inherit; padding: 2px 4px; }
.inv-crumbs .crumb.current { color: var(--text, #fff); font-weight: bold; }
.inv-crumbs .crumb-sep { color: var(--dim); }
.inv-crumbs .crumb-load { color: var(--dim); margin-left: 6px; }
.inv-crumbs .crumb-held { color: var(--gold); margin-left: auto; }

/* What a bag holds is listed under it, indented (#459 slice 5) */
.inv-item-row.inv-depth-1 { margin-left: 14px; }
.inv-item-row.inv-depth-2 { margin-left: 28px; }
.inv-item-row.inv-depth-3 { margin-left: 42px; }

/* The tree (#857): a folder's arrow opens or shuts it in place; a bag shown in a tab only to
   hold its things is dimmed; the thing held to be moved is outlined */
.tree-twisty { display: inline-block; width: 16px; flex-shrink: 0; text-align: center; color: var(--cyan); font-size: 14px; line-height: 1; }
.tree-twisty.open, .tree-twisty.closed { cursor: pointer; padding: 6px 0; margin: -6px 0; }
.tree-twisty.empty { color: var(--dim); }
.inv-item-row.tree-context { opacity: 0.72; }
.inv-item-row.tree-row.held { outline: 1px dashed var(--gold); outline-offset: -2px; }

.inventory-list {
  flex: 1.2;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.inv-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.inv-item-row:hover {
  background: rgba(62, 231, 255, 0.08);
  border-color: var(--border-cyan);
}
.inv-item-row.selected {
  background: rgba(62, 231, 255, 0.18);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.item-letter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  width: 20px;
}

.item-icon-glyph {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  width: 24px;
  text-align: center;
}

.item-main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.item-sub {
  font-size: 10px;
  color: var(--dim);
}

.item-status-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
}
.badge-equipped {
  background: rgba(184, 255, 60, 0.15);
  color: var(--lime);
  border: 1px solid var(--lime);
}
.badge-cursed {
  background: rgba(255, 90, 90, 0.15);
  color: var(--red);
  border: 1px solid var(--red);
}

.item-detail-pane {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

.item-placeholder {
  color: var(--dim);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  margin-top: 40px;
}

.detail-header {
  margin-bottom: 12px;
}

.detail-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
  margin-bottom: 4px;
}

.detail-type {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--magenta);
}

.detail-compare {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  margin: 0 0 12px;
  padding: 8px 10px;
  border-left: 2px solid var(--cyan);
  background: rgba(62, 231, 255, 0.05);
}
.detail-compare .cmp-better { color: var(--lime); }
.detail-compare .cmp-worse { color: var(--red); }
.detail-compare .cmp-same { color: var(--dim); }

.detail-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  margin-bottom: 16px;
  font-family: var(--font-mono);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-item-action {
  flex: 1 1 40%;
  background: rgba(62, 231, 255, 0.1);
  border: 1px solid var(--cyan);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 10px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.btn-item-action:hover {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 12px var(--cyan);
}
.item-action-note {
  flex: 1 1 100%;
  color: var(--dim);
  font-size: 12px;
  margin-top: -4px;
}
.btn-item-action.drop {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 90, 90, 0.08);
}
.btn-item-action.drop:hover {
  background: var(--red);
  color: #fff;
}
.drop-qty-row {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.drop-qty-row label {
  flex: 1 1 100%;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--red);
}
.drop-qty-row input {
  width: 72px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--red);
  color: #fff;
  font-family: var(--font-display);
  padding: 8px;
  border-radius: 3px;
}
.drop-qty-row .btn-item-action {
  flex: 1 1 auto;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  font-size: 11px;
  color: var(--dim);
}

/* Codex UI */
.codex-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.codex-tab {
  background: transparent;
  border: 1px solid rgba(111, 126, 166, 0.3);
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.codex-tab.active {
  background: rgba(184, 255, 60, 0.15);
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: 0 0 8px var(--lime-glow);
}

.codex-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.monster-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.monster-card.discovered {
  border-color: rgba(62, 231, 255, 0.3);
}

.mcard-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcard-glyph {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  box-shadow: 0 0 6px currentColor;
}

.mcard-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.mcard-danger {
  margin-left: auto;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 2px;
}

.mcard-desc {
  font-size: 10px;
  color: var(--dim);
  line-height: 1.4;
  font-family: var(--font-mono);
}

.mcard-special {
  font-size: 10px;
  color: var(--orange);
  font-weight: 600;
}

/* Help UI */
.help-content {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.help-section h3 {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 8px;
  text-shadow: 0 0 6px var(--cyan-glow);
}

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.help-table th, .help-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.help-table th {
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.help-table td:nth-child(2), .help-table td:nth-child(3) {
  font-family: var(--font-mono);
  color: var(--lime);
}

/* The gamepad table leads with the control, and its other cells are sentences */
.help-pad-table td:nth-child(n) {
  font-family: inherit;
  color: var(--fg);
}

.help-pad-table td:first-child {
  font-family: var(--font-mono);
  color: var(--lime);
}

.help-pad-table {
  margin-bottom: 10px;
}

.help-section p, .help-section li {
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg);
}

.help-section ul {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rune-key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.rune-key-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-radius: 4px;
  padding: 6px 2px 4px;
}

.rune-key-canvas {
  width: 32px;
  height: 32px;
}

.rune-key-letter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  color: var(--gold);
  margin-top: 2px;
}

/* ---- Title & Game Over Screens ---- */
.screen-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  /* The content centres itself with margin: auto, so it sits in the middle when it
     fits and scrolls from its top when it is taller than the window (#237). With
     align-items: center its top and bottom were cut off and could not be reached. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 0;
  background: rgba(4, 6, 13, 0.88);
  backdrop-filter: blur(10px);
  z-index: 50;
  animation: fadeIn 0.4s ease-out;
}
.screen-overlay.hidden { display: none; }

.title-content, .gameover-content {
  width: min(840px, 92vw);
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.neon-title {
  font-size: clamp(48px, 10vw, 110px);
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow:
    0 0 8px #fff,
    0 0 20px var(--cyan),
    0 0 50px var(--cyan),
    0 0 90px rgba(62, 231, 255, 0.6);
  animation: titleGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes titleGlowPulse {
  0% {
    opacity: 0.88;
    text-shadow:
      0 0 8px #fff,
      0 0 16px var(--cyan),
      0 0 40px var(--cyan),
      0 0 70px rgba(62, 231, 255, 0.4);
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 12px #fff,
      0 0 24px var(--cyan),
      0 0 60px var(--cyan),
      0 0 100px rgba(62, 231, 255, 0.75);
  }
}

.neon-subtitle {
  font-size: clamp(11px, 2vw, 16px);
  letter-spacing: 0.35em;
  color: var(--magenta);
  text-shadow: 0 0 10px var(--magenta), 0 0 25px var(--magenta-glow);
}

.title-domain-link {
  color: var(--cyan);
  text-decoration: none;
  transition: all 0.2s ease;
}

.title-domain-link:hover {
  color: #fff;
  text-shadow: 0 0 12px var(--cyan-glow);
  text-decoration: underline;
}

/* A wrapping row: the site link, the other-games link (#277) and the version button */
.title-web-footer {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
}

.title-web-footer .version-link {
  margin-left: 0;
}

.title-footer-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid rgba(62, 231, 255, 0.3);
  background: rgba(8, 14, 28, 0.7);
  transition: all 0.2s ease;
  display: inline-block;
}

.title-footer-link:hover {
  background: rgba(62, 231, 255, 0.18);
  border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan-glow);
  color: #fff;
}

.neon-tagline {
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--dim);
}

.title-buttons {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

/* Continue failed (#81): shown under the title buttons */
.title-load-error.title-notice-ok {
  color: var(--lime);
  border-color: var(--lime);
  background: rgba(184, 255, 60, 0.08);
  box-shadow: none;
}

.tactical-map-stats .map-stat-found { color: var(--lime); }
.tactical-map-stats .map-stat-unfound { color: var(--gold); }

.title-load-error {
  max-width: 560px;
  margin: 14px auto 0;
  padding: 8px 14px;
  color: var(--red);
  border: 1px solid var(--red);
  background: rgba(255, 90, 90, 0.1);
  box-shadow: 0 0 10px var(--red-glow);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* Full screen offer (#294): on a touch screen, above the title buttons, until answered */
.fullscreen-offer {
  max-width: 560px;
  margin: 14px auto 4px;
  padding: 10px 14px 12px;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  background: rgba(62, 231, 255, 0.08);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.fullscreen-offer p {
  margin: 0 0 10px;
}
.fullscreen-offer-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fullscreen-offer-actions .medium-btn {
  min-height: 44px;
}
.fullscreen-offer-no {
  background: transparent;
  border-color: rgba(62, 231, 255, 0.45);
}
/* Play statistics permission pop-up (#800): the confirmation's card in cyan, its text
   scrolling inside on a short screen, and the switch it points to in Options */
.stats-consent-modal {
  width: min(520px, 92vw);
  max-height: 92vh;
  border-color: var(--cyan);
  box-shadow: 0 0 30px rgba(62, 231, 255, 0.25), inset 0 0 24px rgba(62, 231, 255, 0.05);
}
.stats-consent-modal .modal-header h2 {
  color: var(--cyan);
  letter-spacing: 0.08em;
  line-height: 1.35;
}
.stats-consent-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.stats-consent-list {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: #fff;
}
/* Under Global Privacy Control (#851): a confirmation that the signal is honoured */
.stats-consent-modal .stats-consent-gpc {
  border: 1px solid var(--lime);
  border-left-width: 4px;
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--lime);
  background: rgba(184, 255, 60, 0.07);
}
.stats-consent-more {
  margin: 0 0 10px;
  padding: 0;
}
.stats-switch-hint {
  color: var(--lime);
  font-weight: 600;
}
.option-row.stats-switch-highlight {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
  border-radius: 4px;
  animation: statsSwitchPulse 0.9s ease-in-out 6 alternate;
}
.option-row.stats-switch-highlight .toggle-slider {
  border-color: var(--lime);
  box-shadow: 0 0 12px rgba(184, 255, 60, 0.7);
}
@keyframes statsSwitchPulse {
  from { box-shadow: 0 0 0 rgba(184, 255, 60, 0); }
  to { box-shadow: 0 0 18px rgba(184, 255, 60, 0.75); }
}
.stats-what-link {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
}
/* The statistics id in Options, Privacy (#852): shortened, the whole id in its title */
.stats-id {
  font-family: inherit;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
/* The Full Screen switch where the browser has none to give */
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.4;
  cursor: not-allowed;
}

.huge-btn {
  background: rgba(184, 255, 60, 0.15);
  border: 2px solid var(--lime);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.25em;
  padding: 14px 28px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 20px var(--lime-glow), inset 0 0 15px rgba(184, 255, 60, 0.2);
  transition: all 0.2s ease;
}
.huge-btn:hover {
  background: var(--lime);
  color: #000;
  box-shadow: 0 0 30px var(--lime);
}

.medium-btn {
  background: rgba(62, 231, 255, 0.12);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.medium-btn:hover {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 15px var(--cyan);
}

.blink,
.pulse-action {
  animation: pulseGlowBtn 2s ease-in-out infinite alternate;
}

#btn-continue-game.blink,
#btn-continue-game.pulse-action {
  animation: pulseCyanBtn 2s ease-in-out infinite alternate;
}

@keyframes pulseGlowBtn {
  0% {
    opacity: 0.82;
    transform: scale(0.985);
    box-shadow: 0 0 10px rgba(184, 255, 60, 0.4), inset 0 0 8px rgba(184, 255, 60, 0.15);
  }
  100% {
    opacity: 1;
    transform: scale(1.025);
    box-shadow: 0 0 25px rgba(184, 255, 60, 0.85), inset 0 0 20px rgba(184, 255, 60, 0.4);
  }
}

@keyframes pulseCyanBtn {
  0% {
    opacity: 0.82;
    transform: scale(0.985);
    box-shadow: 0 0 10px rgba(62, 231, 255, 0.4), inset 0 0 8px rgba(62, 231, 255, 0.15);
  }
  100% {
    opacity: 1;
    transform: scale(1.025);
    box-shadow: 0 0 26px rgba(62, 231, 255, 0.9), inset 0 0 20px rgba(62, 231, 255, 0.4);
  }
}

/* The Graveyard and the Shrine Codex, under the mode and kit choices */
.title-buttons.title-archive-buttons {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
}

.audio-notice {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--orange);
  text-shadow: 0 0 8px rgba(255, 178, 60, 0.5);
}

/* Tombstone Game Over */
.tombstone-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#endgame-title {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 25px var(--red);
  margin-bottom: 12px;
}

.tombstone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 12px auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  white-space: normal;
}

.vector-tombstone-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9));
  animation: floatTombstone 3s ease-in-out infinite alternate;
}

@keyframes floatTombstone {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-4px); }
}

.endgame-stats {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.stat-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 16px;
  border-radius: 4px;
}
.stat-pill .val {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.stat-pill .lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--dim);
}

/* Direction Prompt */
.direction-prompt {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  pointer-events: none;
}
.direction-prompt.hidden { display: none; }

.prompt-box {
  background: rgba(4, 6, 13, 0.9);
  border: 2px solid var(--magenta);
  box-shadow: 0 0 20px var(--magenta-glow);
  padding: 12px 24px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.prompt-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #fff;
  text-shadow: 0 0 8px var(--magenta);
}
.prompt-sub {
  font-size: 10px;
  color: var(--dim);
}

/* ---- CRT Dressing ---- */
#scanlines {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
  mix-blend-mode: multiply;
}

#vignette {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.mobile-toggle {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  .mobile-toggle {
    display: inline-flex;
  }
  /* One column: the side panel leaves the grid and becomes a drawer */
  #game-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "status"
      "map"
      "log"
      "arsenal"
      "actions";
  }
  .amulet-badge-label {
    display: none;
  }
  #side-panel {
    position: fixed;
    right: 0;
    top: 64px;
    bottom: 0;
    width: 300px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  #side-panel.open {
    transform: translateX(0);
  }
}

/* ==========================================================================
   Character Sheet & Hero Dossier Modal Styles
   ========================================================================== */

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(4, 7, 16, 0.95);
}

/* Hero Dossier Banner */
.sheet-hero-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(12, 22, 45, 0.9) 0%, rgba(7, 12, 26, 0.95) 100%);
  border: 1px solid rgba(62, 231, 255, 0.35);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(62, 231, 255, 0.05);
}

.sheet-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 15px var(--cyan-glow), inset 0 0 12px var(--cyan-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, 0.6);
  flex-shrink: 0;
}

.sheet-avatar-glyph {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 12px var(--cyan);
}

.sheet-hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sheet-hero-name-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.sheet-hero-rank {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan-glow);
}

.sheet-hero-class {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--magenta);
  text-shadow: 0 0 6px var(--magenta-glow);
}

.sheet-hero-tags {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  flex-wrap: wrap;
}

.sheet-tag-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
}

.sheet-tag-val {
  color: var(--fg);
  font-weight: 700;
  font-family: var(--font-mono);
}

.sheet-tag-val.cyan { color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); }
.sheet-tag-val.gold { color: var(--gold); text-shadow: 0 0 6px var(--gold-glow); }
.sheet-tag-val.lime { color: var(--lime); text-shadow: 0 0 6px var(--lime-glow); }

/* Quest Banner */
.sheet-quest-banner {
  padding: 10px 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.sheet-quest-banner.seeking {
  background: rgba(62, 231, 255, 0.07);
  border: 1px solid rgba(62, 231, 255, 0.28);
  color: var(--fg);
}

.sheet-quest-banner.seeking strong {
  color: var(--cyan);
}

.sheet-quest-banner.possessed {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid var(--gold);
  color: #fff;
  box-shadow: 0 0 15px var(--gold-glow);
  animation: pulse-border 1.6s infinite alternate ease-in-out;
}

.sheet-quest-banner.possessed strong {
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold);
}

/* XP Progress Bar in Dossier */
.sheet-xp-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sheet-xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dim);
}

.sheet-xp-fill-val {
  color: var(--magenta);
  font-weight: 700;
}

.sheet-progress-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.sheet-progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.sheet-progress-fill.xp {
  background: linear-gradient(90deg, var(--purple), var(--magenta));
  box-shadow: 0 0 8px var(--magenta-glow);
}

.sheet-progress-fill.bestiary {
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* 2-Column Responsive Card Grid */
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .sheet-grid {
    grid-template-columns: 1fr;
  }
}

.sheet-card {
  background: var(--bg-card);
  border: 1px solid rgba(62, 231, 255, 0.22);
  border-radius: 6px;
  padding: 14px 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), inset 0 0 15px rgba(62, 231, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sheet-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(62, 231, 255, 0.18);
  text-shadow: 0 0 6px var(--cyan-glow);
}

.sheet-card-title .card-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-stat-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sheet-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sheet-stat-row:last-child {
  border-bottom: none;
}

.sheet-stat-lbl {
  color: var(--dim);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sheet-stat-val {
  color: var(--fg);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}

.sheet-stat-val.cyan { color: var(--cyan); }
.sheet-stat-val.lime { color: var(--lime); }
.sheet-stat-val.gold { color: var(--gold); }
.sheet-stat-val.orange { color: var(--orange); }
.sheet-stat-val.red { color: var(--red); }
.sheet-stat-val.dim { color: var(--dim); }

.sheet-sub-detail {
  font-size: 10px;
  color: var(--dim);
  font-family: var(--font-display);
  margin-top: 1px;
}

/* Badges for Conditions & Equipment */
.sheet-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  display: inline-block;
}

.sheet-badge.active-ward {
  background: rgba(184, 255, 60, 0.15);
  border: 1px solid var(--lime);
  color: var(--lime);
  box-shadow: 0 0 6px var(--lime-glow);
}

.sheet-badge.inactive-ward {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(111, 126, 166, 0.3);
  color: var(--dim);
}

.sheet-badge.buff {
  background: rgba(62, 231, 255, 0.15);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow);
}

.sheet-badge.debuff {
  background: rgba(255, 90, 90, 0.18);
  border: 1px solid var(--red);
  color: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
  animation: pulse-border 1.6s ease-in-out infinite alternate;
}

@keyframes pulse-border {
  0% {
    opacity: 0.82;
    box-shadow: 0 0 5px rgba(255, 90, 90, 0.4);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 90, 90, 0.85);
  }
}

.sheet-badge.cursed {
  background: rgba(255, 90, 90, 0.25);
  border: 1px solid var(--red);
  color: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
}

.sheet-badge.enchanted {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
}

/* Equipment Slot Cards in Sheet */
.sheet-equip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sheet-equip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
}

.sheet-equip-item.empty {
  opacity: 0.6;
  border-style: dashed;
}

.sheet-equip-slot-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--dim);
  width: 65px;
  flex-shrink: 0;
}

.sheet-equip-glyph {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.sheet-equip-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sheet-equip-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.sheet-equip-props {
  font-size: 10px;
  color: var(--dim);
}

/* Bestiary progress & Top Kills */
.sheet-kill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
}

.sheet-kill-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
}

.sheet-kill-glyph {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}

.sheet-kill-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
}

/* ---- Bottom Command Toolbar (Single-Click Actions & Keybinds) ---- */
/* The commands wrap onto a second row when the window is too narrow for one
   (#243): at 1400px wide four of them used to sit behind a 3px scrollbar. */
#bottom-toolbar {
  grid-area: actions;
  margin: 6px 14px 12px;
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-cyan);
  box-shadow: 0 0 15px rgba(62, 231, 255, 0.12), inset 0 0 20px rgba(62, 231, 255, 0.04);
  backdrop-filter: blur(8px);
  z-index: 10;
  border-radius: 4px;
}

.tb-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 22, 42, 0.85);
  border: 1px solid rgba(62, 231, 255, 0.28);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  user-select: none;
  flex-shrink: 0;
}

.tb-btn:hover {
  background: rgba(62, 231, 255, 0.22);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 10px var(--cyan-glow);
  transform: translateY(-1px);
}

.tb-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 5px var(--cyan-glow);
}

.tb-btn.highlight {
  border-color: var(--magenta);
}

.tb-btn.highlight:hover {
  background: rgba(255, 79, 216, 0.22);
  border-color: var(--magenta);
  box-shadow: 0 0 10px var(--magenta-glow);
}

.tb-btn.contextual-active {
  border-color: #ffd700 !important;
  color: #fff !important;
  background: rgba(255, 215, 0, 0.18) !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45) !important;
  animation: pulseGold 2s infinite ease-in-out;
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.35); }
  50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.7); }
}

.tb-icon {
  font-size: 14px;
  line-height: 1;
}

/* UI icons (#77): inline SVG symbols from the sprite at the top of index.html.
   They size to the surrounding font (1em) and stroke in currentColor, so an icon
   takes the colour of its button, badge or label and glows with it. */
.ui-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: visible;
  filter: drop-shadow(0 0 2px currentColor);
  transition: filter 0.15s ease;
}

button:hover .ui-icon,
button:focus-visible .ui-icon,
a:hover .ui-icon,
a:focus-visible .ui-icon {
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 1px currentColor);
}

/* Contextual actions that are unavailable keep their slot but read as inactive (#84) */
.tb-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

button:disabled .ui-icon {
  filter: none;
}

.ui-icon.ui-icon-sm {
  width: 0.85em;
  height: 0.85em;
}

.ui-icon.ui-icon-lg {
  width: 1.4em;
  height: 1.4em;
}

.tb-label {
  letter-spacing: 0.06em;
}

.tb-key {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(62, 231, 255, 0.14);
  border: 1px solid rgba(62, 231, 255, 0.35);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 2px;
}

@media (max-width: 900px) {
  #bottom-toolbar {
    margin: 4px 14px 8px;
    min-height: 48px;
  }
}

/* ==========================================================================
   Dedicated Glanceable Status Bar beneath Top Toolbar (HP, XP, and Hunger Bars)
   ========================================================================== */
#status-bar {
  grid-area: status;
  margin: 6px 14px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: rgba(10, 16, 28, 0.92);
  border: 1px solid rgba(62, 231, 255, 0.28);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(62, 231, 255, 0.04);
  backdrop-filter: blur(6px);
  z-index: 10;
  border-radius: 4px;
}

@media (max-width: 900px) {
  #status-bar {
    gap: 10px;
    padding: 0 10px;
  }
}

.status-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  line-height: 1;
}

.status-lbl {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.vital-icon {
  font-size: 10px;
}

.status-val {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.status-track {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.status-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.25s ease, background 0.3s ease;
}

.hp-fill {
  background: linear-gradient(90deg, #32e078, #b8ff3c);
  box-shadow: 0 0 6px rgba(50, 224, 120, 0.6);
}

.xp-fill {
  background: linear-gradient(90deg, #9d4edd, #c084fc);
  box-shadow: 0 0 6px rgba(192, 132, 252, 0.6);
}

.hunger-fill {
  background: linear-gradient(90deg, #3ee7ff, #00b4d8);
  box-shadow: 0 0 6px rgba(62, 231, 255, 0.5);
}

/* ==========================================================================
   3-Line Scrolling Combat & Action Log Overlay (Above Equipment Bar)
   ========================================================================== */
#bottom-log {
  grid-area: log;
  margin: 6px 14px 0;
  height: 60px;
  background: rgba(3, 6, 14, 0.75);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  z-index: 9;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

#bottom-log:hover {
  border-color: var(--cyan);
  background: rgba(3, 6, 14, 0.92);
  box-shadow: 0 0 14px var(--cyan-glow);
}

.bottom-log-stream {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  height: 100%;
}

.bottom-log-row {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.25s ease;
}

.bottom-log-stream > .bottom-log-row:first-child:not(:last-child):not(:nth-last-child(2)) {
  opacity: 0.55;
}
.bottom-log-stream > .bottom-log-row:nth-last-child(2) {
  opacity: 0.85;
}
.bottom-log-stream > .bottom-log-row:last-child {
  opacity: 1;
}

@media (max-width: 900px) {
  #bottom-log {
    height: 52px;
  }
  .bottom-log-stream {
    font-size: 10px;
  }
}

/* The swap between the commands and the hotbar (#546): only on a phone on its side */
#btn-actions-swap {
  display: none;
}

/* ==========================================================================
   Real-Time Arsenal Quick-Bar (Equipped Melee, Thrown, Zap)
   ========================================================================== */
#arsenal-bar {
  grid-area: arsenal;
  margin: 6px 14px 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: rgba(10, 16, 30, 0.85);
  border: 1px solid rgba(62, 231, 255, 0.22);
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.08);
  backdrop-filter: blur(8px);
  z-index: 10;
  border-radius: 4px;
}

@media (max-width: 900px) {
  #arsenal-bar {
    margin-top: 4px;
  }
}

/* The hotbar (#540): nine slots, each a key cap, an icon, a name and a count or state */
.hotbar-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.hotbar-slot:hover,
.hotbar-slot:focus-visible {
  background: rgba(62, 231, 255, 0.12);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(62, 231, 255, 0.25);
}

.hotbar-slot.empty {
  border-style: dashed;
  background: transparent;
}

.hotbar-slot.unready .hotbar-icon,
.hotbar-slot.unready /* A potion's or a scroll's glyph in its slot (#581) */
.hotbar-art {
  width: 20px;
  height: 20px;
  display: block;
}

.hotbar-name {
  opacity: 0.45;
}

.hotbar-kbd {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(62, 231, 255, 0.16);
  border: 1px solid rgba(62, 231, 255, 0.35);
  border-radius: 2px;
  padding: 0 3px;
}

.hotbar-icon {
  flex: none;
  display: inline-flex;
  color: var(--cyan);
}

.hotbar-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  /* Two lines before an ellipsis: "Magic / Missile" fits a ninth of the bar */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.hotbar-badge {
  flex: none;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.hotbar-badge:empty {
  display: none;
}

.hotbar-slot.unready .hotbar-badge {
  color: var(--amber, #ffb648);
}

/* ==========================================================================
   Game Options & Preferences Modal
   ========================================================================== */
.options-modal {
  width: 90%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.options-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.options-group h3 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  border-bottom: 1px solid rgba(62, 231, 255, 0.2);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  margin-bottom: 8px;
  gap: 16px;
  transition: background 0.15s ease;
}

.option-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(62, 231, 255, 0.2);
}

.option-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.option-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.option-desc {
  font-size: 10.5px;
  color: var(--dim);
  line-height: 1.35;
}

.option-desc strong {
  color: var(--cyan);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.25s;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: #0b101d;
}

/* ---- Micro & Secondary Buttons ---- */
.btn-micro {
  background: rgba(62, 231, 255, 0.12);
  border: 1px solid var(--border-cyan);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s ease;
  line-height: 1.2;
  user-select: none;
}

.btn-micro:hover {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 8px var(--cyan);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-dim);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

/* ---- Destructive-action confirmation (#82) ---- */
#modal-confirm {
  z-index: 110;
}

.confirm-modal {
  width: min(440px, 92vw);
  border-color: var(--red);
  box-shadow: 0 0 30px var(--red-glow), inset 0 0 24px rgba(255, 90, 90, 0.05);
}

.confirm-modal .modal-header h2 {
  color: var(--red);
}

.confirm-body {
  padding: 14px 18px 4px;
}

/* The hero's name: the Create Hero field and the name dialog */
.hero-name-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cyan);
  margin-bottom: 4px;
}
.hero-name-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
/* Naming is not destructive: the dialog wears the cyan frame, not the confirmation's red */
.confirm-modal.hero-name-modal {
  border-color: var(--cyan);
  box-shadow: 0 0 30px rgba(62, 231, 255, 0.25), inset 0 0 24px rgba(62, 231, 255, 0.05);
}
.confirm-modal.hero-name-modal .modal-header h2 {
  color: var(--cyan);
}
.sheet-hero-name {
  font-family: var(--font-display, var(--font-mono));
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  overflow-wrap: anywhere;
}

.confirm-message {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #fff;
}

.confirm-detail {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}

.confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-danger {
  background: rgba(255, 90, 90, 0.15);
  border: 1px solid var(--red);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-danger:hover,
.btn-danger:focus-visible {
  background: var(--red);
  color: #000;
  box-shadow: 0 0 10px var(--red-glow);
}

/* ---- Reusable Choice Picker Dialog (#534) ---- */
#modal-choice-picker {
  z-index: 108;
}

.choice-picker-modal {
  width: min(560px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.choice-picker-body {
  padding: 14px 18px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-picker-prompt {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}

.choice-picker-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice-picker-options .pick-choice {
  width: 100%;
}

.choice-picker-options .pick-choice.choice-default {
  border-color: var(--cyan);
  box-shadow: 0 0 6px rgba(62, 231, 255, 0.25);
}

.choice-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid rgba(62, 231, 255, 0.2);
}


/* ---- Full Expedition Chronicle Modal ---- */
.chronicle-modal {
  width: 920px;
  max-width: 95vw;
  height: 85vh;
  max-height: 780px;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-cyan);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.28);
  border-radius: 6px;
  overflow: hidden;
}

.chronicle-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(10, 16, 26, 0.88);
  border-bottom: 1px solid var(--border-dim);
  flex-wrap: wrap;
}

.chronicle-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chronicle-tab {
  background: rgba(20, 30, 48, 0.65);
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.chronicle-tab:hover {
  border-color: var(--cyan);
  color: #fff;
}

.chronicle-tab.active {
  background: rgba(0, 240, 255, 0.16);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
}

.chronicle-search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 230px;
  flex: 1 1 230px;
  max-width: 320px;
}

#chronicle-search-input {
  width: 100%;
  padding: 6px 28px 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(14, 22, 34, 0.95);
  border: 1px solid var(--border-dim);
  color: #fff;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s ease;
}

#chronicle-search-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

#btn-chronicle-clear-search {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}

#btn-chronicle-clear-search:hover {
  color: #fff;
}

.chronicle-log-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(5, 8, 14, 0.95);
  line-height: 1.5;
}

.chronicle-log-container::-webkit-scrollbar {
  width: 6px;
}

.chronicle-log-container::-webkit-scrollbar-thumb {
  background: var(--border-cyan);
  border-radius: 3px;
}

.chronicle-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-style: italic;
  padding: 40px 20px;
  text-align: center;
}

.chronicle-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  transition: background 0.1s ease;
}

.chronicle-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.chronicle-turn-stamp {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.5px;
  white-space: nowrap;
  user-select: none;
  min-width: 64px;
}

.chronicle-depth-stamp {
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  padding: 0 4px;
  border-radius: 2px;
  white-space: nowrap;
  user-select: none;
}

.chronicle-text {
  flex: 1;
  word-break: break-word;
}

/* Event color styles in chronicle */
.chronicle-row.sys .chronicle-text { color: var(--text-muted); }
.chronicle-row.hit-player .chronicle-text { color: #ff6b6b; font-weight: 600; }
.chronicle-row.hit-monster .chronicle-text { color: #69ff94; }
.chronicle-row.crit .chronicle-text { color: #ff4fd8; font-weight: 700; }
.chronicle-row.kill .chronicle-text { color: #3ee7ff; font-weight: 700; text-shadow: 0 0 6px rgba(62, 231, 255, 0.5); }
.chronicle-row.item .chronicle-text { color: #ffd700; }
.chronicle-row.magic .chronicle-text { color: #c084fc; }
.chronicle-row.warn .chronicle-text { color: #ff9f43; font-weight: 600; }
.chronicle-row.level-up .chronicle-text { color: #ffffff; background: rgba(62, 231, 255, 0.2); padding: 2px 4px; border-left: 2px solid var(--cyan); }

.chronicle-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(10, 16, 26, 0.95);
  border-top: 1px solid var(--border-dim);
  flex-wrap: wrap;
  gap: 8px;
}

.chronicle-footer-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.chronicle-sep {
  opacity: 0.4;
}

.chronicle-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ==========================================================================
   Tactical Floor Map Modal Styles
   ========================================================================== */

.tactical-map-modal {
  width: min(880px, 95vw);
  max-height: 90vh;
}

.tactical-map-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: rgba(3, 6, 12, 0.96);
  overflow-y: auto;
}

.tactical-map-canvas-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #020409;
  border: 1px solid var(--border-cyan);
  border-radius: 4px;
  padding: 10px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(62, 231, 255, 0.08);
}

#tactical-map-canvas {
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 2 / 1;
  display: block;
  image-rendering: pixelated;
  border-radius: 2px;
}

.tactical-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  padding: 10px 16px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  font-size: 11px;
  color: var(--dim);
}

.tactical-map-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.legend-swatch.wall-lit { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
.legend-swatch.wall-dark { background: #556987; }
.legend-swatch.magic-mapped { background: #ba82ff; box-shadow: 0 0 6px rgba(186, 130, 255, 0.6); }
.legend-swatch.corridor { background: #ffb23c; }
.legend-swatch.door { background: var(--magenta); }
.legend-swatch.stairs { background: var(--lime); box-shadow: 0 0 6px var(--lime-glow); }
.legend-swatch.item { background: var(--gold); }
/* Water and chasms (#325): the colours Game.terrainMapColor paints them on the maps */
.legend-swatch.water { background: rgb(70, 150, 255); }
.legend-swatch.chasm { background: rgb(110, 76, 190); }
.legend-swatch.trap { background: var(--red); }
/* Teleport pads (#332); a known pair is joined by a dashed line of the same green */
.legend-swatch.pad { background: #32e078; box-shadow: 0 0 6px rgba(50, 224, 120, 0.6); }
/* Rubble in a collapsed corridor (#334) */
.legend-swatch.rubble { background: #c49a6c; }
/* A themed room's floor (#329): each theme has its own tint (js/game/themes.js) */
.legend-swatch.themed { background: linear-gradient(90deg, rgb(53, 208, 192), rgb(214, 150, 90), rgb(190, 220, 90), rgb(255, 95, 95), rgb(190, 200, 225)); opacity: 0.75; }
/* A lair's floor (#331): the tint of js/game/lairs.js */
.legend-swatch.lair { background: rgb(255, 122, 60); opacity: 0.75; }
/* A shop's floor (#335): the tint of js/game/shops.js */
.legend-swatch.shop { background: rgb(255, 215, 0); opacity: 0.75; }
/* The shop dialog (#335): three lists of wares, each ware a button like a shrine's offering */
.shop-rows { display: flex; flex-direction: column; gap: 6px; }
.shop-choice { text-align: left; }
.shop-ware {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-art {
  width: 22px;
  height: 22px;
  flex: none;
}
.shop-empty { margin: 4px 0 0; color: var(--dim); font-size: 0.85rem; }
/* A ware carried unpaid (#335) */
.badge-unpaid { background: rgba(255, 215, 0, 0.16); color: var(--gold); border: 1px solid rgba(255, 215, 0, 0.5); }
/* The champions a dead hero killed, on a Graveyard card (#331) */
.graveyard-champions { margin: 6px 0 0; color: var(--gold); font-size: 0.82rem; }
/* A hazard room's floor, once it has shown itself (#330): each hazard has its own tint (js/game/hazards.js) */
.legend-swatch.hazard { background: linear-gradient(90deg, rgb(192, 140, 255), rgb(120, 160, 255), rgb(89, 184, 255), rgb(255, 200, 80)); opacity: 0.75; }
/* A locked door (#327) */
.legend-swatch.lock { background: #ff6b2c; box-shadow: 0 0 6px rgba(255, 107, 44, 0.6); }
/* A gate and its lever (#328) */
.legend-swatch.gate { background: #ff9ec7; box-shadow: 0 0 6px rgba(255, 158, 199, 0.6); }
/* A set piece the hero has stood in (#324): an outline round it */
.legend-swatch.set-piece { background: transparent; border: 2px solid #f4f7ff; box-sizing: border-box; }
/* A vault's walls (#326): a gold outline, where an item is a gold square */
.legend-swatch.vault { background: transparent; border: 2px solid var(--gold); box-sizing: border-box; }
.legend-swatch.player-swatch {
  background: #fff;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px #fff, 0 0 10px var(--cyan);
  border-radius: 50%;
}

.tactical-map-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(8, 12, 22, 0.95);
  border-top: 1px solid var(--border-dim);
  font-size: 11px;
  flex-wrap: wrap;
  gap: 10px;
}

.tactical-map-stats {
  color: var(--cyan);
  font-family: var(--font-mono);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tactical-map-stats strong {
  color: #fff;
}

/* ==========================================================================
   TITLE SCREEN GAME MODE PANEL
   ========================================================================== */
.title-game-mode-panel {
  margin: 18px 0;
  padding: 16px;
  background: rgba(10, 16, 30, 0.85);
  border: 1px solid rgba(62, 231, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(62, 231, 255, 0.05);
  text-align: left;
  max-width: 740px;
  width: 100%;
}

.mode-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(62, 231, 255, 0.2);
}

.mode-panel-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px var(--cyan-glow);
}

.mode-panel-hint {
  font-size: 11px;
  color: var(--dim);
}

.mode-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* The four game modes (#302): one row on a wide window, and the chosen one lit */
@media (min-width: 900px) {
  .mode-preset-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.mode-preset-grid .mode-card:has(input:checked) {
  border-color: var(--cyan);
  background: rgba(62, 231, 255, 0.1);
  box-shadow: 0 0 14px var(--cyan-glow);
}
.mode-preset-grid .mode-card.hard-mode:has(input:checked) {
  border-color: var(--red);
  background: rgba(255, 90, 90, 0.1);
  box-shadow: 0 0 14px var(--red-glow);
}

/* Custom's rule switches, under the four modes (#302) */
.title-custom-rules {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(62, 231, 255, 0.3);
}

.mode-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: rgba(14, 22, 40, 0.9);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-card:hover {
  border-color: var(--cyan);
  background: rgba(18, 30, 56, 0.95);
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.2);
}

.mode-card.hard-mode {
  border-color: rgba(255, 51, 102, 0.3);
}

.mode-card.hard-mode:hover {
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.25);
}

.mode-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mode-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.mode-card.hard-mode .mode-checkbox {
  accent-color: var(--red);
}

.mode-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.mode-card.hard-mode .mode-name {
  color: #ff7b90;
}

.mode-desc {
  font-size: 11px;
  color: rgba(195, 215, 240, 0.8);
  line-height: 1.4;
  margin: 0;
}

/* Expedition Seed Controls */
.mode-seed-bar {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(10, 16, 30, 0.85);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seed-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}

.seed-label {
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.seed-attempt-note {
  color: var(--gold);
  font-size: 10px;
}

.seed-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.seed-input {
  flex: 1;
  background: rgba(4, 8, 16, 0.9);
  border: 1px solid rgba(62, 231, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  transition: all 0.2s ease;
}

.seed-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(62, 231, 255, 0.3);
}

.seed-rand-btn {
  background: rgba(62, 231, 255, 0.15);
  border: 1px solid var(--cyan);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.seed-rand-btn:hover {
  background: rgba(62, 231, 255, 0.3);
  box-shadow: 0 0 10px rgba(62, 231, 255, 0.4);
}

/* ==========================================================================
   GRAVEYARD & EPITAPHS MODAL
   ========================================================================== */
.graveyard-modal {
  max-width: 820px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.graveyard-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.graveyard-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: rgba(12, 18, 32, 0.85);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
}

.graveyard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.graveyard-card {
  padding: 12px 16px;
  background: rgba(14, 20, 36, 0.9);
  border: 1px solid rgba(62, 231, 255, 0.25);
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.graveyard-card:hover {
  background: rgba(18, 26, 48, 0.95);
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.15);
}

.graveyard-card.slain {
  border-left: 4px solid var(--red);
}

.graveyard-card.victory {
  border-color: rgba(255, 215, 0, 0.4);
  border-left: 4px solid var(--gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

.graveyard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.graveyard-main-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.graveyard-hero-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.graveyard-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
}

.graveyard-pill.lvl {
  background: rgba(62, 231, 255, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(62, 231, 255, 0.35);
}

.graveyard-pill.depth {
  background: rgba(255, 178, 60, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 178, 60, 0.35);
}

.graveyard-pill.killer {
  background: rgba(255, 51, 102, 0.15);
  color: #ff5a5a;
  border: 1px solid rgba(255, 51, 102, 0.35);
}

.graveyard-pill.killer.victory {
  background: rgba(50, 224, 120, 0.15);
  color: var(--lime);
  border: 1px solid rgba(50, 224, 120, 0.35);
}

.graveyard-pill.seed {
  background: rgba(184, 255, 60, 0.15);
  color: var(--lime);
  border: 1px solid rgba(184, 255, 60, 0.35);
}

.graveyard-pill.attempt {
  background: rgba(255, 79, 216, 0.15);
  color: var(--magenta);
  border: 1px solid rgba(255, 79, 216, 0.35);
}

/* A Novice run (#769): no permadeath */
.graveyard-pill.novice {
  background: rgba(50, 224, 120, 0.12);
  color: var(--lime);
  border: 1px solid rgba(50, 224, 120, 0.35);
}

/* A run played on the Rogue rules, before the move to fifth-edition rules (#400) */
.graveyard-pill.rules-old {
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim);
  border: 1px dashed rgba(255, 255, 255, 0.3);
}

.btn-seed-replay {
  background: rgba(184, 255, 60, 0.15);
  border: 1px solid var(--lime);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 0 8px rgba(184, 255, 60, 0.2);
}

.btn-seed-replay:hover {
  background: var(--lime);
  color: #060913;
  box-shadow: 0 0 14px var(--lime-glow);
}

.graveyard-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.graveyard-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}

.graveyard-toggle-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  background: rgba(62, 231, 255, 0.1);
  border: 1px solid rgba(62, 231, 255, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  transition: all 0.2s ease;
}

.graveyard-card:hover .graveyard-toggle-badge {
  background: rgba(62, 231, 255, 0.2);
}

.graveyard-epitaph-quote {
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
  padding-left: 12px;
  border-left: 2px solid rgba(62, 231, 255, 0.4);
  margin-top: 4px;
  margin-bottom: 2px;
}

/* How the run compares with everyone's this week (#755) */
.endgame-community {
  margin: -6px auto 12px;
  max-width: 480px;
  color: var(--cyan, #3ee7ff);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.endgame-community p {
  margin: 2px 0;
}

.endgame-epitaph {
  margin: 10px auto 14px;
  max-width: 480px;
  font-style: italic;
  color: #f1f5f9;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  border-left: 3px solid var(--lime);
  border-right: 3px solid var(--lime);
  padding: 8px 16px;
  background: rgba(14, 20, 36, 0.75);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(184, 255, 60, 0.15);
}

.graveyard-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.graveyard-drawer-cta {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(184, 255, 60, 0.08);
  border: 1px solid rgba(184, 255, 60, 0.25);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Other stats drawer - shown on click */
.graveyard-other-stats {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  animation: fadeIn 0.2s ease;
}

.graveyard-card.expanded .graveyard-other-stats {
  display: block;
}

.graveyard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  background: rgba(8, 12, 22, 0.6);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.graveyard-stat-box {
  display: flex;
  flex-direction: column;
}

.graveyard-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
}

.graveyard-stat-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.graveyard-seed-history-box {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(6, 10, 18, 0.7);
  border: 1px solid rgba(184, 255, 60, 0.25);
  border-radius: 4px;
}

.seed-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.seed-history-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.05em;
}

.seed-attempts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seed-attempt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  flex-wrap: wrap;
  gap: 6px;
}

.seed-attempt-row.current-attempt {
  border-left: 2px solid var(--cyan);
  background: rgba(62, 231, 255, 0.08);
}

.seed-attempt-tag {
  color: var(--magenta);
  font-weight: 700;
}

.seed-attempt-summary {
  color: var(--fg);
  flex: 1;
  padding: 0 8px;
}

.seed-attempt-date {
  color: var(--dim);
  font-size: 10px;
}

.graveyard-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ==========================================================================
   BOSS KEY FULLSCREEN OVERLAY
   ========================================================================== */
.boss-key-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #020a05;
  color: #33ff66;
  font-family: 'Courier New', Courier, monospace;
  padding: 24px;
  overflow: auto;
  box-sizing: border-box;
}

.boss-key-terminal {
  max-width: 900px;
  margin: 0 auto;
}

.boss-key-dos-header {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  background: #113318;
  color: #66ff88;
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 13px;
  border-bottom: 1px solid #33ff66;
}

.boss-key-fake-sheet {
  background: #051408;
  padding: 12px;
  border: 1px solid #1a5525;
  line-height: 1.8;
  font-size: 12px;
  color: #55ee77;
  margin-bottom: 24px;
}

.boss-key-neon-box {
  background: rgba(10, 2, 20, 0.95);
  border: 2px solid #ff3366;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 0 30px rgba(255, 51, 102, 0.4), inset 0 0 20px rgba(62, 231, 255, 0.2);
  animation: bossGlitchGlow 3s infinite alternate;
}

@keyframes bossGlitchGlow {
  0% { border-color: #ff3366; box-shadow: 0 0 25px rgba(255, 51, 102, 0.4); }
  50% { border-color: #3ee7ff; box-shadow: 0 0 35px rgba(62, 231, 255, 0.5); }
  100% { border-color: #ffe259; box-shadow: 0 0 30px rgba(255, 226, 89, 0.4); }
}

.boss-neon-glitch-badge {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #ffe259;
  text-shadow: 0 0 10px #ffe259;
  margin-bottom: 12px;
}

.boss-neon-title {
  font-family: var(--font-mono, monospace);
  font-size: 26px;
  font-weight: 900;
  color: #3ee7ff;
  text-shadow: 0 0 16px #3ee7ff, 0 0 30px rgba(62, 231, 255, 0.6);
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}

.boss-neon-msg {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #f1f5f9;
  line-height: 1.6;
  margin-bottom: 10px;
}

.boss-neon-submsg {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.8);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ==========================================================================
   Accessibility (#43)
   ========================================================================== */

/* Visible keyboard focus for every interactive control */
button:focus-visible,
a:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.mode-card:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Option toggles hide the real checkbox, so show its focus on the slider */
.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* Dialog cards receive focus as a fallback target; don't draw a ring around the whole card */
.modal-card[role="dialog"]:focus {
  outline: none;
}

/* Graveyard "Full Stats" toggle is a real button */
button.graveyard-toggle-badge {
  cursor: pointer;
  line-height: inherit;
}

/* Respect the OS "reduce motion" setting: no blinking, pulsing, sliding or fading */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Styles moved out of inline style="" attributes (#84 slice 7). Same values as
   before; the :hover forms keep the look the inline styles used to pin.
   ========================================================================== */

/* Title / endgame buttons */
.huge-btn.btn-continue {
  background: rgba(62, 231, 255, 0.2);
  border-color: var(--cyan);
  box-shadow: 0 0 20px var(--cyan-glow);
}
.huge-btn.btn-replay-seed,
.huge-btn.btn-replay-seed:hover {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(184, 255, 60, 0.15);
  box-shadow: 0 0 15px rgba(184, 255, 60, 0.25);
}
.title-buttons.endgame-actions {
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.endgame-actions .medium-btn {
  min-width: 140px;
}
.boss-return-btn {
  margin-top: 20px;
}

/* Graveyard modal */
.graveyard-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-micro.btn-micro-danger {
  color: var(--red);
}
.modal-footer.modal-footer-end {
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* neoncrawl.ca links in modal subtitles, help and the boss screen */
.site-link {
  color: var(--cyan);
  text-decoration: none;
}
.site-link-underline,
.site-link-strong {
  text-decoration: underline;
}
.site-link-strong {
  font-weight: 700;
}
.help-section.help-section-divided {
  border-top: 1px dashed rgba(62, 231, 255, 0.3);
  padding-top: 12px;
  margin-top: 12px;
}

/* Pack row badges for the readied missile and wand */
.item-status-badge.badge-thrown {
  border-color: #3ee7ff;
  color: #3ee7ff;
}
.item-status-badge.badge-ready-wand {
  border-color: #ffe259;
  color: #ffe259;
}

/* Character sheet: Active Wards, Blessings & Ailments */
.sheet-card-note {
  font-size: 10px;
  color: var(--dim);
}
.ward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.ward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ward-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.ward-desc {
  font-size: 10px;
  color: var(--dim);
}

/* Graveyard list (rendered in renderGraveyard) */
.graveyard-empty {
  text-align: center;
  padding: 30px 20px;
}
.graveyard-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.graveyard-empty-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.graveyard-empty-text {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 16px;
}
.graveyard-card-actions .btn-seed-replay {
  padding: 5px 12px;
  font-size: 11px;
}
.btn-seed-replay.btn-seed-replay-lg {
  padding: 10px 20px;
  font-size: 13px;
}
.graveyard-stat-val.stat-gold { color: var(--gold); }
.graveyard-stat-val.stat-cyan { color: var(--cyan); }
.graveyard-stat-val.stat-small { font-size: 11px; }
.graveyard-stat-val.stat-victory { color: var(--lime); }
.graveyard-stat-val.stat-death { color: #ff7b90; }
.graveyard-stat-val.stat-dim { color: var(--dim); }
.graveyard-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.graveyard-cta-title {
  font-weight: 700;
  color: #fff;
  font-size: 12px;
}
.graveyard-cta-sub {
  font-size: 11px;
  color: var(--dim);
}

/* ==========================================================================
   CHANGELOG: version buttons and the changelog dialog
   ========================================================================== */
.version-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: transparent;
  border: 1px dashed rgba(62, 231, 255, 0.3);
  border-radius: 4px;
  padding: 4px 10px;
  margin-left: 8px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.version-link:hover,
.version-link:focus-visible {
  color: var(--cyan);
  border-style: solid;
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  outline: none;
}

.modal-footer .version-link {
  margin-left: 0;
}

/* ==========================================================================
   The title screen's kit cards (#398)
   ========================================================================== */
.title-kit-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(62, 231, 255, 0.3);
}
.kit-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kit-cards-grid .mode-card:has(input:checked) {
  border-color: var(--cyan);
  background: rgba(62, 231, 255, 0.1);
  box-shadow: 0 0 14px var(--cyan-glow);
}
/* The class's skills, chosen on the title screen (#402) */
.title-skills-header {
  margin-top: 12px;
}
.title-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}
.title-skill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
}
.title-skill:has(input:disabled) {
  opacity: 0.5;
  cursor: default;
}
/* The Character Sheet's 18 skills in two columns where there is room (#402) */
.sheet-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 16px;
}
.sheet-skill-row.trained .sheet-stat-lbl {
  color: var(--cyan);
}
.mode-classic-link {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--dim);
}
.mode-classic-link a {
  color: var(--cyan);
}
/* A long list scrolls inside its dialog */
.pick-modal .pick-body {
  max-height: min(70vh, 720px);
}

/* ==========================================================================
   The choice dialogs: level up, shrines, shops (#300, #311, #335, #396)
   ========================================================================== */
.pick-modal {
  width: min(640px, calc(100vw - 24px));
}
.pick-body {
  padding: 14px 18px;
  overflow-y: auto;
  min-height: 0;
}
.pick-heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--dim);
}
/* Level-up dialog (#396): what the levels gave */
.levelup-gains {
  margin-bottom: 16px;
}
.levelup-heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--dim);
}
.levelup-note {
  margin: 0 0 12px;
  color: var(--dim);
  font-style: italic;
}
.levelup-gain-list {
  margin: 0 0 12px;
  padding-left: 18px;
  line-height: 1.5;
}
/* Weapon Mastery's choice (#408): a button for each weapon not yet mastered */
.levelup-mastery-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}
.levelup-mastery {
  font-size: 12px;
  padding: 6px 8px;
}
.pick-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
/* The Shrine Codex (#311): one row per favour; an undiscovered one is dimmed */
.pick-codex-list {
  max-height: min(70vh, 640px);
}
.pick-codex-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name   rank"
    "effect badge";
  column-gap: 10px;
  row-gap: 3px;
  align-items: baseline;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid rgba(62, 231, 255, 0.25);
  border-radius: 4px;
  background: rgba(62, 231, 255, 0.05);
}
.pick-codex-row.unknown {
  opacity: 0.55;
  border-style: dashed;
}
.pick-codex-badge {
  grid-area: badge;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  text-align: right;
}
.pick-codex-badge.taken {
  color: var(--lime);
}
/* The way from a run's Codex to the Perk Codex: a button beside the tabs, not a tab */
.codex-link {
  margin-left: auto;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 4px;
  color: var(--cyan);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.codex-link:hover,
.codex-link:focus-visible {
  background: rgba(62, 231, 255, 0.2);
  border-color: var(--cyan);
}

/* Shrine dialog (#311): three favours, each with three sizes of offering */
.shrine-favour {
  margin-bottom: 16px;
}
.shrine-favour-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.shrine-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.shrine-new {
  font-size: 12px;
  color: var(--lime);
  text-align: right;
}
.shrine-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
/* A phone: the three offerings under one another */
@media (max-width: 700px) {
  .shrine-sizes {
    grid-template-columns: minmax(0, 1fr);
  }
}
.shrine-choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 48px;
  padding: 8px 12px;
  text-align: left;
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.shrine-price {
  font-size: 12px;
  color: var(--gold);
}
.shrine-effect {
  font-size: 13px;
  color: var(--cyan);
}
.shrine-choice:hover:not(:disabled),
.shrine-choice:focus-visible {
  background: rgba(255, 215, 0, 0.18);
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.shrine-choice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.shrine-refusal {
  font-size: 12px;
  color: var(--red);
}
/* The Potions tab's note about fountains (#333) */
.codex-note {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-left: 2px solid var(--cyan);
}
.codex-shrine-link {
  margin-left: 8px;
}

/* The Character Sheet's Perks card with nothing in it */
.sheet-empty-note {
  color: var(--dim);
  font-style: italic;
}
.pick-note {
  margin: 0;
  color: var(--dim);
  font-style: italic;
}
.pick-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "key name   rank"
    "key effect group";
  column-gap: 10px;
  row-gap: 3px;
  align-items: baseline;
  min-height: 48px;
  padding: 10px 12px;
  text-align: left;
  background: rgba(62, 231, 255, 0.07);
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.pick-choice:hover,
.pick-choice:focus-visible {
  background: rgba(62, 231, 255, 0.2);
  border-color: var(--cyan);
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
.pick-key {
  grid-area: key;
  font-family: var(--font-mono);
  color: var(--lime);
}
.pick-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.pick-rank {
  grid-area: rank;
  font-size: 12px;
  color: var(--gold);
  text-align: right;
}
.pick-effect {
  grid-area: effect;
  font-size: 13px;
  color: var(--cyan);
}
.pick-group {
  grid-area: group;
  font-size: 12px;
  color: var(--dim);
  text-align: right;
}
/* A touch-only device has no keys to press */
@media (hover: none) and (pointer: coarse) {
  .pick-key {
    display: none;
  }
}

.changelog-modal {
  max-width: 720px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.changelog-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.changelog-list:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: -2px;
}

.changelog-card {
  padding: 12px 16px;
  background: rgba(14, 20, 36, 0.9);
  border: 1px solid rgba(62, 231, 255, 0.2);
  border-left: 3px solid rgba(62, 231, 255, 0.45);
  border-radius: 6px;
}

.changelog-card.current {
  border-color: rgba(184, 255, 60, 0.45);
  border-left: 4px solid var(--lime);
  box-shadow: 0 0 14px rgba(184, 255, 60, 0.15);
}

.changelog-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.changelog-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  padding: 2px 8px;
  border: 1px solid var(--border-cyan);
  border-radius: 4px;
  background: rgba(62, 231, 255, 0.08);
}

.changelog-card.current .changelog-badge {
  color: var(--lime);
  border-color: rgba(184, 255, 60, 0.5);
  background: rgba(184, 255, 60, 0.1);
}

.changelog-current-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--bg);
  background: var(--lime);
  border-radius: 3px;
  padding: 2px 6px;
}

.changelog-date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}

.changelog-title {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.changelog-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
}

.changelog-notes li + li {
  margin-top: 3px;
}

@media (max-width: 600px) {
  .changelog-modal {
    width: 100%;
    max-height: 92vh;
  }
  .changelog-list {
    padding: 12px;
  }
  .changelog-card {
    padding: 10px 12px;
  }
  .changelog-date {
    margin-left: 0;
    width: 100%;
  }
}

/* Character Sheet fine print (was inline font sizes; phones raise these, #237) */
.sheet-note { font-size: 10px; }
.sheet-note-lg { font-size: 11px; }
.sheet-kill-badge { font-size: 8px; }

/* ==========================================================================
   Radial menu (#1055): 8 fixed compass slots around a map square, drawn by
   js/game/radial.js. Slots are 56 px; the highlight grows and gets an outline,
   an unavailable slot is dimmed and dashed.
   ========================================================================== */
.radial-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.radial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.35);
}
.radial-ring {
  position: absolute;
  width: 0;
  height: 0;
}
.radial-pop .radial-ring { animation: radial-open 120ms ease-out; }
@keyframes radial-open {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.radial-slot, .radial-hub {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
}
.radial-slot {
  width: 56px;
  height: 56px;
  padding: 4px;
  background: rgba(7, 12, 24, 0.94);
  border: 2px solid var(--border-cyan);
  color: var(--fg);
  transition: transform 90ms ease-out, border-color 90ms;
}
.radial-slot.is-empty {
  width: 14px;
  height: 14px;
  padding: 0;
  background: rgba(62, 231, 255, 0.12);
  border: 1px solid rgba(62, 231, 255, 0.25);
}
.radial-icon { display: flex; line-height: 1; }
.radial-icon .radial-svg { width: 22px; height: 22px; }
.radial-letter { font-family: var(--font-display); font-size: 18px; line-height: 22px; color: var(--cyan); }
.radial-label {
  max-width: 54px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 14px;
}
.radial-chev {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--cyan);
}
.radial-slot.is-off {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--dim);
  color: var(--dim);
}
.radial-slot.is-hl {
  transform: translate(-50%, -50%) scale(1.15);
  border: 3px solid var(--cyan);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  box-shadow: 0 0 14px var(--cyan-glow);
  z-index: 2;
}
.radial-slot.is-hl.is-off { opacity: 0.85; border-color: var(--dim); box-shadow: none; }
.radial-slot.is-pager .radial-letter { color: var(--magenta); }
.radial-hub {
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  background: rgba(4, 6, 13, 0.96);
  border: 2px solid var(--magenta);
  color: var(--magenta);
  font-size: 18px;
}
.radial-hub .radial-svg { width: 20px; height: 20px; }
.radial-ghost {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.35);
  opacity: 0.18;
  pointer-events: none;
}
.radial-ghost .radial-label { display: none; }
.radial-crumb {
  position: absolute;
  left: 0;
  top: -142px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
}
.radial-dots {
  position: absolute;
  left: 0;
  top: 130px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.radial-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--cyan); }
.radial-dot.is-on { background: var(--cyan); }
.radial-panel {
  position: absolute;
  box-sizing: border-box;
  padding: 10px 12px;
  background: rgba(7, 12, 24, 0.96);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 14px var(--cyan-glow);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg);
  pointer-events: none;
}
.radial-panel.is-off { border-color: var(--dim); }
.radial-panel-title { font-family: var(--font-display); font-size: 14px; color: var(--cyan); margin-bottom: 4px; }
.radial-cost { color: var(--lime); }
.radial-check { color: var(--gold); }
.radial-hint { color: var(--dim); }
.radial-why { color: var(--orange); margin-top: 4px; }
.radial-prompts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: var(--dim); }
.radial-flash { animation: radial-flash 240ms ease-out; }
@keyframes radial-flash {
  0%, 50% { border-color: var(--orange); box-shadow: 0 0 18px rgba(255, 178, 60, 0.6); }
}
/* Reduced motion: an instant open and a still highlight */
.radial-menu.radial-reduced .radial-ring,
.radial-menu.radial-reduced .radial-slot { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .radial-ring, .radial-slot, .radial-panel { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Small screens: title and game-over screens stack (#237 slice 1)
   ========================================================================== */
@media (max-width: 700px) {
  .title-content, .gameover-content {
    gap: 14px;
  }
  .neon-title {
    font-size: clamp(34px, 12vw, 64px);
    letter-spacing: 0.08em;
  }
  .neon-subtitle {
    letter-spacing: 0.12em;
    line-height: 1.6;
  }
  /* Buttons stacked, full width, comfortable to tap */
  .title-buttons,
  .title-buttons.endgame-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .title-buttons .huge-btn,
  .title-buttons .medium-btn {
    width: 100%;
    min-height: 48px;
    letter-spacing: 0.14em;
  }
  .title-game-mode-panel {
    margin: 6px 0;
    padding: 12px;
  }
  .mode-panel-header,
  .seed-label-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .mode-cards-grid {
    grid-template-columns: 1fr;
  }
  .mode-checkbox {
    min-width: 22px;
    min-height: 22px;
  }
  .seed-input-group {
    flex-wrap: wrap;
  }
  /* 16px: iOS Safari zooms the page when a smaller input is focused */
  .seed-input {
    flex: 1 1 100%;
    font-size: 16px;
    min-height: 44px;
  }
  .hero-name-input {
    font-size: 16px;
    min-height: 44px;
  }
  .seed-rand-btn {
    flex: 1 1 100%;
    min-height: 44px;
  }
  .title-footer-link,
  .title-web-footer .version-link {
    min-height: 44px;
  }
  .endgame-stats {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ==========================================================================
   Small-screen in-game chrome (#237 slice 3)
   900px and below: the top-bar buttons are a menu sheet and the side panel
   drawer has its own close button. 700px and below (phones): compact bars,
   a two-line log, no arsenal bar, and the commands as a grid of 48px buttons.
   ========================================================================== */
.menu-toggle,
.side-panel-close,
.status-lbl-short,
.tb-item {
  display: none;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  #top-bar {
    position: relative;
  }
  /* Above the bars that follow it in the page while its sheet is open */
  #top-bar.menu-open {
    z-index: 30;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 40px;
    font-size: 12px;
  }
  .top-controls {
    display: none;
  }
  #top-bar.menu-open .top-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(100%, 420px);
    padding: 10px;
    background: rgba(7, 12, 24, 0.97);
    border: 1px solid var(--border-cyan);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(62, 231, 255, 0.12);
  }
  .top-controls .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    font-size: 13px;
  }
  .side-panel-close {
    display: block;
    flex: none;
    width: 100%;
    min-height: 44px;
    background: rgba(62, 231, 255, 0.12);
    border: 1px solid var(--cyan);
    border-radius: 4px;
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    cursor: pointer;
  }
}

/* Phones: narrow (portrait) or short and wide (landscape, laid out further below) */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  /* --- Top bar: brand, depth, Menu --- */
  #top-bar {
    margin: 6px 8px 0;
    padding: 0 6px 0 10px;
    gap: 8px;
  }
  .brand .sub-text {
    display: none;
  }
  .logo-text {
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  .floor-badge {
    padding: 4px 8px;
    gap: 6px;
  }
  .amulet-badge {
    padding: 4px 8px;
  }
  .menu-toggle {
    min-height: 44px;
  }

  /* --- Status bar: icon and value, so the three trackers never collide --- */
  #status-bar {
    margin: 6px 8px;
    gap: 10px;
    padding: 0 10px;
  }
  .status-lbl-text {
    display: none;
  }
  .status-lbl-short {
    display: inline;
  }
  .status-header {
    gap: 4px;
    font-size: 11px;
  }
  .status-lbl,
  .status-val {
    font-size: 11px;
    letter-spacing: 0;
  }
  .status-lbl {
    flex: none;
  }
  .status-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vital-icon {
    font-size: 12px;
  }

  /* --- Log: two lines --- */
  #bottom-log {
    margin: 4px 8px 0;
    height: 44px;
  }
  .bottom-log-stream {
    font-size: 11px;
    gap: 4px;
  }
  /* Rows keep their height; the oldest is clipped off the top, not all three squashed */
  .bottom-log-row {
    flex: none;
  }

  /* --- The hotbar (#540): nine 44px slots, the icon over a short name --- */
  #arsenal-bar {
    height: auto;
    margin: 2px 8px 0;
    padding: 2px;
    gap: 3px;
  }
  .hotbar-slot {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    height: 44px;
    padding: 2px 1px;
  }
  .hotbar-kbd {
    position: absolute;
    top: 1px;
    left: 1px;
    padding: 0 2px;
  }
  .hotbar-icon {
    align-self: flex-start;
    margin-left: 3px;
  }
  .hotbar-name {
    flex: none;
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  /* The count or state sits over the icon's corner */
  .hotbar-badge {
    position: absolute;
    top: 1px;
    right: 2px;
  }

  /* --- Commands: a grid of 48px buttons, icon over word, no key badges --- */
  #bottom-toolbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    height: auto;
    margin: 4px 8px 8px;
    padding: 6px;
    overflow: visible;
  }
  .tb-btn {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    white-space: normal;
  }
  .tb-icon {
    font-size: 18px;
  }
  .tb-label,
  .tb-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0;
  }
  .tb-key {
    display: none;
  }
  .tb-item:not(:empty) {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--cyan);
  }
  /* With something readied, its name stands in for the verb (the icon still says which) */
  .tb-btn:has(.tb-item:not(:empty)) .tb-label {
    display: none;
  }

  /* --- Side panel: a full-screen sheet --- */
  #side-panel {
    top: 0;
    left: 0;
    width: auto;
    z-index: 40;
  }
}

/* Wide phones and small tablets in portrait: seven columns, two rows */
@media (min-width: 480px) and (max-width: 700px) {
  #bottom-toolbar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* Very narrow phones: the depth badge keeps its value and drops its word */
@media (max-width: 400px) {
  .floor-badge .label {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Character Sheet, Page 1 (#1094): the 2024 paper sheet's layout in neon
   --------------------------------------------------------------------------- */
.cs-page { display: flex; flex-direction: column; gap: 10px; }
.cs-frame {
  border: 1px solid var(--border-cyan);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 8px 10px;
  box-shadow: inset 0 0 12px rgba(62, 231, 255, 0.06);
}
.cs-box-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-align: center;
  margin-bottom: 4px;
}
.cs-field-lbl { display: block; font-size: 11px; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }
.cs-head { display: grid; grid-template-columns: minmax(240px, 2.4fr) 92px 96px minmax(170px, 1.6fr) 104px 110px; gap: 8px; align-items: stretch; }
.cs-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--border-cyan); padding-bottom: 2px; overflow-wrap: anywhere; }
.cs-name-lbl { font-size: 12px; color: var(--dim); letter-spacing: 0.08em; margin-bottom: 6px; }
.cs-ident-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.cs-field { display: block; font-size: 13px; color: var(--fg); border-bottom: 1px solid rgba(62, 231, 255, 0.18); min-height: 18px; }
.cs-level, .cs-ac, .cs-hd, .cs-death, .cs-prof, .cs-inspiration { text-align: center; }
.cs-level { border-radius: 50%; display: flex; flex-direction: column; justify-content: center; }
.cs-level-val { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--gold); }
.cs-xp { font-size: 12px; color: var(--fg); }
.cs-ac { border-radius: 10px 10px 48px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.cs-ac-val { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--cyan); line-height: 1.1; }
.cs-ac-shield { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cs-hp-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; text-align: center; }
.cs-hp-val { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--lime); }
.cs-hp-sub { display: block; font-size: 16px; font-weight: 700; color: var(--fg); }
.cs-hd > div { margin-bottom: 4px; }
.cs-death.quiet { opacity: 0.55; }
.cs-pips { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.cs-pip { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--dim); display: inline-block; }
.cs-pip.ok.on { background: var(--lime); border-color: var(--lime); }
.cs-pip.bad.on { background: var(--red); border-color: var(--red); }
.cs-body { display: grid; grid-template-columns: 210px 210px minmax(0, 1fr); gap: 10px; align-items: start; }
.cs-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs-prof-val { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--gold); }
.cs-ability { border: 1px solid var(--border-cyan); border-radius: 10px 10px 4px 4px; background: var(--bg-card); padding: 6px 8px 8px; }
.cs-ab-name { margin: 0 0 4px; text-align: center; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; color: var(--cyan); }
.cs-ab-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cs-ab-mod { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--cyan); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--fg); box-shadow: 0 0 10px var(--cyan-glow); }
.cs-ab-score { min-width: 40px; padding: 4px 6px; border: 1px solid var(--border-cyan); border-radius: 0 8px 8px 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--fg); }
.cs-ab-labels { display: flex; justify-content: center; gap: 28px; font-size: 12px; color: var(--dim); letter-spacing: 0.06em; margin: 2px 0 4px; }
.cs-row { display: grid; grid-template-columns: 14px 32px 1fr; align-items: center; gap: 6px; padding: 2px 0; border-top: 1px solid rgba(62, 231, 255, 0.1); font-size: 12px; color: var(--dim); }
.cs-row.trained { color: var(--fg); }
.cs-save .cs-row-name { font-weight: 700; }
.cs-row-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.cs-row.trained .cs-row-val { color: var(--cyan); }
.cs-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--dim); display: inline-block; }
.cs-dot.proficient { background: var(--cyan); border-color: var(--cyan); }
.cs-dot.expertise { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.35); }
.cs-dot.half { background: linear-gradient(90deg, var(--cyan) 50%, transparent 50%); border-color: var(--cyan); }
.cs-diamond { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--dim); display: inline-block; margin: 0 4px 0 6px; vertical-align: middle; }
.cs-diamond.on { background: var(--cyan); border-color: var(--cyan); }
.cs-diamond.big { width: 22px; height: 22px; margin: 8px auto 4px; display: block; }
.cs-inspiration.on .cs-diamond.big { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
.cs-diamond-lbl { font-size: 12px; color: var(--fg); }
.cs-diamond-lbl.off { color: var(--dim); }
.cs-smalls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cs-small { border: 1px solid var(--border-cyan); border-radius: 10px; background: var(--bg-card); text-align: center; padding: 6px 4px; }
.cs-small-lbl { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em; color: var(--cyan); }
.cs-small-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--fg); margin-top: 2px; }
.cs-defenses { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 12px; color: var(--fg); }
.cs-defenses .cs-field-lbl, .cs-passive .cs-field-lbl, .cs-train-row .cs-field-lbl, .cs-spells-line .cs-field-lbl, .cs-features-sub .cs-field-lbl, .cs-armor-train .cs-field-lbl { display: inline; }
.cs-atk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cs-atk-table th { text-align: left; font-weight: 400; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--border-cyan); padding: 2px 4px; }
.cs-atk-table td { padding: 4px; border-bottom: 1px solid rgba(62, 231, 255, 0.1); color: var(--fg); vertical-align: top; }
.cs-atk-hit, .cs-atk-dmg { white-space: nowrap; color: var(--cyan); }
.cs-atk-notes { color: var(--dim); }
.cs-spells-line { margin-top: 6px; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-features-sub { font-size: 12px; color: var(--lime); margin-bottom: 4px; }
.cs-list { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--fg); }
.cs-list li { padding: 3px 0; border-bottom: 1px solid rgba(62, 231, 255, 0.1); }
.cs-two-col { columns: 2; column-gap: 18px; }
.cs-two-col li { break-inside: avoid; }
.cs-uses { color: var(--lime); font-variant-numeric: tabular-nums; }
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-train-row, .cs-armor-train { font-size: 12px; color: var(--fg); padding: 3px 0; }
.sheet-run-strip { padding: 6px 2px; }

/* Narrower windows: the header wraps, then the two ability columns sit over the third */
@media (max-width: 1020px) {
  .cs-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-ident { grid-column: 1 / -1; }
  .cs-body { grid-template-columns: 1fr 1fr; }
  .cs-col-c { grid-column: 1 / -1; }
}
/* Phones: one column in the paper sheet's order */
@media (max-width: 700px) {
  .cs-head { grid-template-columns: 1fr 1fr; }
  .cs-hp { grid-column: 1 / -1; }
  .cs-body { grid-template-columns: 1fr; }
  .cs-smalls { grid-template-columns: 1fr 1fr; }
  .cs-pair { grid-template-columns: 1fr; }
  .cs-two-col { columns: 1; }
  .cs-atk-table thead { display: none; }
  .cs-atk-table tr { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; border-bottom: 1px solid rgba(62, 231, 255, 0.1); padding: 4px 0; }
  .cs-atk-table td { border: 0; padding: 0; }
  .cs-atk-notes { grid-column: 1 / -1; }
  .cs-row, .cs-list, .cs-atk-table, .cs-train-row { font-size: 13px; }
  .cs-row { min-height: 30px; }
}

/* Character Sheet tabs and Page 2 (#1095) */
.cs-tabs { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--border-cyan); padding-bottom: 6px; position: sticky; top: -18px; z-index: 2; background: rgba(4, 7, 16, 0.97); }
.cs-tab {
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--border-cyan);
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.cs-tab.active { color: var(--cyan); background: var(--bg-card); border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.cs-tab:focus-visible { outline: 1px dashed var(--cyan); outline-offset: 2px; }
.cs-tabs-hint { margin-left: auto; font-size: 12px; color: var(--dim); }
.cs-tabpanel { display: flex; flex-direction: column; gap: 16px; }
.cs-p2-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 10px; align-items: start; }
.cs-cast-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.cs-cast-val { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--fg); }
.cs-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
.cs-slot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); }
.cs-slot-lvl { color: var(--dim); font-size: 11px; letter-spacing: 0.06em; }
.cs-slot-total { font-weight: 700; color: var(--cyan); }
.cs-pact { margin-top: 6px; }
.cs-pip.slot.on { background: var(--magenta); border-color: var(--magenta); }
.cs-spell-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cs-spell-table th { text-align: left; font-weight: 400; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--border-cyan); padding: 2px 4px; }
.cs-spell-table td { padding: 4px; border-bottom: 1px solid rgba(62, 231, 255, 0.1); color: var(--fg); vertical-align: top; }
.cs-spell-lvl { color: var(--gold); text-align: center; }
.cs-spell-note { color: var(--dim); }
.cs-flags { white-space: nowrap; }
.cs-flag { display: inline-block; min-width: 16px; margin-right: 4px; text-align: center; border: 1px solid var(--dim); border-radius: 3px; font-size: 12px; color: var(--dim); }
.cs-flag.on { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }
.cs-appear-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--fg); }
.cs-appear-glyph { font-family: var(--font-mono); font-size: 32px; color: var(--lime); text-shadow: 0 0 10px var(--lime-glow); }
.cs-coin-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-align: center; }
.cs-coin { border: 1px solid var(--border-cyan); border-radius: 8px; padding: 4px 2px; }
.cs-coin-val { display: block; font-weight: 700; color: var(--gold); font-size: 15px; }
.cs-attune .cs-list li { display: flex; align-items: center; gap: 4px; }
@media (max-width: 860px) {
  .cs-p2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cs-tab { flex: 1; min-height: 44px; font-size: 12px; padding: 6px 8px; }
  .cs-tabs-hint { display: none; }
  .cs-cast-grid { grid-template-columns: 1fr 1fr; }
  .cs-slot-grid { grid-template-columns: 1fr 1fr; }
  .cs-spell-table thead { display: none; }
  .cs-spell-table tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 8px; border-bottom: 1px solid rgba(62, 231, 255, 0.1); padding: 4px 0; }
  .cs-spell-table td { border: 0; padding: 0; font-size: 13px; }
  .cs-spell-table td:nth-child(3), .cs-spell-table td:nth-child(4) { grid-column: 2 / 3; color: var(--dim); }
  .cs-spell-note { grid-column: 1 / -1; }
}



/* Character Sheet: the levels strip and a past level (#1097) */
.cs-levels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-levels > .cs-field-lbl { display: inline; margin-right: 4px; }
.cs-level-chip {
  min-height: 30px;
  min-width: 40px;
  padding: 4px 10px;
  border: 1px solid var(--border-cyan);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cs-level-chip.active { color: var(--bg); background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
.cs-level-chip.now { border-color: var(--cyan); }
.cs-level-chip.now.active { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.cs-level-chip.skipped { display: inline-flex; align-items: center; justify-content: center; color: var(--dim); border-style: dashed; cursor: default; }
.cs-level-note { font-size: 12px; color: var(--orange); }
.cs-level-banner { border: 1px solid var(--gold); border-radius: 10px; background: rgba(255, 215, 0, 0.06); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg); }
.cs-level-warn { color: var(--gold); }
.cs-level-back { margin-left: 10px; }
.cs-level-gains .cs-field-lbl { display: block; margin-bottom: 2px; }
[data-changed] { color: var(--gold) !important; text-shadow: 0 0 8px var(--gold-glow); }
.cs-ab-mod[data-changed], .cs-ab-score[data-changed] { border-color: var(--gold); }
@media (max-width: 700px) {
  .cs-level-chip { min-height: 44px; min-width: 44px; font-size: 13px; }
  .cs-level-back { min-height: 44px; margin: 6px 0 0; display: block; }
}

/* ==========================================================================
   Handedness and control layout (#1209)
   body[data-touch-layout]: which side the joystick / D-pad takes (default stickLeft, with the
   action wheel button on the right). body[data-handed="left"]: the desktop screen mirrored.
   ========================================================================== */
body[data-touch-layout="stickRight"] .dpad,
body[data-touch-layout="stickRight"] .touch-stick {
  justify-self: end;
}
body[data-touch-layout="stickRight"] .dpad {
  margin: 0 max(8px, env(safe-area-inset-right)) 8px 0;
}
body[data-touch-layout="stickRight"] .touch-stick {
  margin: 0 max(4px, env(safe-area-inset-right)) 4px 0;
}
body[data-touch-layout="stickRight"] .btn-radial {
  justify-self: start;
  margin: 0 0 8px max(8px, env(safe-area-inset-left));
}
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  /* The small-screen drawer opens from the side away from the joystick */
  body[data-touch-layout="stickRight"] #side-panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }
  body[data-touch-layout="stickRight"] #side-panel.open {
    transform: translateX(0);
  }
}
/* Left-handed desktop: the side panel on the left, the rest of the screen to its right. Only
   where the wide layout applies; the phone and tablet layouts have their own. */
@media (min-width: 901px) and (min-height: 501px), (min-width: 901px) and (orientation: portrait) {
  body[data-handed="left"] #game-container {
    grid-template-columns: 350px minmax(0, 1fr);
    grid-template-areas:
      "side top"
      "side status"
      "side map"
      "side log"
      "side arsenal"
      "side actions";
  }
  body[data-handed="left"] #side-panel {
    border-left: 0;
    border-right: 1px solid var(--border-cyan);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(62, 231, 255, 0.04);
  }
}
/* Phone on its side, left-handed: the status and log column on the right, the commands on the left */
@media (max-height: 500px) and (orientation: landscape) {
  body[data-handed="left"] #game-container {
    grid-template-columns: minmax(216px, 26%) minmax(0, 1fr) minmax(168px, 24%);
    grid-template-areas:
      "swap    map top"
      "actions map status"
      "actions map log";
  }
}

/* ==========================================================================
   Phone landscape chrome (#237 slice 4)
   A short, wide screen: status and log go in a left column, the commands in a
   right column, and the map keeps the full height in between. The compact bars
   and buttons come from the phone block above, which this query shares.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  /* The hotbar (#540) has no row here: the map keeps the full height between the columns.
     The right column shows the commands or, swapped (#546), the hotbar's nine slots. */
  #arsenal-bar {
    display: none;
  }
  #game-container {
    grid-template-columns: minmax(168px, 24%) minmax(0, 1fr) minmax(216px, 26%);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "top    map swap"
      "status map actions"
      "log    map actions";
  }
  #btn-actions-swap {
    display: flex;
    grid-area: swap;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 6px 8px 0 0;
    font: inherit;
    font-family: var(--font-mono);
    color: var(--cyan, #00f0ff);
    background: rgba(10, 16, 30, 0.85);
    border: 1px solid rgba(62, 231, 255, 0.35);
    border-radius: 4px;
    cursor: pointer;
  }
  #game-container.actions-hotbar #bottom-toolbar {
    display: none;
  }
  #game-container.actions-hotbar #arsenal-bar {
    display: grid;
    grid-area: actions;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, 1fr);
    align-content: stretch;
    height: auto;
    margin: 6px 8px 8px 0;
    padding: 4px;
    gap: 4px;
  }
  #game-container.actions-hotbar #arsenal-bar .hotbar-slot {
    min-height: 44px;
  }

  /* --- Left column: depth and Menu, the three meters, the log --- */
  #top-bar {
    margin: 6px 6px 0 8px;
    padding: 0 4px 0 8px;
  }
  /* No room for the brand, or the word DEPTH, beside the badges and Menu */
  #top-bar .brand,
  .floor-badge .label {
    display: none;
  }
  /* The sheet is wider than the column it hangs from */
  #top-bar.menu-open .top-controls {
    left: 0;
    right: auto;
    width: min(420px, 70vw);
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  #status-bar {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    margin: 6px 6px 0 8px;
    padding: 8px 10px;
    gap: 7px;
  }
  .status-item {
    flex: none;
  }
  /* The column is wide enough for the words */
  .status-lbl-text {
    display: inline;
  }
  .status-lbl-short {
    display: none;
  }
  #bottom-log {
    height: auto;
    min-height: 44px;
    margin: 6px 6px 8px 8px;
  }
  /* Narrow and tall: lines wrap as running text, and the oldest is clipped off the top */
  .bottom-log-row {
    display: block;
    white-space: normal;
  }

  /* --- Right column: the 13 commands, three across --- */
  #bottom-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, 1fr);
    align-content: stretch;
    margin: 6px 8px 8px 0;
  }
  .tb-btn {
    min-height: 44px;
  }
  /* The narrower face fits "Pack (5)" and "Descend" in a third of the column */
  .tb-label {
    font-family: var(--font-mono);
  }
}

/* Small phones on their side: Menu is its icon alone, the meters are icon and value */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 760px) {
  .menu-toggle-label,
  .status-lbl-text {
    display: none;
  }
  .status-lbl-short {
    display: inline;
  }
  .menu-toggle {
    justify-content: center;
  }
}

/* ==========================================================================
   Collapsible columns on a phone on its side (#269)
   Each column has a slider. Off, the left column is depth and the three bars
   (no numbers, no log) and the right one is the command icons, two across.
   The map takes the width they give up. Game.applyCompactChrome sets the classes.
   ========================================================================== */
.panel-switch {
  display: none;
}

@media (max-height: 500px) and (orientation: landscape) {
  .panel-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .panel-switch-track {
    position: relative;
    width: 32px;
    height: 16px;
    background: rgba(4, 8, 16, 0.9);
    border: 1px solid rgba(62, 231, 255, 0.45);
    border-radius: 9px;
  }
  .panel-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: rgba(165, 185, 215, 0.9);
    border-radius: 50%;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .panel-switch[aria-checked="true"] .panel-switch-track {
    background: rgba(62, 231, 255, 0.16);
    border-color: var(--cyan);
  }
  .panel-switch[aria-checked="true"] .panel-switch-knob {
    transform: translateX(16px);
    background: var(--cyan);
  }
  .panel-switch:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -4px;
  }
  /* Depth, the slider and Menu wrap to a second row when the column is too narrow */
  #top-bar {
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
  }

  /* --- Left column collapsed: depth, slider, Menu, and the three bars --- */
  #game-container.status-compact {
    grid-template-columns: 112px minmax(0, 1fr) minmax(216px, 26%);
  }
  #game-container.status-compact #top-bar {
    justify-content: space-around;
    padding: 2px;
  }
  #game-container.status-compact .menu-toggle-label,
  #game-container.status-compact .amulet-badge-label,
  #game-container.status-compact .status-val,
  #game-container.status-compact .status-lbl > :not(.vital-icon),
  #game-container.status-compact #bottom-log {
    display: none;
  }
  #game-container.status-compact .status-item {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  #game-container.status-compact .status-header {
    flex: none;
  }
  #game-container.status-compact .status-track {
    flex: 1;
    width: auto;
    height: 9px;
  }

  /* --- Right column collapsed: icons, two across (14 cells with the slider, 7 rows) --- */
  #game-container.commands-compact {
    grid-template-columns: minmax(168px, 24%) minmax(0, 1fr) 116px;
  }
  #game-container.status-compact.commands-compact {
    grid-template-columns: 112px minmax(0, 1fr) 116px;
  }
  #game-container.commands-compact #bottom-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  #game-container.commands-compact .tb-label,
  #game-container.commands-compact .tb-item {
    display: none;
  }
  #game-container.commands-compact .tb-icon {
    font-size: 20px;
  }
}

/* Options: a choice from a short list (Map Zoom, #237) */
.option-select {
  flex: none;
  min-width: 96px;
  min-height: 36px;
  padding: 4px 8px;
  background: rgba(4, 8, 16, 0.9);
  border: 1px solid rgba(62, 231, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
}
/* A volume slider in Options (#1042) */
.option-range {
  flex: none;
  width: 120px;
  min-height: 44px;
  accent-color: var(--cyan);
  cursor: pointer;
}
.option-range:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.option-select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ==========================================================================
   Touch input (#237 slice 6)
   ========================================================================== */
/* No double-tap zoom on the page; pinch-zoom of the page itself stays (#43) */
html,
body {
  touch-action: manipulation;
}
/* The map handles its own gestures: tap, long press, drag to pan, pinch to zoom */
#game-canvas {
  touch-action: none;
  -webkit-touch-callout: none;
}

/* Long-press inspector popover, placed near the finger by showTouchInspector() */
.touch-inspector {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 70;
  width: min(260px, calc(100vw - 16px));
  padding: 10px 12px;
  background: rgba(7, 12, 24, 0.96);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 14px var(--cyan-glow);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

/* ==========================================================================
   On-screen D-pad (#237 slice 7)
   Shares the map cell with the canvas and sits in its bottom-right corner.
   ========================================================================== */
.dpad {
  grid-area: map;
  align-self: end;
  justify-self: start;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 4px;
  margin: 0 0 8px max(8px, env(safe-area-inset-left));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dpad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(10, 16, 30, 0.72);
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 6px;
  color: var(--cyan);
  font-size: 20px;
  cursor: pointer;
  touch-action: none;
}
.dpad-btn:active {
  background: rgba(62, 231, 255, 0.3);
  border-color: var(--cyan);
  color: #fff;
}
.dpad-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.dpad-wait {
  border-color: rgba(184, 255, 60, 0.5);
  color: var(--lime);
}
.dpad-arrow {
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
}
.dpad-ne .dpad-arrow { transform: rotate(45deg); }
.dpad-e .dpad-arrow { transform: rotate(90deg); }
.dpad-se .dpad-arrow { transform: rotate(135deg); }
.dpad-s .dpad-arrow { transform: rotate(180deg); }
.dpad-sw .dpad-arrow { transform: rotate(225deg); }
.dpad-w .dpad-arrow { transform: rotate(270deg); }
.dpad-nw .dpad-arrow { transform: rotate(315deg); }

/* ==========================================================================
   On-screen joystick (#290)
   A zone in the same corner of the map as the D-pad. Only the ring and knob are
   drawn, and the map shows through them. The ring is twice STICK_RADIUS
   (js/game/input.js) across.
   ========================================================================== */
.touch-stick {
  grid-area: map;
  align-self: end;
  justify-self: start;
  position: relative;
  z-index: 6;
  width: 136px;
  height: 136px;
  margin: 0 0 4px max(4px, env(safe-area-inset-left));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* At rest, the middle of the zone; under a thumb the script moves it to where the thumb landed */
.touch-stick-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 50%;
  background: rgba(4, 6, 13, 0.25);
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.2), inset 0 0 18px rgba(62, 231, 255, 0.08);
  opacity: 0.55;
  pointer-events: none;
}
.touch-stick.on .touch-stick-ring {
  opacity: 0.95;
  border-color: var(--cyan);
}
.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: rgba(62, 231, 255, 0.18);
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.6);
}
/* Past the dead zone, with a direction taken up: filled and white, not colour alone */
.touch-stick.steer .touch-stick-knob {
  border-color: #fff;
  background: rgba(62, 231, 255, 0.45);
}

/* ==========================================================================
   Dialogs on phones (#237 slice 8)
   Desktop: the Pack's detail pane sits beside the list, in a wrapper that phones
   turn into a bottom sheet.
   ========================================================================== */
.item-detail-sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.item-detail-close {
  display: none;
}

@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  /* Breakdown tooltips (#1092): their small print at the phone floor */
  .ui-tip-source,
  .ui-tip-note,
  .ui-tip-link {
    font-size: 12px;
  }
  /* The hotbar (#540): its names at the 12px floor, its key caps and counts at 11px */
  .hotbar-slot,
  .hotbar-name {
    font-size: 12px;
  }
  .hotbar-kbd,
  .hotbar-badge {
    font-size: 11px;
  }
  /* The pad button shown on each slot while RB is held (#545) */
  .hotbar.pad-chord .hotbar-pad {
    font-size: 12px;
  }
  /* The effects panel's C / S tags (#706) */
  .effect-tag {
    font-size: 11px;
  }
  /* --- Every dialog fills the screen; the header stays put with a 44px close button --- */
  .modal-overlay {
    align-items: stretch;
    justify-content: stretch;
  }
  .modal-overlay .modal-card:not(.confirm-modal) {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-width: 0;
    border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: none;
    min-height: 52px;
    padding: 4px 4px 4px 14px;
    gap: 8px;
  }
  .modal-header h2 {
    font-size: 15px;
    letter-spacing: 0.12em;
  }
  /* The small-print subtitles give way to the title and the close button */
  .modal-subtitle {
    display: none;
  }
  .modal-close {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    font-size: 30px;
  }
  .modal-footer {
    flex: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* --- 44px targets --- */
  .filter-tab,
  .codex-tab,
  .chronicle-tab,
  .modal-card .btn-secondary,
  .modal-card .btn-micro,
  .modal-card .btn-danger,
  .modal-card .version-link,
  .btn-item-action {
    min-height: 44px;
    min-width: 44px;
    font-size: 12px;
  }
  .inv-filter-bar,
  .codex-tabs {
    padding: 8px 12px;
    overflow-x: auto;
    flex: none;
  }
  .filter-tab,
  .codex-tab {
    flex: none;
    padding: 4px 14px;
  }
  /* The switch keeps its look; its label grows to a 44px-tall target around it */
  .toggle-switch {
    height: 44px;
    flex: none;
  }
  .toggle-slider {
    top: 10px;
    bottom: 10px;
  }
  .option-row {
    gap: 12px;
  }

  /* --- Text: 12px floor (11px for badges and stamps), 16px for anything typed into --- */
  /* Generated from every base rule under 12px; see the note at .sheet-note */
  .audio-notice,
  .btn-item-action,
  .btn-micro,
  .btn-secondary,
  .btn-seed-replay,
  .changelog-date,
  .chronicle-footer-stats,
  .chronicle-tab,
  .codex-tab,
  .confirm-detail,
  .detail-type,
  .drop-qty-row label,
  .eq-slot,
  .eq-type,
  .filter-tab,
  .forecast-lbl,
  .graveyard-card-actions .btn-seed-replay,
  .graveyard-cta-sub,
  .graveyard-date,
  .graveyard-empty-text,
  .graveyard-stat-lbl,
  .graveyard-stat-val.stat-small,
  .help-section li,
  .help-section p,
  .help-table,
  .help-table th,
  .inspect-combat-forecast,
  .inspect-details,
  .inspect-dist,
  .inspect-hp-label,
  .inspect-threat-alert,
  .inspector-content,
  .inspector-prompt,
  .item-sub,
  .log-turn,
  .mcard-desc,
  .mcard-special,
  .message-log,
  .minimap-coords,
  .modal-footer,
  .mode-desc,
  .mode-panel-hint,
  .option-desc,
  .options-group h3,
  .prompt-sub,
  .section-title,
  .seed-attempt-date,
  .seed-attempt-note,
  .seed-attempt-row,
  .seed-history-title,
  .seed-label-row,
  .sheet-card-note,
  .sheet-card-title,
  .sheet-equip-props,
  .sheet-equip-slot-lbl,
  .sheet-hero-class,
  .sheet-kill-row,
  .sheet-note,
  .sheet-note-lg,
  .sheet-quest-banner,
  .sheet-stat-lbl,
  .sheet-sub-detail,
  .sheet-xp-labels,
  .stat-label-row,
  .stat-lbl,
  .tactical-map-footer,
  .tactical-map-legend,
  .version-link,
  .ward-desc,
  .ward-name {
    font-size: 12px;
  }
  .btn-danger,
  .changelog-current-tag,
  .chronicle-depth-stamp,
  .chronicle-turn-stamp,
  .graveyard-pill,
  .graveyard-toggle-badge,
  .hunger-badge,
  .inspect-badge-arcane,
  .inspect-badge-asleep,
  .inspect-badge-detected,
  .inspect-badge-hostile,
  .inspect-badge-memory,
  .inspect-danger,
  .item-status-badge,
  .mcard-danger,
  .sheet-badge,
  .sheet-kill-badge,
  .stat-pill .lbl {
    font-size: 11px;
  }
  #chronicle-search-input,
  .option-select,
  .drop-qty-row input {
    font-size: 16px;
    min-height: 44px;
  }
  .chronicle-search-wrapper {
    max-width: none;
    flex: 1 1 100%;
  }

  /* --- Pack: one list; a tapped item opens in a bottom sheet --- */
  .inv-body {
    position: relative;
  }
  .inventory-list {
    border-right: none;
    padding: 8px 10px;
  }
  .inv-item-row {
    min-height: 48px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
  }
  .item-main-info {
    min-width: 0;
    flex: 1 1 60%;
  }
  .item-title {
    font-size: 13px;
  }
  .item-detail-sheet {
    display: none;
  }
  .inv-body.detail-open .item-detail-sheet {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 78%;
    z-index: 2;
    background: rgba(7, 12, 24, 0.98);
    border-top: 1px solid var(--cyan);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7);
  }
  .item-detail-close {
    display: block;
    flex: none;
    min-height: 44px;
    margin: 8px 12px 0;
    background: rgba(62, 231, 255, 0.1);
    border: 1px solid var(--border-cyan);
    border-radius: 4px;
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
  }
  .item-detail-pane {
    min-height: 0;
    padding: 12px;
    background: transparent;
  }
  .detail-actions .btn-item-action {
    flex: 1 1 44%;
  }

  /* --- Confirmation: a card, not a full screen, with full-width 48px buttons --- */
  .modal-overlay:has(.confirm-modal) {
    align-items: center;
    justify-content: center;
  }
  .confirm-footer .btn-secondary,
  .confirm-footer .btn-danger {
    flex: 1 1 120px;
    min-height: 48px;
    font-size: 13px;
  }
}

/* A phone on its side has little height: the Pack's detail sheet takes all of the list area */
@media (max-height: 500px) and (orientation: landscape) {
  .inv-body.detail-open .item-detail-sheet {
    top: 0;
    max-height: none;
  }
  .modal-footer .inv-hint {
    display: none;
  }
}

/* ==========================================================================
   Page metadata support (#237 slice 9): safe areas, overscroll, key badges on touch
   ========================================================================== */
/* No pull-to-refresh or rubber-banding behind the game */
html {
  overscroll-behavior: none;
}
/* viewport-fit=cover lets the page run under a notch or home indicator; these keep
   the chrome and the full-screen screens clear of them (0 on other devices) */
#game-container {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen-overlay {
  padding: max(16px, env(safe-area-inset-top)) env(safe-area-inset-right) max(16px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  #side-panel {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* A touch-only device has no keys to press: drop the key caps from buttons and slots */
@media (hover: none) and (pointer: coarse) {
  .tb-key,
  .hotbar-kbd {
    display: none;
  }
  /* Help leads with the touch controls */
  #help-touch {
    order: -1;
  }
}

/* ==========================================================================
   Coarse pointers at any window size (#237 slice 10)
   A tablet keeps the desktop rows, but a finger needs 44px to hit. The phone
   rules above already give phones these sizes by width.
   ========================================================================== */
@media (pointer: coarse) {
  .brand-link,
  .icon-btn,
  .menu-toggle,
  .tb-btn,
  .hotbar-slot,
  #side-panel .btn-micro,
  #side-panel .char-name.clickable {
    min-height: 44px;
  }
  .brand-link,
  #side-panel .char-name.clickable {
    display: inline-flex;
    align-items: center;
  }
  /* The bars grow to hold the taller controls */
  #arsenal-bar {
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  #bottom-toolbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ==========================================================================
   FEEDBACK (#271): the Feedback buttons and the Feedback dialog
   ========================================================================== */
.feedback-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
}

/* In a run. The top bar has no room for one more button on a wide window (its
   buttons already wrap below about 1330px), so there Feedback sits at the foot of
   the side panel. Where the top-bar buttons are the Menu sheet it is one of them. */
.top-controls #btn-feedback {
  display: none;
}

.side-feedback {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  font-size: 12px;
  letter-spacing: 0.15em;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  .top-controls #btn-feedback {
    display: flex;
  }
  .side-feedback {
    display: none;
  }
}

.feedback-modal {
  width: min(600px, 94vw);
  max-height: 90vh;
}

.feedback-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.feedback-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.feedback-select {
  align-self: flex-start;
  min-width: 200px;
}

.feedback-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(4, 8, 16, 0.9);
  border: 1px solid rgba(62, 231, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  user-select: text;
  -webkit-user-select: text;
}

textarea.feedback-input {
  min-height: 120px;
  resize: vertical;
}

.feedback-input:focus-visible,
.feedback-preview:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.feedback-count {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}

.feedback-count.near-limit {
  color: var(--orange);
}

.feedback-diagnostics-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.feedback-diagnostics-row .btn-micro {
  font-size: 12px;
  padding: 5px 10px;
}

.feedback-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}

.feedback-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.feedback-preview {
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed var(--border-cyan);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}

.feedback-privacy {
  padding-left: 10px;
  border-left: 3px solid var(--orange);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg);
}

/* Room for the widget before it draws, so the dialog does not jump */
.feedback-turnstile {
  min-height: 65px;
}

.feedback-status {
  min-height: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.feedback-status.ok {
  color: var(--lime);
}

.feedback-status.error {
  color: var(--red);
}

.feedback-unavailable {
  padding: 12px 14px;
  border: 1px solid var(--orange);
  border-radius: 4px;
  background: rgba(255, 178, 60, 0.08);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
}

.feedback-unavailable-title {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--orange);
}

.btn-secondary.btn-primary {
  background: rgba(184, 255, 60, 0.15);
  border-color: var(--lime);
  color: var(--lime);
}

.btn-secondary.btn-primary:hover,
.btn-secondary.btn-primary:focus-visible {
  background: var(--lime);
  color: #000;
}

.btn-secondary.btn-primary:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Phones: 16px in anything typed into (iOS zooms the page below that), 44px targets */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .feedback-body {
    padding: 12px;
  }
  .feedback-input {
    font-size: 16px;
    min-height: 44px;
  }
  .feedback-select {
    align-self: stretch;
  }
  .feedback-check {
    min-height: 44px;
  }
}

/* A finger at any window size */
@media (pointer: coarse) {
  .feedback-link,
  .feedback-modal .btn-secondary,
  .feedback-modal .btn-micro,
  .feedback-modal .modal-close {
    min-height: 44px;
    min-width: 44px;
  }
  .feedback-select,
  .feedback-input,
  .feedback-check {
    min-height: 44px;
  }
  .feedback-select,
  .feedback-input {
    font-size: 16px;
  }
}

/* Bonus actions the hero can take this turn (#407): lit buttons under the class line */
.hud-bonus {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.bonus-btn {
  font: inherit;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--lime);
  background: rgba(184, 255, 60, 0.12);
  color: var(--lime);
  cursor: pointer;
}
.bonus-btn.lit {
  box-shadow: 0 0 8px var(--lime-glow);
}
/* The level-up dialog's feat choice (#409): a button for each feat, then its choices */
.levelup-feat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}
.levelup-feat {
  font-size: 12px;
  padding: 6px 8px;
}
/* The species' choice on the title screen (#411): an ancestry, a legacy or a skill */
.title-species-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 12px;
}
/* Character creation (#413): the steps as tabs, the ability rows, the hero's summary */
.create-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 8px;
}
.create-step-tab {
  font-size: 12px;
  padding: 6px 10px;
  min-height: 44px;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border, #2a3a55);
  border-radius: 4px;
  cursor: pointer;
}
.create-step-tab.active {
  color: var(--cyan, #3ee7ff);
  border-color: var(--cyan, #3ee7ff);
}
.create-body .title-skill-list {
  margin-bottom: 12px;
}
.create-ability-rows {
  display: grid;
  gap: 6px;
  max-width: 360px;
}
.create-ability-row {
  display: grid;
  grid-template-columns: 1fr auto 3em;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.create-ability-mod {
  text-align: right;
  color: var(--dim);
}
.create-summary .sheet-stat-row {
  gap: 12px;
}
.title-kit-panel #btn-create-hero {
  margin-top: 6px;
}


/* The Compendium (#815): Help and the Codex in one dialog */
.compendium-modal {
  width: min(980px, 96vw);
  height: min(780px, 92vh);
  display: flex;
  flex-direction: column;
}
.cmp-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.cmp-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmp-subtabs {
  padding: 6px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cmp-tab {
  background: transparent;
  border: 1px solid rgba(111, 126, 166, 0.3);
  color: var(--dim);
  font-family: var(--font-display);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.cmp-tab.active {
  background: rgba(184, 255, 60, 0.15);
  border-color: var(--lime);
  color: var(--lime);
  box-shadow: 0 0 8px var(--lime-glow);
}
.cmp-tab:focus-visible, .cmp-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.cmp-crumbs {
  padding: 6px 18px 0;
  font-size: 12px;
  color: var(--dim);
}
.cmp-crumbs nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cmp-crumb { background: none; border: none; color: inherit; font: inherit; padding: 0; }
button.cmp-crumb { color: var(--cyan); cursor: pointer; text-decoration: underline; }
.cmp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
  line-height: 1.5;
}
.cmp-body h3 { color: var(--cyan); font-family: var(--font-display); font-size: 15px; margin: 10px 0 6px; }
.cmp-body h4 { color: var(--lime); font-size: 13px; margin: 10px 0 4px; }
.cmp-body h5 { color: var(--fg); font-size: 12px; margin: 8px 0 4px; }
.cmp-body p, .cmp-body ul, .cmp-body ol { margin: 0 0 8px; }
.cmp-body ul, .cmp-body ol { padding-left: 20px; }
.cmp-link { color: var(--cyan); text-decoration: underline; cursor: pointer; }
.cmp-unknown { color: var(--dim); }
.cmp-page-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.cmp-kind { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.cmp-stats { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 10px; }
.cmp-stats dt { color: var(--dim); }
.cmp-traits dt { color: var(--lime); margin-top: 6px; }
.cmp-table { border-collapse: collapse; margin: 6px 0 10px; }
.cmp-table th, .cmp-table td { border: 1px solid rgba(111, 126, 166, 0.3); padding: 3px 8px; text-align: left; }
.cmp-footnotes { margin-top: 14px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; }
.cmp-footnote { margin-bottom: 6px; }
.cmp-suggest { margin-left: 6px; font-size: 12px; }
.cmp-attribution { margin-top: 18px; color: var(--dim); font-size: 12px; }
.cmp-badge { font-size: 12px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--dim); color: var(--dim); margin-left: 6px; text-transform: uppercase; }
.cmp-badge-revealed { border-color: var(--purple); color: var(--purple); }
.cmp-art { display: inline-flex; align-items: center; gap: 6px; }
.cmp-glyph { font-family: var(--font-mono); font-weight: bold; }
.cmp-art-page .cmp-glyph { font-size: 28px; }
.cmp-art-canvas { border-radius: 4px; background: rgba(0, 10, 20, 0.5); }
.cmp-empty { color: var(--dim); }
@media (max-width: 600px) {
  .compendium-modal { width: 100vw; height: 100vh; }
  .cmp-body { padding: 10px 12px 16px; }
}
/* The Codex lists (#826) */
/* What this run added to the Codex (#827) */
.endgame-codex {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cyan);
  text-align: center;
}
.cmp-tab-progress { color: var(--dim); font-size: 12px; margin: 4px 0 8px; }
.cmp-badge-new { border-color: var(--lime); color: var(--lime); }
.cmp-badge-you { border-color: var(--gold); color: var(--gold); }
.cmp-list-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--dim); }
.cmp-list-controls select { background: var(--bg-card); color: var(--fg); border: 1px solid var(--border-cyan); font-size: 12px; }
.cmp-rows { list-style: none; padding: 0; margin: 0; }
.cmp-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.cmp-row-link { display: flex; align-items: center; gap: 8px; padding: 4px 2px; text-decoration: none; color: var(--fg); }
.cmp-row-link:hover, .cmp-row-link:focus-visible { background: rgba(62, 231, 255, 0.08); }
.cmp-row-name { flex: 1; }
.cmp-col { color: var(--dim); font-size: 12px; min-width: 60px; }
.cmp-row-unknown { display: flex; align-items: center; gap: 8px; padding: 4px 2px; color: var(--dim); }
.cmp-tick { width: 14px; color: var(--lime); }
.cmp-badge-taken { border-color: var(--orange); color: var(--orange); }
/* This run's looks of the randomized items (#832) */
.cmp-run-strip { margin: 12px 0; padding: 8px 10px; border: 1px dashed var(--border-cyan); border-radius: 4px; background: rgba(62, 231, 255, 0.04); }
.cmp-run-strip h4 { margin-top: 0; }
.cmp-run-looks { list-style: none; padding-left: 0; }
.cmp-run-looks li { padding: 2px 0; }
/* The Rules outline (#835) and the Deviations index (#844) */
.cmp-outline-chapters { list-style: none; padding-left: 0; }
.cmp-outline-chapter { margin: 6px 0; }
.cmp-outline-sections { padding-left: 18px; font-size: 12px; columns: 2; }
.cmp-deviations li { margin-bottom: 6px; font-size: 12px; }
@media (max-width: 600px) { .cmp-outline-sections { columns: 1; } }

.cmp-search { margin-left: auto; margin-right: 8px; background: var(--bg-card); color: var(--fg); border: 1px solid var(--border-cyan); border-radius: 3px; padding: 3px 8px; font-size: 12px; width: min(220px, 40vw); }
.cmp-search-results h3 { margin-top: 12px; }
.cmp-hero-list { list-style: none; padding-left: 0; }
.cmp-hero-list li { padding: 2px 0; }
.cmp-upcoming { opacity: 0.5; }
.cmp-dim { color: var(--dim); font-size: 12px; }
.cmp-ref { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.cmp-ref:hover, .cmp-ref:focus-visible { color: var(--cyan); }
.cmp-badge-run { border-color: var(--cyan); color: var(--cyan); }
.cmp-howto { margin-top: 8px; padding: 6px 8px; border-left: 2px solid var(--cyan); background: rgba(62, 231, 255, 0.05); }

/* ==========================================================================
   The death view (#892): the map stays up after a death, desaturated under a red
   vignette, with the hero's body on it and a banner at the bottom of the map cell.
   The commands that act are put away until the tombstone (or a new run).
   ========================================================================== */
body.death-view #game-canvas {
  filter: saturate(0.55);
}
body.death-view #bottom-toolbar,
body.death-view #arsenal-bar,
body.death-view #btn-actions-swap,
body.death-view #dpad,
body.death-view #touch-stick {
  visibility: hidden;
}
.death-vignette {
  grid-area: map;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(120, 0, 24, 0) 45%, rgba(150, 6, 32, 0.38) 78%, rgba(90, 0, 18, 0.7) 100%);
  animation: death-vignette-pulse 2.4s ease-in-out infinite;
}
@keyframes death-vignette-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.death-banner {
  grid-area: map;
  align-self: end;
  justify-self: center;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  max-width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 12px 18px;
  background: rgba(14, 3, 8, 0.9);
  border: 1px solid var(--red);
  border-radius: 6px;
  box-shadow: 0 0 18px var(--red-glow);
  animation: fadeIn 0.6s ease-out;
}
.death-banner-text {
  margin: 0;
  color: #f3d6dc;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.death-banner-text strong {
  color: var(--red);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}
.death-banner-btn {
  min-height: 44px;
  border-color: var(--red);
  color: #ffd2da;
  background: rgba(255, 90, 90, 0.14);
}
.death-banner-btn:hover,
.death-banner-btn:focus-visible {
  background: rgba(255, 90, 90, 0.28);
  box-shadow: 0 0 12px var(--red-glow);
}
@media (prefers-reduced-motion: reduce) {
  .death-vignette,
  .death-banner {
    animation: none;
  }
}

/* ==========================================================================
   The Compendium's access pass (#850): screen readers, contrast, phones
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The page takes focus after a link (keyboard and pad keep their place); no ring for it */
.cmp-body:focus { outline: none; }
.cmp-body:focus-visible { outline: 1px dashed var(--border-cyan); outline-offset: -2px; }
.cmp-attribution small { font-size: inherit; }
@media (prefers-contrast: more) {
  .compendium-modal { --dim: #b9c5e0; }
  .cmp-tab { border-color: var(--fg); }
  .cmp-unknown, .cmp-empty, .cmp-kind { color: var(--fg); }
  .cmp-link { text-decoration-thickness: 2px; }
}
@media (forced-colors: active) {
  .cmp-tab.active { border: 2px solid Highlight; }
  .cmp-art-canvas { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  .compendium-modal, .compendium-modal * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Phones and touch screens: every control at least 44px, the search field at 16px so
   iOS does not zoom, and the dialog the whole screen (layout_check.js) */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape), (pointer: coarse) {
  .compendium-modal .cmp-tab,
  .compendium-modal .cmp-nav .btn-micro,
  .compendium-modal .cmp-suggest,
  .compendium-modal select,
  .compendium-modal button.cmp-crumb,
  .compendium-modal .cmp-list-controls button {
    min-height: 44px;
    min-width: 44px;
  }
  .compendium-modal .cmp-search, .compendium-modal select { font-size: 16px; min-height: 44px; }
}
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .compendium-modal { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .compendium-modal .modal-header { flex-wrap: wrap; gap: 6px; }
  .compendium-modal .cmp-search { flex: 1 1 120px; width: auto; margin: 0 4px; }
  .cmp-nav, .cmp-subtabs { padding: 6px 10px; }
  .cmp-tablist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cmp-tab { flex: 0 0 auto; }
  .cmp-body .cmp-table { display: block; overflow-x: auto; max-width: 100%; }
}
/* A phone upright: the search field gets a row of its own */
@media (max-width: 700px) and (orientation: portrait) {
  .compendium-modal .cmp-search { order: 3; flex: 1 1 100%; margin: 0; }
}
/* A phone on its side: one compact row of header, the tabs beside the history buttons */
@media (max-height: 500px) and (orientation: landscape) {
  .compendium-modal .modal-header { flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; }
  .compendium-modal .cmp-crumbs { display: none; }
}

/* ==========================================================================
   UPDATE PROMPT (#1040): a newer version is ready in the offline copy
   ========================================================================== */
.update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 12px;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  background: var(--bg-panel);
  box-shadow: 0 0 10px var(--cyan-glow);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
}

.update-toast.hidden {
  display: none;
}

.update-toast-text {
  flex: 1 1 auto;
}

.update-toast .btn-micro {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
}

.update-toast-reload {
  border-color: var(--lime);
  color: var(--lime);
}

/* The selection cursor's (A) (X) (Y) prompts (#1057): beside the cursor square, never over it */
.quick-prompts {
  grid-area: map;
  position: fixed;
  z-index: 21;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: min(320px, 70vw);
  padding: 4px 8px;
  box-sizing: border-box;
  background: rgba(4, 6, 13, 0.88);
  border: 1px solid var(--border-cyan);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  user-select: none;
}
.quick-prompts.hidden { display: none; }
.qp-btn { white-space: nowrap; }
.qp-glyph { color: var(--cyan); font-weight: 700; }
.qp-off { opacity: 0.55; }
.qp-off .qp-glyph { color: var(--dim); }
.qp-why { display: block; font-size: 12px; color: var(--dim); white-space: normal; max-width: 150px; }

/* The action wheel on a touch screen (#1066): the round button in the map's thumb corner,
   opposite the movement control (which sits bottom right); 56 px, over the map */
.btn-radial {
  grid-area: map;
  align-self: end;
  justify-self: end;
  z-index: 8;
  width: 56px;
  height: 56px;
  margin: 0 max(8px, env(safe-area-inset-right)) 8px 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: rgba(10, 16, 30, 0.78);
  color: var(--cyan);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 0 12px var(--cyan-glow);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.btn-radial.hidden { display: none; }
.btn-radial.is-armed {
  background: rgba(62, 231, 255, 0.28);
  color: #fff;
  border-color: #fff;
}
.btn-radial:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.death-view .btn-radial { display: none; }
/* Pick mode: the banner across the top of the map, and a reticle on the hero */
.radial-pick-banner {
  position: fixed;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-index: 72;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 16px);
  padding: 6px 10px;
  box-sizing: border-box;
  background: rgba(7, 12, 24, 0.94);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 0 12px var(--cyan-glow);
  color: var(--fg);
  font-size: 13px;
}
.radial-pick-banner.hidden { display: none; }
.radial-pick-cancel {
  min-width: 56px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  color: var(--cyan);
  font-size: 13px;
}
.radial-pick-reticle {
  position: fixed;
  z-index: 20;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px dashed var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan-glow);
  pointer-events: none;
}
.radial-pick-reticle.hidden { display: none; }
.touch-actions-chip {
  position: fixed;
  z-index: 71;
  min-width: 112px;
  min-height: 44px;
  padding: 0 12px;
  background: rgba(7, 12, 24, 0.96);
  border: 1px solid var(--cyan);
  border-radius: 22px;
  box-shadow: 0 0 12px var(--cyan-glow);
  color: var(--cyan);
  font-size: 14px;
  touch-action: manipulation;
}
.touch-actions-chip.hidden { display: none; }

/* The time stone's record (#1164) */
.tombstone-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 8px auto;
  max-width: 420px;
  font-size: 13px;
}
.tombstone-facts dt { color: rgba(255, 255, 255, 0.55); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.tombstone-facts dd { margin: 0; color: #fff; overflow-wrap: anywhere; }

/* The quest board and the journal's Quests tab (#1150) */
.quest-head { margin: 14px 0 6px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan, #3ee7ff); }
.quest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.quest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.quest-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quest-title { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.quest-meta { color: rgba(255, 255, 255, 0.6); font-size: 12px; }
.quest-state { color: rgba(255, 255, 255, 0.6); font-size: 12px; white-space: nowrap; }
.quest-empty { color: rgba(255, 255, 255, 0.6); margin: 6px 0; }
.quest-row button { flex: none; }

/* Map icons in the Tactical Map's legend (#1259) */
.tactical-map-icon-legend { margin-top: 6px; }
.legend-glyph { display: inline-block; min-width: 12px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-weight: bold; }