/* ============================================================
   BEZON GAME - POLISHED WARM FARM UI THEME
   File: assets/ui-theme.css
   Style: Warm, hand-made coffee farm aesthetic (cream paper,
          dark ink outlines, wood browns, coffee-cherry red,
          leaf green, gold accents, and rounded sticker buttons)

   TABLE OF CONTENTS:
   1. Design Tokens (:root CSS Custom Properties)
   2. Neutralized Glows & Ambient Canvas Container
   3. Header & Status Chip (header.dktHead, #conn)
   4. HUD Bottom Bar (.hud, .stat, .me, .shopBtn, .pick, .tPick)
   5. Floating Quick Dock (.floatingDock, .dockBtn)
   6. Side Panel & Tabs (.side, .sideTabs, .pane, .panel, .qrow)
   7. Side Panel Chat System (.chatBox, #chatLog, .chatForm, .quick)
   8. Dialogs, Modals & Cards (.mapCard, .shopCard, .bagCard, .giftCard, .strategyCard, headers, close buttons)
   9. Forms & Form Controls (.lg, inputs, .mgHit, .lgErr)
   10. Toasts & Top Banners (#mkBar, .evAnn, #conn.connOv, .toast)
   11. Motion & Accessibility (@media prefers-reduced-motion)
   12. Responsive & Mobile Layout (body.mob, max-width: 900px)
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   Warm, tactile farm palette inspired by coffee harvests in Đắk Lắk.
   All tokens are scoped with the --bz- prefix.
   ============================================================ */

:root {
  /* Warm cream paper cards */
  --bz-cream: #fbf3e2;
  --bz-cream-light: #fff9ee;
  --bz-cream-surface: #fffdf8;
  --bz-cream-sand: #efe0bf;

  /* Dark coffee-brown ink outlines & text */
  --bz-ink: #2a1a0e;
  --bz-ink-muted: #6b4f3b; /* WCAG AA 4.5:1 compliant on --bz-cream */
  --bz-ink-line: rgba(42, 26, 14, 0.16);

  /* Warm wood browns */
  --bz-wood: #6b3f1f;
  --bz-wood-dark: #3a2010;
  --bz-wood-deep: #221208;

  /* Ripe coffee-cherry red */
  --bz-cherry: #c8322a;
  --bz-cherry-hover: #d83a31;
  --bz-cherry-dark: #8a1f19;

  /* Natural leaf & plant greens */
  --bz-leaf: #1c3627;
  --bz-leaf-dark: #13261b;
  --bz-leaf-light: #27503a;
  --bz-leaf-accent: #3f8a3a;

  /* Harvest gold accents */
  --bz-gold: #f4b73a;
  --bz-gold-hover: #ffc453;
  --bz-gold-dark: #925402; /* High contrast text on cream */
  --bz-gold-light: #ffd77a;

  /* Typography */
  --bz-font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --bz-font-body:
    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii for friendly rounded "sticker" feel */
  --bz-radius-sm: 8px;
  --bz-radius-md: 12px;
  --bz-radius-lg: 16px;
  --bz-radius-pill: 999px;

  /* Solid drop edges (no blurry neon glows) */
  --bz-shadow-sticker-sm: 0 2px 0 var(--bz-ink);
  --bz-shadow-sticker-md: 0 3px 0 var(--bz-ink);
  --bz-shadow-sticker-lg: 0 4px 0 var(--bz-ink);
  --bz-shadow-card: 0 12px 32px rgba(42, 26, 14, 0.32), 0 3px 0 var(--bz-ink);

  /* Overrides for legacy glow tokens from modern-ui.css to prevent cold tints */
  --primary-glow: transparent;
  --cherry-glow: transparent;
  --emerald-glow: transparent;
  --hud-bg: var(--bz-leaf);
  --chip-online: var(--bz-leaf-accent);
}

/* ============================================================
   2. NEUTRALIZED GLOWS & AMBIENT CANVAS CONTAINER
   Geometry is preserved: no change to width, height, or position.
   ============================================================ */

/* Calms ambient glow on .canvasBox while preserving layout geometry */
.canvasBox {
  border-radius: var(--bz-radius-lg);
  box-shadow:
    0 0 0 3px var(--bz-ink),
    0 0 0 5px var(--bz-gold),
    0 8px 24px rgba(42, 26, 14, 0.4) !important; /* Overrides modern-ui.css neon yellow glow */
  transition: none !important; /* Disables hover enlargement glow */
}

.canvasBox:hover {
  box-shadow:
    0 0 0 3px var(--bz-ink),
    0 0 0 5px var(--bz-gold),
    0 8px 24px rgba(42, 26, 14, 0.4) !important; /* Preserves calm shadow on hover */
}

/* ============================================================
   3. HEADER & STATUS CHIP
   Restores warm farm scenery banner and calm connection badge.
   ============================================================ */

/* Header: remove modern-ui cold blue glass gradient so natural SVG scene shows */
header.dktHead {
  border-radius: var(--bz-radius-lg) !important; /* Overrides modern-ui.css */
  border: 3px solid var(--bz-ink) !important; /* Overrides modern-ui.css 2px rgba border */
  box-shadow: 0 4px 0 var(--bz-wood-dark) !important; /* Overrides modern-ui.css glass shadow */
  backdrop-filter: none !important; /* Disables modern-ui.css blur */
  background: transparent !important; /* Overrides modern-ui.css blue gradient to reveal game scene */
}

/* Connection status chip: calm, readable dark badge with warm gold border */
.chip#conn,
#conn {
  background: var(
    --bz-ink
  ) !important; /* Overrides modern-ui.css green glass */
  color: #fff8ea !important; /* Overrides modern-ui.css */
  border: 2px solid var(--bz-gold) !important; /* Overrides modern-ui.css 1.5px border */
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Solid drop edge instead of neon shadow */
  padding: 5px 14px !important; /* Overrides modern-ui.css */
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-weight: 700 !important; /* Overrides modern-ui.css */
  border-radius: var(--bz-radius-pill) !important; /* Overrides modern-ui.css */
}

/* Status indicator dot: clean natural green dot, no neon pulsing */
.chip#conn i,
#conn i {
  background: var(
    --bz-leaf-accent
  ) !important; /* Overrides modern-ui.css neon emerald */
  box-shadow: none !important; /* Removes neon glow */
  animation: none !important; /* Disables modern-ui.css pulseNeon animation */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   4. HUD BOTTOM BAR
   Warm wood container, cream card stats, solid sticker buttons.
   ============================================================ */

/* HUD container: rich wood finish with solid ink border */
.hud {
  background: linear-gradient(
    180deg,
    #7a4a24 0%,
    #55311a 100%
  ) !important; /* Overrides modern-ui.css dark green gradient */
  border: 3px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px border */
  border-radius: var(--bz-radius-lg) !important; /* Overrides modern-ui.css */
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.25),
    0 4px 0 var(--bz-wood-dark) !important; /* Overrides modern-ui.css blur shadow */
  padding: 6px 10px !important; /* Overrides modern-ui.css padding */
  gap: 8px !important; /* Overrides modern-ui.css gap */
  display: flex !important; /* Overrides modern-ui.css */
  align-items: center;
}

/* HUD Stat blocks: clean cream paper cards */
.hud .stat {
  background: var(
    --bz-cream
  ) !important; /* Overrides modern-ui.css rgba(255,255,255,0.08) */
  border: 2px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px rgba border */
  border-radius: var(--bz-radius-md) !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Solid drop shadow */
  padding: 4px 10px !important; /* Overrides modern-ui.css */
  backdrop-filter: none !important; /* Disables modern-ui.css blur */
  transition: none !important; /* Disables modern-ui.css hover jump */
}

.hud .stat:hover {
  background: #fff !important; /* Overrides modern-ui.css */
  transform: none !important; /* Disables modern-ui.css translateY(-2px) */
  border-color: var(--bz-ink) !important; /* Overrides modern-ui.css */
}

.hud .stat b {
  font-family: var(--bz-font-display) !important;
  color: var(--bz-ink) !important;
  text-shadow: none !important; /* Removes modern-ui.css glow text-shadow */
}

.hud .stat small {
  font-family: var(--bz-font-body) !important;
  color: var(--bz-ink-muted) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Cherry stat: coffee cherry red label, no neon glow */
.hud .stat.cherry {
  border-color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Overrides modern-ui.css inset glow */
}

.hud .stat.cherry b {
  color: var(--bz-cherry) !important; /* Overrides modern-ui.css neon pink */
  text-shadow: none !important; /* Overrides modern-ui.css text-shadow glow */
}

/* Gold stat: warm amber gold label, readable contrast, no neon glow */
.hud .stat.gold {
  border-color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Overrides modern-ui.css inset glow */
}

.hud .stat.gold b {
  color: var(
    --bz-gold-dark
  ) !important; /* Overrides modern-ui.css neon yellow */
  text-shadow: none !important; /* Overrides modern-ui.css text-shadow glow */
}

/* Player badge in HUD */
.hud .me {
  background: var(
    --bz-cream
  ) !important; /* Overrides modern-ui.css rgba(255,255,255,0.08) */
  border: 2px solid var(--bz-ink) !important; /* Overrides modern-ui.css */
  border-radius: var(--bz-radius-md) !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  padding: 4px 8px 4px 10px !important; /* Overrides modern-ui.css */
  color: var(--bz-ink) !important;
}

.hud .me b {
  color: var(--bz-ink) !important; /* Overrides modern-ui.css white */
  font-family: var(--bz-font-display) !important;
}

.hud .me small {
  color: var(--bz-wood) !important; /* Overrides modern-ui.css yellow */
  font-weight: 700 !important;
}

.hud .me button.small {
  background: var(--bz-leaf) !important; /* Overrides modern-ui.css gradient */
  color: #fff8ea !important; /* Overrides modern-ui.css */
  border: 1.5px solid var(--bz-ink) !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Overrides modern-ui.css */
  border-radius: var(--bz-radius-pill) !important;
  font-family: var(--bz-font-body) !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.hud .me button.small:hover {
  background: var(--bz-leaf-light) !important; /* Overrides modern-ui.css */
  transform: translateY(
    -1px
  ) !important; /* Overrides modern-ui.css scale(1.05) */
}

.hud .me button.small:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Action buttons in HUD (Shop, Bag, Map, Sound): sticker buttons with solid drop edge */
.hud .shopBtn {
  background: var(
    --bz-gold
  ) !important; /* Overrides modern-ui.css amber gradient */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  font-family: var(--bz-font-display) !important;
  font-weight: 800 !important; /* Overrides modern-ui.css */
  border: 2px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px border */
  border-radius: var(--bz-radius-md) !important; /* Overrides modern-ui.css */
  box-shadow: 0 3px 0 var(--bz-ink) !important; /* Overrides modern-ui.css blur shadow */
  text-shadow: none !important;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.hud .shopBtn:hover {
  background: var(--bz-gold-hover) !important;
  transform: translateY(
    -1px
  ) !important; /* Overrides modern-ui.css translateY(-2px) */
  box-shadow: 0 4px 0 var(--bz-ink) !important; /* Overrides modern-ui.css */
}

.hud .shopBtn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important; /* Overrides modern-ui.css */
}

/* Grand Harvest Button (Pick button): iconic coffee-cherry red sticker button */
.hud .pick,
.tPick {
  background: var(
    --bz-cherry
  ) !important; /* Overrides modern-ui.css red-to-dark gradient */
  color: #fff !important;
  font-family: var(--bz-font-display) !important;
  font-weight: 800 !important;
  border: 2.5px solid var(--bz-ink) !important; /* Overrides modern-ui.css 2px solid #fff */
  border-radius: var(--bz-radius-md) !important;
  box-shadow: 0 4px 0 var(--bz-ink) !important; /* Overrides modern-ui.css neon glowing box-shadow */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.hud .pick:hover,
.tPick:hover {
  background: var(--bz-cherry-hover) !important;
  transform: translateY(
    -1px
  ) !important; /* Overrides modern-ui.css scale(1.04) */
  box-shadow: 0 5px 0 var(--bz-ink) !important; /* Overrides modern-ui.css glowing box-shadow */
}

.hud .pick:active,
.tPick:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Overrides modern-ui.css */
}

/* ============================================================
   5. FLOATING QUICK DOCK
   Warm cream toolbar, sticker buttons, no neon blue, no pulsing.
   ============================================================ */

/* Floating dock container: warm cream paper bar */
.floatingDock {
  background: var(
    --bz-cream
  ) !important; /* Overrides modern-ui.css translucent dark green */
  border: 2.5px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px border */
  border-radius: var(--bz-radius-lg) !important;
  box-shadow: 0 4px 0 var(--bz-wood-dark) !important; /* Solid drop shadow */
  backdrop-filter: none !important; /* Disables modern-ui.css blur */
}

/* Standard dock button: sticker button with solid drop edge */
.dockBtn {
  background: #fff !important; /* Overrides modern-ui.css rgba(255,255,255,0.12) */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css white */
  border: 2px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px rgba border */
  border-radius: 10px !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Solid drop edge */
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.dockBtn:hover {
  background: var(
    --bz-cream-light
  ) !important; /* Overrides modern-ui.css translucent yellow */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  border-color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  transform: translateY(
    -1px
  ) !important; /* Overrides modern-ui.css translateY(-2px) */
  box-shadow: 0 3px 0 var(--bz-ink) !important; /* Overrides modern-ui.css glowing shadow */
}

.dockBtn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Giftcode button: coffee-cherry red sticker, NO infinite pulsing */
.dockBtn.giftBtn {
  background: var(
    --bz-cherry
  ) !important; /* Overrides modern-ui.css magenta gradient */
  color: #fff !important;
  border-color: var(
    --bz-ink
  ) !important; /* Overrides modern-ui.css pink border */
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  animation: none !important; /* Disables modern-ui.css pulseGift infinite scaling/glow */
}

.dockBtn.giftBtn:hover {
  background: var(--bz-cherry-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
}

.dockBtn.giftBtn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Strategy/Tips button: warm harvest gold sticker, NO neon blue */
.dockBtn.helpBtn {
  background: var(
    --bz-gold
  ) !important; /* Overrides modern-ui.css neon blue gradient */
  color: var(--bz-ink) !important;
  border-color: var(
    --bz-ink
  ) !important; /* Overrides modern-ui.css light blue border */
  box-shadow: 0 2px 0 var(--bz-ink) !important;
}

.dockBtn.helpBtn:hover {
  background: var(--bz-gold-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
}

.dockBtn.helpBtn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Dev Tools button: warm leaf green sticker, overrides inline neon blue style */
#dockDevBtn,
.dockBtn#dockDevBtn {
  background: var(
    --bz-leaf
  ) !important; /* Overrides modern-enhancements.js inline blue gradient */
  color: #fff8ea !important;
  border-color: var(
    --bz-ink
  ) !important; /* Overrides modern-enhancements.js inline border */
  box-shadow: 0 2px 0 var(--bz-ink) !important;
}

#dockDevBtn:hover,
.dockBtn#dockDevBtn:hover {
  background: var(--bz-leaf-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
}

#dockDevBtn:active,
.dockBtn#dockDevBtn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* ============================================================
   6. SIDE PANEL & TABS
   Warm cream card, dark wood tab header, clear hierarchy.
   ============================================================ */

/* Side panel shell: solid cream card with coffee-brown ink outlines */
.side {
  background: var(
    --bz-cream
  ) !important; /* Overrides modern-ui.css dark green gradient */
  border: 3px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px border */
  border-radius: var(--bz-radius-lg) !important; /* Overrides modern-ui.css */
  box-shadow: 0 4px 0 var(--bz-wood-dark) !important; /* Overrides modern-ui.css dark glow */
  color: var(--bz-ink) !important;
}

/* Tabs container: wood brown bar */
.sideTabs {
  background: linear-gradient(
    180deg,
    #7a4a24 0%,
    #55311a 100%
  ) !important; /* Overrides modern-ui.css translucent dark */
  border-bottom: 2.5px solid var(--bz-ink) !important; /* Overrides modern-ui.css */
  padding: 6px 8px !important; /* Overrides modern-ui.css */
  gap: 5px !important;
}

/* Tab button: clean cream sticker */
.sideTabs button {
  background: var(
    --bz-cream
  ) !important; /* Overrides modern-ui.css rgba(255,255,255,0.06) */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css #cbd5e1 */
  border: 1.5px solid var(--bz-ink) !important; /* Overrides modern-ui.css 1px rgba border */
  border-radius: 8px !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-weight: 700 !important; /* Overrides modern-ui.css */
  font-size: 12.5px !important;
  padding: 5px 8px !important; /* Overrides modern-ui.css */
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.sideTabs button:hover {
  background: #fff !important; /* Overrides modern-ui.css */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  transform: translateY(-1px) !important; /* Overrides modern-ui.css */
}

.sideTabs button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Active tab button: warm harvest gold sticker */
.sideTabs button[aria-selected="true"] {
  background: var(
    --bz-gold
  ) !important; /* Overrides modern-ui.css orange gradient */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  border-color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 var(--bz-ink) !important; /* Overrides modern-ui.css glowing box shadow */
  font-weight: 800 !important;
}

/* Mobile close drawer button (sideX) */
.sideX {
  background: var(--bz-cherry) !important;
  color: #fff !important;
  border: 1.5px solid var(--bz-ink) !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

/* Panes: ensure ALL panes (including chat) have consistent cream paper styling */
.side .pane {
  background: var(--bz-cream) !important;
  color: var(--bz-ink) !important;
}

/* Panel headings: warm leaf-green sticker banner with high-contrast text */
.pane .panel h2,
.chatBox h2 {
  background: var(
    --bz-leaf
  ) !important; /* Overrides modern-ui.css / game.source.css */
  color: #fff8ea !important;
  border: 2px solid var(--bz-ink) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  font-family: var(--bz-font-display) !important;
  font-size: 16px !important;
  letter-spacing: 0.3px;
  margin: 0 0 10px 0 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
}

.pane .panel h2 small,
.chatBox h2 small {
  color: var(--bz-gold) !important; /* Contrast > 6:1 on leaf green */
  font-family: var(--bz-font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* Quest rows: cream card item with high text contrast (WCAG AA > 4.5:1) */
.qrow {
  background: var(--bz-cream-light) !important; /* Overrides modern-ui.css */
  border: 1.5px solid rgba(42, 26, 14, 0.2) !important; /* Overrides modern-ui.css */
  color: var(--bz-ink) !important;
  border-radius: 10px !important; /* Overrides modern-ui.css */
  box-shadow: 0 1px 0 rgba(42, 26, 14, 0.15) !important;
  padding: 8px 10px 10px !important; /* Overrides modern-ui.css */
  margin-bottom: 6px !important;
}

.qrow:hover {
  background: #fff !important; /* Overrides modern-ui.css */
  border-color: var(--bz-ink) !important;
  transform: translateX(
    2px
  ) !important; /* Overrides modern-ui.css translateX(3px) */
}

/* Quest progress track & fill */
.qrow i {
  background: rgba(42, 26, 14, 0.14) !important; /* Overrides modern-ui.css */
  height: 6px !important; /* Overrides modern-ui.css */
  border-radius: 99px !important;
}

.qrow i:after {
  background: var(--bz-leaf-accent) !important;
  border-radius: 99px !important;
  box-shadow: none !important; /* Removes modern-ui.css gold glow blur */
}

.qrow .qt,
.qrow b {
  color: var(--bz-ink) !important;
  font-weight: 700;
}

.qrow .qd,
.qrow span,
.qrow small {
  color: var(--bz-ink-muted) !important; /* WCAG AA 4.5:1 compliant */
  font-weight: 500;
}

/* Typography contrast for other side panel tabs */
#board li,
#assetList li,
#assetMoney,
#players li,
#npcList li,
#feed li,
.helpTxt,
.helpTxt p {
  color: var(--bz-ink) !important;
}

#board li small,
#players li small,
#npcList li small,
.helpTxt small {
  color: var(--bz-ink-muted) !important; /* WCAG AA 4.5:1 compliant */
}

/* ============================================================
   7. SIDE PANEL CHAT SYSTEM
   Readable cream chat surface, clear badges, comfortable form.
   ============================================================ */

/* Chat log list */
#chatLog {
  background: var(
    --bz-cream-surface
  ) !important; /* Overrides dark/tinted background */
  border: 2px solid var(--bz-ink) !important;
  border-radius: 12px !important;
  color: var(--bz-ink) !important;
  padding: 8px 10px !important;
}

/* Player badge in chat */
#chatLog .who {
  background: var(--bz-ink) !important;
  color: #fff8ea !important;
  border-radius: 999px !important;
  padding: 1px 8px !important;
  font-weight: 700 !important;
}

/* NPC badge in chat */
#chatLog .npc .who {
  background: var(--bz-cream-sand) !important;
  color: var(--bz-wood) !important;
  border: 1px solid var(--bz-ink) !important;
}

/* System message in chat */
#chatLog .sys {
  color: var(--bz-ink-muted) !important; /* WCAG AA 4.5:1 compliant */
  font-style: italic;
}

/* Chat form input (comfortable min 40px hit area) */
.chatForm input#chatIn {
  min-height: 40px !important;
  background: #fff !important;
  color: var(--bz-ink) !important;
  border: 2px solid rgba(42, 26, 14, 0.25) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-family: var(--bz-font-body) !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

.chatForm input#chatIn:focus {
  outline: 2px solid var(--bz-gold) !important;
  outline-offset: 1px !important;
  border-color: var(--bz-ink) !important;
  box-shadow: 0 0 0 3px rgba(244, 183, 58, 0.35) !important;
}

/* Chat send button */
.chatForm button {
  min-height: 40px !important;
  background: var(--bz-gold) !important;
  color: var(--bz-ink) !important;
  border: 2px solid var(--bz-ink) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  font-family: var(--bz-font-display) !important;
  font-weight: 800 !important;
  padding: 0 16px !important;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.chatForm button:hover {
  background: var(--bz-gold-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
}

.chatForm button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Quick chat buttons */
.quick button {
  background: var(--bz-cream-light) !important;
  color: var(--bz-ink) !important;
  border: 1.5px solid rgba(42, 26, 14, 0.25) !important;
  box-shadow: 0 1px 0 rgba(42, 26, 14, 0.2) !important;
  border-radius: var(--bz-radius-pill) !important;
  padding: 4px 10px !important;
  font-family: var(--bz-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.quick button:hover {
  background: #fff !important;
  border-color: var(--bz-ink) !important;
}

.quick button:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* ============================================================
   8. DIALOGS, MODALS & CARDS
   Consistent card styling, one header style, one close button.
   ============================================================ */

/* All dialog card shells share unified cream paper style & radius */
.mapCard,
.shopCard,
.bagCard,
.giftCard,
.strategyCard,
.chuaCard,
.histCard,
.mgCard,
.card {
  background: var(--bz-cream) !important; /* Overrides modern-ui.css */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css */
  border: 2.5px solid var(--bz-ink) !important; /* Overrides modern-ui.css border: none */
  border-radius: var(
    --bz-radius-lg
  ) !important; /* Overrides modern-ui.css border-radius: 20px */
  box-shadow: var(
    --bz-shadow-card
  ) !important; /* Overrides modern-ui.css neon yellow glow shadow */
  padding: 16px !important; /* Consistent padding across all cards */
  box-sizing: border-box;
}

/* Modal scrim: warm coffee dark backdrop, no cold glassmorphism blur */
.strategyModal,
.giftcodeModal,
.shop,
.mapDlg {
  background: rgba(
    26,
    18,
    12,
    0.72
  ) !important; /* Overrides modern-ui.css cold green glass */
  backdrop-filter: none !important; /* Disables modern-ui.css blur(12px) */
}

/* Unified dialog header bar across all cards */
.mapCard .mh,
.shopHead,
.stratHead,
.giftCard > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 0 10px 0 !important;
  margin: 0 0 12px 0 !important;
  border-bottom: 2px solid var(--bz-ink-line) !important;
  background: transparent !important; /* Overrides modern-ui.css stratHead dark gradient */
}

/* Unified dialog title typography */
.mapCard h3,
.shopHead h3,
.stratHead h3,
.giftCard h3 {
  margin: 0 !important;
  font-family: var(--bz-font-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--bz-ink) !important; /* Overrides modern-ui.css dev/gift colors */
  letter-spacing: -0.3px !important;
}

/* Unified close button across all dialogs */
.mapCard .mh button,
.shopHead button,
#shopClose,
.stratClose,
#stratClose,
#giftClose,
#devClose,
#mapClose,
#mgClose,
#histClose,
#loginClose,
#foodClose,
#chuaClose,
#bagClose,
#wedClose,
#rentClose {
  background: var(
    --bz-cream-light
  ) !important; /* Overrides modern-ui.css translucent white */
  color: var(--bz-ink) !important; /* Overrides modern-ui.css white */
  border: 2px solid var(--bz-ink) !important; /* Overrides modern-ui.css border: none */
  border-radius: var(--bz-radius-pill) !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  padding: 5px 14px !important;
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.mapCard .mh button:hover,
.shopHead button:hover,
#shopClose:hover,
.stratClose:hover,
#stratClose:hover,
#giftClose:hover,
#devClose:hover,
#mapClose:hover,
#mgClose:hover,
#histClose:hover,
#loginClose:hover,
#foodClose:hover,
#chuaClose:hover,
#bagClose:hover,
#wedClose:hover,
#rentClose:hover {
  background: #fff !important;
  color: var(--bz-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
}

.mapCard .mh button:active,
.shopHead button:active,
#shopClose:active,
.stratClose:active,
#stratClose:active,
#giftClose:active,
#devClose:active,
#mapClose:active,
#mgClose:active,
#histClose:active,
#loginClose:active,
#foodClose:active,
#chuaClose:active,
#bagClose:active,
#wedClose:active,
#rentClose:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Strategy guide modal content styling */
.tipBox {
  background: var(--bz-cream-light) !important;
  border: 1.5px solid rgba(42, 26, 14, 0.18) !important;
  border-radius: 12px !important;
  color: var(--bz-ink) !important;
}

.tipBox b {
  color: var(--bz-wood) !important;
  font-size: 14.5px;
}

.tipBox p {
  color: var(--bz-ink) !important;
}

.kbdItem {
  background: #fff !important;
  border: 1.5px solid rgba(42, 26, 14, 0.18) !important;
  border-radius: 8px !important;
  color: var(--bz-ink) !important;
}

.kbdItem kbd {
  background: var(--bz-ink) !important;
  color: var(--bz-gold-light) !important;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
}

/* Giftcode card content styling */
.giftCodesList {
  background: var(--bz-cream-light) !important;
  border: 1.5px dashed var(--bz-cherry) !important;
  border-radius: 10px !important;
  color: var(--bz-ink) !important;
}

.giftCodesList code {
  background: #fde8e7 !important;
  color: var(--bz-cherry) !important;
  border: 1px solid rgba(200, 50, 42, 0.25) !important;
  border-radius: 6px !important;
}

/* Destination buttons inside map dialog */
.mapGrid button {
  background: var(--bz-cream-light) !important;
  color: var(--bz-ink) !important;
  border: 1.5px solid rgba(42, 26, 14, 0.25) !important;
  border-radius: 10px !important; /* Overrides modern-ui.css */
  box-shadow: 0 2px 0 rgba(42, 26, 14, 0.2) !important;
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-weight: 700 !important;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.mapGrid button:hover {
  background: #fff !important;
  border-color: var(--bz-ink) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
}

.mapGrid button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* ============================================================
   9. FORMS & FORM CONTROLS
   Clear focus rings, min 40px hit areas, solid primary button.
   ============================================================ */

/* Form labels (.lg) */
.lg {
  display: block !important;
  font-family: var(--bz-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--bz-ink) !important;
  margin: 10px 0 4px !important;
}

/* Form inputs: min 40px height, warm background, clean typography */
.lg input,
.giftInputRow input,
.chatForm input,
.card input,
.frForm input,
input[type="text"],
input[type="password"] {
  min-height: 40px !important; /* Minimum comfortable hit area */
  height: 40px;
  box-sizing: border-box !important;
  background: #fff !important;
  color: var(--bz-ink) !important;
  border: 2px solid rgba(42, 26, 14, 0.25) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-family: var(--bz-font-body) !important;
  font-size: 15px !important;
}

/* Clear, high-visibility gold & coffee focus rings */
.lg input:focus,
.giftInputRow input:focus,
.chatForm input:focus,
.card input:focus,
.frForm input:focus,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bz-gold) !important;
  outline-offset: 1px !important;
  border-color: var(--bz-ink) !important;
  box-shadow: 0 0 0 3px rgba(244, 183, 58, 0.35) !important;
}

/* Primary hit button (.mgHit, #lgGo): sticker button with solid drop edge */
.mgHit,
#lgGo,
#mgHit {
  min-height: 44px !important; /* Minimum comfortable hit area */
  background: var(--bz-cherry) !important;
  color: #fff !important;
  font-family: var(--bz-font-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  border: 2.5px solid var(--bz-ink) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 0 var(--bz-ink) !important;
  cursor: pointer;
  padding: 8px 16px !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) !important;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
  box-sizing: border-box !important;
}

.mgHit:hover,
#lgGo:hover,
#mgHit:hover {
  background: var(--bz-cherry-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 var(--bz-ink) !important;
}

.mgHit:active,
#lgGo:active,
#mgHit:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
}

/* Form error message (.lgErr) */
.lgErr {
  color: var(--bz-cherry) !important;
  font-family: var(--bz-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-height: 20px !important;
  margin: 6px 0 !important;
  display: block !important;
}

/* Button in gift code input row */
.giftInputRow button {
  min-height: 40px !important;
  background: var(
    --bz-cherry
  ) !important; /* Overrides modern-ui.css gradient */
  color: #fff !important;
  font-family: var(--bz-font-display) !important;
  font-weight: 800 !important;
  border: 2px solid var(--bz-ink) !important; /* Overrides modern-ui.css border: none */
  border-radius: 10px !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important; /* Overrides modern-ui.css glow shadow */
  cursor: pointer;
  padding: 0 18px !important;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease !important;
}

.giftInputRow button:hover {
  background: var(--bz-cherry-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 0 var(--bz-ink) !important;
}

.giftInputRow button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

/* Buttons in Dev modal */
#devModal .dockBtn {
  border: 2px solid var(--bz-ink) !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  color: #fff !important;
}

/* ============================================================
   10. TOASTS & TOP BANNERS
   Calm, readable, no overlap with the floating dock.
   ============================================================ */

/* Top event announcement banner (.evAnn): calm, readable, no pulsing */
.evAnn {
  background: var(--bz-gold) !important; /* Overrides gradient */
  color: var(--bz-ink) !important;
  border: 2px solid var(--bz-ink) !important; /* Overrides white border */
  border-radius: var(--bz-radius-pill) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important; /* Overrides blurry shadow */
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 6px 16px !important;
  animation: none !important; /* Disables game.source.css evPulse infinite bouncing */
}

.evAnn u {
  color: var(--bz-cherry) !important;
  font-weight: 800;
  text-decoration: underline;
}

/* Event banner placement: stays left of the dock on desktop to avoid collision */
body:not(.mob) .evAnn {
  top: 14px !important;
  left: calc((100% - 520px) / 2) !important;
  transform: translateX(-50%) !important;
  max-width: calc(100% - 550px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 6 !important;
}

/* Connection overlay chip: positions below floating dock */
body:not(.mob) #conn.connOv {
  top: 68px !important;
  right: 14px !important;
  z-index: 6 !important;
}

/* Market recommendation bar (#mkBar): placed above HUD, no overlap with dock */
#mkBar {
  background: var(--bz-cream-light) !important;
  color: var(--bz-ink) !important;
  border: 2px solid var(--bz-ink) !important;
  border-radius: var(--bz-radius-pill) !important;
  box-shadow: 0 3px 0 var(--bz-ink) !important;
  font-family: var(--bz-font-body) !important;
  font-weight: 700 !important;
}

#mkBar b {
  color: var(--bz-cherry) !important;
}

#mkBar em {
  color: var(--bz-leaf-accent) !important;
}

#mkBar button {
  background: var(--bz-gold) !important;
  color: var(--bz-ink) !important;
  border: 1.5px solid var(--bz-ink) !important;
  border-radius: var(--bz-radius-pill) !important;
  box-shadow: 0 2px 0 var(--bz-ink) !important;
  padding: 3px 10px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

#mkBar button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 var(--bz-ink) !important;
}

body:not(.mob) #mkBar {
  top: auto !important;
  bottom: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

/* Toast notifications (.toast): calm farm badge */
.toast {
  background: var(--bz-ink) !important;
  color: #fff8ea !important;
  border: 2px solid var(--bz-gold) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(42, 26, 14, 0.4) !important;
  font-family:
    var(--bz-font-display), var(--bz-font-body), sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================================
   11. MOTION & ACCESSIBILITY
   Respects user preference for reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   12. RESPONSIVE & MOBILE LAYOUT
   Preserves mobile drawer, touch controls, and compact dock.
   Layout geometry of .main, .stage, .canvasBox, #cv is unchanged.
   ============================================================ */

@media (max-width: 900px) {
  /* Floating dock on mobile: compact horizontal bar */
  .floatingDock {
    top: 8px !important;
    right: 8px !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    max-width: calc(100% - 16px);
    overflow-x: auto;
  }

  .dockBtn {
    padding: 4px 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  /* Bottom drawer radius on mobile */
  .side {
    border-radius: 16px 16px 0 0 !important;
  }

  /* Cards constrained to viewport on small screens */
  .mapCard,
  .shopCard,
  .bagCard,
  .giftCard,
  .strategyCard {
    max-width: 95vw !important;
    max-height: 90vh !important;
  }

  /* Mobile touch controls: sticker button language */
  .tPick {
    background: var(--bz-cherry) !important;
    color: #fff !important;
    border: 2.5px solid var(--bz-ink) !important;
    box-shadow: 0 4px 0 var(--bz-ink) !important;
  }

  .tBtn {
    background: var(--bz-cream) !important;
    color: var(--bz-ink) !important;
    border: 2px solid var(--bz-ink) !important;
    box-shadow: 0 2px 0 var(--bz-ink) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
  }

  .tChatBtn {
    background: var(--bz-gold) !important;
    color: var(--bz-ink) !important;
    border: 2px solid var(--bz-ink) !important;
    box-shadow: 0 2px 0 var(--bz-ink) !important;
    font-weight: 700 !important;
  }
}

/* Specific body.mob rules */
body.mob .evAnn {
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: 90% !important;
  top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
}

body.mob #mkBar {
  top: auto !important;
  bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 112px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

/* Custom rustic scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(42, 26, 14, 0.08);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb {
  background: rgba(42, 26, 14, 0.28);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 26, 14, 0.5);
}

/* ============================================================
   13. REVIEW FIXES
   Corrections made after checking this theme in a real browser.
   ============================================================ */

/* The `hidden` attribute must always win. Several rules above set
   `display: … !important` (.lg, .lgErr, close buttons), which made hidden
   elements visible, e.g. the "display name" field on the sign-in form.
   `:not(#bz-none)` only raises specificity above the id selectors used above. */
[hidden]:not(#bz-none) {
  display: none !important;
}

/* Dialog titles: the base theme draws them as a navy pill with white text.
   Section 8 switched the text to dark ink, which was unreadable on navy, so
   the pill is removed and the title is plain ink text everywhere. */
.mapCard h3,
.shopHead h3 {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-shadow: none !important;
}

/* Tips dialog: only the heading of each tip is a block; bold words inside the
   paragraph stay inline (modern-ui.css made every <b> a block). */
.tipBox p b {
  display: inline !important;
  font-size: inherit;
}

/* Quest panel heading: keep the title on one line, let the counter wrap. */
.pane .panel h2 {
  flex-wrap: wrap;
  gap: 2px 10px;
}
.pane .panel h2 small {
  flex: 1 1 auto;
}

/* The on-screen "Hái" touch button is a circle in the base theme; section 4
   grouped it with the rectangular HUD button and squared it off. */
.tPick {
  border-radius: 50% !important;
}

/* Dev Tools dialog: coloured action buttons keep white text on their own colour. */
#devModal .dockBtn.devAction,
#devModal .dockBtn.devAction:hover {
  background: var(--dev-color, #15803d) !important;
  color: #fff !important;
  justify-content: center;
}
#devModal .dockBtn.devAction:hover {
  filter: brightness(1.1);
}

/* HUD stat pills: leave room for the emoji icon so it never covers the number. */
.hud .stat {
  padding-left: 27px !important;
}

/* ==========================================================================
   14. IN-WORLD MINIGAMES
   Games are played on the map; the dialog shrinks to a small control bar.
   ========================================================================== */
#mgWorldStatus {
  display: none;
}
#mg.mgInWorld {
  background: transparent !important;
  backdrop-filter: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 76px 12px 0 !important; /* desktop: bar under the quick dock, away from the player */
  cursor: pointer;
}
@media (pointer: coarse), (max-width: 900px) {
  /* Phones follow the player with the camera, so the bar sits at the bottom edge. */
  #mg.mgInWorld {
    align-items: flex-end !important;
    padding: 0 150px 6px !important;
  }
  #mg.mgInWorld .mgCard {
    padding: 5px 10px !important;
    border-radius: 14px !important;
  }
  #mg.mgInWorld .mgCard > #mgWorldStatus {
    font-size: 11.5px !important;
  }
}
#mg.mgInWorld .mgCard {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: auto !important;
  max-width: min(600px, 96%) !important;
  max-height: none !important;
  padding: 8px 12px !important;
  cursor: default;
  overflow: visible !important;
}
#mg.mgInWorld .mgCard > * {
  display: none !important;
}
#mg.mgInWorld .mgCard > .mh {
  display: flex !important;
  order: 1;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  gap: 10px;
}
#mg.mgInWorld .mgCard > .mh h3 {
  font-size: 15px !important;
}
#mg.mgInWorld .mgCard > #mgCtl:not([hidden]) {
  display: flex !important;
  order: 2;
  gap: 6px;
  margin: 0 !important;
}
#mg.mgInWorld .mgCard > #mgCtl button {
  min-width: 48px;
  padding: 8px 12px !important;
  margin: 0 !important;
  font-size: 14px !important;
}
#mg.mgInWorld .mgCard > #mgHit:not([hidden]) {
  display: inline-flex !important;
  order: 2;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 22px !important;
  font-size: 15px !important;
}
#mg.mgInWorld .mgCard > #mgWorldStatus {
  display: block !important;
  order: 3;
  flex: 1 1 100%;
  margin: 0 !important;
  font-size: 13px !important;
}

/* ==========================================================================
   15. PHONE HUD
   On touch screens the quick dock becomes a row of small icon tiles that sits
   between the stat strip (left) and the ☰ Menu button (right), so nothing
   covers the basket / weight / coins / energy / level read-outs.
   ========================================================================== */
.dockMobileOnly {
  display: none !important;
}
@media (pointer: coarse), (max-width: 900px) {
  .dockMobileOnly {
    display: inline-flex !important;
  }
  .floatingDock {
    top: 8px !important;
    right: 64px !important;
    left: auto !important;
    padding: 0 !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .floatingDock .dockBtn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: 44px;
    height: 44px;
    padding: 1px 0 0 !important;
    border-radius: 12px !important;
    font-size: 0 !important; /* hides the long label; the short one is shown below */
    line-height: 1 !important;
  }
  .floatingDock .dockIcon {
    font-size: 18px;
    line-height: 1.15;
  }
  .floatingDock .dockLabel::after {
    content: attr(data-short);
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -0.2px;
    white-space: nowrap;
  }
  /* Stat strip: one chip per value, with the energy and level always visible. */
  .tStats {
    display: flex !important;
    align-items: center;
    gap: 5px !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .tStats > span {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    padding: 2px 6px;
  }
}
/* Narrow phones: the icon tiles drop to a second row under the stat strip. */
@media (pointer: coarse) and (max-width: 760px), (max-width: 760px) {
  .floatingDock {
    top: 56px !important;
    right: 8px !important;
  }
}

/* ==========================================================================
   16. FREE FISHING (bait / fish chip, bait shop, fish buyer)
   ========================================================================== */
#fishingChip {
  position: absolute;
  left: 12px;
  bottom: 62px;
  z-index: 4;
  padding: 4px 10px;
  border: 2px solid var(--bz-ink);
  border-radius: 999px;
  background: var(--bz-cream);
  color: var(--bz-ink);
  box-shadow: 0 2px 0 var(--bz-ink);
  font: 800 12.5px/1.3 var(--bz-font-body), sans-serif;
  pointer-events: none;
  white-space: nowrap;
}
@media (pointer: coarse), (max-width: 900px) {
  #fishingChip {
    left: auto;
    right: 8px;
    bottom: auto;
    top: 106px;
    font-size: 11.5px;
  }
}
.fishingList {
  max-height: 46vh;
  overflow-y: auto;
  margin: 6px 0 10px;
}
.fishingRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin: 6px 0;
  background: #fff8ea;
  border: 1.5px solid #e8c25a;
  border-radius: 12px;
}
.fishingRow > b,
.fishingRow > .fishingRowInfo {
  flex: 1 1 auto;
  min-width: 0;
}
.fishingRowInfo small {
  display: block;
  color: #6b5a44;
}
.fishingRow .fishingPrice {
  font-weight: 800;
  color: #a1271f;
  white-space: nowrap;
}
.fishingRow .mgHit {
  width: auto !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}
.fishingRow .fishingUse {
  padding: 6px 10px;
  border: 2px solid var(--bz-ink);
  border-radius: 10px;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}
.fishingRow .fishingUse:disabled {
  opacity: 0.55;
  cursor: default;
}

/* "Go home" offer shown after buying or moving into a house. */
#goHomeOffer {
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 20px;
  border: 2.5px solid var(--bz-ink);
  border-radius: 999px;
  background: var(--bz-gold);
  color: var(--bz-ink);
  box-shadow: 0 4px 0 var(--bz-ink);
  font: 800 15px/1.2 var(--bz-font-display), var(--bz-font-body), sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
#goHomeOffer[hidden],
#dockHomeBtn[hidden] {
  display: none !important;
}