/* ─── Roguelord stylesheet ─────────────────────────────────────────────────── */

/* Self-hosted Cascadia Mono (plan pln_c185f892 §6). Falls through to OS
   monospace fonts via the `--game-mono` stack when the webfont 404s, since
   the deploy image may or may not include the woff2 asset. font-display: swap
   keeps the FOUT short. */
@font-face {
  font-family: 'Cascadia Mono';
  src: url('/static/fonts/CascadiaMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --bg:          #080808;
  --bg2:         #111111;
  --bg3:         #181818;
  --border:      #333333;
  --border-hi:   #4a4a4a;
  --section-sep: #1e3a1e;
  --text:        #cccccc;
  --text-dim:    #666666;
  --accent:      #88ff88;
  --red:         #ff4444;
  --gold:        #ffdd44;
  --blue:        #4488ff;
  --purple:      #aa44ff;
  --class-color: #ffffff;  /* overridden per-session by ui.js */

  --fool-pink:    var(--fool-pink);
  --success-green: var(--success-green);
  /* Unified game mono stack (plan pln_c185f892 §6). Cascadia Mono first when
     the self-hosted webfont loads; OS-level monospace fonts cover the
     fallback, all of which support the approved glyph sheet. Use
     `var(--mono)` everywhere in this stylesheet — `--symbol-font` is a
     deprecated alias kept for safety. */
  --game-mono: 'Cascadia Mono', 'DejaVu Sans Mono', 'Noto Sans Symbols2', 'Segoe UI Symbol', 'Consolas', 'Courier New', monospace;
  --mono: var(--game-mono);
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --symbol-font: var(--game-mono);

  --panel-w:  300px;
  --log-h:    130px;
}

html {
  width: 100%;
  height: 100%;
  background: #000;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
}

/* Game wrap — centers and scales the fixed 1106×692 game to fill the viewport */
#game-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
#game-screen {
  transform-origin: center center;
}

/* ─── Character creation ─────────────────────────────────────────────────── */

#char-create-screen,
#landing-screen,
#load-screen,
#about-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  background: radial-gradient(ellipse at center, #111 0%, #000 100%);
  z-index: 10;
}

.landing-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.landing-actions .btn-primary { width: 140px; padding: 12px; font-size: 1rem; }

.about-body {
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin: 20px 0;
  line-height: 1.6;
  font-size: 0.95rem;
}
.about-body p { margin: 8px 0; }
.about-body code { background: var(--bg2); padding: 1px 5px; border: 1px solid var(--border); color: var(--gold); }

.saves-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  margin: 20px 0;
}

.save-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px 12px;
}
.save-label { flex: 1; color: var(--text); }
.save-sub { color: var(--text-dim); font-size: 0.85rem; }
.save-btn { padding: 6px 12px; font-size: 0.9rem; }
.save-del { background: #803030; }
.save-del:hover { background: #a04040; }

/* Load screen footer: Back on the left, Delete All on the right */
.load-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

/* Danger button — red, used for destructive actions */
.btn-danger {
  background: #8b2222;
  color: #fff;
  border: 1px solid #aa3333;
  padding: 10px 20px;
  font-family: monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover:not(:disabled) { background: #aa3333; }
.btn-danger:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-danger.btn-sm { padding: 6px 14px; font-size: 0.85rem; }

/* Delete-all confirmation modal */
.delete-all-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1100;
}
.delete-all-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1101;
  background: #1a0a0a;
  border: 2px solid #aa3333;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
}
.delete-all-title {
  color: #ff6666;
  font-family: monospace;
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.delete-all-body {
  color: var(--text, #ccc);
  font-size: 0.9rem;
  margin: 0 0 10px;
  line-height: 1.5;
}
.delete-all-keyword { color: #ff4444; }
.delete-all-input {
  width: 100%;
  box-sizing: border-box;
  background: #0d0d0d;
  border: 1px solid #aa3333;
  color: #fff;
  font-family: monospace;
  font-size: 1rem;
  padding: 8px 10px;
  margin: 10px 0 18px;
  outline: none;
}
.delete-all-input:focus { border-color: #ff4444; }
.delete-all-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cc-wrapper {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 32px 40px;
  max-width: 700px;
  width: 100%;
}

.game-title {
  text-align: center;
  font-size: 2.4rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-shadow: 0 0 20px rgba(255, 221, 68, 0.5);
}

.game-sub {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

.cc-form { display: flex; flex-direction: column; gap: 16px; }

.cc-row { display: flex; align-items: center; gap: 12px; }
.cc-row label { width: 60px; color: var(--text-dim); }
.cc-row input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 13px;
}

.cc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cc-col { display: flex; flex-direction: column; gap: 8px; }
.cc-col label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; }

/* Custom race/class list — 3x3 grid of selectable cells */
.cc-list {
  background: var(--bg3);
  border: 1px solid var(--border);
  width: 100%;
  outline: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  padding: 6px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.cc-list:focus { border-color: var(--accent); }

.cc-list-item {
  position: relative;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.cc-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cell-color, var(--accent));
}
.cc-list-item.selected {
  background: var(--cell-color, var(--accent));
  border-color: var(--cell-color, var(--accent));
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 12px -2px var(--cell-color, var(--accent));
}
.cc-list-item.selected .cc-badge {
  color: #000 !important;
  text-shadow: none;
}
/* Race cells: glowing/pulsing letter */
.cc-list-item.cc-race .cc-badge {
  animation: cc-race-letter-glow 1.9s ease-in-out infinite;
}
.cc-list-item.cc-race.selected .cc-badge {
  animation: none;
}
@keyframes cc-race-letter-glow {
  0%, 100% {
    text-shadow:
      0 0 4px currentColor,
      0 0 10px currentColor;
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 12px currentColor,
      0 0 22px currentColor,
      0 0 4px #ffffff;
    transform: scale(1.06);
  }
}
.cc-list-item.cc-disabled {
  opacity: 0.55;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  border-style: dashed;
}
.cc-list-item.cc-disabled .cc-item-name {
  color: #888888;
}
.cc-list-item.cc-disabled:hover {
  background: rgba(255, 136, 0, 0.08);
  border-color: rgba(255, 136, 0, 0.5);
}
.cc-list-item.cc-disabled.selected {
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-weight: normal;
  box-shadow: none;
}
.cc-list-item.cc-disabled .cc-badge {
  animation: none;
  text-shadow: none;
  filter: grayscale(0.6);
}
.cc-item-locked {
  pointer-events: auto;
}
.cc-list-item.cc-forbidden {
  position: relative;
  opacity: 0.45;
  background: rgba(60, 0, 0, 0.4);
  border-color: rgba(255, 64, 64, 0.55);
  border-style: solid;
  cursor: not-allowed;
}
.cc-list-item.cc-forbidden .cc-item-name {
  color: #aa6666;
}
.cc-list-item.cc-forbidden .cc-badge {
  filter: grayscale(0.7);
  text-shadow: none;
  animation: none;
}
.cc-list-item.cc-forbidden::after {
  content: '\2715';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.6em;
  font-weight: bold;
  color: #ff3030;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.85), 0 0 14px rgba(255, 0, 0, 0.5);
  pointer-events: none;
  line-height: 1;
  z-index: 5;
}
.cc-lock-label {
  position: absolute;
  top: 3px;
  right: 5px;
  color: #ff8800;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 136, 0, 0.6);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  line-height: 1;
}
.cc-item-name {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-badge {
  font-family: 'Cascadia Code', 'Courier New', monospace;
  font-weight: bold;
  font-size: 2.1em;
  min-width: 1.2em;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 1.3em;
  transition: text-shadow 0.15s, transform 0.15s;
  will-change: text-shadow, transform;
}
.cc-char-preview-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.cc-char-preview {
  font-family: 'Cascadia Code', 'Courier New', monospace;
  font-size: 2.8em;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 14px currentColor;
  min-width: 1.2em;
  text-align: center;
  transition: color 0.15s;
  line-height: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.4em;
}
.cc-char-preview-label {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cc-desc {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 8px;
  font-size: 11px;
  color: var(--text-dim);
  min-height: 234px;
  max-height: 360px;
  overflow-y: auto;
  flex-shrink: 0;
  line-height: 1.55;
}

.cc-actions { display: flex; justify-content: center; margin-top: 8px; }

.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 10px 32px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.btn-primary:hover { background: #aaffaa; }

.cc-help {
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  margin-top: 16px;
}

.error-msg { color: var(--red); font-size: 12px; text-align: center; min-height: 16px; }
.error-msg.info { color: var(--text-dim); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Game screen layout ────────────────────────────────────────────────── */

#game-screen {
  /* Fixed 1106×680px box: 288 far-left + 518 center + 300 right.
     (Was 1188 with 240 + 648 + 300; far-left grew 120%, center shrank 80%.
      Height was 692 prior to v1.22.49 — trimmed 12px so the right-column
      SKILLS/QUESTS tab content stops getting clipped at the bottom.) */
  width: 1106px;
  height: 680px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.game-layout {
  display: flex;
  height: 100%;
  gap: 0;
}

.game-far-left {
  width: 288px;          /* was 240px (+20% again = 120% of 240) */
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 2px solid var(--border-hi);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.stats-panel {
  flex: 0 0 auto;
  overflow-y: visible;
  border-bottom: none;
}

.game-center {
  width: 518px;          /* was 648px (80%) */
  flex-shrink: 0;
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
}
.game-right {
  width: var(--panel-w);
  background: var(--bg2);
  border-left: 2px solid var(--border-hi);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  height: 100%;
}

/* Right-side stack: Inventory / Magic / Skills are each scrollable, share
   the available vertical space equally above the fixed-size Quests panel. */
.right-stack-panel {
  flex: 1 1 0;
  min-height: 60px;
  overflow-y: auto;
  padding: 4px 6px;
  border-bottom: 2px solid var(--border-hi);
}
.right-stack-panel .panel-title {
  position: sticky;
  top: 0;
  background: var(--bg2);
  padding: 2px 0;
  z-index: 2;
}

/* ─── Side-column top/bottom split ───────────────────────────────────────────
   Both the left column (MAP+PARTY+STATS / STATUS|EQUIPMENT) and the right
   column (INVENTORY / SKILLS|QUESTS) split vertically 50/50 so the bottom
   tab groups on each side start at the same Y. */
.left-top-section,
.right-top-section {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Tab group container: fills the bottom half, holds a tab bar and one
   visible tab-content panel that scrolls internally. */
.panel-tab-group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-top: 2px solid var(--border-hi);
}
.panel-tab-bar {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg2);
  flex: 0 0 auto;
}
.panel-tab {
  flex: 1;
  background: #111827;
  color: #9ca3af;
  border: 1px solid #374151;
  border-bottom: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
}
.panel-tab.on {
  background: var(--gold);
  color: #0a0a0a;
  font-weight: bold;
  border-color: var(--gold);
}
.panel-tab-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.panel-tab-content:not(.on) { display: none; }
/* Higher-specificity hide rules — needed because #skills-panel and #quests-panel
   below set `display: flex` / dimensions via id selectors (specificity 0,1,0,0)
   which would otherwise override the class-level hide rule above. */
#skills-panel.panel-tab-content:not(.on),
#quests-panel.panel-tab-content:not(.on),
#status-passive-panel.panel-tab-content:not(.on),
#equip-panel.panel-tab-content:not(.on) { display: none; }

/* ─── Floor info bar ─────────────────────────────────────────────────────── */

.floor-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border-hi);
  flex-shrink: 0;
  min-height: 24px;
}

.floor-info {
  padding: 3px 8px;
  font-size: 9px;
  color: var(--text-dim);
  flex: 1;
  letter-spacing: 0.04em;
  font-family: var(--sans);
}

.floor-info.fade-in-out {
  animation: floor-fade 3s ease-in-out forwards;
}

/* ─── Centered level text (Town / Dungeon Level X) overlay ─────────────── */
.level-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 50;
}

.level-text {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(255, 221, 68, 0.4), 0 2px 10px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.15em;
  /* Hidden by default — only the level-fade animation reveals it. Without
     this the static "Town" placeholder text would overlap the centered
     tutorial popup on initial spawn. */
  opacity: 0;
}

.level-text.fade-in-out {
  animation: level-fade 6s ease-in-out forwards;
}

.feature-request-top-btn,
.bug-report-top-btn {
  margin-right: 4px;
  height: 13px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 6px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.feature-request-top-btn {
  min-width: 36px;
  border: 1px solid #2aaa4a;
  background: #114a22;
  color: #b3ffc4;
}

.feature-request-top-btn:hover {
  background: #18642c;
  color: #d0ffd9;
  border-color: #3acc5f;
}

.bug-report-top-btn {
  min-width: 26px;
  border: 1px solid #aa2a2a;
  background: #4a1111;
  color: #ffb3b3;
}

.bug-report-top-btn:hover {
  background: #641818;
  color: #ffd0d0;
  border-color: #cc3a3a;
}

.status-icons {
  padding: 2px 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 0;
  align-content: flex-start;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.status-icons.is-empty {
  display: none;
}

.status-icon {
  font-size: 12px;
  cursor: default;
}

/* ─── Canvas ──────────────────────────────────────────────────────────────── */

.canvas-wrap {
  flex: 1;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--section-sep);
}

/* ── Critical-resource edge glows ──────────────────────────────────────────
   - .low-hunger-glow: slow yellow pulse projecting OUTSIDE the panel edges
     (hunger < 5% of max). Driven by box-shadow on the .canvas-wrap element
     itself — overflow:hidden only clips children, not the element's own
     outer box-shadow.
   - .low-hp-glow: slow red pulse on the INSIDE of the panel edges (HP <
     25% of max). Painted via a ::after pseudo-element so it never fights
     the outer yellow glow for the box-shadow property when both states
     are active simultaneously.
   Both pulses run on independent timings so the player can read them as
   two distinct warnings rather than one blended one. */
.canvas-wrap.low-hunger-glow {
  animation: rl-glow-low-hunger 2200ms ease-in-out infinite;
}
@keyframes rl-glow-low-hunger {
  0%, 100% {
    box-shadow: 0 0 16px 2px rgba(255, 215, 0, 0.45),
                0 0 32px 6px rgba(255, 185, 0, 0.25);
  }
  50% {
    box-shadow: 0 0 30px 8px rgba(255, 215, 0, 0.85),
                0 0 60px 14px rgba(255, 185, 0, 0.55);
  }
}
.canvas-wrap.low-hp-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  animation: rl-glow-low-hp 1600ms ease-in-out infinite;
}
@keyframes rl-glow-low-hp {
  0%, 100% {
    box-shadow: inset 0 0 24px 4px rgba(255, 50, 50, 0.50),
                inset 0 0 50px 10px rgba(255, 20, 20, 0.25);
  }
  50% {
    box-shadow: inset 0 0 44px 12px rgba(255, 50, 50, 0.90),
                inset 0 0 80px 22px rgba(255, 20, 20, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-wrap.low-hunger-glow,
  .canvas-wrap.low-hp-glow::after {
    animation-duration: 6000ms;
  }
}

#game-canvas {
  display: block;
  image-rendering: pixelated;
}

/* ── Canvas-overlay clickable hotkey buttons (assigned skills/spells) ───────
   Positioned along the bottom of the game canvas, just above the hotkey panel.
   One button per assigned slot (1..0, -, =); ~3 tiles wide (48px) by 1 tile
   tall (20px). 80% opacity per spec. Hidden slots are simply not rendered. */
.canvas-hotkeys {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 25;
  opacity: 0.8;
  pointer-events: none;   /* container itself doesn't intercept canvas clicks */
}
.canvas-hotkey-btn {
  pointer-events: auto;
  width: 48px;
  height: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(10, 10, 18, 0.85);
  border: 1px solid var(--ch-c, #6a7280);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  line-height: 1;
  user-select: none;
  transition: background 80ms ease, transform 80ms ease;
}
.canvas-hotkey-btn:hover {
  background: rgba(28, 32, 48, 0.95);
  transform: translateY(-1px);
}
.canvas-hotkey-btn:active {
  background: rgba(40, 44, 60, 0.95);
  transform: translateY(0);
}
@keyframes rl-toggle-glow {
  0%, 100% {
    box-shadow: 0 0 4px 1px var(--ch-c, #ffcc55),
                0 0 10px 2px var(--ch-c, #ffcc55) inset;
    border-color: var(--ch-c, #ffcc55);
  }
  50% {
    box-shadow: 0 0 10px 3px var(--ch-c, #ffcc55),
                0 0 16px 4px var(--ch-c, #ffcc55) inset;
    border-color: #ffffff;
  }
}
.canvas-hotkey-btn.is-active {
  background: rgba(40, 36, 24, 0.92);
  animation: rl-toggle-glow 1.4s ease-in-out infinite;
  border-width: 2px;
}
.canvas-hotkey-btn.is-active .canvas-hotkey-label,
.canvas-hotkey-btn.is-active .canvas-hotkey-key {
  color: var(--ch-c, #ffcc55);
  text-shadow: 0 0 4px var(--ch-c, #ffcc55), 0 1px 0 #000;
  font-weight: 800;
}
.canvas-hotkey-key {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 #000;
}
.canvas-hotkey-label {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 80% of previous 8px sizing (per UX request). */
  font-size: 6.4px;
  color: var(--ch-c, #cccccc);
  padding: 0 2px;
  text-align: center;
  text-shadow: 0 1px 0 #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ─── Message log ──────────────────────────────────────────────────────────── */

.message-log {
  height: 130px;
  background: var(--bg2);
  border-top: 3px solid var(--section-sep);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.log-title { font-weight: bold; }

.log-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.log-flt-btn,
.log-clear-btn,
.log-copy-btn {
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  border-radius: 3px;
  font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Symbola', inherit;
  font-variant-emoji: text;
}
.log-flt-btn,
.log-clear-btn {
  background: none;
  border: 1px solid transparent;
  padding: 1px 4px;
  opacity: 0.45;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.log-flt-btn:hover,
.log-clear-btn:hover { opacity: 1; }
.log-flt-btn.active {
  opacity: 1;
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
}
.log-clear-btn:hover { color: var(--red); }

.log-copy-btn {
  position: absolute;
  bottom: 3px;
  right: 4px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border);
  padding: 1px 5px;
  opacity: 0.55;
  z-index: 2;
  transition: opacity 0.12s, color 0.12s;
}
.log-copy-btn:hover { opacity: 1; color: var(--text); }
.log-copy-btn.copy-ok { color: var(--green, #44ff88); opacity: 1; }

.log-entries {
  flex: 1;
  overflow-y: auto;
  padding: 3px 8px 16px 8px; /* room for copy btn at bottom */
  display: flex;
  flex-direction: column-reverse;
}

.log-msg {
  font-size: 9px;        /* +2 from 7px */
  padding: 1px 0;
  line-height: 1.4;
  font-family: var(--sans);
}

.log-ts {
  color: var(--text-dim);
  font-size: 8px;        /* +2 from 6px */
  opacity: 0.7;
  margin-right: 2px;
}

/* Per-category fine-tuning (optional; inline style still drives color) */
.log-msg.log-cat-error { font-weight: bold; }

/* ─── Hotkey bar (5 rows, consolidated reference, above log) ────────────── */

.hotkey-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg3);
  border-top: 1px solid var(--border-hi);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 3px 6px;
  gap: 4px;
}

/* Tutorial mode hides the all-hotkeys cheat-sheet bar — the step-by-step
   tutorial banner teaches one binding at a time and the full reference
   contradicts that flow. Restored on tutorial exit (_cleanupTutorialUI). */
body.tutorial-active #hotkey-bar { display: none; }

/* Table fills remaining width */
.hk-table {
  flex: 1;
  border-collapse: collapse;
  min-width: 0;
}

.hk-table tr + tr td {
  padding-top: 2px;
}

.hk-row-label {
  width: 46px;
  min-width: 46px;
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  padding-right: 4px;
  white-space: nowrap;
}

.hk-side-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
}

/* Chips row inside each cell */
.hk-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.hk-empty {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  padding: 1px 5px;
}

/* Base chip */
.hk-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-size: 8px;
  cursor: default;
  white-space: nowrap;
  font-family: var(--sans);
}

.hk-chip-key {
  color: var(--gold);
  font-weight: bold;
  font-size: 7px;
}

.hk-chip-label {
  color: var(--text-dim);
}

.hk-chip.is-active {
  background: rgba(40, 36, 24, 0.95);
  border-color: var(--ch-c, #ffcc55);
  animation: rl-toggle-glow 1.4s ease-in-out infinite;
}
.hk-chip.is-active .hk-chip-label,
.hk-chip.is-active .hk-chip-key {
  color: var(--ch-c, #ffcc55);
  text-shadow: 0 0 4px var(--ch-c, #ffcc55);
  font-weight: 700;
}

/* Direction chip: label left, key right */
.hk-chip-dir {
  gap: 2px;
  padding: 1px 4px;
}

.hk-chip-dir-name {
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.hk-expand-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--gold);
  width: 18px;
  height: 18px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.hk-expand-btn:hover { background: var(--bg2); }

/* ─── Right panel ──────────────────────────────────────────────────────────── */

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  width: 70%;
  align-self: flex-start;
}

.tab-btn {
  flex: 1;
  background: var(--bg3);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 2px;
  font-family: var(--sans);
  font-size: 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.tab-btn:last-child { border-right: none; }
.tab-btn.active { background: var(--bg2); color: var(--accent); }
.tab-btn:hover { color: var(--text); }

.panel {
  padding: 6px;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
  letter-spacing: 0.08em;
}

.panel-credit {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px 0 0 0;
  margin-top: auto;
}

.panel-credit a {
  color: var(--text-dim);
  text-decoration: none;
}

.panel-credit a:hover {
  color: var(--text);
}

.class-sigil {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.9;
  vertical-align: middle;
}

/* Stats panel */
.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1px;
}

/* Limit stat bars in the stats panel to 75% of their unconstrained width */
#stats-panel .stat-row .bar-wrap {
  flex: 0 0 55%;
}

.stat-label {
  width: 28px;
  font-family: var(--sans);
  font-size: 9px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--bg3);
  border: 1px solid var(--border);
  overflow: hidden;
}

.bar-wrap.sm { height: 5px; }

.bar { height: 100%; transition: width 0.15s; }
.hp-bar     { background: var(--red); }
.grit-bar   { background: #e07820; }
.mp-bar     { background: var(--blue); }
.ap-bar     { background: #b58dff; }
.xp-bar     { background: var(--gold); }
.hunger-bar { background: #ffcc00; }
.skill-bar  { background: #6688ff; min-width: 3px; }

.stat-val {
  font-size: 9px;
  color: var(--text-dim);
  width: 46px;
  text-align: right;
  flex-shrink: 0;
}

.stat-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
}

.stat-grid .s {
  font-size: 9px;
  color: var(--text);
}
.s-str { color: #ff8844; }
.s-int { color: #88aaff; }
.s-wis { color: #cc88ff; }
.s-dex { color: #88dd44; }
.s-con { color: #ffcc44; }
.s-chr { color: #ff88cc; }

.info-row {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Stat allocation ⊕ buttons */
.alloc-btn {
  background: transparent;
  border: none;
  color: var(--gold);
  font-size: 12px;
  line-height: 1;
  padding: 0 1px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 2px;
}
.alloc-btn:hover { background: var(--gold); color: var(--bg); }

/* Ability / stat points unspent badge */
.ability-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  font-size: 10px;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  animation: badge-pulse 1.4s ease-in-out infinite;
}
.ability-badge.rp-badge { background: #88aaff; }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Inventory panel — Design 13 base + Design 7 weight + Design 12 detail */
.inv-list { /* scroll handled by .right-stack-panel — no inner scroll */ }

.inv-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.inv-gold {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: bold;
  color: #ffcc33;
  text-shadow: 0 0 4px rgba(255, 204, 51, 0.35);
  margin-bottom: 4px; /* match .panel-title's bottom gap so baselines align */
}
.inv-search-row {
  padding: 3px 0 2px;
  display: flex;
  gap: 4px;
}
.inv-search-input {
  flex: 0 1 80%;
  min-width: 0;
  background: var(--bg3, #111);
  border: 1px solid var(--border, #333);
  color: var(--text, #ddd);
  font-family: var(--sans);
  font-size: 9px;        /* 80% of original 11px */
  padding: 1px 5px;      /* 80% of original 2px 6px */
  outline: none;
}
.inv-search-input:focus { border-color: var(--accent, #8af); }
.inv-sort-select {
  background: var(--bg3, #111);
  border: 1px solid var(--border, #333);
  color: var(--text, #ddd);
  font: 8px var(--mono); /* 80% of original 9.5px */
  padding: 1px 3px;      /* 80% of original 2px 4px */
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.inv-sort-select:hover { border-color: var(--border-hi); }
.inv-empty { color: var(--text-dim); font-size: 11px; padding: 4px; }

/* (Category filter buttons removed \u2014 search + sort cover this UX now.) */

/* ── Design 13 flat row list ───────────────────────────────────────────── */
.ivd13-row {
  display: grid;
  grid-template-columns: 16px 1fr auto 28px;
  gap: 5px;
  align-items: center;
  font: 8.5px var(--mono);
  padding: 2px 4px;
  border-bottom: 1px solid #1c2333;
  cursor: pointer;
  white-space: nowrap;
}
.ivd13-row:hover  { background: #161e2c; }
.ivd13-row.selected { background: #1a2a3f; outline: 1px solid var(--accent); }
.ivd13-row.equipped .ivd13-nm { font-weight: 500; }
.ivd13-g  { font-weight: bold; text-align: center; }
.ivd13-nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ivd13-ct { color: #9ca3af; font-size: 8px; }
.ivd13-wt { color: var(--text-dim); font-size: 8px; text-align: right; }
.ivd13-badges { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.ivd13-eq {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font: bold 8px var(--mono);
  padding: 0 2px;
  border-radius: 2px;
}
.ivd13-quest {
  display: inline-block;
  background: #c084fc;
  color: #1a1330;
  font: bold 8px var(--mono);
  padding: 0 2px;
  border-radius: 2px;
}
.ivd13-fbind {
  display: inline-block;
  background: #5b3ddf;
  color: #ffffff;
  font: bold 8px var(--mono);
  padding: 0 3px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* Legacy aliases so old code paths still render (renderInventoryItem) */
.inv-item.selected { background: #1a2a3f; }
.inv-item.equipped { color: var(--gold); }

/* ── Design 12 detail panel as a floating popover anchored to the row ─── */
.inv-detail {
  padding: 8px;
  background: #1a2333;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #2d3a55;
}
.inv-popover {
  position: fixed;
  z-index: 60;
  width: 200px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.65);
  pointer-events: auto;
}

/* ── Hotkey assignment popup (body-level, escapes #game-screen scale) ─── */
.hotkey-popup {
  position: fixed;
  z-index: 70;
  background: #1a2333;
  border: 1px solid #2d3a55;
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.65);
  width: 220px;
}
.hkp-title {
  font: 8px var(--mono);
  color: #7a8aa6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.hkp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}
.hkp-slot {
  background: #0d1422;
  border: 1px solid #2d3a55;
  color: var(--text);
  font: bold 10px var(--mono);
  padding: 4px 0;
  cursor: pointer;
  border-radius: 2px;
}
.hkp-slot:hover { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.hkp-slot.occupied { color: var(--fool-pink); }
.hkp-slot.occupied:hover { background: var(--fool-pink); color: #0a0a0a; border-color: var(--fool-pink); }
.hkp-cancel {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font: 9px var(--mono);
  padding: 3px 0;
  border-radius: 2px;
  cursor: pointer;
}
.hkp-cancel:hover { color: var(--text); border-color: var(--border-hi); }

/* ── Layer C — Ranged chooser popup (Shift+F / long-press F) ───────────── */
.ranged-chooser {
  position: fixed;
  z-index: 80;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  background: #0e1626;
  border: 1px solid #2d3a55;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  color: var(--text);
  font: 11px var(--mono);
}
.rcp-title {
  font: bold 12px var(--mono);
  color: var(--accent);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.04em;
}
.rcp-title .rcp-hint {
  font: 9px var(--mono);
  color: var(--text-dim);
  font-weight: normal;
  display: block;
  margin-top: 2px;
}
.rcp-sections { display: flex; flex-direction: column; gap: 6px; }
.rcp-section { display: flex; flex-direction: column; }
.rcp-section-head {
  font: bold 10px var(--mono);
  color: #aabbdd;
  padding: 4px 2px 2px;
  border-top: 1px dashed #2d3a55;
  letter-spacing: 0.03em;
}
.rcp-section:first-child .rcp-section-head { border-top: 0; padding-top: 0; }
.rcp-autofed { color: #66cc99; font-weight: normal; }
.rcp-row {
  display: grid;
  grid-template-columns: 28px 18px 1fr 40px;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.08s;
}
.rcp-row:hover:not(.rcp-empty):not(.rcp-disabled) { background: #1a2540; }
.rcp-row.rcp-empty {
  color: var(--text-dim);
  font-style: italic;
  cursor: default;
  text-align: center;
  display: block;
  padding: 3px 4px 3px 32px;
}
.rcp-letter { color: var(--accent); font-weight: bold; }
.rcp-glyph { font-weight: bold; text-align: center; }
.rcp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-count { color: var(--text-dim); text-align: right; }
.rcp-active { color: #66cc99; font-size: 9px; }
.rcp-unid { color: #888; font-size: 9px; font-style: italic; }
.rcp-fam-glyph { font-weight: bold; }
.rcp-footer { margin-top: 8px; padding-top: 6px; border-top: 1px solid #2d3a55; }
.rcp-clear {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font: 10px var(--mono);
  padding: 4px 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}
.rcp-clear:hover { color: var(--text); border-color: var(--accent); background: #1a2540; }
.ivd-glyph {
  font: bold 28px var(--mono);
  line-height: 1;
  margin-bottom: 4px;
}
.ivd-name {
  font: bold 11px var(--mono);
  margin-bottom: 2px;
  word-break: break-word;
}
.ivd-eq {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font: bold 8px var(--mono);
  padding: 0 3px;
  margin-left: 3px;
  border-radius: 2px;
}
.ivd-sub  { font: 8.5px var(--mono); color: #7a8aa6; margin-bottom: 4px; letter-spacing: 0.03em; }
.ivd-desc { font: 9.5px var(--mono); color: #cdd6e3; margin: 4px 0; line-height: 1.4; text-align: left; }
.ivd-meta { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.ivd-meta span {
  background: #0d1422;
  color: #aaccff;
  font: 9px var(--mono);
  padding: 1px 6px;
  border-radius: 2px;
}
.ivd-inspect-box {
  font: 9.5px var(--mono);
  color: #cdd6e3;
  line-height: 1.4;
  text-align: left;
  background: #0d1422;
  border: 1px solid #2d3a55;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0 0;
}
.ivd-inspect-title {
  font: 9.5px var(--mono);
  color: #ddccff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ivd-inspect-list {
  margin: 0;
  padding-left: 14px;
  list-style: disc;
}
.ivd-inspect-list li { margin: 1px 0; }
.ivd-actions {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.enchant { color: var(--accent); }
.cursed  { color: var(--red); }

.btn-sm {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 10px;
  padding: 3px;
  cursor: pointer;
}
.btn-sm:hover { background: var(--border); }

/* Skills panel */
/* ─── Skills panel: header above scroll, not sticky inside it ────────────── */
#skills-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Tutorial highlight — glowing yellow box around a panel to draw the player's
   eye during a tutorial step (e.g. step 5: bind Holy Smite to a hotkey). */
.tutorial-highlight {
  position: relative;
  outline: 2px solid #ffd84a;
  outline-offset: 2px;
  border-radius: 4px;
  animation: tutorial-glow-pulse 1.4s ease-in-out infinite;
  z-index: 5;
}
@keyframes tutorial-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 6px 2px rgba(255, 216, 74, 0.55),
                0 0 14px 4px rgba(255, 216, 74, 0.25);
  }
  50% {
    box-shadow: 0 0 12px 4px rgba(255, 216, 74, 0.95),
                0 0 24px 10px rgba(255, 216, 74, 0.5);
  }
}

/* Tutorial UI-step framing: dim every non-target panel + the canvas so the
   player's eye lands on the one panel they need to interact with. Applied
   by engine.js _applyTutorialUIFraming for steps 5/7/8/10/11. */
.tutorial-dim {
  opacity: 0.22;
  filter: grayscale(0.75);
  transition: opacity 220ms ease, filter 220ms ease;
  pointer-events: none;
}
/* The highlighted target panel keeps full opacity regardless of dim siblings. */
.tutorial-highlight.tutorial-dim,
body.tutorial-ui-step .tutorial-highlight {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* Glowing orange arrow pointing at the active tutorial target panel.
   Built from two stacked CSS triangles (outer = glow, inner = solid fill)
   plus a wider rounded shaft so it reads as an arrow from across the screen.
   .tutorial-arrow-left points RIGHT (sits to the LEFT of its target);
   .tutorial-arrow-right points LEFT (sits to the RIGHT of its target). */
#tutorial-arrow {
  position: fixed;
  width: 36px;
  height: 36px;
  z-index: 10000;
  pointer-events: none;
  display: none;
}
.tutorial-arrow::before {
  /* shaft */
  content: '';
  position: absolute;
  top: 13px;
  width: 20px;
  height: 10px;
  background: #ff9a1f;
  border-radius: 3px;
  box-shadow: 0 0 10px 2px rgba(255, 154, 31, 0.85),
              0 0 22px 6px rgba(255, 154, 31, 0.45);
}
.tutorial-arrow::after {
  /* head */
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top:    18px solid transparent;
  border-bottom: 18px solid transparent;
  filter: drop-shadow(0 0 8px rgba(255, 154, 31, 0.95))
          drop-shadow(0 0 16px rgba(255, 154, 31, 0.55));
}
.tutorial-arrow-left::before  { left: 0; }
.tutorial-arrow-left::after   { right: 0; border-left:  20px solid #ff9a1f; }
.tutorial-arrow-right::before { right: 0; }
.tutorial-arrow-right::after  { left: 0;  border-right: 20px solid #ff9a1f; }
.tutorial-arrow {
  animation: tutorial-arrow-bob 1.05s ease-in-out infinite;
}
@keyframes tutorial-arrow-bob {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.85;
  }
  50% {
    transform: translateX(8px);
    opacity: 1;
  }
}
.tutorial-arrow-right {
  animation-name: tutorial-arrow-bob-rev;
}
@keyframes tutorial-arrow-bob-rev {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.85;
  }
  50% {
    transform: translateX(-8px);
    opacity: 1;
  }
}
/* Skills panel: header (tabs + orbs) and body merged into one visual panel —
   no border or background change between them. */
.sk-sticky-header {
  flex-shrink: 0;
  background: transparent;
  padding: 4px 6px 0;
  margin-bottom: 0;
}
.sk-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 6px;
}
.skills-list { /* scroll handled by .right-stack-panel — no inner scroll */ }

/* Skills category tabs: 4 letter-only buttons (F/S/H/I) — same logic as magic
   spell orbs. The button itself is just a colored letter; the G34-style
   status-effect halo appears as a glow around the letter on hover and
   persists when the tab is .active. */
.skill-cat-tabs {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}

.skill-class-btn {
  font-size: 17px;
}

/* ─── Shared letter-button base (skill-cat-btn + spell-orb) ─── */
.skill-cat-btn,
.spell-orb {
  position: relative;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font: bold 18px/1 'Cascadia Code', 'Consolas', monospace;
  color: var(--btn-c, #888);
  text-shadow: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
  transition: transform 80ms ease, text-shadow 120ms ease, filter 120ms ease;
}
.skill-cat-btn > *,
.spell-orb > * { position: relative; z-index: 3; }

/* Glow only on hover */
.skill-cat-btn:hover,
.spell-orb:hover {
  text-shadow:
    0 0 4px var(--btn-c, #888),
    0 0 8px color-mix(in srgb, var(--btn-c, #888) 55%, transparent);
}
/* Glow + drop shadow on active (click-selected) */
.skill-cat-btn.active,
.spell-orb.active {
  text-shadow:
    0 0 4px var(--btn-c, #888),
    0 0 8px color-mix(in srgb, var(--btn-c, #888) 55%, transparent),
    0 1px 1px rgba(0,0,0,0.7);
}

/* G34 status-effect halo lives in ::before */
/* ─── G34 floating-char particle animation — all 11 skill/orb buttons ──── */

/* Particles 1 & 2: ::before and ::after — staggered floating unicode chars */
.skill-cat-btn::before, .skill-cat-btn::after,
.spell-orb::before,     .spell-orb::after {
  content: var(--char, '✦');
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  white-space: nowrap;
  color: var(--btn-c);
  text-shadow: 0 0 6px var(--btn-c), 0 0 3px rgba(255,255,255,.4);
  /* Sine-wave drift: ::before drifts right-then-left, ::after is mirrored */
  --drift-a:  8px;
  --drift-b: -6px;
}
/* Particle 2 (::after): mirror drift direction */
.skill-cat-btn::after, .spell-orb::after {
  --drift-a: -8px;
  --drift-b:  6px;
}
/* Particle 3: .pt child span */
.skill-cat-btn .pt, .spell-orb .pt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.skill-cat-btn .pt::before, .spell-orb .pt::before {
  content: var(--char, '✦');
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  white-space: nowrap;
  color: var(--btn-c);
  text-shadow: 0 0 6px var(--btn-c), 0 0 3px rgba(255,255,255,.4);
  /* Particle 3 (center): asymmetric drift for visual variety */
  --drift-a:  5px;
  --drift-b: -7px;
}
.skill-cat-btn:hover,
.spell-orb:hover { transform: scale(1.15); }
/* Float on hover or active — 3 staggered particles */
.skill-cat-btn:hover::before,  .spell-orb:hover::before,
.skill-cat-btn.active::before, .spell-orb.active::before {
  animation: float-rise var(--float-dur, 1.2s) ease-out infinite;
  animation-delay: 0s;
}
.skill-cat-btn:hover::after,   .spell-orb:hover::after,
.skill-cat-btn.active::after,  .spell-orb.active::after {
  animation: float-rise var(--float-dur, 1.2s) ease-out infinite;
  animation-delay: calc(var(--float-dur, 1.2s) * -0.33);
}
.skill-cat-btn:hover .pt::before,  .spell-orb:hover .pt::before,
.skill-cat-btn.active .pt::before, .spell-orb.active .pt::before {
  animation: float-rise var(--float-dur, 1.2s) ease-out infinite;
  animation-delay: calc(var(--float-dur, 1.2s) * -0.67);
}
.skill-cat-btn.active,
.spell-orb.active { filter: brightness(1.25); }

/* ── Color + float-duration + char per general category ── */
.skill-cat-btn[data-skill-cat="FIGHTING"] { --btn-c: #b87234; --float-dur: 1.75s; --char: '∴'; }
.skill-cat-btn[data-skill-cat="SOCIAL"]   { --btn-c: #ff8a1a; --float-dur: 2.2s;  --char: '♦'; }
.skill-cat-btn[data-skill-cat="HEALTH"]   { --btn-c: #5cd84a; --float-dur: 2.35s; --char: '✚'; }
.skill-cat-btn[data-skill-cat="INSIGHT"]  { --btn-c: #ff6ec7; --float-dur: 2.5s;  --char: '◆'; }

/* ── Color + float-duration per magic school ── */
.spell-orb[data-school="FIRE"]   { --btn-c: #ff4422; --float-dur: 1.65s; }
.spell-orb[data-school="NATURE"] { --btn-c: #44dd44; --float-dur: 2.35s; }
.spell-orb[data-school="METAL"]  { --btn-c: #d8d8e0; --float-dur: 1.85s; }
.spell-orb[data-school="LIGHT"]  { --btn-c: #fff4b0; --float-dur: 1.65s; }
.spell-orb[data-school="DARK"]   { --btn-c: #b07aff; --float-dur: 2.85s; }
.spell-orb[data-school="WIND"]   { --btn-c: #9ce8e8; --float-dur: 1.4s; }
.spell-orb[data-school="WATER"]  { --btn-c: #44bbff; --float-dur: 2.5s; }

/* Locked spell orbs */
.spell-orb.locked { opacity: 0.32; filter: brightness(0.7); }
.spell-orb.locked::before,
.spell-orb.locked::after { display: none; }

/* ── Design 5 — full-text pill tabs + school-name tags ─────────────────────
   Overrides the legacy single-letter button rendering above when the tab
   or orb carries the .sk-cat-btn / .sk-school-orb marker class. */
.skill-cat-tabs.sk-cat-tabs {
  display: flex;
  grid-template-columns: none;
  gap: 3px;
  margin: 3px 0 4px;
}
/* Shared base: flat pill tab buttons (skill categories + spell schools) */
.skill-cat-btn.sk-cat-btn,
.spell-orb.sk-school-orb {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 3px;
  font-family: var(--sans);
  font-weight: 500;
  height: auto;
  text-transform: uppercase;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.skill-cat-btn.sk-cat-btn {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 3px 4px;
  font-size: 8.5px;
  color: #9ca3af;
  letter-spacing: 0.04em;
}
.skill-cat-btn.sk-cat-btn::before,
.skill-cat-btn.sk-cat-btn::after,
.spell-orb.sk-school-orb::before,
.spell-orb.sk-school-orb::after { display: none !important; }
.skill-cat-btn.sk-cat-btn:hover,
.spell-orb.sk-school-orb:hover,
.eq-tab:hover {
  background: #243049;
  color: var(--text);
  border-color: #6b7280;
}
.skill-cat-btn.sk-cat-btn.active {
  background: var(--c, var(--gold));
  color: #0a0a0a;
  font-weight: bold;
  border-color: var(--c, var(--gold));
}

.magic-orbs.sk-school-orbs {
  display: flex;
  gap: 2px;
  margin: 0 0 2px;
}
.magic-orbs.sk-school-orbs .spell-orb-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.spell-orb.sk-school-orb {
  width: 100%;
  padding: 2px 2px;
  font-size: 7.5px;
  color: var(--c, #88aaff);
  letter-spacing: 0.03em;
}
.spell-orb.sk-school-orb.active {
  background: var(--c, #88aaff);
  color: #0a0a0a;
  font-weight: bold;
  border-color: var(--c, #88aaff);
}
.spell-orb.sk-school-orb.locked { opacity: 0.3; cursor: not-allowed; }
.magic-orbs.sk-school-orbs .spell-orb-lock-level {
  position: absolute;
  top: -2px;
  right: 0;
  background: #0d1422;
  color: #fcd34d;
  font: bold 7px var(--mono);
  padding: 0 3px;
  border-radius: 6px;
  line-height: 1.2;
}

/* ── Float keyframe variants ── */

/* Smooth wavy rise — water, nature, health, light, social
   --drift-a / --drift-b: pixel offset at each sine peak (set per pseudo-element)
   translateX(calc(-50% + var(--drift-a))) gives real pixel oscillation */
@keyframes float-rise {
  0%   { transform: translateX(-50%) translateY(0);                                     opacity: 0;    filter: brightness(1); }
  15%  { opacity: 0.55;                                                                                filter: brightness(1.1); }
  35%  { transform: translateX(calc(-50% + var(--drift-a, 0px))) translateY(-9px);     opacity: 0.5;  filter: brightness(1.4); }
  65%  { transform: translateX(calc(-50% + var(--drift-b, 0px))) translateY(-18px);    opacity: 0.25; filter: brightness(1.6); }
  85%  { transform: translateX(calc(-50% + var(--drift-a, 0px))) translateY(-24px);    opacity: 0.1; }
  100% { transform: translateX(-50%) translateY(-28px);                                opacity: 0;    filter: brightness(1); }
}
/* Flickery ember drift — fire, fighting */
@keyframes float-ember {
  0%   { transform: translateX(-50%) translateY(0);                                     opacity: 0;    filter: brightness(1); }
  10%  { opacity: 0.55;                                                                                filter: brightness(1.15); }
  30%  { transform: translateX(calc(-50% + var(--drift-a, 0px))) translateY(-8px);     opacity: 0.5;  filter: brightness(1.5); }
  55%  { transform: translateX(calc(-50% + var(--drift-b, 0px))) translateY(-16px);    opacity: 0.35; filter: brightness(1.7); }
  80%  { transform: translateX(calc(-50% + var(--drift-a, 0px))) translateY(-24px);    opacity: 0.12; }
  100% { transform: translateX(-50%) translateY(-28px);                                opacity: 0;    filter: brightness(1); }
}
/* Rotating rise — dark, wind, metal, insight */
@keyframes float-spin {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg);                                       opacity: 0;    filter: brightness(1); }
  12%  { opacity: 0.55;                                                                                 filter: brightness(1.1); }
  35%  { transform: translateX(calc(-50% + var(--drift-a, 0px))) translateY(-9px)  rotate(90deg);     opacity: 0.45; filter: brightness(1.4); }
  65%  { transform: translateX(calc(-50% + var(--drift-b, 0px))) translateY(-18px) rotate(180deg);    opacity: 0.25; filter: brightness(1.5); }
  100% { transform: translateX(-50%) translateY(-28px) rotate(270deg);                                opacity: 0;    filter: brightness(1); }
}
/* Floor entry fade — text fades in and out when entering a new floor.
   3s total: 8% fade-in (240ms), hold to 88% (2.4s visible), 12% fade-out (360ms). */
@keyframes floor-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes level-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Canvas screenshake — crit hits, ROCK SLAM, etc. ── */
@keyframes canvas-shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4px, 2px); }
  20%  { transform: translate(3px, -3px); }
  30%  { transform: translate(-2px, 3px); }
  40%  { transform: translate(4px, 1px); }
  50%  { transform: translate(-3px, -2px); }
  60%  { transform: translate(2px, 2px); }
  70%  { transform: translate(-2px, -3px); }
  80%  { transform: translate(3px, 1px); }
  90%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}
#game-canvas.canvas-shake { animation: canvas-shake 220ms ease-out; }

/* ── Atmosphere transition flash (Feature 14: rain start) ── */
@keyframes rain-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(120, 160, 220, 0); }
  20%  { box-shadow: inset 0 0 80px 12px rgba(120, 160, 220, 0.35); }
  100% { box-shadow: inset 0 0 0 0 rgba(120, 160, 220, 0); }
}
#game-canvas.rain-flash { animation: rain-flash 700ms ease-out; }

/* ── Animation overrides: ember (fire + fighting) — all 3 particles ── */
.skill-cat-btn[data-skill-cat="FIGHTING"]:hover::before,
.skill-cat-btn[data-skill-cat="FIGHTING"].active::before,
.spell-orb[data-school="FIRE"]:hover::before,
.spell-orb[data-school="FIRE"].active::before {
  animation: float-ember var(--float-dur) ease-out infinite; animation-delay: 0s;
}
.skill-cat-btn[data-skill-cat="FIGHTING"]:hover::after,
.skill-cat-btn[data-skill-cat="FIGHTING"].active::after,
.spell-orb[data-school="FIRE"]:hover::after,
.spell-orb[data-school="FIRE"].active::after {
  animation: float-ember var(--float-dur) ease-out infinite;
  animation-delay: calc(var(--float-dur) * -0.33);
}
.skill-cat-btn[data-skill-cat="FIGHTING"]:hover .pt::before,
.skill-cat-btn[data-skill-cat="FIGHTING"].active .pt::before,
.spell-orb[data-school="FIRE"]:hover .pt::before,
.spell-orb[data-school="FIRE"].active .pt::before {
  animation: float-ember var(--float-dur) ease-out infinite;
  animation-delay: calc(var(--float-dur) * -0.67);
}
/* ── Animation overrides: spin (dark, wind, metal, insight) — all 3 particles ── */
.skill-cat-btn[data-skill-cat="INSIGHT"]:hover::before,
.skill-cat-btn[data-skill-cat="INSIGHT"].active::before,
.spell-orb[data-school="DARK"]:hover::before,
.spell-orb[data-school="DARK"].active::before,
.spell-orb[data-school="WIND"]:hover::before,
.spell-orb[data-school="WIND"].active::before,
.spell-orb[data-school="METAL"]:hover::before,
.spell-orb[data-school="METAL"].active::before {
  animation: float-spin var(--float-dur) ease-out infinite; animation-delay: 0s;
}
.skill-cat-btn[data-skill-cat="INSIGHT"]:hover::after,
.skill-cat-btn[data-skill-cat="INSIGHT"].active::after,
.spell-orb[data-school="DARK"]:hover::after,
.spell-orb[data-school="DARK"].active::after,
.spell-orb[data-school="WIND"]:hover::after,
.spell-orb[data-school="WIND"].active::after,
.spell-orb[data-school="METAL"]:hover::after,
.spell-orb[data-school="METAL"].active::after {
  animation: float-spin var(--float-dur) ease-out infinite;
  animation-delay: calc(var(--float-dur) * -0.33);
}
.skill-cat-btn[data-skill-cat="INSIGHT"]:hover .pt::before,
.skill-cat-btn[data-skill-cat="INSIGHT"].active .pt::before,
.spell-orb[data-school="DARK"]:hover .pt::before,
.spell-orb[data-school="DARK"].active .pt::before,
.spell-orb[data-school="WIND"]:hover .pt::before,
.spell-orb[data-school="WIND"].active .pt::before,
.spell-orb[data-school="METAL"]:hover .pt::before,
.spell-orb[data-school="METAL"].active .pt::before {
  animation: float-spin var(--float-dur) ease-out infinite;
  animation-delay: calc(var(--float-dur) * -0.67);
}

/* Particle chars set via --char CSS variable in category blocks above */


/* Magic casting-skill header — non-collapsible progress row above spells */
/* Magic casting-skill header — non-collapsible progress row above spells */
.sk-casting-header {
  padding: 2px 4px 3px 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}
.sk-casting-header .sk-casting-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 2px;
}
.sk-casting-header .sk-casting-name {
  flex: 1;
  color: var(--skill-accent, var(--text));
}
.sk-casting-header .sk-casting-lv {
  color: var(--text-dim);
  font-size: 10px;
}
.sk-casting-header .sk-bar-row .skill-bar { background: var(--skill-accent, #6688ff); }
/* Quests panel */
#quests-panel {
  height: 165px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0 8px 4px;
  border-top: 2px solid var(--section-sep);
}
/* When inside a tab group (v1.22.20), quests fills the tab area instead of a
   fixed 165px height. */
.panel-tab-group #quests-panel {
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  border-top: none;
}
#quests-panel .panel-title {
  position: sticky; top: 0;
  background: var(--bg2);
  padding: 2px 0;
  z-index: 2;
  font-size: 9px;
}
.quest-list { overflow-y: auto; }
.quest-name { font-family: var(--sans); font-size: 11px; color: var(--accent); margin-bottom: 2px; }
.quest-desc-text {
  font-family: var(--sans);
  font-size: 9px;
  color: #aaaaaa;
  margin-bottom: 5px;
  line-height: 1.3;
  padding: 3px 0;
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}
.quest-prog-row { display: flex; align-items: center; gap: 6px; }
.quest-prog-val { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.quest-bar { background: var(--gold); }
.completed-quests { font-size: 10px; color: var(--text-dim); padding-top: 4px; }
.completed-quests-list { padding-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.completed-quest-row {
  font-family: var(--sans);
  font-size: 10px;
  color: #6b8a5c;
  padding: 1px 2px 1px 4px;
  border-left: 2px solid #4a7a3a;
  background: rgba(74, 122, 58, 0.06);
}
.completed-quest-name { text-decoration: line-through; opacity: 0.85; }
.quest-row.tutorial-quest .quest-name { color: #ffcc66; }
.quest-row.tutorial-quest { border-left: 2px solid #aa7733; }

/* Expandable quest rows */
.quest-row { border-bottom: 1px solid var(--border); }
.quest-row.expanded { background: var(--bg3); }
.quest-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  cursor: pointer;
  user-select: none;
}
.quest-head:hover .quest-name { color: #ffdd99; }
.quest-arrow {
  font-size: 9px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.quest-row.expanded .quest-arrow { transform: rotate(0deg); }
.quest-row:not(.expanded) .quest-arrow { transform: rotate(-90deg); }
.quest-row .quest-name {
  font-family: var(--sans);
  font-size: 9.6px;
  font-weight: 500;
  color: #ffdd99;
  flex: 1;
  margin: 0;
}
.quest-reward-inline {
  font-size: 8.5px;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
  width: 60px;
  box-sizing: border-box;
  text-align: center;
  padding: 1px 4px;
  background: rgba(255, 204, 51, 0.10);
  border: 1px solid var(--gold);
  border-radius: 8px;
}
.quest-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 10px;
}
.quest-row.expanded .quest-body {
  max-height: 500px;
  opacity: 1;
  padding: 8px 10px 5px;
}
.empty { font-size: 11px; color: var(--text-dim); padding: 4px; }

/* F5: milestone summary inside quest body */
.quest-milestones {
  font-size: 10px;
  color: #ffdd44;
  margin-top: 3px;
  font-family: var(--sans);
}
/* F11: hint button */
.quest-hint-btn {
  font-family: var(--sans);
  font-size: 10px;
  background: var(--bg3);
  border: 1px solid #ffaa44;
  color: #ffaa44;
  padding: 1px 6px;
  cursor: pointer;
  border-radius: 3px;
}
.quest-hint-btn:hover { background: #2a1c08; color: #ffd488; }
.quest-hint-btn-inline {
  font-size: 8.5px;
  padding: 0 5px;
  line-height: 1.4;
  flex-shrink: 0;
  margin-right: 4px;
  border-radius: 8px;
}

/* F13: Quest-room status bar */
.quest-room-status {
  font-family: var(--sans);
  font-size: 8px;
  padding: 0 4px;
  background: transparent;
  color: var(--text-dim);
  margin: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  border-left: 2px solid #ffdd88;
  padding-left: 6px;
  margin-left: 6px;
}
.qrs-name { color: #ffdd88; font-weight: 500; margin-right: 4px; }
.qrs-obj  { color: var(--text); margin-right: 4px; }
/* ── Equipment panel: Design 10 — tabbed categories + per-row actions ──── */
/* Equipment sits below status. We let status grow naturally to its content
   size, and equipment fills whatever remains (scrolling internally so its
   bottom stays inside the column, aligning with the log/quest bottoms). */
.equip-panel { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-bottom: 0; margin-top: 64px; }
/* When inside a tab group (v1.22.20), the margin-top spacer hack is no longer
   needed and the panel should fill the tab area cleanly. */
.panel-tab-group .equip-panel { margin-top: 0; }
.eq-tabs {
  display: flex;
  gap: 3px;
  margin: 4px 4px 5px;
}
.eq-tab {
  flex: 1;
  background: #111827;
  color: #9ca3af;
  border: 1px solid #374151;
  font-family: var(--sans);
  font-size: 9.5px;
  padding: 3px 0;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.eq-tab.on   { background: var(--gold); color: #0a0a0a; font-weight: bold; border-color: var(--gold); }
.eq-rows { padding: 0 1px; }
.eq-row {
  display: grid;
  grid-template-columns: 48px 12px 1fr auto 56px;
  gap: 4px;
  align-items: center;
  padding: 2px 4px;
  border-bottom: 1px solid #1c2333;
  font: 8.5px var(--mono);
}
.eq-row.empty { opacity: 0.55; }
.eq-row.two-hand-secondary .eq-item-name { font-style: italic; opacity: 0.55; }
.eq-slot-label { font-family: var(--sans); color: #7a8aa6; font-size: 8px; letter-spacing: 0.03em; }
.eq-glyph      { font: bold 9.5px var(--mono); text-align: center; }
.eq-item-name  { font-family: var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.eq-rows-hidden { display: none; }
.eq-actions    { display: flex; gap: 2px; justify-self: end; }
.eq-btn {
  width: 16px;
  height: 16px;
  font: bold 10px var(--mono);
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #131a26;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}
.eq-btn:hover:not(:disabled) { background: #1f2940; color: var(--text); border-color: var(--border-hi); }
.eq-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.eq-btn.eq-unequip { color: #ff6b6b; }
.eq-btn.eq-unequip:hover:not(:disabled) { background: #3a1414; color: #ffaaaa; border-color: #663030; }
/* Equip-from-inventory button — monocolor triangle. Outline △ when no
   compatible item, filled ▲ (brighter, same colour family) when ready.
   No background-fill / pill / circle treatment: the affordance is the
   filled vs hollow glyph plus a small brightness bump. */
.eq-btn.eq-replace { color: #6c7a91; }
.eq-btn.eq-replace:hover:not(:disabled), .eq-btn.eq-replace.on { background: #1f2940; color: #a8b6ce; border-color: var(--border-hi); }
.eq-btn.eq-replace.eq-replace-ready { color: #ffd070; }
.eq-btn.eq-replace.eq-replace-ready:hover:not(:disabled),
.eq-btn.eq-replace.eq-replace-ready.on {
  background: #2a2410;
  color: #ffe9a8;
  border-color: #6a5320;
}
.eq-btn.eq-info { color: #88bbff; }
.eq-btn.eq-info:hover:not(:disabled), .eq-btn.eq-info.on { background: #182d4a; color: #aaccff; border-color: #355080; }
.eq-bond-col { display: block; }
.eq-bond-badge {
  font: bold 9px var(--mono);
  color: #ffaa22;
  text-align: center;
  cursor: default;
}
.eq-bond-progress {
  font: 8px var(--mono);
  color: #a07830;
  text-align: center;
  cursor: default;
}
.eq-row.weapon-bonded .eq-item-name { color: #ffcc66; }
.eq-row.weapon-bonded { border-left: 2px solid #ffaa22; }

.eq-info-panel {
  grid-column: 1 / -1;
  margin: 4px 2px 2px;
  padding: 4px 6px;
  background: #0e1422;
  border-left: 2px solid #88bbff;
  border-radius: 0 3px 3px 0;
  font: 9px var(--mono);
  color: #aaccff;
  line-height: 1.4;
}
.eq-info-key { color: #7a8aa6; padding-right: 4px; text-transform: lowercase; letter-spacing: 0.03em; }
.eq-info-desc { color: #cdd6e3; margin-bottom: 4px; font-style: italic; }
.eq-info-empty { color: var(--text-dim); font-style: italic; }
/* Equipment 'i' button rich info — mirrors the inventory popover layout
   (uses .ivd-* classes). Centers the glyph/name/meta the same way
   .inv-detail does so the panel reads consistently from either entry. */
.eq-info-panel.eq-info-rich { text-align: center; padding: 6px 8px; }
.eq-replace-picker {
  grid-column: 1 / -1;
  margin: 4px 2px 2px;
  border-left: 2px solid #44dd88;
  border-radius: 0 3px 3px 0;
  background: #0e1422;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.eq-replace-option {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  cursor: pointer;
  font: 9px var(--mono);
  color: #aaccff;
  border-radius: 0 3px 3px 0;
}
.eq-replace-option:hover { background: #3a2410; color: #ffcc88; }
.eq-replace-stat { color: var(--gold); font-size: 8px; }

/* ── Status panel: Design 9 — cards w/ description ───────────────────────── */
/* Each active status renders as a card: icon + name + duration + 1-line
   description + progress bar. Click a card to expand and show the stat list. */
.status-passive-panel {
  flex: 0 1 auto;
  overflow-y: auto;
  padding-bottom: 4px;
}
/* When inside a tab group (v1.22.20), status fills the tab area. */
.panel-tab-group .status-passive-panel {
  flex: 1 1 0;
  min-height: 0;
}
.status-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 3px 6px;
}
.status-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 10px;
  font-style: italic;
  padding: 6px;
}
/* ── Design 3: Hex chips, honeycomb-tessellated ─────────────────────────────
   Pointy-top hexagons (clip-path) laid out in fixed-width rows. Odd rows are
   shifted by half a hex width and every row after the first is pulled up by
   25% of the hex height so the pointy notches interlock snugly. */
.status-hex-grid {
  --hex-w: 23px;
  --hex-h: 27px;
  --hex-gap: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 2px 0 0;
}
.status-hex-row {
  display: flex;
  gap: var(--hex-gap);
}
.status-hex-row + .status-hex-row {
  /* Pull subsequent rows up so hex points nestle into the row above's
     notches. 0.25 × hex height accounts for the pointy-top overlap. */
  margin-top: calc(var(--hex-h) * -0.25);
}
.status-hex-row.odd {
  /* Half-hex horizontal shift + half the row gap so columns interlock. */
  margin-left: calc(var(--hex-w) * 0.5 + var(--hex-gap) * 0.5);
}
.status-hex {
  width: var(--hex-w);
  height: var(--hex-h);
  position: relative;
  background: #161e2c;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, filter 0.12s;
}
.status-hex:hover { transform: translateY(-1px); background: #1d2638; }
.status-hex.selected { filter: drop-shadow(0 0 4px var(--c, #888)); background: #1d2638; }
.status-hex .hx-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.hx-glyph {
  color: var(--c, var(--text));
  font: bold 11px 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols2', 'DejaVu Sans', monospace;
  line-height: 1;
}
.hx-duration {
  font: 7px var(--mono);
  color: #c8d2e0;
  line-height: 1;
}
/* Kind-based subtle inner-tint — keeps buff/debuff distinction. */
.status-hex.passive   { background: #122218; }
.status-hex.buff      { background: #122a18; }
.status-hex.debuff    { background: #2a1414; }
.status-hex.active_mp { background: #2a2200; }
.status-hex.bonus     { background: #221604; }
.status-hex.passive:hover   { background: #182e22; }
.status-hex.buff:hover      { background: #173620; }
.status-hex.debuff:hover    { background: #361c1c; }
.status-hex.active_mp:hover { background: #382e00; }
.status-hex.bonus:hover     { background: #2c1d05; }
.status-hex.selected.passive   { background: #1c3326; }
.status-hex.selected.buff      { background: #1b3e26; }
.status-hex.selected.debuff    { background: #3a2020; }
.status-hex.selected.active_mp { background: #3a3100; }
.status-hex.selected.bonus     { background: #322208; }
/* Diseases — permanent biome-tied debuffs (see backend/game/diseases.py).
   Tinted olive-green to set them apart from short-lived debuffs. */
.status-hex.cat-disease {
  background: #1e2415;
  border-color: #4a6028;
}
.status-hex.cat-disease:hover    { background: #28311a; }
.status-hex.selected.cat-disease { background: #324022; }
/* Detail strip shown when a hex is clicked. */
.status-hex-detail {
  margin-top: 5px;
  padding: 4px 7px 5px;
  background: #0d1422;
  border-left: 3px solid var(--c, var(--border-hi));
  border-radius: 0 3px 3px 0;
}
.hxd-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.hxd-glyph { color: var(--c, var(--text)); font: bold 12px monospace; line-height: 1; }
.hxd-name  { flex: 1; font-family: var(--sans); font-size: 9.5px; font-weight: 600; color: #cdd6e3; }
.hxd-duration {
  font: 8px monospace;
  color: #c8d2e0;
  background: #0a1018;
  padding: 1px 5px;
  border-radius: 6px;
}
.hxd-desc {
  font: 8.5px var(--mono);
  color: #7a8aa6;
  line-height: 1.3;
  margin-bottom: 2px;
}
.hxd-stats {
  margin: 3px 0 0;
  padding: 0 0 0 14px;
  font: 8px var(--mono);
  color: #aaccff;
  line-height: 1.4;
}
.hxd-stats li { list-style: disc; }

/* Inline slot/verb picker inside inventory action bar */
.item-picker-prompt {
  width: 100%;
  font-size: 9px;
  color: var(--text-dim);
  padding: 2px 4px;
  letter-spacing: 0.04em;
}
.picker-btn.cancel { color: var(--text-dim); }
.btn-sm.verb-throw   { color: #ffaa66; }
.btn-sm.verb-unequip { color: #cccccc; }
.btn-sm.verb-drop    { color: #888888; }
.btn-sm.verb-identify { color: #ddccff; }

/* Minimap */
.minimap-wrap {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
#minimap-canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

/* ─── ESC Menu ──────────────────────────────────────────────────────────────── */

.esc-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.esc-menu-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-height: 90vh;
  overflow-y: auto;
}

.esc-menu-title {
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(255,221,68,0.4);
}

.esc-btn {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  padding: 9px 24px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.1s;
}
.esc-btn:hover { border-color: var(--accent); color: var(--accent); }

.esc-status {
  font-size: 11px;
  color: var(--accent);
  min-height: 16px;
  text-align: center;
}

/* ── Party modal (Phase 4.B/C of multiplayer) ─────────────────────────────── */
.party-box {
  min-width: 360px;
  max-width: 460px;
}
.party-roster {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 12px;
  min-height: 40px;
}
.party-roster .party-row { display: flex; justify-content: space-between; padding: 2px 0; }
.party-roster .party-owner { color: var(--gold); }
.party-roster .party-tag { font-size: 10px; color: var(--text-dim); }
.party-invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.party-code-row {
  display: flex;
  gap: 6px;
  width: 100%;
}
.party-code-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--accent);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 18px;
  letter-spacing: 0.25em;
  text-align: center;
  padding: 8px 10px;
  text-transform: uppercase;
}
.party-status { font-size: 11px; min-height: 14px; }
.party-hint { font-size: 11px; text-align: center; line-height: 1.4; }

/* ── Party HUD as a top-right canvas overlay (2026-06-06) ───────────────
   Replaces the legacy `.party-hud` panel-style block that used to sit
   between minimap and stats and pushed the stats panel down. The overlay
   is absolutely positioned over the canvas (mirrors the top-left
   `.activated-bar` placement), uses small text, and color-keys each row
   by the player's class color with their race letter as the glyph. */
.party-hud-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(10, 12, 18, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  line-height: 1.25;
  color: #cccccc;
  pointer-events: none;  /* never block clicks on the game canvas */
  max-width: 200px;
}
.party-hud-overlay-row {
  display: grid;
  grid-template-columns: 12px auto 1fr 32px;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.party-hud-overlay-glyph {
  text-align: center;
  font-weight: bold;
}
.party-hud-overlay-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.party-hud-overlay-row.is-me .party-hud-overlay-name {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.party-hud-overlay-class {
  color: var(--text-dim, #888);
  font-size: 10px;
  letter-spacing: 0.5px;
}
.party-hud-overlay-hp {
  position: relative;
  height: 4px;
  background: #2a1f1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 32px;
  display: inline-block;
}
.party-hud-overlay-hp-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #5b9c5b, #88cc88);
  display: block;
}
.party-hud-overlay-row.is-disconnected .party-hud-overlay-glyph,
.party-hud-overlay-row.is-disconnected .party-hud-overlay-name,
.party-hud-overlay-row.is-disconnected .party-hud-overlay-class {
  opacity: 0.4;
}
/* Hide on narrow viewports (phone) to avoid overlapping the minimap. */
@media (max-width: 640px) {
  .party-hud-overlay { display: none !important; }
}

.join-source-select {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 8px;
}

/* dev-tools.css extracted */


/* ── Game Over overlay ──────────────────────────────────────────────────────── */
#game-over-screen,
#tutorial-complete-screen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
/* Tutorial-complete modal: same chrome as game-over but gold-toned to match
   the tutorial's yellow palette instead of the death-screen reds. */
#tutorial-complete-screen .game-over-box {
  border-color: #ffd84a;
  background: #100c00;
  box-shadow: 0 0 40px rgba(255, 216, 74, 0.3);
}
#tutorial-complete-screen .game-over-title {
  color: #ffd84a;
}
#tutorial-complete-screen .game-over-msg {
  color: #ddccaa;
}
.game-over-box {
  text-align: center;
  padding: 48px 56px;
  border: 2px solid #800000;
  background: #0d0000;
  box-shadow: 0 0 40px rgba(200,0,0,0.3);
}
.game-over-title {
  font-size: 2.8em;
  color: #ff3333;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  font-family: 'Courier New', monospace;
}
.game-over-msg {
  color: #ccaaaa;
  margin-bottom: 28px;
  font-size: 1.05em;
  line-height: 1.7;
  white-space: pre-line;
}

#help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.help-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 24px 32px;
  max-width: 500px;
  color: var(--text);
}

.help-content h2 {
  color: var(--gold);
  margin-bottom: 16px;
}

.help-content pre {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 16px;
  white-space: pre-wrap;
}

.help-content button {
  background: var(--accent);
  border: none;
  color: #000;
  padding: 6px 20px;
  font-family: inherit;
  cursor: pointer;
}

/* ─── Scrollbars ─────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ─── Loading spinner ────────────────────────────────────────────────────── */

.loading { color: var(--text-dim); font-size: 11px; }

/* ─── Magic panel: school orbs + selected-school content ─────────────────── */
.magic-orbs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-bottom: 2px;
}
.spell-orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 40px;
}
.spell-orb-lock-level {
  font-size: 9px;
  line-height: 1;
  color: var(--text-dim);
  margin-top: 1px;
  opacity: 0.9;
}
.spell-orb-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--skill-accent, var(--text-dim));
  margin-top: 1px;
  margin-bottom: 1px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Panel-level tints removed — skill panel uses uniform panel background */


/* ─── Per-school particle chars ─────────────────────────────────────────── */
.spell-orb[data-school="FIRE"]::before   { content: '∴'; }  /* ember sparks */
.spell-orb[data-school="WATER"]::before  { content: '❄'; }  /* ice crystal */
.spell-orb[data-school="NATURE"]::before { content: '✿'; }  /* flower petal */
.spell-orb[data-school="METAL"]::before  { content: '◈'; }  /* metal shard */
.spell-orb[data-school="LIGHT"]::before  { content: '✦'; }  /* bright star */
.spell-orb[data-school="DARK"]::before   { content: '⋆'; }  /* void star */
.spell-orb[data-school="WIND"]::before   { content: '˜'; }  /* wisp */

/* Tint the spell section background using the active school color */
#magic-panel, #skills-panel { transition: background 120ms ease; }

.sk-class-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.sk-class-row {
  background: #1a2333;
  border: none;
  border-left: 3px solid var(--class-color, #6b7280);
  border-radius: 3px;
  padding: 3px 6px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 10px;
}
.sk-class-row.expanded {
  background: #202b40;
}
.sk-class-row:hover {
  background: #202b40;
}
.sk-class-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
.sk-class-name {
  font-size: 10px;
  color: var(--text);
  font-weight: 500;
}
.sk-class-arrow {
  font-size: 9px;
  color: var(--text-dim);
}
.sk-class-body {
  color: #7a8aa6;
  font-size: 8.5px;
  line-height: 1.35;
  padding: 0 4px 5px 14px;
}

.sk-row {
  border-bottom: 1px solid var(--border);
  padding: 3px 2px;
  font-size: 8.5px;
}
.sk-row.expanded { background: var(--bg3); }
/* Design 5 "card stack" aesthetic for skill rows.
   Matches anim-lab.js Design 5 spec: sans-serif system-ui font, ~11px base
   with 10.5px name/9px meta/8px badge, generous 6px×7px padding, 4px gap. */
.sk-row.sk-card {
  background: #1a2333;
  border: none;
  border-left: 3px solid var(--card-accent, #374151);
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 2px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 8px;
}
.sk-row.sk-card.expanded { background: #202b40; }
.sk-row.sk-card:hover { background: #202b40; }
.sk-row.sk-card .sk-nm   { font-weight: 500; font-size: 7px; }
.sk-row.sk-card .sk-bar-row { margin-top: 1px; }
.sk-row.sk-card .sk-bar-row .bar-wrap {
  background: #0d1422;
  border-color: #2a3447;
  height: 3px;
  border-radius: 2px;
}
.sk-row.sk-card .sk-bar-row .skill-bar { background: var(--card-accent, #6688ff); }
/* AP/SP cost pill on the single skill/spell row.
   .sk-cost-slot fills its grid cell and centers the inner pill so costs
   align vertically across rows regardless of value length (e.g. "5 AP" vs "10 AP"). */
.sk-cost-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.sk-card-cost {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  background: #0d1422;
  border: 1px solid #2a3447;
}
.sk-card-cost.sk-cost-sp { color: #88aaff; border-color: #2a3a66; background: #101a30; }
.sk-card-cost.sk-cost-ap { color: #b58dff; border-color: #3a2a55; background: #18102a; }
.sk-card-cost.passive    { color: #6b7280; font-style: italic; background: transparent; border-color: transparent; }
.sk-card-xp { color: #cbd5e1; font-weight: 500; }
.sk-card-badge {
  font-size: 6px;
  padding: 0 3px;
  background: #0d1422;
  border-radius: 4px;
  color: #9ca3af;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
/* Tint card accent + badge by category via the panel's data-skill-cat attr.
   Sets the panel-level --skill-accent so headers (casting/progress) and
   row borders can both pull from the same color. */
#skills-panel[data-skill-cat="FIGHTING"] { --skill-accent: #ff6b6b; }
#skills-panel[data-skill-cat="INSIGHT"]  { --skill-accent: #fcd34d; }
#skills-panel[data-skill-cat="SOCIAL"]   { --skill-accent: #c084fc; }
#skills-panel[data-skill-cat="HEALTH"]   { --skill-accent: #86efac; }
#skills-panel[data-skill-cat="CRAFTING"] { --skill-accent: #88ddcc; }
#skills-panel[data-skill-cat="CLASS"]    { --skill-accent: var(--class-color, #9ca3af); }
#skills-panel[data-school="FIRE"]   { --skill-accent: #ff6b35; }
#skills-panel[data-school="WATER"]  { --skill-accent: #4488ff; }
#skills-panel[data-school="NATURE"] { --skill-accent: #66cc66; }
#skills-panel[data-school="METAL"]  { --skill-accent: #b0b8c4; }
#skills-panel[data-school="DARK"]   { --skill-accent: #9c4dcc; }
#skills-panel[data-school="LIGHT"]  { --skill-accent: #ffee88; }
#skills-panel[data-school="WIND"]   { --skill-accent: #88ddcc; }
#skills-panel[data-school="STATUS"] { --skill-accent: #aaccff; }
#skills-panel .sk-row.sk-card { --card-accent: var(--skill-accent, #6688ff); }
/* Grid columns for the single-row skill/spell card head — fixed widths on
   every cell except the name (1fr) so all rows align vertically regardless
   of the text length of each cell.
   Order: arrow · status · name · xp · level · type-badge · cost · fav · hotkey
   Type-badge and cost are pushed to the right of xp/level so the skill
   name (1fr) has more breathing room and isn't crowded by the banners. */
.sk-head {
  display: grid;
  grid-template-columns: 8px 10px 1fr 44px 30px 22px 36px 12px 14px;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
}
.sk-head:hover .sk-nm { color: var(--accent); }
.sk-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 500; }
.sk-arrow { color: var(--text-dim); font-size: 7px; text-align: center; }
.sk-lv {
  color: var(--skill-accent, var(--text-dim));
  font-size: 7px;
  white-space: nowrap;
  text-align: right;
}
.sk-card-xp { font-size: 7px; color: #cbd5e1; white-space: nowrap; text-align: right; }
.sk-tp-pa { color: #556677; }
.sk-tp-ac { color: #6699aa; }
.sk-tp-nr { color: #88aa66; }
.sk-tp-rg { color: #88aacc; }
.sk-tp-sf { color: #cc9944; }
.sk-tp-ao { color: #cc6644; }
.sk-tp-dr { color: #9977cc; }
.sk-tp-cf { color: #66aa77; }
/* Status indicator: ✓ / ! / o / x */
.sk-status { font-size: 8px; text-align: center; font-weight: bold; line-height: 1; }
.sk-sts-ok    { color: #55cc55; }
.sk-sts-avail { color: #ff8833; }
.sk-sts-lock  { color: #884444; }
/* Favorite star button — sized by the grid cell it sits in (.sk-head). */
.sk-fav-btn {
  background: none; border: none; cursor: pointer;
  color: #554433; font-size: 8px; padding: 0; margin: 0;
  line-height: 1; text-align: center; width: 100%;
  font-family: inherit;
}
.sk-fav-btn:hover, .sk-fav-btn:focus { color: #ffdd00; outline: none; }
.sk-fav-btn.active { color: #ffdd00; }
/* Inline hotkey H button — sized by the grid cell it sits in (.sk-head). */
.sk-hk-inline-btn {
  background: var(--bg2); border: 1px solid #333;
  cursor: pointer; color: #556677; font-size: 6.5px; padding: 0; margin: 0;
  line-height: 1; height: 11px; width: 100%; text-align: center;
  font-family: inherit; font-weight: bold; border-radius: 2px;
}
.sk-hk-inline-btn:hover { border-color: var(--fool-pink); color: var(--fool-pink); }
.sk-hk-inline-btn.assigned { color: var(--fool-pink); border-color: #993366; }
/* Inert H slot for passive entries — preserves grid column width so rows
   stay aligned, but is non-interactive and renders no visible chrome. */
.sk-hk-inline-btn.sk-hk-disabled {
  background: transparent;
  border: 1px solid transparent;
  cursor: default;
  pointer-events: none;
}
/* Inert ★ slot for non-learned / passive entries — preserves grid column
   width but renders nothing and is non-interactive. */
.sk-fav-btn.sk-fav-hidden {
  visibility: hidden;
  pointer-events: none;
}
/* Locked skill/spell cards (status ✗) — non-selectable, grayed out, no
   hover affordance, no expansion toggle. */
.sk-row.sk-card.sk-locked {
  opacity: 0.45;
  filter: grayscale(0.6);
  cursor: not-allowed;
  pointer-events: none;
}
.sk-row.sk-card.sk-locked:hover { background: #1a2333; }
/* Favorited skill/spell card — animated hue-cycling border to highlight
   the actively-favorited row. Drives the existing card-accent border-left
   so the effect respects the per-category color palette. */
@keyframes sk-fav-hue-cycle {
  0%   { filter: hue-rotate(0deg)   drop-shadow(0 0 2px rgba(255, 221, 0, 0.55)); }
  50%  { filter: hue-rotate(180deg) drop-shadow(0 0 4px rgba(255, 221, 0, 0.85)); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 2px rgba(255, 221, 0, 0.55)); }
}
.sk-row.sk-card.favorited {
  border-left-width: 3px;
  box-shadow: inset 2px 0 0 0 #ffdd00;
  animation: sk-fav-hue-cycle 3.2s ease-in-out infinite;
}
/* Hotkey assigned indicator in expanded section */
.sk-hk-assigned { color: var(--fool-pink); font-size: 9px; margin-right: 4px; }
.sk-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.sk-bar-row .bar-wrap { background: #2a2a2a; border-color: #3a3a3a; }
.sk-xp-val { font-size: 9px; color: var(--text-dim); width: 60px; text-align: right; }
.sk-detail {
  margin-top: 5px;
  padding: 4px 4px 6px 4px;
  border-top: 1px dashed var(--border);
}
.sk-desc { color: var(--text); margin-bottom: 4px; font-size: 7.5px; line-height: 1.35; }
.sk-cost { color: var(--fool-pink); font-weight: bold; margin-bottom: 4px; }
.sk-perks-title {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.sk-perks { list-style: none; padding: 0; margin: 0 0 5px 0; }
.sk-perk {
  display: flex;
  gap: 6px;
  padding: 1px 0;
  font-size: 7.5px;
  line-height: 1.35;
}
.sk-perk.off { color: #555; }
.sk-perk.on  { color: var(--gold); }
.sk-perk-lv  { width: 38px; flex-shrink: 0; }
.sk-perk-txt { flex: 1; }
.sk-hk-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ─── Bard Singing — song picker (inside the expanded Singing skill row) ── */
.sk-song-picker { margin: 4px 0 6px 0; }
.sk-song-picker-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.sk-song-picker-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-song-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 9px;
  padding: 3px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 2px;
}
.sk-song-btn:hover { border-color: var(--accent); color: var(--accent); }
.sk-song-btn.active {
  background: #3a2d18;
  border-color: #ffdd66;
  color: #ffdd66;
}
.sk-song-cost { font-size: 8px; color: var(--text-dim); }
.sk-song-btn.active .sk-song-cost { color: #ffdd66; }

/* ─── Inventory weight header ─────────────────────────────────────────────── */
.inv-header { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.inv-weight-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.inv-weight-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  width: 40px;
  flex-shrink: 0;
}
.inv-weight-val { font-size: 10px; color: var(--text-dim); white-space: nowrap; width: 70px; text-align: right; }
.inv-weight-val.over { color: var(--red); font-weight: bold; }
.weight-bar     { background: #66cc88; }
.weight-bar-over { background: var(--red); }
/* ─── Skills: paladin/class-star + collapsed cost badge ──────────────────── */
.sk-fav {
  font-size: 10px;
  color: var(--text-dim);
  margin-right: 2px;
  flex-shrink: 0;
}
.sk-fav.active {
  color: #ff9933;
}

.sk-cost-badge {
  display: inline-block;
  font-size: 9px;
  font-family: monospace;
  min-width: 18px;
  text-align: center;
  border-radius: 2px;
  padding: 0 2px;
  margin-right: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sk-cost-ap   { background: #2a1a4a; color: #cc88ff; border: 1px solid #4a2a7a; }
.sk-cost-sp   { background: #1a2a3a; color: #88aaff; border: 1px solid #2a4a6a; }
.sk-cost-passive { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }

.sk-type-row {
  font-size: 9px;
  color: var(--text-dim);
  margin: 2px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sk-type-lbl { color: #8888aa; margin-right: 4px; }
.sk-type-val { color: #aaaacc; }

.sk-class-star {
  color: #ff9933;
  font-size: 11px;
  margin-right: 2px;
  text-shadow: 0 0 4px rgba(255, 153, 51, 0.5);
}
.sk-cost-inline {
  color: var(--fool-pink);
  font-size: 9px;
  font-weight: bold;
  padding: 0 4px;
  white-space: nowrap;
}
/* AP = Action Points (purple), MP = Mana Points (pink) */
.sk-cost.sk-cost-ap,
.sk-cost-inline.sk-cost-ap { color: #b58dff; }
.sk-cost.sk-cost-mp,
.sk-cost-inline.sk-cost-mp { color: var(--fool-pink); }

/* ── ASCII panel (unified interaction panel: campfire / dialogue / shop) ─ */
#ascii-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 500;
  display: none;
  background: #080a0c;
  border: 2px solid #5a7890;
  box-shadow: 0 0 32px rgba(0,0,0,0.95), 0 0 0 1px rgba(90,120,150,0.15);
  padding: 4px 6px;
  min-width: 44ch;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a6070 #0d1318;
  scroll-behavior: smooth;
  flex-direction: column;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#ascii-panel::-webkit-scrollbar { width: 6px; }
#ascii-panel::-webkit-scrollbar-track { background: #0d1318; }
#ascii-panel::-webkit-scrollbar-thumb { background: #4a6070; border-radius: 3px; }
@keyframes ap-open {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.ap-opening { animation: ap-open 120ms ease-out forwards; }
#ascii-panel .ap-box {
  margin: 0 auto; padding: 2px 0;
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: calc(var(--game-scale, 1) * 10px);
  line-height: 1.2;
  display: block;
}
/* Each row is a real flex element — the outer rectangle is the #ascii-panel
   border, and per-row dividers are CSS borders too, so the left/right edges
   stay perfectly aligned regardless of content width or unicode glyphs. */
#ascii-panel .ap-line {
  display: flex;
  align-items: baseline;
  padding: 1px 12px;
  min-height: 1.3em;
}
#ascii-panel .ap-line-item { padding: 2px 12px; }
#ascii-panel .ap-line-head { padding-top: 4px; padding-bottom: 2px; }
#ascii-panel .ap-line-body { padding-top: 2px; padding-bottom: 2px; }
/* Thin breathing-room spacer between chat conversation options. ~20% of a
   normal ap-line's 1.3em min-height. */
#ascii-panel .ap-line-spacer { padding: 0; min-height: 0.26em; }
/* "Speech" body lines: chat-bubble feel — left-aligned with a fixed left
   indent and a reserved minimum height so player prompts and NPC replies
   sit in the same place on screen regardless of message length. The labels
   ("You:" / "<Name>:") get matching min-width so the quoted text following
   them lines up vertically across both speakers. */
#ascii-panel .ap-line-speech {
  justify-content: flex-start;
  padding: 4px 16px;
  min-height: 2.4em;
}
#ascii-panel .ap-bod-speech {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  font-style: italic;
}
#ascii-panel .ap-pc-prompt,
#ascii-panel .ap-npc-reply {
  display: inline-block;
  min-width: 5em;
  margin-right: 6px;
  font-style: normal;
  vertical-align: baseline;
}
#ascii-panel .ap-pc-prompt { color: #88ccff; }
#ascii-panel .ap-npc-reply { color: #ffcc88; }
#ascii-panel .ap-line-hr {
  border-top: 1px solid #5a7890;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 3px 0;
}
#ascii-panel .ap-line-sep {
  border-top: 1px dashed #5a7890;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 3px 8px;
}
#ascii-panel .ap-line-sep-label {
  justify-content: center;
  gap: 8px;
  padding: 1px 10px;
}
#ascii-panel .ap-line-sep-label::before,
#ascii-panel .ap-line-sep-label::after {
  content: '';
  flex: 1;
  border-top: 1px dashed #5a7890;
  align-self: center;
}
#ascii-panel .ap-line-ctx { justify-content: flex-end; }
#ascii-panel .ap-line-title { padding-top: 2px; padding-bottom: 2px; }
#ascii-panel .ap-line-item { padding: 0 10px; }
/* Chat conversation options — slight (4ch) left indent for both number and
   text, leaving the rest of the panel's interaction rows flush. */
#ascii-panel .ap-line-item.ap-indent { padding-left: calc(10px + 4ch); }

#ascii-panel .ap-ttl  { color: #ccbb88; font-weight: bold; }
#ascii-panel .ap-hdr  { color: #e8cc80; letter-spacing: 0.08em; font-weight: bold; flex: 1; }
#ascii-panel .ap-inf  { color: #8ca0b4; flex: 1; }
#ascii-panel .ap-line-detail { padding: 0 10px 3px 28px; }
#ascii-panel .ap-det  { color: #6a7e8e; font-size: 0.88em; }
#ascii-panel .ap-bod  { color: #7899aa; font-style: italic; }
#ascii-panel .ap-ctx  { color: #ccaa55; }
#ascii-panel .ap-hint {
  color: #7f97af;
  line-height: 1.25;
}
#ascii-panel .ap-num  { color: #ff66cc; font-size: 0.85em; margin-right: 6px; font-weight: bold; }
#ascii-panel .ap-hint-val { color: #ccaa55; }
#ascii-panel .ap-ok   { color: #55dd77; }
#ascii-panel .ap-no   { color: #dd4444; }
/* The .ap-item is itself a flex row inside .ap-line-item; this lets the
   label fill the available space and pushes the hint flush-right without
   needing any space-padding math. */
#ascii-panel .ap-item {
  display: flex;
  flex: 1;
  align-items: baseline;
  min-width: 0;
}
#ascii-panel .ap-item-label { flex: 1; min-width: 0; }
#ascii-panel .ap-item-hint  { margin-left: 12px; white-space: nowrap; }
#ascii-panel .ap-act  { color: #99aabb; cursor: pointer; }
#ascii-panel .ap-act:hover { background: rgba(80,140,200,0.28); color: #bbccdd; }
#ascii-panel .ap-act.ap-exit { color: #667788; font-style: italic; }
#ascii-panel .ap-act.ap-exit:hover { color: #9aabb8; }
/* Quest title shown in NPC dialogue: green when offered (i.e. the player
   can currently accept it). Selection highlight (ap-sel) still wins. */
#ascii-panel .ap-act.ap-quest-title { color: #66dd66; }
#ascii-panel .ap-act.ap-quest-title:hover { color: #88ee88; }
/* Quest reward info row: orange, slightly smaller than normal info text. */
#ascii-panel .ap-inf.ap-quest-reward { color: #ffaa55; font-size: 0.88em; }
/* v1.23.26 — Back/Leave/Cancel exit rows use a teal (instead of pink)
   navigation number so the exit option visually separates from the
   "real" choices above it. */
#ascii-panel .ap-act.ap-exit .ap-num { color: #44ccbb; }
#ascii-panel .ap-sel  { color: #ffffff; background: rgba(50,100,160,0.35); font-weight: bold; }
/* Disabled rows: gray + faded only — strikethrough removed because the muted
   color already signals non-interactive and strikethrough looked noisy. */
#ascii-panel .ap-dis  { color: #4a5a6a; opacity: 0.6; cursor: default; }

/* ─── Debug log panel (F12) ────────────────────────────────────────────── */
#debug-panel {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: rgba(2,4,6,0.96);
  display: flex;
  flex-direction: column;
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}
.dbg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  background: #070a0c;
  border-bottom: 1px solid #1a2530;
  flex-shrink: 0;
}
.dbg-title {
  color: #3d9; font-weight: bold; font-size: 10px; letter-spacing: 0.05em;
}
.dbg-hint { font-size: 8px; color: #2a3a45; }
.dbg-controls { display: flex; gap: 4px; }
.dbg-tabs { display: flex; gap: 3px; margin: 0 4px; }
.dbg-tab {
  background: none; border: 1px solid #1a2530; color: #2a4050;
  cursor: pointer; font-size: 9px; padding: 1px 7px; border-radius: 3px;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.dbg-tab.on { background: #1a2530; color: #3d9; border-color: #2a4555; }
.dbg-tab:hover { color: #5a8a9a; border-color: #2a4555; }
.dbg-be-error   { color: #c04040; }
.dbg-be-warning { color: #b07020; }
.dbg-be-info    { color: #2a3a45; }
/* TOOLS tab — dev kit helpers (Grant Ranged Test Kit, etc.) */
.dbg-tool-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
}
.dbg-tool-btn {
  background: #1a2530; border: 1px solid #2a4555; color: #3d9;
  font-size: 10px; padding: 3px 9px; border-radius: 3px; cursor: pointer;
}
.dbg-tool-btn:hover { background: #243040; color: #5feaa3; }
.dbg-tool-status { color: #5a8a9a; font-size: 9px; font-style: italic; }
.dbg-btn {
  background: none; border: 1px solid #1a2530; color: #2a4050;
  cursor: pointer; font-size: 10px; padding: 1px 5px; border-radius: 3px;
  transition: color 0.1s, border-color 0.1s;
}
.dbg-btn:hover { color: #5a8a9a; border-color: #2a4555; }
.dbg-entries {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 8px;
  display: flex;
  flex-direction: column-reverse;
}
.dbg-msg {
  font-size: 8px;
  padding: 0.5px 0;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
}
.dbg-ts { color: #1a2a35; font-size: 7.5px; margin-right: 5px; }
.dbg-cat-state   { color: #2a4a5a; }
.dbg-cat-status  { color: #3a3a6a; }
.dbg-cat-monster { color: #5a3a2a; }
.dbg-cat-msg     { color: #3a4a55; }
.dbg-cat-combat  { color: #6a2a2a; }
.dbg-cat-system  { color: #2a3545; }
.dbg-cat-error   { color: #8a3a3a; font-weight: bold; }
.dbg-cat-item    { color: #5a4a2a; }
.dbg-cat-quest   { color: #2a5a3a; }
.dbg-cat-levelup { color: #5a4a1a; }
.dbg-cat-terrain { color: #3a3a2a; }
.dbg-cat-time    { color: #2a3a25; }
.dbg-cat-player  { color: #2a4a5a; }

/* ─── Pause overlay ──────────────────────────────────────────────────────── */
#pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  pointer-events: none;
}
.pause-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(10,10,10,0.88);
  border: 1px solid #444;
  padding: 18px 36px;
  color: #ffdd88;
}
.pause-content span { font-size: 22px; font-weight: bold; letter-spacing: 3px; }
.pause-content small { color: #667788; font-size: 11px; }

/* ── Auth modal ─────────────────────────────────────────────────────────────── */
#auth-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.auth-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}
.auth-dialog {
  position: relative;
  background: linear-gradient(135deg, #2a1a1a 0%, #1a0f0f 100%);
  border: 3px solid #8B4513;
  border-radius: 12px;
  padding: 48px 56px;
  width: 520px;
  max-width: 95vw;
  z-index: 1001;
  font-family: inherit;
  box-shadow: 0 0 40px rgba(139, 69, 19, 0.5), inset 0 0 20px rgba(139, 69, 19, 0.15);
}
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
  border-bottom: 3px solid #8B4513;
}
.auth-tab {
  background: rgba(139, 69, 19, 0.08);
  border: none;
  color: #CD5C5C;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 14px 28px;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  margin-bottom: -3px;
  transition: all 0.3s ease;
  flex: 1;
  text-align: center;
}
.auth-tab:hover {
  color: #ffffff;
  background: rgba(139, 69, 19, 0.15);
}
.auth-tab.auth-tab-active {
  color: #ffffff;
  border-bottom-color: #DC143C;
  background: rgba(220, 20, 60, 0.12);
}
.auth-pane .cc-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-pane .cc-row label {
  width: 100px;
  min-width: 100px;
  font-weight: 600;
  color: #CD5C5C;
  font-size: 1rem;
}
.auth-pane .cc-row input {
  flex: 1;
  padding: 12px 16px;
  background: #0f1419;
  border: 2px solid #8B4513;
  color: #ffffff;
  font-size: 1rem;
  border-radius: 6px;
  font-family: inherit;
}
.auth-pane .cc-row input:focus {
  outline: none;
  border-color: #DC143C;
  box-shadow: 0 0 10px rgba(220, 20, 60, 0.3);
}
.auth-pane .cc-row input::placeholder {
  color: #666666;
}
.auth-error {
  color: #ff6666;
  font-size: 1rem;
  font-weight: 600;
  min-height: 24px;
  margin-bottom: 16px;
  background: rgba(255, 102, 102, 0.1);
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 4px solid #ff6666;
}
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.btn-secondary {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 0.85rem;
}
.btn-secondary:hover { color: var(--text); border-color: var(--border-hi); }
.btn-sm { padding: 4px 12px; font-size: 0.8rem; }

/* Auth action buttons - red/brown dungeon aesthetic */
.auth-actions .btn-primary {
  background: linear-gradient(135deg, #DC143C 0%, #B22222 100%);
  color: #ffffff;
  border: none;
  padding: 16px 28px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.5);
  transition: all 0.3s ease;
}
.auth-actions .btn-primary:hover {
  background: linear-gradient(135deg, #FF1744 0%, #DC143C 100%);
  box-shadow: 0 6px 25px rgba(220, 20, 60, 0.7);
  transform: translateY(-2px);
}
.auth-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(220, 20, 60, 0.5);
}

.auth-actions .btn-secondary {
  background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
  color: #ffffff;
  border: 2px solid #D2691E;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 10px rgba(139, 69, 19, 0.4);
  transition: all 0.3s ease;
}
.auth-actions .btn-secondary:hover {
  background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%);
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.6);
  transform: translateY(-1px);
}

/* ── User bar (landing screen) ──────────────────────────────────────────────── */
#user-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
#user-name { color: var(--accent); }

/* Auth open button - prominent red/brown styling */
#auth-open-btn {
  background: linear-gradient(135deg, #DC143C 0%, #B22222 100%) !important;
  color: #ffffff !important;
  border: 2px solid #DC143C !important;
  padding: 14px 32px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.5) !important;
  transition: all 0.3s ease !important;
}
#auth-open-btn:hover {
  background: linear-gradient(135deg, #FF1744 0%, #DC143C 100%) !important;
  box-shadow: 0 6px 25px rgba(220, 20, 60, 0.7) !important;
  transform: translateY(-2px) !important;
}
#auth-open-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(220, 20, 60, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS v1.7 — All new styles below
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Animated title (feature #16) ──────────────────────────────────────────── */
@keyframes title-flicker {
  0%, 88%, 100% { opacity: 1; }
  90%           { opacity: 0.55; }
  92%           { opacity: 1; }
  94%           { opacity: 0.7; }
  96%           { opacity: 1; }
}
.game-title { animation: title-flicker 7s ease-in-out infinite; }

/* ── Landing redesign (feature #1) ─────────────────────────────────────────── */
#char-create-screen,
#landing-screen,
#load-screen,
#about-screen,
#hof-screen,
#bestiary-screen,
#profile-screen,
#races-screen,
#classes-screen { display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; position: fixed; top: 0; left: 0;
  background: radial-gradient(ellipse at center, #111 0%, #000 100%); z-index: 10; }

/* Char create screen must scroll on short viewports so name input and submit button are reachable. */
#char-create-screen { overflow-y: auto; align-items: flex-start; padding: 20px 0; }

/* Profile / achievements and bestiary pages must scroll instead of overflowing viewport. */
#profile-screen .cc-wrapper,
#bestiary-screen .cc-wrapper-wide {
  max-width: 960px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#profile-screen #profile-content,
#bestiary-screen #bestiary-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 6px;
}
#profile-screen .landing-actions,
#bestiary-screen .landing-actions { flex-shrink: 0; }

.landing-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Panel width: 55% of the prior 960 px. Narrower central column makes
     the reel + buttons feel tighter and brings the in-page UI to a more
     focused width on wide desktop monitors. */
  max-width: 528px;
  border: 1px solid var(--border);
  background: var(--bg2);
  overflow: hidden;
}

.alpha-banner {
  background: #aa8800;
  color: #000;
  font-weight: bold;
  padding: 8px 12px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.landing-columns {
  display: flex;
  flex: 1;
  min-height: 0;
}
.landing-left {
  width: 240px;
  flex-shrink: 0;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.landing-center {
  flex: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.landing-ascii {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-dim);
  white-space: pre;
  margin: 0 auto;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
.landing-feat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 8.25px;
  color: var(--text-dim);
}
/* Feature-list icon: fixed-width inline block so every row's glyph
   aligns to the same column regardless of which symbol is used. */
.landing-feat .fi {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  flex-shrink: 0;
}
.visitor-counter {
  margin-bottom: 6px;
  font-size: 7.5px;
  color: var(--accent);
  opacity: 0.8;
  letter-spacing: 0.06em;
  font-family: monospace;
}
.landing-title-block { text-align: center; }
.landing-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}


.landing-center-updates {
  width: 100%;
  margin-top: 6px;
}
.landing-hint {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}
.landing-panel-hdr {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.landing-changelog {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 180px;
  overflow-y: auto;
}
.landing-cl-entry { display: flex; gap: 6px; align-items: baseline; line-height: 1.4; }
.landing-attribution { margin-top: 6px; text-align: center; font-size: 10px; color: #555; font-style: italic; }
.landing-attribution a { color: #555; text-decoration: none; }
.landing-attribution a:hover { text-decoration: underline; }
.landing-cl-ver { color: var(--accent); font-size: 10px; flex-shrink: 0; min-width: 46px; }
.landing-cl-summary { color: var(--text); font-size: 11px; }
.user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
}
.text-dim { color: var(--text-dim); font-size: 12px; }

/* ── Hall of Fame (feature #13) ─────────────────────────────────────────────── */
.hof-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 16px 0;
}
.hof-row {
  display: grid;
  grid-template-columns: 28px 1fr 100px 70px;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  align-items: center;
}
.hof-row.hof-winner { border-color: var(--gold); }
.hof-rank { color: var(--text-dim); text-align: right; font-size: 11px; }
.hof-name strong { font-size: 13px; }
.hof-class-race { color: var(--text-dim); font-size: 11px; }
.hof-floors { text-align: right; color: var(--text-dim); }
.hof-turns { text-align: right; color: var(--text-dim); }
.hof-empty { color: var(--text-dim); font-size: 13px; padding: 20px 0; text-align: center; }

/* ── Profile (feature #4) ───────────────────────────────────────────────────── */
.profile-content { margin: 16px 0; }
.profile-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.profile-stat-val { color: var(--accent); font-weight: bold; }

/* ── About / Controls table (used in about-screen & controls-overlay) ──────── */
.cc-wrapper-wide { max-width: 780px; }
.ctrl-section { margin: 16px 0; }
.ctrl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ctrl-table th {
  color: var(--text-dim); text-align: left; padding: 4px 10px;
  border-bottom: 1px solid var(--border); font-weight: normal;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em;
}
.ctrl-table td {
  padding: 5px 10px; color: var(--text); border-bottom: 1px solid var(--border);
}
.ctrl-table td:first-child { font-family: monospace; color: var(--text-dim); }

/* ── Remap Keys table ──────────────────────────────────────────────────────── */
#remap-keys-table td { padding: 3px 8px; }
#remap-keys-table td:nth-child(2) { text-align: center; }
.remap-key-btn {
  background: var(--surface-2, #1e2430); border: 1px solid var(--border);
  color: var(--text); font-family: monospace; font-size: 11px; cursor: pointer;
  padding: 2px 8px; border-radius: 3px; min-width: 32px;
}
.remap-key-btn:hover { border-color: var(--accent); color: var(--accent); }
.remap-key-btn.capturing { border-color: #ffcc44; color: #ffcc44; animation: remap-blink 0.6s infinite; }
@keyframes remap-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.remap-reset-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 10px; padding: 1px 4px;
}
.remap-reset-btn:hover { color: var(--accent); }
.remap-override { color: #ffcc44; }

/* ── Char-create: race / class description panels ──────────────────────────── */
.cc-desc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cc-desc-glyph {
  font-family: 'Cascadia Code', 'Courier New', monospace;
  font-size: 1.9em; font-weight: bold; line-height: 1;
  min-width: 1em; text-align: center;
  text-shadow: 0 0 10px currentColor;
}
.cc-desc-head-text { flex: 1; min-width: 0; }
.cc-desc-title { color: var(--text); font-weight: bold; font-size: 13px; letter-spacing: 0.04em; }
.cc-desc-tag   { color: #aaaaaa; font-size: 10.5px; line-height: 1.4; margin-top: 2px; font-style: italic; }

.cc-sec { margin-bottom: 8px; }
.cc-sec-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim); margin-bottom: 4px; font-weight: bold;
}
.cc-sec-ico {
  font-size: 11px; line-height: 1; color: var(--text-dim);
  width: 14px; text-align: center;
}
.cc-sec-b { padding-left: 4px; }
.cc-sec-note { color: #666; font-size: 10px; padding: 2px 4px; font-style: italic; }

/* Section accent colors */
.cc-sec-stat       .cc-sec-h, .cc-sec-stat       .cc-sec-ico { color: #99cc99; }
.cc-sec-trees      .cc-sec-h, .cc-sec-trees      .cc-sec-ico { color: #aa88cc; }
.cc-sec-mech       .cc-sec-h, .cc-sec-mech       .cc-sec-ico { color: #ffbb55; }
.cc-sec-skill      .cc-sec-h, .cc-sec-skill      .cc-sec-ico { color: #aabb77; }
.cc-sec-spell      .cc-sec-h, .cc-sec-spell      .cc-sec-ico { color: #88aacc; }
.cc-sec-trait      .cc-sec-h, .cc-sec-trait      .cc-sec-ico { color: #99bbcc; }
.cc-sec-meta       .cc-sec-h, .cc-sec-meta       .cc-sec-ico { color: #887755; }
.cc-sec-start      .cc-sec-h, .cc-sec-start      .cc-sec-ico { color: #99aacc; }
.cc-sec-startspell .cc-sec-h, .cc-sec-startspell .cc-sec-ico { color: #99ccff; }
.cc-sec-gear       .cc-sec-h, .cc-sec-gear       .cc-sec-ico { color: #ddaa66; }
.cc-sec-warn       .cc-sec-h, .cc-sec-warn       .cc-sec-ico { color: #dd7755; }

/* Pills */
.cc-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: bold;
  padding: 2px 6px; border-radius: 9px;
  border: 1px solid var(--border-hi); background: var(--bg2);
  color: var(--text); line-height: 1.3;
  letter-spacing: 0.04em;
}
.cc-pill-sub {
  font-size: 9px; font-weight: normal; color: var(--text-dim);
  padding-left: 3px; border-left: 1px solid var(--border-hi); margin-left: 2px;
}
.cc-pill-stat-pos { color: #66dd66; border-color: #2a5a2a; background: rgba(102,221,102,0.06); }
.cc-pill-stat-neg { color: #dd6666; border-color: #5a2a2a; background: rgba(221,102,102,0.06); }
.cc-pill-tree     { background: rgba(255,255,255,0.02); }
.cc-pill-meta     { color: #887755; border-color: #3a3020; }
.cc-pill-start    { color: #99aacc; }
.cc-pill-startspell { color: #99ccff; border-color: #2a4060; background: rgba(153,204,255,0.05); }
.cc-pill-gear     { color: #ddaa66; border-color: #4a3a20; background: rgba(221,170,102,0.05); }
.cc-pill-gold     { color: #ffdd44; border-color: #5a4a20; background: rgba(255,221,68,0.08); }

/* Tree-style ability lists */
.cc-tree { list-style: none; margin: 0; padding: 0; }
.cc-tree-row {
  position: relative;
  padding: 3px 4px 4px 10px;
  margin-bottom: 4px;
  border-left: 2px solid var(--border-hi);
  background: rgba(255,255,255,0.015);
}
.cc-tree-row:last-child { margin-bottom: 0; }
.cc-tree-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 1px;
}
.cc-tree-name {
  color: #dddd88; font-weight: bold; font-size: 11px;
}
.cc-tree-name-spell { color: #99ccff; }
.cc-tree-desc { color: #b8c0b0; font-size: 10px; line-height: 1.45; }
.cc-tree-row.cc-tree-warn { border-left-color: #aa5544; }
.cc-tree-row.cc-tree-warn .cc-tree-desc { color: #dd9988; }

.cc-row-tag {
  font-size: 9px; padding: 0px 4px;
  border: 1px solid var(--border-hi); border-radius: 3px;
  color: var(--text-dim); font-weight: normal;
  text-transform: lowercase; letter-spacing: 0.05em;
}
.cc-tag-passive { color: #888888; }
.cc-tag-active  { color: #88aaff; border-color: #2a4a7a; }

/* Section-tinted borders on tree rows */
.cc-sec-mech  .cc-tree-row { border-left-color: #cc9944; }
.cc-sec-skill .cc-tree-row { border-left-color: #aabb77; }
.cc-sec-spell .cc-tree-row { border-left-color: #88aacc; }
.cc-sec-trait .cc-tree-row { border-left-color: #6688aa; }

/* ── Char-create: synergy preview (feature #7) ──────────────────────────────── */
.synergy-preview {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 7px 12px; font-size: 12px; color: var(--text-dim);
  text-align: center; line-height: 1.5;
}
.synergy-preview strong { color: var(--text); }

/* ── ESC menu additions (feature #8, #17, #19) ──────────────────────────────── */
.esc-btn-minor {
  font-size: 11px;
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border);
  padding: 7px 0;
}
.esc-btn-minor:hover { background: var(--bg2); color: var(--text); }
.esc-theme-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  justify-content: center;
}
.theme-btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text-dim); padding: 5px 10px; font-family: inherit;
  font-size: 11px; cursor: pointer;
}
.theme-btn:hover, .theme-btn.active { border-color: var(--accent); color: var(--text); }

/* ── Theme variants (feature #17) ──────────────────────────────────────────── */
body.theme-dim { --bg: #040406; --bg2: #080810; --bg3: #0c0c18; }
body.theme-pale { --bg: #101016; --bg2: #181824; --bg3: #1e1e2e; --text: #d8d8d8; }

/* ── Toast notifications (feature #10) ──────────────────────────────────────── */
.toast-container {
  position: fixed; top: 56px; right: 16px;
  z-index: 9999; display: flex; flex-direction: column; gap: 5px;
  pointer-events: none;
}
.toast {
  background: var(--bg2); border: 1px solid var(--border-hi);
  color: var(--text); padding: 7px 13px; font-size: 12px;
  font-family: monospace; max-width: 220px;
  opacity: 0; transform: translateX(14px);
  transition: opacity 0.18s, transform 0.18s;
}
.toast.visible { opacity: 1; transform: translateX(0); }
.toast.toast-ok { border-color: var(--accent); }
.toast.toast-err { border-color: #883333; }
.toast.toast-levelup {
  border-color: var(--gold); color: var(--gold);
  font-size: 14px; font-weight: bold; padding: 10px 18px;
  animation: levelup-glow 0.5s ease-in-out 2 alternate;
}
/* Level-up toast centered over the minimap so it doesn't block the game canvas */
.minimap-wrap .toast.toast-levelup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  max-width: 92%;
  text-align: center;
  font-size: 12px;
  padding: 8px 12px;
  z-index: 200;
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
  white-space: normal;
  line-height: 1.25;
}
.minimap-wrap .toast.toast-levelup.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.toast.toast-milestone { border-color: #88aaff; color: #88aaff; }
.toast.toast-boss-enrage {
  border-color: #ff2200; color: #ff6644;
  font-size: 13px; font-weight: bold;
  animation: enrage-shake 0.15s ease-in-out 3 alternate;
}
.toast.toast-achievement {
  border-color: #ffd700; color: #ffd700;
  font-size: 14px; font-weight: bold;
  background: rgba(40, 30, 6, 0.95);
  animation: achievement-shimmer 0.6s ease-out;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}
@keyframes levelup-glow {
  from { box-shadow: 0 0 4px var(--gold); }
  to   { box-shadow: 0 0 14px var(--gold); }
}
/* Banner player name pulses between light blue and white to draw the eye. */
.banner-player-name {
  animation: banner-name-pulse 2.4s ease-in-out infinite alternate;
  font-weight: bold;
}
@keyframes banner-name-pulse {
  from { color: #aaddff; }
  to   { color: #ffffff; }
}
@keyframes enrage-shake {
  from { transform: translateX(-2px); }
  to   { transform: translateX(2px); }
}
@keyframes achievement-shimmer {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1.0); opacity: 1; }
}

/* ── Profile + Achievement gallery ─────────────────────────────────────── */
.profile-content { padding: 8px 4px; }
.profile-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px;
  padding: 10px; border: 1px solid #444; border-radius: 4px;
  background: rgba(20,20,28,0.6); margin-bottom: 14px;
}
.profile-stat { display: flex; justify-content: space-between; }
.profile-stat-label { color: #aab; font-size: 12px; }
.profile-stat-val { color: #ffd700; font-weight: bold; font-size: 13px; }
.profile-sec-hdr {
  color: #ffd700; font-weight: bold; padding: 4px 0; margin: 6px 0 8px;
  border-bottom: 1px solid #444; letter-spacing: 1px;
}
.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.ach-card {
  border: 1px solid #444; border-radius: 4px; padding: 8px 10px;
  background: rgba(20,20,28,0.6);
}
.ach-card.ach-unlocked { border-color: #ffd700; background: rgba(40,30,6,0.4); }
.ach-card.ach-locked   { opacity: 0.55; }
.ach-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ach-glyph { font-size: 16px; }
.ach-card.ach-unlocked .ach-glyph { color: #ffd700; }
.ach-card.ach-locked   .ach-glyph { color: #777; }
.ach-name { font-weight: bold; color: #ddd; font-size: 12px; }
.ach-card.ach-unlocked .ach-name { color: #ffd700; }
.ach-desc { color: #bbb; font-size: 11px; margin-bottom: 4px; }
.ach-hint { color: #888; font-size: 10px; font-style: italic; }
.ach-reward { color: #88ddff; font-size: 10px; margin-top: 3px; }
.ach-progress-wrap { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ach-progress-bar {
  flex: 1; height: 6px; background: #222; border: 1px solid #555;
  border-radius: 2px; overflow: hidden;
}
.ach-progress-fill { height: 100%; background: #ffd700; }
.ach-progress-txt { color: #ddd; font-size: 10px; }

/* ── Bestiary ──────────────────────────────────────────────────────────── */
.bestiary-content { padding: 8px 4px; }
.best-summary {
  color: #ddcc88; font-size: 13px; padding: 4px 6px 10px;
  letter-spacing: 0.02em;
}
.best-summary-count {
  color: #ffd700; font-weight: 700; font-size: 15px;
  margin-right: 4px;
}
.best-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.best-card {
  border: 1px solid #444;
  border-radius: 5px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(28,24,38,0.85) 0%, rgba(16,14,22,0.85) 100%);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.best-card.is-known   { border-color: #6a5a3a; }
.best-card.is-unknown { border-color: #333; opacity: 0.75; }
.best-card:hover { border-color: #aa8844; transform: translateY(-1px); }
.best-card-hdr {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(120, 96, 60, 0.35);
  padding-bottom: 6px;
}
.best-card-glyph {
  font-family: 'Courier New', monospace;
  font-size: 22px; font-weight: bold;
  width: 24px; text-align: center;
  text-shadow: 0 0 6px currentColor;
}
.best-card-name {
  flex: 1;
  color: #f4e8c8; font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em;
}
.best-tier {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.3);
}
.best-badge {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
}
.best-badge-known {
  color: #88dd99; border: 1px solid #4a7a4a;
  background: rgba(40, 70, 40, 0.4);
}
.best-badge-unknown {
  color: #888; border: 1px solid #555;
  background: rgba(40, 40, 40, 0.4);
}
.best-stats {
  color: #ddcc88; font-size: 12px;
  letter-spacing: 0.04em;
}
.best-line {
  color: #c0b69a; font-size: 12px; line-height: 1.45;
}
.best-unknown-line {
  color: #888; font-style: italic;
}
.best-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.best-tag {
  font-size: 10px; color: #aaa;
  border: 1px solid #555;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(0,0,0,0.25);
  letter-spacing: 0.02em;
}
.best-section-hdr {
  color: #ffaa44; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px;
}
.best-list {
  margin: 2px 0 0; padding-left: 16px;
  color: #d4cca8; font-size: 12px; line-height: 1.45;
}
.best-list li { padding: 1px 0; }

/* ── Game Over: Newly Unlocked Achievements ────────────────────────────── */
.game-over-ach {
  margin: 10px auto; padding: 8px 12px; border: 1px solid #ffd700;
  border-radius: 4px; background: rgba(40,30,6,0.4); max-width: 80%;
}
.game-over-ach-hdr { color: #ffd700; font-weight: bold; margin-bottom: 4px; }
.game-over-ach-row { color: #ffd700; font-size: 12px; padding: 2px 0; }

/* ── Tutorial hints (feature #9) ────────────────────────────────────────────── */
/* Pinned to the top of the main canvas-wrap (game panel) — NOT body — so the
   yellow banner always sits over the actual game canvas on every viewport size
   instead of floating off-screen above it on shorter browsers. It still stays
   above the centered level-text fade ("Town" / "Dungeon Level N") band so the
   two yellow banners don't collide. */
.tutorial-overlay {
  /* Anchored to the main game panel (.canvas-wrap). Width is always exactly
     80% of that panel; top is fixed so every step's rectangle starts at the
     same Y. The box extends downwards based on text length, leaving the
     top-left/top-right corners in identical positions step-to-step. */
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
  z-index: 55;
  width: 80%;
}
.tutorial-box {
  background: rgba(10, 8, 4, 0.96);
  border: 1px solid rgba(255, 221, 68, 0.55);
  border-radius: 6px;
  padding: 10px 18px; width: 100%;
  display: flex; flex-direction: column; gap: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}
/* During panel-interaction steps the surrounding canvas is dimmed, which makes
   a translucent banner look muddy by association. Pin the whole overlay to
   the viewport top with a sky-high z-index and a fresh stacking context so
   it CANNOT inherit any ancestor's opacity/filter and ALWAYS paints above
   every dimmed panel, the orange tutorial arrow (z=10000), and the inv
   detail popover. Combined with the opaque box below, the instructions stay
   crisply readable while everything else fades to gray. */
body.tutorial-ui-step .tutorial-overlay {
  /* Stays anchored to the main game panel (matches the gameplay-step rect
     exactly — same X, same Y, same 80% width). Dimming is applied to
     siblings of .canvas-wrap, never to canvas-wrap itself, so the banner
     escapes inherited opacity without needing position:fixed. */
  z-index: 10001;
  isolation: isolate;
}
body.tutorial-ui-step .tutorial-box {
  background: rgb(18, 14, 6);
  border: 2px solid rgba(255, 221, 68, 0.98);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.85),
    0 0 26px 4px rgba(255, 216, 74, 0.45);
}
body.tutorial-ui-step .tutorial-step-num,
body.tutorial-ui-step .tutorial-step-body {
  /* Boost contrast over the dimmed backdrop. */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.95);
}
.tutorial-text {
  /* Container for the two-row layout: orange step number on row 1,
     left-aligned body paragraph on row 2 with color-cycling hotkey spans. */
  display: flex; flex-direction: column; gap: 3px;
  white-space: normal;
}
.tutorial-step-num {
  font-size: 14px;
  color: #ff9a1f;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 154, 31, 0.45), 0 1px 4px rgba(0, 0, 0, 0.85);
}
.tutorial-step-body {
  font-size: 13px;
  color: var(--gold);
  line-height: 1.45;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
/* Hotkey-like tokens inside the tutorial body cycle through orange → red →
   yellow → purple. Same flavour as the favorited-skill row hue-cycle, but
   driven by explicit color stops so each waypoint is recognisably distinct. */
@keyframes tutorial-hotkey-cycle {
  0%   { color: #ff9a1f; text-shadow: 0 0 6px rgba(255, 154, 31, 0.7); }
  25%  { color: #ff4040; text-shadow: 0 0 6px rgba(255, 64, 64, 0.7); }
  50%  { color: #ffd000; text-shadow: 0 0 6px rgba(255, 208, 0, 0.75); }
  75%  { color: #b266ff; text-shadow: 0 0 6px rgba(178, 102, 255, 0.7); }
  100% { color: #ff9a1f; text-shadow: 0 0 6px rgba(255, 154, 31, 0.7); }
}
.tutorial-hotkey {
  display: inline-block;
  font-weight: 700;
  padding: 0 1px;
  animation: tutorial-hotkey-cycle 3.2s ease-in-out infinite;
}
#tutorial-ok { display: none; }

/* ── Loading state (feature #18) ─────────────────────────────────────────────── */
.loading-overlay {
  position: absolute; inset: 0; background: var(--bg); z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.loading-msg {
  font-size: 14px; color: var(--text-dim); letter-spacing: 0.12em;
  font-family: monospace;
}

/* ── Full log overlay (feature #15) ──────────────────────────────────────────── */
.full-log-overlay {
  position: absolute; inset: 0; background: rgba(10,10,18,0.97); z-index: 50;
  display: flex; flex-direction: column;
}
.full-log-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text-dim); flex-shrink: 0;
}
.full-log-entries {
  flex: 1; overflow-y: auto; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px; font-size: 11px;
}

/* ── Mobile D-pad (feature #11) ──────────────────────────────────────────────── */
.mobile-controls {
  position: absolute; bottom: 70px; left: 20px; z-index: 40; user-select: none;
}
.dpad {
  display: grid; grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px); gap: 2px;
}
.dpad-btn {
  background: rgba(20,20,30,0.88); border: 1px solid var(--border);
  color: var(--text); font-size: 18px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dpad-btn:active { background: var(--bg2); }
.dpad-center { font-size: 14px; border-color: var(--border-hi); }

/* ── Controls overlay (feature #19) ─────────────────────────────────────────── */
.controls-overlay {
  position: fixed; inset: 0; z-index: 9985;
  background: rgba(0,0,0,0.82); display: flex;
  align-items: center; justify-content: center;
}
.controls-box {
  background: var(--bg2); border: 1px solid var(--border);
  padding: 24px 28px; max-width: 580px; width: 100%;
  max-height: 80vh; overflow-y: auto;
}
.controls-box-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; color: var(--text);
}

/* ── Bug report modal (feature #8) ──────────────────────────────────────────── */
.bug-modal {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
}
.bug-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.78); }
.bug-box {
  position: relative; background: var(--bg2); border: 2px solid var(--border-hi);
  padding: 24px; width: 360px; z-index: 1;
  transition: border-color 0.18s ease;
}
.bug-box--bug  { border-color: #cc4444; }
.bug-box--feature { border-color: #44bb77; }
.bug-title {
  font-size: 13px; letter-spacing: 0.1em; color: var(--text);
  text-transform: uppercase;
}
.feedback-type-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.feedback-type-select {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 11px;
  padding: 3px 6px; cursor: pointer; outline: none;
  transition: border-color 0.18s ease;
}
.bug-box--bug  .feedback-type-select { border-color: #cc4444; }
.bug-box--feature .feedback-type-select { border-color: #44bb77; }
.feedback-type-select:focus { border-color: var(--border-hi); }
.bug-prompt { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
#feedback-desc {
  width: 100%; box-sizing: border-box; min-height: 90px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 12px;
  padding: 8px; resize: vertical;
}
#feedback-title-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 12px;
  padding: 6px 8px;
}
#feedback-title-input:focus, #feedback-desc:focus { outline: none; border-color: var(--border-hi); }
.bug-status { font-size: 12px; color: var(--accent); margin-top: 6px; min-height: 16px; }
.bug-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ── Minimap toggle button (feature #12) ─────────────────────────────────────── */
.minimap-toggle-btn {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  font-family: monospace; font-size: 9px; padding: 0 4px; cursor: pointer;
  margin-left: 6px; vertical-align: middle;
}
.minimap-toggle-btn:hover { border-color: var(--accent); color: var(--text); }
.minimap-canvas-expanded { width: 280px !important; height: 280px !important; }

/* ── Game over: share + stats (feature #14) ──────────────────────────────────── */
.game-over-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
  margin: 10px 0; font-size: 12px; color: var(--text-dim);
}
.game-over-stat-val { color: var(--text); font-weight: bold; }
.game-over-share {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text-dim);
  padding: 5px 14px; font-family: inherit; font-size: 11px; cursor: pointer;
  margin-top: 8px; display: block; width: 100%;
}
.game-over-share:hover { border-color: var(--border-hi); color: var(--text); }

/* ── Autosave indicator (feature #20) — uses toast system, see engine.js ──── */

/* ── Portrait rotation prompt (shown on touch devices in portrait mode) ─────── */
#rotate-prompt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0a0f;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  color: #d0cfc0;
  gap: 16px;
}
.rotate-prompt-glyph {
  font-size: 56px;
  animation: rotate-spin 2s ease-in-out infinite;
  display: inline-block;
}
.rotate-prompt-msg {
  font-size: 16px;
  color: #a09080;
  text-align: center;
  padding: 0 24px;
  line-height: 1.5;
}
@keyframes rotate-spin {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(90deg); }
  60%  { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}

/* Phone-only banner: surfaces the "account + saved character required"
   message at the top of the screen. JS toggles display on/off. */
#phone-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: rgba(30, 24, 16, 0.94);
  color: #f0e6c8;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid #5a4322;
}

/* ── Campfire button in mobile d-pad strip ───────────────────────────────────── */
.dpad-campfire-btn {
  display: block;
  width: 134px; /* matches 3×44px + 2×2px gaps */
  min-height: 44px;
  margin-top: 4px;
  background: rgba(20,20,30,0.88);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dpad-campfire-btn:active { background: var(--bg2); }

/* ── Phone landscape layout ────────────────────────────────────────────────────
   Gated on html.is-phone-landscape (set by the head script in index.html based
   on UA + touch capability). A narrow desktop window is NOT a phone — this
   layout will not activate just because the browser was resized. */
html.is-phone-landscape .game-far-left,
html.is-phone-landscape .game-right { display: none !important; }

html.is-phone-landscape #mobile-controls {
  position: fixed !important;
  left: 0; top: 0;
  width: 150px;
  height: 100vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(0,0,0,0.82);
  border-right: 1px solid #333;
}

html.is-phone-landscape #game-wrap { padding-left: 150px; }
html.is-phone-landscape #canvas-hotkeys { display: flex !important; }

html.is-phone-landscape .landing-left { display: none !important; }
html.is-phone-landscape .landing-center { padding: 16px; width: 100%; max-width: 100%; }
html.is-phone-landscape .landing-layout { max-width: 100%; border: none; }
html.is-phone-landscape #landing-tutorial-mode { display: none !important; }
html.is-phone-landscape #landing-new { display: none !important; }
html.is-phone-landscape #landing-achievements { display: none !important; }
html.is-phone-landscape .landing-center-updates { max-height: 30vh; overflow-y: auto; }

html.is-phone-landscape .modal-box { max-width: 95vw !important; overflow-y: auto; }

/* ── Dev-tools host gating ─────────────────────────────────────────────────
   Show developer surfaces only on .local hostnames (and localhost). The
   `dev-allowed` class is set on <html> by an inline script in index.html
   <head> before the rest of the page paints. JS click handlers also re-check
   the window.__RL_DEV_ALLOWED__ flag — this CSS rule is the visible layer. */
html:not(.dev-allowed) #dev-toggle-btn,
html:not(.dev-allowed) #dev-window,
html:not(.dev-allowed) #debug-panel,
html:not(.dev-allowed) .dev-btn {
  display: none !important;
}

/* ── Deploy-in-progress banner ────────────────────────────────────────────
   Non-blocking reconnect toast replaces the old fullscreen deploy-banner.
   The game canvas stays live and interactive during reconnects. */

/* -- Reconnect toast (corner, non-blocking) -------------------------------- */
#reconnect-toast {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(20, 20, 32, 0.92);
  border: 1px solid #cc4444;
  border-radius: 6px;
  color: #ff8888;
  font-size: 13px;
  pointer-events: none;   /* never intercepts clicks */
  user-select: none;
}
.reconnect-spinner {
  display: inline-block;
  animation: reconnect-spin 1.1s linear infinite;
}
@keyframes reconnect-spin {
  to { transform: rotate(360deg); }
}

/* -- Perf HUD (Ctrl+Shift+P toggle, or ?perf=1 URL flag) ----------------- */
#perf-hud {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 9100;
  min-width: 220px;
  padding: 6px 9px;
  background: rgba(8, 10, 16, 0.88);
  border: 1px solid #44557a;
  border-radius: 4px;
  color: #aac0e0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  user-select: text;
  pointer-events: none;  /* never intercept gameplay clicks */
}
#perf-hud .perf-hud-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
#perf-hud .perf-hud-header {
  color: #ffdd66;
  border-bottom: 1px solid #2a3550;
  padding-bottom: 2px;
  margin-bottom: 3px;
  font-weight: bold;
}
#perf-hud #perf-hud-tag {
  color: #6a7894;
  font-weight: normal;
  font-size: 10px;
}
#perf-hud b { color: #e0e8f4; font-weight: 600; }
#perf-hud .perf-warn { color: #ff8855; }
#perf-hud .perf-bad  { color: #ff5544; }

/* -- Update-available bar (top of screen, dismissible) -------------------- */
#update-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  background: #1a2a1a;
  border-bottom: 1px solid #44aa44;
  color: #88cc88;
  font-size: 13px;
}
#update-bar button {
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
#update-bar-reload { background: #44aa44; color: #fff; border: none; }
#update-bar-dismiss { background: transparent; color: #88cc88; border: 1px solid #44aa44; }

/* ── Unified button system (3 tiers + destructive) ───────────────────────── */
.rl-btn {
  width: 200px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 24px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.1s, color 0.1s;
  box-sizing: border-box;
  display: block;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.rl-btn:hover { border-color: var(--accent); color: var(--accent); }

.rl-btn--primary {
  background: var(--accent);
  color: #000;
  font-weight: bold;
  font-size: 14px;
  padding: 12px 24px;
  border-color: var(--accent);
}
.rl-btn--primary:hover { opacity: 0.88; color: #000; border-color: var(--accent); }

.rl-btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: auto;
  padding: 7px 14px;
  font-size: 12px;
}
.rl-btn--ghost:hover { border-color: var(--border-hi); color: var(--text); }

.rl-btn--danger {
  border-color: var(--red, #cc3333);
  color: var(--red, #cc3333);
}
.rl-btn--danger:hover { background: rgba(180,0,0,0.15); border-color: #ff4444; color: #ff4444; }

/* Burnt-orange action button (Achievements). Bright when logged in, grayed when not. */
.rl-btn--burnt-orange {
  background: #cc5500;
  border: 1px solid #cc5500;
  color: #000;
  font-weight: bold;
  font-size: 13px;
  padding: 10px 22px;
  letter-spacing: 0.06em;
}
.rl-btn--burnt-orange:hover { background: #e06a10; border-color: #e06a10; color: #000; }
.rl-btn--burnt-orange.is-disabled,
.rl-btn--burnt-orange.is-disabled:hover {
  background: #4a4a4a;
  border-color: #4a4a4a;
  color: #888;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Yellow Back button at top of the Achievements pane. */
.ach-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.rl-btn--gold-back {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #000;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 16px;
  letter-spacing: 0.04em;
}
.rl-btn--gold-back:hover {
  background: #ffea66;
  border-color: #ffea66;
  color: #000;
}

/* Landing ghost button row (Feedback) */
.landing-ghost-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* Plan pln_c185f892 §3/§5: local-only dev nav row. Hidden by default; the
   inline LOCAL_HOSTS script in index.html sets html.local-only-host on
   local/dev hostnames which reveals the row. Production never sees these
   links (the backend /features and /glyphs routes return 404 off-local). */
.landing-local-row {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  opacity: 0.7;
}
html.local-only-host .landing-local-row { display: flex; }
.landing-local-row .rl-btn { text-decoration: none; }

/* Landing action groups — each group is a subtly tinted panel that visually
   collects related buttons. Panels size to their content (buttons + side
   padding) rather than stretching full-width, so each box hugs its buttons
   with just a small margin on either side. */
.landing-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-sizing: border-box;
}
.landing-group .rl-btn { width: 200px; }
.landing-group--brown {
  background: linear-gradient(180deg, #2a1a0e 0%, #1d120a 100%);
  border-color: #4a2a14;
}
.landing-group--blue {
  background: linear-gradient(180deg, #0f1730 0%, #0a1022 100%);
  border-color: #1f2e58;
}
.landing-group--green {
  background: linear-gradient(180deg, #0e2418 0%, #0a1810 100%);
  border-color: #1f4030;
}
.landing-group--gray {
  background: linear-gradient(180deg, #1c1c1c 0%, #131313 100%);
  border-color: #303030;
}

/* Brighter orange (Bestiary) — sits one notch up from the burnt-orange
   Achievements button. */
.rl-btn--bright-orange {
  background: #ee7722;
  border: 1px solid #ee7722;
  color: #1a0a00;
  font-weight: bold;
  font-size: 13px;
  padding: 10px 22px;
  letter-spacing: 0.06em;
}
.rl-btn--bright-orange:hover {
  background: #ff8a33;
  border-color: #ff8a33;
  color: #1a0a00;
}

/* Slightly-dark green (Info) — sits inside the dark-green onboarding panel
   alongside Start Tutorial. */
.rl-btn--green {
  background: #2e7a48;
  border: 1px solid #2e7a48;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  padding: 10px 22px;
  letter-spacing: 0.06em;
}
.rl-btn--green:hover {
  background: #3a8e57;
  border-color: #3a8e57;
  color: #ffffff;
}

/* Light blue (Races) and regular blue (Classes) accent buttons. */
.rl-btn--light-blue {
  background: #88ccff;
  border-color: #88ccff;
  color: #001a33;
  font-weight: bold;
}
.rl-btn--light-blue:hover {
  background: #b0ddff;
  border-color: #b0ddff;
  color: #001a33;
}
.rl-btn--blue {
  background: #3366cc;
  border-color: #3366cc;
  color: #ffffff;
  font-weight: bold;
}
.rl-btn--blue:hover {
  background: #4477dd;
  border-color: #4477dd;
  color: #ffffff;
}

/* Character group button variants (gray panel):
   white (Join Party) > light-gray (New Character) > gray (Load Character) */
.rl-btn--white {
  background: #f0ede8;
  border-color: #ccc8c2;
  color: #111111;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.rl-btn--white:hover {
  background: #ffffff;
  border-color: #bbbbbb;
  color: #000000;
}
.rl-btn--light-gray {
  background: #b8b4ae;
  border-color: #9a9690;
  color: #1a1a1a;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.rl-btn--light-gray:hover {
  background: #cac6c0;
  border-color: #aaa;
  color: #000000;
}
.rl-btn--gray {
  background: #787470;
  border-color: #5a5856;
  color: #111111;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.rl-btn--gray:hover {
  background: #8a8682;
  border-color: #6a6866;
  color: #000000;
}

/* Races / Classes intro page — fixed header (back + title) with scrollable
   body below holding the tab grid + detail panel. Reuses cc-desc-* formatting
   from the New Character page for the detail. */
.rc-intro-wrap {
  max-width: 880px;
  width: 100%;
  /* Fixed height (not max-height) so the centered wrapper stays the same
     size regardless of content. Without this, switching between tabs with
     different detail-panel heights would re-flow the centered wrapper and
     visibly shift the back button / title corners up and down. */
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 28px 24px;
  margin: 0 auto;
}
.rc-intro-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.rc-intro-header .rc-intro-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.9rem;
  text-align: center;
}
.rc-intro-header .rc-intro-back {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 0.85rem;
  min-width: 92px;
}
.rc-intro-spacer { flex: 0 0 92px; }
.rc-intro-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.rc-intro-body .game-sub { margin-bottom: 18px; }

.rc-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 4px 0 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.rc-tab {
  --rc-color: var(--cell-color, var(--accent));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 12px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, var(--bg3) 85%);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  text-align: center;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.rc-tab::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.16) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.16) 55%,
    transparent 100%
  );
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}
.rc-tab:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--rc-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px -8px var(--rc-color),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}
.rc-tab:hover::before {
  animation: rc-tab-sheen 0.7s ease-out;
}
@keyframes rc-tab-sheen {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
.rc-tab:active { transform: translateY(0); }
.rc-tab.selected {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, var(--rc-color) 90%);
  border-color: var(--rc-color);
  color: #000;
  font-weight: bold;
  box-shadow:
    0 0 16px -2px var(--rc-color),
    inset 0 0 0 1px rgba(0,0,0,0.18);
  animation: rc-tab-pulse 2.6s ease-in-out infinite;
}
@keyframes rc-tab-pulse {
  0%, 100% { box-shadow: 0 0 12px -3px var(--rc-color), inset 0 0 0 1px rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 0 22px  1px var(--rc-color), inset 0 0 0 1px rgba(0,0,0,0.18); }
}
.rc-tab.is-locked { opacity: 0.55; }
.rc-tab.is-locked:hover { transform: none; box-shadow: none; }
.rc-tab-glyph {
  font-size: 26px;
  line-height: 1;
  color: var(--rc-color);
  text-shadow: 0 0 8px currentColor;
  transition: transform 0.2s ease;
}
.rc-tab:hover .rc-tab-glyph { transform: scale(1.12); }
.rc-tab.selected .rc-tab-glyph {
  color: #000;
  text-shadow: none;
}
.rc-tab-name {
  display: block;
  width: 100%;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}
.rc-tab-lock {
  font-size: 11px;
  color: #ffcc88;
  margin-top: 2px;
}
.rc-detail {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 18px 22px;
  border-radius: 4px;
  position: relative;
  min-height: 280px;
  margin-bottom: 14px;
}
.rc-detail.is-locked { opacity: 0.75; }
.rc-detail .cc-desc-head { margin-bottom: 12px; }
.rc-detail .cc-desc-sec { margin-top: 12px; }
.rc-detail-lock-pill {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 11px;
  color: #ffcc88;
  letter-spacing: 0.05em;
}

/* ESC sub-panels — hidden by default, flex column on show */
.esc-sub-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ESC main panel wrapper */
#esc-main-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Browse panel overlay (Records / Info from landing) */
.browse-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 480px;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}
.browse-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.browse-tab-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 12px;
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.browse-tab-btn:hover { color: var(--text); border-color: var(--border-hi); }
.browse-tab-btn.active { border-color: var(--accent); color: var(--accent); background: var(--bg2); }
.browse-content { min-height: 180px; }

/* ── A-Group Activated Bar (top-left of game panel) ───────────────────────── */
/* Radial cluster of toggle buttons, one per Shift+[1-=] slot. Click or Shift+N
   to toggle. Reuses rl-toggle-glow keyframe for the active-state ring. */
.activated-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
  pointer-events: none; /* let canvas receive most events; buttons re-enable */
}
.activated-bar.hidden { display: none; }
.activated-bar .activated-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
  pointer-events: auto;
}
.activated-button {
  position: relative;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background: rgba(20, 22, 32, 0.72);
  border: 1px solid rgba(160, 170, 200, 0.35);
  color: rgba(220, 220, 240, 0.65);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  opacity: 0.55;
  padding: 0;
}
.activated-button:hover {
  opacity: 1;
  background: rgba(40, 44, 60, 0.92);
  border-color: rgba(220, 220, 240, 0.8);
}
.activated-button .ab-glyph {
  font-size: 1.05em;
  line-height: 1;
  font-weight: 700;
}
.activated-button .ab-slot {
  font-size: 0.62em;
  line-height: 1;
  margin-top: 2px;
  color: rgba(180, 180, 210, 0.85);
  letter-spacing: 0.04em;
}
.activated-button.active {
  --ch-c: #66ddaa;
  opacity: 1;
  background: rgba(24, 40, 32, 0.92);
  border-width: 2px;
  animation: rl-toggle-glow 1.4s ease-in-out infinite;
}
.activated-button.active .ab-glyph,
.activated-button.active .ab-slot {
  color: var(--ch-c, #66ddaa);
  text-shadow: 0 0 4px var(--ch-c, #66ddaa), 0 1px 0 #000;
}
@media (max-width: 640px) {
  .activated-bar { display: none; }
}

/* ── Companion Command Bar (left edge of game panel) ─────────────────────── */
/* Hunter Pet plan, Section 11: vertical strip with up to 6 slots (Ctrl+1..6).
   Slots 1-3 are global stance/recall commands; 4-6 are per-companion abilities.
   Hidden when state.companion_commands is empty. */
.companion-bar {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  z-index: 49;
  pointer-events: none;
}
.companion-bar.hidden { display: none; }
.companion-bar .companion-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}
.companion-button {
  position: relative;
  width: 2.4em;
  height: 2.4em;
  border-radius: 4px;
  background: rgba(20, 22, 32, 0.78);
  border: 1px solid rgba(160, 170, 200, 0.4);
  color: rgba(220, 220, 240, 0.92);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.companion-button:hover {
  background: rgba(40, 44, 60, 0.94);
  border-color: rgba(220, 220, 240, 0.85);
}
.companion-button .cb-slot {
  font-size: 1em;
  letter-spacing: 0;
  line-height: 1;
}
.companion-button.active {
  background: rgba(40, 56, 48, 0.92);
  border-color: #66ddaa;
  box-shadow: 0 0 4px rgba(102, 221, 170, 0.4);
}
.companion-kind-global  { border-left: 3px solid #88ccff; }
.companion-kind-ability { border-left: 3px solid #ffcc66; }
.companion-kind-cycler  { border-left: 3px solid #aa88dd; }
@media (max-width: 640px) {
  .companion-bar { display: none; }
}

/* Hunter Pet plan, Section 11: visual cue for the "click me to resummon"
   status icons (red pulse to draw the eye). */
.status-hex[data-status-id="ranger_pet_lost"],
.status-hex[data-status-id="holy_vanguard_fallen"] {
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 100, 100, 0.5);
  animation: rl-toggle-glow 1.6s ease-in-out infinite;
}
.status-hex[data-status-id="imp_hex"] {
  /* Imp-marked accuracy debuff — bright red ring distinguishes it from
     Warlock's Hex (Imp's Hex is accuracy, Warlock's Hex is damage taken). */
  box-shadow: 0 0 0 1px rgba(221, 68, 68, 0.7);
}

/* ── Landing-page feature reel ───────────────────────────────────────────────
   Replaces the static <p class="game-sub"> tagline with a slow rotating
   feature highlight. One feature visible at a time, held at centre for
   5 s, with a brief crossfade to the next.

   Cycle: 96 s · 16 items · stride 6 s. Item N peaks at real time
   t = 6 * N seconds (delay = N*6 - 48 s, so item 0 begins at progress
   50% → already at peak on first paint, no intro phase).

   Keyframes (percent of 96 s cycle):
     0–49%   off-stage above, opacity 0
     49–50%  fade-in + drift down to centre (~0.96 s)
     50–55%  HELD AT PEAK, opacity 1, translateY(-50%) — the "5 s pause"
     55–56%  fade-out + drift past centre (~0.96 s)
     56–100% off-stage below, opacity 0

   Per-item content is injected at runtime by the populator <script> in
   index.html (fetches /static/features.txt). Edit features.txt to add,
   reorder, or remove lines; no rebuild required.

   The left landing column (ASCII art + static feature list) is hidden
   so the reel doesn't duplicate it. Remove the .landing-left rule below
   to bring the ASCII art back. */
.landing-left { display: none !important; }
.landing-columns { justify-content: center !important; }

/* Default 100vh + align-items:center on the shared screen rule clipped
   the alpha banner at the top when the content was taller than the
   viewport. Override for the landing only: top-align and allow internal
   scrolling so the banner is always reachable. Small top padding keeps
   the banner off the very edge of the viewport. */
#landing-screen {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding-top: 12px;
  padding-bottom: 12px;
}

.reel-stage {
  --reel-row: 1.4em;
  position: relative;
  width: 100%;
  max-width: 690px;                               /* 150% of the prior 460 px slot */
  height: calc(var(--reel-row) * 2);              /* exactly two rows of text tall */
  /* Negative bottom margin offsets the .landing-center flex gap (10 px)
     PLUS the original 20 px bottom margin, collapsing the visible space
     between the reel and the user-bar by ~1.5 rows (≈30 px) so the
     login/register/account chip sits snug under the cycling feature. */
  margin: 4px auto -10px;
  overflow: hidden;
  contain: paint;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.reel-front {
  position: absolute; inset: 0;
  margin: 0; padding: 0;
  list-style: none;
}
.reel-front > li {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0;
  text-align: center; white-space: nowrap;
  font-size: 0.9rem;                              /* matches the prior .game-sub */
  line-height: 1;
  color: var(--text-dim);
  /* Pre-animation hidden state — prevents the "all items stacked at
     centre" flash on initial paint before keyframes apply. */
  opacity: 0;
  transform: translateY(-100%);
  animation: reel-feature 96s linear infinite;
  animation-delay: calc(var(--i) * 6s - 48s);
}
@keyframes reel-feature {
  0%, 49%   { opacity: 0; transform: translateY(-100%); }
  50%       { opacity: 1; transform: translateY(-50%); }   /* enter peak */
  55%       { opacity: 1; transform: translateY(-50%); }   /* HOLD 5 s */
  56%, 100% { opacity: 0; transform: translateY(0%); }
}

@media (prefers-reduced-motion: reduce) {
  .reel-front > li { animation: none; opacity: 1; transform: translateY(-50%); }
  .reel-stage { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}