/* Remap Evennia's ANSI cyan (|c) to amber to fit the dark parchment theme */
.color-014 { color: #c8922a; }

:root {
  color-scheme: dark;
  --bg: #0e0b07;
  --panel: #161009;
  --panel-2: #1e160e;
  --line: #2e2318;
  --line-strong: #4a3828;
  --text: #d4b896;
  --muted: #7a6650;
  --bright: #f0e0c0;
  --amber: #c8922a;
  --red: #a85040;
  --blue: #6888a0;
  --green: #6a8e58;
  --gold: #c8a040;
  --font-display: "IM Fell English SC", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --app-height: 100dvh;
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none; /* prevents pull-to-refresh */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
}

body {
  position: fixed;
  inset: 0;
  font-size: 16px;
  line-height: normal;
}

button,
input {
  font: inherit;
}

.client-shell {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--app-height);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--bg);
  padding:
    max(0.5rem, env(safe-area-inset-top))
    max(0.5rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom))
    max(0.5rem, env(safe-area-inset-left));
  gap: 0.5rem;
}

/* Mobile: insert panel row between header and content */
.client-shell.has-mobile-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  padding: 0.5rem 0.6rem;
}

.brand {
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hud-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  align-self: center;
}

.hud-nav {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  align-self: center;
}

.char-btn {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.85rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  min-width: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.char-btn:empty {
  display: none;
}

.quit-btn {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--red);
  opacity: 0.7;
  font-family: var(--font-display);
  font-size: 0.85rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  cursor: pointer;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}

.quit-btn:hover,
.quit-btn:active {
  background: var(--panel-2);
  border-color: var(--red);
  opacity: 1;
}

.brand-name {
  color: var(--bright);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.location {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location:empty { display: none; }

/* Hide chrome that only makes sense in-game */
.client-shell:not([data-view="in_game"]) .location,
.client-shell:not([data-view="in_game"]) .vitals,
.client-shell:not([data-view="in_game"]) .hud-nav,
.client-shell:not([data-view="in_game"]) .char-btn,
.client-shell:not([data-view="in_game"]) .quit-btn,
.client-shell:not([data-view="in_game"]) .command-bar,
.client-shell:not([data-view="in_game"]) .mobile-panel,
.client-shell:not([data-view="in_game"]) .side-panel {
  display: none;
}

/* ── Vitals bar row ─────────────────────────────────────────────────────────── */

.vitals {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.vitals-row {
  display: flex;
  gap: 0.4rem;
}

.vital {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0804;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.vital[hidden] {
  display: none;
}

.vital-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  transition: width 0.4s ease;
  pointer-events: none;
}

.vital-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.88rem;
  white-space: nowrap;
}

.hp   .vital-fill { background: rgba(200, 120, 96, 0.28); }
.mana .vital-fill { background: rgba(120, 152, 184, 0.28); }
.stam .vital-fill { background: rgba(120, 152, 96, 0.28); }
.gold .vital-fill { background: rgba(200, 160, 64, 0.28); }
.time .vital-fill { background: rgba(180, 170, 140, 0.18); width: 100%; }

.hp   .vital-text { color: #c87860; }
.mana .vital-text { color: #7898b8; }
.stam .vital-text { color: #789860; }
.gold .vital-text { color: var(--gold); }
.time .vital-text { color: var(--muted); }

/* ── Status badges (criminal / hidden) ──────────────────────────────────────── */
/* Shown above the vitals row when the player has an active status. The HUD
   container desaturates while the player is hidden so the screen reads as
   "you are off the grid" without a separate avatar to grey out. */

.status-row[hidden] { display: none; }

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.status-badge {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--line);
  background: #0a0804;
  white-space: nowrap;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

.status-badge[hidden] { display: none; }

.status-hidden {
  color: #b8b8b8;
  border-color: rgba(180, 180, 180, 0.45);
  background: rgba(40, 40, 40, 0.55);
  min-width: 15.5rem;
}

.status-wanted {
  color: #d94f4f;
  border-color: rgba(217, 79, 79, 0.55);
  background: rgba(60, 12, 12, 0.55);
  min-width: 6.7rem;
}

/* Outlaw — permanent status, no countdown. Darker red than WANTED so the
   permanence reads at a glance; the wanted-vs-outlaw distinction is the
   short-term blip vs a lasting reputation. */
.status-outlaw {
  color: #ff6a6a;
  border-color: rgba(153, 22, 22, 0.85);
  background: rgba(36, 6, 6, 0.85);
  font-weight: bold;
  letter-spacing: 0.08em;
  min-width: 5.5rem;
}

.status-gaol {
  color: #d6a85a;
  border-color: rgba(214, 168, 90, 0.55);
  background: rgba(56, 38, 12, 0.55);
  min-width: 5.8rem;
}

.status-charges {
  margin-left: 0.4rem;
  opacity: 0.75;
}

/* Out-of-budget warning: charges have hit 0 and movement now rolls against
   Stealth. Amber so it reads as a heads-up without alarming red. */
.status-charges.rolling {
  color: #d6a85a;
  opacity: 1;
}

/* Hidden-state HUD tint: the vital bars desaturate so the player can feel,
   at a glance, that they are off the grid. The fills keep their colour
   classes so a watchful eye can still read percentages. */
.client-shell[data-status-hidden="true"] .vitals-row .vital-fill {
  filter: grayscale(0.6) brightness(0.85);
}
.client-shell[data-status-hidden="true"] .vitals-row .vital-text {
  filter: grayscale(0.4) brightness(0.85);
}

/* ── Enemy target bar ───────────────────────────────────────────────────────── */

.enemy-hud[hidden] {
  display: none;
}

.enemy-hud {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.3rem;
}

.enemy-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.enemy-name {
  color: #c87860;
  font-family: var(--font-display);
  font-size: 0.88rem;
  flex-shrink: 0;
}

.enemy-vital {
  flex: 1;
  height: 1.85rem;
}

.enemy-vital .vital-fill { background: rgba(200, 80, 80, 0.35); }
.enemy-vital .vital-text { color: #c87860; font-size: 0.82rem; }

.connection {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.client-shell[data-state="connecting"] .connection {
  background: var(--gold);
}

.client-shell[data-state="connected"] .connection {
  background: var(--green);
}

.client-shell[data-state="disconnected"] .connection,
.client-shell[data-state="error"] .connection {
  background: var(--red);
}

.output-wrap {
  position: relative;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--line-strong);
  background: #080604;
  overflow: hidden;
}

.game-output {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-size: 0.95rem;
  color: var(--text);
}

/* In game, the feed column is a flex stack: scrolling feed on top, the
   interaction dock pinned at its foot. Side panels are siblings of this
   column so they keep full height. */
.client-shell[data-view="in_game"] .output-wrap {
  display: flex;
  flex-direction: column;
}

.client-shell[data-view="in_game"] .game-output {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.game-output span,
.game-output strong {
  font: inherit;
}

.game-output em {
  font: inherit;
  font-style: italic;
}

.game-output .line {
  margin: 0 0 0.45rem;
}

.game-output .input-line {
  color: var(--muted);
}

.system-line {
  color: var(--amber);
}

.choice-block.choice-done {
  opacity: 0.55;
}

.choice-q {
  color: var(--bright);
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}

/* Shared in-game menu selection: full-row fill + amber cursor bar, no
   focus-outline, no hover lighting. House style for contextual menus. */
.choice-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.6rem;
  border-left: 3px solid transparent;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.choice-row.sel {
  background: var(--panel-2);
  border-left-color: var(--amber);
  color: var(--bright);
}

.choice-block.choice-done .choice-row {
  cursor: default;
}

.choice-num {
  color: var(--muted);
  min-width: 1.3rem;
}

.choice-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.choice-cancel {
  color: var(--muted);
  border-left: 3px solid transparent;
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
  cursor: pointer;
}

.choice-cancel:hover,
.choice-cancel.sel {
  color: var(--amber);
}

.choice-cancel.sel {
  background: var(--panel-2);
  border-left-color: var(--amber);
}

.choice-hint {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

/* Interaction dock: the single surface for any choice the player must
   resolve (disambiguation, shop, future dialogue/crafting). It sits at the
   foot of the feed column, so it tracks the terminal width and never
   shrinks an open side panel. Slides up; the feed flows above and reclaims
   the space when it closes. */
.interaction-dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(46vh, 32rem);
  overflow: hidden;
  background: var(--panel);
  border-top: 1px solid var(--line-strong);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.interaction-dock[hidden] {
  display: none;
}

.interaction-dock.open {
  transform: none;
  opacity: 1;
}

/* The block fills the dock; header and footer are pinned, only the list
   scrolls so a long vendor list never hides the name or the Close tips. */
.shop-block,
.choice-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0.8rem 1rem;
}

.shop-rows,
.choice-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.shop-head,
.shop-head,
.shop-foot,
.shop-actions,
.choice-q,
.choice-foot {
  flex: 0 0 auto;
}

.shop-head {
  color: var(--bright);
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}

/* Column header rides inside the scroll area so it shares the rows' exact
   width (no scrollbar-gutter drift) but sticks to the top while scrolling. */
.shop-colhead {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

.shop-colhead,
.shop-row {
  display: grid;
  /* Fixed tracks (not max-content) so the header and rows, which are
     separate grids, compute identical column widths and stay aligned. */
  grid-template-columns:
    minmax(6rem, 1fr) 7rem 4.5rem 3rem 4.25rem;
  gap: 0.9rem;
  align-items: center;
  /* Reserve the cursor-bar width on both header and rows so the fixed
     columns keep lining up whether or not a row is selected. */
  border-left: 3px solid transparent;
}

/* Requirements belong to their item rather than a narrow comparison
   column. Qty and the commit action stay centered beside the wrapped label. */
.shop-mode-craft .shop-total,
.shop-mode-craft .shop-stock,
.shop-mode-cast .shop-qty,
.shop-mode-cast .shop-total,
.shop-mode-cast .shop-stock,
.shop-mode-take .shop-total {
  display: none;
}
.shop-mode-craft .shop-colhead span:nth-child(3),
.shop-mode-craft .shop-colhead span:nth-child(4),
.shop-mode-cast .shop-colhead span:nth-child(2),
.shop-mode-cast .shop-colhead span:nth-child(3),
.shop-mode-cast .shop-colhead span:nth-child(4),
.shop-mode-take .shop-colhead span:nth-child(3) {
  display: none;
}
@media (min-width: 621px) {
  .shop-mode-craft .shop-colhead,
  .shop-mode-craft .shop-row {
    grid-template-columns: minmax(12rem, 1fr) 7rem 4.25rem;
  }
  .shop-mode-cast .shop-colhead,
  .shop-mode-cast .shop-row {
    grid-template-columns: minmax(12rem, 1fr) 4.25rem;
  }
  .shop-mode-take .shop-colhead,
  .shop-mode-take .shop-row {
    grid-template-columns: minmax(6rem, 1fr) 7rem 3rem 4.25rem;
  }
}

/* Target pickers: no qty/total cells, no column header. Attack uses a
   wider status slot so the HP bar clears the button. */
.shop-mode-attack .shop-colhead,
.shop-mode-snoop .shop-colhead {
  display: none;
}
.shop-mode-attack .shop-qty,
.shop-mode-attack .shop-total,
.shop-mode-snoop .shop-qty,
.shop-mode-snoop .shop-total,
.shop-mode-snoop .shop-stock {
  display: none;
}
@media (min-width: 621px) {
  .shop-mode-attack .shop-row {
    grid-template-columns: minmax(6rem, 1fr) 10rem 4.25rem;
  }
  .shop-mode-snoop .shop-row {
    grid-template-columns: minmax(6rem, 1fr) 4.25rem;
  }
}

/* Action picker: whole row is the button. No qty/total/hint/commit cells —
   the label alone is the action, the entire row is clickable. */
.shop-mode-actions .shop-colhead {
  display: none;
}
.shop-mode-actions .shop-qty,
.shop-mode-actions .shop-total,
.shop-mode-actions .shop-stock {
  display: none;
}
@media (min-width: 621px) {
  .shop-mode-actions .shop-row {
    grid-template-columns: 1fr;
  }
}
.shop-mode-actions .shop-row {
  cursor: pointer;
  padding: 0.55rem 0.8rem;
}
.shop-mode-actions .shop-row:hover {
  background: var(--panel-2);
}

.shop-colhead {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* No bottom margin: a transparent margin strip lets scrolling rows leak
     through the sticky header. Fold the spacing into padding so the
     header's opaque background covers everything behind it. */
  padding: 0.15rem 0.4rem 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.shop-colhead span:nth-child(3),
.shop-colhead span:nth-child(4) {
  text-align: right;
}

.shop-row {
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  /* Keyboard scrollIntoView must clear the sticky column header, otherwise
     the top row ends up tucked behind it and can't be fully revealed. */
  scroll-margin-top: 2.4rem;
  cursor: pointer;
  user-select: none;
}

.shop-row.sel {
  background: var(--panel-2);
  border-left-color: var(--gold);
}

.shop-row.disabled {
  opacity: 0.42;
  cursor: default;
}

.shop-row.disabled .shop-go {
  display: none;
}

/* Fixed-height outcome line under the picker: reserved space so a result
   appearing or clearing never bounces the layout. */
.shop-result {
  min-height: 1.3rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  line-height: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-result.res-ok { color: var(--gold); }
.shop-result.res-bad { color: #e0604f; }
.shop-result.res-warn { color: #d8a24a; }

.shop-item {
  min-width: 0;
  overflow: hidden;
}

.shop-name {
  display: block;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-row.sel .shop-name {
  color: var(--bright);
}

.shop-detail {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 0.2rem;
  padding-left: 0.7rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.shop-detail-warning {
  color: #d8a24a;
}

.shop-qty {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Bare triangle adjusters, no button chrome. Big invisible tap area so
   touch still works. A sprite can later replace the glyph via
   background-image on .shop-step-dec / .shop-step-inc with no markup change. */
.shop-step {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.5rem 0.45rem;
  cursor: pointer;
}

.shop-step:hover,
.shop-row.sel .shop-step {
  color: var(--gold);
}

.shop-q {
  min-width: 1.8rem;
  text-align: center;
  color: var(--muted);
}

.shop-row.sel .shop-q {
  color: var(--bright);
}

.shop-total {
  color: var(--gold);
  text-align: right;
}

.shop-stock {
  color: var(--muted);
  font-size: 0.84rem;
  text-align: right;
}

.shop-go {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 0.35rem 0.4rem;
  font: inherit;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

.shop-row.sel .shop-go,
.shop-go:hover {
  color: var(--gold);
}

/* Desktop: the action only reads on the focused row. Mobile keeps every
   row tappable (handled in the max-width: 620px block). visibility, not
   display, so the column keeps its width and rows don't jump. */
@media (min-width: 621px) {
  .shop-row:not(.sel) .shop-go {
    visibility: hidden;
  }
}

/* Affordability lives on the row's own total cell now (not on a separate
   deal line, which restated info already shown on the row + textbox). */
.shop-row.unaffordable .shop-total {
  color: var(--red);
}

.shop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.6rem;
}


.shop-close-btn {
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--muted);
  padding: 0.45rem 0.6rem;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.shop-close-btn:hover,
.shop-close-btn.sel {
  color: var(--gold);
}

.shop-close-btn.sel {
  background: var(--panel-2);
  border-left-color: var(--gold);
}

.shop-hint {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

@media (max-width: 620px) {
  .interaction-dock {
    max-height: 58vh;
  }
  .shop-colhead {
    display: none;
  }
  /* One tight card per item: name, then a single action line
     (qty · total · Buy), then a small stock note. */
  .shop-row {
    grid-template-columns: auto 1fr auto;
    grid-auto-rows: min-content;
    gap: 0.35rem 0.7rem;
    padding: 0.6rem 0.7rem;
    min-height: 0;
  }
  .shop-item {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    margin-bottom: 0.1rem;
  }
  .shop-name {
    color: var(--bright);
    white-space: normal;
  }
  .shop-qty {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .shop-total {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: center;
  }
  .shop-go {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }
  .shop-stock {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
  }
  .shop-stock::before {
    content: "stock ";
    color: var(--muted);
  }
  .shop-mode-attack .shop-stock::before,
  .shop-mode-snoop .shop-stock::before,
  .shop-mode-cast .shop-stock::before,
  .shop-mode-take .shop-stock::before,
  .shop-mode-craft .shop-stock::before,
  .shop-mode-actions .shop-stock::before {
    content: "";
  }
  .shop-total,
  .shop-stock {
    font-size: 0.88rem;
  }
  /* Touch has no arrow keys: the keyboard hint is noise. */
  .shop-hint,
  .choice-hint {
    display: none;
  }
  .shop-actions {
    margin-top: 0.5rem;
  }
  .shop-close-btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
  }
  .shop-close-btn.sel {
    border-color: var(--gold);
  }
  /* Touch targets: triangles, qty, rows. */
  .shop-step {
    font-size: 1.05rem;
    padding: 0.7rem 0.85rem;
  }
  .shop-q {
    min-width: 2.4rem;
    font-size: 1rem;
  }
  /* On touch the action needs to read as a tappable button. */
  .shop-go {
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    padding: 0.55rem 1.1rem;
    color: var(--text);
  }
  .shop-row.sel .shop-go {
    border-color: var(--gold);
  }
  .choice-row {
    min-height: 2.9rem;
    padding: 0.55rem 0.7rem;
  }
}

.quickbar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.05rem;
  scrollbar-width: thin;
}

.quickbar button {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  min-height: 2.25rem;
  padding: 0 0.65rem;
  border-radius: 0;
}

.quickbar button:active,
.quickbar button:hover {
  background: var(--panel-2);
  border-color: var(--amber);
  color: var(--bright);
}

.command-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  padding: 0.4rem;
}

.look-btn {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  line-height: 1;
}

.look-btn:hover,
.look-btn:active {
  background: var(--panel);
  border-color: var(--amber);
}

.command-input {
  min-width: 0;
  width: 100%;
  height: 2.1rem;
  border: 1px solid var(--line-strong);
  background: #080604;
  color: var(--bright);
  border-radius: 0;
  padding: 0 0.55rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.command-input:focus {
  border-color: var(--amber);
}

.send-button {
  min-width: 4.25rem;
  height: 2.1rem;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--bright);
  font-family: var(--font-display);
  font-size: 0.95rem;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.send-button:active,
.send-button:hover {
  background: var(--panel);
  border-color: var(--amber);
  color: var(--amber);
}

/* ── Lobby panels ───────────────────────────────────────────────────────────── */

.lobby-panel {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #080604;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  z-index: 10;
}

.client-shell[data-view="login"] #loginPanel,
.client-shell[data-view="character_select"] #charSelectPanel {
  display: flex;
}

.lobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 22rem;
}

.lobby-card--wide {
  max-width: 36rem;
}

.lobby-heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--bright);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.lobby-tagline {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.lobby-status {
  display: none;
  position: absolute;
  left: 50%;
  bottom: clamp(0.75rem, 3vh, 1.4rem);
  transform: translateX(-50%);
  z-index: 20;
  width: min(36rem, calc(100% - 2rem));
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.client-shell[data-view="login"] .lobby-status,
.client-shell[data-view="character_select"] .lobby-status {
  display: block;
}

.lobby-status strong {
  color: var(--amber);
  font-weight: 700;
}

.lobby-status span {
  display: inline;
}

.lobby-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.lobby-input {
  width: 100%;
  height: 2.4rem;
  border: 1px solid var(--line-strong);
  background: #080604;
  color: var(--bright);
  border-radius: 0;
  padding: 0 0.65rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

.lobby-input:focus {
  border-color: var(--amber);
}

.lobby-tabs {
  display: flex;
  width: 100%;
  border: 1px solid var(--line-strong);
}

.lobby-tab {
  flex: 1;
  height: 2.4rem;
  border: none;
  border-right: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lobby-tab:last-child {
  border-right: none;
}

.lobby-tab:hover {
  color: var(--amber);
}

.lobby-tab--active {
  background: var(--panel-2);
  color: var(--amber);
}

.lobby-hint {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.lobby-btn {
  height: 2.4rem;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--bright);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lobby-btn:hover,
.lobby-btn:active {
  background: var(--panel);
  border-color: var(--amber);
  color: var(--amber);
}

.lobby-field {
  position: relative;
  width: 100%;
}

.lobby-field .lobby-input {
  padding-right: 3.6rem;
}

.lobby-reveal {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 0.7rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.lobby-reveal:hover {
  color: var(--amber);
}

.lobby-error {
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--red);
  text-align: center;
  margin: 0;
}

.lobby-link {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem;
  text-decoration: underline;
}

.lobby-link:hover {
  color: var(--text);
}

/* ── Character tiles ────────────────────────────────────────────────────────── */

.char-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.char-tile {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  padding: 1.1rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  min-height: 7rem;
}

.char-tile-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--bright);
  text-align: center;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.2rem 0;
  word-break: break-word;
}

.char-tile-name:hover {
  color: var(--amber);
}

.char-tile--empty .char-tile-name {
  font-style: italic;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.char-tile--empty .char-tile-name:hover {
  color: var(--text);
}

.char-tile-actions {
  display: flex;
  gap: 0.3rem;
  width: 100%;
}

.char-tile-actions button {
  flex: 1;
  height: 1.75rem;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  border-radius: 0;
  cursor: pointer;
}

.char-tile-actions button:hover {
  border-color: var(--amber);
  color: var(--text);
}

.char-tile-actions button.delete-confirm {
  color: var(--red);
  border-color: var(--red);
}

.char-tile-confirm {
  font-size: 0.82rem;
  color: var(--text);
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0;
}

.char-tile-input {
  width: 100%;
  height: 2rem;
  border: 1px solid var(--amber);
  background: #080604;
  color: var(--bright);
  border-radius: 0;
  padding: 0 0.45rem;
  outline: none;
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

/* ── HUD layout: buttons on right ──────────────────────────────────────────── */

.panel-btn {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.85rem;
  height: 1.85rem;
  padding: 0 0.55rem;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.panel-btn:hover,
.panel-btn:active {
  background: var(--panel-2);
  border-color: var(--amber);
  color: var(--bright);
}

.panel-btn.is-active {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--panel-2);
}

.chat-dot {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 4px rgba(217, 165, 73, 0.6);
  pointer-events: none;
}

.chat-dot.chat-dot--tell {
  background: var(--bright);
}

/* ── Input mode button ──────────────────────────────────────────────────────── */

.mode-btn {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.mode-btn:hover,
.mode-btn:active {
  background: var(--panel);
  border-color: var(--amber);
  color: var(--amber);
}

.mode-btn.mode-say  { color: var(--text);  border-color: var(--amber); }
.mode-btn.mode-yell { color: var(--bright); border-color: var(--amber); }
.mode-btn.mode-tell { color: var(--blue);  border-color: var(--blue);  }

/* ── Content row (terminal + desktop sidebar) ───────────────────────────────── */

.content-row {
  display: flex;
  flex-direction: row;
  min-height: 0;
}

.output-wrap {
  flex: 1;
  min-width: 0;
}

/* ── Desktop side panel ─────────────────────────────────────────────────────── */

.side-panel-resize {
  width: 8px;
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  background: transparent;
}

.side-panel-resize[hidden] {
  display: none;
}

.side-panel-resize::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line-strong);
  transition: background 0.15s;
}

.side-panel-resize:hover::after,
.side-panel-resize.is-dragging::after {
  background: var(--amber);
  width: 2px;
}

/* Sidebar area: hosts one or more discrete column instances side by side.
   Each column is its own bordered .side-panel-col; empty ones are removed. */
.side-panel-area {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 60vw;
}

.side-panel-area[hidden] {
  display: none;
}

.side-panel-col {
  display: flex;
  flex-direction: column;
  width: var(--side-panel-w, 260px);
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-left: none;
  background: var(--panel);
  overflow: hidden;
}

.side-panel-col > .panel-card {
  flex: 0 0 auto;
  min-height: 80px;
  max-height: 100%;
}

/* ── Mobile expand-down panel ───────────────────────────────────────────────── */

.mobile-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--mob-panel-h, 200px);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  min-height: 0;
}

.mobile-panel[hidden] {
  display: none;
}

.mobile-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.mobile-panel-drag {
  height: 14px;
  background: var(--panel-2);
  border-top: 1px solid var(--line-strong);
  cursor: ns-resize;
  touch-action: none; /* hand touch handling entirely to JS */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-panel-drag::after {
  content: "";
  width: 2rem;
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
}

.mobile-panel-drag:hover::after,
.mobile-panel-drag.is-dragging::after {
  background: var(--amber);
}

/* ── Panel cards (shared desktop/mobile) ────────────────────────────────────── */

.panel-card {
  display: flex;
  flex-direction: column;
  min-height: 80px;
  overflow: hidden;
  flex-shrink: 0;
}

.panel-card-header {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.6rem 0.3rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  flex-shrink: 0;
}

.panel-card-body {
  padding: 0.5rem 0.6rem;
  overflow-y: auto;
  font-size: 0.88rem;
  flex: 1;
  min-height: 0;
}

/* Height resize handle at bottom of each desktop panel card */
.panel-card-resize {
  height: 6px;
  cursor: ns-resize;
  flex-shrink: 0;
  position: relative;
  background: transparent;
}

.panel-card-resize::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--line-strong);
  transition: background 0.15s;
}

.panel-card-resize:hover::after,
.panel-card-resize.is-dragging::after {
  background: var(--amber);
  height: 2px;
}

/* ── Nearby panel entities ──────────────────────────────────────────────────── */

.nearby-entity {
  margin-bottom: 0.5rem;
}

.nearby-entity:last-child {
  margin-bottom: 0;
}

.nearby-name {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.nearby-name.type-player { color: #78b8d0; }
.nearby-name.type-enemy  { color: #d05a4a; }
.nearby-name.type-npc    { color: var(--muted); }

/* Criminal overlay: outranks the base type colour for any flagged entity. */
.nearby-name.criminal { color: #e69a3a; }
.nearby-name.criminal::before {
  content: "✦ ";
  font-size: 0.7rem;
  opacity: 0.85;
}

.nearby-name.poisoned::after {
  content: " ☠";
  font-size: 0.7rem;
  color: #8fc66a;
  opacity: 0.9;
}

/* Linger ghost: body in the room, no session driving it. Still a valid
   target for snoop/steal/attack — render dim to signal "not minding the
   shop". */
.nearby-name.idle { opacity: 0.55; font-style: italic; }

.nearby-name.clickable {
  cursor: pointer;
  text-decoration: underline dotted;
}

.nearby-name.clickable:hover {
  color: var(--bright);
}

.nearby-bar-wrap {
  height: 4px;
  background: #0a0804;
  border: 1px solid var(--line);
  margin-top: 0.2rem;
  overflow: hidden;
}

.nearby-bar {
  height: 100%;
  background: rgba(200, 120, 96, 0.5);
  transition: width 0.4s ease;
}

/* ── Poisoned health bars (player, enemy, nearby) ───────────────────────────── */
#hpFill.poisoned,
#enemyFill.poisoned {
  background: rgba(120, 190, 70, 0.5);
}

.nearby-bar.poisoned {
  background: rgba(120, 190, 70, 0.6);
}

/* ── Stats panel ────────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.6rem;
}

.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0.3rem 0.2rem 0.25rem;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: 1rem;
  color: var(--bright);
  font-family: var(--font-display);
}

.stats-vitals {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.stats-vital-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.stats-vital-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--muted);
  width: 2.8rem;
  flex-shrink: 0;
}

.stats-vital-bar {
  flex: 1;
  height: 10px;
  background: #0a0804;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.stats-vital-fill {
  height: 100%;
  transition: width 0.4s ease;
}

.stats-vital-fill.hp   { background: rgba(200, 120, 96, 0.5); }
.stats-vital-fill.mana { background: rgba(120, 152, 184, 0.4); }
.stats-vital-fill.stam { background: rgba(120, 152, 96, 0.4); }

.stats-vital-num {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  width: 3.5rem;
  text-align: right;
}

.stats-total {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
}

.stats-effects {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stats-effects-header {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  margin-bottom: 0.1rem;
}

.stats-effect-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border-left: 2px solid transparent;
}

.stats-effect-row.buff {
  border-left-color: rgba(120, 184, 120, 0.6);
  background: rgba(120, 184, 120, 0.05);
}

.stats-effect-row.affliction {
  border-left-color: rgba(200, 96, 96, 0.6);
  background: rgba(200, 96, 96, 0.05);
}

.stats-effect-icon {
  font-family: var(--font-display);
  font-size: 0.9rem;
  width: 1rem;
  text-align: center;
}

.stats-effect-row.buff .stats-effect-icon { color: #8fc78f; }
.stats-effect-row.affliction .stats-effect-icon { color: #e0604f; }

.stats-effect-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-effect-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.stats-effect-row.expired {
  opacity: 0.45;
}

/* ── Skills panel ───────────────────────────────────────────────────────────── */

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.skill-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.skill-name {
  font-size: 0.8rem;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-value {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  width: 2.8rem;
  text-align: right;
  flex-shrink: 0;
}

.skill-lock {
  font-size: 0.95rem;
  width: 1.4rem;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.skill-lock.raise  { color: var(--green); }
.skill-lock.lower  { color: var(--red); }
.skill-lock.locked { color: var(--muted); }

.skill-lock.clickable {
  cursor: pointer;
  border-radius: 2px;
  padding: 0.05rem 0.1rem;
}

.skill-lock.clickable:hover {
  background: var(--panel-2);
}

.skills-total {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
  margin-top: 0.4rem;
  border-top: 1px solid var(--line);
  padding-top: 0.3rem;
}

/* ── Paperdoll panel ───────────────────────────────────────────────────────── */

.paperdoll-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4rem;
  margin-bottom: 0.45rem;
}

.paperdoll-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--bright);
}

.paperdoll-title {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.paperdoll-inspect-tag {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.paperdoll-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.paperdoll-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.2rem;
  font-size: 0.8rem;
}

.paperdoll-slot {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.paperdoll-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bright);
}

.paperdoll-row.empty .paperdoll-item {
  color: var(--muted);
  font-style: italic;
}

.paperdoll-cond {
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 3rem;
  text-align: right;
}

.paperdoll-row.broken {
  color: #d05a4a;
}

.paperdoll-row.broken .paperdoll-item,
.paperdoll-row.broken .paperdoll-cond {
  color: #d05a4a;
}

.paperdoll-row.clickable {
  cursor: pointer;
}

.paperdoll-row.clickable:hover {
  background: var(--panel-2);
}

/* ── Inventory panel ───────────────────────────────────────────────────────── */

.inventory-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.45rem;
}

.inventory-encumbrance {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.68rem;
}

.inventory-encumbrance.burdened { color: var(--amber); }
.inventory-encumbrance.overloaded { color: var(--red); }

.inventory-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.inventory-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
}

.inventory-row.clickable {
  cursor: pointer;
}

.inventory-row.clickable:hover {
  background: var(--panel-2);
}

.inventory-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Chat panel ─────────────────────────────────────────────────────────────── */

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.chat-entry {
  font-size: 0.82rem;
  line-height: 1.35;
}

.chat-entry .chat-who {
  font-family: var(--font-display);
}

.chat-entry.chat-say  .chat-who { color: var(--text); }
.chat-entry.chat-yell .chat-who { color: var(--bright); }
.chat-entry.chat-tell .chat-who { color: #78b8d0; }

.chat-entry .chat-body { color: var(--muted); }

/* ── Map panel canvas wrap ──────────────────────────────────────────────────── */

.map-panel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  line-height: 0;
  padding: 0.25rem;
  overflow: hidden;
}

#mapCanvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: auto;
  height: auto;
  max-width: 100%;
}

.map-tooltip {
  position: fixed;
  display: none;
  background: rgba(8, 6, 4, 0.92);
  color: var(--text);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-strong);
  pointer-events: none;
  white-space: nowrap;
  z-index: 300;
}

/* ── Quit modal ─────────────────────────────────────────────────────────────── */

.quit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 6, 4, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.quit-modal[hidden] {
  display: none;
}

.quit-modal-box {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  padding: 1.5rem;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quit-modal-msg {
  margin: 0;
  color: var(--bright);
  font-size: 1rem;
}

.quit-modal-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.quit-modal-skip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}

.quit-modal-skip input[type="checkbox"] {
  width: auto;
  cursor: pointer;
}

.quit-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.quit-modal-actions button {
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 0 !important;
  -webkit-appearance: none;
}

.quit-modal-actions button:hover {
  color: var(--bright);
  border-color: var(--amber);
}


@media (max-width: 760px) {
  .client-shell {
    gap: 0.4rem;
    padding:
      max(0.35rem, env(safe-area-inset-top))
      max(0.35rem, env(safe-area-inset-right))
      max(0.35rem, env(safe-area-inset-bottom))
      max(0.35rem, env(safe-area-inset-left));
  }

  /* Mobile HUD: brand+controls on row 1, nav buttons full-width on row 2 */
  .hud {
    gap: 0.2rem 0.3rem;
    padding: 0.35rem 0.5rem;
  }

  /* On mobile brand stays in row 1 col 1 */
  .brand {
    grid-row: 1;
    gap: 0.1rem;
  }

  .hud-right {
    grid-row: 1;
    gap: 0.3rem;
  }

  /* Nav spans full width on row 2, left-aligned */
  .hud-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .brand-name {
    font-size: 0.95rem;
  }

  .location {
    font-size: 0.82rem;
  }

  .panel-btn {
    font-size: 0.8rem;
    height: 1.75rem;
    padding: 0 0.45rem;
  }

  .char-btn {
    font-size: 0.82rem;
    height: 1.75rem;
  }

  .quit-btn {
    font-size: 0.75rem;
    height: 1.75rem;
    padding: 0 0.45rem;
  }

  /* Hide desktop sidebar on mobile */
  .side-panel-area,
  .side-panel-resize {
    display: none !important;
  }

  /* Mobile panel height is controlled by the bottom drag handle, not per-card */
  .panel-card-resize {
    display: none;
  }

  .vitals-row {
    gap: 0.3rem;
  }

  .vital {
    height: 1.85rem;
  }

  .vital-text {
    font-size: 0.75rem;
  }

  .enemy-vital .vital-text {
    font-size: 0.75rem;
  }

  .game-output {
    padding: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.36;
  }

  .command-bar {
    min-height: 2.85rem;
    padding: 0.35rem;
  }

  .look-btn,
  .mode-btn {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.9rem;
  }

  .send-button {
    min-width: 3.75rem;
  }

  .lobby-heading {
    font-size: 1.3rem;
  }

  .char-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .char-tile {
    padding: 0.85rem 0.5rem 0.7rem;
    min-height: 6rem;
    gap: 0.5rem;
  }

  .char-tile-name {
    font-size: 0.9rem;
  }

  .char-tile-actions button {
    font-size: 0.7rem;
    height: 1.6rem;
  }
}