:root {
  --ui-font-scale: 1;
  --void: #0b0906;
  --panel: #1a130e;
  --panel2: #231a12;
  --border: #4a3320;
  --ember: #c97a2e;
  --ember-bright: #e8a24f;
  --blood: #b5423a;
  --parchment: #ddc9a3;
  --parchment-dim: #9c8b6c;
  --t1: #b8b8b8;
  --t2: #d98a3a;
  --t3: #4aa3d1;
  --t4: #b565d6;
  --t5: #e0473f;
}

@media (any-pointer: fine) and (min-width: 721px) {
  :root {
    --ui-font-scale: 1.1;
  }
}

html {
  font-size: calc(1rem * var(--ui-font-scale));
}

.stat-actions {
  display: flex;
  gap: 6px;
}

.visually-hidden {
  display: none;
}

.field-label, .section-title {
  font-size: calc(12px * var(--ui-font-scale));
  letter-spacing: 1px;
  color: var(--ember-bright);
}

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

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trade-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 6px;
}

.trade-gold {
  color: var(--parchment-dim);
  font-size: calc(11px * var(--ui-font-scale));
  margin: -4px 0 10px;
}

.trade-gold span {
  color: var(--ember-bright);
}

.empty-message {
  color: var(--parchment-dim);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: gray;
  color: white;
  font-family: 'Consolas', 'JetBrains Mono', 'Courier New', monospace;
  overflow: hidden;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 10px;
  gap: 8px;
}

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 4px;
  font-variant: small-caps;
  color: var(--ember-bright);
  text-shadow: 0 0 12px rgba(232, 162, 79, 0.35), 0 2px 0 #000;
  margin: 2px 0 0 0;
  font-size: calc(22px * var(--ui-font-scale));
}

.subtitle {
  color: var(--parchment-dim);
  font-size: calc(11px * var(--ui-font-scale));
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

#hud {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: calc(13px * var(--ui-font-scale));
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

#hud .stat {
  white-space: nowrap;
}

#hud .stat b {
  color: var(--ember-bright);
}

#hpbarwrap {
  width: 160px;
  height: 14px;
  background: #2a0f0d;
  border: 1px solid #5a1f1a;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

#hpbar {
  height: 100%;
  background: linear-gradient(90deg, #7a1c17, var(--blood), #e0655a);
  transition: width 0.2s ease;
}

#hptext {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 14px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

#xpbarwrap {
  width: 160px;
  height: 8px;
  background: #141425;
  border: 1px solid #2c2c4a;
  border-radius: 2px;
  overflow: hidden;
}

#xpbar {
  height: 100%;
  background: linear-gradient(90deg, #3a5a9a, #6f9ce0);
}

#stage {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 0, 0, 0.6);
  background: #050403;
}

#stage {
  width: var(--game-width, 840px);
  max-width: calc(100vw - 28px);
}

#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  animation: flicker 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #stage::after {
    animation: none;
  }
}

@media (pointer: fine) {
  #stage::after {
    background: none;
  }
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

canvas {
  display: block;
  cursor: pointer
}

#logpanel {
  width: 640px;
  max-width: 92vw;
  height: 135px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: calc(12px * var(--ui-font-scale));
  overflow-y: auto;
  line-height: 1.5;
  white-space: pre-line;
}

#logpanel div.good {
  color: #8fd08a;
}

#logpanel div.bad {
  color: #e08a7a;
}

#logpanel div.loot {
  color: white;
}

/* Keep recent events easiest to read while letting older history recede. */
#logpanel > div {
  opacity: 0.72;
  filter: saturate(0.65);
}

#logpanel > div:nth-last-child(3) {
  opacity: 0.86;
  filter: saturate(0.86);
}

#logpanel > div:nth-last-child(2) {
  opacity: 0.93;
  filter: saturate(0.93);
}

#logpanel > div:last-child {
  opacity: 1;
  filter: none;
}

#logpanel div.info {
  color: var(--parchment-dim);
}

#logpanel div.pillar {
  color: white;
}

/* Wide non-touch layouts use the desktop overlay treatment. Headless
   Chromium can report pointer:none, so include that desktop-like mode while
   keeping coarse-pointer/mobile layouts excluded. */
@media (min-width: 721px) and (pointer: fine),
       (min-width: 721px) and (pointer: none) {
  #root {
    padding: 0;
  }

  /* Desktop HUD floats over the game without reserving camera height. Wide
     desktop layouts keep it on one row; genuinely narrow windows may wrap in
     the dedicated max-width rule below. */
  #hud {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: max-content;
    max-width: 100vw;
    flex-wrap: nowrap;
    box-sizing: border-box;
  }

  /* Desktop stage fills the entire browser behind the HUD. Use absolute rather
     than fixed positioning here: a fixed stage creates its own stacking
     context and would trap in-stage modal overlays below the sibling log,
     minimap and keyboard hints. The canvas may be up to one tile larger than
     the stage and is centred/clipped so square tiles stay unscaled. */
  #stage {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    overflow: hidden;
    border-radius: 0;
  }

  #stage > canvas#game {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Race selection used to live below the HUD because the stage itself started
     below it. Keep that readable separation even though gameplay now renders
     behind the HUD. The overlay still covers the gameplay-side panels/log. */
  #raceOverlay {
    padding-top: calc(var(--desktop-hud-height, 52px) + 8px);
  }

  /* The log no longer consumes vertical layout space on desktop. It floats
     over the lower-left of the game view and keeps normal pointer/scroll input. */
  #logpanel {
    position: fixed;
    left: var(--desktop-log-left, 10px);
    bottom: var(--desktop-log-bottom, 40px);
    z-index: 9;
    box-sizing: border-box;
    width: min(420px, calc(var(--game-width, 840px) - 24px));
    min-width: min(300px, calc(var(--game-width, 840px) - 24px));
    max-width: min(80vw, calc(var(--game-width, 840px) - 24px));
    height: 260px;
    min-height: 120px;
    max-height: min(60vh, calc(var(--game-height, 600px) - 84px));
    margin: 0;
    padding-right: 26px;
    overflow: auto;
    scrollbar-gutter: stable;
    background:
      linear-gradient(rgba(232, 162, 79, 0.72), rgba(232, 162, 79, 0.72)) right 16px top 6px / 16px 2px no-repeat,
      linear-gradient(rgba(232, 162, 79, 0.72), rgba(232, 162, 79, 0.72)) right 16px top 6px / 2px 16px no-repeat,
      linear-gradient(180deg, rgba(35, 26, 18, 0.78), rgba(26, 19, 14, 0.78));
    border-color: rgba(74, 51, 32, 0.88);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.38);
  }

  /* The desktop log grows rightward and upward from its bottom-left anchor.
     The painted top-right corner stays visible even while log history scrolls. */
  #logpanel.resizing {
    user-select: none;
    cursor: nesw-resize;
  }

  /* Chrome/Windows can reserve arrow buttons at the ends of a native
     scrollbar. The log uses the space beside the track for its resize grip,
     so remove those buttons from this panel only. */
  #logpanel::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
  }
}

#hint {
  font-size: calc(11px * var(--ui-font-scale));
  color: brown;
  letter-spacing: 1px;
  text-align: center;
}

#hint kbd {
  background: #241a11;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ember-bright);
  font-size: calc(10px * var(--ui-font-scale));
}

#hint kbd.locked {
  background: var(--ember-bright);
  color: #241a11;
  border-color: var(--ember-bright);
  box-shadow: 0 0 6px var(--ember-bright);
}

#hint {
  position: fixed;
  right: 14px;
  top: 335px;
  width: 250px;
  padding: 7px;
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 1.8;
}

.panel-toggle {
  position: absolute;
  top: 6px;
  left: -22px;
  width: 22px;
  height: 34px;
  padding: 0;
  color: var(--ember-bright);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  font: calc(18px * var(--ui-font-scale)) inherit;
  cursor: pointer;
}

#hint .panel-toggle {
  left: -22px;
}

body.side-collapsed #sidePanel {
  display: block;
  width: 10px;
  padding: 0;
  overflow: visible;
}

body.side-collapsed #sidePanel #sideMinimap,
body.side-collapsed #sidePanel .mini-actions {
  display: none;
}

body.side-collapsed #btnSideCollapse {
  position: fixed;
  right: 14px;
  top: 90px;
  left: auto;
  z-index: 20;
  width: 28px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

body.hint-collapsed #hint {
  width: 0;
  height: 0;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
}

body.hint-collapsed #hint kbd {
  display: none;
}

body.hint-collapsed #hint .panel-toggle {
  left: -22px;
}

body.hint-collapsed #hint .panel-toggle {
  position: fixed;
  right: 14px;
  top: 335px;
  left: auto;
  z-index: 20;
  width: 28px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

#sidePanel {
  position: fixed;
  right: 14px;
  top: 90px;
  width: 250px;
  z-index: 8;
}

.side-box {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}

#sideMinimap {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #050403;
  touch-action: none;
  cursor: grab;
}

#sideMinimap.dragging {
  cursor: grabbing;
}

.mini-actions {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}

#btnSideBestiary {
  padding-left: 7px;
  padding-right: 7px;
  font-size: calc(10px * var(--ui-font-scale));
}

.bestiary-intro {
  color: var(--parchment-dim);
  margin: 0 0 12px;
}

.bestiary-list {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.bestiary-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(126, 92, 57, .35);
}

.bestiary-entry:hover, .bestiary-entry:focus-visible {
  background: rgba(255, 220, 168, .06);
}
.bestiary-entry:focus-visible { outline: 1px solid var(--ember-bright); }
.bestiary-entry-heading { display: contents; }
.bestiary-species { color: var(--parchment); }
.bestiary-count { color: var(--ember-bright); white-space: nowrap; }
.bestiary-inline-portrait { display: none; }
.bestiary-empty { color: var(--parchment-dim); padding: 12px 4px; }

#bestiaryOverlay .closehint {
  justify-content: center;
  margin-top: 12px;
}

@media (pointer: coarse) {
  #bestiaryOverlay {
    position: fixed;
    inset: 0;
    z-index: 160;
    padding: 12px;
    background: rgba(5, 4, 3, 0.85);
    align-items: stretch;
    justify-content: stretch;
  }

  #bestiaryOverlay .panelbox {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .bestiary-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    flex: none;
    gap: 12px;
    background: var(--panel2);
  }

  #bestiaryOverlay .bestiary-header h2 { flex: 1; }
  #bestiaryOverlay .bestiary-header .overlay-close { position: static; flex: none; }
  #bestiaryOverlay .bestiary-intro { display: none; }
  #bestiaryOverlay .closehint {
    display: flex;
    flex: none;
    justify-content: center;
    padding-top: 12px;
    margin-top: 0;
    border-top: 1px solid var(--border);
  }
  #bestiaryOverlay #btnBestiaryCloseBottom { min-height: 40px; min-width: 120px; }

  .bestiary-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 0;
  }

  .bestiary-entry {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    padding: 9px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--ember);
    color: var(--parchment);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .bestiary-entry-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .bestiary-entry.portrait-open .bestiary-inline-portrait:not([hidden]) {
    display: block;
    width: min(36vw, 144px);
    max-height: 144px;
    object-fit: contain;
    margin: 10px auto 0;
    border: 1px solid var(--border);
    border-radius: 4px;
  }
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 3, 0.42);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.overlay.show {
  display: flex;
}

.panelbox {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  position: relative;
  width: 590px;
  max-width: 94%;
  max-height: 90%;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.overlay-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: calc(18px * var(--ui-font-scale));
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#graveyardOverlay, #highscoresOverlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  padding: 12px;
  background: rgba(5, 4, 3, 0.85);
}

#graveyardOverlay .panelbox, #highscoresOverlay .panelbox {
  display: flex;
  flex-direction: column;
  width: min(94vw, 720px);
  max-width: 720px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.graveyard-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  flex: none;
  gap: 12px;
  background: var(--panel2);
}

#graveyardOverlay .graveyard-header h2, #highscoresOverlay .graveyard-header h2 {
  flex: 1;
}

#graveyardOverlay .graveyard-header .overlay-close, #highscoresOverlay .graveyard-header .overlay-close {
  position: static;
  flex: none;
}

#graveyardStatus, #highscoresStatus {
  color: var(--parchment-dim);
  text-align: center;
  flex: none;
}

#graveyardFilters, #highscoresFilters {
  flex: none;
  flex-wrap: wrap;
}

#graveyardFilters .active, #highscoresFilters .active {
  color: var(--ember-bright);
  border-color: var(--ember);
}

#graveyardList, #highscoresList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.graveyard-record {
  margin: 6px 0;
  padding: 9px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ember);
  color: var(--parchment);
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.5;
}

.graveyard-record.permadeath {
  border-left-color: var(--blood);
}

.graveyard-record summary {
  cursor: pointer;
}

.graveyard-record strong {
  color: var(--ember-bright);
}

.graveyard-record.permadeath strong {
  color: #e0655a;
}

.graveyard-details {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

#highscoresHelp {
  flex: none;
  margin: 0 0 6px;
  color: var(--parchment-dim);
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.4;
}

#highscoresStatus {
  margin: 6px 0;
}

#highscoresStatus:empty {
  display: none;
}

#highscoresList .graveyard-record {
  overflow-wrap: anywhere;
}

.panelbox h2 {
  font-family: Georgia, serif;
  font-variant: small-caps;
  letter-spacing: 2px;
  color: var(--ember-bright);
  margin: 0 0 10px 0;
  font-size: calc(18px * var(--ui-font-scale));
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

#mapOverlay .panelbox, #treasureMapOverlay .panelbox {
  width: min(72vw, 520px);
}

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

.map-zoom-controls, .map-level-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.map-zoom-controls { flex: none; }
.map-level-controls { min-width: 0; }

.map-toolbar .slbtn {
  padding: 4px 7px;
}

#mapLevelLabel {
  font-size: calc(12px * var(--ui-font-scale));
  text-align: center;
  color: var(--parchment-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 430px) {
  .map-toolbar { gap: 4px; }
  .map-zoom-controls, .map-level-controls { gap: 3px; }
  .map-toolbar .slbtn { padding: 5px 4px; font-size: 12px; min-width: 28px; }
  #mapLevelLabel { font-size: 12px; }
}

#minimap, #treasureMapCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  aspect-ratio: 130/90;
  image-rendering: pixelated;
  background: #050403;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.paperdoll {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.slot {
  flex: 1;
  background: #100b08;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  font-size: calc(11px * var(--ui-font-scale));
  min-height: 52px;
}

.slot .label {
  color: var(--parchment-dim);
  font-size: calc(9px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 1px;
}

.slot .val {
  display: inline;
  color: var(--parchment);
  margin-top: 4px;
}

.slot .val.tier1 {
  color: var(--t1);
}

.slot .val.tier2 {
  color: var(--t2);
}

.slot .val.tier3 {
  color: var(--t3);
}

.slot .val.tier4 {
  color: var(--t4);
}

.slot .val.tier5 {
  color: var(--t5);
}

.slot .unequip-btn {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  width: calc(12px * var(--ui-font-scale)) !important;
  height: calc(12px * var(--ui-font-scale)) !important;
  margin-left: 2px;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--ember-bright) !important;
  border: 0 !important;
  border-radius: 0;
  font: inherit;
  font-size: calc(12px * var(--ui-font-scale));
  line-height: calc(12px * var(--ui-font-scale));
  cursor: pointer;
}

.slot .unequip-btn:hover {
  background: transparent !important;
  color: rgb(232, 162, 79) !important;
}

.slot .unequip-btn[hidden] {
  display: none !important;
}

.statgrid {
  display: grid;
  grid-template-columns:1fr 1fr;
  gap: 4px 24px;
  font-size: calc(14px * var(--ui-font-scale));
  margin-bottom: 14px;
}

.statgrid .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed #33261a;
  padding: 2px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.statgrid .row .lbl {
  color: var(--parchment-dim);
  letter-spacing: 0.5px;
  text-align: right;
}

.statgrid .row b {
  color: var(--ember-bright);
  font-weight: 700;
}

.statgrid .achievement-row {
  grid-column: 1 / -1;
}

.stats-details {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.stats-details summary {
  cursor: pointer;
  color: var(--ember-bright);
  font-size: calc(12px * var(--ui-font-scale));
  letter-spacing: 1px;
  font-weight: 700;
}

.stats-details .statgrid {
  margin-top: 8px;
  margin-bottom: 0;
}

.invlist {
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.inv-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.inv-tab {
  background: #2a1c10;
  color: var(--parchment-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: calc(10px * var(--ui-font-scale));
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.inv-tab.active {
  background: var(--ember);
  color: #1a0f05;
  border-color: var(--ember-bright);
}

.invitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  font-size: calc(12px * var(--ui-font-scale));
  border-bottom: 1px dashed #33261a;
}

.invitem.best-slot {
}

.invitem .nm {
  flex: 1;
}

.invitem button {
  background: #2a1c10;
  color: var(--ember-bright);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: calc(10px * var(--ui-font-scale));
  cursor: pointer;
}

.invitem button:hover {
  background: var(--ember);
  color: #1a0f05;
}

.tier1 {
  color: var(--t1);
}

.tier2 {
  color: var(--t2);
}

.tier3 {
  color: var(--t3);
}

.enemy-tier2 {
  color: #d98a3a;
}

.tier4 {
  color: var(--t4);
}

.tier5 {
  color: var(--t5);
}

.closehint {
  text-align: center;
  color: var(--parchment-dim);
  font-size: calc(11px * var(--ui-font-scale));
  margin-top: 10px;
}

.slbtn {
  background: #2a1c10;
  color: var(--ember-bright);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: calc(12px * var(--ui-font-scale));
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
}

.slbtn:hover {
  background: var(--ember);
  color: #1a0f05;
}

#tradeOverlay .panelbox {
  width: min(92vw, 900px);
}

.trade-cols {
  display: flex;
  gap: 16px;
}

.trade-col {
  flex: 1;
  min-width: 0;
}

.trade-col .invlist {
  max-height: 280px;
}

#tooltip {
  position: absolute;
  display: none;
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: calc(12px * var(--ui-font-scale));
  width: calc(170px * var(--ui-font-scale));
}

/* Automatic desktop combat inspection is pinned to the viewport because the
   desktop game stage fills that viewport. Keeping this positioning in CSS
   avoids border/containing-block rounding differences in headless browsers. */
#tooltip[data-auto-combat="true"] {
  position: fixed;
  left: auto !important;
  top: auto !important;
  right: 12px;
  bottom: 12px;
}

#tooltip .statrow {
  font-size: calc(11px * var(--ui-font-scale));
}

#tooltip .nm {
  font-weight: 700;
  margin-bottom: 4px;
}

#tooltip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #0a0705;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 6px;
}

#tooltip .hpbarwrap {
  width: 100%;
  height: 8px;
  background: #2a0f0d;
  border: 1px solid #5a1f1a;
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}

#tooltip .hpbar {
  height: 100%;
  background: linear-gradient(90deg, #7a1c17, var(--blood), #e0655a);
}

#tooltip .t1 {
  color: var(--t1);
}

#tooltip .t2 {
  color: var(--t2);
}

#tooltip .t3 {
  color: var(--t3);
}

#tooltip .t4 {
  color: var(--t4);
}

#tooltip .t5 {
  color: var(--t5);
}

#tooltip .nm {
  font-weight: 700;
}

#tooltip .pfx {
  margin: 2px 0 4px;
  font-size: calc(10px * var(--ui-font-scale));
  letter-spacing: 0.5px;
}

#tooltip .pfx .up {
  color: #7ddc7d;
}

#tooltip .pfx .down {
  color: #e0655a;
}

#tooltip .crit {
  margin: 0 0 4px;
  font-size: calc(10px * var(--ui-font-scale));
  letter-spacing: 0.5px;
  color: #e0473f;
}

#tooltip .t1 {
  color: var(--t1);
}

#tooltip .t2 {
  color: var(--t2);
}

#tooltip .t3 {
  color: var(--t3);
}

#tooltip .t4 {
  color: var(--t4);
}

#tooltip .t5 {
  color: var(--t5);
}

#mobileInfoPanel {
  display: none;
}

#mobilePortraitOverlay {
  display: none;
}

#tooltip.mini {
  width: auto;
  padding: 4px 8px;
}

#tooltip.mini .nm {
  margin-bottom: 0;
}

/* ============================== RACE SELECTION ============================== */
#raceOverlay {
  background: rgba(5, 4, 3, 0.92);
  z-index: 40;
}

#raceOverlay .panelbox {
  width: min(94vw, 860px);
  max-height: 92vh;
  overflow-y: auto;
}

#raceName {
  background: #120d09;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--parchment);
  font-family: inherit;
  font-size: calc(13px * var(--ui-font-scale));
  padding: 6px 8px;
  width: 220px;
}

#raceName:focus {
  outline: none;
  border-color: var(--ember);
}

.race-namerow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.race-grid {
  display: grid;
  grid-template-columns:repeat(5, 1fr);
  gap: 8px;
}

.race-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  color: var(--parchment);
  font-family: inherit;
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 1.35;
}

.race-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  margin-bottom: 5px;
}

.race-card .rname {
  color: var(--ember-bright);
  font-weight: 700;
  font-size: calc(12px * var(--ui-font-scale));
  letter-spacing: 0.5px;
}

.race-card .rbonus {
  color: var(--parchment-dim);
  margin-top: 3px;
}

.race-card:hover {
  border-color: var(--ember);
}

.race-card.sel {
  border-color: var(--ember-bright);
  background: #2c2013;
  box-shadow: 0 0 0 1px var(--ember-bright) inset;
}

.race-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.race-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* World size is independent of Cursed world and available for every run. */
.world-size-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ember-bright);
  font-size: calc(12px * var(--ui-font-scale));
  white-space: nowrap;
}

.world-size-option select {
  background: #120d09;
  color: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 7px;
  font: inherit;
  cursor: pointer;
}
.world-size-option select:focus-visible { outline: 1px solid var(--ember); }
.world-size-option select:disabled { opacity: 0.65; cursor: default; }

.permadeath-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgb(232, 162, 79);
  cursor: pointer;
  user-select: none;
}

.permadeath-option input {
  margin: 0;
  cursor: pointer;
}

/* Desktop hint stays inside the race dialog; mobile shows it in the form. */
.cursed-world-option { position: relative; }
.cursed-world-tip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  width: min(230px, 72vw);
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--parchment);
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.4;
  pointer-events: none;
  white-space: normal;
}
.cursed-world-option:hover .cursed-world-tip { display: block; }

.cursed-world-mobile-note { display: none; }

#raceError {
  color: var(--blood);
  font-size: calc(11px * var(--ui-font-scale));
}

#btnBegin {
  font-size: calc(13px * var(--ui-font-scale));
  padding: 8px 18px;
}

@media (max-width: 720px), (pointer: coarse) {
  .race-grid {
    grid-template-columns:repeat(2, 1fr);
  }

  .race-options {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .race-options > .permadeath-option { width: 100%; }
  .world-size-option { width: 100%; justify-content: flex-start; }
  .cursed-world-option:hover .cursed-world-tip { display: none; }
  .cursed-world-mobile-note {
    width: 100%;
    color: var(--parchment-dim);
    font-size: calc(12px * var(--ui-font-scale));
    line-height: 1.4;
  }
  .cursed-world-option:has(#cursedWorldToggle:checked) ~ .cursed-world-mobile-note { display: block; }
}

/* Mouse-driven but compact windows may wrap the HUD rather than overflow it.
   Normal desktop widths keep the single-row HUD. */
@media (pointer: fine) and (min-width: 721px) and (max-width: 1100px),
       (pointer: none) and (min-width: 721px) and (max-width: 1100px) {
  #hud {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Narrow windows need usable dialogs regardless of the browser pointer mode. */
@media (max-width: 720px) {
  #hud .stat-actions {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
  }

  #hud {
    position: relative;
    z-index: 110;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    transform: none;
    left: auto;
  }
  #invOverlay, #mapOverlay, #treasureMapOverlay, #tradeOverlay, #raceOverlay {
    position: fixed;
    top: var(--mobile-hud-height, 56px);
    z-index: 100;
  }
  #raceOverlay .panelbox {
    /* Keep the centered form inside the space below the HUD. */
    max-height: 100%;
    box-sizing: border-box;
  }
}

/* ============================== MOBILE / TOUCH CONTROLS ==============================
   Everything below only activates for touch-primary devices (pointer:coarse), so mouse
   + keyboard desktop play is completely unaffected. It adds an on-screen D-pad for
   movement/attack/talk (all handled by the same tryMove() used by the keyboard) and
   makes the canvas/layout shrink to fit small screens. */
#touchControls {
  display: none;
}

#mobileCanvasResizeHandle {
  display: none;
}

@media (pointer: coarse) {
  html, body {
    overflow: auto;
  }

  #root {
    padding: calc(var(--mobile-hud-height, 56px) + 6px) 6px 6px;
    gap: 6px;
  }

  #hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 130;
    min-height: 56px;
    box-sizing: border-box;
    border-radius: 0;
    font-size: 11px;
    padding: 4px 8px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  #hpbarwrap, #xpbarwrap {
    width: 110px;
  }

  #sidePanel {
    display: none;
  }

  /* desktop-only minimap sidebar - not enough room */
  #hint {
    display: none;
  }

  /* keyboard legend is meaningless on touch */
  #stage {
    max-width: 100vw;
  }

  canvas#game {
    width: 100%;
    height: auto;
    max-width: 100vw;
    touch-action: none;
  }

  #stage {
    width: 100%;
    max-width: 100%;
  }

  #mobileCanvasResizeHandle {
    position: absolute;
    left: 50%;
    bottom: -20px;
    z-index: 35;
    width: 42px;
    height: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: rgba(225, 225, 225, 0.58);
    background: rgba(95, 95, 95, 0.30);
    border: 1px solid rgba(210, 210, 210, 0.18);
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
    font: 900 9px/8px Arial, sans-serif;
    text-shadow: 0 1px 1px #000;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  #mobileCanvasResizeHandle span {
    display: block;
    height: 8px;
  }

  #mobileCanvasResizeHandle.dragging {
    background: rgba(115, 115, 115, 0.50);
    color: rgba(255, 255, 255, 0.82);
  }

  .panel-toggle {
    display: none;
  }

  /* Mobile map/inventory use the whole viewport instead of being confined to the game canvas. */
  #invOverlay, #mapOverlay, #treasureMapOverlay, #tradeOverlay, #raceOverlay {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-hud-height, 56px);
    bottom: 0;
    width: 100vw;
    height: calc(100dvh - var(--mobile-hud-height, 56px));
    min-height: calc(100vh - var(--mobile-hud-height, 56px));
    align-items: stretch;
    justify-content: stretch;
    z-index: 100;
  }

  #invOverlay .panelbox, #mapOverlay .panelbox, #treasureMapOverlay .panelbox, #tradeOverlay .panelbox, #raceOverlay .panelbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    min-height: 100%;
    box-sizing: border-box;
    border-radius: 0;
    overflow-y: auto;
    padding-bottom: 140px;
  }

  #invOverlay .panelbox {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #invOverlay .invlist {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    /* The close bar is fixed over the bottom of the overlay. Keep enough
       scrollable space after the final row for it to move above that bar. */
    padding-bottom: 140px;
    box-sizing: border-box;
  }

  body.overlay-open #mobileInfoPanel {
    display: none;
  }

  body.overlay-open #logpanel {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 110;
    width: 100%;
    max-width: none;
    height: 120px;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
  }

  #mapOverlay .panelbox, #treasureMapOverlay .panelbox {
    width: 100%;
  }

  #tradeOverlay .panelbox {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    /* Reserve the log and Close bar while keeping the stock lists tall. */
    padding-bottom: calc(var(--mobile-log-height, 120px) + 58px);
  }

  #tradeOverlay .trade-cols {
    flex: 1 1 auto;
    min-height: 0;
  }

  #tradeOverlay .trade-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #tradeOverlay .trade-col .invlist {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #tradeOverlay .closehint {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-log-height, 120px);
    z-index: 115;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    background: linear-gradient(0deg, var(--panel), rgba(20, 14, 10, 0.94));
    border-top: 1px solid var(--border);
  }

  #invOverlay .closehint, #mapOverlay .closehint, #treasureMapOverlay .closehint {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-log-height, 120px);
    z-index: 115;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    background: linear-gradient(0deg, var(--panel), rgba(20, 14, 10, 0.94));
    border-top: 1px solid var(--border);
  }

  #invOverlay .stats-details {
    display: none;
  }

  /* Log grows/shrinks to take whatever space mobileInfoPanel isn't
     using, instead of both fighting over a fixed split. mobileInfoPanel
     never shrinks below its own content (flex-shrink:0) - the log is
     the one that gives up space when the info panel needs to grow. */
  #logpanel {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    height: auto;
    flex: 1 1 auto;
    min-height: 30px;
    max-height: 45vh;
  }

  #mobileInfoPanel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--parchment-dim);
    min-height: 34px;
    max-height: 42vh;
    flex: 0 0 auto;
    min-width: 0;
    overflow-y: auto;
    overflow-wrap: anywhere;
  }

  #mobileInfoPanel img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex: 0 0 auto;
    margin: 0;
  }

  #mobileInfoPanel img {
    cursor: zoom-in;
  }

  #mobilePortraitOverlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5, 4, 3, 0.86);
  }

  #mobilePortraitOverlay.show {
    display: flex;
  }

  #mobilePortraitOverlay img {
    display: block;
    width: auto;
    height: auto;
    max-width: 94vw;
    max-height: 88dvh;
    object-fit: contain;
    image-rendering: auto;
    border: 1px solid var(--border);
    border-radius: 5px;
    box-shadow: 0 0 42px rgba(0, 0, 0, 0.9);
  }

  #mobileInfoPanel .info-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  #mobileInfoPanel .nm {
    font-weight: 700;
    color: var(--parchment);
    margin-bottom: 4px;
  }

  #mobileInfoPanel .hprow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  #mobileInfoPanel .hpbarwrap {
    width: 110px;
    height: 10px;
    background: #2a0f0d;
    border: 1px solid #5a1f1a;
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0;
    flex: 0 0 auto;
  }

  #mobileInfoPanel .hpbar {
    height: 100%;
    background: linear-gradient(90deg, #7a1c17, var(--blood), #e0655a);
  }

  #mobileInfoPanel .hpnum {
    white-space: nowrap;
  }

  #mobileInfoPanel .statrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 2px;
  }

  #mobileInfoPanel .statrow .statsep {
    display: none;
  }

  #mobileInfoPanel .statrow .statbreak {
    display: none;
  }

  #mobileInfoPanel .tier1 {
    color: var(--t1);
  }

  #mobileInfoPanel .tier2 {
    color: var(--t2);
  }

  #mobileInfoPanel .tier3 {
    color: var(--t3);
  }

  #mobileInfoPanel .tier4 {
    color: var(--t4);
  }

  #mobileInfoPanel .tier5 {
    color: var(--t5);
  }

  #mobileInfoPanel .pfx .up {
    color: #7ddc7d;
  }

  #mobileInfoPanel .pfx .down {
    color: #e0655a;
  }

  #mobileInfoPanel .crit {
    color: #e0473f;
  }

  #touchControls {
    display: grid;
    grid-template-columns:56px 140px 56px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  #touchMenu, #touchActions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .touch-map {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(26, 19, 14, 0.85);
    border: 1px solid var(--border);
    color: var(--parchment);
    font-size: 28px;
    line-height: 1;
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
  }

  .touch-map:active {
    background: var(--ember);
    color: #1a130e;
  }

  .dpad {
    display: grid;
    grid-template-columns:repeat(3, 44px);
    grid-template-rows:repeat(3, 44px);
    gap: 4px;
  }

  .dpad button {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: rgba(26, 19, 14, 0.85);
    border: 1px solid var(--border);
    color: var(--parchment);
    font-size: 18px;
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
  }

  .dpad button:active {
    background: var(--ember);
    color: #1a130e;
  }

  .dpad button.empty {
    visibility: hidden;
  }

  #touchActions button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(26, 19, 14, 0.85);
    border: 1px solid var(--border);
    color: var(--parchment);
    font-size: 28px;
    line-height: 1;
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
  }

  #touchActions button:active {
    background: var(--ember);
    color: #1a130e;
  }
}

/* Active effects float over the canvas; unused space still accepts map input. */
#playerStatuses {
  position: absolute;
  /* The desktop stage can be larger than the tile canvas while a viewport
     resize is settling. Anchor badges to the actual canvas bounds rather than
     the outer stage so they never drift into the surrounding overlay area.
     When the canvas fills/overfills the stage these expressions reduce to the
     normal 8px inset, including on mobile where the canvas is CSS-scaled. */
  left: max(8px, calc((100% - var(--game-width, 100%)) / 2 + 8px));
  right: max(8px, calc((100% - var(--game-width, 100%)) / 2 + 8px));
  bottom: max(8px, calc((100% - var(--game-height, 100%)) / 2 + 8px));
  z-index: 10;
  pointer-events: none;
}

#playerStatuses[hidden], #playerStatusDetail[hidden] {
  display: none;
}

#playerStatusList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-end;
}

.player-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid rgba(74, 51, 32, 0.7);
  border-radius: 3px;
  background: rgba(26, 19, 14, 0.7);
  color: var(--parchment);
  font: 12px/16px monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.player-status:hover, .player-status:focus-visible, .player-status[aria-expanded="true"] {
  background: rgba(26, 19, 14, 0.9);
}

.player-status:focus-visible {
  outline: 1px solid var(--ember-bright);
  outline-offset: 2px;
}

.player-status > span:last-child {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.player-status-icon { color: #c77870; }
.player-status[data-status="freezing"] .player-status-icon { color: #9bc7da; }
.player-status[data-status="regen"] .player-status-icon { color: #98ba78; }
.player-status[data-status="invisible"] .player-status-icon { color: #b1a5d8; }
.player-status[data-status="speed"] .player-status-icon { color: var(--ember-bright); }

#playerStatusDetail {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: min(340px, 100%);
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(26, 19, 14, 0.9);
  color: var(--parchment);
  font: 12px/1.4 monospace;
}

#tooltip .shooter-marker,
#mobileInfoPanel .shooter-marker {
  color: #e0473f;
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
}

/* Native scrollbars match the brown panels on desktop. */
@media (any-pointer: fine) and (min-width: 721px) {
  * { scrollbar-color: #8b5b2d #21170f; scrollbar-width: thin; }
  *::-webkit-scrollbar { width: 10px; }
  *::-webkit-scrollbar-track { background: #21170f; }
  *::-webkit-scrollbar-thumb {
    background: #8b5b2d;
    border: 2px solid #21170f;
    border-radius: 6px;
  }
  *::-webkit-scrollbar-thumb:hover { background: #b17b42; }
}
.mobile-hit-separator { display: none; }
@media (max-width: 720px), (pointer: coarse) {
  #mobileInfoPanel .mobile-hit-separator { display: inline; }
}

/* Red sack silhouette shared by desktop and mobile enemy inspection. */
.thief-marker {
  display: inline-block;
  width: 0.8em;
  height: 1em;
  vertical-align: -0.1em;
  background: #e0473f;
  clip-path: polygon(20% 0, 80% 0, 65% 25%, 90% 60%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 10% 60%, 35% 25%);
}

/* Nonblocking level feedback and the mobile inventory's character view. */
.service-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 7px; }
#btnInvCharacter, #btnCharacterBack { display: none; }
#levelUpPopup {
  position: fixed; top: 19%; left: 50%; transform: translateX(-50%);
  z-index: 250; pointer-events: none; text-align: center;
  width: max-content; max-width: calc(100vw - 28px); box-sizing: border-box;
  padding: 14px 22px; border: 1px solid #b17b42; border-radius: 6px;
  background: rgba(28, 18, 9, .94); color: #efb455; box-shadow: 0 0 24px #b17b4260;
}
#levelUpPopup[hidden] { display: none; }
#levelUpPopup strong { display: block; font-size: 28px; letter-spacing: 2px; }
#levelUpPopup span { display: block; margin-top: 5px; color: #ead7b9; font-size: 13px; }
#levelUpPopup.show { animation: level-up-toast 2.8s ease-out both; }
@keyframes level-up-toast {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.92); }
  12%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #levelUpPopup.show { animation: none; }
}
@media (pointer: coarse) {
  #invOverlay:not(.character-sheet) #btnInvCharacter { display: inline-block; }
  #invOverlay .closehint { gap: 5px; flex-wrap: wrap; }
  #invOverlay.character-sheet { top: 0; height: 100dvh; min-height: 100dvh; z-index: 200; }
  #invOverlay.character-sheet .panelbox { overflow: hidden; padding-bottom: 70px; }
  #invOverlay.character-sheet .paperdoll,
  #invOverlay.character-sheet .section-heading,
  #invOverlay.character-sheet .inv-tabs,
  #invOverlay.character-sheet .invlist,
  #invOverlay.character-sheet .stats-details summary,
  #invOverlay.character-sheet .closehint button { display: none; }
  #invOverlay.character-sheet .stats-details { display: block; overflow-y: auto; min-height: 0; flex: 1; }
  #invOverlay.character-sheet .statgrid { grid-template-columns: 1fr; }
  #invOverlay.character-sheet .statgrid .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; text-align: left; padding: 7px 0; }
  #invOverlay.character-sheet .statgrid .row .lbl { text-align: left; }
  #invOverlay.character-sheet .statgrid .row b { text-align: right; overflow-wrap: anywhere; }
  #invOverlay.character-sheet .closehint { bottom: 0; }
  #invOverlay.character-sheet #btnCharacterBack { display: inline-block; }
}