* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c0f08;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  font-family: "Courier New", ui-monospace, "Segoe UI Mono", monospace;
  overscroll-behavior: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-synthesis: none;
}

/* HUD density knob. --hud is a unitless scale (0.5…1) set live on resize by
   main.js so every pixel-art widget (labels, badges, slots) shrinks with the
   window on any platform. It applies to the *fixed* HUD kit only; full-screen
   panels and overlays size themselves to the viewport instead. The 1 here is
   just the pre-JS default. */
:root {
  --hud: 1;
  /* Vertical clearance left below the top bar cluster, in px (see media
     blocks below, where the top bar re-stacks into two rows on phones).
     Referenced by fixed HUD widgets; those widgets are zoom(scaled) so the
     offset they land at equals var×hud, matching the scaled top bar. */
  --topbar-h: 92px;
  --timer-t: 34px;
  --party-t: 100px;
}

/* On phones the top bar switches from a 3-in-a-row strip to two stacked rows
   (left/right clusters on top, centered map name below) so the center label
   can never collide with the corner clusters. Offset vars follow the new
   stack height so toasts / quest log / minimap / towers sit clear of it. */
@media (max-width: 700px) {
  #topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left right"
      "center center";
    row-gap: 4px;
  }
  #player-info {
    grid-area: left;
  }
  #top-right {
    grid-area: right;
  }
  #map-name {
    grid-area: center;
    justify-self: center;
  }
  :root {
    --topbar-h: 132px;
    --timer-t: 118px;
    --party-t: 110px;
  }
}

/* Very short viewports (landscape phones / small laptops): cap the dock's
   center column so the ability row stays comfortably in reach. */
@media (max-height: 480px) {
  #dock {
    bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .ability-btn {
    width: 44px;
    height: 44px;
  }
  #potion-slot,
  #quick-slot,
  #scroll-slot {
    width: 48px;
    height: 48px;
  }
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  touch-action: none;
}

body:not(.in-game) #hud,
body:not(.in-game) #ability-bar,
body:not(.in-game) #potion-slot,
body:not(.in-game) #quick-slot,
body:not(.in-game) #scroll-slot,
body:not(.in-game) #tip,
body:not(.in-game) #bottom-right {
  display: none !important;
}

body.in-game #game { display: block; }

#no-js {
  display: none;
}

html:not(.js) #no-js {
  display: flex;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #0c0f08;
  font-size: 18px;
  z-index: 50;
}

/* ---------- Pixel helpers ---------- */
.px-label {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.px-label canvas {
  display: block;
}

.px-card {
  background: #1c2817;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c33;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
}

.px-btn {
  pointer-events: auto;
  position: relative;
  color: #ffd23f;
  background: #2c4fa8;
  border: 2px solid #0a0d07;
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 0;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  touch-action: manipulation;
  cursor: pointer;
  padding: 9px 12px;
  min-width: 44px;
  min-height: 40px;
  font-size: 12px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.05s, filter 0.05s;
  /* Slightly notched pixel-art corners. */
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px
  );
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

.px-btn:hover {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5)) brightness(1.12);
}

.px-btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.5));
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 0 10px;
  pointer-events: none;
  z-index: 12;
}

#topbar > * {
  pointer-events: auto;
}

#player-info {
  justify-self: start;
  zoom: var(--hud);
  background: #1c2817;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c33;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 6px 8px;
  min-width: 196px;
  max-width: 46vw;
}

#lvl {
  color: #ffd23f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}

.bar {
  position: relative;
  height: 12px;
  border-radius: 0;
  background: #0a0d07;
  border: 2px solid #0a0d07;
  margin-top: 4px;
}

.bar .fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.12s steps(6);
}

.bar.hp .fill {
  background: repeating-linear-gradient(90deg, #ff5d57 0 8px, #c13a34 8px 16px);
}

.bar.hp {
  height: 24px;
}

.bar.xp .fill {
  background: repeating-linear-gradient(90deg, #8a7bff 0 8px, #5e4bb0 8px 16px);
}

.bar.xp {
  height: 6px;
}

.bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
}

#hp-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
}

#gold {
  zoom: var(--hud);
  background: #1c2817;
  border: 3px solid #0a0d07;
  outline: 2px solid #7a5f14;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 6px 10px;
  color: #ffd23f;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 2px 2px 0 #000;
}

#top-right {
  justify-self: end;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 52vw;
}

#currencies-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  align-items: center;
}

.coin-ico {
  color: #ffd23f;
  font-size: 10px;
}
.coin-ico.ess { color: #88ccff; }
.coin-ico.shd { color: #9b59b6; }
.coin-ico.orb { color: #e74c3c; }

#currencies-bar {
  display: flex;
  gap: 4px;
  align-items: center;
}

#gold, #essence, #shards, #orbs {
  zoom: var(--hud);
  background: #1c2817;
  border: 3px solid #0a0d07;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
}
#gold { color: #ffd23f; outline: 2px solid #7a5f14; }
#essence { color: #88ccff; outline: 2px solid #4488aa; }
#shards { color: #9b59b6; outline: 2px solid #6a3a80; }
#orbs { color: #e74c3c; outline: 2px solid #a02020; }

#room-code {
  zoom: var(--hud);
  align-self: center;
  background: #141d28;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c8a;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 6px 8px;
  color: #5fc1ff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
}

#map-name {
  justify-self: center;
  align-self: center;
  max-width: 100%;
  min-width: 0;
  zoom: var(--hud);
  background: #1c2817;
  border: 3px solid #0a0d07;
  outline: 2px solid #7a6a3a;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 4px 8px;
  color: #cfcba9;
  text-shadow: 2px 2px 0 #000;
  line-height: 1;
  text-align: center;
  width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Bottom dock: three-zone grid that can never overlap ----------
   #dock is a full-width bottom strip with three grid columns:
   left = quick-use slots / fx bar, center = ability bar (+ tip above it),
   right = the button column. Each zone lives in its own column track, so the
   components physically cannot collide regardless of screen size — the grid
   track reserves space for each zone. */
#dock {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  pointer-events: none;
  z-index: 15;
}

#dock-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  justify-self: start;
  min-width: 0;
}

#dock-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 46vw;
  pointer-events: none;
}

#dock-right {
  justify-self: end;
  min-width: 0;
  pointer-events: none;
}

/* #bottom-right keeps the collapsible column + its corner toggler; the zone
   is anchored to the dock; the column scrolls instead of climbing over other
   zones when it grows. */
#bottom-right {
  zoom: var(--hud);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 46vw;
  max-height: 56vh;
}

#right-clutch {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(56vh - 50px);
  opacity: 1;
  padding-bottom: 3px;
  scrollbar-width: none;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

#right-clutch::-webkit-scrollbar {
  display: none;
}

#bottom-right.collapsed #right-clutch {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
}

#ability-bar {
  zoom: var(--hud);
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
  justify-content: center;
  max-width: 46vw;
}

.ability-btn {
  pointer-events: auto;
  position: relative;
  width: 54px;
  height: 54px;
  background: #1c2817;
  border: 3px solid #0a0d07;
  outline: 2px solid #4a6b3c;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  touch-action: none;
  overflow: hidden;
  padding: 0;
}

.ability-btn img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.ability-btn .cd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.72);
  transition: height 0.1s linear;
}

.ability-btn .cd-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd23f;
  font-weight: 900;
  font-size: 15px;
  text-shadow: 2px 2px 0 #000;
}

.ability-btn .key {
  position: absolute;
  top: 1px;
  left: 3px;
  color: #a9bf9a;
  font-size: 9px;
  font-weight: 900;
}

.ability-btn .abi-lvl {
  position: absolute;
  bottom: 2px;
  right: 3px;
  color: #7dfc88;
  font-weight: 900;
}

.ability-btn .drawn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7dfc88;
  font-size: 10px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.55);
}

.ability-btn.dim {
  opacity: 0.55;
}

#tip {
  zoom: var(--hud);
  color: rgba(255, 255, 255, 0.75);
  max-width: min(40vw, 560px);
  text-align: center;
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
}

/* ---------- Right buttons ---------- */
.hud-btn.hud-toggler {
  min-width: 48px;
  min-height: 42px;
  background: #26301c;
}

.hud-btn {
  pointer-events: auto;
  position: relative;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: #2f4fa8;
  border: 2px solid #0a0d07;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding: 11px 12px;
  font-size: 13px;
  min-width: 48px;
  min-height: 42px;
  touch-action: manipulation;
  margin-top: 8px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  /* Same banner/pennant shape as the main-menu tabs. */
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 3px 0 #0a0d07);
}

.hud-btn:hover {
  filter: drop-shadow(0 3px 0 #0a0d07) brightness(1.1);
}

.hud-btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 0 0 #0a0d07);
}

.hud-btn.big {
  font-size: 14px;
  background: #b03c2b;
}

/* All HUD buttons share one shadow recipe and one gap; the per-button rules
   below only tint the face so the column reads as a single clutch. */
.hud-btn#btn-bag {
  background: #0f6b4f;
}

.hud-btn#btn-map {
  background: #1c4a6e;
}

.hud-btn.has {
  outline: 2px solid #e05ec0;
}

.hud-btn#btn-summon-ally {
  background: #2f6b2a;
}

.hud-btn#btn-summon-ally:disabled {
  opacity: 0.75;
}

.hud-btn#btn-summon-ally:disabled:active {
  transform: none;
  box-shadow: 0 3px 0 #0a0d07, inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.hud-btn .px-label {
  min-width: 18px;
  text-align: center;
}

.hud-btn .px-label + .px-label {
  margin-left: 8px;
}

.hud-btn.big {
  min-width: 96px;
}

.hud-btn .count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0a0d07;
  color: #ffd23f;
  border: 2px solid #ffd23f;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

/* ---------- Minimap ---------- */
#minimap-wrap {
  zoom: var(--hud);
  position: absolute;
  top: calc(var(--topbar-h) + 8px + env(safe-area-inset-top));
  right: 10px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s steps(3, end);
}
#minimap-wrap.hide {
  opacity: 0;
  pointer-events: none;
}
#minimap {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 2px solid #0a0d07;
  box-shadow: 0 4px 0 1px rgba(255, 255, 255, 0.1), 0 8px 0 2px rgba(0, 0, 0, 0.6);
}

/* ---------- Panels ---------- */
#panel-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}

#panel-mask.show {
  opacity: 1;
  pointer-events: auto;
}

.panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(560px, 96vw);
  max-height: 76vh;
  background: #1c2817;
  border: 4px solid #0a0d07;
  outline: 2px solid #3f5c33;
  color: #f2eeca;
  z-index: 21;
  transition: transform 0.18s steps(4);
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 0 rgba(0, 0, 0, 0.35), 0 -6px 0 rgba(0, 0, 0, 0.4);
  border-bottom: none;
  border-radius: 0;
}

.panel.show {
  transform: translate(-50%, 0);
}

#panel-skills {
  width: min(720px, 96vw);
  max-height: 94vh;
}

.panel-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 3px solid #0a0d07;
  background: repeating-linear-gradient(90deg, #223019 0 12px, #1a2613 12px 24px);
}

.panel-head h2 {
  font-size: 15px;
  letter-spacing: 2px;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #000;
}

.panel-head .pts {
  margin-left: auto;
  background: #0a0d07;
  color: #ffd23f;
  border: 2px solid #ffd23f;
  font-weight: 900;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.panel-head .pts.zero {
  border-color: #55604d;
  color: #55604d;
}

.panel-head .pts-label {
  font-size: 11px;
  color: #cfcba9;
}

.tree-tools {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.tree-tool {
  pointer-events: auto;
  cursor: pointer;
  font-weight: 900;
  color: #ffd23f;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  border-radius: 0;
  padding: 6px 10px;
  font-size: 12px;
  touch-action: manipulation;
}

.tree-tool:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.45);
}

.tree-reset {
  color: #ff6a5a;
  border-color: #3a1510;
  font-size: 10px;
  padding: 6px 8px;
  letter-spacing: 0.5px;
}
#panel-skills .panel-x {
  position: static;
  order: 10;
}
#panel-skills #btn-tree-reset-all {
  order: 9;
}
.tree-reset:hover {
  color: #ff9090;
  border-color: #5a2520;
}

.tree-status {
  color: #9db18c;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 2px 7px;
  min-height: 18px;
}

.tree-canvas {
  width: 100%;
  height: min(66vh, 640px);
  background: #101a0c;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c33;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  touch-action: none;
  display: block;
  cursor: grab;
}

.panel-body {
  padding: 10px 12px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
  min-height: 0;
  flex: 1;
}

.panel-body::-webkit-scrollbar {
  width: 8px;
}

.panel-body::-webkit-scrollbar-track {
  background: #0a0d07;
  border-left: 1px solid #1c2817;
}

.panel-body::-webkit-scrollbar-thumb {
  background: #3f5c33;
  border: 1px solid #0a0d07;
}

.panel-body::-webkit-scrollbar-thumb:hover {
  background: #57d46a;
}

.skill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  border-radius: 0;
  padding: 9px 10px;
  margin-bottom: 8px;
}

.skill-info {
  flex: 1;
  min-width: 0;
}

.skill-name {
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 1px;
}

.skill-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.skill-icon img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.skill-desc {
  color: #9db18c;
  font-size: 11px;
  margin-top: 2px;
}

.skill-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.skill-dots {
  display: flex;
  gap: 3px;
}

.skill-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: #2c3726;
  border: 1px solid #0a0d07;
}

.skill-dots .dot.on {
  background: #ffd23f;
}

.skill-btn {
  font-weight: 900;
  font-size: 15px;
  color: #1a1200;
  background: #ffd23f;
  border: 2px solid #0a0d07;
  box-shadow: 0 3px 0 #8a6a12;
  border-radius: 0;
  width: 34px;
  height: 30px;
  touch-action: manipulation;
  cursor: pointer;
}

.skill-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #8a6a12;
}

.skill-btn.locked {
  background: #2c3726;
  color: #69765f;
  box-shadow: 0 3px 0 #0a0d07;
}

.skill-btn.maxed {
  background: #2f7d2f;
  color: #d8ffd0;
  font-size: 12px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.35);
  font-size: 13px;
  gap: 10px;
}

.stat-row span:first-child {
  color: #cfcba9;
}

.stat-row span:last-child {
  color: #ffd23f;
  font-weight: 900;
}

/* ---------- Inventory ---------- */
.bag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.bag-tab {
  pointer-events: auto;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 1px;
  color: #cfcba9;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  border-radius: 0;
  padding: 7px 10px;
  font-size: 11px;
  touch-action: manipulation;
  line-height: 1;
}

.bag-tab.on {
  background: #ffd23f;
  color: #1a1200;
  box-shadow: 0 2px 0 #8a6a12;
}

.bag-hint {
  color: #7dfc88;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 4px 0;
}

#bag-equip {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.bag-slot {
  flex: 1;
  text-align: center;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  padding: 4px;
  min-height: 58px;
}

.bag-slot .slot-name {
  color: #9db18c;
  font-size: 9px;
  letter-spacing: 1px;
}

.bag-slot.filled .slot-name {
  color: #ffd23f;
}

.bag-slot .slot-item {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
}

.bag-slot img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto 2px;
}

#bag-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.bag-cell {
  aspect-ratio: 1;
  background: #0d130a;
  border: 2px solid #0a0d07;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  cursor: pointer;
}

.bag-cell img {
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
}

.bag-cell .qty {
  position: absolute;
  bottom: 1px;
  right: 3px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000;
}

.bag-cell.empty {
  opacity: 0.35;
}

.rar-0 {
  outline: 2px solid #7d8490;
}
.rar-1 {
  outline: 2px solid #57d46a;
}
.rar-2 {
  outline: 2px solid #4aa3ff;
}
.rar-3 {
  outline: 2px solid #c05ef0;
}
.rar-4 {
  outline: 2px solid #ffb02e;
  box-shadow: 0 0 0 1px #ffd23f, 0 0 12px 2px rgba(255, 176, 46, 0.55);
}

#bag-detail {
  flex-shrink: 0;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  padding: 8px 10px;
  font-size: 11px;
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
}

#bag-detail .d-name {
  font-weight: 900;
  letter-spacing: 1px;
}

#bag-detail .d-stats {
  color: #b8cda8;
}

#bag-detail .d-act {
  color: #7dfc88;
}

#bag-detail .d-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.drop-btn {
  pointer-events: auto;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  background: #b03c2b;
  border: 2px solid #0a0d07;
  box-shadow: 0 3px 0 #0a0d07, inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 8px 14px;
  font-size: 12px;
  touch-action: manipulation;
}

.drop-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #0a0d07;
}

/* ---------- Toasts ---------- */
#toasts {
  zoom: var(--hud);
  position: fixed;
  top: calc(var(--topbar-h) + 10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 22;
  pointer-events: none;
}

.toast {
  background: #162110;
  border: 2px solid #0a0d07;
  outline: 2px solid #7a5f14;
  color: #ffe9a0;
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 900;
  padding: 6px 10px;
  max-width: 88vw;
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  transition: opacity 0.35s, transform 0.35s;
}

.toast.out {
  opacity: 0;
  transform: translateY(-10px);
}

.hide {
  display: none !important;
}

/* ---------- Level banner ---------- */
#level-banner {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  z-index: 23;
  pointer-events: none;
  text-align: center;
}

#level-banner canvas {
  image-rendering: pixelated;
  display: inline-block;
  max-width: 90vw;
  max-height: 40vh;
  filter: drop-shadow(3px 3px 0 #2a1700) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.7));
}

#level-banner.show {
  animation: pop 2.4s steps(8) forwards;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }
  14% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
  30% {
    transform: translateX(-50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1);
  }
}

/* ---------- Boss banner ---------- */
#boss-banner {
  position: fixed;
  top: 15%;
  left: 0;
  width: 100%;
  z-index: 24;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transform: translateY(-200%);
  padding: 20px 0 32px;
}

#boss-banner.show {
  animation: bossSlam 3.5s steps(12) forwards;
}

#boss-banner-name {
  font-family: monospace;
  font-weight: 900;
  font-size: clamp(18px, 5vw, 36px);
  color: #ff5d5d;
  text-shadow: 2px 2px 0 #1a0a00, 4px 4px 0 rgba(0, 0, 0, 0.7);
  letter-spacing: 3px;
  line-height: 1.1;
  margin: 4px 0;
}

#boss-banner-name canvas {
  image-rendering: pixelated;
  display: inline-block;
  max-width: 90vw;
  max-height: 35vh;
  filter: drop-shadow(3px 3px 0 #1a0a00) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.8));
  width: auto;
  height: auto;
}

#boss-banner-sub {
  font-family: monospace;
  font-weight: 700;
  font-size: clamp(10px, 3vw, 18px);
  color: #ffd23f;
  text-shadow: 1px 1px 0 #1a0a00, 2px 2px 0 rgba(0, 0, 0, 0.7);
  letter-spacing: 6px;
  text-transform: uppercase;
}

#boss-banner-sub canvas {
  image-rendering: pixelated;
  display: inline-block;
  max-width: 80vw;
  max-height: 20vh;
}

@keyframes bossSlam {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  8% {
    opacity: 1;
    transform: translateY(0);
  }
  12% {
    transform: translateY(-5%);
  }
  16% {
    transform: translateY(0);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* ---------- Reward popup ---------- */
#reward-popup {
  position: fixed;
  top: 28%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  z-index: 24;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#reward-popup canvas {
  image-rendering: pixelated;
  display: inline-block;
  max-width: 90vw;
  max-height: 40vh;
  filter: drop-shadow(3px 3px 0 #1a0a00) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.7));
}
#reward-popup.show {
  animation: rewardPop 3s steps(8) forwards;
}
@keyframes rewardPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  10%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
  20%  { transform: translateX(-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(0.95); }
}
.rp-title { margin-bottom: 2px; }
.rp-name { margin-bottom: 6px; }
.rp-rewards { }

/* ---------- Event banner ---------- */
#event-banner {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  z-index: 23;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#event-banner canvas {
  image-rendering: pixelated;
  display: inline-block;
  max-width: 90vw;
  max-height: 40vh;
  filter: drop-shadow(3px 3px 0 #1a0a00) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.7));
}
#event-banner.show {
  animation: eventBannerPop 2.8s steps(8) forwards;
}
@keyframes eventBannerPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  8%   { opacity: 1; transform: translateX(-50%) scale(1.2); }
  18%  { transform: translateX(-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

/* ---------- Event timer ---------- */
#event-timer {
  position: fixed;
  top: calc(var(--timer-t) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
}
#event-timer.show {
  opacity: 1;
}
#event-timer canvas {
  image-rendering: pixelated;
  display: inline-block;
  max-width: 80vw;
  max-height: 30vh;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.7));
}

/* ── Map Timer (countdown during map runs) ── */
#map-timer {
  text-align: center;
  margin-top: 2px;
  pointer-events: none;
}
#map-timer.hide {
  display: none;
}
#map-timer canvas {
  image-rendering: pixelated;
  display: inline-block;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.8));
}
#map-timer.warn canvas {
  animation: timerPulse 0.5s steps(2) infinite;
}
#map-timer.warn {
  color: #ff5d5d;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------- Quest log reward button ---------- */
.ql-reward-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #1a1200;
  background: #57d46a;
  border: 2px solid #0a0d07;
  box-shadow: 0 3px 0 #2a6a2a;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s, box-shadow 0.08s;
}
.ql-reward-btn:active {
  transform: translate(0, 2px);
  box-shadow: 0 1px 0 #2a6a2a;
}

/* ---------- Reset-all confirmation popup ---------- */
#reset-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 1, 1, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 30;
  image-rendering: pixelated;
}
#reset-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.reset-card {
  position: relative;
  text-align: center;
  color: #ffe0c0;
  background: #2b1712;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%);
  border: 4px solid #0a0d07;
  outline: 2px solid #c94a2e;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(201, 74, 46, 0.35);
  border-radius: 0;
  padding: 20px 22px 18px;
  max-width: 88vw;
  max-height: 85vh;
  overflow-y: auto;
  image-rendering: pixelated;
}
.reset-card::before,
.reset-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #c94a2e;
  box-shadow: 0 0 0 2px #0a0d07;
  pointer-events: none;
}
.reset-card::before {
  top: -2px;
  left: -2px;
}
.reset-card::after {
  bottom: -2px;
  right: -2px;
}
.reset-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff6a5a;
  margin-bottom: 10px;
}
.reset-desc {
  font-size: 11px;
  line-height: 1.6;
  color: #d4b896;
  margin-bottom: 16px;
}
.reset-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.reset-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 8px 22px;
  border: 3px solid #0a0d07;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.reset-yes {
  color: #1a0800;
  background: #ff6a5a;
  box-shadow: 0 3px 0 #8a2a1a;
}
.reset-yes:active {
  transform: translate(0, 2px);
  box-shadow: 0 1px 0 #8a2a1a;
}
.reset-no {
  color: #ffe0c0;
  background: #3a2a1a;
  box-shadow: 0 3px 0 #1a0e08;
}
.reset-no:active {
  transform: translate(0, 2px);
  box-shadow: 0 1px 0 #1a0e08;
}

/* ---------- Death overlay ---------- */
#death-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 1, 1, 0.82);
  background-image: repeating-conic-gradient(rgba(255, 0, 0, 0.05) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 30;
  image-rendering: pixelated;
}

#death-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.death-card {
  position: relative;
  text-align: center;
  color: #ffe0c0;
  background: #2b1712;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%);
  border: 4px solid #0a0d07;
  outline: 2px solid #c94a2e;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(201, 74, 46, 0.35);
  border-radius: 0;
  padding: 20px 22px 18px;
  width: min(320px, 88vw);
  overflow: hidden;
  image-rendering: pixelated;
}

/* pixel-art corner notches */
.death-card::before,
.death-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #c94a2e;
  box-shadow: 0 0 0 2px #0a0d07;
  pointer-events: none;
}
.death-card::before {
  top: -4px;
  left: -4px;
}
.death-card::after {
  bottom: -4px;
  right: -4px;
}

.death-card .death-skull {
  display: block;
  margin: 0 auto 10px;
  width: 36px;
  height: 30px;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6));
}

.death-card .death-title {
  font-size: 0;
  line-height: 1;
  margin: 0 auto 8px;
  display: inline-block;
}

.death-card .death-title canvas,
.death-card .death-btn canvas {
  max-width: 100%;
  height: auto;
}

.death-card .death-timer {
  display: block;
  margin: 12px auto 16px;
  image-rendering: pixelated;
  min-height: 40px;
}

.death-card h2 {
  font-size: 20px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 6px;
}

.death-card p {
  color: #c9a89a;
  margin-bottom: 16px;
  font-size: 12px;
}

.death-card .death-btn {
  pointer-events: auto;
  display: inline-block;
  min-width: 150px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  color: #fff;
  background: #b03c2b;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%);
  border: 3px solid #0a0d07;
  box-shadow: 0 4px 0 #0a0d07, inset 0 0 0 1px rgba(255, 255, 255, 0.2), 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  padding: 10px 18px;
  touch-action: manipulation;
  cursor: pointer;
  image-rendering: pixelated;
}

.death-card .death-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.death-card .death-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #0a0d07, inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* ---------- Trade window ---------- */
#trade-overlay {
  position: fixed;
  inset: 0;
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 4, 0.62);
  background-image: repeating-conic-gradient(rgba(125, 252, 136, 0.05) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
  image-rendering: pixelated;
}

#trade-overlay.hide {
  display: none;
}

.trade-card {
  position: relative;
  width: min(560px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #f2eeca;
  background: #1c2817;
  border: 4px solid #0a0d07;
  outline: 3px solid #57d46a;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(87, 212, 106, 0.2);
  border-radius: 0;
  padding: 20px 22px;
  image-rendering: pixelated;
  overflow: hidden;
}

.trade-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0a0d07;
}

.trade-title {
  display: inline-block;
  margin: 0;
}

.trade-merchant-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.trade-merchant-sub {
  font-size: 10px;
  color: #9db18c;
  letter-spacing: 1px;
  max-width: 260px;
  line-height: 1.3;
}

.trade-currencies {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.currency-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: #1c2817;
  border: 2px solid #0a0d07;
  outline: 2px solid #57d46a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
}

.trade-gold {
  display: inline-block;
  margin: 0 0 12px;
}

.trade-stock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.trade-stock {
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.trade-stock::-webkit-scrollbar {
  width: 8px;
}

.trade-stock::-webkit-scrollbar-track {
  background: #0a0d07;
  border-left: 1px solid #1c2817;
}

.trade-stock::-webkit-scrollbar-thumb {
  background: #3f5c33;
  border: 1px solid #0a0d07;
}

.trade-stock::-webkit-scrollbar-thumb:hover {
  background: #57d46a;
}

.trade-buy {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: auto;
  color: #1a1200;
  background: #d9c24a;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 45%);
  border: 2px solid #0a0d07;
  box-shadow: 0 3px 0 #0a0d07;
  border-radius: 0;
  font-family: inherit;
  text-align: center;
  line-height: 0;
  padding: 10px 8px;
  touch-action: manipulation;
  cursor: pointer;
}

.trade-buy canvas {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.trade-buy:active {
  transform: translate(1px, 2px);
  box-shadow: 0 0 0 #0a0d07;
}

.trade-leave {
  flex-shrink: 0;
  background: #5e2f8a;
}

.trade-desc {
  margin-top: 4px;
  color: #cfcba9;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.5;
}

.trade-desc.hide {
  display: none;
}

.trade-cant-afford {
  opacity: 0.5;
}

.trade-cant-afford:hover {
  opacity: 0.75;
}

/* ---------- Editor ---------- */
.editor-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: rgba(10, 13, 8, 0.94);
  background-image: repeating-conic-gradient(rgba(87, 212, 106, 0.04) 0% 25%, transparent 0% 50%);
  background-size: 8px 8px;
  color: #f2eeca;
  image-rendering: pixelated;
}

.editor-root.hide {
  display: none;
}

.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #1c2817;
  border-bottom: 4px solid #0a0d07;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffd23f;
}

.editor-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: #141d10;
  border-bottom: 3px solid #0a0d07;
  overflow-x: auto;
}

.ed-tab {
  pointer-events: auto;
  flex: 1;
  min-width: 96px;
  background: #223019;
  color: #cfcba9;
  border: 2px solid #0a0d07;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  border-radius: 0;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 8px 6px;
  touch-action: manipulation;
  cursor: pointer;
}

.ed-tab.on {
  background: #3f5c33;
  color: #fff;
  outline: 2px solid #ffd23f;
}

.editor-body {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  min-height: 0;
}

.ed-list {
  width: 210px;
  min-width: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #141d10;
  border: 3px solid #0a0d07;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  padding: 8px;
}

.ed-item {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: #1c2817;
  color: #cfcba9;
  border: 2px solid #0a0d07;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.ed-item.on {
  background: #2f4a26;
  color: #fff;
  outline: 2px solid #57d46a;
}

.ed-chip-dot {
  width: 14px;
  height: 14px;
  border: 2px solid #0a0d07;
  flex: none;
}

.ed-cosmetic-preview {
  width: 36px;
  height: 36px;
  border: 2px solid #0a0d07;
  background: #1c2817;
  flex: none;
  image-rendering: pixelated;
}

.ed-item-add {
  margin-left: auto;
  flex: none;
  background: #2a4a6a;
  color: #ffffff;
  border: 2px solid #0a0d07;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
}
.ed-item-add:active {
  background: #57d46a;
  color: #1a1200;
}

.ed-sfx-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 90px;
  padding: 14px 10px;
  background: #10160c;
  border: 3px dashed #3a4a2e;
  color: #cfcba9;
  text-align: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.ed-sfx-drop.over {
  border-color: #57d46a;
  background: #16220f;
}
.ed-sfx-drop.has {
  border-style: solid;
  border-color: #57d46a;
}
.ed-sfx-drop-title {
  font-size: 12px;
  letter-spacing: 1px;
  color: #ffffff;
  word-break: break-all;
}
.ed-sfx-drop-sub {
  font-size: 10px;
  letter-spacing: 1px;
  color: #8a9578;
}
.ed-sfx-row {
  display: flex;
  gap: 8px;
}

.ed-panel {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: #141d10;
  border: 3px solid #0a0d07;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ed-sub {
  color: #ffd23f;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 900;
}

.ed-art {
  background: #0a0d07;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c33;
  padding: 10px;
  align-self: flex-start;
}

.ed-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.ed-tool {
  pointer-events: auto;
  background: #223019;
  color: #cfcba9;
  border: 2px solid #0a0d07;
  border-radius: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 5px 8px;
  cursor: pointer;
}

.ed-tool.on {
  background: #ffd23f;
  color: #10150c;
}

.ed-canvas {
  display: block;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;
  outline: 2px solid #0a0d07;
  max-width: 100%;
}

.ed-frame {
  display: inline-block;
  background: #0d130a;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c33;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 3px 3px 0 rgba(0, 0, 0, 0.5);
  padding: 6px;
}

.ed-size {
  margin-top: 6px;
  color: #9db18c;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: center;
}

.ed-save {
  background: #5e2f8a;
}

.ed-palwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.ed-chip {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0d07;
  border-radius: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  text-shadow: 1px 1px 0 #000;
}

.ed-chip.on {
  outline: 2px solid #ffd23f;
}

.ed-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ed-new {
  background: #3f5c33;
}

.ed-paltiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ed-place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid #0a0d07;
  outline: 1px solid #3f5c33;
  background: #1c2817;
  color: #cfcba9;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 8px;
  cursor: pointer;
  touch-action: manipulation;
}

.ed-place input {
  width: 14px;
  height: 14px;
  accent-color: #57d46a;
  margin: 0;
  cursor: pointer;
}

.ed-place .eds-sw {
  width: 12px;
  height: 12px;
  outline: 1px solid #0a0d07;
  flex: none;
}

.ed-place .ed-count {
  color: #8f9a74;
  font-size: 10px;
  margin-left: 2px;
}

.ed-palprev {
  display: block;
  margin-top: 8px;
  align-self: flex-start;
  outline: 2px solid #0a0d07;
  image-rendering: pixelated;
}

.ed-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ed-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ed-fkey {
  width: 120px;
  color: #9db18c;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex: none;
}

.ed-field input[type="number"],
.ed-field input[type="text"],
.ed-field select {
  flex: 1;
  min-width: 0;
  background: #0d130a;
  color: #fff;
  border: 2px solid #0a0d07;
  outline: 1px solid #4a6b3c;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
}

.ed-field input[type="color"] {
  width: 40px;
  height: 26px;
  background: #0d130a;
  border: 2px solid #0a0d07;
  padding: 0;
  border-radius: 0;
}

.ed-note {
  color: #77836c;
  font-size: 10px;
  letter-spacing: 1px;
}

.ed-hint {
  color: #8a957f;
  font-size: 12px;
}

.ed-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #141d10;
  border-top: 3px solid #0a0d07;
}

.ed-op {
  background: #3f5c33;
}

.ed-footer {
  padding: 8px 14px;
  background: #0c1309;
  color: #6f7d63;
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
  border-top: 2px solid #0a0d07;
}

.ed-close {
  background: #b03c2b;
}

@media (max-height: 520px) {
  .panel {
    max-height: 86vh;
  }
}

/* Small / landscape screens: tighten popup padding so cards fit the viewport */
@media (max-width: 400px), (max-height: 400px) {
  .death-card,
  .reset-card {
    padding: 14px 16px 12px;
  }
  .death-card h2 {
    font-size: 16px;
  }
  .death-card .death-btn {
    min-width: 120px;
    padding: 8px 14px;
  }
}

/* Narrow screens: stack the forge list over its detail pane so neither
   squeezes into sub-tap targets, and let panel headers wrap their tool row. */
@media (max-width: 560px) {
  .crafting-body {
    flex-direction: column;
  }
  .craft-detail {
    width: auto;
    flex: 1 1 42%;
    min-height: 0;
  }
  .craft-recipes-list {
    flex: 0 0 50%;
  }
  .panel-head h2 {
    width: 100%;
  }
}

/* ---------- Character creation menu ---------- */
#menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 40;
  padding: 16px;
}

#menu.show {
  opacity: 1;
  pointer-events: auto;
}

#menu:not(.show) * {
  pointer-events: none !important;
}

#menu-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 0;
}

.menu-frame {
  position: relative;
  z-index: 1;
  width: min(420px, 94vw);
  min-height: min(620px, 90vh);
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  color: #f2eeca;
  background: rgba(16, 24, 12, 0.94);
  background-image: repeating-conic-gradient(rgba(87, 212, 106, 0.04) 0% 25%, transparent 0% 50%);
  background-size: 8px 8px;
  border: 4px solid #0a0d07;
  outline: 2px solid #4a6b3c;
  /* Artistic non-rectangular frame: clipped corners, straight sides. */
  clip-path: polygon(
    12% 0, 88% 0,
    100% 10%, 100% 90%,
    88% 100%, 12% 100%,
    0 90%, 0 10%
  );
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.6));
  padding: 18px 22px 28px;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.menu-frame::-webkit-scrollbar {
  width: 8px;
}

.menu-frame::-webkit-scrollbar-track {
  background: #0a0d07;
  border-left: 1px solid #1c2817;
}

.menu-frame::-webkit-scrollbar-thumb {
  background: #3f5c33;
  border: 1px solid #0a0d07;
}

.menu-frame::-webkit-scrollbar-thumb:hover {
  background: #57d46a;
}

.gear-picker-card {
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.gear-picker-card::-webkit-scrollbar {
  width: 8px;
}

.gear-picker-card::-webkit-scrollbar-track {
  background: #0a0d07;
  border-left: 1px solid #1c2817;
}

.gear-picker-card::-webkit-scrollbar-thumb {
  background: #3f5c33;
  border: 1px solid #0a0d07;
}

.gear-picker-card::-webkit-scrollbar-thumb:hover {
  background: #57d46a;
}

.menu-title {
  margin-bottom: 10px;
}

.menu-title h1 {
  font-size: 0;
  letter-spacing: 0;
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-title .tag {
  color: #9db18c;
  font-size: 11px;
  letter-spacing: 4px;
  margin-top: 0;
}

.menu-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
  border-bottom: 3px solid #0a0d07;
  padding-bottom: 8px;
}

.menu-tab {
  flex: 1;
  cursor: pointer;
  background: #162110;
  border: 2px solid #0a0d07;
  color: #9db18c;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 10px 6px 8px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 0 #0a0d07;
  transition: transform 0.05s, background 0.1s;
  /* Banner / pennant tab shape. */
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.menu-tab:hover,
.menu-tab.on {
  background: #223019;
  color: #ffd23f;
  border-color: #ffd23f;
}

.menu-tab.on {
  background: #2c3f20;
  box-shadow: 0 3px 0 #ffd23f;
}

.menu-tab:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #0a0d07;
}

.menu-panel {
  display: none;
  text-align: left;
  animation: panel-in 0.15s ease-out;
}

.menu-panel.show {
  display: block;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.m-label {
  display: block;
  text-align: left;
  color: #cfcba9;
  font-size: 10px;
  letter-spacing: 1px;
  margin: 4px 0 2px;
}

#char-name {
  width: 100%;
  font-family: inherit;
  background: #0d130a;
  color: #fff;
  border: 2px solid #0a0d07;
  outline: 2px solid #4a6b3c;
  padding: 10px;
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.skin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
}

.skin-btn {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  color: #cfcba9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 6px 8px;
  font-family: inherit;
  text-transform: uppercase;
  transition: transform 0.05s;
}

.skin-btn:active {
  transform: translateY(1px);
}

.skin-btn .swatch {
  width: 26px;
  height: 34px;
  border: 2px solid #0a0d07;
  display: block;
}

.skin-btn.on {
  outline: 2px solid #ffd23f;
  background: #223019;
}

.px-btn.wide {
  width: 100%;
  margin-top: 10px;
}

.px-btn.accent {
  background: #3f6b2a;
  color: #f2eeca;
  outline-color: #57d46a;
}

.px-btn.danger {
  background: #5a1e1e;
  color: #f2eeca;
  outline-color: #e05e5e;
}

.m-info {
  color: #9db18c;
  font-size: 10px;
  margin-top: 6px;
  min-height: 14px;
  line-height: 1.4;
}

.char-list,
.coop-rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  max-height: 170px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.char-list::-webkit-scrollbar,
.coop-rooms::-webkit-scrollbar {
  width: 6px;
}

.char-list::-webkit-scrollbar-track,
.coop-rooms::-webkit-scrollbar-track {
  background: #0a0d07;
}

.char-list::-webkit-scrollbar-thumb,
.coop-rooms::-webkit-scrollbar-thumb {
  background: #3f5c33;
  border: 1px solid #0a0d07;
}

.char-row {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: #0d130a;
  border: 2px solid #0a0d07;
  outline: 1px solid #3f5c33;
  color: #f2eeca;
  font-family: inherit;
  padding: 6px 8px;
  transition: background 0.1s;
}

.char-row:hover {
  background: #14200f;
}

.char-row.on {
  outline: 2px solid #ffd23f;
  background: #162110;
}

.char-portrait {
  width: 34px;
  height: 40px;
  flex: 0 0 auto;
  background: #0d130a;
  border: 2px solid #0a0d07;
  outline: 1px solid #3f5c33;
  image-rendering: pixelated;
}

.char-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.char-name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffd23f;
}

.char-meta {
  font-size: 10px;
  color: #9db18c;
  letter-spacing: 1px;
}

.char-del {
  color: #e05e5e;
  font-size: 18px;
  font-weight: 900;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.link-btn {
  background: none;
  border: none;
  color: #6f7d63;
  font-family: inherit;
  font-size: 10px;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 8px;
  letter-spacing: 1px;
}

#btn-save {
  background: #5e2f8a;
}

#btn-menu {
  background: #8a5417;
}

/* ---------- Co-op ---------- */
#party-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: calc(var(--party-t) + env(safe-area-inset-top)) 0 0 10px;
  zoom: var(--hud);
  pointer-events: none;
  max-height: 42vh;
  overflow: hidden;
}

.party-member {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #141d10;
  border: 2px solid #0a0d07;
  outline: 1px solid #3f5c33;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  padding: 4px 7px;
  min-width: 150px;
  max-width: 38vw;
  pointer-events: auto;
}

.party-swatch {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid #0a0d07;
  outline: 1px solid rgba(255, 255, 255, 0.25);
}

.party-info {
  flex: 0 0 auto;
  color: #f2eeca;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 16ch;
}

.party-hp {
  flex: 1 1 auto;
  height: 5px;
  min-width: 24px;
  border: 1px solid #0a0d07;
  background: #2a3520;
}

.party-member.self {
  outline-color: #ffd23f;
}

.coop-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 4px;
}

.coop-row .px-btn {
  flex: 1;
  margin: 0;
}

#coop input {
  width: 100%;
  margin-top: 3px;
  padding: 5px 6px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
  color: #ffd23f;
  background: #0a0d07;
  border: 2px solid #0a0d07;
  outline: 2px solid #3f5c33;
  text-transform: uppercase;
}

#coop .m-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  margin-top: 10px;
}

#coop .m-check input {
  width: auto;
  margin: 0;
  padding: 0;
  outline: none;
  accent-color: #ffd23f;
}

.coop-rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 6px;
  max-height: 80px;
  overflow-y: auto;
}

.coop-rooms:empty {
  margin: 0;
  max-height: none;
}

.coop-rooms .coop-room {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: left;
  color: #e8e2c0;
  background: #141a0e;
  border: 2px solid #3f5c33;
  padding: 8px 10px;
  cursor: pointer;
}

.coop-rooms .coop-room:hover {
  color: #ffd23f;
  border-color: #ffd23f;
}

#coop .coop-rooms:empty::before {
  content: "No public rooms yet.";
  font-size: 12px;
  color: #9aa4b2;
}

body.net-mode #tip {
  display: none;
}

/* ── Crafting overlay ── */
#crafting-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}

#crafting-overlay.hide {
  display: none;
}

.crafting-card {
  position: relative;
  width: min(520px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #f2eeca;
  background: #1c2817;
  border: 4px solid #0a0d07;
  outline: 3px solid #d4a03f;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(212, 160, 63, 0.2);
  border-radius: 0;
  padding: 16px 18px;
  image-rendering: pixelated;
  overflow: hidden;
}

.crafting-header {
  margin-bottom: 10px;
}

.crafting-title {
  font-size: 16px;
  color: #d4a03f;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.crafting-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.craft-tab {
  background: #0a0d07;
  color: #8a9a7a;
  border: 2px solid #3f5c33;
  padding: 4px 12px;
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.craft-tab.on {
  color: #d4a03f;
  border-color: #d4a03f;
  background: #1c2817;
}

.crafting-body {
  display: flex;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.craft-recipes-list {
  flex: 1;
  overflow-y: auto;
  background: #0a0d07;
  border: 2px solid #3f5c33;
  padding: 4px;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.craft-recipes-list::-webkit-scrollbar {
  width: 6px;
}

.craft-recipes-list::-webkit-scrollbar-track {
  background: #0a0d07;
}

.craft-recipes-list::-webkit-scrollbar-thumb {
  background: #3f5c33;
}

.craft-detail {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  background: #0a0d07;
  border: 2px solid #3f5c33;
  padding: 8px;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.craft-detail::-webkit-scrollbar {
  width: 6px;
}

.craft-detail::-webkit-scrollbar-track {
  background: #0a0d07;
}

.craft-detail::-webkit-scrollbar-thumb {
  background: #3f5c33;
}

.craft-row:hover {
  background: rgba(87, 212, 106, 0.1);
}

.craft-close {
  flex-shrink: 0;
  background: #5e2f8a;
}

/* ── Waypoint overlay ── */
#waypoint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}

#waypoint-overlay.hide {
  display: none;
}

.waypoint-card {
  position: relative;
  width: min(280px, 88vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  color: #f2eeca;
  background: #1c2817;
  border: 4px solid #0a0d07;
  outline: 3px solid #5fc1ff;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65);
  border-radius: 0;
  padding: 16px 18px;
  overflow: hidden;
}

.waypoint-title {
  font-size: 16px;
  color: #5fc1ff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.waypoint-sub {
  font-size: 10px;
  color: #577a4a;
  text-align: center;
  margin-bottom: 10px;
}

.waypoint-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.waypoint-row:hover {
  background: rgba(95, 193, 255, 0.1);
}

.waypoint-close {
  flex-shrink: 0;
  background: #2a4a6a;
  margin-top: 8px;
  position: relative;
  z-index: 10;
}

/* ── Map run modifier readout (under the minimap) ── */
#mapmods {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 160px;
  color: #f2eeca;
  font-size: 9px;
  text-align: right;
  line-height: 1.4;
  pointer-events: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}
#mapmods .mm-title {
  color: #8a7bff;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
#mapmods .mm-mod {
  color: #cfcba9;
}
#mapmods .mm-sub {
  color: #577a4a;
}

/* ── Map Device overlay ── */
#mapdevice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}
#mapdevice-overlay.hide {
  display: none;
}
.mapdevice-card {
  position: relative;
  width: min(440px, 94vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  color: #f2eeca;
  background: #152016;
  border: 4px solid #0a0d07;
  outline: 3px solid #8a7bff;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65);
  border-radius: 0;
  padding: 16px 18px;
  overflow: hidden;
}
.mapdevice-title {
  font-size: 16px;
  color: #8a7bff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.mapdevice-sub {
  font-size: 10px;
  color: #577a4a;
  text-align: center;
  margin-bottom: 10px;
}
.mapdevice-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}
.mapdevice-row {
  background: #0d130a;
  border: 2px solid #0a0d07;
  margin-bottom: 6px;
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mapdevice-row:hover {
  background: rgba(138, 123, 255, 0.12);
}
.mapdevice-row .md-name {
  flex: 1;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mapdevice-row .md-tier {
  font-size: 10px;
  color: #ffd23f;
}
.mapdevice-row .md-mods {
  font-size: 9px;
  color: #cfcba9;
}
.mapdevice-detail {
  margin-top: 6px;
  padding: 8px;
  background: #162110;
  border: 1px solid #0a0d07;
  font-size: 11px;
  color: #cfcba9;
  line-height: 1.5;
  min-height: 48px;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 20vh;
}
.mapdevice-detail .md-tip {
  color: #577a4a;
}
.mapdevice-detail .md-run {
  color: #ffd23f;
}
.mapdevice-close {
  flex-shrink: 0;
  background: #2a4a6a;
  margin-top: 10px;
  position: relative;
  z-index: 10;
}

.craft-search {
  width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  color: #cfcba9;
  background: #0a0d07;
  border: 2px solid #3f5c33;
  outline: none;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.craft-search:focus {
  border-color: #d4a03f;
}

.bag-search {
  margin-bottom: 8px;
}

.tree-search {
  margin-bottom: 6px;
}

/* ── Consumable bar ── */
#consumable-bar {
  display: none !important;
}

#consumable-bar.hide {
  display: none;
}

/* ── Quick-use slots (Q=potion1, E=potion2, R=scroll) ── */
#potion-slot,
#quick-slot,
#scroll-slot {
  zoom: var(--hud);
  width: 56px;
  height: 56px;
  background: #1c2817;
  border: 3px solid #0a0d07;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 16;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
#potion-slot { outline: 2px solid #57d46a; }
#potion-slot:hover { outline-color: #7dfc88; }
#quick-slot { outline: 2px solid #e05ec0; }
#quick-slot:hover { outline-color: #ff80c0; }
#scroll-slot { outline: 2px solid #c05ef0; }
#scroll-slot:hover { outline-color: #d080ff; }

#potion-slot:active,
#quick-slot:active,
#scroll-slot:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

#potion-slot .qs-icon,
#quick-slot .qs-icon,
#scroll-slot .qs-icon {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  pointer-events: none;
}

#potion-slot .qs-qty,
#quick-slot .qs-qty,
#scroll-slot .qs-qty {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #0a0d07;
  font-size: 10px;
  font-weight: 900;
  min-width: 18px;
  height: 16px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#potion-slot .qs-qty { color: #57d46a; border: 1px solid #57d46a; }
#quick-slot .qs-qty { color: #e05ec0; border: 1px solid #e05ec0; }
#scroll-slot .qs-qty { color: #c05ef0; border: 1px solid #c05ef0; }

#potion-slot .qs-empty,
#quick-slot .qs-empty,
#scroll-slot .qs-empty {
  color: #55604d;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

/* ── Potion timer (active buffs next to HP bar) ── */
#potion-timer {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

#potion-timer.hide {
  display: none;
}

.potion-timer-item {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #0a0d07;
  border: 1px solid #3f5c33;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 900;
  color: #cfcba9;
  white-space: nowrap;
}

.potion-timer-item .pt-icon {
  width: 10px;
  height: 10px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.potion-timer-item .pt-name {
  color: inherit;
}

.potion-timer-item .pt-time {
  color: #ffd23f;
}

.cons-slot {
  width: 32px;
  height: 32px;
  background: #1c2817;
  border: 2px solid #3f5c33;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cons-slot:hover {
  border-color: #57d46a;
}

.cons-slot:active {
  background: #2a3a1a;
}

.cons-qty {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #0a0d07;
  color: #cfcba9;
  font-size: 8px;
  padding: 0 3px;
  border: 1px solid #3f5c33;
}

/* ── FX bar ── */
#fx-bar {
  display: flex;
  gap: 4px;
  z-index: 15;
}

#fx-bar.hide {
  display: none;
}

.fx-icon {
  width: 24px;
  height: 24px;
  border: 2px solid #0a0d07;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: fx-pulse 1s ease-in-out infinite;
}

@keyframes fx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════
   QUEST SYSTEM UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── Quest toggle button (top-right, below currencies) ── */
.quest-toggle-btn {
  zoom: var(--hud);
  pointer-events: auto;
  position: relative;
  width: 38px;
  height: 38px;
  background: #1c2817;
  border: 3px solid #0a0d07;
  outline: 2px solid #7a5f14;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 8px;
  flex-shrink: 0;
  transition: background 0.1s;
}

.quest-toggle-btn.active {
  background: #2c4a18;
  outline-color: #57d46a;
}

.quest-toggle-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.55);
}

/* ── Quest log side panel ── */
#quest-log {
  zoom: var(--hud);
  position: fixed;
  top: calc(var(--topbar-h) + 10px + env(safe-area-inset-top));
  right: 12px;
  width: 240px;
  max-height: 55vh;
  background: #0c1208;
  border: 3px solid #0a0d07;
  outline: 2px solid #3f5c33;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
  border-radius: 0;
  z-index: 16;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

#quest-log.hide {
  display: none;
}

.ql-head {
  position: relative;
  background: #1c2817;
  border-bottom: 2px solid #0a0d07;
  padding: 6px 10px;
  flex-shrink: 0;
}

.ql-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffd23f;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.ql-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.ql-list::-webkit-scrollbar {
  width: 6px;
}

.ql-list::-webkit-scrollbar-track {
  background: #0a0d07;
}

.ql-list::-webkit-scrollbar-thumb {
  background: #3f5c33;
  border: 1px solid #0a0d07;
}

.ql-card {
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  padding: 8px 8px 6px;
  margin-bottom: 6px;
  border-radius: 0;
}

.ql-card.ql-done {
  border-color: #2a5a20;
  background: #1a2a14;
}

.ql-name {
  margin-bottom: 3px;
  line-height: 0;
}

.ql-name canvas {
  display: inline-block;
  vertical-align: top;
}

.ql-desc {
  font-size: 10px;
  color: #9db18c;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.ql-obj {
  font-size: 10px;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ql-prog {
  color: #cfcba9;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ql-prog-done {
  color: #57d46a;
}

.ql-complete-badge {
  margin-top: 4px;
  line-height: 0;
}

.ql-complete-badge canvas {
  display: inline-block;
  vertical-align: top;
}

.ql-empty {
  padding: 12px 6px;
  text-align: center;
  line-height: 0;
}

.ql-empty canvas {
  display: inline-block;
  vertical-align: top;
}

/* ── Quest Board overlay ── */
#questboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}

#questboard-overlay.hide {
  display: none;
}

.qb-card {
  position: relative;
  width: min(320px, 90vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  color: #f2eeca;
  background: #1c2817;
  border: 4px solid #0a0d07;
  outline: 3px solid #ffd23f;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65);
  border-radius: 0;
  padding: 16px 18px;
  overflow: hidden;
}

.qb-title {
  font-size: 16px;
  color: #ffd23f;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
  letter-spacing: 3px;
  margin-bottom: 4px;
  font-weight: 900;
}

.qb-sub {
  font-size: 10px;
  color: #577a4a;
  text-align: center;
  margin-bottom: 4px;
}

.qb-active-line {
  font-size: 10px;
  color: #9db18c;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.qb-active-line span {
  color: #ffd23f;
  font-weight: 900;
}

.qb-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3f5c33 #0a0d07;
}

.qb-list::-webkit-scrollbar {
  width: 6px;
}

.qb-list::-webkit-scrollbar-track {
  background: #0a0d07;
}

.qb-list::-webkit-scrollbar-thumb {
  background: #3f5c33;
}

.qb-hint {
  font-size: 10px;
  color: #6a8a5a;
  text-align: center;
  padding: 14px 6px;
  letter-spacing: 0.5px;
}

.qb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 6px;
  background: #162110;
  border: 2px solid #0a0d07;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  border-radius: 0;
}

.qb-info {
  flex: 1;
  min-width: 0;
}

.qb-name {
  margin-bottom: 2px;
  line-height: 0;
}

.qb-name canvas {
  display: inline-block;
  vertical-align: top;
}

.qb-desc {
  font-size: 10px;
  color: #9db18c;
  margin-bottom: 3px;
}

.qb-reward {
  font-size: 9px;
  color: #ffd23f;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.qb-accept {
  pointer-events: auto;
  flex-shrink: 0;
  font-weight: 900;
  font-size: 10px;
  color: #1a1200;
  background: #57d46a;
  border: 2px solid #0a0d07;
  box-shadow: 0 3px 0 #2a6a2a;
  border-radius: 0;
  padding: 6px 10px;
  cursor: pointer;
  letter-spacing: 1px;
  touch-action: manipulation;
}

.qb-accept:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #2a6a2a;
}

.qb-active {
  border-color: #2a5a20;
  background: #1a2a14;
}

.qb-abandon {
  pointer-events: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #8a3a3a;
  background: #2a1414;
  border: 2px solid #0a0d07;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
}

.qb-abandon:hover, .qb-abandon:active {
  color: #ff5d5d;
  background: #3a1a1a;
}

.ql-abandon {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: #6a3a3a;
  background: #1a0e0e;
  border: 1px solid #0a0d07;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
  border-radius: 0;
}

.ql-abandon:hover, .ql-abandon:active {
  color: #ff5d5d;
  background: #3a1a1a;
}

.ql-card {
  position: relative;
}

.qb-close {
  flex-shrink: 0;
  background: #2a4a6a;
  margin-top: 8px;
  position: relative;
  z-index: 10;
}

/* ── Close X buttons for panels and overlays ── */
.panel-x,
.overlay-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: #0a0d07;
  border: 2px solid #55604d;
  color: #cfcba9;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  font-family: inherit;
}
.panel-x:hover,
.overlay-x:hover {
  background: #3a1a1a;
  border-color: #ff5d5d;
  color: #ff5d5d;
}

/* ── Search input clear X ── */
.search-wrap {
  position: relative;
  width: 100%;
}
.search-wrap .craft-search {
  padding-right: 22px;
}
.search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  color: #55604d;
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: none;
  font-family: inherit;
}
.search-wrap.has-text .search-clear {
  display: block;
}
.search-clear:hover {
  color: #ff5d5d;
}