: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";
}

#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;
}

.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);
}

.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);
}

.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); }
.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(840px, 94vw);
  height: min(600px, 88vh);
}

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

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

.sheet-modal {
  width: min(940px, 95vw);
  height: min(760px, 90vh);
}

.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;
  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;
}

.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);
}
.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;
}

/* ---- 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);
}

/* NeonCrawl Classic: the edition line under the tagline */
.classic-edition {
  max-width: 560px;
  margin: 10px auto 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--gold);
}

.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);
}
/* 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 two codices, under the mode and race 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;
  }
}

/* ==========================================================================
   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;
  }
}

.arsenal-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  font-size: 11px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  user-select: none;
}

.arsenal-slot.clickable {
  cursor: pointer;
  transition: all 0.16s ease;
}

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

.slot-badge {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--dim);
  display: flex;
  align-items: center;
}

.slot-kbd {
  display: inline-block;
  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;
  margin-left: 3px;
}

.slot-icon {
  font-size: 13px;
  line-height: 1;
}

.slot-name {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-hint {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(50, 224, 120, 0.18);
  color: #32e078;
  border: 1px solid rgba(50, 224, 120, 0.4);
}

.slot-hint.empty {
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   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;
}

.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);
}

/* ---- 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-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);
}

/* A mode locked by another (#82: Free Ascent under Hard Mode) reads as unavailable */
.mode-card.is-disabled,
.mode-card.is-disabled:hover {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: rgba(111, 126, 166, 0.25);
  background: rgba(14, 22, 40, 0.6);
  box-shadow: none;
}

.mode-card.is-disabled .mode-checkbox {
  cursor: not-allowed;
}

.mode-lock-note {
  margin: 6px 0 0;
  font-size: 10px;
  font-weight: 700;
  color: #ff7b90;
}

.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);
}

.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;
}

.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;
}

/* ==========================================================================
   Races (#342): the title screen's race cards
   ========================================================================== */
.title-race-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(62, 231, 255, 0.3);
}
.race-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.race-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);
}
.race-glyph {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(0, 10, 20, 0.5);
  border: 1px solid rgba(62, 231, 255, 0.25);
}
.race-perks {
  color: var(--cyan);
  font-weight: 700;
}
.title-race-note {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
}
/* The Human's free pick lists every perk, by group: the list scrolls inside the dialog */
.perk-modal .perk-body {
  max-height: min(70vh, 720px);
}
.perk-group-heading {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
}

/* ==========================================================================
   Perk choice at level-up (#300)
   ========================================================================== */
.perk-modal {
  width: min(640px, calc(100vw - 24px));
}
.perk-body {
  padding: 14px 18px;
  overflow-y: auto;
  min-height: 0;
}
.perk-heading {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--dim);
}
.perk-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
/* Perk Codex (#305): one row per perk, grouped; an undiscovered perk is dimmed */
.perk-codex-list {
  max-height: min(70vh, 640px);
}
.perk-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);
}
.perk-codex-row.unknown {
  opacity: 0.55;
  border-style: dashed;
}
.perk-codex-badge {
  grid-area: badge;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  text-align: right;
}
.perk-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-perk-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-perk-link:hover,
.codex-perk-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;
}
.perk-note {
  margin: 0;
  color: var(--dim);
  font-style: italic;
}
.perk-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;
}
.perk-choice:hover,
.perk-choice:focus-visible {
  background: rgba(62, 231, 255, 0.2);
  border-color: var(--cyan);
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
.perk-key {
  grid-area: key;
  font-family: var(--font-mono);
  color: var(--lime);
}
.perk-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.perk-rank {
  grid-area: rank;
  font-size: 12px;
  color: var(--gold);
  text-align: right;
}
.perk-effect {
  grid-area: effect;
  font-size: 13px;
  color: var(--cyan);
}
.perk-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) {
  .perk-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; }

/* ==========================================================================
   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;
  }
  .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;
  }

  /* --- No arsenal bar: Zap and Throw name the readied item instead --- */
  #arsenal-bar {
    display: none;
  }

  /* --- 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;
  }
}

/* ==========================================================================
   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) {
  #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 actions"
      "status map actions"
      "log    map actions";
  }

  /* --- 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: 40px;
    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;
}
.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: end;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 4px;
  margin: 0 8px 8px 0;
  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: end;
  position: relative;
  z-index: 6;
  width: 136px;
  height: 136px;
  margin: 0 4px 4px 0;
  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) {
  /* --- 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-lock-note,
  .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,
  .slot-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,
  .arsenal-slot.clickable,
  #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;
  }
}