:root {
  --bg: #0c0a10;
  --panel: #16131d;
  --panel-2: #1e1a28;
  --border: #2c2538;
  --ink: #e8e3f0;
  --ink-dim: #9a90ad;
  --accent: #c9a227;
  --hp: #d6453f;
  --mp: #3f7fd6;
  --xp: #b061d6;
  --enemy: #d6453f;
  --good: #4caf72;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

/* Touch hygiene: drop the 300ms tap delay and the grey tap-flash on controls,
   and stop rapid taps from selecting button labels. */
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
body {
  background: radial-gradient(circle at 50% -10%, #1a1424, var(--bg) 60%);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.hidden { display: none !important; }

/* ── Connection status ────────────────────────────────────── */
/* A small pill pinned top-center while the live SSE stream is dropped (deploy /
   sleep / network blip). EventSource reconnects on its own; this just tells the
   player why the floor has gone quiet. */
.conn-status {
  position: fixed; top: 0.6rem; left: 50%; transform: translateX(-50%);
  z-index: 40; padding: 0.35rem 0.85rem; border-radius: 20px;
  background: rgba(214,69,63,0.92); color: #fff;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4); pointer-events: none;
}
.conn-status::before { content: "⚠ "; }

/* ── Start screen ─────────────────────────────────────────── */
/* A modal floating over the (empty) game frame on first load / New Crawl. */
.start-overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(8,6,12,0.86);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  overflow-y: auto;
}
.start-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem 2.25rem;
  width: min(460px, 92vw);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.logo {
  font-size: 4rem; margin: 0; letter-spacing: 0.3rem; font-weight: 800;
  color: var(--ink); text-shadow: 0 0 24px rgba(201,162,39,0.35);
}
.logo span { color: var(--accent); }
.tagline { color: var(--ink-dim); margin: 0.25rem 0 1.75rem; }
.seed-label { display: block; text-align: left; font-size: 0.8rem; color: var(--ink-dim); margin-bottom: 0.4rem; }
.seed-label span { opacity: 0.6; }
.seed-field { position: relative; margin-bottom: 0.9rem; }
#seed-input {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--ink);
  font-size: 1rem;
}
#seed-input:focus { outline: none; border-color: var(--accent); }

/* Recent-seeds dropdown under the manual seed box */
.seed-history {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  list-style: none; margin: 0; padding: 0.25rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55); max-height: 210px; overflow-y: auto;
}
.seed-history-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.5rem 0.7rem; border: none; border-radius: 6px; background: transparent;
  color: var(--ink); font-family: monospace; font-size: 0.9rem;
}
.seed-history-item:hover { background: var(--panel); }

.primary-btn {
  width: 100%; padding: 0.85rem; border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #d8b13a, var(--accent));
  color: #2a2008; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:active { transform: translateY(1px); }
.error-text { color: var(--hp); min-height: 1.2em; margin: 0.8rem 0 0; font-size: 0.9rem; }

/* Primary CTA: "Start Your Journey" with a small "random seed" subtitle */
.start-primary { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.15; }
.start-primary span {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.7;
}
/* Resume CTA: sits above the random-seed button when a crawl is still alive. A
   "continue" green sets it apart from the gold "start fresh" action. */
.start-resume {
  margin-bottom: 0.7rem;
  background: linear-gradient(180deg, #5fc78c, var(--good));
  color: #07120b;
}
.start-active-btn { width: 100%; margin-top: 0.7rem; }
.enter-btn { width: 100%; }
/* These ghost buttons are benign actions — the default ghost-btn red hover reads
   as a warning (it's meant for "New Crawl"/abandon), so use the accent instead. */
.start-active-btn:hover, .enter-btn:hover { border-color: var(--accent); color: var(--ink); }

/* ── Backrooms theme toggle + start-screen reskin ──────────────────────────── */
.theme-toggle {
  width: 100%; margin: 0 0 1.2rem; padding: 0.7rem; cursor: pointer;
  border: 2px solid #b9a100; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #d8c84a, #d8c84a 8px, #cdbd3e 8px, #cdbd3e 16px);
  color: #2a2606; font-weight: 800; letter-spacing: 0.05em; font-size: 0.9rem;
  text-transform: uppercase;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.theme-toggle:hover { filter: brightness(1.06); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle.active { background: #181810; color: #e9e08a; border-color: #6e6320; }

/* When the Backrooms theme is selected, tint the start card to match its mood. */
body.theme-backrooms .start-card {
  background: #efe7a8; border-color: #b9a100; color: #2a2606;
}
body.theme-backrooms .start-card .logo { color: #2a2606; }
body.theme-backrooms .start-card .logo span { color: #8a7a00; }
body.theme-backrooms .start-card .tagline,
body.theme-backrooms .start-card .seed-label,
body.theme-backrooms .start-card .start-divider span { color: #5c5320; }
body.theme-backrooms .start-card .seed-label span { color: #8a7a00; }
body.theme-backrooms .start-card .seed-field input {
  background: #fffdf0; border-color: #b9a100; color: #2a2606;
}

/* "or use a seed" divider between the quick-start actions and manual entry */
.start-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.5rem 0 1.1rem; color: var(--ink-dim); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.start-divider::before, .start-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Active-seeds picker */
.active-seeds-panel { margin-top: 1rem; text-align: left; }
.active-seeds-status { color: var(--ink-dim); font-size: 0.85rem; margin: 0 0 0.6rem; }
.active-seeds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; max-height: 240px; overflow-y: auto; }
.active-seed-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.8rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--ink);
  font-size: 0.95rem; transition: border-color 0.12s ease, background 0.12s ease;
}
.active-seed-item:hover { border-color: var(--accent); background: var(--panel); }
.active-seed-name { font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-seed-meta { color: var(--ink-dim); font-size: 0.8rem; flex-shrink: 0; }

/* Mobile: a floating modal makes less sense — fill the screen with the dark theme
   and drop the card chrome so the same options read as a full start screen. */
@media (max-width: 900px) {
  .start-overlay { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; align-items: flex-start; padding: 1.25rem; }
  .start-card { box-shadow: none; border: none; padding: 2rem 1.25rem; width: 100%; }
}

/* ── Game layout ──────────────────────────────────────────── */
#game-screen { align-items: flex-start; }
.game-grid {
  display: grid; grid-template-columns: minmax(0, 660px) 320px; gap: 1.25rem;
  width: 100%; max-width: 1024px; margin: 0 auto;
}
.map-pane { position: relative; }
.map-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.dungeon-name { font-weight: 700; font-size: 1.1rem; }
.dungeon-rarity { font-size: 0.8rem; font-weight: 600; }
.rarity-common { color: #9aa0a6; }
.rarity-uncommon { color: #5dd55d; }
.rarity-rare { color: #4d8bf0; }
.rarity-super { color: #b15cff; }
.rarity-legendary { color: #ffb000; }
.seed-tag { color: var(--ink-dim); font-size: 0.8rem; font-family: monospace; }

.canvas-stack { position: relative; width: 100%; aspect-ratio: 1 / 1; touch-action: none; }
#map-canvas {
  width: 100%; aspect-ratio: 1 / 1; background: #060509;
  border: 1px solid var(--border); border-radius: 10px; display: block;
  image-rendering: pixelated;
}
#fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; border-radius: 10px;
}

/* D-pad */
.dpad { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.85; }
.dpad-mid { display: flex; gap: 36px; }
.dpad-btn {
  width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(30,26,40,0.85); color: var(--ink); font-size: 1rem; cursor: pointer;
}
.dpad-btn:active { background: var(--accent); color: #2a2008; }
/* Hide the movement pad during combat — you fight or flee, you don't walk. */
.dpad.hidden-in-combat { display: none; }

/* Combat panel */
.combat-panel {
  position: absolute; inset: auto 0 16px 0; margin: 0 auto; width: min(92%, 560px);
  background: rgba(16,12,22,0.96); border: 1px solid var(--enemy); border-radius: 12px;
  padding: 1rem; display: flex; gap: 1rem; align-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.combat-sprite { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated;
  background: #0c0a12; border: 1px solid var(--border); border-radius: 8px; }
.combat-info { flex: 1; min-width: 0; }
.combat-name { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.combat-desc { color: var(--ink-dim); font-size: 0.82rem; margin: 0.2rem 0 0.5rem; }
.rarity-badge { font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 20px; background: var(--panel-2); color: var(--accent); text-transform: capitalize; }
.hpbar { height: 12px; background: #2a1414; border-radius: 6px; overflow: hidden; }
.hpbar-fill { height: 100%; background: var(--enemy); transition: width 0.2s ease; }
.hp-text { font-size: 0.78rem; color: var(--ink-dim); margin-top: 0.25rem; }
.hpbar-fill.player { background: var(--good); }

/* The player's own health, mirrored into the combat panel so you can read the
   fight at a glance. The avatar + "You" label make it unmistakably yours. */
.combat-player {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border);
}
.combat-player-avatar {
  width: 44px; height: 44px; flex: none; object-fit: contain; image-rendering: pixelated;
  background: #0c0a12; border: 2px solid var(--good); border-radius: 8px;
}
.combat-player-info { flex: 1; min-width: 0; }
.combat-player-label { font-size: 0.78rem; font-weight: 700; color: var(--good); margin-bottom: 0.2rem; }
/* Below 20% HP: the avatar and bar pulse an alarming red. */
.combat-player.low-hp .hpbar-fill.player { background: var(--hp); }
.combat-player.low-hp .combat-player-avatar { border-color: var(--hp); animation: combat-danger 0.9s ease-in-out infinite; }
.combat-player.low-hp .combat-player-label { color: var(--hp); }
@keyframes combat-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,63,0.0); }
  50%      { box-shadow: 0 0 10px 3px rgba(214,69,63,0.8); }
}

.combat-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.combat-btn { flex: 1; padding: 0.6rem; border: none; border-radius: 7px; cursor: pointer; font-weight: 700; }
.combat-btn.attack { background: var(--enemy); color: #fff; }
.combat-btn.quick { background: var(--accent); color: #10131a; }
.combat-btn.quick.active { opacity: 0.85; }
.combat-btn.quick.disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7); }
.combat-btn.flee { background: var(--panel-2); color: var(--ink); border: 1px solid var(--border); }
.combat-btn:active { transform: translateY(1px); }

/* ── Combat dice (d20) ────────────────────────────────────────
   A swing's roll, shown as a pixel-art d20 face. The player's die tumbles then
   settles; the monster's just pops its final face. A natural 20 (a crit) glows. */
.combat-die { width: 46px; height: 46px; flex: none; object-fit: contain;
  image-rendering: pixelated; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.combat-die.hidden { display: none; }
.combat-die.monster { position: absolute; top: 10px; left: 10px; width: 44px; height: 44px; z-index: 2; }
.combat-die.player { margin: 0 0.1rem; }
.combat-die.settle { animation: die-settle 0.22s ease-out; }
@keyframes die-settle {
  0%   { transform: scale(1.35) rotate(-12deg); }
  60%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.combat-die.crit { filter: drop-shadow(0 0 6px rgba(240,200,60,0.95)) drop-shadow(0 0 13px rgba(240,160,40,0.7)); }

/* HP bar flashes red when Quick Resolve is clicked while barred (<10% HP). */
.combat-player.hp-flash .hpbar-fill.player { background: var(--hp); }
.combat-player.hp-flash { animation: hp-flash 0.7s ease-in-out; }
@keyframes hp-flash {
  0%, 100%  { box-shadow: 0 0 0 0 rgba(214,69,63,0); }
  20%, 60%  { box-shadow: 0 0 12px 4px rgba(214,69,63,0.9); }
}

/* ── Sidebar ──────────────────────────────────────────────── */
.side-pane { display: flex; flex-direction: column; gap: 1rem; }
.player-card, .inventory, .log-wrap {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem;
}
.player-card { display: flex; gap: 0.9rem; }
.avatar { width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; display: block; }
/* Clickable portrait — opens the avatar picker. The pencil badge hints it's editable. */
.avatar-btn { position: relative; flex: none; padding: 0; border: none; background: none;
  cursor: pointer; border-radius: 8px; line-height: 0; }
.avatar-btn:hover .avatar, .avatar-btn:focus-visible .avatar { border-color: var(--accent); }
.avatar-btn:focus-visible { outline: none; }
.avatar-edit { position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
  background: var(--accent); color: #0c0a12; border-radius: 50%;
  border: 2px solid var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 0.92; transition: transform 0.12s ease, opacity 0.12s ease; }
.avatar-btn:hover .avatar-edit, .avatar-btn:focus-visible .avatar-edit { opacity: 1; transform: scale(1.12); }
.player-meta { flex: 1; min-width: 0; }
.player-level { font-weight: 700; margin-bottom: 0.4rem; }
.bar-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; font-size: 0.75rem; }
.bar-label { width: 22px; color: var(--ink-dim); }
.bar { flex: 1; height: 10px; background: #100d16; border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; transition: width 0.25s ease; }
.bar-fill.hp { background: var(--hp); }
.bar-fill.mp { background: var(--mp); }
.bar-fill.xp { background: var(--xp); }
.bar-text { width: 58px; text-align: right; color: var(--ink-dim); }
.stat-row { display: flex; gap: 0.8rem; margin-top: 0.5rem; font-size: 0.9rem; }
.gear-row { display: flex; gap: 0.5rem; margin-top: 0.45rem; font-size: 0.72rem; color: var(--ink-dim); }
/* Scoped to the character-sheet chips so it can't bleed onto #item-card.gear,
   whose `flex: 1` would otherwise stretch the item modal to full width. */
.gear-row .gear {
  display: flex; align-items: center; gap: 0.3rem; min-width: 0; flex: 1;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 0.2rem 0.4rem; overflow: hidden;
}
/* A populated gear chip is a tap target → opens the equipped item's popover (unequip). */
.gear-row .gear.equipped { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.gear-row .gear.equipped:hover { border-color: var(--accent); background: #241f17; }
.gear-row .gear .gear-ico {
  flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; line-height: 1;
}
.gear-row .gear .gear-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gear-row .gear .gear-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.gear-row .gear .gear-total { flex: none; margin-left: auto; padding-left: 0.3rem; font-weight: 700; color: var(--ink); }
.gear-row .gear .gear-total:empty { display: none; }

h3 { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
.key-slot { float: right; filter: grayscale(1) brightness(0.5); opacity: 0.5; transition: all 0.2s ease; }
.key-slot.has-key { filter: none; opacity: 1; text-shadow: 0 0 8px rgba(232,195,74,0.8); }
.inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.inv-slot {
  aspect-ratio: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; font-size: 1.1rem;
}
.inv-slot.empty { cursor: default; opacity: 0.4; }
.inv-slot img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.inv-slot:not(.empty):hover { border-color: var(--accent); }
.inv-slot.spell { border-color: var(--xp); box-shadow: inset 0 0 8px rgba(176,97,214,0.35); }
.inv-slot.spell:hover { border-color: #d08bf0; }
.inv-slot.gear-item { border-color: var(--accent); box-shadow: inset 0 0 8px rgba(201,162,39,0.3); }
.inv-slot.gear-item:hover { border-color: #e6c84a; }

/* Dedicated HP/MP potion quick-slots — a labelled, colour-coded pair above the
   pack grid. Picked-up potions land here first; tap to quick-drink. */
.potion-slots { display: flex; gap: 0.4rem; margin-bottom: 0.55rem; }
.potion-slots.hidden { display: none; }
.potion-slot {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.45rem; min-height: 42px; cursor: pointer; color: var(--ink);
  font: inherit; text-align: left; transition: border-color 0.15s ease;
}
.potion-slot.empty { cursor: default; opacity: 0.72; }
.potion-slot-label {
  flex: none; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.12rem 0.32rem; border-radius: 4px;
}
.potion-slot.health { border-color: rgba(214,69,63,0.55); }
.potion-slot.health .potion-slot-label { background: rgba(214,69,63,0.22); color: #ef9b97; }
.potion-slot.mana { border-color: rgba(63,127,214,0.55); }
.potion-slot.mana .potion-slot-label { background: rgba(63,127,214,0.22); color: #9cbcf0; }
.potion-slot-icon {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  height: 26px; font-size: 1.2rem;
}
.potion-slot-icon img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.potion-slot.empty .potion-slot-icon::after { content: "—"; color: var(--ink-dim); }
.potion-slot.health:not(.empty):hover { border-color: var(--hp); }
.potion-slot.mana:not(.empty):hover { border-color: var(--mp); }

/* Item detail popover — opened by tapping a pack slot. Centered (fixed) so it
   lands in view even on mobile, where the pack sits below the fold. */
.item-modal { position: fixed; inset: 0; background: rgba(6,5,9,0.72); display: flex;
  align-items: center; justify-content: center; z-index: 11; padding: 1rem; }
.item-card {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.4rem; width: min(340px, 92vw);
  box-shadow: 0 18px 50px rgba(0,0,0,0.65); animation: pop 0.16s ease-out;
}
.item-card.spell { border-color: var(--xp); }
.item-card.gear { border-color: var(--accent); }
.item-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.item-icon { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
.item-icon img { width: 80%; height: 80%; object-fit: contain; image-rendering: pixelated; }
.item-icon canvas { width: 90%; height: 90%; object-fit: contain; image-rendering: pixelated; }
.item-id { min-width: 0; }
.item-name { font-size: 1.1rem; font-weight: 700; }
.item-meta { font-size: 0.74rem; text-transform: capitalize; }
.item-desc { color: var(--ink-dim); font-size: 0.85rem; line-height: 1.4; margin: 0 0 0.8rem; }
.item-stats { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1rem; }
.item-stats:empty { display: none; }
.item-stat { font-size: 0.8rem; color: var(--accent); }
.item-stat.stat-up { color: var(--good); }
.item-stat.stat-down { color: var(--hp); }
.item-stat.stat-same { color: var(--ink-dim); }
.trade-stats { margin-top: 0.2rem; display: flex; flex-direction: column; gap: 0.1rem; }
.trade-stats .item-stat { font-size: 0.72rem; }
.item-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.item-actions .primary-btn { width: auto; flex: 1; }
.item-actions .ghost-btn.danger { flex: none; padding: 0.85rem 1.1rem; }
.item-actions .ghost-btn.danger:hover { border-color: var(--hp); color: #fff; background: var(--hp); }
.item-close { position: absolute; top: 0.45rem; right: 0.45rem; width: 30px; height: 30px;
  border: none; background: transparent; color: var(--ink-dim); font-size: 0.9rem; cursor: pointer; border-radius: 6px; }
.item-close:hover { color: var(--ink); background: var(--panel-2); }

.log { height: 150px; overflow-y: auto; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.25rem; }
.log-line { color: var(--ink-dim); line-height: 1.3; }
.log-line.combat { color: #e8a3a0; }
.log-line.loot { color: #d8c071; }
.log-line.trap { color: #e0795a; }
.log-line.system { color: #9fd6a8; }
.log-line.warn { color: #b9a0d6; }

.ghost-btn { background: transparent; border: 1px solid var(--border); color: var(--ink-dim);
  padding: 0.6rem; border-radius: 8px; cursor: pointer; }
.ghost-btn:hover { border-color: var(--hp); color: var(--ink); }

/* Event modal (trap sprung, etc.) */
.event-modal { position: absolute; inset: 0; background: rgba(6,5,9,0.7); display: flex; align-items: center; justify-content: center; z-index: 9; border-radius: 10px; }
.event-card {
  background: var(--panel); border: 1px solid var(--enemy); border-radius: 14px;
  padding: 1.75rem 2rem; text-align: center; width: min(360px, 86%);
  box-shadow: 0 18px 50px rgba(0,0,0,0.65); animation: pop 0.16s ease-out;
}
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.event-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 0.4rem; }
.event-card h2 { font-size: 1.4rem; margin: 0 0 0.4rem; color: var(--enemy); }
.event-card p { color: var(--ink-dim); margin: 0 0 1.4rem; }
.event-card .primary-btn { width: auto; padding: 0.6rem 1.8rem; }

/* End overlay */
.end-overlay { position: fixed; inset: 0; background: rgba(6,5,9,0.85); display: flex; align-items: center; justify-content: center; z-index: 10; }
.end-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 2.5rem; text-align: center; width: min(420px, 90vw); }
.end-card h2 { font-size: 2rem; margin: 0 0 0.5rem; }
.end-card.win h2 { color: var(--accent); }
.end-card.lose h2 { color: var(--hp); }
.end-card p { color: var(--ink-dim); margin-bottom: 1.5rem; }

/* Vendor dialogue */
.vendor-modal { position: absolute; inset: 0; background: rgba(6,5,9,0.78); display: flex; align-items: center; justify-content: center; z-index: 11; border-radius: 10px; }
.vendor-card {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.4rem; width: min(700px, 94vw); max-height: 92%; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65); animation: pop 0.16s ease-out;
}
.vendor-head { display: flex; align-items: center; gap: 0.9rem; }
.vendor-avatar {
  width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; flex: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.vendor-id { flex: 1; min-width: 0; }
.vendor-name { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.vendor-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent);
  border: 1px solid var(--border); border-radius: 20px; padding: 0.1rem 0.5rem; }
.vendor-greeting { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; margin: 0.25rem 0 0; }
.vendor-gold { font-weight: 700; color: var(--accent); white-space: nowrap; align-self: flex-start; display: flex; align-items: center; gap: 0.3rem; }
.vendor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 0; }
.vendor-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.vendor-col h4 { margin: 0 0 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); }
/* Anvil reforge panel — reuses the trade-row machinery, single column. */
.vendor-forge { display: flex; flex-direction: column; min-height: 0; }
.vendor-forge h4 { margin: 0 0 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.vendor-forge .trade-meta { text-transform: capitalize; }
.trade-list { display: flex; flex-direction: column; gap: 0.45rem; overflow-y: auto; max-height: 46vh; padding-right: 0.2rem; min-width: 0; }
.trade-row {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.55rem; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.coin-icon { width: 1.05em; height: 1.05em; object-fit: contain; image-rendering: pixelated; vertical-align: -0.15em; flex: none; }
.trade-icon { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.trade-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.trade-info { flex: 1; min-width: 0; }
.trade-name { font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-meta { font-size: 0.72rem; color: var(--ink-dim); }
.trade-desc { font-size: 0.72rem; color: var(--ink-dim); line-height: 1.3; margin-top: 0.15rem; white-space: normal; }
.trade-price { font-size: 0.8rem; font-weight: 700; color: var(--accent); white-space: nowrap; flex: none; display: flex; align-items: center; gap: 0.25rem; }
.trade-btn {
  flex: none; padding: 0.35rem 0.7rem; border: none; border-radius: 6px; cursor: pointer;
  font-weight: 700; font-size: 0.78rem; background: linear-gradient(180deg, #d8b13a, var(--accent)); color: #2a2008;
}
.trade-btn:hover { filter: brightness(1.08); }
.trade-btn:disabled { background: var(--panel); color: var(--ink-dim); cursor: not-allowed; filter: none; border: 1px solid var(--border); }
.trade-row.sold { opacity: 0.5; }
.trade-empty { color: var(--ink-dim); font-size: 0.82rem; padding: 0.5rem 0.2rem; }
.vendor-card .primary-btn { width: auto; align-self: center; padding: 0.6rem 2rem; }

/* ── High scores ──────────────────────────────────────────── */
.scores-wrap h3 { display: flex; align-items: center; justify-content: space-between; }
.scores-more {
  background: transparent; border: 1px solid var(--border); color: var(--ink-dim);
  font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 6px; cursor: pointer;
}
.scores-more:hover { border-color: var(--accent); color: var(--ink); }
.scores-podium { display: flex; flex-direction: column; gap: 0.3rem; }
.score-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.5rem;
}
.score-row.top-1 { border-color: #ffb000; }
.score-row.top-2 { border-color: #c8cdd6; }
.score-row.top-3 { border-color: #cd7f32; }
.score-rank { flex: none; width: 1.6em; text-align: center; font-weight: 700; color: var(--ink-dim); }
.score-avatar { flex: none; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated;
  background: var(--panel); border: 1px solid var(--border); border-radius: 5px; }
.score-avatar.empty { opacity: 0.35; }
.score-name { font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Game-mode tag — the board mixes themes, so each entry shows where it came from. */
.score-theme {
  flex: none; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.32rem; border-radius: 4px; border: 1px solid var(--border); color: var(--ink-dim);
}
.score-theme.backrooms { color: #e9d27a; border-color: #6b5e2e; background: rgba(233,210,122,0.08); }
.score-theme.classic { color: #9fb6d6; border-color: #3a4660; background: rgba(159,182,214,0.08); }
.score-meta { flex: 1; text-align: right; color: var(--ink-dim); font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-empty { color: var(--ink-dim); font-size: 0.76rem; font-style: italic; }

/* Leaderboard modal (full top 10) */
.scores-modal { position: fixed; inset: 0; background: rgba(6,5,9,0.82); display: flex; align-items: center; justify-content: center; z-index: 12; }
.scores-card {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.6rem; width: min(440px, 92vw); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 18px 50px rgba(0,0,0,0.65);
  animation: pop 0.16s ease-out;
}
.scores-card h2 { margin: 0; font-size: 1.4rem; color: var(--accent); text-align: center; }
.scores-list { display: flex; flex-direction: column; gap: 0.35rem; overflow-y: auto; }
.scores-card .primary-btn { width: auto; align-self: center; padding: 0.55rem 2rem; }

/* Avatar picker modal */
.avatar-modal { position: fixed; inset: 0; background: rgba(6,5,9,0.82); display: flex;
  align-items: center; justify-content: center; z-index: 12; padding: 1rem; }
.avatar-card {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.6rem; width: min(560px, 94vw); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 18px 50px rgba(0,0,0,0.65);
  animation: pop 0.16s ease-out;
}
.avatar-card h2 { margin: 0; font-size: 1.4rem; color: var(--accent); text-align: center; }
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem; overflow-y: auto; padding: 0.15rem;
}
.avatar-choice {
  padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
  cursor: pointer; aspect-ratio: 1; line-height: 0; transition: border-color 0.12s ease, transform 0.12s ease;
}
.avatar-choice img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.avatar-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.avatar-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.avatar-card .primary-btn { width: auto; align-self: center; padding: 0.55rem 2rem; }

/* Death cause (what killed you) */
.death-cause {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  background: var(--panel-2); border: 1px solid var(--enemy); border-radius: 10px;
  padding: 0.7rem 0.85rem; margin: 0 0 1.3rem;
}
.death-monster {
  width: 56px; height: 56px; flex: none; object-fit: contain; image-rendering: pixelated;
  background: #0c0a12; border: 1px solid var(--border); border-radius: 8px;
}
.death-msg { margin: 0; color: #e8a3a0; font-size: 0.9rem; line-height: 1.35; }

/* Death score entry / result */
.score-entry { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.score-entry label { font-size: 0.78rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
#score-name {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: 8px; text-align: center;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--ink);
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
}
#score-name:focus { outline: none; border-color: var(--accent); }
.score-entry .ghost-btn { padding: 0.45rem; }
.score-result { color: var(--ink-dim); font-size: 0.95rem; margin: 0 0 1.4rem; }
.score-result.placed { color: var(--accent); font-weight: 700; font-size: 1.05rem; }

/* ── Mobile HUD + journal toasts ──────────────────────────────
   Both are mobile-only — the desktop sidebar already shows vitals and the full
   journal, so these stay hidden until the layout collapses (≤900px). */
.mobile-hud { display: none; }
.journal-toasts { display: none; }
.mobile-deck { display: none; }

/* Journal modal (tap-to-expand recent history). Reuses the .log-line colors. */
.journal-modal { position: fixed; inset: 0; background: rgba(6,5,9,0.8); display: flex;
  align-items: center; justify-content: center; z-index: 12; padding: 1rem; }
.journal-card {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.4rem 1.2rem; width: min(440px, 94vw); max-height: 80vh;
  display: flex; flex-direction: column; gap: 0.8rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65); animation: pop 0.16s ease-out;
}
.journal-card h2 { margin: 0; font-size: 1.2rem; color: var(--accent); text-align: center; }
.journal-full { overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }

@media (max-width: 900px) {
  .game-grid { grid-template-columns: 1fr; }
  .side-pane { order: 2; }
  /* On desktop this lives at the top of the sidebar, but on mobile the sidebar
     stacks right under the d-pad — so a top-of-stack abandon button is far too
     easy to mis-tap mid-movement. Push it to the bottom of the sidebar stack
     (after the high scores) so it's out of the movement zone. */
  #new-run-btn { order: 99; }
  .vendor-cols { grid-template-columns: 1fr; }
  .trade-list { max-height: 30vh; }

  /* Pinned vitals + objective bar. Fixed so it never scrolls away; the game
     screen gets top padding to clear it (see #game-screen below). */
  .mobile-hud {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 8;
    background: rgba(12,10,16,0.96); border-bottom: 1px solid var(--border);
    padding: calc(env(safe-area-inset-top, 0px) + 0.4rem) 0.7rem 0.45rem;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .mhud-vitals { display: flex; align-items: center; gap: 0.5rem; }
  .mhud-loc { font-size: 0.72rem; font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
  .mhud-stat { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; }
  .mhud-ico { font-size: 0.8rem; line-height: 1; }
  .mhud-stat .bar { flex: 1; height: 8px; }
  .mhud-num { font-size: 0.68rem; color: var(--ink-dim); white-space: nowrap; min-width: 1.6em; text-align: left; }
  .mhud-gold { display: flex; align-items: center; gap: 0.2rem; font-size: 0.74rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
  .mhud-menu-btn {
    flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer;
  }
  /* Dropdown anchored to the bar's top-right (under the ≡ button). The .mobile-hud
     is already position:fixed, so it's the positioning context for this. */
  .mhud-menu {
    position: absolute; top: 100%; right: 0.5rem; z-index: 9; margin-top: 0.2rem;
    display: flex; flex-direction: column; min-width: 168px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.3rem; box-shadow: 0 12px 30px rgba(0,0,0,0.6); animation: pop 0.12s ease-out;
  }
  .mhud-menu-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
    padding: 0.65rem 0.7rem; border: none; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--ink); font-size: 0.92rem;
  }
  .mhud-menu-item:active { background: var(--panel-2); }
  .mhud-menu-item span { font-size: 1.05rem; }
  .mhud-objective { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; text-align: center; padding: 0.15rem; }
  .mhud-objective.seek-key { color: var(--accent); }
  .mhud-objective.seek-exit { color: #8cffe1; }
  .mhud-objective:empty { display: none; }

  /* Stack the map and the controls deck and centre them as a group in the space
     below the fixed HUD, so the d-pad/pack sit in the open area just under the
     map rather than pinned to the very bottom edge. Top padding clears the HUD. */
  #game-screen {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0px) + 5.1rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.8rem);
  }
  .canvas-stack { width: min(100%, 46vh); margin-inline: auto; }

  /* Toasts: stack just below the HUD and fade. Container ignores taps; the
     toasts themselves are tappable (→ open the journal). */
  .journal-toasts {
    display: flex; flex-direction: column; gap: 0.3rem; align-items: center;
    position: fixed; left: 0; right: 0; z-index: 7; pointer-events: none;
    top: calc(env(safe-area-inset-top, 0px) + 5.3rem); padding: 0 0.7rem;
  }
  .journal-toast {
    pointer-events: auto; max-width: min(92vw, 420px);
    background: rgba(22,19,29,0.97); border: 1px solid var(--border); border-left-width: 3px;
    border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.82rem; color: var(--ink);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5); animation: toast-in 0.2s ease-out;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .journal-toast.out { opacity: 0; transform: translateY(-6px); }
  .journal-toast.combat { border-left-color: #e8a3a0; }
  .journal-toast.loot { border-left-color: #d8c071; }
  .journal-toast.trap { border-left-color: #e0795a; }
  .journal-toast.system { border-left-color: #9fd6a8; }
  .journal-toast.warn { border-left-color: #b9a0d6; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

  .map-pane { display: flex; flex-direction: column; }

  /* The whole desktop sidebar is replaced on phones by the top HUD (vitals),
     the bottom deck (pack + char + d-pad), and the ≡ menu (journal/scores/new). */
  .side-pane { display: none; }

  /* ── Controls deck ────────────────────────────────────────────
     Holds the pack row + compact avatar/gear strip (left) and the diamond d-pad
     (right). Sits in normal flow right below the map (no longer pinned to the
     screen bottom), so it lands in the open space under the map. The .inventory
     and .dpad nodes are relocated in here by game.js; the rules below restyle
     them for the deck. */
  /* Stacked top-to-bottom: the d-pad sits in the open space just under the map,
     then the full-width pack row, then the full-width avatar/gear strip. (The
     d-pad used to share a row with the pack on the right, which squished both —
     now each band spans the screen and scales to it.) */
  .mobile-deck {
    display: grid; grid-template-columns: 1fr;
    grid-template-areas: "dpad" "pack" "char";
    align-items: stretch; gap: 0.7rem;
    width: 100%; margin-top: clamp(0.75rem, 3vh, 2rem);
    padding: 0 0.5rem;
  }
  .deck-pack { grid-area: pack; display: flex; align-items: center; gap: 0.5rem; min-width: 0; width: 100%; }
  .deck-char { grid-area: char; display: flex; align-items: center; gap: 0.6rem; min-width: 0; width: 100%; }
  .deck-dpad-mount { grid-area: dpad; display: flex; justify-content: center; align-items: center; }

  /* "Pack" label: hidden in normal play (bare slots, like the mockup), shown as
     "PACK" during combat when the d-pad is gone. */
  .deck-pack-label {
    display: none; flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-dim);
  }
  .combat-active .deck-pack-label { display: block; }
  /* In combat the char strip and d-pad drop out; the pack gets the full row.
     Collapse the (now empty) d-pad band too so it leaves no gap above the pack. */
  .combat-active .deck-char { display: none; }
  .combat-active .deck-dpad-mount { display: none; }
  /* During combat the map is just a dimmed backdrop behind the centered combat
     card, so float the pack as a quick-use bar pinned just below that card
     (instead of trailing under the full-height map). z-index clears the dim. */
  .combat-active .mobile-deck {
    position: fixed; left: 50%; top: calc(45% + min(41vh, 235px)); transform: translateX(-50%);
    width: min(92vw, 420px); margin: 0; z-index: 11;
    justify-content: center;
  }
  .combat-active .deck-pack { justify-content: center; }

  /* Relocated pack: strip the sidebar card chrome, lay the 6 slots out in one
     full-width row that scales to fit (each slot flexes to an equal share). */
  .deck-pack-mount { min-width: 0; flex: 1; }
  /* The relocated pack lays its potion slots and the 6-slot grid in one row. */
  .deck-pack-mount .inventory {
    background: none; border: none; border-radius: 0; padding: 0;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .deck-pack-mount .inventory h3 { display: none; }
  .deck-pack-mount .inventory-grid {
    display: flex; grid-template-columns: none; gap: 0.45rem; flex: 1; min-width: 0;
  }
  .deck-pack-mount .inv-slot {
    flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 1;
    max-width: 64px; font-size: 1.15rem;
  }
  /* The two potion slots become square icon tiles (label stacked over the icon)
     so they read at a glance in the compact deck row. */
  .deck-pack-mount .potion-slots { flex: none; gap: 0.4rem; margin: 0; }
  .deck-pack-mount .potion-slot {
    flex: none; width: 46px; height: 46px; flex-direction: column; gap: 1px;
    padding: 2px; justify-content: center; min-height: 0;
  }
  .deck-pack-mount .potion-slot-label { font-size: 0.5rem; padding: 0 2px; }
  .deck-pack-mount .potion-slot-icon { flex: none; height: auto; font-size: 1.05rem; }
  .deck-pack-mount .potion-slot-icon img { width: 22px; height: 22px; }

  /* Avatar + gear chips, sized up to fill the full-width strip. */
  .deck-avatar-btn { position: relative; flex: none; padding: 0; border: none; background: none; cursor: pointer; line-height: 0; }
  .deck-avatar {
    width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  }
  .deck-avatar-edit { width: 16px; height: 16px; font-size: 0.58rem; bottom: -3px; right: -3px; }
  .deck-gear { display: flex; gap: 0.5rem; min-width: 0; flex: 1; }
  .deck-chip {
    display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0;
    font-size: 0.8rem; font-weight: 700; color: var(--ink); overflow: hidden;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px;
    padding: 0.4rem 0.5rem;
  }
  .deck-chip.equipped { cursor: pointer; }
  .deck-chip.equipped:active { border-color: var(--accent); background: #241f17; }
  .deck-chip .gear-ico {
    flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; line-height: 1;
  }
  .deck-chip .gear-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
  .deck-chip .gear-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .deck-chip .gear-total { flex: none; margin-left: auto; padding-left: 0.3rem; font-weight: 700; color: var(--ink); }
  .deck-chip .gear-total:empty { display: none; }

  /* Relocated d-pad: a roomy diamond in its own band below the map. Big, well-spread
     buttons so the thumb has comfortable targets that don't crowd each other. */
  .dpad { position: static; right: auto; bottom: auto; opacity: 1; margin: 0; gap: 12px; }
  .dpad-mid { gap: 76px; }
  .dpad-btn { width: 66px; height: 66px; font-size: 1.7rem; }

  /* ── Combat as a centered modal ───────────────────────────────
     Lift the docked panel to the screen centre, stack it vertically, and dim the
     map behind it. Dim only .canvas-stack (a sibling of .combat-panel) — a filter
     on .map-pane would also dim and re-anchor the fixed panel inside it. */
  .combat-active .canvas-stack { filter: brightness(0.32); transition: filter 0.2s ease; }
  .combat-panel {
    position: fixed; inset: auto; left: 50%; top: 45%; transform: translate(-50%, -50%);
    margin: 0; width: min(92vw, 420px); max-height: 80vh; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0.6rem; z-index: 11;
  }
  .combat-sprite { width: 84px; height: 84px; align-self: center; }
}

/* ── Touch devices (phones/tablets) ───────────────────────────
   No hover, so tap targets need to clear the ~44px minimum. */
@media (hover: none) {
  /* Roomier primary tap targets. */
  .combat-btn { padding: 0.85rem; }
  .scores-more { padding: 0.35rem 0.7rem; }

  /* Vendor Buy/Sell buttons are tiny (≈26px tall) by default — give them a real
     touch target, and a bit more row padding so the whole row is easy to hit. */
  .trade-btn { padding: 0.6rem 0.9rem; min-height: 40px; }
  .trade-row { padding: 0.55rem; }
}

/* Small phones: reclaim screen edge padding so the map gets more room. */
@media (max-width: 560px) {
  .screen { padding: 0.75rem; }
}

/* ── random encounter dialogue ──────────────────────────────────────────────
   Reuses the vendor modal layout/positioning (shares .vendor-modal / .vendor-card)
   but is themed violet — "something happens here" — to read distinct from the
   gold merchant. */
.encounter-card { border-color: var(--xp); max-width: 460px; }
.encounter-card .vendor-label { color: var(--xp); }
/* Emoji-glyph icon stand-in, sized to match an avatar portrait. */
.encounter-emoji {
  width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; line-height: 1; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.encounter-prompt {
  margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; font-size: 0.92rem; color: var(--ink);
  background: var(--panel-2); border-left: 3px solid var(--xp); border-radius: 6px;
}
.encounter-options { display: flex; flex-direction: column; gap: 0.5rem; }
.encounter-option {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px;
  font-weight: 600; font-size: 0.9rem; text-align: left; cursor: pointer;
  background: var(--panel-2); color: var(--ink); transition: border-color 0.12s, background 0.12s;
}
.encounter-option:hover { border-color: var(--xp); background: #241b30; }
.encounter-option:disabled { color: var(--ink-dim); cursor: not-allowed; opacity: 0.6; }
.encounter-stake { display: flex; flex-direction: column; gap: 0.55rem; }
.encounter-stake-readout {
  text-align: center; font-weight: 700; font-size: 0.95rem; color: var(--xp);
}
.encounter-stake-slider { width: 100%; accent-color: var(--xp); cursor: pointer; }
.encounter-stake-note {
  margin: 0; padding: 0.55rem 0.7rem; font-size: 0.9rem; color: var(--ink-dim); text-align: center;
}
.encounter-result {
  margin: 0; padding: 0.55rem 0.7rem; font-size: 0.9rem; color: var(--ink); text-align: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.encounter-card .primary-btn { width: auto; align-self: center; padding: 0.6rem 2rem; }