/* ============================================================
 * src/styles/theme-cozy.css
 *
 * The new theme system. Loaded LAST in index.html so it wins
 * specificity battles against legacy.css and the historical
 * inline <style> blocks.
 *
 * Three themes:
 *   • cozy-light (DEFAULT, no data-theme attr) — warm parchment,
 *       forest green, gold accents. Matches "idle homestead"
 *       brand. Soft, friendly, mobile-friendly contrast.
 *   • cozy-dark (data-theme="cozy-dark") — warm-dark variant
 *       for night sessions. NOT the old cold-navy default;
 *       a chocolate-brown background with parchment text +
 *       gold accents that feel like a hearth-lit interior.
 *   • classic (data-theme="classic") — RuneScape/Tibia-utility
 *       direction, behind a Settings → Display toggle. Stays
 *       behind a beta gate until friends-test data tells us
 *       whether to invest in polishing it.
 *
 * Architecture: every selector targets a CSS variable that
 * legacy.css already references (--bg-0, --ink, --gold, etc.),
 * so layout stays intact and only the palette swaps.
 *
 * Add new selectors at the BOTTOM of this file, never inside
 * legacy.css. Treat legacy.css as frozen for theme purposes.
 * ============================================================ */

/* ─── Default = Cozy Light ─── */
:root,
body[data-theme="cozy-light"] {
  /* Typography — break out of the "AI default" Inter/Roboto trap:
     • Cinzel for display — wide-set engraved serif, reads as
       "carved into a homestead sign." Already preloaded.
     • Quicksand for body — soft humanist, warmer than Inter.
     • Caveat as the accent / hand-written voice for special
       moments (welcome modal title, key callouts). */
  --f-display:  'Cinzel', 'Cormorant Garamond', 'Georgia', serif;
  --f-ui:       'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-accent:   'Caveat', 'Patrick Hand', cursive;

  /* Surfaces — parchment ramp */
  --bg-0:        #f4e4bc;             /* outermost wash */
  --bg-1:        #ede0b8;             /* sidebar surface */
  --bg-2:        #faf0d4;             /* card surface */
  --bg-3:        #fff7e0;             /* elevated surface (modal) */
  --bg-card:     linear-gradient(180deg,#fff7e0,#faf0d4);

  /* Shell surfaces (b151) — tokenized so themes drive them, not hardcoded
     values in component rules. These MUST match the old cozy look exactly. */
  --sidebar-bg:  linear-gradient(180deg, #e8d4a0 0%, #ddc28a 50%, #d8b878 100%);
  --topbar-bg:   linear-gradient(90deg, #ede0b8, #e8d4a0);
  --app-bg:
    radial-gradient(ellipse 80% 50% at 75% 5%, rgba(232,178,96,.35) 0%, rgba(232,178,96,0) 60%),
    linear-gradient(180deg, #9c6f38 0%, #8a673a 14%, #75663c 28%, #62633a 42%, #4e5e2a 56%, #3a4e1c 70%, #243214 86%, #14180a 100%);

  /* Lines + borders */
  --line:        rgba(122,94,58,.20);
  --line-soft:   rgba(122,94,58,.10);
  --line-strong: rgba(122,94,58,.45);

  /* Text */
  --ink:         #3d2817;             /* primary — dark cocoa */
  --ink-2:       #7a5e3a;             /* secondary — muted brown */
  --ink-3:       #a5896a;             /* hint */

  /* Accents */
  --gold:        #c8862a;             /* rust gold — primary accent */
  --gold-2:      #e0a64a;             /* lighter gold for highlights */
  --gold-bg:     rgba(200,134,42,.14);

  --aqua:        #4f8b7a;              /* sage teal — used for info chips */
  --aqua-2:      #8f8a72;
  --aqua-bg:     rgba(79,139,122,.14);

  --green:       #5a7c3d;              /* forest green — XP/skill bars */
  --green-bg:    rgba(90,124,61,.14);

  --red:         #a04830;              /* rust red — danger/warn */
  --red-bg:      rgba(160,72,48,.14);

  --purple:      #7a5b9a;              /* dusty lavender */
  --purple-bg:   rgba(122,91,154,.14);

  --gem:         #5b8fa8;              /* dusty blue — premium */
  --gem-bg:      rgba(91,143,168,.14);

  /* Layout — keep existing */
  color-scheme: light;
}

/* ─── Cozy Dark — warm hearth, NOT cold navy ─── */
body[data-theme="cozy-dark"] {
  --bg-0:        #2a1f15;              /* deep warm chocolate */
  --bg-1:        #36281b;              /* sidebar */
  --bg-2:        #3f2f20;              /* card */
  --bg-3:        #4a3825;              /* elevated */
  --bg-card:     linear-gradient(180deg,#3f2f20,#2f2317);
  --sidebar-bg:  linear-gradient(180deg, #36281b, #2a1f15);
  --topbar-bg:   linear-gradient(90deg, #3a2b1d, #2f2317);
  --app-bg:      radial-gradient(ellipse 80% 50% at 75% 5%, rgba(224,184,95,.10) 0%, rgba(224,184,95,0) 60%), linear-gradient(180deg, #2a1f15, #1f1710);

  --line:        rgba(232,184,96,.18);
  --line-soft:   rgba(255,235,200,.05);
  --line-strong: rgba(232,184,96,.40);

  --ink:         #f4e4bc;
  --ink-2:       #c8b088;
  --ink-3:       #8a7656;

  --gold:        #e0b85f;
  --gold-2:      #f3d181;
  --gold-bg:     rgba(224,184,95,.14);

  --aqua:        #8f8a72;
  --aqua-2:      #b3a98c;
  --aqua-bg:     rgba(111,168,150,.18);

  --green:       #7da563;
  --green-bg:    rgba(125,165,99,.18);

  --red:         #d56a4f;
  --red-bg:      rgba(213,106,79,.18);

  --purple:      #a685c4;
  --purple-bg:   rgba(166,133,196,.18);

  --gem:         #7fb8d8;
  --gem-bg:      rgba(127,184,216,.18);

  color-scheme: dark;
}

/* ─── Classic — medieval utility, behind beta toggle ─── */
body[data-theme="classic"] {
  --bg-0:        #2b2620;              /* dark stone */
  --bg-1:        #1f1a14;              /* sidebar */
  --bg-2:        #d4b896;              /* parchment cards */
  --bg-3:        #e0c8a4;
  --bg-card:     #d4b896;
  --sidebar-bg:  linear-gradient(180deg, #1f1a14, #171310);
  --topbar-bg:   linear-gradient(90deg, #2b2620, #211d18);
  --app-bg:      linear-gradient(180deg, #2b2620, #201c17);

  --line:        #5c4a2e;
  --line-soft:   rgba(92,74,46,.18);
  --line-strong: #b8893e;

  --ink:         #1f1a14;              /* dark text on parchment */
  --ink-2:       #4a3a22;
  --ink-3:       #7a6643;

  --gold:        #b8893e;              /* brass */
  --gold-2:      #d4a55a;
  --gold-bg:     rgba(184,137,62,.18);

  --aqua:        #5a7c8b;
  --aqua-2:      #7898a8;
  --aqua-bg:     rgba(90,124,139,.18);

  --green:       #5e7d2a;
  --green-bg:    rgba(94,125,42,.18);

  --red:         #8b2e1f;
  --red-bg:      rgba(139,46,31,.18);

  --purple:      #6a4a78;
  --purple-bg:   rgba(106,74,120,.18);

  --gem:         #4a6f8b;
  --gem-bg:      rgba(74,111,139,.18);

  --r-sm:        4px;
  --r:           6px;
  --r-lg:        8px;

  --f-display:   'Cinzel','Times New Roman',serif;
  --f-ui:        'Courier New','Lucida Console',monospace;

  color-scheme: dark;
}

/* ============================================================
 * Surface overrides for COZY LIGHT (default).
 *
 * legacy.css hardcodes the body / sidebar / topbar gradients
 * directly (not via CSS variables), so theme variables alone
 * don't reach them. These rules override the hardcoded values
 * with parchment-friendly equivalents. Using `body[data-theme="cozy-light"]`
 * + `html[data-theme="cozy-light"]` selectors so we're more
 * specific than legacy.css's bare `body{...}` rule.
 * ============================================================ */

/* Body — atmospheric "implied landscape" gradient. Reads as if
   there's a hazy view behind everything: warm distant haze (sky),
   golden far hills, olive mid-grass, deep forest shadow.
   Soft multi-stop transitions so it feels like atmosphere,
   not bands of color.

   A subtle radial warmth in the upper-right suggests a low sun
   without ever drawing one. */
/* b222: this list used to start with `body[data-theme="cozy-light"] body` — two
   <body> elements in one descendant chain, which can never match. Same b216
   rescoping accident as the #panel-profile one. The `html body[…]` selector
   below is the one that was always doing the work. */
html body[data-theme="cozy-light"] {
  /* landscape gradient now lives in the --app-bg token (b151) */
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-ui);
}

/* ─── Sidebar (carved-plaque treatment to match character-sheet body) ─── */
body[data-theme="cozy-light"] .sidebar {
  background: var(--sidebar-bg);
  border-right: 2px solid #b8893e;
  /* Subtle gold inner rule + drop shadow into the main column */
  box-shadow:
    inset -2px 0 0 rgba(255,247,224,.4),
    2px 0 6px rgba(60,40,16,.18);
  position: relative;
}
/* Vertical decorative rule near the right edge of the sidebar */
body[data-theme="cozy-light"] .sidebar::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  opacity: .5;
  pointer-events: none;
}

/* Brand block — full Hearthrise crest replaces the small emoji+text */
body[data-theme="cozy-light"] .brand {
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  padding: 8px 4px 14px !important;
  margin-bottom: 10px;
  display: block !important;
  text-align: center;
}


/* Sidebar must scroll when nav exceeds viewport — was overflow:hidden,
   which clipped the bottom items behind the brand crest. */
body[data-theme="cozy-light"] .sidebar {
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Hide the nav entries we're consolidating into other tabs:
   • Store → entry point inside Market panel

   b220 (#14): the `dungeons` rules are GONE, and so is the button they hid.
   Injecting a nav entry (src/dungeons.js) and then hiding it in CSS is what
   made dungeons — and the weekly clan raid nested inside their panel — the
   least discoverable content in the game. Dungeons are now a section of the
   real top-level `Events` destination, which no rule may hide. */
.nav-btn[data-tab="shop"] { display: none !important; }
.bn-btn[data-tab="shop"] { display: none !important; }

/* SVG icon sizing — swapped via src/icon-swap.js. The .ic wrapper
   stays the same (legacy size 22×22 in nav, 14-18px in topbar);
   the inner <img.hr-svg-ic> just fills it. */
.hr-svg-ic {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
}
.nav-btn .ic.hr-icon-host,
.bn-btn .ic.hr-icon-host {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.t-stat .ic.hr-icon-host {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.streak-badge .flame.hr-icon-host {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn .hr-icon-host {
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.icon-btn .hr-icon-host .hr-svg-ic {
  width: 100%;
  height: 100%;
}
/* Active wax-red nav: lighten the icon slightly so it pops on the
   red bg without inverting (which destroyed the parchment-fill icons). */
.nav-btn.active .ic.hr-icon-host .hr-svg-ic {
  filter: drop-shadow(0 0 2px rgba(255,247,224,.6));
}
body[data-theme="cozy-light"] .brand::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.65;
}
body[data-theme="cozy-light"] .brand-name {
  font-family: var(--f-display);
  color: #5c2d08;
  font-size: 16px;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255,247,224,.5);
}
body[data-theme="cozy-light"] .brand-name small {
  color: #7a4623;
  letter-spacing: .22em;
  font-size: 8px;
  font-family: var(--f-display);
  font-weight: 600;
}
body[data-theme="cozy-light"] .brand-mark {
  filter: drop-shadow(0 1px 0 rgba(255,247,224,.4));
}

/* Group labels (ADVENTURE / ECONOMY / HOMESTEAD) — Cinzel small caps,
   matching HEARTHRISE wordmark color + weight so they read clearly. */
body[data-theme="cozy-light"] .sidebar .nav-group-label,
body[data-theme="cozy-light"] .nav-group-label {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  margin: 14px 6px 6px !important;
  padding-bottom: 4px;
  position: relative;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255,247,224,.6);
}
body[data-theme="cozy-light"] .nav-group-label::after {
  content: "";
  position: absolute;
  left: 0; right: 8px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  opacity: .55;
}

/* Nav buttons — parchment surface */
body[data-theme="cozy-light"] .nav-btn {
  color: var(--ink) !important;
  background: transparent;
  font-family: var(--f-ui);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
body[data-theme="cozy-light"] .nav-btn:hover {
  background: var(--gold-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line-strong);
}
body[data-theme="cozy-light"] .nav-btn .ic {
  filter: drop-shadow(0 1px 0 rgba(255,247,224,.3));
}

/* ACTIVE nav button — wax-stamp red with cream text + gold trim */
body[data-theme="cozy-light"] .nav-btn.active {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border-color: #5a1208 !important;
  box-shadow:
    inset 3px 0 0 #e0b85f,
    inset 0 1px 0 rgba(255,255,255,.2),
    0 2px 4px rgba(60,40,16,.25) !important;
  font-family: var(--f-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
body[data-theme="cozy-light"] .nav-btn.active .lbl {
  font-family: var(--f-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body[data-theme="cozy-light"] .nav-btn.active .ic {
  filter: none;
  /* slight glow on active icon */
  text-shadow: 0 0 6px rgba(255,247,224,.4);
}

/* Sidebar foot (offline / online indicator) */
body[data-theme="cozy-light"] .nav-foot {
  border-top: 1px solid var(--line-strong) !important;
  color: #5c3d12 !important;
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 10px;
  margin-top: 4px;
}
body[data-theme="cozy-light"] .nav-foot .dot {
  background: var(--green) !important;
  box-shadow: 0 0 6px var(--green);
}
body[data-theme="cozy-light"] .nav-foot .dot.off {
  background: #a5896a !important;
  box-shadow: none;
}

/* Topbar */
body[data-theme="cozy-light"] .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line-strong);
}
body[data-theme="cozy-light"] .player-avatar {
  background: linear-gradient(135deg, var(--gold-bg), rgba(95,124,61,.10));
  border: 1px solid rgba(200,134,42,.22);
}
body[data-theme="cozy-light"] .player-name { color: var(--ink); }
body[data-theme="cozy-light"] .t-stat {
  background: rgba(255,247,224,.55);
  color: var(--ink);
  border: 1px solid var(--line);
}
body[data-theme="cozy-light"] .t-stat .lab {
  color: var(--ink-2);
}
body[data-theme="cozy-light"] .icon-btn {
  color: var(--ink-2);
  background: rgba(255,247,224,.4);
  border: 1px solid var(--line);
}
body[data-theme="cozy-light"] .icon-btn:hover {
  background: var(--gold-bg);
  color: var(--gold);
}

/* Bottom nav (mobile) */
body[data-theme="cozy-light"] .bottom-nav {
  background: linear-gradient(180deg, #e8d4a0, #ede0b8);
  border-top: 1px solid var(--line-strong);
}
body[data-theme="cozy-light"] .bn-btn { color: var(--ink-2); }


/* Cards — parchment fill with a darker "header band" up top, gold
   inner trim, and a warm drop-shadow so they read like book pages
   pinned to a noticeboard, not flat <div>s. */
body[data-theme="cozy-light"] .card {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255,247,224,.6) inset,            /* inner cream highlight */
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 16px -4px rgba(60,40,16,.18);              /* warm drop shadow */
  position: relative;
  overflow: hidden;
}
/* Card head — darker parchment band, gold underline, decorative
   flourish before the title. */
body[data-theme="cozy-light"] .card-head {
  background: linear-gradient(180deg, #e8d4a0, #ddc88c);
  border-bottom: 1px solid var(--line-strong);
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
/* Decorative gold underline on the band */
body[data-theme="cozy-light"] .card-head::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Title in the band — Cinzel, with a small flourish character */
body[data-theme="cozy-light"] .card-head .card-title {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #5c3d12;
  text-transform: uppercase;
}
body[data-theme="cozy-light"] .card-head .card-title::before {
  content: "❦ ";
  color: var(--gold);
  margin-right: 4px;
  font-size: .9em;
}

body[data-theme="cozy-light"] /* ============================================================
 * Market — re-skin off-theme buttons to match parchment palette
 * (added 2026-05-03 b101 hot patch)
 * ============================================================ */

/* "List" button — was bright Idle-Clans green; now wax-stamp red */
#panel-market .mk-form-row button,


body[data-theme="cozy-light"] #panel-market #mk-list-btn {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border: 2px solid #5a1208 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(60,40,16,.3) !important;
}
#panel-market .mk-form-row button:hover,
#panel-market #mk-list-btn:hover {
  filter: brightness(1.08);
}

body[data-theme="cozy-light"] /* "Premium Store" pill on Market — was dark navy/teal; now parchment with
 * a gold accent on the gem icon. Subtle but on-theme. */
#hr-store-link {
  background: linear-gradient(180deg, #fff8e2, #e8d5a3) !important;
  color: #5c2d08 !important;
  border: 2px solid #b8893e !important;
  font-family: 'Cinzel', serif !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(60,40,16,.25) !important;
}
body[data-theme="cozy-light"] #hr-store-link:hover {
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  filter: brightness(1.02);
}
#hr-store-link > span {
  color: #c9a35c !important; /* gold gem accent */
  filter: drop-shadow(0 1px 0 rgba(60,40,16,.4));
}

/* ============================================================
 * b106 — Mobile (<=540px) layout fixes
 * From the iframe-based mobile audit. Six issues fixed:
 *   #1 chat dock force-minimized on mobile (handled in chat.js)
 *   #2 House building icons stay 48×48 in mobile shop-rows
 *   #3 Combat monster picker stays visible at narrow widths
 *   #4 Inventory paper-doll: 3-column grid that fits 380px
 *   #5 Topbar player name ellipsis instead of mid-word clip
 *   #6 Combat-style block stacks DUNGEONS below the title
 * ============================================================ */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  /* #5 — Player name ellipsis */
  .topbar h1,
  .topbar .player-name,
  .topbar #player-name,
  #dash-user-sub,
  .activity-card b,
  .cr-name,
  .ss-card-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* #2 — House: don't let the building icon collapse to 0 width
   * when .shop-row goes vertical. Force a 48px reserved column. */
  #panel-house .shop-row .si {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    align-self: flex-start;
  }
  #panel-house .shop-row .si img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    display: block !important;
  }
  #panel-house .shop-row .si span {
    font-size: 28px !important;
    line-height: 48px !important;
  }

  /* #3 — Combat: ensure the monster-picker column is visible
   * On desktop the picker uses a fixed-height flex column with
   * overflow:hidden + flex:0. On mobile that collapses it to ~26px
   * (just the card header). Force auto height + visible overflow + a
   * sane min-height so the actual monster list/tier buttons show. */
  #panel-combat.active .combat-picker {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 240px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    margin-bottom: 12px;
  }
  #panel-combat.active .combat-picker .card-body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  #panel-combat.active .combat-arena,
  #panel-combat.active .combat-loadout {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Stack the side-by-side cards vertically */
  #panel-combat.active > .row,
  #panel-combat.active > .grid {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  /* #4 — Inventory paper-doll: 3-column responsive grid */
  .td-doll {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .td-doll .td-slot {
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  /* Inventory bag tile grid — let it use the full width too */


  /* b107 — Profile right-side bleed: the 2-column layout
   * (main content + Active Effects sidebar) doesn't stack on mobile,
   * so the sidebar floats off the right edge ("FO... HC... wid..."
   * fragments visible past the parchment). Force a single column
   * and let Active Effects flow underneath the main content.
   *
   * b112 HOTFIX: scope this to `.active` only. The previous rule
   * (no `.active`) was forcing Profile to display:block on EVERY
   * tab, so Profile content rendered on top of Combat / Inventory /
   * Skills / etc. and hid the new sub-tabs. This is why Tyler's
   * phone "looked the same after b110/b111" — the new mobile UIs
   * were there, just buried under a permanently-visible Profile. */
  #panel-profile.active {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  #panel-profile.active #active-effects-card,
#panel-profile.active aside {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    position: static !important;
    float: none !important;
    grid-column: 1 / -1 !important;
  }
  /* feat-buttons row (Achievements / Bestiary / Last Session / Lifetime
   * Stats) was 570px wide, overflowing. Wrap into a 2-column grid. */
  #panel-profile .feat-buttons,
  .feat-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .feat-buttons .btn,
  .feat-buttons button {
    width: 100% !important;
    font-size: 11px !important;
    padding: 8px 4px !important;
  }

  /* #6 — Combat-style block: stack the title row when DUNGEONS would
   * collide with "COMBAT STYLE — 1H SWORD" at narrow widths. */
  .combat-style-block,
  #panel-combat .combat-style-block {
    flex-wrap: wrap !important;
  }
  .combat-style-block > .row {
    flex-wrap: wrap !important;
    gap: 6px;
  }
  .combat-style-block h4,
.combat-style-block > .row > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The Dungeons button injected by nav-consolidation.js sits absolute
   * on desktop; on mobile let it flow into the header normally. */
  #panel-combat #hr-dungeons-link {
    position: static !important;
    width: 100%;
    margin: 4px 0;
  }
}

/* ============================================================
 * b114 — Landscape side-rail nav
 * b115 — Visual polish (parchment rail, slim topbar, layout fix)
 * ============================================================
 * The horizontal bottom nav eats ~40px of the precious ~380px
 * landscape height. Rotated into a vertical left rail it eats
 * ~64px of horizontal (which is plentiful at 800-900px wide)
 * and gives content the full vertical screen.
 *
 * b115 polish: parchment background to match the cozy theme
 * instead of dark cocoa, slimmer topbar (32px), proper z-stacking
 * so the rail sits above the panel, and explicit layout boundaries
 * so the topbar doesn't bleed behind the rail.
 * ============================================================ */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1024px) {
  body[data-theme="cozy-light"] /* Side rail — parchment-themed (matches the panel sheet) */
  .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: calc(64px + var(--safe-l, 0px)) !important;
    height: 100vh !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 6px 4px 6px calc(4px + var(--safe-l, 0px)) !important;
    gap: 3px !important;
    border-top: none !important;
    border-right: 2px solid #b8893e !important;
    /* Parchment gradient — vertical, fades from cream at top to
     * slightly darker at bottom. Keeps theme consistent. */
    background: linear-gradient(180deg, #fff8e2 0%, #f4e4bc 50%, #e8d5a3 100%) !important;
    box-shadow: 2px 0 12px rgba(60,40,16,.25);
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }

  body[data-theme="cozy-light"] .bn-btn,


  body[data-theme="cozy-light"] .bottom-nav button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 5px 4px !important;
    font-size: 9px !important;
    flex-direction: column;
    gap: 1px;
    border-radius: 5px;
    color: #5c2d08 !important;       /* dark cocoa on parchment */
    background: transparent !important;
    border: 1px solid transparent !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
  }
  .bn-btn .ic, .bottom-nav button .ic {
    font-size: 18px !important;
    margin-bottom: 0 !important;
    line-height: 1;
  }
  .bn-btn:hover, .bottom-nav button:hover {
    background: rgba(184,137,62,.15) !important;
  }
  body[data-theme="cozy-light"] /* Active rail item — wax-stamp red,

  body[data-theme="cozy-light"] like every other primary action */
  .bn-btn.active {
    background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
    color: #fff8e2 !important;
    border-color: #5a1208 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(60,40,16,.3) !important;
  }

  /* Push the entire layout right so the rail doesn't overlap.
   * Apply to .app (the grid) — its children inherit the offset. */
  .app, #app {
    padding-left: calc(64px + var(--safe-l, 0px)) !important;
  }
  /* Topbar — slim strip, no extra padding-left because .app already padded */
  .topbar {
    height: 32px !important;
    min-height: 32px !important;
    padding: 2px 8px !important;
    gap: 4px !important;
  }
  .topbar h1, .topbar .player-name { font-size: 12px !important; }
  /* Stats row — tighter so QUESTS / DUNGEONS don't overflow */
  .top-stats { gap: 2px !important; }
  .t-stat {
    padding: 2px 4px !important;
    font-size: 10px !important;
    min-height: 24px !important;
  }
  .topbar button {
    min-height: 26px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
  }

  /* Activity bar — slim 26px strip, sits flush under topbar */
  #activity-bar {
    height: 26px !important;
    min-height: 26px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
  }

  /* Panel — fills the rest. No bottom-bar = no bottom padding reserved. */
  .panel.active {
    padding: 6px 8px max(6px, var(--safe-b, 0px)) !important;
  }

  /* DUNGEONS button — was overflowing right. Constrain to inline width. */
  #panel-combat #hr-dungeons-link {
    width: auto !important;
    max-width: 140px !important;
    margin: 0 0 0 8px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    position: static !important;
  }
  /* Combat sub-tab strip + DUNGEONS share a single row in landscape */
  #panel-combat .cmb-mob-tabs {
    margin: -6px -8px 6px !important;
    padding: 4px !important;
  }

  /* Chat pill stays hidden, but if user opens chat from More menu, the
   * full dock should respect the side-rail offset too. */
  #chat-dock.mini { display: none !important; }
  #chat-dock.full {
    left: calc(64px + var(--safe-l, 0px)) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 100vh !important;
  }
}

/* ============================================================
 * b113 — Landscape-phone tightening
 * ============================================================
 * After expanding all the mobile media queries to also fire in
 * landscape, the chrome (topbar + sub-tab strip + bottom nav) was
 * eating ~40% of the ~380px landscape height. This block aggressively
 * compacts the chrome only when we're in landscape on a phone,
 * giving the actual game content most of the screen.
 * ============================================================ */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 900px) {
  /* Topbar — single short row, no wrap */
  .topbar {
    padding: 2px 6px !important;
    flex-wrap: nowrap !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .top-stats { flex-wrap: nowrap !important; }
  .t-stat {
    padding: 2px 5px !important;
    font-size: 10px !important;
    min-height: 26px !important;
  }
  .topbar h1, .topbar .player-name { font-size: 13px !important; }

  /* Activity bar — compact strip */
  #activity-bar {
    padding: 2px 8px !important;
    font-size: 11px !important;
    min-height: 28px !important;
  }

  /* NOTE: bottom-nav + bn-btn rules removed in b115 because b114 now
   * rotates the bottom-nav into a left side rail in landscape and owns
   * its own height / button sizing. Leaving these here was setting
   * height to 40px and overriding b114's height:100vh, which collapsed
   * the rail to a tiny strip with only the first button visible. */

  /* Sub-tab strips — slimmer */
  .cmb-mob-tabs, .inv-mob-tabs, .act-mob-strip {
    padding: 3px 4px !important;
    margin: -8px -8px 4px !important;
  }
  .cmb-mob-tabs .cmt-btn,
  .inv-mob-tabs .imt-btn,
  .act-mob-strip .ams-btn {
    min-height: 32px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }
  .cmb-mob-tabs .cmt-btn .cmt-ic,
  .inv-mob-tabs .imt-btn .imt-ic { font-size: 12px !important; }
  .act-mob-strip .ams-btn .ams-ic { font-size: 14px !important; }

  /* Panels — minimal padding to give content the most room */
  .panel.active {
    padding: 4px 6px calc(40px + var(--safe-b, 0px) + 4px) !important;
  }
  .card { margin-bottom: 4px !important; padding: 6px 8px !important; }
  .card-head, .card-body { padding: 4px 8px !important; }

  /* Combat picker monsters — denser rows so more fit on the short screen */
  #panel-combat .monster-row {
    padding: 4px 8px !important;
    min-height: 40px !important;
  }
  #panel-combat .monster-row > img,
  #panel-combat .monster-row > .icon-fallback {
    width: 28px !important; height: 28px !important;
    flex-basis: 28px !important;
  }

  /* House / activity tiles — compact */
  #panel-house .shop-row .si {
    flex: 0 0 36px !important;
    width: 36px !important; height: 36px !important;
  }
  #panel-house .shop-row .si img {
    width: 36px !important; height: 36px !important;
  }
  #panel-house .shop-row {
    padding: 4px 8px !important;
    min-height: 44px !important;
  }
}

/* ============================================================
 * b111 — Mobile rebuild pt 2 (Inventory + Activities)
 * ============================================================
 * Same data-mobile-sub pattern as Combat (b110) applied to:
 *   • Inventory: Bag / Equip / Saved sub-tabs
 *   • Activities (Skills): horizontal-scroll skill strip across top
 * Sub-strips hidden on desktop, shown only at ≤540px.
 * ============================================================ */

/* Inventory sub-tab strip — hidden by default, mobile-only */
.inv-mob-tabs { display: none; }
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  body[data-theme="cozy-light"] .inv-mob-tabs {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 4px;
    padding: 6px 4px;
    background: linear-gradient(180deg, rgba(255,248,226,.95), rgba(244,228,188,.92));
    border-bottom: 1px solid #b8893e;
    backdrop-filter: blur(6px);
    margin: -8px -8px 8px;
  }
  body[data-theme="cozy-light"] .inv-mob-tabs .imt-btn {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px;
    background: rgba(255,255,255,.5);
    border: 1px solid #c9a35c;
    border-radius: 6px;
    color: #5c2d08;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
  }
  .inv-mob-tabs .imt-btn .imt-ic { font-size: 16px; }
  body[data-theme="cozy-light"] .inv-mob-tabs .imt-btn.active {
    background: linear-gradient(180deg, #d44a3a, #8b2a1f);
    color: #fff8e2;
    border-color: #5a1208;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }

  /* Show only the section matching the active inventory sub-tab.
   * The inventory layout has three logical zones: bag column,
   * equipment column (paper-doll + hero stats), loadout column. */
#panel-inventory[data-mobile-sub="bag"] .invc-equip-col {
    display: none !important;
  }
  #panel-inventory[data-mobile-sub="equip"] .invc-bag-col {
    display: none !important;
  }
  #panel-inventory[data-mobile-sub="loadouts"] .invc-bag-col,
#panel-inventory[data-mobile-sub="loadouts"] .invc-equip-col,
#panel-inventory[data-mobile-sub="loadouts"] .td-doll {
    display: none !important;
  }

  /* Tighten bag tile grid to 5 columns on mobile (was responsive auto-fill) */

}

/* Activities skill strip — horizontal-scroll across the top */
.act-mob-strip { display: none; }
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  body[data-theme="cozy-light"] .act-mob-strip {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 4px;
    padding: 6px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    background: linear-gradient(180deg, rgba(255,248,226,.95), rgba(244,228,188,.92));
    border-bottom: 1px solid #b8893e;
    backdrop-filter: blur(6px);
    margin: -8px -8px 8px;
    scrollbar-width: none;
  }
  .act-mob-strip::-webkit-scrollbar { display: none; }
  body[data-theme="cozy-light"] .act-mob-strip .ams-btn {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 10px;
    min-width: 56px;
    background: rgba(255,255,255,.5);
    border: 1px solid #c9a35c;
    border-radius: 6px;
    color: #5c2d08;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 48px;
    scroll-snap-align: start;
  }
  .act-mob-strip .ams-btn .ams-ic { font-size: 18px; }
  body[data-theme="cozy-light"] .act-mob-strip .ams-btn.active {
    background: linear-gradient(180deg, #d44a3a, #8b2a1f);
    color: #fff8e2;
    border-color: #5a1208;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }

  /* Hide the desktop-style skill list sidebar on mobile — the strip
   * replaces it. Show only the right-column detail. */

  #panel-skills .skill-detail {
    width: 100% !important;
  }
  /* Skill nodes (Normal Tree, Oak, etc.) — denser rows */

}

/* ============================================================
 * b110 — Idle-Clans-style structural rebuild for mobile
 * ============================================================
 * Combat panel gets a sub-tab strip (Style / Foes / Arena), only
 * one pane visible at a time. Floating chat pill is hidden on
 * mobile (chat reachable via More menu instead). Monster + bounty
 * cards densified to ~50-60px rows. Sticky activity bar at the
 * top of every panel.
 * ============================================================ */

/* Sub-tab strip above the combat panel — visible on mobile only */
.cmb-mob-tabs {
  display: none;
}
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  body[data-theme="cozy-light"] .cmb-mob-tabs {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 4px;
    padding: 6px 4px;
    background: linear-gradient(180deg, rgba(255,248,226,.95), rgba(244,228,188,.92));
    border-bottom: 1px solid #b8893e;
    backdrop-filter: blur(6px);
    margin: -8px -8px 8px;
  }
  body[data-theme="cozy-light"] .cmb-mob-tabs .cmt-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    background: rgba(255,255,255,.5);
    border: 1px solid #c9a35c;
    border-radius: 6px;
    color: #5c2d08;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
  }
  .cmb-mob-tabs .cmt-btn .cmt-ic { font-size: 16px; }
  body[data-theme="cozy-light"] .cmb-mob-tabs .cmt-btn.active {
    background: linear-gradient(180deg, #d44a3a, #8b2a1f);
    color: #fff8e2;
    border-color: #5a1208;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }

  /* Show ONLY the section matching the active mobile sub-tab.
   * data-mobile-sub is set by combat-mobile-tabs.js. */
#panel-combat[data-mobile-sub="style"] .combat-picker,
#panel-combat[data-mobile-sub="style"] .combat-arena {
    display: none !important;
  }
  #panel-combat[data-mobile-sub="monsters"] .combat-style-block,
#panel-combat[data-mobile-sub="monsters"] .combat-arena {
    display: none !important;
  }
  #panel-combat[data-mobile-sub="arena"] .combat-style-block,
  #panel-combat[data-mobile-sub="arena"] .combat-picker {
    display: none !important;
  }
  /* DUNGEONS button always visible regardless of sub-tab */

  /* Style sub-tab — keep the picker compact */
  #panel-combat[data-mobile-sub="style"] .combat-style-block {
    margin-top: 8px;
  }

  body[data-theme="cozy-light"] /* DENSE MONSTER ROWS — was ~200px tall cards,


  body[data-theme="cozy-light"] now ~56px rows */
  #panel-combat .monster-row,


  body[data-theme="cozy-light"] #panel-combat .combat-picker .monster-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    min-height: 56px !important;
    border-bottom: 1px solid rgba(184,137,62,.25);
    background: rgba(255,248,226,.4);
  }
  #panel-combat .monster-row > img,
  #panel-combat .monster-row > .icon-fallback {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
  }
  #panel-combat .monster-row .mon-name {
    flex: 1;
    font-weight: 700;
    font-size: 13px;
  }
  
  /* Hide bounty-style verbose chips on mobile bounty board too */
  @media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
    .bounty-option {
      padding: 8px 10px !important;
      min-height: 60px !important;
    }
    .bounty-option .bounty-meta,
    .bounty-option .tiny.muted {
      font-size: 11px !important;
    }
    .bounty-option .bounty-reward {
      font-size: 11px !important;
    }
  }

  /* HIDE FLOATING CHAT PILL on mobile — chat is now reachable via
   * the bottom-nav More menu (added in b110). The pill was overlapping
   * gameplay UI and felt like an iframe-injected ad. */
  #chat-dock.mini {
    display: none !important;
  }
  /* When user opens chat via the More menu, dock goes full-screen */
  #chat-dock.full {
    bottom: calc(56px + var(--safe-b, 0px)) !important;
    height: calc(100vh - 56px - var(--safe-b, 0px) - 60px) !important;
    width: 100% !important;
    right: 0 !important; left: 0 !important;
    border-radius: 12px 12px 0 0 !important;
  }
}

/* ============================================================
 * b109 — Real-phone fixes after b108
 * Tyler tested on his actual phone and reported: chat button in
 * the way, combat invisible (too much scroll), profile overlap,
 * way too much scrolling overall. b108 over-padded everything.
 * b109 walks that back to a denser, less-floaty layout.
 * ============================================================ */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  /* CHAT PILL — was sitting at bottom:16px directly on top of the
   * 60px+safe-b bottom nav. Lift it above the nav so it stops
   * blocking taps and stops looking like a stuck-on overlay. */
  #chat-dock.mini {
    bottom: calc(76px + var(--safe-b, 0px)) !important;
    right: 12px !important;
  }
  #chat-dock-min {
    /* Smaller, more transparent — feels like a quiet utility, not
     * a primary CTA fighting with the bottom nav for attention. */
    padding: 6px 12px !important;
    font-size: 11px !important;
    background: rgba(20, 25, 40, .82) !important;
    border-color: rgba(243,209,129,.3) !important;
    backdrop-filter: blur(6px);
  }
  #chat-dock-min .cdm-icon { font-size: 13px !important; }
  /* Full chat dock on mobile — keep it flush bottom but leave room
   * for bottom nav since the dock no longer takes the whole screen
   * (the b106 fix made it default-mini, but if user expands it...) */
  #chat-dock.full {
    right: 0 !important;
    left: 0 !important;
    bottom: calc(60px + var(--safe-b, 0px)) !important;
    width: 100% !important;
    height: 60vh !important;
    max-height: 60vh !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* DENSITY — undo most of b108's padding bumps. Keep the tap-target
   * minimums (those still matter) but let cards/text breathe less. */
  body {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .panel.active {
    padding: 8px 8px calc(60px + var(--safe-b, 0px) + 8px) !important;
  }
  .card,
  .activity-card,
  .skill-tile,
  .iap-card {
    margin-bottom: 8px !important;
    padding: 10px !important;
  }
  /* Card heads — kill big top padding */
  .card-head {
    padding: 8px 10px !important;
  }
  .card-body {
    padding: 8px 10px !important;
  }
  /* KPI / stat rows */
  .kpi-row .kpi {
    padding: 6px 4px !important;
  }
  .kpi-row .kpi b { font-size: 16px !important; }
  .kpi-row .kpi span { font-size: 10px !important; }

  /* COMBAT PANEL — the worst offender for scroll. Kill descriptive
   * text on mobile, compress sections, hide what isn't critical. */
  #panel-combat .combat-style-block {
    padding: 8px !important;
  }
  /* The "Style: Accurate · Trains: Attack" + "Accuracy skill: attack
   * · Damage skill: strength" lines eat 60px doing nothing useful
   * once the user picks a style. Hide on mobile. */
#panel-combat .combat-style-block .csb-meta,
#panel-combat .combat-style-block p {
    display: none !important;
  }
  /* Combat-style buttons in a tight 4-up grid */
  #panel-combat .combat-style-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  #panel-combat .csb-btn {
    min-height: 48px !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
  }
  #panel-combat .csb-btn small {
    display: none !important;       /* hide ATTACK/STRENGTH/DEFENSE/ATK-STR-DEF labels */
  }

  /* Combat picker — make the tier buttons compact */
#panel-combat .combat-picker .row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #panel-combat .combat-picker button {
    padding: 4px 10px !important;
    min-height: 36px !important;
    font-size: 11px !important;
  }
  /* Monster cards in the picker — denser */
  #panel-combat .monster-row {
    padding: 8px 10px !important;
    min-height: 48px !important;
    gap: 8px;
  }
  #panel-combat .monster-row img,
  #panel-combat .monster-row .icon-fallback {
    width: 36px !important; height: 36px !important;
  }

  /* Hide the "Suggested for your level" block — it's redundant once
   * the monster picker (with all tiers) is on the same screen. */


  /* PROFILE — ensure no overlap with the chat pill or bottom nav.
   * Final card needs bottom margin so it doesn't sit under the pill. */
  #panel-profile > *:last-child,
  #panel-profile .card:last-child {
    margin-bottom: 80px !important;
  }
  /* feat-buttons — switch back to single-column stacked (visible width is
   * tight after the padding reduction; 2-col makes labels truncate). */
  #panel-profile .feat-buttons,
  .feat-buttons {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  /* Active Effects card — compact the empty-state copy */
  #panel-profile #active-effects-card .card-body {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* TOPBAR — compact. Stats row should fit comfortably. */
  .topbar {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .top-stats {
    gap: 3px !important;
  }
  .t-stat {
    padding: 4px 6px !important;
    font-size: 11px !important;
    min-height: 30px !important;     /* was 36 in b108 */
  }
  .topbar button {
    min-height: 32px !important;     /* was 36 in b108 */
    padding: 4px 8px !important;
  }

  /* BOTTOM NAV — slightly tighter than b108's 52px. 48 + safe-area
   * still hits Apple's 44 minimum and saves vertical space. */
  .bn-btn,
  .bottom-nav button {
    min-height: 48px !important;     /* was 52 */
    min-width: 52px !important;
    padding: 6px 4px !important;
  }
  .bottom-nav {
    height: calc(56px + var(--safe-b, 0px)) !important;
  }
  /* Sync the panel padding-bottom and chat-pill bottom with the new height */
  .panel.active {
    padding-bottom: calc(56px + var(--safe-b, 0px) + 8px) !important;
  }
  #chat-dock.mini {
    bottom: calc(72px + var(--safe-b, 0px)) !important;
  }
}

/* ============================================================
 * b108 — General mobile polish (real-phone "feels like an app")
 * ============================================================
 * Five universal-suspect issues on real mobile browsers:
 *   #1 tap targets too small (Apple HIG: 44×44 minimum)
 *   #4 300ms tap delay (touch-action: manipulation)
 *   #5 bottom safe-area-inset (iPhone home indicator)
 *   #6 soft keyboard covering inputs
 *   #8 visual cramping (fonts/padding bumped up)
 * ============================================================ */

/* #4 — Kill the 300ms tap delay everywhere. iOS Safari adds it on
 * any clickable element unless touch-action says otherwise. This
 * single rule is responsible for 80% of "feels laggy on mobile". */
html {
  touch-action: manipulation;
}
button, a, [role="button"], .btn, .nav-btn, .bn-btn,
.bounty-option, .skill-tile, .activity-card, .iap-card,
.combat-style-buttons > *, .csb-btn, .shop-row,
.monster-row, .invc-tile, .td-slot {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212, 74, 58, .25); /* wax-red flash */
}

/* #5 — Safe-area padding for iPhone home indicator + notch */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  .bottom-nav {
    padding-bottom: var(--safe-b) !important;
    height: calc(60px + var(--safe-b)) !important;
  }
  .topbar {
    padding-top: max(8px, var(--safe-t)) !important;
  }
  /* So content above the bottom nav isn't hidden behind it. */
  .main, #app .main, .panel.active {
    padding-bottom: calc(60px + var(--safe-b) + 8px) !important;
  }
}

/* #1 — Tap targets ≥44px on key interactive elements */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  .bn-btn,
  .bottom-nav button {
    min-height: 52px !important;
    min-width: 56px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
  }
  .bn-btn .ic {
    font-size: 22px !important;
    margin-bottom: 2px;
  }
  /* Topbar pills (Quests, stats, gear) */
.topbar button,
.topbar .t-stat {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }
  /* Monster cards / bounty cards / shop rows */
  .bounty-option,
  .monster-row,
  .shop-row {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }
  /* Accept / Build / Buy buttons inside cards */
  .bounty-option button,
  .shop-row button,
  .iap-card button,
  .btn-sm {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  /* Combat-style picker buttons */
  .csb-btn,
  .combat-style-buttons > * {
    min-height: 48px !important;
    padding: 10px 8px !important;
  }
  /* Activity tiles (left sidebar in Activities) */
  .activity-card,
  .skill-tile {
    min-height: 64px !important;
  }
  /* Inventory paper-doll slots */
  .td-doll .td-slot {
    min-height: 56px !important;
  }
}

/* #8 — Reduce visual cramping. Bigger base text + breathing room. */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  body {
    font-size: 14px;
    line-height: 1.45;
  }
  .panel.active {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .card {
    margin-bottom: 12px !important;
  }
  /* Bestiary / Achievements / similar grid items */
.iap-grid {
    gap: 10px !important;
  }
}

/* #6 — Soft-keyboard handling: when chat input or any text field
 * is focused on phone, keep it visible above the keyboard. */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  body.kb-open #chat-dock.full {
    bottom: 0 !important;
    height: 50vh !important;
  }
  body.kb-open .panel.active {
    padding-bottom: 50vh !important;
  }
}

/* ============================================================
 * Phone-specific (<=400px) — extra-tight tuning
 * ============================================================ */
@media (max-width: 400px) {
  /* Topbar stats: shrink slightly so 5 indicators fit */
  .top-stats .t-stat {
    padding: 2px 4px !important;
    font-size: 11px !important;
  }
  /* House icon down a hair to keep room for label + cost */
  #panel-house .shop-row .si,
  #panel-house .shop-row .si img {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}e: 12px;
}
body[data-theme="cozy-light"] .card-head .card-sub {
  color: #7a5a2a;
  font-weight: 600;
  font-size: 11px;
  font-family: var(--f-ui);
}
/* Card body padding (legacy uses padding on .card; offset for the band) */
body[data-theme="cozy-light"] .card .card-body {
  padding: 14px;
}
/* Standalone .card-title used outside .card-head still reads */
body[data-theme="cozy-light"] .card-title { color: var(--ink); font-weight: 700; }
body[data-theme="cozy-light"] .card-sub { color: var(--ink-2); }

/* Scrollbars on parchment — make the thumb actually visible */
body[data-theme="cozy-light"] ::-webkit-scrollbar-thumb {
  background: rgba(122,94,58,.25);
}
body[data-theme="cozy-light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(122,94,58,.45);
}

/* Status pill ('Offline · sign in to sync') */


/* Quests + dock-line elements that span the topbar */


/* Activity bar — overrides both legacy.css gradient AND
 * audit-overrides.css's `.activity-bar.v2 { background: ... !important }`
 * so we need !important too to win. */
body[data-theme="cozy-light"] .activity-bar,
body[data-theme="cozy-light"] .activity-bar.v2 {
  background: linear-gradient(180deg, rgba(255,247,224,.85), rgba(237,224,184,.65)) !important;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
body[data-theme="cozy-light"] .activity-bar.idle,
body[data-theme="cozy-light"] .activity-bar.v2.idle {
  background: rgba(237,224,184,.55) !important;
}
body[data-theme="cozy-light"] .activity-bar.idle .ab-name {
  color: var(--ink-2);
}
body[data-theme="cozy-light"] .ab-name {
  color: var(--ink);
}
body[data-theme="cozy-light"] .ab-icon {
  background: linear-gradient(135deg, var(--green-bg), rgba(95,124,61,.06));
  border: 1px solid rgba(95,124,61,.32);
}
body[data-theme="cozy-light"] .ab-progress {
  background: rgba(122,94,58,.18);
}
body[data-theme="cozy-light"] .ab-progress > i {
  background: linear-gradient(90deg, var(--green), #7a9c5d);
}
body[data-theme="cozy-light"] .ab-meta {
  color: var(--ink-2);
}
body[data-theme="cozy-light"] .ab-meta b {
  color: var(--gold);
}

/* ============================================================
 * COZY LIGHT — text-color readability sweep
 * Replaces all "color: var(--gold|--gold-2)" text uses with
 * dark ink unless the text genuinely is meant to feel like a
 * highlight (currency values, level numbers, key stat readouts).
 * ============================================================ */
/* Sidebar group labels ("ADVENTURE", "ECONOMY", "HOMESTEAD") */
body[data-theme="cozy-light"] .nav-group-label {
  color: var(--ink-3) !important;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 10px;
}

/* Profile dashboard sub-titles + key headers */
body[data-theme="cozy-light"] .dash-user-sub,
body[data-theme="cozy-light"] #dash-user-sub,
body[data-theme="cozy-light"] #dash-skills-sub,
body[data-theme="cozy-light"] #dash-active-sub,
body[data-theme="cozy-light"] #dash-obj-sub { color: var(--ink-2); }

/* All "Live" / "Tier 1" / etc. badges in card heads */
body[data-theme="cozy-light"] .card-head .card-sub {
  color: var(--ink-2);
  font-weight: 600;
}

/* Stat-card values — dark for readability, gold only for the gold tile */
body[data-theme="cozy-light"] .stat-num { color: var(--ink); font-weight: 800; }



/* Buttons (Achievements, Bestiary, LIFETIME STATS, Last Session) */
body[data-theme="cozy-light"] .btn {
  background: rgba(255,247,224,.6);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
body[data-theme="cozy-light"] .btn:hover {
  background: rgba(255,247,224,.95);
  border-color: var(--gold);
  color: var(--ink);
}
body[data-theme="cozy-light"] .btn.btn-primary,
body[data-theme="cozy-light"] .btn-primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #2a1a0c;
  border-color: var(--gold);
  font-weight: 700;
}
body[data-theme="cozy-light"] .btn.btn-danger,
body[data-theme="cozy-light"] .btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red);
}

/* Gold + gem stats in topbar (these SHOULD stay gold/gem-colored
   because they encode meaning, but use the deeper ramp shade for
   contrast on parchment) */
body[data-theme="cozy-light"] .t-stat.gold .ic { color: var(--gold); }
body[data-theme="cozy-light"] .t-stat.gem .ic { color: var(--gem); }
body[data-theme="cozy-light"] .t-stat .lab {
  color: var(--ink-3);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Quests strip ("QUESTS · No active quests") + click-to-open hint */



/* Companion name (e.g. "Fox (Lv 2)") on profile dashboard */




/* General fallback: ANY element using var(--gold-2) for color
   that lands on parchment becomes hard to read. Replace top-level
   uses where they appear as TEXT (not borders/bg). The pattern
   we use for card headers, badges, etc. */
body[data-theme="cozy-light"] .card-head .card-title {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .04em;
}

/* Brand "HEARTHRISE / IDLE HOMESTEAD" in sidebar — keep gold but use
   the deeper warm gold so it doesn't hurt to read */
body[data-theme="cozy-light"] .brand-name { color: #8c5d1a; }
body[data-theme="cozy-light"] .brand-name small { color: var(--ink-3); }

/* ============================================================
 * PROFILE: CHARACTER SHEET REDESIGN
 *
 * Treats the entire #panel-profile as ONE big parchment character
 * sheet, not a 5-card dashboard. Inner cards become sections of
 * the sheet — no individual borders, no card heads, separated by
 * ornamental gold rules. A wax seal sits bottom-right and four
 * corner flourishes frame the page.
 *
 * Why this approach: the original markup has 5 .card children
 * (#dash-user, #dash-active, #dash-objectives, #dash-skills,
 * #dash-homestead). Replacing that markup would break the engine's
 * render loop. Instead we suppress the card chrome via CSS and
 * unify them visually.
 * ============================================================ */
/* Scope all panel-sheet styles to .active so we don't override
   legacy's `.panel { display: none }` for inactive tabs. */
body[data-theme="cozy-light"] #panel-profile.active {
  /* The sheet itself: thick parchment with gold double-border, drop
     shadow so it floats on the homestead landscape, ornamental
     corners painted via background-image (one SVG, mirrored 4×). */
  position: relative;
  margin: 16px;
  padding: 56px 64px 80px;
  background:
    /* corner flourishes — top-left, top-right (mirrored), bottom-left (mirrored), bottom-right (rotated 180) */
    url("../../assets/ornaments/corner-flourish.svg") top    left    / 64px 64px no-repeat,
    url("../../assets/ornaments/corner-flourish.svg") top    right   / 64px 64px no-repeat,
    url("../../assets/ornaments/corner-flourish.svg") bottom left    / 64px 64px no-repeat,
    url("../../assets/ornaments/corner-flourish.svg") bottom right   / 64px 64px no-repeat,
    /* parchment fill */
    linear-gradient(180deg, #fff8e2 0%, #faedc4 60%, #f4e4bc 100%);
  /* Mirror the corner SVGs via filter so each corner reads correctly */
  border: 1px solid #b8893e;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,247,224,.7),
    inset 0 0 0 6px transparent,
    inset 0 0 0 7px rgba(184,137,62,.3),     /* gold inner rule */
    0 4px 18px rgba(60,40,16,.22),
    0 2px 4px rgba(60,40,16,.12);
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "user user"
    "left right"
    "left bottom"
    "ribbon ribbon";
  gap: 24px 36px;
  min-height: calc(100vh - 200px);
}

/* Mirror the SVG flourishes per corner using transforms on
   pseudo-elements. The bg-image approach above lays the same SVG
   four times; we overlay rotated copies via ::before/::after. */
body[data-theme="cozy-light"] #panel-profile::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  background: url("../../assets/ornaments/corner-flourish.svg") center/contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
body[data-theme="cozy-light"] #panel-profile::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 64px; height: 64px;
  background: url("../../assets/ornaments/corner-flourish.svg") center/contain no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
/* Bottom-right corner gets the wax seal instead of a flourish */
body[data-theme="cozy-light"] #panel-profile.active {
  background-image:
    url("../../assets/ornaments/corner-flourish.svg"),
    url("../../assets/ornaments/corner-flourish.svg"),
    url("../../assets/ornaments/wax-seal.svg"),
    linear-gradient(180deg, #fff8e2 0%, #faedc4 60%, #f4e4bc 100%);
  background-position: top left, top right, bottom right 24px, center;
  background-size: 64px 64px, 64px 64px, 86px 86px, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
/* Adjust ::before/::after to handle remaining corners */
body[data-theme="cozy-light"] #panel-profile::before {
  top: 0; right: 0;
  transform: scaleX(-1);
}
body[data-theme="cozy-light"] #panel-profile::after {
  bottom: 0; left: 0;
  transform: scaleY(-1);
}

/* Suppress the card chrome on every dashboard child — the panel
   IS the card now. Children are sections of the sheet. */
body[data-theme="cozy-light"] #panel-profile .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
body[data-theme="cozy-light"] #panel-profile .card-head {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 0 4px 0 !important;
}
body[data-theme="cozy-light"] #panel-profile .card-head::after {
  /* Replace the gold underline with a wider ornamental rule */
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%) !important;
  height: 1px !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  opacity: .65;
}
body[data-theme="cozy-light"] #panel-profile .card-head .card-title {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .22em;
  color: #6a3e0c;
}
body[data-theme="cozy-light"] #panel-profile .card-head .card-title::before {
  /* Slightly different ornament for the sheet sections */
  content: "✦ ";
  color: var(--gold);
  margin-right: 4px;
}
body[data-theme="cozy-light"] #panel-profile .card-body {
  padding: 8px 0 0 0 !important;
}

/* Grid placement of the dashboard children */
body[data-theme="cozy-light"] #panel-profile #dash-user { grid-area: user; }
body[data-theme="cozy-light"] #panel-profile #dash-active { grid-area: right; }
body[data-theme="cozy-light"] #panel-profile #dash-objectives { grid-area: bottom; }
body[data-theme="cozy-light"] #panel-profile #dash-skills { grid-area: left; }
body[data-theme="cozy-light"] #panel-profile #dash-homestead { grid-area: ribbon; }

/* Top section: name + portrait — make it the calligraphic title block */
body[data-theme="cozy-light"] #panel-profile #dash-user .card-head {
  display: none !important;        /* don't show "PROFILE" — we'll let the player name BE the title */
}
body[data-theme="cozy-light"] #panel-profile #dash-user-body {
  text-align: center;
  position: relative;
  padding-bottom: 18px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%) 1;
}
/* When the engine renders the user body, it normally shows
   "Adventurer / Offline play / Sign in / 4 stat tiles / companion".
   We use sibling selectors to push the layout into a header look. */
/* ─── Activity card (top header) → title block ─── */
body[data-theme="cozy-light"] #panel-profile #dash-user-body .activity-card {
  background: transparent !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: 88px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas: "portrait title signin" "portrait subtitle signin";
  gap: 4px 18px;
  padding: 0 0 18px 0 !important;
  align-items: center;
}
/* Player avatar — gold-rimmed portrait frame */
body[data-theme="cozy-light"] #panel-profile .activity-card .avatar,
body[data-theme="cozy-light"] #panel-profile .activity-card > :first-child {
  grid-area: portrait;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff4d2, #d4a55a) !important;
  border: 3px double #b8893e !important;
  box-shadow: 0 0 0 2px #fff8e2, 0 4px 10px rgba(60,40,16,.25);
  font-size: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* The name "Adventurer" — calligraphic title */
body[data-theme="cozy-light"] #panel-profile .activity-card > div:nth-child(2) > :first-child {
  grid-area: title;
  font-family: var(--f-display);
  font-size: 32px !important;
  font-weight: 600;
  letter-spacing: .04em;
  color: #5c2d08 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  margin: 0;
  line-height: 1.05;
}
/* Subtitle line — Quicksand at readable size + dark color, NOT Caveat */
body[data-theme="cozy-light"] #panel-profile .activity-card > div:nth-child(2) > :nth-child(2) {
  grid-area: subtitle;
  font-family: var(--f-ui);
  font-size: 13px !important;
  color: #5c3d12 !important;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .04em;
  margin: 0;
}
/* Sign In button — wax-stamp style on the right */
body[data-theme="cozy-light"] #panel-profile .activity-card .btn,
body[data-theme="cozy-light"] #panel-profile .activity-card button {
  grid-area: signin;
  align-self: center;
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border: 2px solid #5a1208 !important;
  font-family: var(--f-display) !important;
  font-size: 11px !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(60,40,16,.3);
}
body[data-theme="cozy-light"] #panel-profile .activity-card .btn:hover,
body[data-theme="cozy-light"] #panel-profile .activity-card button:hover {
  filter: brightness(1.1);
}

/* Title block ornamental rule beneath */
body[data-theme="cozy-light"] #panel-profile #dash-user-body .activity-card::after {
  content: "";
  grid-column: 1 / -1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-top: 14px;
}

/* ─── KPI row → ledger rows with leader dots ─── */
body[data-theme="cozy-light"] #panel-profile #dash-user-body .kpi-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px !important;
  margin: 18px 0 8px;
}
body[data-theme="cozy-light"] #panel-profile #dash-user-body .kpi {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 8px 0 !important;
  border-bottom: 1px dotted rgba(122,94,58,.4) !important;
  position: relative;
}
/* SPAN (label) on the left, B (value) on the right */
body[data-theme="cozy-light"] #panel-profile #dash-user-body .kpi span {
  order: 1 !important;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .18em;
  color: #6a3e0c;
  text-transform: uppercase;
}
body[data-theme="cozy-light"] #panel-profile #dash-user-body .kpi b {
  order: 2 !important;
  font-family: var(--f-display);
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* ─── Companion card → small inline tile, no progress bar ─── */
body[data-theme="cozy-light"] #panel-profile .companion-card {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  padding: 10px 14px !important;
  margin: 18px 0 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  width: auto !important;
  max-width: 320px;
}
body[data-theme="cozy-light"] #panel-profile .companion-card .cc-icon {
  font-size: 28px;
  width: 36px;
  flex-shrink: 0;
}
body[data-theme="cozy-light"] #panel-profile .companion-card .cc-info {
  display: flex;
  flex-direction: column;
}
body[data-theme="cozy-light"] #panel-profile .companion-card .cc-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: .04em;
}
body[data-theme="cozy-light"] #panel-profile .companion-card .cc-meta {
  font-family: var(--f-ui);
  font-size: 11px;
  color: var(--ink-2);
  font-style: italic;
}
/* Kill the full-width progress bar — Tyler's explicit ask */
body[data-theme="cozy-light"] #panel-profile .companion-card .cc-bar {
  display: none !important;
}

/* Buttons row at the bottom of profile (Achievements, Bestiary,
   LIFETIME STATS, Last Session Summary) — ribbon under the sheet */
body[data-theme="cozy-light"] #panel-profile .feat-buttons,
body[data-theme="cozy-light"] #panel-profile .stats-btn-trigger {
  margin-top: 12px;
}
body[data-theme="cozy-light"] #panel-profile .btn {
  background: linear-gradient(180deg, #faedc4, #ecd5a0);
  border: 1px solid var(--line-strong);
  color: #3d2817;
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
body[data-theme="cozy-light"] #panel-profile .btn:hover {
  background: linear-gradient(180deg, #fff4d2, #f0d8a0);
  border-color: var(--gold);
}

/* All four profile-bottom buttons (ACHIEVEMENTS / BESTIARY /
   LIFETIME STATS / LAST SESSION SUMMARY) — force EXACTLY the same
   height + padding + box-sizing so they line up perfectly. Uses
   .feat-buttons descendant + .stats-btn-trigger as a catch-all. */
body[data-theme="cozy-light"] #panel-profile .feat-buttons .btn,
body[data-theme="cozy-light"] #panel-profile .stats-btn-trigger {
  background: linear-gradient(180deg, #faedc4, #ecd5a0) !important;
  background-color: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: #3d2817 !important;
  font-family: var(--f-display) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 0 22px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
/* The feat-buttons row gets consistent gap */
body[data-theme="cozy-light"] #panel-profile .feat-buttons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap;
  align-items: center;
}
body[data-theme="cozy-light"] #panel-profile .stats-btn-trigger:hover {
  background: linear-gradient(180deg, #fff4d2, #f0d8a0) !important;
  border-color: var(--gold) !important;
}

/* Active Effects section — make it look like a sub-block, not a card */
body[data-theme="cozy-light"] #panel-profile #dash-active .card-head .card-title {
  /* Keep the Active Effects label visible — it serves as a section heading */
  display: inline-block;
}
body[data-theme="cozy-light"] #panel-profile h4 {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: .18em;
  color: #6a3e0c;
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dotted rgba(184,137,62,.4);
  text-transform: uppercase;
}

/* FOOD BUFFS / HOUSE BUFFS section headers — darker for readability */
body[data-theme="cozy-light"] .eff-section-h {
  color: #4a2810 !important;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
}

/* The "No food buffs active. Cook buff foods to add bonuses." paragraph
   below each section header — also too faded by default */
body[data-theme="cozy-light"] .eff-panel .eff-empty,
body[data-theme="cozy-light"] .eff-panel p {
  color: var(--ink-2) !important;
  font-style: normal !important;
}

/* ─── Topbar Quests button (replaces .global-quests-strip) ───
   Hide the original full-width strip; the new wax-stamp red
   button injected by quests-topbar-button.js sits in .top-stats
   next to the Combat stat. */
.global-quests-strip { display: none !important; }

body[data-theme="cozy-light"] #hr-quests-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #d44a3a, #8b2a1f);
  color: #fff8e2;
  border: 2px solid #5a1208;
  border-radius: 4px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(60,40,16,.3);
  transition: filter .12s, transform .12s;
}
#hr-quests-btn:hover { filter: brightness(1.12); }
#hr-quests-btn:active { transform: translateY(1px); }
body[data-theme="cozy-light"] #hr-quests-btn .hr-q-count {
  background: rgba(255,247,224,.95);
  color: #8b2a1f;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--f-ui);
  min-width: 18px;
  text-align: center;
}
body[data-theme="cozy-light"] #hr-quests-btn.no-active .hr-q-count {
  background: rgba(0,0,0,.18);
  color: #fff8e2;
}

/* Center any "Sign in" button inside the user header so it sits like a callout */
body[data-theme="cozy-light"] #panel-profile #dash-user-body .btn-primary {
  display: inline-block;
  margin: 12px auto 8px;
}

/* Companion card inside profile — small inline strip rather than
   a full-width tile. */
body[data-theme="cozy-light"] #panel-profile [data-companion] {
  background: rgba(255,247,224,.6);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  margin-top: 14px;
}

/* On smaller widths, collapse the grid */
@media (max-width: 1100px) {
  body[data-theme="cozy-light"] #panel-profile.active {
    grid-template-columns: 1fr;
    grid-template-areas:
      "user"
      "left"
      "right"
      "bottom"
      "ribbon";
    padding: 40px 28px 60px;
  }
}

/* ============================================================
 * UNIVERSAL PANEL SHEET — all OTHER panels (combat, inventory,
 * skills, farm, house, social, shop, character, dungeons, bounty)
 * get the same parchment-sheet frame as Profile, but keep their
 * existing internal multi-card layouts.
 * ============================================================ */
body[data-theme="cozy-light"] .panel.active:not(#panel-profile) {
  position: relative;
  margin: 16px;
  padding: 32px 40px 48px;
  background-color: #f4e4bc;
  background-image:
    url("../../assets/ornaments/corner-flourish.svg"),
    url("../../assets/ornaments/corner-flourish.svg"),
    linear-gradient(180deg, #fff8e2 0%, #faedc4 60%, #f4e4bc 100%);
  background-position: top left, top right, center;
  background-size: 56px 56px, 56px 56px, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border: 1px solid #b8893e;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,247,224,.7),
    inset 0 0 0 7px rgba(184,137,62,.3),
    0 4px 18px rgba(60,40,16,.22),
    0 2px 4px rgba(60,40,16,.12);
}
/* Mirror the top-right corner SVG */
body[data-theme="cozy-light"] .panel.active:not(#panel-profile)::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  background: url("../../assets/ornaments/corner-flourish.svg") center/contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
/* Bottom-left flourish + bottom-right wax seal */
body[data-theme="cozy-light"] .panel.active:not(#panel-profile)::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 56px; height: 56px;
  background: url("../../assets/ornaments/corner-flourish.svg") center/contain no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}

/* Suppress the "PANEL" outer chrome on inner cards inside non-profile
   panels — let the cards themselves carry the smaller card-bands.
   Cards still keep their borders + shadows for separation, just
   styled cohesively. */
body[data-theme="cozy-light"] .panel.active:not(#panel-profile) .card {
  background: rgba(255,247,224,.55);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 6px rgba(122,94,58,.10);
}

/* Smaller padding for non-profile panels on narrower screens */
@media (max-width: 900px) {
  body[data-theme="cozy-light"] .panel.active:not(#panel-profile) {
    padding: 24px 18px 36px;
  }
}

/* ============================================================
 * Per-tab interior darkness overrides
 *
 * legacy.css ships dark navy gradients on `.combat-arena` and
 * `.combat-style-block` (and similar). Override their background-
 * image so they read as parchment too. Also catch the common
 * `rgba(0,0,0,.X)` darkening overlays inside cards.
 * ============================================================ */
/* Combat arena (the big "Pick a monster" area).
   The #panel-combat ID + .active selector in legacy beats simple
   class chains, so we mirror its specificity and use !important.
   Also nuke the ::before / ::after pseudo overlays which paint a
   dark image + dark gradient on top of the arena. */
body[data-theme="cozy-light"] #panel-combat.active .combat-arena {
  background-image: none !important;
  background-color: rgba(255,247,224,.55) !important;
  border: 1px solid var(--line-strong) !important;
}
body[data-theme="cozy-light"] #panel-combat.active .combat-arena::before,
body[data-theme="cozy-light"] #panel-combat.active .combat-arena::after {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  content: none !important;
}
body[data-theme="cozy-light"] #panel-combat.active .combat-empty {
  background: transparent !important;
  color: var(--ink-2) !important;
}

/* Combat style picker block at top — force parchment AND dark
   readable text on every descendant. */
body[data-theme="cozy-light"] .combat-style-block,
body[data-theme="cozy-light"] #panel-combat .combat-style-block {
  background-image: none !important;
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 6px;
}
body[data-theme="cozy-light"] .combat-style-block * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .combat-style-block b,
body[data-theme="cozy-light"] .combat-style-block strong {
  color: #5c2d08 !important;
  font-weight: 700;
}




/* Combat style chips — wax red for active to match design language */
body[data-theme="cozy-light"] .panel.active .chip.active {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border-color: #5a1208 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 3px rgba(60,40,16,.3) !important;
}

body[data-theme="cozy-light"] /* Stat boxes inside #combat-area — replace dark inset with parchment */
#combat-area .calc > div,


body[data-theme="cozy-light"] #combat-area .row.between {
  background: rgba(255,247,224,.7) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

/* "Suggested for your level" container + every monster row inside.
   Match #panel-combat specificity so we beat any internal styles. */
/* b217: light-theme twin of the rule above — same catch-all, same problem.
   Retired with the markup it targeted. */
body[data-theme="cozy-light"] #panel-combat .combat-arena [class*="suggest"] *,
body[data-theme="cozy-light"] #panel-combat .combat-arena .ce-mob *,
body[data-theme="cozy-light"] #panel-combat #combat-area > div * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-combat .combat-arena h2,
body[data-theme="cozy-light"] #panel-combat .combat-arena h3,
body[data-theme="cozy-light"] #panel-combat .combat-arena h4,
body[data-theme="cozy-light"] #panel-combat .combat-arena .label {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
  letter-spacing: .12em !important;
}

/* Loadout slot labels (Hel/Nec/Cap/Bod/Amm/Bel/Pan/Rin etc) */
body[data-theme="cozy-light"] .loadout-slot small,
body[data-theme="cozy-light"] .inv-slot small,
body[data-theme="cozy-light"] .eq-slot small {
  color: #3d2817 !important;
  background: rgba(255,247,224,.85) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================
 * READABILITY SLEDGEHAMMER
 *
 * Walked the UI as a user. Many text elements are still washed
 * out because legacy CSS uses var(--ink-3) (#a5896a / hint level)
 * or low-contrast hardcoded grays. The character-sheet UI demands
 * consistently dark text on parchment surfaces.
 *
 * These rules force readable text + parchment surfaces on every
 * element inside an active panel. If you find an element that
 * SHOULD stay muted (e.g. genuinely hint-level), add an
 * exception class.
 * ============================================================ */
/* All paragraphs, spans, divs, tds, lis inside panels — force
   readable cocoa unless they're already on a colored bg (chips,
   active buttons, etc.) */
body[data-theme="cozy-light"] .panel.active,
body[data-theme="cozy-light"] .panel.active p,
body[data-theme="cozy-light"] .panel.active li,
body[data-theme="cozy-light"] .panel.active td,
body[data-theme="cozy-light"] .panel.active label {
  color: #3d2817;
}

/* All elements using --ink-3 (the muted hint color) inside panels
   get bumped up one shade so they're actually readable. The
   --ink-3 default is #a5896a which fades on parchment. */
body[data-theme="cozy-light"] .panel.active [style*="--ink-3"],
body[data-theme="cozy-light"] .panel.active .muted,
body[data-theme="cozy-light"] .panel.active .hint,
body[data-theme="cozy-light"] .panel.active .ss-meta,
body[data-theme="cozy-light"] .panel.active .meta {
  color: #6a4823 !important;
}

/* Headers / labels inside panels: deeper warm brown for clear hierarchy */
body[data-theme="cozy-light"] .panel.active h1,
body[data-theme="cozy-light"] .panel.active h2,
body[data-theme="cozy-light"] .panel.active h3,
body[data-theme="cozy-light"] .panel.active h4,
body[data-theme="cozy-light"] .panel.active h5,
body[data-theme="cozy-light"] .panel.active legend,
body[data-theme="cozy-light"] .panel.active .label {
  color: #5c2d08 !important;
}

/* Catch ANY element with a hardcoded dark navy/gray rgba background
   inside an active panel and force it to parchment. We can't detect
   colors via CSS, but we can target common dark-bg patterns by
   inverting the most likely culprits — anything that uses inline
   `style="background:rgba(0,0,0..."` we override via attribute
   selector. */
body[data-theme="cozy-light"] .panel.active [style*="background:rgba(0"],
body[data-theme="cozy-light"] .panel.active [style*="background: rgba(0"],
body[data-theme="cozy-light"] .panel.active [style*="background:#0"],
body[data-theme="cozy-light"] .panel.active [style*="background:#1"],
body[data-theme="cozy-light"] .panel.active [style*="background-color:rgba(0"],
body[data-theme="cozy-light"] .panel.active [style*="background:rgba(0"],
body[data-theme="cozy-light"] .panel.active [style*="background: rgba(0"],
body[data-theme="cozy-light"] .panel.active [style*="background:#0"],
body[data-theme="cozy-light"] .panel.active [style*="background:#1"],
body[data-theme="cozy-light"] .panel.active [style*="background-color:rgba(0"] {
  background: rgba(255,247,224,.65) !important;
  color: #3d2817 !important;
}

/* Tables inside panels — readable rows */
body[data-theme="cozy-light"] .panel.active table,
body[data-theme="cozy-light"] .panel.active table td,
body[data-theme="cozy-light"] .panel.active table th {
  color: #3d2817 !important;
  background: transparent !important;
}
body[data-theme="cozy-light"] .panel.active table th {
  color: #5c2d08 !important;
  font-weight: 700;
}
body[data-theme="cozy-light"] .panel.active table tr:nth-child(even) td {
  background: rgba(255,247,224,.4) !important;
}

/* "+0%" / "+5% combat XP" / similar stat-line lozenges (House/Bonuses) */
body[data-theme="cozy-light"] .panel.active [class*="-row"] {
  color: #3d2817;
}
body[data-theme="cozy-light"] .panel.active [class*="-val"],
body[data-theme="cozy-light"] .panel.active [class*="-amount"] {
  color: #5c2d08 !important;
  font-weight: 700;
}

/* HERO panel + WEAPON STYLES + BONUSES + ACTIVE STYLE side blocks
   in inventory + character panels. Force their numbers readable. */
body[data-theme="cozy-light"] .panel.active .bonuses *,
body[data-theme="cozy-light"] .panel.active [class*="hero-card"] *,
body[data-theme="cozy-light"] .panel.active [class*="weapon-style"] * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .panel.active .bonuses b {
  color: #5c2d08 !important;
  font-weight: 700;
}

body[data-theme="cozy-light"] /* Bestiary / Achievements / Lifetime Stats / Last Session modals
   — they're not inside .panel but they use the same chrome */
.stats-modal,


body[data-theme="cozy-light"] .lifetime-stats,


body[data-theme="cozy-light"] .welcome-overlay,


body[data-theme="cozy-light"] .ach-overlay,


body[data-theme="cozy-light"] .acq-overlay,


body[data-theme="cozy-light"] .mon-detail {
  color: #3d2817;
}
body[data-theme="cozy-light"] .stats-modal *:not(button):not(input):not(select),

body[data-theme="cozy-light"] .lifetime-stats *:not(button):not(input):not(select),

body[data-theme="cozy-light"] .welcome-overlay *:not(button):not(input):not(select),

body[data-theme="cozy-light"] .ach-overlay *:not(button):not(input):not(select),

body[data-theme="cozy-light"] .acq-overlay *:not(button):not(input):not(select),

body[data-theme="cozy-light"] .mon-detail *:not(button):not(input):not(select) {
  color: #3d2817;
}

/* Activity bar text / labels readable on parchment */
body[data-theme="cozy-light"] .activity-bar,
body[data-theme="cozy-light"] .activity-bar * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .activity-bar b {
  color: #5c2d08 !important;
}

/* "+5% combat XP" / "42 members" / clan/friend descriptions on Social */
body[data-theme="cozy-light"] #panel-social * {
  color: #3d2817;
}
body[data-theme="cozy-light"] #panel-social .card-title,
body[data-theme="cozy-light"] #panel-social h3,
body[data-theme="cozy-light"] #panel-social h4 {
  color: #5c2d08 !important;
}

/* Mock-data and similar small sub-labels */
body[data-theme="cozy-light"] .panel.active .card-sub {
  color: #6a4823 !important;
  font-weight: 600;
}

/* House Bonuses "+0%" giant numbers — readable + dark not gold */
body[data-theme="cozy-light"] #panel-house [class*="bonus"] b,
body[data-theme="cozy-light"] #panel-house [class*="bonus"] strong {
  color: #5c2d08 !important;
  font-weight: 800;
  font-size: 18px;
}

/* Final fallback: any element in a panel that has color: var(--ink-3),
   var(--gold-2), var(--aqua-2) gets replaced by the readable cocoa */
body[data-theme="cozy-light"] .panel.active [style*="color:var(--ink-3)"],
body[data-theme="cozy-light"] .panel.active [style*="color: var(--ink-3)"] {
  color: #6a4823 !important;
}

body[data-theme="cozy-light"] /* ============================================================
 * SETTINGS MODAL — full readability pass
 * Settings has its own ss-* classes scattered through legacy +
 * settings-page.js. Force parchment + dark text everywhere.
 * ============================================================ */
#settings-modal .modal-card,


body[data-theme="cozy-light"] #settings-modal #settings-body {
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  color: #3d2817 !important;
  border: 1px solid #b8893e !important;
}
body[data-theme="cozy-light"] #settings-modal *,

body[data-theme="cozy-light"] #settings-body * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #settings-modal h1,

body[data-theme="cozy-light"] #settings-modal h2,

body[data-theme="cozy-light"] #settings-modal h3,

body[data-theme="cozy-light"] #settings-modal h4,

body[data-theme="cozy-light"] #settings-modal summary,

body[data-theme="cozy-light"] #settings-modal legend,

body[data-theme="cozy-light"] #settings-modal .modal-title,

body[data-theme="cozy-light"] #settings-body summary,

body[data-theme="cozy-light"] #settings-body h1,

body[data-theme="cozy-light"] #settings-body h2,

body[data-theme="cozy-light"] #settings-body h3,

body[data-theme="cozy-light"] #settings-body h4,

body[data-theme="cozy-light"] #settings-body legend {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
  letter-spacing: .04em;
}
body[data-theme="cozy-light"] /* Section labels (.ss-label) — dark + readable */
#settings-body .ss-label {
  color: #3d2817 !important;
  font-weight: 700 !important;
  font-size: 13px;
}
/* Hints + meta (.ss-hint, .ss-meta) — readable but slightly muted */
#settings-body .ss-hint,
#settings-body .ss-meta,
#settings-body .ss-card-meta {
  color: #6a4823 !important;
  font-style: normal !important;
}
body[data-theme="cozy-light"] /* Card titles inside settings (.ss-card-title) */
#settings-body .ss-card-title {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
}
body[data-theme="cozy-light"] /* Cards / rows / sections inside the settings body — parchment surface */
#settings-body .ss-card,

body[data-theme="cozy-light"] #settings-body .ss-row,

body[data-theme="cozy-light"] #settings-body details,

body[data-theme="cozy-light"] #settings-body details > div {
  background: rgba(255,247,224,.55) !important;
  border-color: var(--line) !important;
  color: #3d2817 !important;
}
#settings-body .ss-card {
  border: 1px solid var(--line-strong) !important;
  border-radius: 6px;
}
body[data-theme="cozy-light"] /* Inputs / selects / textareas inside settings */
#settings-body input,

body[data-theme="cozy-light"] #settings-body select,

body[data-theme="cozy-light"] #settings-body textarea {
  background: #fff7e0 !important;
  color: #3d2817 !important;
  border: 1px solid var(--line) !important;
}
/* Toggle pills / range sliders */
body[data-theme="cozy-light"] #settings-body .ss-toggle {
  background: rgba(255,247,224,.7) !important;
  color: #3d2817 !important;
  border: 1px solid var(--line) !important;
}
body[data-theme="cozy-light"] #settings-body .ss-toggle.on,
body[data-theme="cozy-light"] #settings-body .ss-toggle.active {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border-color: #5a1208 !important;
}
#settings-body .ss-toggle.on *,
#settings-body .ss-toggle.active * {
  color: #fff8e2 !important;
}
body[data-theme="cozy-light"] /* Buttons inside settings */
#settings-body .btn {
  background: linear-gradient(180deg, #faedc4, #ecd5a0) !important;
  color: #3d2817 !important;
  border: 1px solid var(--line-strong) !important;
}
body[data-theme="cozy-light"] #settings-body .btn.btn-danger {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border-color: #5a1208 !important;
}
#settings-body .btn.btn-danger * {
  color: #fff8e2 !important;
}
#settings-body .btn.btn-primary {
  background: linear-gradient(180deg, #d4a24c, #b8893e) !important;
  color: #2a1a0c !important;
  border-color: #8a5e2a !important;
  font-weight: 700;
}
body[data-theme="cozy-light"] /* The collapsible <details> section heads */
#settings-body details > summary {
  background: linear-gradient(180deg, #e8d4a0, #d8b878) !important;
  color: #5c2d08 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 6px;
  padding: 10px 14px !important;
  font-family: var(--f-display) !important;
  letter-spacing: .15em;
  text-transform: uppercase;
}
body[data-theme="cozy-light"] /* Save backup list rows */
#settings-body .ss-backup-list,

body[data-theme="cozy-light"] #settings-body .ss-backup-list * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #settings-body .ss-backup-list > div {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line) !important;
}

/* ============================================================
 * UNIVERSAL MODAL / OVERLAY READABILITY
 *
 * Every popover / modal / flyout / overlay used in the game
 * gets parchment surfaces + readable cocoa text. Catches all
 * common offender classes. Add new ones here as we find them.
 * ============================================================ */
/* All modal cards */
body[data-theme="cozy-light"] .modal-card,
body[data-theme="cozy-light"] .mon-detail-card,
body[data-theme="cozy-light"] .notif,
body[data-theme="cozy-light"] .acq-overlay > div,
body[data-theme="cozy-light"] .mon-detail > div,
body[data-theme="cozy-light"] .welcome-overlay > div,
body[data-theme="cozy-light"] .stats-modal > div,
body[data-theme="cozy-light"] .ach-overlay > div,
body[data-theme="cozy-light"] .lifetime-stats > div {
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  border: 1px solid #b8893e !important;
  color: #3d2817 !important;
  box-shadow: 0 8px 24px rgba(60,40,16,.4) !important;
}
/* Force readable text on every descendant of any modal/overlay */
body[data-theme="cozy-light"] .modal-card *,
body[data-theme="cozy-light"] .stats-modal *,
body[data-theme="cozy-light"] .lifetime-stats *,
body[data-theme="cozy-light"] .welcome-overlay *,
body[data-theme="cozy-light"] .ach-overlay *,
body[data-theme="cozy-light"] .acq-overlay *,
body[data-theme="cozy-light"] .mon-detail * {
  color: #3d2817;
}
/* But NOT button text on wax-red / colored buttons */
.modal-card button.btn-danger,
.modal-card button.btn-danger *,
.stats-modal button.btn-danger,
.stats-modal button.btn-danger *,
.welcome-overlay button.btn-danger,
.welcome-overlay button.btn-danger * {
  color: #fff8e2 !important;
}
/* Headers in modals */
body[data-theme="cozy-light"] .modal-card h1,
body[data-theme="cozy-light"] .modal-card h2,
body[data-theme="cozy-light"] .modal-card h3,
body[data-theme="cozy-light"] .modal-card h4,
body[data-theme="cozy-light"] .modal-card .modal-title,
body[data-theme="cozy-light"] .stats-modal h1,
body[data-theme="cozy-light"] .stats-modal h2,
body[data-theme="cozy-light"] .stats-modal h3,
body[data-theme="cozy-light"] .stats-modal h4,
body[data-theme="cozy-light"] .lifetime-stats h1,
body[data-theme="cozy-light"] .lifetime-stats h2,
body[data-theme="cozy-light"] .lifetime-stats h3,
body[data-theme="cozy-light"] .lifetime-stats h4,
body[data-theme="cozy-light"] .welcome-overlay h1,
body[data-theme="cozy-light"] .welcome-overlay h2,
body[data-theme="cozy-light"] .welcome-overlay h3,
body[data-theme="cozy-light"] .welcome-overlay h4,
body[data-theme="cozy-light"] .ach-overlay h1,
body[data-theme="cozy-light"] .ach-overlay h2,
body[data-theme="cozy-light"] .ach-overlay h3,
body[data-theme="cozy-light"] .ach-overlay h4,
body[data-theme="cozy-light"] .acq-overlay h1,
body[data-theme="cozy-light"] .acq-overlay h2,
body[data-theme="cozy-light"] .acq-overlay h3,
body[data-theme="cozy-light"] .acq-overlay h4,
body[data-theme="cozy-light"] .mon-detail h1,
body[data-theme="cozy-light"] .mon-detail h2,
body[data-theme="cozy-light"] .mon-detail h3,
body[data-theme="cozy-light"] .mon-detail h4 {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
  letter-spacing: .04em;
}
/* Numbers / values inside modals — pop them */
body[data-theme="cozy-light"] .modal-card b,
body[data-theme="cozy-light"] .stats-modal b,
body[data-theme="cozy-light"] .lifetime-stats b,
body[data-theme="cozy-light"] .welcome-overlay b,
body[data-theme="cozy-light"] .ach-overlay b,
body[data-theme="cozy-light"] .mon-detail b {
  color: #5c2d08 !important;
  font-weight: 700;
}
body[data-theme="cozy-light"] /* Inputs inside modals */
.modal-card input,

body[data-theme="cozy-light"] .modal-card select,

body[data-theme="cozy-light"] .modal-card textarea,

body[data-theme="cozy-light"] .stats-modal input,

body[data-theme="cozy-light"] .stats-modal select {
  background: #fff7e0 !important;
  color: #3d2817 !important;
  border: 1px solid var(--line) !important;
}
/* Modal close buttons */
body[data-theme="cozy-light"] .modal-card .stats-close,
body[data-theme="cozy-light"] .modal-card .modal-close,
body[data-theme="cozy-light"] .stats-modal .stats-close {
  color: #3d2817 !important;
  background: rgba(255,247,224,.7) !important;
  border: 1px solid var(--line) !important;
}
/* Backdrop / overlay outer (the dark transparent layer) */
.modal,
.modal::before,
.modal-overlay,
.welcome-overlay,
.stats-modal,
.lifetime-stats,
.ach-overlay,
.acq-overlay,
.mon-detail {
  background: rgba(40,25,12,.55) !important;
}

/* ============================================================
 * FTUE (first-time user tutorial) — parchment + cocoa
 * ============================================================ */
body[data-theme="cozy-light"] .hr-ftue,
body[data-theme="cozy-light"] .hr-ftue-overlay,
body[data-theme="cozy-light"] .ftue-card {
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  color: #3d2817 !important;
  border: 1px solid #b8893e !important;
  box-shadow: 0 8px 24px rgba(60,40,16,.4) !important;
}
body[data-theme="cozy-light"] .hr-ftue *,
body[data-theme="cozy-light"] .hr-ftue-overlay *,
body[data-theme="cozy-light"] .ftue-card * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .hr-ftue h1,
body[data-theme="cozy-light"] .hr-ftue h2,
body[data-theme="cozy-light"] .hr-ftue h3,
body[data-theme="cozy-light"] .ftue-card h1,
body[data-theme="cozy-light"] .ftue-card h2,
body[data-theme="cozy-light"] .ftue-card h3 {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
}
body[data-theme="cozy-light"] .hr-ftue button {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border: 2px solid #5a1208 !important;
  font-family: var(--f-display) !important;
}
body[data-theme="cozy-light"] /* ftue.js renders the live tour with .ftue-btn / .ftue-actions markup that the
   rules above don't cover. Its secondary button ships a dark navy bg (ftue.js
   inline),

body[data-theme="cozy-light"] but `.ftue-card *` forces cocoa text on it -> unreadable dark-on-dark.
   The modal is intentionally always-parchment,

body[data-theme="cozy-light"] so give the secondary buttons a
   matching parchment face (primary keeps its gold bg,

body[data-theme="cozy-light"] skip stays a link). */
.ftue-card .ftue-btn:not(.primary):not(.skip),

body[data-theme="cozy-light"] .ftue-actions .ftue-btn:not(.primary):not(.skip) {
  background: #fdf1d4 !important;
  border: 1px solid #c79a52 !important;
  color: #3d2817 !important;
  font-weight: 600 !important;
}
.ftue-card .ftue-btn:not(.primary):not(.skip):hover,
.ftue-actions .ftue-btn:not(.primary):not(.skip):hover {
  background: #f7e4bb !important;
}

/* ============================================================
 * UNTOUCHED TABS — Bounty Board, Stable, Skills detail, Market,
 * Dungeons, Shop. Apply same readability rules to ALL panels
 * (not just :active). Catches dynamically-loaded panel content.
 * ============================================================ */
body[data-theme="cozy-light"] .panel,
body[data-theme="cozy-light"] .panel * {
  color: #3d2817;
}
body[data-theme="cozy-light"] .panel h1,
body[data-theme="cozy-light"] .panel h2,
body[data-theme="cozy-light"] .panel h3,
body[data-theme="cozy-light"] .panel h4,
body[data-theme="cozy-light"] .panel .card-title {
  color: #5c2d08 !important;
}

body[data-theme="cozy-light"] /* Bounty Board specifically — bounty cards,


body[data-theme="cozy-light"] target text */
#panel-bounty .bounty-card,


body[data-theme="cozy-light"] #panel-bounty [class*="bounty-row"],


body[data-theme="cozy-light"] #panel-bounty [class*="bounty-card"] {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line-strong) !important;
}
body[data-theme="cozy-light"] #panel-bounty * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-bounty b,
body[data-theme="cozy-light"] #panel-bounty strong {
  color: #5c2d08 !important;
}

body[data-theme="cozy-light"] /* Stable / companions tab */
#panel-stable .companion-card,


body[data-theme="cozy-light"] #panel-stable [class*="comp-card"],


body[data-theme="cozy-light"] #panel-stable [class*="companion"] {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line-strong) !important;
}
body[data-theme="cozy-light"] #panel-stable * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-stable b,

body[data-theme="cozy-light"] #panel-stable strong {
  color: #5c2d08 !important;
}

/* Skills detail panel inside Activities — skill tile rows */
body[data-theme="cozy-light"] #panel-skills #skill-detail,
body[data-theme="cozy-light"] #panel-skills #skill-detail * {
  color: #3d2817 !important;
}




body[data-theme="cozy-light"] /* Market tab — listings,


body[data-theme="cozy-light"] search,


body[data-theme="cozy-light"] analytics */
#panel-market * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-market b,

body[data-theme="cozy-light"] #panel-market strong {
  color: #5c2d08 !important;
}
body[data-theme="cozy-light"] #panel-market [class*="listing"],

body[data-theme="cozy-light"] #panel-market [class*="market-row"],

body[data-theme="cozy-light"] #panel-market [class*="market-card"],

body[data-theme="cozy-light"] #panel-market form,

body[data-theme="cozy-light"] #panel-market fieldset,

body[data-theme="cozy-light"] #panel-market section {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line) !important;
}
body[data-theme="cozy-light"] #panel-market input,

body[data-theme="cozy-light"] #panel-market select {
  background: #fff7e0 !important;
  color: #3d2817 !important;
  border: 1px solid var(--line) !important;
}
/* "List an item" form — was rendering with an olive-green default
   background that broke the parchment look. Force parchment. */
body[data-theme="cozy-light"] #panel-market [class*="list-form"],
body[data-theme="cozy-light"] #panel-market [class*="market-form"],
body[data-theme="cozy-light"] #panel-market [class*="post-listing"] {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 6px;
  padding: 14px !important;
}

/* Shop / Premium store tab */
body[data-theme="cozy-light"] #panel-shop * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-shop b,
body[data-theme="cozy-light"] #panel-shop strong {
  color: #5c2d08 !important;
}
body[data-theme="cozy-light"] #panel-shop [class*="iap-card"],

body[data-theme="cozy-light"] #panel-shop [class*="store-card"],

body[data-theme="cozy-light"] #panel-shop [class*="shop-card"],

body[data-theme="cozy-light"] #panel-shop [class*="sku"] {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line-strong) !important;
}

body[data-theme="cozy-light"] /* Dungeons tab */
#panel-dungeons * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-dungeons b,

body[data-theme="cozy-light"] #panel-dungeons strong {
  color: #5c2d08 !important;
}
body[data-theme="cozy-light"] #panel-dungeons [class*="dungeon-card"],

body[data-theme="cozy-light"] #panel-dungeons [class*="key-card"] {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line-strong) !important;
}

body[data-theme="cozy-light"] /* Combat panel WITH monster selected — the fight UI */
#panel-combat .fighter,


body[data-theme="cozy-light"] #panel-combat .fighter *,


body[data-theme="cozy-light"] #panel-combat [class*="hp-bar"],


body[data-theme="cozy-light"] #panel-combat [class*="combat-info"] {
  color: #3d2817;
}
body[data-theme="cozy-light"] #panel-combat .fighter {
  background: rgba(255,247,224,.6) !important;
  border: 1px solid var(--line) !important;
}
body[data-theme="cozy-light"] #panel-combat .fighter b {
  color: #5c2d08 !important;
}

/* Activity bar items / quest strip — all readable */
body[data-theme="cozy-light"] .activity-bar *,
body[data-theme="cozy-light"] #global-quests-strip * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .activity-bar b,
body[data-theme="cozy-light"] #global-quests-strip b {
  color: #5c2d08 !important;
}

/* Item flyout / detail popovers */
body[data-theme="cozy-light"] .tooltip,
body[data-theme="cozy-light"] .tooltip * {
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .tooltip {
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  border: 1px solid #b8893e !important;
  box-shadow: 0 4px 12px rgba(60,40,16,.3) !important;
}

body[data-theme="cozy-light"] /* Chat dock body — readable on parchment too */
.chat-dock,


body[data-theme="cozy-light"] .chat-dock * {
  color: #3d2817;
}
body[data-theme="cozy-light"] .chat-dock {
  background: linear-gradient(180deg, #fff8e2, #f4e4bc) !important;
  border: 1px solid #b8893e !important;
}
body[data-theme="cozy-light"] .chat-dock .chat-msg b {
  color: #5c2d08 !important;
}

body[data-theme="cozy-light"] /* ============================================================
 * QA POLISH PASS — fixes from playtest
 * ============================================================ */

/* Broken-image fallback glyphs were rendering in soft gold at 70%
   opacity on parchment,


body[data-theme="cozy-light"] making them disappear. Force dark cocoa
   + full opacity so they actually read as the placeholder they are. */
.icon-fallback {
  color: #3d2817 !important;
  opacity: 1 !important;
  font-size: 22px !important;
  text-shadow: 0 1px 0 rgba(255,247,224,.5);
}

/* Bounty board monster icons — when the painted img is sized too
   large it forces the monster name onto a second line. Constrain
   to a small inline-block. */
.bounty-option .row.between b img,
.bounty-option b img,
.bounty-card b img {
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 4px;
}
.bounty-option .row.between b,
.bounty-option b,
.bounty-card b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
}

/* Activities skill tile icons — make the fallback glyphs prominent
   so the tile doesn't read as empty when the bundle PNG 404s. */
.skill-tile .sicon,
[class*="skill-tile"] .sicon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}
.skill-tile .sicon img {
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}
body[data-theme="cozy-light"] .skill-tile .sicon .icon-fallback {
  font-size: 28px !important;
  color: #5c2d08 !important;
  opacity: 1 !important;
}

/* Loadout / inventory paper-doll slot labels (those gray pills
   under each slot showing slot type abbreviations). Currently
   showing as empty/illegible. Force dark text + visible bg. */
body[data-theme="cozy-light"] .loadout-slot small,
body[data-theme="cozy-light"] .inv-slot small,
body[data-theme="cozy-light"] .eq-slot small,
body[data-theme="cozy-light"] .td-slot small,
body[data-theme="cozy-light"] [class*="td-slot"] small {
  color: #3d2817 !important;
  background: rgba(255,247,224,.9) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: .04em;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--line);
  text-shadow: none !important;
}

/* FTUE Step 1 has a Skip button that's dark-on-dark. Force it
   to a readable parchment+cocoa style. The hr-ftue module
   uses inline styles so we need !important. */
body[data-theme="cozy-light"] .hr-ftue [class*="skip"],
body[data-theme="cozy-light"] .hr-ftue button[data-act="skip"] {
  background: rgba(255,247,224,.85) !important;
  color: #3d2817 !important;
  border: 1px solid var(--line) !important;
  font-family: var(--f-display) !important;
  font-size: 11px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Make sure FTUE primary button (Take the tour / Got it / Next)
   stays in the wax-stamp red style */
body[data-theme="cozy-light"] .hr-ftue button[data-act="next"],
body[data-theme="cozy-light"] .hr-ftue button[data-act="primary"] {
  background: linear-gradient(180deg, #d44a3a, #8b2a1f) !important;
  color: #fff8e2 !important;
  border: 2px solid #5a1208 !important;
  font-family: var(--f-display) !important;
  font-size: 11px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body[data-theme="cozy-light"] /* Activity bar's skill icon (the small skill icon in the activity
   bar,


body[data-theme="cozy-light"] e.g. ⛏️ when mining) — when fallback fires here,


body[data-theme="cozy-light"] ensure it
   sits correctly inside the .ab-icon ring. */
.ab-icon .icon-fallback {
  font-size: 18px !important;
  color: #5c2d08 !important;
}

/* Skill detail panel skill icons in Activities — same broken-img
   issue. Force the inner image / fallback to fit the slot. */
.activities-grid img,
#skills-list img,
#skill-detail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================================
 * INVENTORY RIGHT SIDEBAR — HERO / WEAPON STYLES / BONUSES /
 * ACTIVE STYLE. The numbers are rendered with hardcoded
 * var(--gold-2) inline styles. Force them dark + readable.
 * ============================================================ */
body[data-theme="cozy-light"] #panel-inventory > * > *:last-child *,
body[data-theme="cozy-light"] #panel-inventory aside * {
  color: #3d2817 !important;
}
/* Stat numbers (the big bold ones) */
body[data-theme="cozy-light"] #panel-inventory b,
body[data-theme="cozy-light"] #panel-inventory strong {
  color: #5c2d08 !important;
  font-weight: 700;
}
/* Section headers in the right sidebar (HERO / WEAPON STYLES /
   BONUSES / ACTIVE STYLE) */
body[data-theme="cozy-light"] #panel-inventory .card-title,
body[data-theme="cozy-light"] #panel-inventory h3,
body[data-theme="cozy-light"] #panel-inventory h4,
body[data-theme="cozy-light"] #panel-inventory legend {
  color: #5c2d08 !important;
  font-family: var(--f-display) !important;
  letter-spacing: .12em !important;
}
/* Specifically: any element with class containing "stat" or "lv" or
   "value" gets the dark treatment */
body[data-theme="cozy-light"] #panel-inventory [class*="stat"] *,
body[data-theme="cozy-light"] #panel-inventory [class*="lv"] *,
body[data-theme="cozy-light"] #panel-inventory [class*="value"] *,
body[data-theme="cozy-light"] #panel-inventory [class*="num"] * {
  color: #3d2817 !important;
}
/* The big numbers (combat lv 5, total lv 39, HP 10/10) */
body[data-theme="cozy-light"] #panel-inventory [class*="big"],
body[data-theme="cozy-light"] #panel-inventory [class*="lg"] {
  color: #5c2d08 !important;
  font-weight: 800 !important;
}

/* Same treatment for character panel */
body[data-theme="cozy-light"] #panel-character * {
  color: #3d2817;
}
body[data-theme="cozy-light"] #panel-character b,
body[data-theme="cozy-light"] #panel-character strong,
body[data-theme="cozy-light"] #panel-character h1,
body[data-theme="cozy-light"] #panel-character h2,
body[data-theme="cozy-light"] #panel-character h3,
body[data-theme="cozy-light"] #panel-character h4,
body[data-theme="cozy-light"] #panel-character .card-title {
  color: #5c2d08 !important;
}

/* Stat tiles in the top-right of Character / Profile (5/39/50.3K/7).
   They're rendered with var(--gold-2) on a dark bg. Force parchment. */
body[data-theme="cozy-light"] #panel-character [class*="tile"],
body[data-theme="cozy-light"] #panel-character [class*="stat-card"],
body[data-theme="cozy-light"] #panel-profile [class*="tile"]:not(.inv-tile) {
  background: rgba(255,247,224,.65) !important;
  border: 1px solid var(--line-strong) !important;
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] #panel-character [class*="tile"] * {
  color: #3d2817 !important;
}

/* Soften all rgba(0,0,0,.X) icon-cell + slot insets inside panels.
   These are tiny squares (item icons, skill icons, etc) that read
   as too-dark on the parchment. Convert them to a warm-tan fill. */
body[data-theme="cozy-light"] .panel.active .csk-icon,
body[data-theme="cozy-light"] .panel.active .csk-bar,
body[data-theme="cozy-light"] .panel.active .eq-strip .eq-slot,
body[data-theme="cozy-light"] .panel.active .fighter .portrait,
body[data-theme="cozy-light"] .panel.active .inv-slot,
body[data-theme="cozy-light"] .panel.active .loadout-slot {
  background-color: rgba(232,210,164,.55) !important;
  border-color: var(--line) !important;
}

/* Hero / weapon-styles / bonuses sidebar boxes (inventory + character) */
body[data-theme="cozy-light"] .panel.active .bonuses,
body[data-theme="cozy-light"] .panel.active [class*="hero-card"],
body[data-theme="cozy-light"] .panel.active [class*="weapon-style-row"] {
  background: rgba(255,247,224,.5) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  color: var(--ink) !important;
}

/* ============================================================
 * COZY LIGHT — component fine-tuning
 * (kept separate so it's easy to spot what's structural vs polish)
 *
 * b222: every rule in this block used to be a PAIR — `body[data-theme="cozy-light"]
 * .topbar, :root .topbar { … }`. `:root` is <html>; the theme attribute lives on
 * <body>; so the `:root` half matched under EVERY theme and quietly painted the
 * light theme's component layer beneath Hearthlight. Same always-true bug as the
 * b216 `html:not([data-theme])` sweep, in a shape that sweep did not look for.
 * All 25 `:root <descendant>` halves are deleted — the cozy-light half of each
 * pair already covers the light theme, so Cozy Day is untouched. Two things had
 * genuinely been leaking under Hearthlight and are now free:
 *   .status-pill      — wore the light theme's plate + keyline
 *   .nav-btn.active   — the light theme's flat --gold-bg fill and a REAL 3px
 *                       border-left, which defeated b217's gilt wash and put a
 *                       second spine next to the intended inset one (and shifted
 *                       every nav label 3px right).
 * Never write `:root <selector>` in this file. `:root` is for token blocks only.
 * ============================================================ */

/* Light theme: softer button hover */
body[data-theme="cozy-light"] .btn:hover {
  background: var(--gold-bg);
  border-color: var(--line-strong);
}

/* Topbar gets a parchment seal feel in light mode */
body[data-theme="cozy-light"] .topbar {
  background: linear-gradient(180deg,#ede0b8,#e0d0a0);
  border-bottom: 1px solid var(--line-strong);
}

/* Sidebar — slightly recessed parchment */
body[data-theme="cozy-light"] .sidebar {
  background: #ede0b8;
  border-right: 1px solid var(--line);
}

body[data-theme="cozy-light"] .nav-btn {
  color: var(--ink-2);
}
body[data-theme="cozy-light"] .nav-btn.active {
  background: var(--gold-bg);
  color: var(--ink);
  border-left: 3px solid var(--gold);
}

/* Bottom nav (mobile) */
body[data-theme="cozy-light"] .bottom-nav {
  background: linear-gradient(180deg,#e8d4a0,#ede0b8);
  border-top: 1px solid var(--line-strong);
}
body[data-theme="cozy-light"] .bn-btn.active {
  color: var(--gold);
}

/* Chips: pill shape with parchment fill */
body[data-theme="cozy-light"] .chip {
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
body[data-theme="cozy-light"] .chip.active {
  background: var(--green);
  color: #faf0d4;
  border-color: var(--green);
}

/* Skill bars — use the green ramp */
body[data-theme="cozy-light"] .bar-fill,
body[data-theme="cozy-light"] .progress-bar > div {
  background: linear-gradient(90deg, var(--green), #7a9c5d);
}

/* HP bar — keep red */
body[data-theme="cozy-light"] .hp-fill {
  background: linear-gradient(90deg, var(--red), #c46850);
}

/* Modals — full parchment */
body[data-theme="cozy-light"] .modal-card {
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(60,40,20,.25);
}

/* Inputs */
body[data-theme="cozy-light"] input,
body[data-theme="cozy-light"] select,
body[data-theme="cozy-light"] textarea {
  background: #fff7e0;
  border: 1px solid var(--line);
  color: var(--ink);
}
body[data-theme="cozy-light"] input:focus,
body[data-theme="cozy-light"] select:focus,
body[data-theme="cozy-light"] textarea:focus {
  border-color: var(--gold);
  outline: 2px solid var(--gold-bg);
  outline-offset: 0;
}

/* Status pill — make sure offline/online states are visible on parchment */
body[data-theme="cozy-light"] .status-pill {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
body[data-theme="cozy-light"] .status-pill.on {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green);
}

/* Activity bar / topbar gold/gem stats — keep contrast */
body[data-theme="cozy-light"] .t-stat.gold {
  color: var(--gold);
  font-weight: 700;
}
body[data-theme="cozy-light"] .t-stat.gem {
  color: var(--gem);
}

/* Notifications, dock, etc. */
body[data-theme="cozy-light"] .notif {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(60,40,20,.18);
}

/* Bug-report + chat dock buttons read on parchment */
body[data-theme="cozy-light"] #hr-bug-btn {
  background: rgba(255,247,224,.95);
  color: var(--gold);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 4px rgba(60,40,20,.18);
}

/* ============================================================
 * Cozy Dark refinements (warm-dark only — rules above for
 * cozy-light don't apply, but legacy.css :root still does
 * — so dark just needs minor accent corrections).
 * ============================================================ */

body[data-theme="cozy-dark"] .topbar {
  background: linear-gradient(180deg,#36281b,#2a1f15);
  border-bottom: 1px solid var(--line);
}
body[data-theme="cozy-dark"] .sidebar {
  background: #36281b;
  border-right: 1px solid var(--line);
}
body[data-theme="cozy-dark"] .nav-btn.active {
  background: var(--gold-bg);
  color: var(--ink);
  border-left: 3px solid var(--gold);
}
body[data-theme="cozy-dark"] .modal-card {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
}
body[data-theme="cozy-dark"] .bar-fill,
body[data-theme="cozy-dark"] .progress-bar > div {
  background: linear-gradient(90deg, var(--green), #9bbf78);
}

/* ============================================================
 * Classic (RuneScape direction) — minimal pass for the toggle
 * preview. Polishing is post-beta if data shows demand.
 * ============================================================ */

body[data-theme="classic"] .topbar {
  background: #1f1a14;
  border-bottom: 2px solid var(--gold);
  font-family: var(--f-ui);
}
body[data-theme="classic"] .sidebar {
  background: #1f1a14;
  border-right: 2px solid var(--gold);
}
body[data-theme="classic"] .nav-btn { color: var(--gold-2); }
body[data-theme="classic"] .nav-btn.active {
  background: var(--gold);
  color: #1f1a14;
}
body[data-theme="classic"] .card {
  background: var(--bg-2);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px #b89e6c;
  border-radius: var(--r);
}
body[data-theme="classic"] .chip {
  background: var(--gold);
  color: #1f1a14;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--f-ui);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}
body[data-theme="classic"] .btn {
  background: #5c4a2e;
  color: var(--gold-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--f-ui);
}
body[data-theme="classic"] .btn:hover { background: #6c5a3e; }
body[data-theme="classic"] .btn.btn-primary {
  background: var(--gold);
  color: #1f1a14;
  font-weight: 700;
}
body[data-theme="classic"] .bar-fill,
body[data-theme="classic"] .progress-bar > div {
  background: var(--red);
}
body[data-theme="classic"] .modal-card {
  background: var(--bg-2);
  color: var(--ink);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 2px #b89e6c;
}

/* ============================================================
 * Hide the old "Day/Night" floating button — it's been
 * replaced by the Settings → Display theme picker. Old code
 * still creates it for now; we hide it here without ripping
 * the legacy code out (do that in Phase 3.5).
 * ============================================================ */
.lane1-toggle { display: none !important; }

/* ============================================================
 * b122: SENIOR QA + UI/UX MOBILE SWEEP
 *
 * Applies to portrait phones (≤540w) AND landscape phones
 * (height ≤540 AND width ≤900) so testers on either rotation
 * get the same polish.
 *
 * Fixes:
 *  - Hide wax seal background on Profile (overlapped content)
 *  - Profile feat-buttons → 2x2 grid on portrait
 *  - Character page panels → single column (kill right-side bleed)
 *  - Topbar → ultra-compact one-row layout
 *  - Combat FOES sub-tab DUNGEONS button → wraps cleanly
 *  - Inventory buttons get wax-stamp red theme
 * ============================================================ */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  /* --- Wax seal off on mobile (was bottom-right ornament that
         covered Lifetime Stats + Save Status cards on small
         viewports) --- */
body[data-theme="cozy-light"] #panel-profile.active {
    background-image:
      url("../../assets/ornaments/corner-flourish.svg"),
      url("../../assets/ornaments/corner-flourish.svg"),
      linear-gradient(180deg, #fff8e2 0%, #faedc4 60%, #f4e4bc 100%) !important;
    background-position: top left, top right, center !important;
    background-size: 48px 48px, 48px 48px, cover !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }
  /* Smaller corner flourishes too — they were 64px squares
     eating useful real estate on a 380px panel */
body[data-theme="cozy-light"] #panel-profile::before,
body[data-theme="cozy-light"] #panel-profile::after {
    width: 40px !important;
    height: 40px !important;
  }

  /* --- Profile feat-buttons row → 2x2 grid on portrait,
         single horizontal scroll-row in landscape --- */
#panel-profile .feat-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #panel-profile .feat-buttons > * {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 10px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --- Character page: single column, no right-side bleed --- */
  #panel-character,
  #panel-character > *,
  #panel-character .grid,
  #panel-character [class*="char-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #panel-character .char-row,
#panel-character > .grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }
  #panel-character .card,
  #panel-character .panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* --- Topbar ultra-compact: hide non-essentials, shrink pills --- */
  .topbar,
  #topbar {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    min-height: 0 !important;
  }
  .topbar .currency,
.topbar [class*="gold"],
.topbar [class*="gem"] {
    font-size: 11px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
  }
  .topbar .player-name,
  .topbar .username,
  .topbar [class*="-name"] {
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Kill any orphan dark squares (broken icon sources) in topbar */
  .topbar img:not([src]),
  .topbar img[src=""],
  .topbar .icon-broken { display: none !important; }

  /* --- Combat: FOES sub-tab DUNGEONS button --- */
#panel-combat [data-mobile-sub] .header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #panel-combat [onclick*="ungeon"],
#panel-combat button:has(> .em-icon) {
    flex: 0 1 auto !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  /* --- Inventory action buttons → wax-stamp red --- */
body[data-theme="cozy-light"] #panel-inventory .btn,
body[data-theme="cozy-light"] #panel-inventory [data-inv-action] {
    background: linear-gradient(180deg, #b6483a 0%, #8a3329 100%) !important;
    color: #fff8e2 !important;
    border: 1px solid #6c2a22 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }
  #panel-inventory .btn:hover {
    filter: brightness(1.08) !important;
  }
  #panel-inventory .btn.active {
    background: linear-gradient(180deg, #d35a4a 0%, #a83d31 100%) !important;
    box-shadow: inset 0 0 0 2px #f5c249, 0 1px 2px rgba(0,0,0,0.2) !important;
  }
  /* Keep the "secondary" muted ones legible — only theme primaries */
body[data-theme="cozy-light"] #panel-inventory .btn.btn-ghost {
    background: rgba(0,0,0,0.04) !important;
    color: #3d2817 !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    box-shadow: none !important;
  }
}

/* Portrait-only: 2x2 grid; landscape gets a horizontal scroll */
@media (max-height: 540px) and (max-width: 900px) and (orientation: landscape) {
  #panel-profile .feat-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
 * b123: cascade specificity hotfix
 *
 * b122's plain `#panel-profile .feat-buttons` rule (specificity
 * 0,1,1,0) was outranked by an existing theme-cozy rule
 * `body[data-theme="cozy-light"] #panel-profile .feat-buttons` (0,1,2,1)
 * which forced display:flex !important. Result: feat-buttons
 * stayed in a vertical stack on mobile.
 *
 * Same problem for the topbar: `.top-stats` flex-wrap was set
 * by another higher-specificity rule and my `.topbar` rule
 * couldn't reach the inner stats container.
 *
 * Fix: re-apply the same mobile rules but with the matching
 * theme-prefix selectors so specificity ties (last one wins).
 * ============================================================ */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  /* b124: keep .prof-toolbar HIDDEN on mobile — it's the desktop
     duplicate. The visible mobile container is .feat-buttons. */
body[data-theme="cozy-light"] #panel-profile .prof-toolbar {
    display: none !important;
  }
  /* Feat-buttons grid — themed selectors so specificity ties */
body[data-theme="cozy-light"] #panel-profile .feat-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: initial !important;
    margin: 12px 0 !important;
  }
  body[data-theme="cozy-light"] #panel-profile .feat-buttons > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Topbar inner stats container — kill the wrap */
.topbar .top-stats,
header.topbar .top-stats,
body[data-theme="cozy-light"] .topbar .top-stats {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    min-width: 0 !important;
  }
  .topbar .top-stats::-webkit-scrollbar { display: none !important; }
  .topbar .top-stats > * {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  .topbar .t-stat .lab { display: none !important; } /* labels eat space; numbers + icon are enough */
  .topbar .t-stat { gap: 2px !important; }
  .topbar .player { flex: 0 0 auto !important; min-width: 0 !important; }
  .topbar .player-avatar { width: 28px !important; height: 28px !important; }
  .topbar .player-name { font-size: 13px !important; }

  /* b132: hide low-priority topbar widgets so the essentials
     (avatar + Quests + CL + Gold + Gems) actually fit without
     horizontal scroll. Save / Settings / Notifications all live
     in the MORE menu on mobile already. */
  .topbar #status-pill,
  .topbar .streak-badge,
  .topbar #btn-notif,
  .topbar #btn-save,
  .topbar #btn-settings,
  .topbar [title="Total level"] {
    display: none !important;
  }

  /* Landscape phones can fit a tiny bit more — undo overflow scroll */
}
@media (max-height: 540px) and (max-width: 900px) and (orientation: landscape) {
  .topbar .top-stats { overflow-x: visible !important; }
  .topbar .t-stat .lab { display: inline !important; }
}

/* ============================================================
 * b129: skill / monster icon emoji visibility
 *
 * legacy.css forces `font-size:0 !important` on .sicon, .icon,
 * and .mi assuming the icon is always rendered as an <img> child.
 * When the bundle path map (_skillIcon / _monsterIcon) is empty
 * — which is the b122+ default for skills — the renderer puts the
 * emoji glyph directly in the span as text. font-size:0 hid it.
 *
 * Fix: if there's no <img> child, restore the emoji font-size.
 * `:has()` is widely supported in modern browsers (2023+).
 * ============================================================ */
.skill-tile .sicon:not(:has(img)),
.skill-card .sicon:not(:has(img)),
.skill-card .icon:not(:has(img)),
.monster-row .mi:not(:has(img)) {
  font-size: 24px !important;
  line-height: 1 !important;
}

/* ============================================================
 * b127: Quests modal cozy-light theming
 *
 * The Quests overlay (`.qm-overlay` / `.qm-modal`) was hard-coded
 * to a dark-navy gradient in legacy.css regardless of theme. On
 * cozy-light it stuck out visually like a different game. These
 * overrides re-skin it to match the parchment + cocoa + gold
 * palette the rest of the UI uses.
 * ============================================================ */
body[data-theme="cozy-light"] .qm-modal {
  background: linear-gradient(180deg, #fff8e2 0%, #faedc4 60%, #f4e4bc 100%) !important;
  border: 2px solid var(--gold) !important;
  color: #3d2817 !important;
  box-shadow: 0 24px 64px rgba(80, 50, 20, 0.30), 0 0 80px rgba(245, 194, 73, 0.20) !important;
}
body[data-theme="cozy-light"] .qm-overlay {
  background: rgba(40, 25, 12, 0.55) !important;
}
body[data-theme="cozy-light"] .qm-tabs {
  background: rgba(245, 226, 175, 0.55) !important;
  border-bottom: 1px solid rgba(120, 85, 40, 0.25) !important;
}
body[data-theme="cozy-light"] .qm-tab {
  color: #5c3d12 !important;
}
body[data-theme="cozy-light"] .qm-tab:hover { color: #3d2817 !important; }
body[data-theme="cozy-light"] .qm-tab.active {
  color: #b6483a !important;
  border-bottom-color: #b6483a !important;
  background: rgba(255, 244, 215, 0.7) !important;
}
body[data-theme="cozy-light"] .qm-quest {
  background: rgba(255, 248, 226, 0.7) !important;
  border: 1px solid rgba(120, 85, 40, 0.25) !important;
  color: #3d2817 !important;
}
body[data-theme="cozy-light"] .qm-quest .qm-q-name { color: #3d2817 !important; }
body[data-theme="cozy-light"] .qm-quest .qm-q-desc { color: #6c4a20 !important; }
body[data-theme="cozy-light"] .qm-quest .qm-q-icon {
  background: rgba(245, 226, 175, 0.6) !important;
}
body[data-theme="cozy-light"] .qm-close {
  background: rgba(255, 244, 215, 0.6) !important;
  border: 1px solid rgba(120, 85, 40, 0.35) !important;
  color: #5c3d12 !important;
}
body[data-theme="cozy-light"] .qm-close:hover {
  background: #b6483a !important;
  border-color: #6c2a22 !important;
  color: #fff8e2 !important;
}

/* ============================================================
 * b132: Quests modal mobile layout
 *
 * On mobile the quests modal has THREE problems documented in the
 * playthrough:
 *   - .qm-body's right sidebar (280px QUEST INFO) wastes half the
 *     viewport, leaving the quest list cramped
 *   - quest titles wrap mid-word ("Cook 5\ndishes") because the
 *     reward column eats too much width
 *   - the QUEST INFO summary card can overlap the quest list
 *     scroll area
 *
 * Fix: collapse to single column, stack info + reward vertically
 * inside each quest card, hide the side QUEST INFO panel.
 * ============================================================ */
@media (max-width: 540px), (max-height: 540px) and (max-width: 900px) {
  .qm-body {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  /* Hide the right sidebar (QUEST INFO summary) entirely on mobile.
     Header counts already show daily/weekly badges. */
  .qm-body > :nth-child(2) {
    display: none !important;
  }
  .qm-quest {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .qm-quest .qm-q-info { flex: 1 1 100% !important; min-width: 0 !important; }
  .qm-quest .qm-q-name {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .qm-quest .qm-q-reward {
    flex: 0 0 auto !important;
    text-align: left !important;
    margin-top: 4px !important;
  }
  .qm-quest .qm-q-claim { margin-left: auto !important; }
}

/* ============================================================
 * ─── Hearthlight (b150) — the revamp direction ───
 * A candle-lit homestead ledger: deep roasted-oak grounds so
 * content actually pops, gilt gold as the unifying accent, and
 * the semantic colors pushed to saturated "guild seals" (green =
 * gathering, red = forge/combat, gem = arcane). Same tokens the
 * whole app already references, so this reskins every screen with
 * zero layout changes. Opt-in via Settings → Display or
 * HearthriseTheme.set('hearthlight'); default stays Cozy Day.
 * ============================================================ */
/* b216 — HEARTHLIGHT IS THE DEFAULT PALETTE, not an opt-in overlay.
   The colour tokens used to live on `:root` with the COZY-LIGHT values, and the
   dark values only existed under `body[data-theme="hearthlight"]`. So the app's
   baseline palette was the light theme: anything that resolved a token outside
   that body scope got cream surfaces and cocoa ink (--ink was #3d2817), which is
   why unreadable cream-on-dark kept reappearing no matter how many overrides
   were appended. Adding `:root` here makes dark the baseline everywhere; the
   light block still supplies the shared fonts/spacing tokens it also defines. */
:root,
body[data-theme="hearthlight"] {
  /* FORGE & STONE (b183) — desaturated stone/iron darks with warmth reserved for
     candlelight + gilt, not a flat warm-brown blob. Cooler undertone in the deep
     shadows (stone/iron), warm ember only where light falls. */
  --bg-0:        #100e0b;              /* deepest — dark hall / near-black */
  --bg-1:        #17140f;              /* sidebar / iron rail */
  --bg-2:        #201b15;              /* card / panel — worn leather + stone */
  --bg-3:        #2a241c;              /* elevated (modal) */
  --bg-card:     linear-gradient(180deg,#26201a,#1a1610);

  /* Lines — faint gilt + cool stone edge */
  --line:        rgba(201,162,74,.20);
  --line-soft:   rgba(236,225,204,.055);
  --line-strong: rgba(201,162,74,.42);

  /* Text — aged parchment ramp */
  --ink:         #ece1cc;
  --ink-2:       #c4b79e;
  /* b216: was #8f7d63 — every section label (TODAY / BUFFS / Total Lv) sat at
     3.4-3.9:1 on the card surface, under the 4.5:1 readability floor. This
     clears it at ~4.9:1 while staying clearly subordinate to --ink-2. */
  --ink-3:       #9d8b70;

  /* Gilt gold — aged, candlelit (the unifying accent) */
  --gold:        #c9a24a;
  --gold-2:      #e3c77e;
  --gold-bg:     rgba(201,162,74,.14);

  /* Semantic seals — richer, more material (oxblood / moss / steel) */
  --green:       #7f9a4f;              /* moss — gathering / XP */
  --green-bg:    rgba(127,154,79,.15);

  --red:         #b23a2c;              /* oxblood — combat / danger */
  --red-bg:      rgba(178,58,44,.16);

  --aqua:        #5c8f89;              /* weathered teal — info */
  --aqua-2:      #a89a80;
  --aqua-bg:     rgba(92,143,137,.15);

  --steel:       #7a8791;              /* forged steel — gear / cool accent */

  --purple:      #6a4560;              /* deep heraldic plum (was lavender) */
  --purple-bg:   rgba(106,69,96,.20);

  --gem:         #5262b3;              /* sapphire — gems / premium */
  --gem-bg:      rgba(82,98,179,.18);

  /* Shell surfaces — stone-dark, candle-lit */
  --sidebar-bg:  linear-gradient(180deg, #17140f, #100d09);
  --topbar-bg:   linear-gradient(90deg, #201b15, #17130f);
  --app-bg:
    radial-gradient(ellipse 78% 52% at 78% 3%, rgba(224,150,80,.13) 0%, rgba(224,150,80,0) 60%),
    linear-gradient(180deg, #191510 0%, #131009 48%, #0e0b07 80%, #080605 100%);

  /* ── Scene palette (b219) ────────────────────────────────────────────────
     Painted atmosphere is still colour, so it is still tokens. These are the
     values the Home hearth band and the global backdrop scene are drawn from
     (src/features/backdrop.js paints SVG classes, never literals): a Forge &
     Stone dusk — stone sky bleeding to an ember horizon, black silhouettes,
     candlelight the only saturated thing in the picture. */
  --scene-sky-0:     #0c0a08;   /* zenith */
  --scene-sky-1:     #16120e;
  --scene-sky-2:     #241d15;
  --scene-sky-3:     #48311d;
  --scene-sky-4:     #7d4b23;   /* ember horizon */
  --scene-glow-1:    rgba(255,186,110,.46);
  --scene-glow-2:    rgba(206,116,50,.13);
  --scene-glow-0:    rgba(206,116,50,0);
  --scene-rim:       rgba(255,190,118,.20);
  --scene-track:     rgba(214,164,104,.10);
  --scene-star:      #e0d3b6;
  --scene-haze-0:    rgba(182,162,132,0);
  --scene-haze-1:    rgba(182,162,132,.15);
  --scene-ridge-far: #1a150f;
  --scene-ridge-mid: #120e0a;
  --scene-ridge-near:#0b0806;
  --scene-tree:      #080605;
  --scene-build:     #090705;
  --scene-build-2:   #16100b;
  --scene-furrow:    rgba(236,225,204,.05);
  --scene-lit:       #ffb457;   /* candle / hearth window */
  --scene-litglow:   rgba(255,168,74,.30);
  --scene-firelight: rgba(255,178,92,.16);
  --scene-fire-0:    rgba(255,178,92,0);
  --scene-smoke:     rgba(206,190,166,.14);
  /* Scrims that keep UI legible on top of the picture. */
  --scene-scrim-1:   rgba(9,7,5,.20);
  --scene-scrim-2:   rgba(9,7,5,.72);
  /* Type that sits ON the picture gets its own ink role: its background is the
     scene under a dark scrim, not the theme's surface, so it stays light in
     BOTH themes. Reading --ink here put cocoa text on a sunset in Cozy Day. */
  --scene-ink:       #f4ecda;
  --scene-ink-2:     #d8cbb1;
  --scene-ink-3:     #b0a186;
  --scene-gilt:      #ecd7a0;

  color-scheme: dark;
}

/* Cozy Day is the retired secondary theme, but its tokens must still resolve —
   a dusk palette under a cream UI would read as a bug. Same scene, golden
   hour: pale sky, hazy blue-grey distance, warm mid-tones instead of black. */
body[data-theme="cozy-light"] {
  --scene-sky-0:     #cfd9e0;
  --scene-sky-1:     #e2dcc9;
  --scene-sky-2:     #f0ddb2;
  --scene-sky-3:     #edc78c;
  --scene-sky-4:     #e0a866;
  --scene-glow-1:    rgba(255,240,200,.85);
  --scene-glow-2:    rgba(255,214,140,.30);
  --scene-glow-0:    rgba(255,214,140,0);
  --scene-rim:       rgba(255,250,225,.55);
  --scene-track:     rgba(120,92,48,.14);
  --scene-star:      #ffffff;
  --scene-haze-0:    rgba(255,252,240,0);
  --scene-haze-1:    rgba(255,252,240,.55);
  --scene-ridge-far: #a9a887;
  --scene-ridge-mid: #7d7d55;
  --scene-ridge-near:#5c5c38;
  --scene-tree:      #4a5230;
  --scene-build:     #5b4228;
  --scene-build-2:   #7a5c38;
  --scene-furrow:    rgba(60,45,20,.14);
  --scene-lit:       #ffd977;
  --scene-litglow:   rgba(255,217,119,.34);
  --scene-firelight: rgba(255,214,140,.20);
  --scene-fire-0:    rgba(255,214,140,0);
  --scene-smoke:     rgba(255,255,255,.55);
  --scene-scrim-1:   rgba(28,19,9,.06);
  --scene-scrim-2:   rgba(28,19,9,.76);
}

/* Body background is set via the --app-bg token for every theme (b151), so a
   new theme never falls back to the old cold-navy legacy default. */
html body[data-theme="hearthlight"] {
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-ui);
}
/* Hearthlight sidebar nav — the cozy browns are kept exact for Cozy; these
   readable-on-dark values only apply under Hearthlight (b151). nav-btn already
   uses var(--ink) from the shared rule, so only the bespoke bits need help. */
body[data-theme="hearthlight"] .nav-group-label,
body[data-theme="hearthlight"] .sidebar .nav-group-label {
  color: var(--gold-2) !important;
  text-shadow: none !important;
}
body[data-theme="hearthlight"] .nav-btn .ic { filter: none !important; }
body[data-theme="hearthlight"] .nav-foot { color: var(--ink-3) !important; }
body[data-theme="hearthlight"] .brand-name,
body[data-theme="hearthlight"] .brand-name small { color: var(--gold-2) !important; text-shadow: none !important; }

/* ============================================================
 * Hearthlight content surfaces (b153) — dark cards / tiles / modals +
 * light text, so the whole screen matches the dark shell. Scoped to
 * Hearthlight only → Cozy Day is 100% untouched. Override-style (not
 * pure tokenization) because Cozy uses many one-off shades; converting
 * those to tokens without shifting Cozy is a later cleanup pass.
 * Verified live in-browser (Home/Profile) before commit.
 * ============================================================ */
body[data-theme="hearthlight"] { --bg-card: linear-gradient(180deg,#26201a,#1a1610); }

/* main panel — drop the cream parchment-frame background image */
/* b216: this used to be `background: none !important`, added back in b153 to
   strip the cozy PARCHMENT sheet from the dark theme. That was the right call
   then, but it also left every panel with no surface at all, so the backdrop
   scene showed through the gaps between cards as a grey smudge. The dark panel
   frame further down now supplies a proper surface — keep the colour, drop the
   background kill. */


/* b217: this block used to force `background: var(--bg-card) !important;
   border: 1px solid var(--line) !important` onto every surface-ish class in
   the game. It is the single rule most responsible for the wall-of-cards
   read — and because it is !important on a theme-scoped selector, no amount
   of later styling could undo it, which is why several passes at "make it
   look less generated" never changed anything.

   Surfaces are now owned by art-direction.css, which draws them by MEANING:
   a section gets a heading and a rule, a pressable object gets a raised
   face, a container of objects gets a recessed well. What survives here is
   the text colour, which still has to outrank the unscoped light-theme
   rules further down this file. */
body[data-theme="hearthlight"] .card,
body[data-theme="hearthlight"] .modal-card,
body[data-theme="hearthlight"] .ss-card,
body[data-theme="hearthlight"] .cr-card,
body[data-theme="hearthlight"] .cr-hero,
body[data-theme="hearthlight"] .bounty-card,
body[data-theme="hearthlight"] .activity-card { color: var(--ink) !important; }

/* Containment is kept only where the thing IS an object: a modal is a
   physical panel over the world, and bounty/activity cards are pressable
   tiles the player picks from a set. */
body[data-theme="hearthlight"] .modal-card,
body[data-theme="hearthlight"] .ss-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
}

body[data-theme="hearthlight"] .kpi,
body[data-theme="hearthlight"] .tile,
body[data-theme="hearthlight"] .cr-hero-stat,
body[data-theme="hearthlight"] .invc-hero-stat,
body[data-theme="hearthlight"] .stats-btn-trigger,
body[data-theme="hearthlight"] .feat-buttons .btn,
body[data-theme="hearthlight"] .feat-buttons button { color: var(--ink) !important; }
/* Stat readouts are recessed slates, not raised buttons — they aren't
   pressable, and drawing them like buttons is why every screen looked like a
   toolbar. */
body[data-theme="hearthlight"] .kpi,
body[data-theme="hearthlight"] .tile,
body[data-theme="hearthlight"] .cr-hero-stat,
body[data-theme="hearthlight"] .invc-hero-stat {
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(236,225,204,.05) !important;
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
body[data-theme="hearthlight"] .tb-btn { background: linear-gradient(180deg,#2f2418,#221a12) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
body[data-theme="hearthlight"] .activity-bar.v2 { background: var(--bg-card) !important; border-color: var(--line) !important; color: var(--ink) !important; }

/* ------------------------------------------------------------------------
 * b222 — THE IN-WORLD CARVE-OUT.
 *
 * Everything from here to the end of the b174 readability layer forces theme
 * ink onto panel content with `!important`. That is correct for a UI surface
 * (a dark card in a dark hall) and WRONG for an in-world surface — parchment,
 * lit counter wood, a scene band — because those are lit by the picture, not
 * by the theme. Type that sits on them reads its own ink role (the rule the
 * b219 hearth band established and b221 repeated).
 *
 * Before b222 the only way to win was to out-!important the blanket at three
 * ids, which is why board-and-shop.css shipped ~60 of them. The blankets now
 * simply do not reach into those subtrees, so the sheet that draws them uses
 * ordinary declarations.
 *
 * The exclusion list is the ROOTS of every subtree that owns its own colour,
 * and their descendants. To add a new one: add it here, not an !important in
 * your sheet. Grep `.bb-board,.sc-scene` to find every copy — they are all the
 * same string on purpose.
 *   .bb-board   — the bounty noticeboard, lit by its lantern (b221)
 *   .sc-scene   — the shopfront picture (b221)
 *   .sc-counter — the shop counter the offers list continues (b221)
 *   .iap-card   — the real-money packs. Not a picture, but art-direction.css §6
 *                 reserves sapphire for real money and the blanket flattened
 *                 every sapphire value back to gilt ink.
 *   .hr-cs      — the Clan Seat: the hold band and everything the castle draws
 *                 around it (b223). Third in-world screen, same deal — see
 *                 src/styles/clan-seat.css, which contains no !important and no
 *                 stacked id precisely because of this entry.
 *   .hr-room    — the reusable room modal (b223, window.HearthriseRoomModal).
 *                 It mounts on <body> today, so no blanket reaches it anyway;
 *                 the entry is here so the personal homestead can adopt the
 *                 same component INSIDE #panel-house without needing to edit
 *                 this file again.
 * Home's hearth band (.hd-hearth) needs no entry: #panel-profile is not in the
 * blanket list at all (see the note there), which is the proof that a screen
 * built on tokens does not need this layer.
 *
 * All arguments are class selectors, so each `:not()` adds exactly (0,1,0) —
 * the blankets keep their relative order. Complex selectors inside :not() are
 * Chrome 88 / Firefox 84 / Safari 9; this file already ships `:has()`, which
 * is a strictly newer baseline.
 * --------------------------------------------------------------------- */

/* text — headers gold, body light, hints muted (accent colours untouched) */
body[data-theme="hearthlight"] .panel.active { color: var(--ink); }
body[data-theme="hearthlight"] .panel.active .card-title:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active [class*="-title"]:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active [class*="-name"]:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active .card-head:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active .dash-milestone b { color: var(--gold-2) !important; }
/* b217: the gilt wash band + full-width underline made every card-head look
   like a table header, and there are ~30 of them across the game. A heading
   should read as a heading, not as chrome: art-direction.css gives it small
   caps over a rule that fades out, which is an incised line rather than a
   border. (Kept the b197 selector so the light-theme band doesn't return.) */
body[data-theme="hearthlight"] .card-head {
  background: none !important;
  border-bottom: 0 !important;
}
body[data-theme="hearthlight"] .card-head .card-title,
body[data-theme="hearthlight"] .card-head .card-title::before,
body[data-theme="hearthlight"] .card-head .card-sub { color: var(--gold-2) !important; }
body[data-theme="hearthlight"] .panel.active b:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active strong:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active p:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active li:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active td { color: var(--ink) !important; }
body[data-theme="hearthlight"] .panel.active span:not([class*="gold"]):not([class*="pill"]):not([class*="chip"]):not([class*="badge"]):not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *) { color: var(--ink); }
body[data-theme="hearthlight"] .panel.active .card-sub:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active .muted:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] .panel.active small:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *) { color: var(--ink-3) !important; }

/* ============================================================
 * HEARTHLIGHT — single-theme finalization (b174)
 * Hearthlight is now the ONLY theme. Several legacy readability rules hardcode
 * cocoa text + cream card backgrounds WITHOUT theme-scoping (e.g.
 * `#panel-bounty * {color:#3d2817!important}`), so they still force light colors
 * even here. This block makes every legacy panel dark-clean: light text on dark
 * surfaces, gold headers/values for hierarchy. Uses #panel ids to outrank those
 * `#panel-x *` rules. (Interim: screens get rebuilt as token components — combat
 * next — and the dead light-theme CSS gets deleted in a cleanup pass.)
 * ============================================================ */

/* Panel text -> light (beats the unscoped `#panel-x *` cocoa)
 *
 * b222: `#panel-profile` is deliberately NOT in this list. Before b222 it was —
 * but the b216 rescoping pass had prefixed `body[data-theme="cozy-light"] ` onto
 * the comment directly above, and a CSS comment is whitespace to the tokenizer,
 * so the first selector in this list actually parsed as
 *   `body[data-theme="cozy-light"] body[data-theme="hearthlight"] #panel-profile *`
 * — two <body> elements in one descendant chain, which can never match. Home has
 * therefore rendered WITHOUT this blanket since b216, and it is the best-looking
 * screen in the game (b219 rebuilt it on tokens + its own --scene-* ink roles).
 * Repairing the selector would have clobbered the hearth band's scene ink, so
 * the dead fragment is deleted instead and Home stays out. Treat that as the
 * exit criterion: a screen leaves this list when it stops needing it.
 *
 * Every remaining entry carves out the in-world surfaces (see the b222 note
 * above the readability layer). */
body[data-theme="hearthlight"] #panel-character *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-combat *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-bounty *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-skills *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-inventory *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-shop *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-market *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-dungeons *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-stable *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-farming *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-house *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-social *:not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *) { color: var(--ink) !important; }

/* Cream card / input surfaces -> dark */
body[data-theme="hearthlight"] #panel-bounty [class*="bounty-card"],
body[data-theme="hearthlight"] #panel-bounty [class*="bounty-row"],
body[data-theme="hearthlight"] #panel-bounty [class*="bounty-shop"],
body[data-theme="hearthlight"] #panel-bounty [class*="bounty-option"],
body[data-theme="hearthlight"] #panel-bounty .row.between > button,
body[data-theme="hearthlight"] #panel-stable [class*="companion"],
body[data-theme="hearthlight"] #panel-stable [class*="comp-card"],
body[data-theme="hearthlight"] #panel-market [class*="listing"],
body[data-theme="hearthlight"] #panel-market [class*="market-row"],
body[data-theme="hearthlight"] #panel-market [class*="market-card"],
body[data-theme="hearthlight"] #panel-market form,
body[data-theme="hearthlight"] #panel-market fieldset,
body[data-theme="hearthlight"] #panel-market section,
body[data-theme="hearthlight"] #panel-market input,
body[data-theme="hearthlight"] #panel-market select,
body[data-theme="hearthlight"] #panel-shop [class*="card"]:not(.iap-card),
body[data-theme="hearthlight"] #panel-shop [class*="sku"]:not(.iap-card),
body[data-theme="hearthlight"] #panel-shop [class*="iap"]:not(.iap-card),
body[data-theme="hearthlight"] #panel-shop .row.between > button,
body[data-theme="hearthlight"] #panel-dungeons [class*="card"],
body[data-theme="hearthlight"] #panel-dungeons [class*="key-card"],
body[data-theme="hearthlight"] #panel-skills .act-tile,
body[data-theme="hearthlight"] #panel-skills .act-head {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
}

/* Gold headers/values for hierarchy (per-panel id beats the light blanket) */
body[data-theme="hearthlight"] #panel-character [class*="-title"],
body[data-theme="hearthlight"] #panel-character [class*="hero-stat"] b,
body[data-theme="hearthlight"] #panel-bounty [class*="-title"],
body[data-theme="hearthlight"] #panel-bounty [class*="kpi"] b,
body[data-theme="hearthlight"] #panel-skills [class*="-title"],
body[data-theme="hearthlight"] #panel-inventory [class*="hero-stat"] b,
body[data-theme="hearthlight"] #panel-shop [class*="-title"],
body[data-theme="hearthlight"] #panel-market [class*="-title"] { color: var(--gold) !important; }

/* Higher-specificity catch for detail sub-panels whose cocoa/cream rules use
   two ids (e.g. `#panel-skills #skill-detail *`). The repeated-id selector
   (#panel-x#panel-x) reaches (2,1,1) to outrank them. Interim until rebuild. */
/* b216: these blankets must NOT capture filled controls. A gold ribbon or an
   active moss chip is a light surface that owns its own contrast — forcing
   parchment ink onto it produced light-on-light (store ribbons measured
   1.9:1). Excluding them here fixes the whole class instead of adding yet
   another higher-specificity patch per component. */
body[data-theme="hearthlight"] #panel-skills#panel-skills *:not(.ribbon):not(.chip):not(.btn-gold):not(.btn-primary):not(.btn-danger):not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-inventory#panel-inventory *:not(.ribbon):not(.chip):not(.btn-gold):not(.btn-primary):not(.btn-danger):not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-bounty#panel-bounty *:not(.ribbon):not(.chip):not(.btn-gold):not(.btn-primary):not(.btn-danger):not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *),
body[data-theme="hearthlight"] #panel-shop#panel-shop *:not(.ribbon):not(.chip):not(.btn-gold):not(.btn-primary):not(.btn-danger):not(.bb-board,.sc-scene,.sc-counter,.iap-card,.hr-cs,.hr-room,.bb-board *,.sc-scene *,.sc-counter *,.iap-card *,.hr-cs *,.hr-room *) { color: var(--ink) !important; }

/* Stray light-face buttons/tiles -> dark surfaces (2-id to win) */
body[data-theme="hearthlight"] #panel-skills#panel-skills .act-tile,
body[data-theme="hearthlight"] #panel-skills#panel-skills .act-head,
body[data-theme="hearthlight"] #panel-bounty#panel-bounty [class*="bounty-option"],
body[data-theme="hearthlight"] #panel-bounty#panel-bounty [class*="bounty-shop"],
body[data-theme="hearthlight"] #panel-bounty#panel-bounty .row.between > button,
body[data-theme="hearthlight"] #panel-shop#panel-shop [class*="iap"]:not(.iap-card),
body[data-theme="hearthlight"] #panel-shop#panel-shop .row.between > button,
body[data-theme="hearthlight"] #panel-farming .row.gap-sm > button {
  background: var(--bg-2) !important; border-color: var(--line) !important;
}

/* Keep gold values readable on the now-dark hero stats (2-id to win) */
body[data-theme="hearthlight"] #panel-inventory#panel-inventory [class*="hero-stat"] b,
body[data-theme="hearthlight"] #panel-skills#panel-skills [class*="-title"],
body[data-theme="hearthlight"] #panel-bounty#panel-bounty [class*="-title"],
body[data-theme="hearthlight"] #panel-bounty#panel-bounty [class*="kpi"] b { color: var(--gold) !important; }

/* ============================================================
 * COMBAT — dramatic monster presence (Phase 2, first pass, b177)
 * Make the enemy the spectacle: a large, gilt-framed, glowing portrait so the
 * monster art actually reads as a foe. (Hearthlight combat rework — WIP; the
 * FORECAST stat block + battle juice come next.)
 * ============================================================ */
body[data-theme="hearthlight"] #panel-combat .arena{ align-items:center !important; gap:10px !important; padding:18px 8px 14px !important; }
body[data-theme="hearthlight"] #panel-combat .fighter .portrait{ width:84px !important; height:84px !important; border-radius:14px !important; }
body[data-theme="hearthlight"] #panel-combat .fighter.enemy .portrait{
  width:134px !important; height:134px !important; border-radius:16px !important;
  background:radial-gradient(circle at 50% 32%, rgba(224,166,74,.20), rgba(10,7,4,.7)) !important;
  border:2px solid var(--gold,#e0a64a) !important;
  box-shadow:0 0 46px -8px rgba(224,166,74,.55), inset 0 -26px 46px -22px rgba(0,0,0,.85) !important;
}
body[data-theme="hearthlight"] #panel-combat .fighter.enemy .portrait img{ object-fit:contain !important; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
body[data-theme="hearthlight"] #panel-combat .fighter.enemy .fname{ font-size:18px !important; color:var(--gold,#e0a64a) !important; margin-top:8px !important; }
body[data-theme="hearthlight"] #panel-combat .fighter .fname{ margin-top:6px; }
body[data-theme="hearthlight"] #panel-combat .vs{ font-size:22px !important; opacity:.6; }

/* Kill the remaining cream/parchment surfaces in the dark theme (b177):
   combat arena/fighters were still on cream cards, and a couple inputs stayed
   parchment. Convert to dark. */
body[data-theme="hearthlight"] #panel-combat .arena,
body[data-theme="hearthlight"] #panel-combat .fighter,
body[data-theme="hearthlight"] #panel-combat .fighter.enemy,
body[data-theme="hearthlight"] #panel-combat .empty { background: transparent !important; }
body[data-theme="hearthlight"] #panel-combat .fighter .portrait {
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.05), rgba(0,0,0,.45)) !important;
  border-color: var(--line) !important;
}
body[data-theme="hearthlight"] #panel-combat .card,
body[data-theme="hearthlight"] #panel-combat [class*="combat-picker"],
body[data-theme="hearthlight"] #panel-combat [class*="combat-arena"],
body[data-theme="hearthlight"] #panel-combat [class*="combat-loadout"],
body[data-theme="hearthlight"] #panel-combat [class*="combat-style"] {
  background: var(--bg-1) !important; border-color: var(--line) !important;
}
/* b195: painted dungeon battle background in the active arena (higher
   specificity than the .card rule above so it wins the cascade). */
body[data-theme="hearthlight"] #panel-combat.active .combat-arena {
  background:
    radial-gradient(120% 80% at 50% 36%, rgba(6,6,9,.10), rgba(6,6,9,.70) 92%),
    linear-gradient(180deg, rgba(10,9,12,.28), rgba(6,6,9,.84)),
    url('../../assets/icons-bundle/backgrounds/dungeon.jpg') center/cover no-repeat !important;
}
/* Dark form inputs (were solid cream) — repeated-id to beat panel input rules */
body[data-theme="hearthlight"] #panel-inventory#panel-inventory input,
body[data-theme="hearthlight"] #panel-market#panel-market input,
body[data-theme="hearthlight"] #panel-combat#panel-combat input,
body[data-theme="hearthlight"] input.search,
body[data-theme="hearthlight"] .topbar input {
  background: var(--bg-2) !important; color: var(--ink) !important; border-color: var(--line) !important;
}

/* ============================================================
   b213 (phase 2): combat empty-state / "Suggested for your level"
   — the always-on cozy rules above paint these cream even on the
   dark theme (body[data-theme="cozy-light"] matches forever because the
   theme attribute lives on <body>). Restore dark surfaces here;
   same specificity, later in source, so these win on hearthlight.
   ============================================================ */
/* b217: `#combat-area > div` was a catch-all that matched the arena's whole
   empty-state wrapper, painting an OPAQUE --bg-1 across the entire arena — so
   the painted dungeon stage behind it never showed, on any build. The .ce-tip
   / .ce-mob / [class*=suggest] selectors targeted the "Suggested for your
   level" list, which is gone (it duplicated the monster picker two columns to
   the left). Only the text colour is still needed. */
body[data-theme="hearthlight"] #panel-combat #combat-area > div {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #panel-combat .combat-arena .ce-mob *,
body[data-theme="hearthlight"] #panel-combat .combat-arena [class*="suggest"] *,
body[data-theme="hearthlight"] #panel-combat #combat-area > div * {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #panel-combat .combat-arena .ce-tip h4 {
  color: var(--gold-2, #cda24a) !important;
}
body[data-theme="hearthlight"] #panel-combat .combat-arena .ce-mob .muted,
body[data-theme="hearthlight"] #panel-combat .combat-arena .ce-mob .tiny {
  color: var(--ink-3, #a5896a) !important;
}

/* b213 (phase 2): market "List an item" card — cozy rules painted it cream
   on the dark theme; restore its dark surface. */
body[data-theme="hearthlight"] #panel-market .mk-list-form {
  background: rgba(0,0,0,.3) !important;
  border: 1px solid var(--line, rgba(122,94,58,.35)) !important;
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #panel-market .mk-list-form * {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #panel-market .mk-list-form h3 {
  color: var(--gold-2, #cda24a) !important;
}
body[data-theme="hearthlight"] #panel-market .mk-list-form .muted {
  color: var(--ink-3, #a5896a) !important;
}
body[data-theme="hearthlight"] #panel-market .mk-list-form input,
body[data-theme="hearthlight"] #panel-market .mk-list-form select {
  background: var(--bg-2, #1a2130) !important;
  border: 1px solid var(--line, rgba(122,94,58,.35)) !important;
  color: var(--ink, #e9e2cf) !important;
}

/* b213 (phase 2): generic modal sheet — the cozy cream gradient still won on
   .modal-card (settings, monster preview, quests, IAP…), leaving parchment
   dialogs floating over a dark game. One dark sheet for every modal. */
body[data-theme="hearthlight"] .modal .modal-card,
body[data-theme="hearthlight"] .modal-card {
  background: linear-gradient(180deg, #221c15, #17130e) !important;
  border: 1px solid var(--gold-2, #cda24a) !important;
  color: var(--ink, #e9e2cf) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 40px -18px var(--gold-2, #cda24a) !important;
}
body[data-theme="hearthlight"] .modal-card h1,
body[data-theme="hearthlight"] .modal-card h2,
body[data-theme="hearthlight"] .modal-card h3,
body[data-theme="hearthlight"] .modal-card .modal-title {
  color: var(--gold-2, #cda24a) !important;
}
body[data-theme="hearthlight"] .modal-card .ss-card,
body[data-theme="hearthlight"] .modal-card .ss-row {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--line-soft, rgba(122,94,58,.22)) !important;
  color: var(--ink, #e9e2cf) !important;
}

body[data-theme="hearthlight"] .modal-card .ss-label,
body[data-theme="hearthlight"] .modal-card .ss-card-title {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] .modal-card .ss-meta,
body[data-theme="hearthlight"] .modal-card .ss-card-meta {
  color: var(--ink-3, #a5896a) !important;
}
body[data-theme="hearthlight"] .modal-card input,
body[data-theme="hearthlight"] .modal-card select,
body[data-theme="hearthlight"] .modal-card textarea {
  background: var(--bg-2, #1a2130) !important;
  border: 1px solid var(--line, rgba(122,94,58,.35)) !important;
  color: var(--ink, #e9e2cf) !important;
}

/* b213 (phase 2): the settings modal carries an ID-scoped cream rule
   (#settings-modal .modal-card) that outranks the class-level dark sheet
   above — match its ID weight. Plus the sibling sheet classes. */
body[data-theme="hearthlight"] #settings-modal .modal-card,
body[data-theme="hearthlight"] #settings-modal #settings-body,
body[data-theme="hearthlight"] .qm-modal {
  background: linear-gradient(180deg, #221c15, #17130e) !important;
  border-color: var(--gold-2, #cda24a) !important;
  color: var(--ink, #e9e2cf) !important;
}

body[data-theme="hearthlight"] #settings-modal .ss-row,
body[data-theme="hearthlight"] #settings-modal .ss-card {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--line-soft, rgba(122,94,58,.22)) !important;
}
body[data-theme="hearthlight"] #settings-modal .ss-label,
body[data-theme="hearthlight"] #settings-modal .ss-card-title,
body[data-theme="hearthlight"] #settings-modal label {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #settings-modal .ss-meta,
body[data-theme="hearthlight"] #settings-modal .ss-card-meta {
  color: var(--ink-3, #a5896a) !important;
}

/* b213 (phase 2): settings section BODIES — the .ss-body / .settings-section
   surfaces stayed cream with cocoa text inside the now-dark sheet. The gilt
   section-header bars stay as-is (they read well on dark). */
body[data-theme="hearthlight"] #settings-modal .ss-body,
body[data-theme="hearthlight"] #settings-modal .settings-section {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--line-soft, rgba(122,94,58,.22)) !important;
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #settings-modal .ss-body *,
body[data-theme="hearthlight"] #settings-modal .ss-row * {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] #settings-modal .ss-body .ss-meta,
body[data-theme="hearthlight"] #settings-modal .ss-body .ss-card-meta,
body[data-theme="hearthlight"] #settings-modal .ss-body .muted {
  color: var(--ink-3, #a5896a) !important;
}

/* b213 (phase 2): quest modal internals — rows + tab strip were still cream
   inside the now-dark sheet. */
body[data-theme="hearthlight"] .qm-quest {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--line-soft, rgba(122,94,58,.22)) !important;
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] .qm-quest *,
body[data-theme="hearthlight"] .qm-q-info * {
  color: var(--ink, #e9e2cf) !important;
}
body[data-theme="hearthlight"] .qm-quest [class*="reward"] {
  color: var(--gold-2, #cda24a) !important;
}
body[data-theme="hearthlight"] .qm-tabs,
body[data-theme="hearthlight"] .qm-tab {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2, #cbbfa4) !important;
  border-color: var(--line-soft, rgba(122,94,58,.22)) !important;
}
body[data-theme="hearthlight"] .qm-tab.active {
  background: rgba(205,162,74,.15) !important;
  color: var(--gold-2, #cda24a) !important;
  border-bottom: 2px solid var(--red, #c0392b) !important;
}
body[data-theme="hearthlight"] .qm-quest .qm-q-name,
body[data-theme="hearthlight"] .qm-modal .qm-q-name {
  color: var(--ink, #e9e2cf) !important;
  font-weight: 700;
}

/* b213 (phase 2): .btn-gold — on the dark theme the cozy cream wash made
   gold (primary!) buttons look disabled, light-on-light. Real gilt buttons:
   gold gradient, dark text. */
body[data-theme="hearthlight"] .btn-gold,
body[data-theme="hearthlight"] .btn.btn-gold {
  background: linear-gradient(180deg, var(--gold, #f0b860), var(--gold-2, #d99c40)) !important;
  color: #20160a !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  font-weight: 700;
  text-shadow: none !important;
}
body[data-theme="hearthlight"] .btn-gold:hover {
  filter: brightness(1.07);
}
body[data-theme="hearthlight"] .btn-gold:disabled,
body[data-theme="hearthlight"] .btn-gold[disabled] {
  filter: grayscale(.6) brightness(.7);
  cursor: not-allowed;
}

/* ============================================================
   b216 — DARK-THEME PANEL FRAME
   The framed "sheet" look (gilt border + corner flourishes) used to come from
   the cozy-light parchment rule, which also painted a cream fill. Now that the
   light layer is correctly scoped to `body[data-theme="cozy-light"]`, the dark
   theme needs its own frame or every screen reads as flat content floating on
   the backdrop. Tokens only — no literals.
   ============================================================ */
/* b217: this was a 10px-radius rounded rectangle with a gilt hairline and a
   corner flourish pasted on TWO of its four corners — so the outermost element
   on every screen was itself a card, wrapping the wall of cards inside it, and
   the one decorative motif in the game was applied asymmetrically.

   The panel is the ground the screen stands on, not an object sitting on the
   world. It keeps a surface (b216 was right that the backdrop bleeding through
   muddied the content) but reads as material: near-square, no outer rule, lit
   along the top edge and falling off toward the bottom, the way a stone floor
   under a high window would. */
body[data-theme="hearthlight"] .panel.active {
  position: relative;
  border: 0;
  border-radius: var(--r);
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(201,162,74,.055), transparent 62%),
    linear-gradient(180deg, rgba(32,27,20,.965), rgba(15,12,9,.985));
  box-shadow:
    inset 0 1px 0 rgba(255,240,205,.07),
    inset 0 0 90px -30px rgba(0,0,0,.9),
    0 10px 34px -18px rgba(0,0,0,.85);
}

/* ============================================================
   b216 — ACCENT TEXT READABILITY
   Semantic tokens (--red oxblood, --gem sapphire, --green moss) are tuned as
   SURFACE colours. Used directly as text on a dark card they fall well under
   the 4.5:1 floor — the "Farm →"/"Fight →" links measured 2.7:1 and the gem
   count 2.4:1. Blending each accent toward parchment keeps the colour coding
   while making it legible, and works for ANY accent the component sets inline
   (home-dashboard assigns --accent per quest type at runtime).
   ============================================================ */
body[data-theme="hearthlight"] .hd-cta.ghost {
  color: color-mix(in srgb, var(--accent, var(--gold)) 58%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--accent, var(--gold)) 46%, transparent) !important;
}
body[data-theme="hearthlight"] .hd-cta.ghost:hover {
  color: color-mix(in srgb, var(--accent, var(--gold)) 34%, var(--ink)) !important;
  background: color-mix(in srgb, var(--accent, var(--gold)) 12%, transparent) !important;
}
/* Gem counts — sapphire is a surface colour; lift it for text use. */
body[data-theme="hearthlight"] #top-gems,
body[data-theme="hearthlight"] .t-stat .gem {
  color: color-mix(in srgb, var(--gem) 45%, var(--ink)) !important;
}

/* ============================================================
   b216 — ACCENT-FILLED CONTROLS GET DARK INK
   A filled control (gold ribbon, moss-green active chip, gilt button) is a
   LIGHT surface. Inheriting the theme's parchment --ink onto it gives
   light-on-light: the active tier chips measured 2.4:1, store ribbons 1.9:1.
   Filled = dark ink; outlined = accent ink. One rule instead of per-component
   patches.
   ============================================================ */
/* b217: the chip selectors are GONE from this list. Chips are no longer a
   filled moss-green pill — they are tabs with a translucent gilt wash and a
   2px gilt underline, so #1c1610 ink on them rendered near-black on near-black
   and the selected tier's label vanished entirely. This rule now covers only
   the controls that really are filled light surfaces. */
body[data-theme="hearthlight"] .ribbon,
body[data-theme="hearthlight"] #panel-shop .ribbon,
body[data-theme="hearthlight"] #panel-shop [class*="iap-card"] .ribbon,
body[data-theme="hearthlight"] .btn-gold,
body[data-theme="hearthlight"] .hd-rn-claimdot {
  color: #1c1610 !important;
  font-weight: 700;
  text-shadow: none !important;
}
/* b217: this made EVERY primary action in the game oxblood red — "Upgrade
   Property", "Buy", "Claim", "Build". Red is the danger role. When the most
   aspirational button on the Homestead screen is painted the same colour as
   "Delete character", the colour stops meaning anything and the screen reads
   as a warning. Primary is struck gilt (art-direction.css §6); red is reserved
   for destructive actions via .btn-danger.
   The rule that replaced the retired teal is still needed — legacy.css ships
   `.btn-primary{background:linear-gradient(#c09539,#218a82)}` — so it stays,
   pointed at the right colour. */
body[data-theme="hearthlight"] .btn-primary,
body[data-theme="hearthlight"] .btn-gold {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%) !important;
  border-color: #e6cd93 !important;
  color: #221803 !important;
}
body[data-theme="hearthlight"] .btn-primary:hover:not(:disabled),
body[data-theme="hearthlight"] .btn-gold:hover:not(:disabled) {
  background: linear-gradient(180deg, #eaca7d 0%, #d3ab4f 52%, #b98d33 100%) !important;
}
/* XP bars used the same retired teal as their start colour. */
body[data-theme="hearthlight"] .bar.xp > i {
  background: linear-gradient(90deg, var(--green), var(--gold-2)) !important;
}

/* ============================================================
   b216 — SURFACES THAT THE LIGHT-LAYER RESCOPE LEFT BARE
   These controls only ever had a parchment definition, so once the cozy layer
   became opt-in they rendered with no surface at all (the topbar Quests pill
   turned into floating text, and the mobile sub-tab strips vanished). Same
   silhouettes, dark-theme materials, tokens only.
   ============================================================ */
body[data-theme="hearthlight"] #hr-quests-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #b5412f, #7d2418);
  color: #fdf3e2;
  border: 1px solid #5a1208;
  border-radius: 6px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px -2px rgba(0,0,0,.6);
  transition: filter .12s, transform .12s;
}
body[data-theme="hearthlight"] #hr-quests-btn .hr-q-count {
  background: rgba(253,243,226,.92);
  color: #7d2418;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--f-ui);
  min-width: 18px;
  text-align: center;
}
body[data-theme="hearthlight"] #hr-quests-btn.no-active .hr-q-count {
  background: rgba(0,0,0,.32);
  color: #fdf3e2;
}
/* Mobile sub-tab strips (inventory / activities / combat) */
body[data-theme="hearthlight"] .inv-mob-tabs,
body[data-theme="hearthlight"] .act-mob-strip,
body[data-theme="hearthlight"] .cmb-mob-tabs {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border-bottom: 1px solid var(--line) !important;
}
body[data-theme="hearthlight"] .inv-mob-tabs .imt-btn,
body[data-theme="hearthlight"] .act-mob-strip .ams-btn,
body[data-theme="hearthlight"] .cmb-mob-tabs .cmt-btn {
  background: transparent !important;
  color: var(--ink-2) !important;
  border: 1px solid transparent !important;
}
body[data-theme="hearthlight"] .inv-mob-tabs .imt-btn.active,
body[data-theme="hearthlight"] .act-mob-strip .ams-btn.active,
body[data-theme="hearthlight"] .cmb-mob-tabs .cmt-btn.active {
  background: var(--gold-bg) !important;
  color: var(--gold-2) !important;
  border-color: var(--line-strong) !important;
}
/* Mobile landscape side rail — the parchment version lives inside a media
   query, which the light-layer rescope intentionally didn't touch. */
@media (max-height: 540px) and (orientation: landscape) and (max-width: 1024px) {
  body[data-theme="hearthlight"] .bottom-nav {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0)) !important;
    border-right: 1px solid var(--line-strong) !important;
  }
  body[data-theme="hearthlight"] .bn-btn,
  body[data-theme="hearthlight"] .bottom-nav button {
    color: var(--ink-2) !important;
  }
  body[data-theme="hearthlight"] .bn-btn.active {
    background: linear-gradient(180deg, #b5412f, #7d2418) !important;
    color: #fdf3e2 !important;
    border-color: #5a1208 !important;
  }
}

/* ============================================================
   b216 — INVENTORY DENSITY
   The bag showed a handful of tiles above a large empty area, so it read as a
   sparse list instead of a container. Empty slots give it a stable, scannable
   shape (item positions stop shifting), and a tighter grid fits far more on
   screen without shrinking the art.
   ============================================================ */
body[data-theme="hearthlight"] #panel-inventory .invc-grid {
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
  gap: 6px !important;
  align-content: start;
}
body[data-theme="hearthlight"] #panel-inventory .invc-tile {
  aspect-ratio: 1 / 1;
  height: auto !important;
}
/* Empty slot — a recessed well, clearly not an item. */
body[data-theme="hearthlight"] #panel-inventory .invc-slot {
  background: rgba(0,0,0,.26) !important;
  border: 1px solid var(--line-soft) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
  cursor: default;
  pointer-events: none;
}
body[data-theme="hearthlight"] #panel-inventory .invc-slot:hover { transform: none !important; }

/* ============================================================
   b216 — EQUIPMENT DOLL: ALL SLOTS VISIBLE AT ONCE
   14 slots were laid out as 110px cells in 3 columns with a written name under
   each, so the panel overflowed and half your gear was behind a scroll. A
   paper-doll is a glanceable map of what you're wearing — if you have to
   scroll it, it has failed. Four tighter columns fit every slot in view; the
   name lives in the tooltip (each slot already carries a full `title`).
   ============================================================ */
body[data-theme="hearthlight"] #panel-inventory .td-doll,
body[data-theme="hearthlight"] #panel-inventory#panel-inventory .td-doll {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
body[data-theme="hearthlight"] #panel-inventory .td-slot,
body[data-theme="hearthlight"] #panel-inventory#panel-inventory .td-slot {
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  height: auto !important;
  padding: 4px !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid var(--line-soft) !important;
}
/* A filled slot should read as filled. */
body[data-theme="hearthlight"] #panel-inventory .td-slot.filled,
body[data-theme="hearthlight"] #panel-inventory .td-slot:has(img) {
  background: linear-gradient(180deg, rgba(201,162,74,.14), rgba(0,0,0,.30)) !important;
  border-color: var(--line-strong) !important;
}
body[data-theme="hearthlight"] #panel-inventory .td-slot img {
  width: 100%; height: 100%; object-fit: contain;
}
/* The per-slot word labels were the main space cost — the tooltip covers it. */
body[data-theme="hearthlight"] #panel-inventory .td-slot-lbl { display: none !important; }
/* With everything in view the column no longer needs its own scrollbar. */
body[data-theme="hearthlight"] #panel-inventory .invc-equip-col { overflow: visible !important; }

/* ============================================================
   b216 — DOLL TABS, COMPANION PANE, BONUSES MODAL
   ============================================================ */
body[data-theme="hearthlight"] .td-tabs {
  display: flex; gap: 6px; margin-bottom: 8px;
}
body[data-theme="hearthlight"] .td-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-soft) !important;
  color: var(--ink-2) !important;
  font: 600 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}
body[data-theme="hearthlight"] .td-tab svg { width: 15px; height: 15px; }
body[data-theme="hearthlight"] .td-tab.active {
  background: var(--gold-bg) !important;
  border-color: var(--line-strong) !important;
  color: var(--gold-2) !important;
}
body[data-theme="hearthlight"] .td-pet-pane {
  display: grid; place-items: center; padding: 18px 0 6px;
}
body[data-theme="hearthlight"] .td-pet-pane .td-companion-slot {
  width: 96px !important; height: 96px !important; aspect-ratio: auto !important;
  font-size: 40px !important;
}
/* b218 (backlog #4): equipped companion's own progression, shown in the doll's
   Companion tab beneath the equip slot. Mirrors the Stable card data. */
body[data-theme="hearthlight"] .td-companion-info {
  width: 100%; max-width: 230px; margin: 12px auto 0; text-align: left;
}
body[data-theme="hearthlight"] .td-comp-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
body[data-theme="hearthlight"] .td-comp-icon { font-size: 26px; line-height: 1; }
body[data-theme="hearthlight"] .td-comp-name {
  color: var(--ink) !important; font: 700 13px/1.2 var(--f-ui);
}
body[data-theme="hearthlight"] .td-comp-lv { color: var(--gold-2) !important; font-weight: 700; }
body[data-theme="hearthlight"] .td-comp-role {
  color: var(--ink-3) !important; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 2px;
}
body[data-theme="hearthlight"] .td-comp-bar {
  height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.28); border: 1px solid var(--line-soft);
}
body[data-theme="hearthlight"] .td-comp-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}
body[data-theme="hearthlight"] .td-comp-xp {
  color: var(--ink-3) !important; font-size: 10px; margin: 3px 0 8px;
  font-variant-numeric: tabular-nums;
}
body[data-theme="hearthlight"] .td-comp-bonuses {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
}
body[data-theme="hearthlight"] .td-comp-bonus {
  font-size: 11px; color: var(--ink-2) !important;
}
body[data-theme="hearthlight"] .td-comp-bonus b { color: var(--gold-2) !important; }
body[data-theme="hearthlight"] .td-comp-proc {
  margin-top: 8px; font-size: 10px; font-style: italic; color: var(--ink-3) !important;
}
body[data-theme="hearthlight"] .td-comp-empty {
  color: var(--ink-3) !important; font-size: 12px; text-align: center; line-height: 1.7;
}
body[data-theme="hearthlight"] .td-comp-stable {
  margin-top: 8px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--gold-bg) !important; border: 1px solid var(--line-strong) !important;
  color: var(--gold-2) !important; font: 700 11px/1 var(--f-ui);
  letter-spacing: .05em;
}
body[data-theme="hearthlight"] .td-comp-stable:hover { filter: brightness(1.1); }




body[data-theme="hearthlight"] .eqb-card { max-width: 380px; width: 100%; padding: 18px; }
body[data-theme="hearthlight"] .eqb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-theme="hearthlight"] .eqb-head h3 { margin: 0; color: var(--gold-2) !important; font-family: var(--f-display); font-size: 17px; }
body[data-theme="hearthlight"] .eqb-close {
  background: transparent !important; border: 0 !important; color: var(--ink-3) !important;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
body[data-theme="hearthlight"] .eqb-close:hover { color: var(--ink) !important; }
body[data-theme="hearthlight"] .eqb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body[data-theme="hearthlight"] .eqb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-2) !important;
}
body[data-theme="hearthlight"] .eqb-row b { color: var(--gold-2) !important; font-variant-numeric: tabular-nums; }
body[data-theme="hearthlight"] .eqb-empty { grid-column: 1/-1; color: var(--ink-3) !important; font-size: 12px; padding: 10px 2px; }
body[data-theme="hearthlight"] .eqb-sub {
  margin: 14px 0 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3) !important; font-weight: 700;
}
body[data-theme="hearthlight"] .eqb-wornlist { display: grid; gap: 4px; max-height: 190px; overflow-y: auto; }
body[data-theme="hearthlight"] .eqb-worn {
  display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  padding: 5px 8px; border-radius: 6px; background: rgba(0,0,0,.22);
  color: var(--ink-3) !important;
}
body[data-theme="hearthlight"] .eqb-worn b { color: var(--ink) !important; font-weight: 600; }
/* b216: Stats pane shares the modal's row styling. */
body[data-theme="hearthlight"] .td-stats-pane { padding-top: 4px; }
body[data-theme="hearthlight"] .td-stats-pane .eqb-grid { grid-template-columns: 1fr 1fr; }
body[data-theme="hearthlight"] .td-tab span { display: none; }
@media (min-width: 1200px) {
  body[data-theme="hearthlight"] .td-tab span { display: inline; }
}

/* b217: FTUE surface + buttons.
   b216 gave the tour a cold navy card (#262019) and a filled red primary,
   described in its own comment as "the game's primary action". Both were
   wrong, and this is the first screen a new player ever sees:
     • Navy belongs to no theme in this game. Everything else is warm stone.
     • Red is the danger role. Using it for "Take the tour" spends the one
       colour reserved for irreversible actions on a welcome prompt, and
       trains the player to ignore it everywhere else.
   Now: warm stone card with a gilt hairline, gilt primary, quiet secondary.
   The button hierarchy comes from art-direction.css; these only supply the
   FTUE-specific class names. */
body[data-theme="hearthlight"] .ftue-btn,
body[data-theme="hearthlight"] .hr-ftue button {
  background: linear-gradient(180deg, rgba(255,236,200,.075), rgba(255,236,200,.018) 55%, rgba(0,0,0,.10)) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,240,210,.09), 0 1px 0 rgba(0,0,0,.45);
}
body[data-theme="hearthlight"] .ftue-btn:hover,
body[data-theme="hearthlight"] .hr-ftue button:hover {
  color: var(--ink) !important;
  border-color: rgba(201,162,74,.4) !important;
}
body[data-theme="hearthlight"] .ftue-btn.primary {
  background: linear-gradient(180deg, #d9b361 0%, #c09539 52%, #a67c28 100%) !important;
  color: #221803 !important;
  border-color: #e6cd93 !important;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,246,220,.55), inset 0 -2px 3px rgba(90,60,8,.4), 0 2px 5px -2px rgba(0,0,0,.7);
}
body[data-theme="hearthlight"] .ftue-btn.skip {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none;
  color: var(--ink-3) !important;
}
body[data-theme="hearthlight"] .ftue-card {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201,162,74,.10), transparent 62%),
    linear-gradient(180deg, #262019, #16120d) !important;
  border: 1px solid rgba(201,162,74,.55) !important;
  border-radius: var(--r-lg) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,205,.13), 0 24px 60px -20px rgba(0,0,0,.85) !important;
}
body[data-theme="hearthlight"] .ftue-card * { color: var(--ink) !important; }
body[data-theme="hearthlight"] .ftue-card .ftue-title { color: var(--gold-2) !important; }