/* ==============================================================
   src/styles/audit-overrides.css

   ARCHITECTURAL POLICY (read this before adding new floating UI):

   The viewport is divided into NAMED ZONES. Every fixed-position
   element MUST be assigned to exactly ONE zone, declared by a
   class on the element. Zones never overlap each other.

   Zones:
     • zone-topbar       — top strip (game-wide topbar inside .main)
     • zone-quests       — directly under topbar (quests strip)
     • zone-activity     — directly under quests (activity bar)
     • zone-stage        — the active panel (the actual play area)
     • zone-toasts       — bottom-right corner (.notifs queue)
     • zone-popups       — top-right vertical column for transient
                           popups (level-ups, achievements). Slides
                           in horizontally; queues downward.
     • zone-utility      — bottom-left corner (Test + Admin buttons)
     • zone-modal        — center of viewport, ONLY allowed to cover
                           the stage. Used by Quests modal, Mob
                           preview, etc. Adds backdrop blur.

   RULES:
   1. Two non-modal fixed elements MUST live in different zones.
   2. Adding new floating UI? Pick an existing zone or define a new
      one and document it here. Never invent ad-hoc top/right values.
   3. Modal overlays are the ONLY thing allowed to cover the stage.
      They MUST set z-index >= 99000 and use .zone-modal styles.
   4. Panel layout (.panel) uses grid-template-areas — children get
      explicit area names, never auto-flow that could overlap.
   ============================================================== */

/* ---------- Zone declarations ----------------------------------- */

/* zone-utility: bottom-left stack (Test + Admin).
   The smoke-test button lives at left:8px (built into smoke-test.js).
   Admin sits to the right of it. We give them clear horizontal
   separation — flagged by the UI overlap detector when they crowded. */
#admin-toggle {
  position: fixed !important;
  top: auto !important;
  bottom: 8px !important;
  right: auto !important;
  left: 88px !important;          /* was 60px — created a 10px overlap with smoke test btn */
  z-index: 100000;
}
#admin-panel {
  position: fixed !important;
  top: auto !important;
  bottom: 56px !important;
  right: auto !important;
  left: 60px !important;
  z-index: 99999;
}

/* zone-toasts: bottom-right corner, queues upward.
   b219 (backlog #7): the offsets below are a RESTING position only — the
   toast queue (src/features/toasts.js) measures the other bottom-right
   chrome (#chat-dock, #hr-bug-btn) at runtime and overwrites `bottom` /
   `right` inline so the column always clears them. Toasts also outrank the
   chat dock (z-index 10000) now: geometry keeps them apart, and if the
   geometry ever fails, on top beats invisible. Modals (>= 99980) still win
   over both. */
.notifs {
  position: fixed;
  right: max(12px, var(--safe-r, 0px));
  bottom: max(12px, calc(12px + var(--safe-b, 0px)));
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 24px));
}

/* zone-popups: top-right vertical strip, slides in from right.
   Sits BELOW the topbar so it doesn't collide with the bell/gold/etc. */
.ach-toast {
  position: fixed !important;
  top: 130px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 9996;
  max-width: 240px !important;
  font-size: 12.5px !important;
}
.lvl-celebration {
  position: fixed !important;
  top: 200px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translate(120%, 0) scale(.9) !important;
  text-align: left !important;
  background: linear-gradient(180deg, #3a2010, #1a0d05) !important;
  border: 2px solid var(--gold-2) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
  max-width: 240px !important;
  pointer-events: none;
  z-index: 9997;
  opacity: 0;
}
.lvl-celebration.show {
  animation: lvl-slide 2.4s ease-out forwards !important;
}
@keyframes lvl-slide {
  0%   { transform: translate(120%, 0) scale(.9); opacity: 0; }
  15%  { transform: translate(0, 0) scale(1); opacity: 1; }
  85%  { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(120%, 0) scale(.9); opacity: 0; }
}
.lvl-celebration .lc-ring { display: none !important; }
.lvl-celebration .lc-icon { font-size: 27px !important; flex-shrink: 0; }
.lvl-celebration .lc-icon img { width: 32px !important; height: 32px !important; }
.lvl-celebration .lc-text {
  font-size: 16px !important; margin: 0 !important;
  text-shadow: none !important; color: var(--gold-2) !important;
}
.lvl-celebration .lc-skill {
  font-size: 11.5px !important; display: block;
  letter-spacing: .08em;
}

/* ---------- Profile dashboard cleanups -------------------------- */

#panel-profile #dash-objectives:not(:has(#dash-objectives-body > *)),
#panel-profile #dash-skills:not(:has(#dash-skills-body > *)),
#panel-profile #dash-homestead:not(:has(#dash-homestead-body > *)) {
  display: none !important;
}
#panel-profile .prof-toolbar { display: none !important; }
/* Lifetime Stats button — now lives inside the .feat-buttons row at the top
   of the Profile panel (alongside Achievements / Bestiary). NOT absolutely
   positioned anymore — see the UI overlap detector violation that flagged
   this in May 2026. */
#panel-profile .stats-btn-trigger {
  position: static !important;
  height: auto !important; width: auto !important;
  padding: 6px 12px !important; font-size: 12.5px !important;
  letter-spacing: .04em; border-radius: 6px;
  background: rgba(243,209,129,.14);
  border: 1px solid rgba(243,209,129,.35);
  color: var(--gold-2); cursor: pointer;
}
#panel-profile .stats-btn-trigger:hover { background: rgba(243,209,129,.22); }

/* ─── Profile dashboard polish ───
   Discovered during the May usability bug bash:
     • feat-buttons row was split (Achievements/Bestiary on the left,
       Lifetime Stats / Last Session on the right with a giant gap)
     • Active Effects card was visually unbalanced vs Profile card
     • Bottom 2/3 of the screen was dead space — the Daily Goals,
       Skills, and Homestead cards already existed with rich content
       but were hidden by `legacy.css#3294 (display:none !important)`.
   Fix: re-enable those cards and lay them out in a 3-column grid
   below the Profile + Active Effects row to use the full viewport.
   The Current Activity card (#dash-active) stays hidden — the
   topbar activity bar already covers that real estate.
*/

/* Profile dashboard fill — REVERTED.
   I tried to surface the hidden Daily Goals / Skills / Homestead cards
   to fill the bottom 60% of the screen. The cards have grid-row
   placements baked in by old CSS that fight with my new placements,
   and the .card overflow rules clip Profile content when the row
   sizes are constrained. Three rounds of attempts produced overlap
   regressions worse than the original empty-space problem.
   Leaving the original layout in place — the empty bottom is a
   known issue (see CODE_AUDIT.md "Remaining Issues") and the right
   fix is post-beta after the legacy.js split surfaces a proper
   render tree we control. */
/* Two-column grid below the feat-buttons row. Rows are sized to
   their tallest cell (auto), and each card aligns to the start of
   its row so the column doesn't pad short cards out to match the
   tall ones. The Profile (user) card has the most content so its
   row dictates height — I had it cut off in an earlier pass when
   I gave the grid a fixed alignment. */
/* Original 2-column layout preserved (Profile left, Active Effects right).
   No grid-template-areas — let the rest of the panel children fall
   into their pre-existing positions. */
/* Dashboard-fill experiment fully reverted — the legacy layout owns
   #panel-profile placements via legacy.css. Empty bottom space is
   tracked as a "Remaining Issues" item in CODE_AUDIT.md and is the
   right scope for post-Phase-3.5 work. */
#panel-profile .feat-buttons {
  /* Force a clean single-row layout across the whole panel width.
     Was wrapping into two halves with an empty middle. */
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  justify-content: flex-start !important;
  margin: 12px 0 !important;
}
#panel-profile .feat-buttons .btn,
#panel-profile .feat-buttons .stats-btn-trigger {
  flex: 0 1 auto;
  font-size: 13.5px !important;
  padding: 8px 14px !important;
  /* Override legacy.css's `.stats-btn-trigger { margin-left: auto }`
     which was pushing the Lifetime Stats button to the far right of
     the flex row, leaving a giant gap. Now sits flush with the
     other feat-buttons. */
  margin-left: 0 !important;
}
/* Make the Active Effects card feel intentional even when empty —
   add a subtle border-dashed treatment on the buff sections so the
   card has visual density matching the Profile card. */
#panel-profile #active-effects-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#panel-profile #active-effects-card .card-body p,
#panel-profile #active-effects-card .card-body em,
#panel-profile #active-effects-card .card-body i {
  /* Italic helper text for empty buffs gets a softer, more
     deliberate look. */
  color: var(--ink-3);
  font-style: italic;
  font-size: 14px;
  padding: 6px 10px;
  background: rgba(255,255,255,.025);
  border-radius: 6px;
  border-left: 2px solid rgba(243,209,129,.18);
  margin: 0;
}

/* ─── Quests bar — make the "click to open" affordance feel real ─── */
.quest-summary,
.quest-bar,
[class*="quest-summary"] {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.quest-summary:hover,
.quest-bar:hover {
  background: rgba(243,209,129,.05);
}

/* ─── Image fallback styling ───
   Used by src/utils/image-fallback.js when an icon fails to load.
   Replaces the browser default (jarring gray torn-page glyph) with
   a soft golden emoji that reads as deliberate. Sizing rules:
     • In a constrained parent (slot, tile, icon box) the inline-flex
       fills the parent at min(container, 32px).
     • In an unconstrained parent (like the WOODCUTTING header) the
       max-width caps it so it doesn't stretch into a wide rectangle.
*/
.icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 24px;
  min-height: 24px;
  max-width: 48px;
  max-height: 48px;
  aspect-ratio: 1 / 1;
  font-size: 25px;
  color: rgba(243,209,129,.7);
  opacity: .85;
  text-align: center;
  line-height: 1;
}
/* When the fallback sits inside an explicit slot / icon container
   that already constrains size, fill it. */
.eq-slot .icon-fallback,
.td-slot .icon-fallback,
.inv-equip .slot .icon-fallback,
#equip-panel .slot .icon-fallback,
.invc-tile .icon-fallback,
.act-tile .icon-fallback,
.skill-tile .icon-fallback,
.mp-loot-grid .icon-fallback,
.mk-icon .icon-fallback,
.bm-icon .icon-fallback,
.mm-icon .icon-fallback {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
}
/* Prevent the broken-image default from flashing during the brief
   moment between img.error firing and our handler swapping the node. */
img[src*="assets/raw-bundle"] {
  /* If the alt is empty (most cases), the browser will render a
     blank box on error — better than the torn-page glyph. */
  font-size: 0;
  color: transparent;
}
#panel-profile #active-effects-card { position: relative; }

#food-buffs-host:empty::before {
  content: "No food buffs active. Cook buff foods to add bonuses.";
  color: var(--ink-3); font-size: 13.5px; font-style: italic;
  display: block; padding: 4px 0;
}

/* ---------- Activity bar v2 (compact pill, no progress strip) --- */

.activity-bar.v2 {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 8px 14px !important;
  background: linear-gradient(180deg, rgba(15,19,32,.7), rgba(15,19,32,.4)) !important;
  border-bottom: 1px solid var(--line);
}
.activity-bar.v2 .ab-icon {
  font-size: 25px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.activity-bar.v2 .ab-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.activity-bar.v2 .ab-name {
  font-family: var(--f-display); font-weight: 700; font-size: 16px;
  color: var(--ink); letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-bar.v2 .ab-progress { display: none !important; }
.activity-bar.v2 .ab-meta {
  display: flex; gap: 14px; flex-shrink: 0; font-size: 13.5px; color: var(--ink-3);
}
.activity-bar.v2 .ab-meta .ab-lv b,
.activity-bar.v2 .ab-meta .ab-xph b { color: var(--gold-2); font-size: 14.5px; font-weight: 800; }
.activity-bar.v2 .ab-meta .ab-hp b { color: #7f9a4f; font-weight: 800; }
.activity-bar.v2.idle .ab-meta { display: none; }

/* ─── Idle pulse: subtle attention-call when nothing is active ───
   Overrides legacy.css's static .ab-icon{opacity:.3}. Uses a 3s
   ease-in-out so it never feels frantic. The bar itself gets a
   gentle gold halo on the icon side. Respects reduced-motion. */
@keyframes ab-idle-pulse {
  0%   { opacity: 0.6; transform: scale(1);     }
  50%  { opacity: 1.0; transform: scale(1.18);  }
  100% { opacity: 0.6; transform: scale(1);     }
}
@keyframes ab-idle-glow {
  0%   { box-shadow: inset 4px 0 0 rgba(243,209,129,0.10); }
  50%  { box-shadow: inset 4px 0 0 rgba(243,209,129,0.70); }
  100% { box-shadow: inset 4px 0 0 rgba(243,209,129,0.10); }
}
.activity-bar.v2.idle .ab-icon {
  /* Replaces the legacy hard-coded opacity:.3 */
  opacity: 0.75 !important;
  animation: ab-idle-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
.activity-bar.v2.idle {
  animation: ab-idle-glow 2.4s ease-in-out infinite;
}
.activity-bar.v2.idle .ab-name {
  /* Soft hint that the line is clickable / actionable */
  color: var(--ink-2);
  transition: color 200ms ease;
}
.activity-bar.v2.idle:hover .ab-name { color: var(--gold-2); }

/* Disable the pulse for players who opt into reduced motion or have
   the in-game "Reduce visual effects" setting on. */
@media (prefers-reduced-motion: reduce) {
  .activity-bar.v2.idle .ab-icon,
  .activity-bar.v2.idle { animation: none !important; }
}
:root[style*="--reduce-fx:1"] .activity-bar.v2.idle .ab-icon,
:root[style*="--reduce-fx:1"] .activity-bar.v2.idle { animation: none !important; }
.activity-bar.v2 .ab-stop {
  flex-shrink: 0;
  background: linear-gradient(180deg,#e36161,#a83434);
  border: 1px solid #a83434; color: #fff;
  font-weight: 700; font-size: 13.5px;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  letter-spacing: .04em;
}
.activity-bar.v2 .ab-stop:hover { filter: brightness(1.1); }

/* ---------- Per-panel progress bar ------------------------------ */

.panel-progress {
  background: linear-gradient(180deg, rgba(243,209,129,.06), rgba(243,209,129,.02));
  border: 1px solid rgba(243,209,129,.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 12px;
}
.panel-progress .pp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.panel-progress .pp-label {
  font-family: var(--f-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2);
}
.panel-progress .pp-meta { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.panel-progress .pp-bar { height: 8px; background: rgba(0,0,0,.45); border-radius: 4px; overflow: hidden; }
.panel-progress .pp-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #7f9a4f, #9ab77a);
  transition: width .15s linear;
}
.panel-progress[data-kind=combat] .pp-bar i { background: linear-gradient(90deg, #e36161, #ff8c8c); }
.panel-progress[data-kind=artisan] .pp-bar i { background: linear-gradient(90deg, #f3d181, #c9a040); }

/* ---------- Buff queue rows ------------------------------------- */

.buff-row .br-icon {
  font-size: 25px !important; line-height: 1;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.buff-row {
  display: flex !important;
  align-items: center; gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(127,154,79,.08), rgba(127,154,79,.02));
  border: 1px solid rgba(127,154,79,.2);
  border-radius: 6px;
  margin: 4px 0;
}
.buff-row .br-name { flex: 1; font-family: var(--f-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.buff-row .br-mag { color: #7f9a4f; font-weight: 800; font-size: 14.5px; }
.buff-row .br-time {
  color: var(--ink-3); font-family: monospace; font-size: 12.5px;
  min-width: 50px; text-align: right;
}
.active-effects-card .eff-row.house {
  display: flex !important;
  align-items: center; gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(243,209,129,.06), rgba(243,209,129,.02));
  border: 1px solid rgba(243,209,129,.18);
  border-radius: 6px; margin: 4px 0;
}
.active-effects-card .eff-row.house .eicon {
  font-size: 25px !important; line-height: 1;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.active-effects-card .eff-row.house > div:nth-child(2) { flex: 1; }
.active-effects-card .eff-row.house b {
  font-family: var(--f-display); font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.active-effects-card .eff-row.house .eff-effect { color: var(--gold-2); font-weight: 700; font-size: 13.5px; }
.active-effects-card .eff-row.house .eff-time {
  color: var(--ink-3); font-family: monospace; font-size: 12.5px; font-style: italic;
  min-width: 50px; text-align: right;
  background: rgba(243,209,129,.1); padding: 2px 8px; border-radius: 4px;
}

/* ---------- Combat tab layout (ALWAYS, fighting or not) ---------- */
/* Tyler's spec: equipment on the LEFT, combat arena on the RIGHT.
   Monsters list stays on the FAR LEFT, equipment in middle, arena
   right when not fighting. When fighting, monsters list hides and
   the layout collapses to: equipment left, arena right.
   Strict grid-template-areas means children CANNOT overlap. */

#panel-combat.active {
  display: grid !important;
  grid-template-columns: 280px 320px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "ribbon  ribbon  ribbon"
    "monsters loadout arena" !important;
  gap: 12px !important;
  padding: 12px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
#panel-combat.active .combat-style-block {
  grid-area: ribbon !important;
  margin: 0 !important;
  /* b217: was a cold navy slab (rgba(15,19,32,…)) — the same off-palette blue
     the arena used. A control ribbon is chrome: recessed, warm, no card. */
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.16));
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  padding: 9px 13px;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  order: 0 !important;        /* override legacy "order:-1" */
}
#panel-combat.active .combat-picker {
  grid-area: monsters !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#panel-combat.active .combat-loadout {
  grid-area: loadout !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
#panel-combat.active .combat-arena {
  grid-area: arena !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  /* b195: painted dungeon battle background + vignette/scrim so fighters +
     stats stay legible over it. Lighter in the center (fighters), darker at
     the edges and bottom. */
  background:
    radial-gradient(120% 80% at 50% 36%, rgba(6,6,9,.12), rgba(6,6,9,.72) 92%),
    linear-gradient(180deg, rgba(10,9,12,.30), rgba(6,6,9,.86)),
    url('../../assets/icons-bundle/backgrounds/dungeon.jpg') center/cover no-repeat !important;
  /* b217: was a pink-red hairline (rgba(227,97,97,.3)) — the danger colour
     used as decoration on a container that isn't dangerous. */
  border: 1px solid rgba(201,162,74,.22) !important;
  border-radius: var(--r) !important;
  position: relative;
}

/* When fighting, hide the monsters list to give arena more room.
   The grid collapses to 2 cols via the override below. */
body.in-combat #panel-combat.active {
  grid-template-columns: 340px minmax(0, 1fr) !important;
  grid-template-areas:
    "ribbon  ribbon"
    "loadout arena" !important;
}
body.in-combat #panel-combat.active .combat-picker { display: none !important; }
#panel-combat.active .combat-arena .card-head { display: none !important; }
#panel-combat.active .combat-arena #combat-stop,
#panel-combat.active .combat-arena .btn-danger { display: none !important; }

/* Combat-style ribbon: compact horizontal. */
body.in-combat #panel-combat.active .combat-style-block h4 {
  font-size: 13.5px !important; margin: 0;
  font-family: var(--f-display); color: var(--gold-2);
  letter-spacing: .08em; text-transform: uppercase;
  flex: 0 0 auto;
}
body.in-combat #panel-combat.active .combat-style-block .csb-meta {
  font-size: 12.5px; color: var(--ink-3);
  flex: 1; min-width: 0; line-height: 1.5;
}
body.in-combat #panel-combat.active .combat-style-block .combat-style-buttons {
  display: flex; gap: 4px; flex-wrap: nowrap; flex: 0 0 auto;
}
body.in-combat #panel-combat.active .combat-style-block .csb-btn {
  padding: 4px 10px; font-size: 12.5px; font-weight: 700;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
body.in-combat #panel-combat.active .combat-style-block .csb-btn small {
  font-size: 10px; opacity: .7; font-weight: 400;
}
body.in-combat #panel-combat.active .combat-style-block .csb-btn.active {
  background: rgba(243,209,129,.18); border-color: var(--gold-2); color: var(--gold-2);
}

/* Hide the original arena viz (replaced by arena-vs panel). */
body.in-combat #combat-area > .arena,
body.in-combat #combat-area > .empty,
body.in-combat #combat-area > [class*="suggested"] {
  display: none !important;
}

/* Combat-area children stay inside the arena column. */
body.in-combat #combat-area {
  width: 100%;
  overflow-x: hidden;
}
#combat-area > * { max-width: 100% !important; box-sizing: border-box; }

/* ---------- Arena VS panel (the new portraits + HP bars) -------- */

.arena-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: center;
  padding: 24px 20px;
  margin: 0 14px 12px;
}
.arena-vs .arena-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.arena-vs .arena-portrait {
  width: 96px; height: 96px;
  background: rgba(0,0,0,.4);
  border: 2px solid var(--gold-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  overflow: visible !important;
  position: relative;
}
.arena-vs .arena-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
}
.arena-vs .arena-side.foe .arena-portrait { border-color: #e36161; }
.arena-vs .arena-name {
  font-family: var(--f-display); font-weight: 800; font-size: 16px;
  letter-spacing: .04em; color: var(--ink); text-transform: uppercase;
}
.arena-vs .arena-hp-bar {
  width: 180px; height: 14px;
  background: rgba(0,0,0,.5); border-radius: 7px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.arena-vs .arena-hp-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #7f9a4f, #9ab77a);
  transition: width .25s;
}
.arena-vs .arena-side.foe .arena-hp-bar i { background: linear-gradient(90deg, #e36161, #ff8c8c); }
.arena-vs .arena-hp-text { font-family: monospace; font-size: 13.5px; color: var(--ink-2); }
.arena-vs .arena-vs-divider {
  font-family: var(--f-display); font-size: 28px; font-weight: 900;
  color: var(--gold-2); letter-spacing: .14em; opacity: .5;
}

/* Damage numbers floating off arena-vs portraits. */
.dmg-num-vs {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, 0);
  font-family: var(--f-display); font-weight: 900; font-size: 28px;
  color: #ff8c8c;
  text-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 8px rgba(227,97,97,.4);
  pointer-events: none; z-index: 10;
  animation: dmg-rise 1.1s ease-out forwards;
  white-space: nowrap;
}
.dmg-num-vs.crit {
  color: #ffe28a; font-size: 36px;
  text-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 12px rgba(243,209,129,.6);
}
.dmg-num-vs.miss {
  color: #9d8b70; font-size: 20.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
@keyframes dmg-rise {
  0%   { transform: translate(-50%, 10px); opacity: 0; }
  15%  { transform: translate(-50%, -10px); opacity: 1; }
  100% { transform: translate(-50%, -60px); opacity: 0; }
}
.arena-portrait.hit-shake { animation: hit-shake .32s ease-out; }
@keyframes hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ---------- Combat preview modal (zone-modal) ------------------- */

.mob-preview-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  z-index: 99998;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  animation: mp-fade .15s ease-out;
}
.mob-preview-overlay.open { display: flex; }
@keyframes mp-fade { from { opacity: 0 } to { opacity: 1 } }

.mp-modal {
  background: linear-gradient(180deg,#201b15,#110e0a);
  border: 1px solid rgba(243,209,129,.3); border-radius: 12px;
  width: min(820px, 100%); max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 80px rgba(243,209,129,.08);
  position: relative;
  padding: 24px 28px 20px;
}
.mp-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink-2);
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mp-close:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.mp-header { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; }
.mp-portrait {
  width: 120px; height: 120px; border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(227,97,97,.18), transparent 70%), rgba(0,0,0,.45);
  border: 2px solid rgba(227,97,97,.4);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.mp-portrait img { width: 100%; height: 100%; object-fit: contain; }
.mp-title h2 { margin: 0 0 4px; font-family: var(--f-display); font-size: 29.5px; letter-spacing: .04em; color: var(--ink); }
.mp-sub { font-size: 13.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.mp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.mp-stat-card {
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.mp-stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; margin-bottom: 4px; }
.mp-stat-val { font-family: var(--f-display); font-size: 25px; font-weight: 800; color: var(--gold-2); }
.mp-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.mp-info-row > div {
  background: rgba(0,0,0,.25); border-radius: 6px; padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center; font-size: 13.5px;
}
.mp-info-label { color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
.mp-info-val { font-weight: 700; color: var(--ink); }
.mp-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; margin-left: 6px; letter-spacing: .04em; }
.mp-tag.good { background: rgba(127,154,79,.18); color: #7f9a4f; }
.mp-tag.muted { background: rgba(255,255,255,.06); color: var(--ink-3); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.mp-pane { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 14px; }
.mp-pane h4 { margin: 0 0 10px; font-family: var(--f-display); font-size: 12.5px; font-weight: 800; color: var(--gold-2); letter-spacing: .12em; text-transform: uppercase; }
.mp-mystats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-mystats > div {
  background: rgba(0,0,0,.35); border-radius: 6px; padding: 8px 4px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mp-mystats > div > span { font-size: 20.5px; }
.mp-mystats > div > b { font-family: var(--f-display); font-size: 14.5px; color: var(--ink); }
.mp-mystats > div > small { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.mp-forecast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-forecast > div { background: rgba(0,0,0,.35); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; }
.mp-forecast > div > span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.mp-forecast > div > b { font-family: var(--f-display); font-size: 18px; color: var(--gold-2); font-weight: 800; margin-top: 2px; }
.mp-loot-pane { margin-bottom: 16px; }
.mp-loot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-loot-row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.3); padding: 6px 10px; border-radius: 6px; }
.mp-loot-icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mp-loot-icon img { width: 100%; height: 100%; object-fit: contain; }
.mp-loot-icon span { font-size: 20.5px; }
.mp-loot-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-loot-meta { font-size: 11.5px; color: var(--ink-3); font-family: monospace; }
.mp-empty { grid-column: 1 / -1; text-align: center; padding: 20px; color: var(--ink-3); font-style: italic; }
.mp-footer { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.mp-food { display: flex; align-items: center; gap: 10px; flex: 1; background: rgba(0,0,0,.3); padding: 8px 12px; border-radius: 8px; }
.mp-food-icon { font-size: 29.5px; width: 40px; height: 40px; background: rgba(0,0,0,.4); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.mp-food-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.mp-food-qty { font-size: 11.5px; color: var(--ink-3); }
.mp-actions { display: flex; gap: 8px; }
.mp-btn {
  border: none; padding: 12px 22px; border-radius: 8px;
  font-family: var(--f-display); font-size: 14.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.mp-btn:hover { filter: brightness(1.15); }
.mp-btn:active { transform: translateY(1px); }
.mp-btn-secondary { background: rgba(255,255,255,.08); color: var(--ink-2); border: 1px solid rgba(255,255,255,.12); }
.mp-btn-primary {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%); color: #fff;
  border: 1px solid #e6cd93; min-width: 140px;
  box-shadow: 0 4px 16px rgba(127,154,79,.3);
}

/* Combat log + calc styling */
#combat-area .combat-log {
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; padding: 10px 12px; margin: 12px 14px;
  max-height: 140px; overflow-y: auto;
  font-family: monospace; font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
#combat-area .combat-log > div { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
#combat-area .combat-log > div:last-child { border-bottom: 0; }
#combat-area .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 14px 12px; }
#combat-area .calc > div { background: rgba(0,0,0,.3); padding: 10px 14px; border-radius: 6px; text-align: center; }
#combat-area .calc b { display: block; font-size: 25px; color: var(--gold-2); font-weight: 800; font-family: var(--f-display); }
#combat-area .calc span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
#combat-area .row.between { margin: 0 14px 14px; padding: 8px 14px; background: rgba(0,0,0,.25); border-radius: 6px; font-size: 13.5px; }

/* ---------- Misc cleanup ---------------------------------------- */
.global-quests-strip { cursor: pointer; user-select: none; }
.global-quests-strip:hover .gq-open-hint { color: var(--gold-2); }
.qm-overlay { z-index: 999999 !important; }

/* Topbar right-side spacing */
.topbar > .topbar-right,
.topbar .topbar-right,
.topbar > div:last-child {
  display: flex; align-items: center; gap: 8px;
}
.topbar [class*="badge"], .topbar .pip { margin-left: 0; }
.topbar .bell-badge,
.topbar .pip-badge,
.topbar [class*="badge"] {
  font-size: 11.5px; min-width: 16px; padding: 0 4px;
  line-height: 16px; border-radius: 8px;
}

/* Loadout grid normalize */
#panel-combat .combat-loadout .equip-grid,
#panel-combat .combat-loadout [class*="equip-grid"],
#panel-combat .combat-loadout .paper-doll {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 8px;
}

/* Inventory equip slot icons */
.inv-equip .slot img,
#equip-panel .slot img,
.td-slot img {
  max-width: 80%; max-height: 80%; object-fit: contain;
}

/* Hide the 3-letter slot abbreviation ("Hel", "Wea"…) when the slot
   actually has gear in it — the equipment image already says what it
   is, and the duplicate label was making the doll look cluttered.
   Empty slots still show the label so the player knows what goes where.
   Includes `.icon-fallback` so slots showing the emoji-fallback
   substitute (when an asset 404s) also hide the abbreviation. */
.eq-slot:has(img) small,
.td-slot:has(img) small,
.inv-equip .slot:has(img) small,
#equip-panel .slot:has(img) small,
#loadout-panel .slot:has(img) small,
.eq-slot:has(.icon-fallback) small,
.td-slot:has(.icon-fallback) small,
.inv-equip .slot:has(.icon-fallback) small,
#equip-panel .slot:has(.icon-fallback) small,
#loadout-panel .slot:has(.icon-fallback) small {
  display: none;
}

/* Mobile breakpoints for the modal */
@media (max-width: 600px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-stats-row { grid-template-columns: repeat(2, 1fr); }
  .mp-loot-grid { grid-template-columns: repeat(2, 1fr); }
  .mp-mystats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Item hover tooltip (zone: floats next to hovered tile,
   pointer-events: none — never blocks input).
   ============================================================ */
#item-tooltip {
  background: linear-gradient(180deg, rgba(15,40,40,.97), rgba(8,25,25,.97));
  border: 1px solid rgba(95,204,180,.45);
  border-radius: 10px;
  padding: 12px 14px;
  width: 280px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
}
#item-tooltip .ttl-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
#item-tooltip .ttl-icon {
  width: 36px; height: 36px;
  background: rgba(0,0,0,.35);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 25px;
}
#item-tooltip .ttl-icon img { width: 100%; height: 100%; object-fit: contain; }
#item-tooltip .ttl-title { flex: 1; min-width: 0; }
#item-tooltip .ttl-name {
  font-family: var(--f-display);
  font-size: 16px; font-weight: 800;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#item-tooltip .ttl-sub {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase;
}
#item-tooltip .ttl-qty {
  background: rgba(243,209,129,.18);
  color: var(--gold-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 13.5px;
}
#item-tooltip .ttl-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#item-tooltip .ttl-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
#item-tooltip .ttl-row-icon { font-size: 16px; width: 22px; flex-shrink: 0; text-align: center; }
#item-tooltip .ttl-pill {
  flex: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 8px;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
  font-family: monospace;
  font-size: 11.5px;
}
#item-tooltip .ttl-pill b { color: var(--ink-3); font-weight: 700; }
#item-tooltip .ttl-pill i { font-style: normal; font-weight: 800; color: var(--ink-2); }
#item-tooltip .ttl-pill.good i { color: #7f9a4f; }
#item-tooltip .ttl-pill.bad i { color: #ff8c8c; }
#item-tooltip .ttl-pill.zero i { color: var(--ink-3); }
#item-tooltip .ttl-cmp {
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
  margin: 4px 0 6px;
}
#item-tooltip .ttl-cmp b { color: var(--gold-2); font-style: normal; }
#item-tooltip .ttl-market {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
#item-tooltip .ttl-row-2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
}
#item-tooltip .ttl-row-2 span { font-size: 16px; width: 18px; }
#item-tooltip .ttl-row-2 b { flex: 1; color: var(--ink); font-weight: 700; }
#item-tooltip .ttl-row-2 i { font-style: normal; color: var(--ink-3); font-size: 11.5px; font-family: monospace; }
#item-tooltip .ttl-row-2.ttl-bop {
  background: rgba(243,209,129,.10);
  border: 1px solid rgba(243,209,129,.3);
  border-radius: 4px;
  padding: 4px 8px;
  margin: 2px 0;
}
#item-tooltip .ttl-row-2.ttl-bop b { color: var(--gold-2); }
#item-tooltip .ttl-row-2.ttl-bop i { color: var(--gold-2); opacity: .8; }

/* ============================================================
   Quantity slider modal (zone-modal — only thing allowed
   to cover the stage). Right-click stack to open.
   ============================================================ */
#qty-slider-overlay {
  backdrop-filter: blur(4px);
}
.qs-modal {
  background: linear-gradient(180deg,#201b15,#110e0a);
  border: 1px solid rgba(243,209,129,.3);
  border-radius: 12px;
  padding: 22px 26px 18px;
  width: min(420px, 90vw);
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.qs-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink-2);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14.5px; cursor: pointer;
}
.qs-title {
  font-family: var(--f-display);
  font-size: 18px; font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin-bottom: 10px;
}
.qs-icon {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(243,209,129,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.qs-icon img { width: 100%; height: 100%; object-fit: contain; }
.qs-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.qs-row input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  outline: none;
}
.qs-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--gold-2);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.qs-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--gold-2);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.qs-row input[type=number] {
  width: 80px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 14.5px;
  font-family: monospace;
  border-radius: 4px;
  text-align: center;
}
.qs-quick { display: flex; gap: 6px; margin-bottom: 10px; }
.qs-quick .qs-q {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 700;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.qs-quick .qs-q:hover { background: rgba(255,255,255,.12); }
.qs-summary {
  background: rgba(243,209,129,.06);
  border: 1px solid rgba(243,209,129,.18);
  border-radius: 6px;
  padding: 10px;
  font-size: 13.5px;
  margin-bottom: 14px;
  text-align: center;
}
.qs-summary b { color: var(--gold-2); }
.qs-actions { display: flex; gap: 8px; justify-content: flex-end; }
.qs-btn {
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  cursor: pointer;
}
.qs-btn-secondary {
  background: rgba(255,255,255,.06);
  color: var(--ink-2);
  border: 1px solid rgba(255,255,255,.1);
}
.qs-btn-primary {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
}
.qs-btn-danger {
  background: linear-gradient(180deg,#e36161,#a83434);
  color: #fff;
}
.qs-btn-action {
  background: linear-gradient(180deg,#f3d181,#c9a040);
  color: #3a2a10;
  border: 1px solid #c9a040;
  min-width: 120px;
}
.qs-btn-action:hover { filter: brightness(1.08); }
.qs-summary .qs-sum-row { padding: 2px 0; }
.qs-summary .qs-sum-row b { color: var(--gold-2); }
.qs-summary .qs-sum-row i { color: var(--ink-3); font-style: normal; font-size: 12.5px; }

/* ============================================================
   Dungeons / Raids / World Bosses panel
   ============================================================ */
#panel-dungeons.active {
  padding: 16px;
  overflow-y: auto;
}
.dgn-section { margin-bottom: 24px; }
.dgn-section h3 {
  font-family: var(--f-display);
  font-size: 16px; font-weight: 800;
  color: var(--gold-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.dgn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.dgn-card {
  background: linear-gradient(180deg, rgba(15,19,32,.7), rgba(15,19,32,.4));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.dgn-card.locked { opacity: .6; }
.dgn-head { display: flex; align-items: center; gap: 12px; }
.dgn-icon {
  font-size: 32px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  border-radius: 8px;
  flex-shrink: 0;
}
.dgn-title { flex: 1; min-width: 0; }
.dgn-name {
  font-family: var(--f-display);
  font-size: 17px; font-weight: 800;
  color: var(--ink);
}
.dgn-meta {
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.dgn-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.dgn-loot-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dgn-loot {
  font-size: 12.5px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
  padding: 3px 8px;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-2);
  font-family: monospace;
}
.dgn-bop {
  font-size: 9px;
  font-weight: 800;
  color: var(--gold-2);
  background: rgba(243,209,129,.15);
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: .04em;
}
.dgn-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.dgn-cost {
  font-size: 12.5px;
  color: var(--ink-3);
}
.dgn-cost b { color: var(--gold-2); }
.dgn-run {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
  border: 1px solid #e6cd93;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .04em;
  cursor: pointer;
}
.dgn-run:hover { filter: brightness(1.12); }
.dgn-run:disabled {
  background: rgba(255,255,255,.06);
  color: var(--ink-3);
  border-color: rgba(255,255,255,.08);
  cursor: not-allowed;
  font-size: 11.5px;
}
.dgn-run-buttons { display: flex; gap: 6px; }
.dgn-run-manual {
  background: linear-gradient(180deg, #f3d181, #c9a040);
  color: #3a2a10;
  border: 1px solid #c9a040;
}
.dgn-run-auto {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
  border: 1px solid #e6cd93;
}

/* ============================================================
   Manual run modal — interactive 3-phase mini-game (zone-modal)
   ============================================================ */
.dgn-run-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.dgn-run-overlay.open { display: flex; }
.drm-modal {
  background: linear-gradient(180deg,#201b15,#110e0a);
  border: 1px solid rgba(243,209,129,.3);
  border-radius: 12px;
  width: min(680px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 28px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.drm-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink-2);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
}
.drm-progress-dots {
  display: flex; gap: 8px; justify-content: center;
  margin-bottom: 14px;
}
.drm-dot {
  width: 32px; height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
}
.drm-dot.active { background: var(--gold-2); }
.drm-dot.done { background: #7f9a4f; }
.drm-dot.failed { background: #e36161; }
.drm-phase-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.drm-phase-icon { font-size: 32px; }
.drm-phase-title h3 {
  margin: 0; font-family: var(--f-display);
  font-size: 18px; color: var(--ink); letter-spacing: .04em;
}
.drm-phase-desc { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.drm-progress { margin-top: 12px; }
.drm-prog-bar {
  height: 8px; background: rgba(0,0,0,.5);
  border-radius: 4px; overflow: hidden;
}
.drm-prog-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #7f9a4f, #9ab77a);
  transition: width .15s;
}
.drm-prog-text {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--ink-3);
  font-family: monospace; margin-top: 6px;
}

/* Gather phase board */
.drm-gather-board {
  position: relative;
  width: 100%; height: 300px;
  background: radial-gradient(circle at center, rgba(127,154,79,.05), rgba(0,0,0,.3));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.drm-gather-node {
  position: absolute;
  width: 48px; height: 48px;
  background: linear-gradient(180deg, #f3d181, #c9a040);
  border: 2px solid #c9a040;
  border-radius: 50%;
  font-size: 25px;
  cursor: pointer;
  animation: drm-node-pulse 1.8s ease-out forwards;
  box-shadow: 0 0 16px rgba(243,209,129,.5);
}
.drm-gather-node:hover { filter: brightness(1.2); }
@keyframes drm-node-pulse {
  0%   { transform: scale(.6); opacity: 0; }
  10%  { transform: scale(1.1); opacity: 1; }
  20%  { transform: scale(1);   opacity: 1; }
  85%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.6);  opacity: 0; }
}

/* Fight phase */
.drm-fight { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drm-foe { font-size: 84px; }
.drm-foe-hp {
  width: 100%; height: 14px;
  background: rgba(0,0,0,.5);
  border-radius: 7px; overflow: hidden;
  border: 1px solid rgba(227,97,97,.4);
}
.drm-foe-hp i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #e36161, #ff8c8c);
  transition: width .2s;
}
.drm-foe-hp-text {
  font-family: monospace; font-size: 13.5px;
  color: var(--ink-2);
}
.drm-rhythm-track {
  width: 100%; height: 36px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.drm-rhythm-target {
  position: absolute; left: 40%; top: 0;
  width: 20%; height: 100%;
  background: rgba(127,154,79,.18);
  border-left: 2px dashed rgba(127,154,79,.45);
  border-right: 2px dashed rgba(127,154,79,.45);
}
.drm-rhythm-marker {
  position: absolute; top: 4px; left: 0%;
  width: 28px; height: 28px;
  background: var(--gold-2);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(243,209,129,.6);
  transition: background .1s;
}
.drm-rhythm-marker.hit-perfect { background: #7f9a4f; box-shadow: 0 0 16px rgba(127,154,79,.7); }
.drm-rhythm-marker.hit-good { background: var(--gold-2); }
.drm-rhythm-marker.hit-bad { background: #e36161; }
.drm-btn-attack {
  background: linear-gradient(180deg, #e36161, #a83434);
  color: #fff; border: 1px solid #a83434;
  font-family: var(--f-display); font-weight: 800;
  font-size: 18px; letter-spacing: .04em;
  padding: 12px 32px; border-radius: 8px;
  cursor: pointer;
}

/* Dodge phase */
.drm-dodge {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 32px 0;
}
.drm-dodge-prompt {
  font-family: var(--f-display); font-size: 29.5px;
  font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-height: 36px;
}
.drm-dodge-prompt:has(+ button:not([disabled])) { color: #ffe28a; }
.drm-btn-dodge {
  background: linear-gradient(180deg, #8fa3ad, #6e808a);
  color: #fff; border: 1px solid #6e808a;
  font-family: var(--f-display); font-weight: 800;
  font-size: 18px; letter-spacing: .04em;
  padding: 14px 40px; border-radius: 8px;
  cursor: pointer;
}
.drm-btn-dodge:disabled {
  background: rgba(255,255,255,.06);
  color: var(--ink-3);
  border-color: rgba(255,255,255,.08);
  cursor: not-allowed;
}

/* Puzzle phase */
.drm-puzzle { display: flex; flex-direction: column; gap: 16px; }
.drm-puzzle-q {
  font-size: 16px; color: var(--ink);
  text-align: center;
  padding: 16px;
  background: rgba(0,0,0,.3);
  border-radius: 8px;
}
.drm-puzzle-opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.drm-puzzle-opt {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink);
  font-size: 18px;
  padding: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.drm-puzzle-opt:hover { background: rgba(255,255,255,.08); }
.drm-puzzle-opt.right { background: rgba(127,154,79,.18); border-color: #7f9a4f; }
.drm-puzzle-opt.wrong { background: rgba(227,97,97,.18); border-color: #e36161; }

/* Summary screen */
.drm-title {
  font-family: var(--f-display); font-size: 25px;
  text-align: center; color: var(--gold-2);
  margin: 0 0 16px;
}
.drm-summary {
  text-align: center; margin-bottom: 18px;
}
.drm-score {
  font-family: var(--f-display);
  font-size: 28px; font-weight: 900;
  letter-spacing: .12em;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.drm-score span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0; }
.drm-score.perfect { color: #7f9a4f; background: rgba(127,154,79,.1); }
.drm-score.partial { color: var(--gold-2); background: rgba(243,209,129,.1); }
.drm-score.fail { color: #ff8c8c; background: rgba(227,97,97,.1); }
.drm-mult {
  font-size: 14.5px; color: var(--ink-2);
}
.drm-mult b { color: var(--gold-2); font-size: 18px; }
.drm-rewards {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}
.drm-rewards h4 {
  margin: 0 0 8px; font-family: var(--f-display);
  color: var(--gold-2); font-size: 13.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.drm-reward-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 14.5px; color: var(--ink);
}
.drm-empty { color: var(--ink-3); font-style: italic; text-align: center; padding: 8px; }
.drm-btn {
  border: none; padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--f-display); font-weight: 800;
  font-size: 14.5px; letter-spacing: .06em;
  cursor: pointer; width: 100%;
}
.drm-btn-primary {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
}

/* ============================================================
   Scavenger dungeon run modal (zone-modal)
   ============================================================ */
.scv-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.scv-overlay.open { display: flex; }
.scv-modal {
  background: linear-gradient(180deg, #201b15, #110e0a);
  border: 1px solid rgba(243,209,129,.3);
  border-radius: 12px;
  width: min(820px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 26px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.scv-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink-2);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer; font-size: 14.5px;
}

/* Status strip: time + accumulated kit pills */
.scv-status {
  display: flex; gap: 14px; align-items: center;
  padding: 10px 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.scv-status-time {
  display: flex; align-items: center; gap: 6px;
  font-family: monospace;
  flex-shrink: 0;
}
.scv-status-time b { color: var(--gold-2); font-size: 16px; }
.scv-status-kit { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.scv-kit-empty { color: var(--ink-3); font-style: italic; }
.scv-kit-item {
  font-family: monospace; font-size: 11.5px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}

/* Tier color codes — used on kit pills + result */
.scv-tier-1 { color: #d0d4de; border-color: rgba(208,212,222,.4); }
.scv-tier-2 { color: #9ab77a; border-color: rgba(136,232,158,.5); }
.scv-tier-3 { color: #8fa3ad; border-color: rgba(136,196,255,.5); }
.scv-tier-4 { color: #d088ff; border-color: rgba(208,136,255,.5); }
.scv-tier-5 { color: #ffe28a; border-color: rgba(255,226,138,.6); background: rgba(255,226,138,.08); }

/* Room header */
.scv-room-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.scv-room-icon { font-size: 36px; }
.scv-room-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 18px; color: var(--ink); letter-spacing: .04em;
}
.scv-room-desc {
  font-size: 13.5px; color: var(--ink-3); margin-top: 4px;
}

/* Option buttons */
.scv-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.scv-opt {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Inter', sans-serif;
}
.scv-opt:hover:not(.disabled) {
  background: rgba(255,255,255,.06);
  border-color: rgba(243,209,129,.3);
}
.scv-opt.disabled { opacity: .4; cursor: not-allowed; }
.scv-opt-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: 14.5px;
  color: var(--ink); font-weight: 700;
}
.scv-opt-icon { font-size: 20.5px; }
.scv-opt-meta { font-size: 12.5px; color: var(--ink-3); font-family: monospace; }
.scv-opt-skill { color: var(--gold-2); }
.scv-opt-hint { font-size: 12.5px; color: var(--ink-2); font-style: italic; }

/* Skip + boss-now actions */
.scv-room-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
/* Free-form lobby grouping */
.scv-lobby-head { margin-bottom: 14px; }
.scv-lobby-head h3 {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-size: 18px; color: var(--ink); letter-spacing: .04em;
}
.scv-lobby-hint {
  font-size: 12.5px; color: var(--ink-3);
  font-style: italic;
  background: rgba(243,209,129,.05);
  border-left: 3px solid var(--gold-2);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}
.scv-room-group {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
}
.scv-room-group-title {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 13.5px; color: var(--gold-2);
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.scv-room-group-title span { font-size: 20.5px; }
.scv-room-group-title small {
  margin-left: auto;
  font-size: 11.5px; color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
}

/* ============================================================
   Character-select drawer (multi-character)
   ============================================================ */
.char-select-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  z-index: 99998;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.char-select-overlay.open { display: flex; }
.cs-modal {
  background: linear-gradient(180deg, #201b15, #110e0a);
  border: 1px solid rgba(243,209,129,.3);
  border-radius: 12px;
  width: min(560px, 100%);
  max-height: 92vh; overflow-y: auto;
  padding: 22px 26px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.cs-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink-2);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer;
}
.cs-modal h2 {
  margin: 0 0 6px; font-family: var(--f-display);
  font-size: 25px; color: var(--ink); letter-spacing: .04em;
}
.cs-sub { font-size: 13.5px; color: var(--ink-3); margin: 0 0 14px; }
.cs-slots { display: flex; flex-direction: column; gap: 8px; }
.cs-slot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  text-align: left; cursor: pointer;
  width: 100%;
  font-family: 'Inter',sans-serif;
}
.cs-slot:not(.locked):hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(243,209,129,.3);
}
.cs-slot.active {
  background: rgba(127,154,79,.1);
  border-color: rgba(127,154,79,.4);
}
.cs-slot.locked { opacity: .7; cursor: default; }
.cs-slot-portrait {
  width: 48px; height: 48px;
  background: rgba(0,0,0,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 29.5px;
  flex-shrink: 0;
}
.cs-slot-meta { flex: 1; min-width: 0; }
.cs-slot-name {
  font-family: var(--f-display); font-weight: 800;
  font-size: 16px; color: var(--ink);
}
.cs-slot-stats {
  font-size: 12.5px; color: var(--ink-3);
  font-family: monospace; margin-top: 2px;
}
.cs-slot-stats b { color: var(--gold-2); }
.cs-slot-since { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.cs-active-pill {
  background: rgba(127,154,79,.2);
  color: #7f9a4f;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-left: 6px;
}
.cs-pill.premium {
  background: rgba(243,209,129,.18);
  color: var(--gold-2);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-left: 6px;
}
.cs-buy {
  background: linear-gradient(180deg, #f3d181, #c9a040);
  color: #3a2a10;
  border: 1px solid #c9a040;
  font-family: var(--f-display);
  font-weight: 800; font-size: 12.5px;
  letter-spacing: .06em;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.cs-buy:hover { filter: brightness(1.1); }
.cs-locked-tag {
  font-size: 11.5px; color: var(--ink-3); font-style: italic;
}

/* ============================================================
   Player Market panel
   ============================================================ */
#panel-market.active {
  padding: 16px;
  overflow-y: auto;
}
.mk-strip {
  background: rgba(243,209,129,.06);
  border-left: 3px solid var(--gold-2);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.mk-strip b { color: var(--gold-2); }
.mk-list-form {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 18px;
}
.mk-list-form h3 {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-size: 13.5px;
  color: var(--gold-2);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mk-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-form-row input {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: monospace;
  border-radius: 4px;
}
.mk-form-row input[type=text] { flex: 1; min-width: 160px; }
.mk-form-row input[type=number] { width: 110px; }
.mk-form-row button {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
  border: 1px solid #e6cd93;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
}
.mk-form-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; font-style: italic; }
.mk-block {
  margin-bottom: 18px;
}
.mk-block h3 {
  font-family: var(--f-display);
  font-size: 14.5px;
  color: var(--gold-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.mk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  margin-bottom: 6px;
}
.mk-icon {
  width: 36px; height: 36px;
  background: rgba(0,0,0,.4);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 25px;
}
.mk-icon img { width: 100%; height: 100%; object-fit: contain; }
.mk-info { flex: 1; min-width: 0; }
.mk-name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.mk-qty {
  margin-left: 8px;
  background: rgba(243,209,129,.18);
  color: var(--gold-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12.5px;
  font-weight: 800;
}
.mk-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; font-family: monospace; }
.mk-meta b { color: var(--ink-2); }
.mk-action { flex-shrink: 0; }
.mk-buy {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
  border: 1px solid #e6cd93;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.mk-buy:hover { filter: brightness(1.1); }
.mk-cancel {
  background: rgba(227,97,97,.15);
  color: #ff8c8c;
  border: 1px solid rgba(227,97,97,.4);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.mk-empty { padding: 16px; text-align: center; color: var(--ink-3); font-style: italic; font-size: 13.5px; }

/* ─── Market: search/sort toolbar ─── */
.mk-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.mk-toolbar #mk-search {
  flex: 1;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 14.5px;
  outline: none;
}
.mk-toolbar #mk-search:focus { border-color: rgba(243,209,129,.5); }
.mk-toolbar #mk-sort {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  min-width: 160px;
}
.mk-toolbar #mk-clear-q {
  background: rgba(227,97,97,.18);
  color: #ff8c8c;
  border: 1px solid rgba(227,97,97,.4);
  width: 36px; height: 36px;
  font-size: 18px;
  border-radius: 6px;
  cursor: pointer;
}

/* ─── Market: per-listing 7d stats ─── */
.mk-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.mk-stats .mk-stat {
  font-family: monospace;
}
.mk-stats .mk-stat b { color: var(--ink-2); font-weight: 700; }
.mk-stats .mk-stat.muted { color: rgba(138,146,160,.7); font-style: italic; }
.mk-delta {
  font-family: monospace;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.mk-delta.fair { color: var(--ink-3); background: rgba(255,255,255,.06); }
.mk-delta.high { color: #ff8c8c; background: rgba(227,97,97,.15); }   /* over-priced */
.mk-delta.low  { color: #7f9a4f; background: rgba(127,154,79,.15); }   /* bargain */

/* ─── Market: top-movers analytics block ─── */
.mk-movers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.mk-mover {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  align-items: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.mk-mover:hover {
  background: rgba(243,209,129,.08);
  border-color: rgba(243,209,129,.3);
}
.mk-mover .mm-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  border-radius: 6px;
  font-size: 25px;
  grid-row: span 2;
}
.mk-mover .mm-icon img { width: 100%; height: 100%; object-fit: contain; }
.mk-mover .mm-name {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
}
.mk-mover .mm-stats {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Mobile tweaks for market */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px){
  .mk-toolbar { flex-direction: column; align-items: stretch; }
  .mk-toolbar #mk-sort { min-width: 0; width: 100%; }
  .mk-stats { font-size: 11.5px; gap: 6px; }
  .mk-movers { grid-template-columns: 1fr 1fr; }
}

/* ─── Buy offer rows + buy modal ─── */
.mk-row.offer-row {
  border-left: 3px solid #8fa3ad;
  background: rgba(136,191,245,.04);
}
.mk-qty.offer {
  background: rgba(136,191,245,.18);
  color: #8fa3ad;
}
.mk-cancel-offer {
  background: rgba(136,191,245,.12);
  color: #8fa3ad;
  border: 1px solid rgba(136,191,245,.4);
}
.mk-cancel-offer:hover { filter: brightness(1.15); }

#buy-modal .modal-card.buy-card {
  width: min(560px, 92vw);
  max-width: 560px;
  background: linear-gradient(180deg, #221c15, #14100b);
  border: 1px solid rgba(243,209,129,.3);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
#buy-modal .modal-head {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
}
#buy-modal .modal-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display, 'Fredoka', sans-serif);
  font-weight: 700; font-size: 18px; color: #f3d181;
}
#buy-modal .bm-icon {
  width: 36px; height: 36px;
  background: rgba(0,0,0,.4);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 25px;
}
#buy-modal .bm-icon img { width: 100%; height: 100%; object-fit: contain; }
#buy-modal .bm-body { padding: 18px; }

#buy-modal .bm-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
#buy-modal .bm-stat {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 10px;
}
#buy-modal .bm-lbl {
  font-size: 10px;
  color: #8f7d63;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#buy-modal .bm-val {
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: #ece1cc;
}

#buy-modal .bm-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
#buy-modal .bm-qty-row label {
  font-size: 13.5px;
  color: #c4b79e;
  font-weight: 600;
}
#buy-modal #bm-qty {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: #ece1cc;
  padding: 8px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  width: 110px;
  font-family: monospace;
}
#buy-modal #bm-qty:focus { outline: 1px solid rgba(243,209,129,.5); }
#buy-modal .bm-quick {
  display: flex;
  gap: 4px;
}
#buy-modal .bm-quick button {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #c4b79e;
  padding: 6px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  font-weight: 600;
}
#buy-modal .bm-quick button:hover {
  background: rgba(243,209,129,.15);
  color: #f3d181;
  border-color: rgba(243,209,129,.4);
}

#buy-modal .bm-summary {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 12px;
  font-size: 14.5px;
}
#buy-modal .bm-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  color: #c4b79e;
}
#buy-modal .bm-line.offer { color: #8fa3ad; }
#buy-modal .bm-line.short { color: #ff8c8c; font-style: italic; }
#buy-modal .bm-line.total {
  border-top: 1px dashed rgba(255,255,255,.1);
  padding-top: 8px;
  margin-top: 4px;
}
#buy-modal .bm-line .num {
  font-family: monospace;
  color: #f3d181;
}
#buy-modal .bm-line.short .num { color: rgba(255,140,140,.7); }

#buy-modal .bm-offer-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: #c4b79e;
  cursor: pointer;
}
#buy-modal .bm-offer-toggle input { width: 16px; height: 16px; }

#buy-modal .bm-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.2);
}
#buy-modal .btn-primary {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff;
  border: 1px solid #e6cd93;
  font-family: var(--f-display, 'Fredoka', sans-serif);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
}
#buy-modal .btn-primary:hover { filter: brightness(1.1); }
#buy-modal .btn-primary:disabled {
  background: rgba(255,255,255,.08);
  color: #7a6a52;
  border-color: rgba(255,255,255,.08);
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 540px), (max-height: 540px) and (max-width: 900px){
  #buy-modal .bm-stat-row { grid-template-columns: 1fr; gap: 6px; }
  #buy-modal .bm-qty-row { flex-direction: column; align-items: stretch; }
  #buy-modal #bm-qty { width: 100%; }
  #buy-modal .bm-quick { justify-content: space-between; }
}
.scv-skip {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink-2);
  font-size: 13.5px; padding: 8px 14px;
  border-radius: 6px; cursor: pointer;
}
.scv-skip:hover { background: rgba(255,255,255,.12); }
.scv-boss-now {
  background: linear-gradient(180deg, #e36161, #a83434);
  color: #fff; border: 1px solid #a83434;
  font-family: var(--f-display); font-weight: 800;
  font-size: 13.5px; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
}
.scv-boss-now:hover { filter: brightness(1.1); }

/* In-progress task bar */
.scv-task { margin-top: 14px; }
.scv-task-bar {
  height: 18px; background: rgba(0,0,0,.5);
  border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.scv-task-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #f3d181, #c9a040);
  transition: width .1s linear;
}
.scv-task-text {
  text-align: center;
  margin-top: 8px;
  font-size: 13.5px; color: var(--ink-3);
  font-family: monospace;
}

/* Task result popup */
.scv-result {
  display: flex; align-items: center; gap: 16px;
  padding: 22px;
  border-radius: 10px;
  background: rgba(0,0,0,.4);
  border: 1px solid;
  margin-top: 14px;
}
.scv-result-icon { font-size: 56px; }
.scv-result-text > div { font-size: 13.5px; color: var(--ink-3); margin-bottom: 4px; }
.scv-result-text h2 {
  margin: 0; font-family: var(--f-display);
  font-size: 22.5px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.scv-tier-tag {
  font-family: monospace; font-size: 12.5px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(0,0,0,.4);
}

/* Boss combat */
.scv-boss { display: flex; flex-direction: column; gap: 14px; }
.scv-boss-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: center;
  padding: 16px;
  background: rgba(0,0,0,.35);
  border-radius: 10px;
}
.scv-fighter {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scv-fighter-icon { font-size: 56px; }
.scv-fighter-name {
  font-family: var(--f-display); font-weight: 800;
  font-size: 14.5px; color: var(--ink); text-transform: uppercase;
  letter-spacing: .04em;
}
.scv-hp-bar {
  width: 100%; height: 14px;
  background: rgba(0,0,0,.5);
  border-radius: 7px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.scv-fighter.scv-foe .scv-hp-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #e36161, #ff8c8c);
  transition: width .15s;
}
.scv-fighter.scv-you .scv-hp-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #7f9a4f, #9ab77a);
  transition: width .15s;
}
.scv-hp-text { font-size: 12.5px; font-family: monospace; color: var(--ink-2); }
.scv-vs {
  font-family: var(--f-display); font-size: 27px; font-weight: 900;
  color: var(--gold-2); letter-spacing: .14em; opacity: .6;
}

.scv-loadout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.scv-load-row {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.scv-load-row span { font-size: 10px; color: var(--ink-3); letter-spacing: .06em; }
.scv-load-row b { font-size: 13.5px; color: var(--gold-2); font-family: monospace; }

.scv-rolls {
  background: rgba(243,209,129,.05);
  border: 1px solid rgba(243,209,129,.2);
  border-radius: 8px;
  padding: 10px 12px;
}
.scv-rolls h4 {
  margin: 0 0 8px;
  font-family: var(--f-display); font-size: 12.5px;
  color: var(--gold-2); letter-spacing: .12em;
  text-transform: uppercase;
}
.scv-roll-row {
  display: inline-block;
  font-size: 12.5px; padding: 3px 8px;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
  margin: 2px 4px 2px 0;
  font-family: monospace;
}
.scv-roll-empty { color: var(--ink-3); font-style: italic; font-size: 13.5px; }

/* Summary screen */
.scv-summary { text-align: center; padding: 16px 0; }
.scv-summary-title {
  font-family: var(--f-display); font-size: 32px;
  letter-spacing: .12em; margin: 0 0 8px;
}
.scv-summary-title.win { color: #7f9a4f; }
.scv-summary-title.lose { color: #ff8c8c; }
.scv-summary-sub { font-size: 14.5px; color: var(--ink-2); margin-bottom: 4px; }
.scv-summary-note { font-size: 12.5px; color: var(--ink-3); font-style: italic; margin-bottom: 18px; }
.scv-rewards-block {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(243,209,129,.18);
  border-radius: 8px;
  padding: 14px;
  margin: 0 auto 16px;
  max-width: 480px;
  text-align: left;
}
.scv-rewards-block h4 {
  margin: 0 0 10px;
  font-family: var(--f-display); font-size: 12.5px;
  color: var(--gold-2); letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.scv-reward-row {
  font-size: 14.5px; padding: 4px 0;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.scv-reward-row:last-child { border-bottom: 0; }
.scv-reward-row b { color: var(--ink); font-weight: 700; }
.scv-empty { color: var(--ink-3); font-style: italic; padding: 12px; }
.scv-finish {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%);
  color: #fff; border: 1px solid #e6cd93;
  font-family: var(--f-display); font-weight: 800;
  font-size: 14.5px; letter-spacing: .06em;
  padding: 12px 36px; border-radius: 8px;
  cursor: pointer;
}

/* ============================================================
   MOBILE RESPONSIVE PASS
   ──────────────────────────────────────────────────────────────
   The base mobile rules in legacy.css cover the core layout
   (sidebar→bottom-nav, topbar collapse, panel stacking). This
   block covers all the post-Phase-A additions: combat preview
   modal, item tooltip, qty slider, dungeon cards + run modals,
   scavenger lobby, character drawer, player market.
   Breakpoints:
     • <=768px  — tablet-portrait + landscape phone
     • <=540px  — phone (most playtime)
     • <=380px  — tiny phone (older devices)
   Min tap target: 44×44px per Apple HIG / WCAG 2.5.5.
   ============================================================ */

/* ===== <= 768px : tablet/landscape phone ===== */
@media (max-width: 768px) {
  /* Combat preview modal — already has 600px rule, tighten further */
  .mp-modal { max-width: calc(100vw - 24px); padding: 18px; }
  .mp-foe-name { font-size: 20.5px; }

  /* Combat layout: collapse arena to single column */
  #panel-combat.active.in-combat {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "ribbon"
      "arena"
      "loadout" !important;
  }
  #panel-combat.active:not(.in-combat) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "ribbon"
      "monsters"
      "loadout"
      "arena" !important;
  }

  /* Dungeon cards: 2-up grid */
  .dgn-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  /* Player market: stack rows differently */
  .mk-form-row { flex-direction: column; }
  .mk-form-row input[type=text],
  .mk-form-row input[type=number] { width: 100%; min-width: 0; }
  .mk-form-row button { width: 100%; }
}

/* ===== <= 540px : phone (most users) ===== */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  /* Topbar: ensure stats don't overflow — allow 2-row wrap */
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .top-stats { flex-wrap: wrap; row-gap: 4px; max-width: 100%; }

  /* Make all primary action buttons tap-friendly */
  .btn,
  .nav-btn,
  .chip,
  .icon-btn,
  .bn-btn,
  .dgn-run,
  .mk-buy,
  .mk-cancel,
  .ftue-btn,
  .mp-fight,
  .scv-finish {
    min-height: 44px;
  }
  .icon-btn { min-width: 44px; }
  .chip { padding: 8px 12px; }

  /* Item tooltip: pin to bottom on phone instead of floating */
  #item-tooltip {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(72px + var(--safe-b, 0px)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9000;
  }

  /* Qty slider: full-width on phone */
  #item-qty-modal .qsm-card,
  .qsm-card {
    width: calc(100vw - 24px) !important;
    max-width: 380px;
    padding: 16px !important;
  }
  .qsm-actions button { min-height: 44px; }

  /* Dungeon cards: single column on phone */
  .dgn-grid { grid-template-columns: 1fr !important; }
  .dgn-run-buttons { width: 100%; }
  .dgn-run, .dgn-run-manual, .dgn-run-auto { flex: 1; padding: 10px 8px; font-size: 12.5px; }

  /* Dungeon run modal — full-screen on phone */
  .dgn-run-overlay { padding: 0 !important; }
  .drm-modal {
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 18px 16px !important;
    height: 100vh;
  }
  .drm-foe { font-size: 56px; }
  .drm-gather-board { height: 220px; }
  .drm-gather-node { width: 56px; height: 56px; font-size: 29.5px; }   /* bigger tap target */

  /* Scavenger lobby — stack rooms vertically */
  .scv-lobby-rooms { grid-template-columns: 1fr !important; gap: 10px; }
  .scv-room-card { padding: 12px !important; }
  .scv-task-option { padding: 10px 12px; min-height: 44px; }
  .scv-boss-vs { grid-template-columns: 1fr !important; }
  .scv-boss-side { padding: 12px !important; }

  /* Character select drawer — full-width sheet */
  .char-drawer {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    bottom: 0 !important;
    top: auto !important;
    right: 0 !important;
    height: auto;
    max-height: 80vh;
    padding: 16px !important;
  }
  .char-row { padding: 12px 10px; min-height: 56px; }

  /* Player market — rows reflow */
  .mk-row {
    flex-wrap: wrap;
    padding: 10px;
    gap: 8px;
  }
  .mk-info { flex-basis: calc(100% - 52px); }
  .mk-action { flex-basis: 100%; display: flex; gap: 6px; }
  .mk-action button { flex: 1; min-height: 44px; }

  /* Combat: smaller monster picker chips */
  #tier-chips { gap: 4px; flex-wrap: wrap; }
  #tier-chips .chip { padding: 6px 10px; font-size: 12.5px; min-height: 38px; }

  /* Inventory: ensure paper-doll fits */
  .inv-equip,
  #equip-panel { padding: 8px; }

  /* Modals — ensure all close buttons are tappable */
  .modal .btn-sm { min-width: 44px; min-height: 36px; padding: 8px 14px; }

  /* FTUE card narrower on phone */
  .ftue-card { max-width: calc(100vw - 24px) !important; }

  /* Welcome-back overlay — fit phone width */
  .welcome-modal { max-width: calc(100vw - 24px); padding: 18px; }
}

/* ===== <= 380px : tiny phone ===== */
@media (max-width: 380px) {
  /* Strip non-essential pills from topbar */
  #status-pill { display: none; }
  .player-name { font-size: 13.5px; max-width: 70px; }

  /* Even tighter top-stats */
  .t-stat { padding: 3px 5px; font-size: 11.5px; }

  /* Inventory tile shrink */
  .invc-tile { width: 48px; height: 48px; }

  /* Bottom nav text smaller */
  .bn-btn { font-size: 9px; }
  .bn-btn .ic { font-size: 20.5px; }

  /* Buff queue rows stack tighter */
  .buff-row { font-size: 12.5px; padding: 4px 6px; }
}

/* ===== Virtual keyboard handling — when input is focused on phone,
   prevent the bottom nav from covering the input. We use the
   `ios-keyboard` class added by JS on focus events (set up in
   legacy.js boot if present). ===== */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  body.ios-keyboard .bottom-nav { display: none !important; }
  body.ios-keyboard .panel { padding-bottom: 16px !important; }
}

/* ===== Landscape phone (height < 480) — collapse vertical
   chrome so panels can breathe ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { padding: 4px 10px; }
  .player-avatar { width: 26px; height: 26px; }
  .bottom-nav { height: calc(48px + var(--safe-b, 0px)); }
  .bn-btn { font-size: 9px; min-height: 38px; }
  .bn-btn .ic { font-size: 18px; }
}

/* ============================================================
   CHAT DOCK
   Floating bottom-right panel. Mini = pill button. Full = full
   panel with tabs / messages / input. On mobile, Full takes the
   full screen (modal-style).
   ============================================================ */
#chat-dock {
  position: fixed;
  z-index: 10000;
  font-family: 'Inter', system-ui, sans-serif;
  pointer-events: none;
}
#chat-dock.mini {
  right: calc(16px + var(--safe-r, 0px));
  bottom: calc(16px + var(--safe-b, 0px));
}
#chat-dock.full {
  right: calc(16px + var(--safe-r, 0px));
  bottom: calc(16px + var(--safe-b, 0px));
  width: 340px;
  height: 460px;
  max-height: calc(100vh - 100px);
  resize: both;          /* Player can drag the SE corner to resize */
  overflow: hidden;       /* keep border-radius clean during resize */
  min-width: 280px;
  min-height: 320px;
  max-width: calc(100vw - 32px);
}
#chat-dock-min {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #2c251c, #221c15);
  color: #ece1cc;
  border: 1px solid rgba(243,209,129,.35);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-weight: 600;
  font-size: 14.5px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
#chat-dock-min:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.5); }
#chat-dock-min .cdm-icon { font-size: 18px; }
#chat-dock-min .cdm-badge {
  background: #e36161;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
#chat-dock.full #chat-dock-min { display: none; }
#chat-dock.mini #chat-dock-full { display: none; }

#chat-dock-full {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #221c15, #14100b);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  pointer-events: auto;
  overflow: hidden;
}

/* Tab bar */
#chat-tabs {
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}
#chat-tabs::-webkit-scrollbar { height: 4px; }
#chat-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
.chat-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #9d8b70;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  position: relative;
}
.chat-tab:hover { color: #ece1cc; background: rgba(255,255,255,.04); }
.chat-tab.active {
  color: #f3d181;
  border-bottom-color: #f3d181;
  background: rgba(243,209,129,.06);
}
.chat-tab.whisper.active { color: #8fa3ad; border-bottom-color: #8fa3ad; background: rgba(136,191,245,.06); }
.chat-tab .ct-icon { font-size: 14.5px; }
.chat-tab .ct-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.chat-tab .ct-badge {
  background: #e36161;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  margin-left: 2px;
}
.chat-tab .ct-close {
  margin-left: 4px;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: #7a6a52;
  transition: background 120ms ease, color 120ms ease;
}
.chat-tab .ct-close:hover { background: rgba(227,97,97,.2); color: #e36161; }
.chat-tab.collapse {
  margin-left: auto;
  font-size: 20.5px;
  padding: 8px 14px;
  color: #7a6a52;
}
.chat-tab.collapse:hover { color: #ece1cc; }

/* Messages list */
#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #c4b79e;
  scrollbar-width: thin;
}
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
.chat-empty,
.chat-loading {
  text-align: center;
  color: #7a6a52;
  font-style: italic;
  padding: 32px 16px;
  font-size: 13.5px;
}
.chat-msg {
  display: block;
  padding: 4px 6px;
  border-radius: 5px;
  word-wrap: break-word;
  line-height: 1.5;
}
.chat-msg .cm-time {
  color: #7a6a52;
  font-size: 11.5px;
  font-family: monospace;
  margin-right: 6px;
}
.chat-msg .cm-name {
  color: #8fa3ad;
  font-weight: 700;
  margin-right: 6px;
  cursor: pointer;
  transition: color 120ms ease;
}
.chat-msg .cm-name:hover { color: #f3d181; text-decoration: underline; }
.chat-msg.mine .cm-name { color: #f3d181; }
.chat-msg .cm-body { color: #ece1cc; }
.chat-msg.mentions-me {
  background: rgba(243,209,129,.08);
  border-left: 2px solid #f3d181;
  padding-left: 8px;
}
.chat-msg.system {
  color: #7a6a52;
  font-style: italic;
  text-align: center;
  font-size: 12.5px;
  padding: 6px;
}
.cm-mention {
  color: #f3d181;
  background: rgba(243,209,129,.1);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}
.cm-mention.mentions-me {
  color: #fff;
  background: linear-gradient(180deg, #f3d181, #c9a040);
}

/* Mention autocomplete */
#chat-mention-pop {
  position: absolute;
  bottom: 56px;
  left: 12px;
  right: 12px;
  background: #262019;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  padding: 4px;
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
}
.cmp-item {
  background: transparent;
  color: #ece1cc;
  border: 0;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  border-radius: 4px;
  cursor: pointer;
}
.cmp-item:hover,
.cmp-item:focus { background: rgba(243,209,129,.15); color: #f3d181; outline: none; }

/* Input bar */
#chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(0,0,0,.4);
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  position: relative;
}
#chat-input {
  flex: 1;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  color: #ece1cc;
  padding: 9px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 14.5px;
  outline: none;
}
#chat-input:focus { border-color: rgba(243,209,129,.5); }
#chat-input:disabled { opacity: .5; cursor: not-allowed; }
#chat-send {
  background: linear-gradient(180deg, #f3d181, #c9a040);
  color: #1a1610;
  border: 0;
  width: 40px;
  height: 38px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 120ms ease;
  /* b219: holds an inline SVG glyph now (was a dingbat character), so it
     needs to centre a box rather than a text baseline. */
  display: flex;
  align-items: center;
  justify-content: center;
}
#chat-send:hover { filter: brightness(1.1); }

/* Name context menu */
#chat-name-menu {
  position: fixed;
  z-index: 20000;
  background: #262019;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,.6);
  padding: 4px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
}
#chat-name-menu .cnm-head {
  padding: 8px 10px 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: #f3d181;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
#chat-name-menu button {
  background: transparent;
  border: 0;
  color: #c4b79e;
  text-align: left;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
#chat-name-menu button:hover { background: rgba(243,209,129,.12); color: #f3d181; }

/* Mobile: full-screen chat instead of floating dock */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  #chat-dock.full {
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  #chat-dock.full #chat-dock-full { border-radius: 0; }
  #chat-dock.mini {
    bottom: calc(72px + var(--safe-b, 0px)) !important;     /* clear bottom nav */
  }
  .chat-tab { min-height: 44px; padding: 8px 12px; }
  #chat-input { min-height: 44px; }
  #chat-send { width: 48px; height: 44px; }
}

/* ============================================================
   SETTINGS PAGE (categorized)
   Six collapsible sections, custom toggle pills, range sliders,
   touch-friendly on mobile.
   ============================================================ */
.settings-page { display: flex; flex-direction: column; gap: 8px; }
.settings-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
}
.settings-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--f-display, 'Fredoka', sans-serif);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .04em;
  color: #f3d181;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 120ms ease;
}
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after {
  content: '▾';
  font-size: 13.5px;
  color: #8f7d63;
  transition: transform 200ms ease;
}
.settings-section[open] > summary { background: rgba(243,209,129,.05); }
.settings-section[open] > summary::after { transform: rotate(180deg); }
.settings-section > summary:hover { background: rgba(255,255,255,.04); }
.ss-body {
  padding: 4px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.04);
}
.ss-row:first-child { border-top: 0; }
.ss-row.danger { background: rgba(227,97,97,.06); border-radius: 4px; padding: 8px 10px; margin-top: 6px; }
.ss-label {
  flex: 1;
  font-size: 14.5px;
  color: #c4b79e;
  font-weight: 500;
}
.ss-hint {
  font-size: 12.5px;
  color: #8f7d63;
  font-style: italic;
  padding: 2px 0 4px;
  margin-bottom: 4px;
  line-height: 1.4;
}
.ss-meta { font-size: 12.5px; color: #8f7d63; font-family: monospace; }

.ss-card {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ss-card-title { font-weight: 700; color: #ece1cc; flex: 1; }
.ss-card-meta { font-size: 12.5px; color: #8f7d63; }

/* Toggle switch */
.ss-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.ss-toggle input { opacity: 0; position: absolute; pointer-events: none; }
.ss-toggle-track {
  display: block;
  width: 42px;
  height: 24px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}
.ss-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #c4b79e;
  border-radius: 50%;
  transition: transform 200ms ease, background 120ms ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.ss-toggle input:checked + .ss-toggle-track {
  background: linear-gradient(90deg, #c9a040, #f3d181);
  border-color: #c9a040;
}
.ss-toggle input:checked + .ss-toggle-track .ss-toggle-knob {
  transform: translateX(18px);
  background: #fff;
}
.ss-toggle input:focus-visible + .ss-toggle-track {
  outline: 2px solid #f3d181;
  outline-offset: 2px;
}

/* Slider */
.ss-slider { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.ss-slider input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.ss-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: linear-gradient(180deg, #f3d181, #c9a040);
  border: 2px solid #c9a040;
  border-radius: 50%;
  cursor: pointer;
}
.ss-slider input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: linear-gradient(180deg, #f3d181, #c9a040);
  border: 2px solid #c9a040;
  border-radius: 50%;
  cursor: pointer;
}
.ss-slider-value {
  font-family: monospace;
  font-size: 13.5px;
  color: #f3d181;
  font-weight: 700;
  min-width: 42px;
  text-align: right;
}

/* Select */
.ss-row select {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: #ece1cc;
  padding: 6px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  min-width: 140px;
}

/* Text inputs in settings */
.ss-row input[type=text] {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: #ece1cc;
  padding: 7px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 14.5px;
  min-width: 160px;
}

/* Backup list */
.ss-backup-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 4px;
  padding: 6px;
  background: rgba(0,0,0,.25);
  border-radius: 6px;
}
.ss-backup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.03);
  border-radius: 4px;
  font-size: 13.5px;
  font-family: monospace;
  color: #c4b79e;
}

/* Mobile tweaks */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  .settings-section > summary { padding: 14px; min-height: 44px; }
  .ss-row { flex-wrap: wrap; }
  .ss-label { flex-basis: 100%; }
  .ss-row .ss-toggle,
  .ss-row select,
  .ss-row input[type=text],
  .ss-row .ss-slider { margin-left: auto; }
  .ss-slider { min-width: 100%; }
}