/* ============================================================
   style-mobile.css
   Split from static/css/style.css on 2026-08-01 for token-cost
   reasons (7057-line file forced multi-chunk reads on every touch).
   Sections 27-39: mobile play sheet + all mobile step overrides, vault dialog, misc fixes, error pages, accessibility, UI components
   Load order matters - see templates/base.html <link> order.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   27. MOBILE PLAY SHEET
   ══════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  body.play-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
    background: var(--bg);
  }

  main.play-page-main {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .locked-play-sheet {
    display: none;
  }

  /* The phone sheet sizes to its content. On desktop <main> has a fixed height and
     #play-sheet fills it (flex: 1 1 0; min-height: 0, for the DM view bar); here <main>
     is height:auto, so that zero flex-basis collapsed the sheet to 0px and the wrap's
     overflow:clip hid the whole phone sheet. */
  main.play-page-main > #play-sheet { flex: none; height: auto; }
  .play-layout-wrap { height: auto; }

  .mobile-play-sheet {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom));
    color: var(--text);
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--border-strong) 34%, transparent), transparent 34rem),
      linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  }

  .mobile-sheet {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 12px 30px;
    color: var(--text);
    background:
      radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--border-strong) 45%, transparent), transparent 31rem),
      linear-gradient(180deg, var(--surface) 0, var(--bg-glow) 42%, var(--bg) 100%);
  }

  .mobile-sheet-header {
    position: relative;
    z-index: 1;
    margin: 0 -12px 12px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
  }
  .mobile-sheet-identity { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
  .mobile-sheet-kicker { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
  .mobile-sheet-identity h1 { margin: 1px 0 0; font-family: var(--font-display); font-size: 34px; line-height: .95; color: var(--text); }
  .mobile-sheet-identity p { margin: 7px 0 0; color: var(--text-muted); font-size: 14px; }
  .mobile-sheet-edit { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--input-bg); color: var(--accent); font-size: 20px; text-decoration: none; }

  .mobile-sheet-rail { display: grid; grid-template-columns: 1.15fr repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .mobile-sheet-rail-btn,
  .mobile-sheet-nav-btn,
  .mobile-sheet-menu-btn {
    border: 1px solid var(--border-strong);
    color: var(--text);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 98%, transparent), color-mix(in srgb, var(--bg) 98%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent), 0 8px 18px rgba(0,0,0,.4);
  }
  .mobile-sheet-rail-btn { min-height: 52px; border-radius: 16px; padding: 6px 4px; text-align: center; }
  .mobile-sheet-rail-btn span { display: block; color: var(--text-faint); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-sheet-rail-btn b { display: block; margin-top: 2px; font-size: 20px; line-height: 1; }
  .mobile-sheet-rail-btn.hp b { font-size: 25px; }
  .mobile-sheet-rail-btn.healthy b { color: var(--success); }
  .mobile-sheet-rail-btn.wounded b { color: var(--accent); }
  .mobile-sheet-rail-btn.critical b { color: var(--danger); }
  .mobile-sheet-rail-btn.down b { color: var(--text-faint); }
  .mobile-sheet-rail-btn.rest b,
  .mobile-sheet-rail-btn.inspiration.on b { color: var(--accent); }

  .mobile-sheet-category-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 44px 1fr 44px 44px;
    gap: 8px;
    align-items: center;
    margin: 0 -2px 12px;
    padding-top: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent), color-mix(in srgb, var(--bg) 86%, transparent) 78%, transparent);
  }
  .mobile-sheet-nav-btn,
  .mobile-sheet-menu-btn { height: 42px; border-radius: 14px; font-size: 19px; }
  .mobile-sheet-nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .nav-arrow { font-size: 1.2rem; line-height: 1; }
  .nav-adjacent { font-size: 9px; color: var(--text-muted, var(--text-faint)); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; max-width: 52px; overflow: hidden; text-overflow: ellipsis; }
  .mobile-sheet-category-title { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-align: center; }

  .mobile-sheet-page { display: none; }
  .mobile-sheet-page.active { display: block; }
  .mobile-sheet-card { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 96%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)); box-shadow: 0 14px 32px rgba(0,0,0,.4); }
  .mobile-sheet-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--border-strong); }
  .mobile-sheet-card-head h2,
  .mobile-sheet-card-head h3 { margin: 0; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-sheet-card-body { padding: 12px 14px; }
  .mobile-sheet-muted { color: var(--text-muted); line-height: 1.48; }

  .mobile-sheet-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); align-items: center; }
  .mobile-sheet-row:last-child { border-bottom: 0; }
  .mobile-sheet-row b { color: var(--text); font-size: 17px; }
  .mobile-sheet-row span { display: block; color: var(--text-muted); font-size: 13px; margin-top: 2px; }
  .mobile-sheet-value { color: var(--accent) !important; font-weight: 900; font-size: 20px !important; }
  .mobile-sheet-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--input-bg); color: var(--text-muted); font-size: 12px; font-weight: 800; }
  .mobile-sheet-chip.gold { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
  .mobile-sheet-chip.green { color: var(--success); border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); }
  .mobile-sheet-chip.red { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
  .mobile-sheet-chip.violet { color: var(--badge-arcane-fg); border-color: color-mix(in srgb, var(--badge-arcane-fg) 58%, transparent); background: color-mix(in srgb, var(--badge-arcane-fg) 10%, transparent); }
  .mobile-sheet-chip.used { color: var(--text-faint); border-color: color-mix(in srgb, var(--text-faint) 45%, transparent); background: color-mix(in srgb, var(--text-faint) 10%, transparent); opacity: .6; }

  .mobile-sheet-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mobile-sheet-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mobile-sheet-stat-card { min-height: 82px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--input-bg); padding: 10px; text-align: center; }
  .mobile-sheet-stat-card b { display: block; color: var(--text); font-size: 28px; line-height: 1; }
  .mobile-sheet-stat-card span { display: block; margin-top: 5px; color: var(--text-faint); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
  .mobile-sheet-stat-card em { display: block; color: var(--accent); font-style: normal; font-weight: 850; }
  /* The ability-check chip inside a stat card. Scoped to the card, at the same
     specificity as the `span` rule two lines up, because that rule
     (display:block, a margin, 10px uppercase with letter-spacing) is what turned
     the chip into a full-width band of capitals sitting under the modifier
     instead of a small bordered block. Sets no colour: the tier colours are shared
     with the desktop marker in style-play-sheet.css, and this file loads after
     it, so a colour here would silently win. */
  .mobile-sheet-stat-card .locked-check-chip { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 900; letter-spacing: 0; text-transform: none; }

  .mobile-sheet-feature,
  .mobile-sheet-spell { border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
  .mobile-sheet-feature:first-child,
  .mobile-sheet-spell:first-child { border-top: 0; }
  .mobile-sheet-feature summary,
  .mobile-sheet-spell summary { min-height: 52px; padding: 12px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  .mobile-sheet-feature summary::-webkit-details-marker,
  .mobile-sheet-spell summary::-webkit-details-marker { display: none; }
  .mobile-sheet-feature summary::after { content: "+"; color: var(--accent); font-weight: 900; }
  .mobile-sheet-feature[open] summary::after { content: "-"; }
  /* The +/- marker belongs to a level group's own summary; a spell row inside it inherited the open group's "-" and
     showed it beside every Use button. */
  .mobile-sheet-feature .mobile-sheet-spell summary::after { content: none; }
  .mobile-sheet-feature > div,
  .mobile-sheet-spell > div { color: var(--text-muted); line-height: 1.5; padding-bottom: 12px; }
  .mobile-sheet-spell small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
  /* An upcast spell row on the phone: name + "(upcast N)" on one wrapping line, the figure under it, then the
     chips and a three-line sentence; the Use button keeps a 44px target and the text never pushes the page wide. */
  .mobile-upcast-spell summary { align-items: flex-start; }
  .mobile-upcast-spell .mobile-upcast-main { display: block; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .mobile-upcast-spell .mobile-upcast-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
  .mobile-upcast-spell .locked-upcast-tag { font-size: 12px; }
  .mobile-upcast-spell summary button.mobile-sheet-chip { min-height: 44px; min-width: 44px; flex: none; align-self: center; }
  .mobile-upcast-spell .mobile-upcast-more { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
  .mobile-upcast-spell .locked-upcast-chip { font-size: 12px; padding: 1px 8px; }
  .mobile-upcast-spell .locked-upcast-note { -webkit-line-clamp: 3; line-clamp: 3; flex: none; }
  .mobile-upcast-spell > div { overflow-wrap: anywhere; }
  .mobile-upcast-spell .spell-upcast-detail { font-size: 14px; margin-top: 2px; }

  .locked-diag-chip { font-size: 10px; padding: 1px 7px; }

  .mobile-sheet-skill { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
  .mobile-sheet-skill:last-child { border-bottom: 0; }
  .mobile-sheet-skill > span { color: var(--accent); font-size: 12px; font-weight: 900; }
  .mobile-sheet-skill b { color: var(--text); font-size: 16px; }
  .mobile-sheet-skill small { color: var(--text-faint); margin-left: 4px; }
  .mobile-sheet-skill em { color: var(--accent); font-size: 20px; font-style: normal; font-weight: 900; }
  .mobile-sheet-skill .locked-adv-badge { width: 18px; height: 18px; font-size: 10px; }

  .mobile-sheet-slot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; }
  .mobile-sheet-slot-row b { min-width: 48px; }
  .mobile-sheet-bubble { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; }
  .mobile-sheet-bubble.used { background: var(--accent); }
  .mobile-sheet-stack { display: grid; gap: 7px; }

  .mobile-sheet-item { margin-bottom: 9px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--input-bg); }
  .mobile-sheet-item h3 { margin: 0; font-size: 18px; }
  .mobile-sheet-item p { margin: 5px 0 0; color: var(--text-muted); }
  /* Item #11 fix: fixed height (was min-height with no text-overflow handling), so a longer
     attuned item name doesn't grow the bauble taller than an empty "Open" slot. */
  .mobile-sheet-attune-slot { height: 68px; display: grid; place-items: center; padding: 8px; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--text-muted); text-align: center; overflow: hidden; }
  .mobile-sheet-attune-slot > * { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; }
  .mobile-sheet-textarea { width: 100%; min-height: 120px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--input-bg); color: var(--text); padding: 10px 12px; font-size: 15px; line-height: 1.45; }

  .mobile-resource-control { display: grid; grid-template-columns: 48px 58px 48px; gap: 7px; align-items: center; justify-content: end; }
  .mobile-resource-control button,
  .mobile-resource-control b { min-height: 42px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--input-bg); color: var(--text); display: grid; place-items: center; font-size: 20px; font-weight: 900; }
  .mobile-resource-control b { color: var(--accent); font-size: 18px; }

  .mobile-sheet-drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: none; background: rgba(0,0,0,.5); }
  .mobile-sheet-drawer-backdrop.open { display: block; }
  .mobile-sheet-drawer { position: absolute; left: 0; right: 0; bottom: 0; max-height: 84vh; overflow: auto; padding: 16px 14px 22px; border: 1px solid var(--border-strong); border-radius: 24px 24px 0 0; background: linear-gradient(180deg, var(--surface2), var(--bg)); box-shadow: 0 -20px 50px rgba(0,0,0,.45); }
  .mobile-sheet-drawer h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--accent); }
  .mobile-sheet-drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mobile-sheet-drawer-grid button { min-height: 68px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--input-bg); color: var(--text); font-weight: 850; }
  .mobile-sheet-drawer-grid button.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .mobile-sheet-big-number { color: var(--success); font-size: 54px; line-height: .9; font-weight: 900; }
  .mobile-sheet-big-number.gold { color: var(--accent); }
  .mobile-sheet-big-number.wounded { color: var(--accent); }
  .mobile-sheet-big-number.critical { color: var(--danger); }
  .mobile-sheet-field { display: block; margin: 10px 0; }
  .mobile-sheet-field span { display: block; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
  .mobile-sheet-field input[type="number"],
  .mobile-sheet-field input[type="range"] { width: 100%; }
  .mobile-sheet-field input[type="number"] { min-height: 46px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--input-bg); color: var(--text); padding: 8px 12px; font-size: 20px; }
  .mobile-sheet-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
  .mobile-sheet-dual button,
  .mobile-sheet-full-btn { min-height: 48px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--input-bg); color: var(--text); font-weight: 900; }
  .mobile-sheet-dual .heal { background: color-mix(in srgb, var(--success) 18%, transparent); }
  .mobile-sheet-dual .damage,
  .mobile-sheet-full-btn.damage { background: color-mix(in srgb, var(--danger) 18%, transparent); }

  /* A custom item's weight, corrected in place from the item drawer. The input is
     type="text" (see customWeightEditor in play.js), so it needs the number field's
     sizing spelled out rather than inherited from the [type="number"] rules above. */
  .mobile-item-weight .locked-inv-weight { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
  .mobile-item-weight input { flex: 1; min-width: 0; min-height: 46px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--input-bg); color: var(--text); padding: 8px 12px; font-size: 20px; }
  .mobile-item-weight .locked-inv-weight span { display: inline; color: var(--text-muted); font-size: 13px; letter-spacing: 0; text-transform: none; }

  .mobile-coin-field { margin: 0; }
  .mobile-coin-field input[type="number"] { min-height: 40px; font-size: 15px; padding: 6px 8px; }

  .mobile-coin-remove { display: flex; align-items: center; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
  .mobile-coin-remove span:first-child { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-coin-remove input[type="number"] { width: 64px; min-height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); color: var(--text); padding: 6px 8px; }
  .mobile-coin-remove select { min-height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); color: var(--text); padding: 6px 8px; }
  .mobile-coin-remove button { min-height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--input-bg); color: var(--text); font-weight: 900; padding: 0 12px; }
}

/* ══════════════════════════════════════════════════════════
   28. MOBILE RESPONSIVE BREAKPOINT
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .wizard-steps-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .step-tab {
    min-width: 56px;
    font-size: 11px;
    padding: 6px 8px;
    white-space: nowrap;
  }

  .cf-card-header {
    padding: 10px 12px;
  }

  .asi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Increase tap targets and prevent iOS zoom */
  select,
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="search"] {
    min-height: 40px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  button,
  .btn {
    min-height: 40px;
  }

  /* Spell picker list on mobile */
  .spell-summary-grid,
  .spell-filter-row,
  .spell-ledger-columns,
  .spell-columns {
    grid-template-columns: 1fr;
  }

  .spell-selected-row,
  .spell-item {
    grid-template-columns: 1fr;
  }

  .spell-cadence-chip.removable .spell-chip-remove {
    font-size: 13px;
  }

  /* Prepared checkbox: full-width 44px tap row, own grid row, no overlap */
  .spell-prepared-toggle {
    min-height: 44px;
    padding: 0 12px;
    gap: 10px;
    font-size: 13px;
    touch-action: manipulation;
  }

  .spell-prepared-toggle input {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    margin: 0;
  }

  .spell-list {
    font-size: 13px;
  }
}

/* ── 2014 Species Ability Bonus Display ─────────────────────────────── */
.species-bonus-block {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.bonus-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted, #aaa);
}
.half-elf-pickers {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.half-elf-pickers select {
  flex: 1;
}

/* Resource tracker (live play sheet) */
.resource-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.resource-name {
  min-width: 160px;
  font-weight: 600;
}
.resource-bubbles {
  display: flex;
  gap: 4px;
}
.resource-bubble {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.resource-recharge {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin-left: 0.5rem;
}

/* ── Missing choices modal ──────────────────────────────────────── */
.missing-choices-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.missing-choices-modal {
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.missing-choices-modal h3 {
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--gold);
}
.missing-choices-modal ul {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}
.missing-choices-modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════
   29. MOBILE IDENTITY STEP
   ══════════════════════════════════════════════════════════ */
/* Desktop section hidden on mobile; mobile section hidden on desktop */
.wiz-mobile-identity { display: none; }

@media (max-width: 720px) {
  /* Full-width mobile class cards put text over the whole card: switch the
     fade to top-down and drop the engraved artwork to a watermark so copy
     stays legible. (Moved from style-wizard-shell.css, which loads before
     style-wizard-steps.css and therefore lost this cascade.) */
  .class-gallery-art::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), transparent);
  }

  .class-gallery-art .class-art-svg {
    width: 46%;
    opacity: .22;
  }

  .wiz-desktop-identity { display: none; }

  .wiz-mobile-identity {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 80px;
  }

  .wiz-mobile-identity-title {
    margin: 0 0 2px;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--gold);
  }

  .wiz-mobile-identity-hint {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  /* Cards */
  .wiz-mobile-card {
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--surface2) 0%, var(--bg) 100%);
    overflow: hidden;
  }

  .wiz-mobile-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(232,198,106,.06);
  }

  .wiz-mobile-card-num {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    color: var(--gold);
    flex: 0 0 auto;
  }

  .wiz-mobile-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    flex: 1;
  }

  .wiz-mobile-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Ensure detail panels shown inside mobile slots are fully visible */
  #mob-species-detail-slot .identity-detail,
  #mob-background-detail-slot .identity-detail {
    display: block;
  }

  #mob-species-detail-slot,
  #mob-background-detail-slot {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Fix 2: Background/Species ability bonus side by side */
  .id-bonus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .id-bonus-field { min-width: 0; }
  .id-choice-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ── Feat spell picker ── */
.feat-spell-picker { margin: 6px 0; }
.feat-spell-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(232,198,106,.55);
  border-radius: 999px;
  background: rgba(232,198,106,.12);
  color: var(--gold, #e8c66a);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.feat-spell-chip-remove {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.feat-spell-search-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface, #11182d);
  color: var(--text, #f5f0e8);
  padding: 0 10px;
  font-size: 14px;
}
.feat-spell-selected-desc {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
/* formatDescriptionHTML() output now supplies real <p>/<br>/<ul> structure here
   (2026-08-15) -- white-space:pre-wrap was only ever needed to make raw \n
   characters visible via .textContent, and would double-space against the
   formatter's own <br>/<p> breaks if kept. Drop the browser default top/bottom
   margin on the first/last child instead, since the box already has padding. */
.feat-spell-selected-desc > p:first-child, .feat-spell-selected-desc > ul:first-child { margin-top: 0; }
.feat-spell-selected-desc > p:last-child, .feat-spell-selected-desc > ul:last-child { margin-bottom: 0; }
.feat-spell-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #11182d);
  margin-top: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.feat-spell-result-row {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(52,69,110,.35);
  transition: background .1s;
}
.feat-spell-result-row:last-child { border-bottom: none; }
.feat-spell-result-row:hover, .feat-spell-result-row:focus {
  background: rgba(232,198,106,.08);
  outline: none;
}
.feat-spell-group .feat-sub-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   30. MOBILE CLASS STEP
   ══════════════════════════════════════════════════════════ */
.wiz-mobile-class { display: none; }

@media (max-width: 720px) {
  .wiz-desktop-class { display: none; }
  .wiz-mobile-class { display: block; }
  .wiz-mobile-class-overview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface2);
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .wiz-mc-total-row { flex: 1; color: var(--text-muted); font-size: 14px; }
  .wiz-mc-total-row span { color: var(--gold); font-weight: 900; font-size: 18px; }
  .wiz-mobile-class-overview button {
    min-height: 38px;
    border: 1px solid rgba(232,198,106,.55);
    border-radius: 13px;
    background: rgba(232,198,106,.1);
    color: var(--gold);
    font-weight: 900;
    padding: 0 12px;
  }
  .wiz-mobile-card {
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(19,27,52,.96), rgba(13,18,35,.96));
    box-shadow: 0 14px 32px rgba(0,0,0,.38);
    margin-bottom: 12px;
    overflow: visible;
  }
  /* The dark gradient above is dark-theme only; light gets the parchment surface. */
  [data-theme="light"] .wiz-mobile-card {
    background: var(--surface2);
    box-shadow: 0 6px 18px rgba(36,28,16,.14);
  }
  [data-theme="light"] #wizMobileSecondarySlot .mc-class-block {
    background: var(--surface2) !important;
  }
  .wiz-mobile-card-head {
    padding: 14px;
    border-bottom: 1px solid var(--border);
  }
  .wiz-mobile-card-head h2 {
    margin: 0;
    flex: 1;
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .wiz-mobile-card-body { padding: 14px; }
  .wiz-mobile-field { display: grid; gap: 6px; margin-bottom: 12px; }
  .wiz-mobile-field label {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .wiz-mobile-field select,
  .wiz-mobile-field input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text);
    padding: 0 12px;
    font-size: 16px;
  }
  .wiz-mobile-class-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    margin-top: 10px;
  }
  .wiz-mobile-class-fact {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 8px 5px;
    text-align: center;
  }
  .wiz-mobile-class-fact b {
    display: block;
    color: var(--gold);
    font-size: 16px;
    line-height: 1.05;
  }
  .wiz-mobile-class-fact span {
    display: block;
    margin-top: 4px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .wiz-mobile-save-pair {
    color: var(--gold);
    font-size: 14px;
    font-weight: 900;
  }
  .wiz-mobile-features-slot { padding: 0; }
  .wiz-mobile-features-slot .cf-choice-block { margin: 0 12px 12px; }
  .wiz-mobile-features-slot .chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; }
  .wiz-mobile-features-slot .chip { flex: 0 0 auto; max-width: 100%; white-space: normal; word-break: break-word; }
  .wiz-mobile-features-slot .asi-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
  .wiz-mobile-features-slot .asi-col { text-align: center; }
  .wiz-mobile-features-slot .asi-col-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--text-faint);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .wiz-mobile-features-slot .asi-ab-sel {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    font-size: 15px;
  }
  .wiz-mobile-features-slot .cf-choice-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
  .wiz-mobile-features-slot .cf-tab { flex: 1; min-height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-muted); font-weight: 700; font-size: 13px; cursor: pointer; }
  .wiz-mobile-features-slot .cf-tab.active { border-color: rgba(232,198,106,.55); background: rgba(232,198,106,.1); color: var(--gold); }
  .wiz-mobile-features-slot details.feature > summary { min-height: 42px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
  .wiz-mobile-features-slot .feature-meta { font-size: 10px; }
  .wiz-mobile-features-slot details.feature > summary::marker { display: none; }
  .wiz-mobile-features-slot .cf-card { margin: 0 0 4px !important; }
  .wiz-mobile-features-slot .cf-card-header { padding: 7px 12px !important; min-height: 0 !important; gap: 6px !important; }
  .wiz-mobile-features-slot .cf-card-name { font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .wiz-mobile-features-slot .cf-card-meta { font-size: 10px !important; white-space: nowrap !important; }
  .wiz-mobile-features-slot .cf-card-status { width: auto !important; flex-shrink: 0 !important; justify-content: flex-end !important; }
  .wiz-mobile-features-slot .cf-card-head { padding: 7px 12px 4px !important; font-size: 12px !important; }
  .wiz-mobile-features-slot .cf-card-body { padding: 8px 12px 10px !important; font-size: 13px !important; }
  /* Secondary class features use details.cf-card > summary (different renderer) */
  #wizMobileSecondarySlot details.cf-card > summary,
  .wiz-mobile-features-slot details.cf-card > summary {
    padding: 7px 12px !important;
    min-height: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    list-style: none !important;
  }
  #wizMobileSecondarySlot details.cf-card > summary strong,
  .wiz-mobile-features-slot details.cf-card > summary strong {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #wizMobileSecondarySlot details.cf-card > summary small,
  .wiz-mobile-features-slot details.cf-card > summary small {
    font-size: 10px !important;
    display: block !important;
  }
  #wizMobileSecondarySlot details.cf-card,
  .wiz-mobile-features-slot details.cf-card { margin-bottom: 4px !important; }
  /* Secondary class features now use div.cf-card — apply same overrides as primary */
  #wizMobileSecondarySlot .mc-cf-summary .cf-card { margin: 0 0 4px !important; }
  #wizMobileSecondarySlot .mc-cf-summary .cf-card-header { padding: 7px 12px !important; min-height: 0 !important; gap: 6px !important; }
  #wizMobileSecondarySlot .mc-cf-summary .cf-card-name { font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #wizMobileSecondarySlot .mc-cf-summary .cf-card-meta { font-size: 10px !important; white-space: nowrap !important; }
  #wizMobileSecondarySlot .mc-cf-summary .cf-card-status { width: auto !important; flex-shrink: 0 !important; }
  #wizMobileSecondarySlot .mc-cf-summary .cf-card-body { padding: 8px 12px 10px !important; font-size: 13px !important; }
  /* Skill card pill toggled by data-done attribute — no JS class manipulation needed */
  .wiz-mob-skill-card-slot .class-skill-card[data-done="1"] .cf-missing-pill { display: none !important; }
  .wiz-mob-skill-card-slot .class-skill-card[data-done="0"] .cf-done-pill { display: none !important; }
  .wiz-mob-skill-card-slot .class-skill-card:not([data-done]) .cf-done-pill { display: none !important; }
  /* Class skill card: proper tap targets */
  .wiz-mobile-features-slot .cf-card-head { padding: 8px 10px; }
  .wiz-mobile-features-slot .mastery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
  }
  .wiz-mobile-features-slot .mastery-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(232,198,106,.2);
    touch-action: manipulation;
    font-size: 13px;
  }
  .wiz-mobile-features-slot .mastery-label.selected {
    border-color: rgba(232,198,106,.55);
    background: rgba(232,198,106,.1);
    color: var(--gold);
  }
  .wiz-mobile-features-slot .mastery-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: manipulation;
  }
  .wiz-mobile-features-slot .choice-note { padding: 4px 10px; font-size: 12px; color: var(--text-muted); margin: 0; }
  .wiz-mobile-features-slot .mastery-count { padding: 4px 10px 8px; font-size: 12px; color: var(--text-faint); margin: 0; }
  /* Hide float nav when rich select is open */
  body.has-rich-select-open .wiz-mobile-float-actions { display: none !important; }
  /* Fold toggle positioned top right */
  .wiz-mobile-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    gap: 8px;
  }
  .wiz-mob-class-toggle {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  /* Compact card body padding */
  .wiz-mobile-primary-class-card .wiz-mobile-card-body { padding: 10px 12px; }
  /* Primary class seal */
  .wiz-mob-class-seal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    margin-top: 10px;
  }
  .wiz-mob-class-seal b { display: block; font-family: var(--font-display); font-size: 20px; color: var(--text); line-height: 1; }
  .wiz-mob-class-seal span { display: block; font-size: 11px; color: var(--text-faint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
  /* Class skill card rendered directly in mobile slot */
  .wiz-mob-skill-card-slot { padding: 0 8px 8px; }
  .wiz-mob-skill-card-slot .class-skill-card,
  .wiz-mob-skill-card-slot .cf-card {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .wiz-mob-skill-card-slot .cf-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
  }
  .wiz-mob-skill-card-slot .choice-note { padding: 8px 12px 4px; font-size: 13px; color: var(--text-muted); margin: 0; }
  .wiz-mob-skill-card-slot .mastery-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px;
  }
  .wiz-mob-skill-card-slot .mastery-label {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 10px; min-height: 48px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--input-bg, var(--surface2));
    cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(232,198,106,.2);
    font-size: 13px; line-height: 1.2; user-select: none;
  }
  .wiz-mob-skill-card-slot .mastery-label.selected {
    border-color: rgba(232,198,106,.6);
    background: rgba(232,198,106,.12);
    color: var(--gold);
  }
  .wiz-mob-skill-card-slot .mastery-label input[type="checkbox"] {
    width: 20px; height: 20px; flex-shrink: 0;
    accent-color: var(--gold); cursor: pointer; touch-action: manipulation;
  }
  .wiz-mob-skill-card-slot .mastery-count { padding: 4px 12px 10px; font-size: 12px; color: var(--text-faint); margin: 0; }
  .wiz-mob-skill-card-slot .class-choice-progress { margin: 0 12px 4px; height: 3px; background: var(--border); border-radius: 99px; overflow: hidden; }
  .wiz-mob-skill-card-slot .class-choice-progress span { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
  /* Rich select: more space, positioned from top */
  .rich-select-dropdown.open {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 10vh !important;
    bottom: auto !important;
    transform: none !important;
    max-height: 75vh !important;
    width: auto !important;
    z-index: 9000 !important;
  }
  /* Secondary class blocks on mobile: match primary card style */
  #wizMobileSecondarySlot .mc-class-block {
    border: 1px solid var(--border-strong) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(19,27,52,.96), rgba(13,18,35,.96)) !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
  }
  #wizMobileSecondarySlot .mc-block-head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
  }
  #wizMobileSecondarySlot .mc-block-body > .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 12px 14px !important;
  }
  #wizMobileSecondarySlot .mc-block-body > div:last-child { padding: 0 14px 14px !important; }
  #wizMobileSecondarySlot .mc-cf-summary { padding: 0 14px; }
  #wizMobileSecondarySlot .field select,
  #wizMobileSecondarySlot .field input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    padding: 0 12px;
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════
   31. MOBILE ABILITIES STEP
   ══════════════════════════════════════════════════════════ */
.wiz-mobile-abilities { display: none; }

@media (max-width: 720px) {
  .wiz-desktop-abilities { display: none; }
  .wiz-mobile-abilities { display: block; }
  .wiz-mobile-ability-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
  .wiz-mobile-ability-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(232,198,106,.24);
    border-radius: 18px;
    background: radial-gradient(circle at 100% 0%, rgba(232,198,106,.13), transparent 38%), linear-gradient(180deg,#17203b,#10172b);
    padding: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  .wiz-mobile-ability-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold), rgba(232,198,106,.2));
  }
  .wiz-mobile-ability-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding-left: 2px; }
  .wiz-mobile-ability-name { margin: 0; color: var(--text); font-family: var(--font-display); font-size: 22px; line-height: 1; }
  .wiz-mobile-ability-abbr { display: block; color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
  .wiz-mobile-mod-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 2px 11px; border: 1px solid rgba(232,198,106,.65); border-radius: 999px; background: rgba(232,198,106,.13); color: var(--gold); font-weight: 900; box-shadow: 0 0 18px rgba(232,198,106,.08); white-space: nowrap; }
  .wiz-mobile-ability-line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(52,69,110,.62); }
  .wiz-mobile-ability-line > span:first-child { color: var(--text-muted); font-size: 13px; }
  .wiz-mobile-ability-line strong { color: var(--text); font-size: 16px; }
  .wiz-mobile-ability-line input { width: 72px; min-height: 34px; border: 1px solid var(--border); border-radius: 10px; background: #0c1328; color: var(--text); text-align: center; }
  .wiz-mobile-ability-final { margin: 4px -4px -4px; padding: 10px 4px 6px; border-top-color: rgba(232,198,106,.28); background: rgba(232,198,106,.05); border-radius: 12px; }
  .wiz-mobile-ability-final strong { color: var(--gold); font-size: 21px; }
  .wiz-mobile-bonus-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .wiz-mobile-derived-preview { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 12px; }
  .wiz-mobile-dp-item { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 10px; text-align: center; }
  .wiz-mobile-dp-item span { display: block; color: var(--gold); font-size: 22px; font-weight: 900; line-height: 1; }
  .wiz-mobile-dp-item label { display: block; margin-top: 5px; color: var(--text-faint); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
}

/* ══════════════════════════════════════════════════════════
   32. MOBILE HOMEBREW STEP
   ══════════════════════════════════════════════════════════ */
.wiz-mobile-homebrew { display: none; }

/* Proficiency select: extracted from inline styles in step5_proficiencies.html */
.mob-hb-add-select {
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font-size: 14px;
}

@media (max-width: 720px) {
  .wiz-desktop-homebrew { display: none; }
  .wiz-mobile-homebrew { display: block; padding: 0 4px 80px; }
  .wiz-mobile-hb-banner {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(232,198,106,.22);
    border-radius: 14px;
    background: rgba(232,198,106,.06);
  }
  .wiz-mobile-hb-banner .hb-badge {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(232,198,106,.18);
    color: var(--gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .wiz-mobile-hb-banner p { margin: 0; color: var(--text-muted); font-size: 12px; }
  .wiz-mobile-hb-card { margin-bottom: 10px; }
  .wiz-mobile-hb-card .wiz-mobile-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(52,69,110,.5);
  }
  .wiz-mobile-hb-card .wiz-mobile-card-head h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
  }
  .wiz-mobile-hb-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(232,198,106,.4);
    background: rgba(232,198,106,.1);
    color: var(--gold);
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
  }
  .wiz-mobile-hb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 24px;
    margin-bottom: 10px;
  }
  .wiz-mobile-hb-chips:empty::after {
    content: "None added";
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
  }
  .wiz-mobile-hb-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .wiz-mobile-homebrew .btn-sm,
  .wiz-mobile-homebrew button.btn-sm {
    min-height: 38px;
    border: 1px solid rgba(232,198,106,.55);
    border-radius: 13px;
    background: rgba(232,198,106,.1);
    color: var(--gold);
    font-weight: 900;
    padding: 0 14px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .wiz-mobile-hb-add-row input,
  .wiz-mobile-hb-add-row select {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0c1328;
    color: var(--text);
    font-size: 14px;
  }
  .wiz-mobile-hb-add-row-skill {
    flex-wrap: wrap;
  }
  .wiz-mobile-hb-add-row-skill select { flex: 1 1 120px; }
  .wiz-mobile-hb-add-row-skill button { flex-shrink: 0; }
  .wiz-mobile-hb-number-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  .wiz-mobile-hb-number-grid .wiz-mobile-field { margin-bottom: 0; }
  .wiz-mobile-hb-number-grid input[type="number"] {
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0c1328;
    color: var(--text);
    text-align: center;
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════
   33. MOBILE EQUIPMENT STEP
   ══════════════════════════════════════════════════════════ */
.wiz-mobile-equipment { display: none; }

@media (max-width: 720px) {
  .wiz-desktop-equipment { display: none; }
  .wiz-mobile-equipment { display: block; padding: 0 4px 80px; }

  .wiz-mobile-eq-card { margin-bottom: 12px; }

  /* Category tab row */
  .mob-eq-cat-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 8px;
    margin-bottom: 8px;
    scrollbar-width: none;
  }
  .mob-eq-cat-row::-webkit-scrollbar { display: none; }
  .mob-eq-cat-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .mob-eq-cat-btn.on {
    border-color: rgba(232,198,106,.55);
    background: rgba(232,198,106,.1);
    color: var(--gold);
  }

  /* Fix 3 (VIS-10): scroll affordance fade on rightmost tab */
  .mob-eq-filter-row-wrap {
    position: relative;
  }
  .mob-eq-filter-row-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
  }

  /* Fix 4 (VIS-11): inventory empty-state clears sticky footer */
  .mob-eq-list {
    padding-bottom: 80px;
  }

  /* Mobile filter pills context */
  .mob-eq-filter-context {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: stretch !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
  }
  .inv-filter-group {
    display: grid !important;
    grid-template-columns: 68px 1fr !important;
    align-items: start !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid rgba(52,69,110,.25) !important;
  }
  .inv-filter-group:last-child { border-bottom: none !important; }
  .inv-filter-group .filter-label {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--text-faint) !important;
    margin: 0 !important;
    padding-top: 5px !important;
  }
  .inv-filter-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  .inv-filter-pills .filter-pill {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  .inv-filter-pills .filter-pill.on {
    border-color: rgba(232,198,106,.55) !important;
    background: rgba(232,198,106,.1) !important;
    color: var(--gold) !important;
  }

  /* Results list — compact 2-row per item */
  .mob-eq-results .inv-res {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  .mob-eq-results .inv-res:last-child { border-bottom: 0; }
  .mob-eq-results .ir-tag {
    grid-column: 1; grid-row: 1;
    font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px;
    white-space: nowrap;
  }
  .mob-eq-results .ir-name {
    grid-column: 2; grid-row: 1;
    font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mob-eq-results .ir-meta {
    grid-column: 1 / 3; grid-row: 2;
    font-size: 11px; color: var(--text-muted);
  }
  .mob-eq-results .ir-spacer { display: none; }
  .mob-eq-results .ir-add {
    grid-column: 3; grid-row: 1 / 3;
    align-self: center;
    min-height: 30px; padding: 0 12px;
    border: 1px solid rgba(232,198,106,.5); border-radius: 999px;
    background: rgba(232,198,106,.1); color: var(--gold);
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }

  /* Inventory list — compact rows */
  .mob-eq-list .inv-group-head {
    padding: 12px 12px 10px;
    margin-top: 10px;
    color: var(--text-faint);
    font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
  }
  .mob-eq-list .inv-group-head:first-child { margin-top: 0; }
  .mob-eq-list .inv-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 8px; row-gap: 3px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(52,69,110,.4);
    align-items: start;
    min-width: 0;
  }
  .mob-eq-list .inv-row:last-child { border-bottom: 0; }
  /* Row 1 left: name */
  .mob-eq-list .iv-name  {
    grid-column: 1; grid-row: 1;
    font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Row 2 left: tag + meta together */
  .mob-eq-list .iv-tag   {
    grid-column: 1; grid-row: 2;
    font-size: 10px; font-weight: 900; letter-spacing: .05em; color: var(--text-faint);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
    white-space: nowrap; justify-self: start; align-self: center;
  }
  .mob-eq-list .iv-meta, .mob-eq-list .iv-prop {
    grid-column: 1; grid-row: 3;
    font-size: 11px; color: var(--text-muted);
    white-space: normal; word-break: break-word;
  }
  .mob-eq-list .iv-atk {
    grid-column: 1; grid-row: 4;
    font-size: 11px; color: var(--gold); font-weight: 700;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  }
  .mob-eq-list .iv-atk-stat { display: flex; flex-direction: column; align-items: center; }
  .mob-eq-list .iv-atk-num { font-size: 15px; font-weight: 900; line-height: 1; }
  .mob-eq-list .iv-atk-lbl { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }
  .mob-eq-list .iv-prof-warn {
    grid-column: 1 / -1; grid-row: 5;
    font-size: 11px; color: var(--warning, #e8a93a);
  }
  /* Right column: buttons stacked */
  .mob-eq-list .inv-btn {
    grid-column: 2;
    white-space: nowrap;
    font-size: 11px; font-weight: 700;
    min-height: 28px; padding: 0 8px;
    border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
  }
  .mob-eq-list .inv-equip { grid-row: 1; }
  .mob-eq-list .inv-equipped {
    grid-row: 1;
    border-color: rgba(117,196,123,.4); background: rgba(117,196,123,.1); color: var(--green, #75c47b);
  }
  .mob-eq-list .inv-remove {
    grid-row: 2;
    border-color: rgba(231,87,79,.35); color: var(--danger, #e7574f); background: transparent;
    margin-top: 3px;
  }
  .mob-eq-list .iv-spacer { display: none; }
  .mob-eq-list .inv-ac {
    display: flex; align-items: baseline; gap: 5px;
    padding: 5px 12px 8px; font-size: 13px; color: var(--text-muted);
  }
  .mob-eq-list .inv-ac-v { font-size: 20px; font-weight: 900; color: var(--gold); }

  /* (old duplicate rules removed) */
}

/* ══════════════════════════════════════════════════════════
   34. MOBILE SPELLS STEP
   ══════════════════════════════════════════════════════════ */
.wiz-mobile-spells { display: none; }

@media (max-width: 720px) {
  .wiz-desktop-spells { display: none; }
  .wiz-mobile-spells { display: block; padding: 0 4px 80px; }

  .wiz-mobile-spell-summary {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface2);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
  }
  .wiz-mobile-spell-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
  .wiz-mobile-spell-tab {
    flex: 1;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
  }
  .wiz-mobile-spell-tab.active {
    border-color: rgba(232,198,106,.55);
    background: rgba(232,198,106,.1);
    color: var(--gold);
  }
  .wiz-mobile-spell-panel { /* container */ }
  .wiz-mobile-spell-panel-hidden { display: none; }
  .wiz-mobile-spell-level-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
  .wiz-mobile-level-chip {
    padding: 10px 10px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .wiz-mobile-level-chip.active {
    border-color: rgba(232,198,106,.55);
    background: rgba(232,198,106,.1);
    color: var(--gold);
  }
  .wiz-mobile-spell-list { display: grid; gap: 6px; }
  .wiz-mobile-no-spells-msg {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface2);
    margin-bottom: 12px;
  }

  /* Fix 4: Selected spells panel */
  #wizMobSpellSelected { display: grid; gap: 0; }
  #wizMobSpellSelected details.feature > summary {
    min-height: 46px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }

  /* Library spell rows — each in its own card */
  .mob-spell-lib-row {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 6px;
    overflow: hidden;
  }
  .mob-spell-lib-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
  }
  .mob-spell-lib-add {
    flex-shrink: 0;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(232,198,106,.55);
    border-radius: 999px;
    background: rgba(232,198,106,.1);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
  }
  .mob-spell-lib-add:active { background: rgba(232,198,106,.25); }
  /* Selected spells — compact rows with tap-to-expand */
  .mob-spell-sel-head {
    padding: 6px 12px;
    font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold); background: rgba(232,198,106,.07);
    border-bottom: 1px solid rgba(232,198,106,.18);
  }
  .mob-spell-sel-row {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(52,69,110,.35);
    cursor: pointer;
  }
  .mob-spell-sel-row:last-child { border-bottom: none; }
  .mob-spell-sel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .mob-spell-sel-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
  .mob-spell-sel-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
  .mob-spell-sel-remove {
    min-width: 28px; min-height: 28px; flex-shrink: 0;
    border: 1px solid rgba(231,87,79,.45); border-radius: 8px;
    background: transparent; color: var(--danger, #e7574f);
    font-size: 16px; cursor: pointer; line-height: 1;
  }
  .mob-spell-sel-prepared {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    margin-top: 4px; font-size: 13px; color: var(--text-muted);
    touch-action: manipulation; cursor: pointer;
  }
  .mob-spell-sel-prepared input { width: 24px; height: 24px; flex-shrink: 0; }
  .mob-spell-sel-badge {
    font-size: 10px; font-weight: 900; padding: 2px 7px;
    border: 1px solid rgba(232,198,106,.4); border-radius: 999px;
    background: rgba(232,198,106,.1); color: var(--gold);
    white-space: nowrap; flex-shrink: 0;
  }
  .mob-spell-sel-desc {
    margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text-muted);
    font-size: 13px; line-height: 1.55;
  }
  /* formatDescriptionHTML() output now supplies real <p>/<br>/<ul> structure
     here (2026-08-15) -- white-space:pre-wrap was only needed for the raw
     text this used to hold and would double-space against it if kept. */
  .mob-spell-sel-desc > p:first-child, .mob-spell-sel-desc > ul:first-child { margin-top: 0; }
  .mob-spell-sel-desc > p:last-child, .mob-spell-sel-desc > ul:last-child { margin-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════
   35. VAULT DIALOG
   ══════════════════════════════════════════════════════════ */
.vault-dialog-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.vault-dialog-card {
  background: var(--surface, #1a1f35);
  border: 1px solid var(--border, #2a3050);
  border-radius: 12px;
  min-width: 300px; max-width: 420px; width: 100%;
  padding: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  /* A tall dialog (the one-off effect form on a phone) scrolls inside its card
     instead of running off the screen with the Save button out of reach. */
  max-height: calc(100vh - 2rem); overflow-y: auto;
}
.vault-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.vault-dialog-title {
  font-family: var(--font-serif, serif);
  font-size: 1rem; font-weight: 600;
  color: var(--text-heading, #e8d5a3);
}
.vault-dialog-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #888); font-size: 1.2rem; line-height: 1;
  padding: 0 0.25rem;
}
.vault-dialog-close:hover { color: var(--text, #fff); }
.vault-dialog-body { margin-bottom: 1rem; }
.vault-dialog-message { color: var(--text, #ddd); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.vault-dialog-input {
  width: 100%; padding: 0.5rem 0.75rem;
  background: var(--input-bg, #0e1225); color: var(--text, #ddd);
  border: 1px solid var(--border, #2a3050); border-radius: 6px;
  font-size: 0.9rem; box-sizing: border-box;
}
.vault-dialog-input:focus { outline: none; border-color: var(--gold, #d4a843); }
.vault-dialog-select-list {
  display: flex; flex-direction: column; gap: 0.4rem;
  max-height: 240px; overflow-y: auto;
}
.vault-dialog-select-item {
  text-align: left; background: var(--card-bg, #141930);
  border: 1px solid var(--border, #2a3050); border-radius: 6px;
  padding: 0.5rem 0.75rem; color: var(--text, #ddd); cursor: pointer; font-size: 0.9rem;
}
.vault-dialog-select-item:hover { background: var(--surface-hover, #1e2540); border-color: var(--gold, #d4a843); }
.vault-dialog-empty { color: var(--text-muted, #888); font-size: 0.85rem; padding: 0.5rem 0; margin: 0; }
.vault-dialog-footer { display: flex; gap: 0.5rem; justify-content: flex-end; }
/* --text-heading, --card-bg and --surface-hover are not theme tokens, so in the light theme the title
   and the choice buttons fell back to their dark-theme literals (pale gold on parchment: 1.01:1; dark
   buttons with dark text). Light gets real tokens; dark is untouched. */
[data-theme="light"] .vault-dialog-title { color: var(--text); }
[data-theme="light"] .vault-dialog-select-item { background: var(--input-bg); color: var(--text); border-color: var(--border-strong); }
[data-theme="light"] .vault-dialog-select-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.vault-dialog-close { min-width: 36px; min-height: 36px; }
.btn-danger { background: var(--accent, #8b2020); color: var(--on-accent, #fff); border: none; }
.btn-danger:hover { background: var(--accent-hover, #a52828); }

/* ── UX-M-4: Sticky mini-stats bar on mobile step 4 ────────────────────────── */
.wiz-mobile-ability-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  margin: 0 -4px 12px;
  border-radius: 0;
}
.mob-sticky-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mob-sticky-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold, #d4a843);
  font-family: var(--font-serif, serif);
}
.mob-sticky-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ── UX-M-5: Foldable homebrew category cards on mobile ────────────────────── */
.wiz-mobile-hb-card .wiz-mobile-card-head {
  cursor: pointer;
  user-select: none;
}
.wiz-mobile-hb-card .wiz-mobile-card-head:hover {
  opacity: 0.85;
}
.mob-hb-chevron {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}

/* ── UX-M-7: Compact mobile spell summary ──────────────────────────────────── */
.mob-spell-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.mob-spell-summary-row > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.mob-spell-sum-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold, #d4a843);
  font-family: var(--font-serif, serif);
}
.mob-spell-sum-lbl {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════
   36. MISC FIXES & FEATURES
   ══════════════════════════════════════════════════════════ */
.ability-method-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.point-buy-budget {
  font-size: 0.85rem; color: var(--text-muted);
}
#point-buy-toggle.active,
#mob-point-buy-toggle.active {
  background: var(--gold, #d4a843); color: #111; border-color: var(--gold, #d4a843);
}

/* --- Species / Background preview (Fix VIS-3) --- */
.identity-preview {
  margin-top: 6px; padding: 8px 10px;
  background: var(--card-bg, #141930);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.8rem;
}
.identity-preview-content {
  display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-muted);
}
.identity-preview-content span { white-space: nowrap; }

/* --- Starting Equipment hint (Fix VIS-6) --- */
.starting-equipment-hint { margin-bottom: 12px; }
.starting-eq-details summary {
  cursor: pointer; font-size: 0.85rem; color: var(--text-muted);
  padding: 6px 0; list-style: none;
}
.starting-eq-details summary::-webkit-details-marker { display: none; }
.starting-eq-details summary::before { content: '▶ '; font-size: 10px; }
.starting-eq-details[open] summary::before { content: '▼ '; }
.starting-eq-body { padding: 8px 0; }
.starting-eq-option {
  font-size: 0.82rem; color: var(--text-muted);
  padding: 8px 10px; margin: 6px 0;
  border: 1px solid var(--border); border-radius: 6px;
}
.starting-eq-option-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.starting-eq-line { padding: 1px 0; }
.starting-eq-unmatched { padding: 1px 0; font-style: italic; opacity: 0.8; }
.starting-eq-choice { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.starting-eq-choice select { font-size: 0.8rem; }
.btn-apply-starting-eq {
  margin-top: 6px; font-size: 0.78rem; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--accent, #3b5bdb); color: #fff; cursor: pointer;
}
/* Item #5: locked out after use so starting equipment can't be added twice. */
.btn-apply-starting-eq:disabled {
  background: var(--surface2, #2a2a33); color: var(--text-muted); cursor: not-allowed; border-color: var(--border);
}

/* ══════════════════════════════════════════════════════════
   37. ERROR PAGES
   ══════════════════════════════════════════════════════════ */
.error-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: 2rem;
}
.error-card {
  text-align: center; max-width: 480px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 3rem 2rem;
}
.error-code {
  font-size: 5rem; font-weight: 800; line-height: 1;
  color: var(--gold, #d4a843); font-family: var(--font-serif, serif);
  margin-bottom: 0.5rem;
}
.error-title { font-size: 1.5rem; margin: 0 0 1rem; }
.error-message { color: var(--text-muted); margin: 0 0 2rem; }

/* --- UX-D-4: Background panel group labels --- */
.bg-group-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 12px 0 6px;
  padding-top: 10px; border-top: 1px solid var(--border);
  font-weight: 600;
}
.bg-group-label:first-of-type { border-top: none; padding-top: 0; }

/* --- UX-D-11: Sticky save bar on Review step --- */
.review-sticky-save {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 8px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.review-sticky-status {
  font-size: 0.85rem; color: var(--text-muted); flex: 1;
}

/* --- UX-D-10: Weapon column header in inventory ---
   Moved to style-wizard-steps.css (§ "your inventory list"), where it can share one set of
   column widths with the rows underneath it. Widths declared only here could not: the
   header sat in this file and the rows in that one, so nothing tied a header to the cell
   it was supposed to label, and every header but WEAPON drifted to the right-hand end. */

/* ══════════════════════════════════════════════════════════
   38. ACCESSIBILITY (WHCM)
   ══════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid ButtonText;
    outline-offset: 2px;
  }
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* ══════════════════════════════════════════════════════════
   39. UI COMPONENTS
   ══════════════════════════════════════════════════════════ */
.build-badge {
  position: fixed; bottom: 6px; right: 8px; z-index: 9999;
  font-size: 10px; font-family: monospace;
  color: var(--text-faint, #555); opacity: 0.45;
  pointer-events: none; user-select: none;
  letter-spacing: 0.04em;
}
.build-badge:hover { opacity: 0.9; }
/* The play sheet scales to fill the window, so the bottom corner always lands on
   the Notes box. The navbar's right end is empty: sit there instead. */
body.play-page .build-badge { top: 20px; bottom: auto; }
@media (max-width: 720px) { .build-badge { display: none; } }

/* --- Toggle switch --- */
.hb-toggle-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 4px 0;
}
.toggle-switch {
  position: relative; display: inline-block; flex-shrink: 0;
  width: 44px; height: 24px; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--border-strong, #2a3050);
  border-radius: 12px;
  transition: background 0.2s;
}
.toggle-switch input:checked ~ .toggle-track {
  background: var(--gold, #d4a843);
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(20px);
}
.toggle-switch:focus-within .toggle-track {
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(212,168,67,0.35));
}
.hb-toggle-text { flex: 1; }
.hb-toggle-label { display: block; font-size: 0.9rem; color: var(--text); margin-bottom: 3px; }
.hb-toggle-hint { display: block; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

/* --- Attunement circles --- */
/* Item #10: more breathing room between attunement slots so a long item name/label
   doesn't feel cramped/cut off against its neighbor. */
/* Items #13/#14 (round 2): the previous nowrap+ellipsis+60px cap avoided height variance
   between slots, but silently cut long item names short (e.g. "Amulet of Health" ->
   "Amulet of..."), which was the actual complaint. Fix properly: give each slot a fixed
   width AND a fixed-height label (wraps up to 2 lines, clamped) so every slot -- attuned or
   empty -- is exactly the same height, while still showing the full name (wrapped instead
   of truncated) rather than trading legibility for layout stability. */
.attune-slots { display: flex; gap: 28px; margin: 8px 0; flex-wrap: wrap; row-gap: 18px; }
.attune-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; cursor: default; width: 92px;
  /* Item #17 (round 4, root-caused for real via a Playwright script that logs into a live
     character, attunes an item through the API, loads /characters/{id}/play, and diffs
     getBoundingClientRect() of the attuned vs. empty .attune-circle -- not by re-reading the
     CSS and guessing, which is how 4 prior "fixes" (all targeting the icon glyph or generic
     flex centering) failed to actually change anything measurable. Real cause: the JS
     template (play.js) puts a literal class="empty" on an unattuned slot, which collided
     with the totally unrelated generic placeholder rule `.loading, .empty { padding: 24px 0;
     }` in style-base.css (meant for "no results"/"loading" text, nothing to do with
     attunement) -- every empty slot silently picked up a 24px top+bottom padding the attuned
     slot never had, pushing its circle down by exactly that 24px. Fixed at the source: the
     class was renamed to `attune-empty` in play.js so it no longer matches `.empty` anywhere.
     The explicit height/flex-start/no-stretch rules below are kept as defense-in-depth (they
     make every slot's box byte-identical regardless of label length) but were NOT the actual
     bug -- confirmed by measuring the exact same offset before and after adding them, with
     the fix only taking effect once the colliding class was renamed. */
  height: 88px; flex-shrink: 0; align-self: flex-start;
}
.attune-circle {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold);
  flex-shrink: 0;
}
.attune-slot.attuned .attune-circle {
  background: rgba(212,168,67,0.15);
  border-color: var(--gold, #d4a843);
}
/* A slot past the character's cap. It only appears when a feature that granted
   a slot went away under somebody who was using it -- the engine still grants
   the item, so this says "unattune one" rather than hiding it. `height: auto`
   because the note below the label is a fourth line and the fixed 88px above
   would clip it. */
.attune-slot.attune-over { height: auto; }
.attune-slot.attune-over .attune-circle {
  border-color: var(--danger, #c0392b);
  border-style: dashed;
}
.attune-over-note {
  font-size: 11px; line-height: 1.2; text-align: center;
  color: var(--danger, #c0392b);
}
/* Item #17 (round 3): the ✦ glyph has no explicit box of its own, so flexbox centers its
   font-fallback line box (ascent+descent) rather than the glyph's visible ink -- most symbol
   fallback fonts pack that glyph high in an oversized line box, making the filled bauble
   spring up relative to the empty (contentless) circle. Giving the icon its own fixed,
   symmetric box removes the dependency on font metrics entirely. */
.attune-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1;
}
.attune-label {
  font-size: 11px; color: var(--text-muted);
  text-align: center; max-width: 92px; min-height: 28px;
  line-height: 1.3; white-space: normal; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.attune-list { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* --- Magic-item chips in the item drawer (playChipsHTML) --- */
.mobile-sheet-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.mobile-sheet-chips .iv-prop {
  font-size: 11px; color: var(--text-muted); cursor: help;
  text-decoration: underline dotted var(--text-faint); text-underline-offset: 2px;
}
.mobile-sheet-chips .iv-prop:hover { color: var(--text); }
.mobile-sheet-chips .iv-vibe {
  font-size: 11px; color: var(--text-muted); cursor: help; text-decoration: none;
  padding: 1px 8px; border-radius: 99px;
  background: rgba(22,28,51,.85); border: 1px solid var(--border-strong);
}
.mobile-sheet-chips .iv-meta-sep { display: none; }
.mobile-sheet-drawer .locked-rarity { font-size: 10px; }

/* ── Mobile navbar: compact icon tabs + avatar slide-down panel ────────── */
@media (max-width: 720px) {
  .navbar { gap: 10px; padding: 0 12px; }
  .brand { font-size: 17px; white-space: nowrap; }
  .nav-tabs { margin-left: 6px; gap: 4px; }
  .nav-right { margin-left: auto; }
  .nav-tab {
    position: relative;
    padding: 7px 10px;
  }
  /* Hide the tab label visually but keep it for screen readers (the emoji
     icon is aria-hidden, so the clipped label stays the accessible name). */
  .nav-tab > span:last-child {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav-tab > span:first-child { font-size: 17px; }
  .user-menu-dropdown {
    position: fixed; left: 12px; right: 12px; top: 60px;
    animation: navbar-menu-slide .18s ease;
  }
  @keyframes navbar-menu-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* The wizard's mobile inputs hard-code the dark field colour (#0c1328), which left dark text on a dark box in
   the light theme (the Homebrew step's skill and spell selects measured 1.1:1). Light uses the field token. */
[data-theme="light"] .wiz-mobile-ability-line input,
[data-theme="light"] .wiz-mobile-hb-add-row input,
[data-theme="light"] .wiz-mobile-hb-add-row select,
[data-theme="light"] .wiz-mobile-hb-number-grid input[type="number"] { background: var(--input-bg); }

/* Settings page on tablets: the collapsible section headers were 17px tall (the wizard's own mobile rule stops at 720px). */
@media (min-width: 721px) and (max-width: 900px) {
  .admin-container .section-head { min-height: 36px; box-sizing: border-box; }
  /* Review step (tablet): the sticky Save and the organisation buttons were 28px tall. */
  .review-sticky-save .btn, .review-rail-card .modal-actions .btn { min-height: 36px; box-sizing: border-box; }
}

/* --- Mobile touch-target and floating-nav fixes (UX pass 2026-10-02) --- */
@media (max-width: 720px) {
  /* The fixed Back/Next pair covers the last ~70px of content; reserve that room. */
  .wizard-shell { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wizard-shell .inv-btn,
  .wizard-shell .inv-btn.inv-equipped,
  .wizard-shell .inv-btn.inv-remove,
  .wizard-shell .ir-add,
  .mob-eq-results .ir-add,
  .mob-spell-lib-add { min-height: 40px; }
  .hbw-check input[type="checkbox"],
  .hbw-check input[type="radio"] { width: 22px; height: 22px; flex: none; }
}

/* --- Phone readability floor (UX pass 2026-10-02) ---------------------------
   Nothing a player has to read sits under 11px; running text and badges that
   carry words sit at 12px. `body` in front lifts these over the single-class
   rules they replace without !important. */
@media (max-width: 720px) {
  /* Single-row navbar: the brand is the same link as the first tab, so on a phone it gives its room to
     the controls and the bar drops from three stacked rows (125px) to one (52px). */
  .navbar { flex-direction: row; align-items: center; min-height: 52px; gap: 6px; padding: 6px max(12px, env(safe-area-inset-left)) 6px max(12px, env(safe-area-inset-right)); }
  .navbar .brand { display: none; }
  .navbar .nav-tabs { flex: 1 1 auto; margin-left: 0; gap: 2px; justify-content: space-between; min-width: 0; }
  .navbar .nav-tab { min-height: 40px; min-width: 40px; justify-content: center; box-sizing: border-box; }
  .navbar .nav-right { margin-left: 0; padding-bottom: 0; overflow: visible; flex: 0 0 auto; }
  .user-menu-dropdown { top: 58px; }


  body .save-state-pill, body .save-state-pill--mobile { font-size: 12px; }
  body .section-chevron, body .rich-select-trigger-arrow, body .mob-hb-chevron, body .wiz-mob-class-toggle { font-size: 12px; }
  body .section-hint, body .mode-card .mode-edition, body .rv-carry-pdl { font-size: 12px; }
  body .mode-card .mode-tag, body .needs-choice-pill, body .hb-badge, body .wiz-mobile-hb-section-label,
  body .inv-group-head, body .inv-cnt, body .mob-spell-sum-lbl, body .mob-sticky-lbl,
  body .wiz-mobile-ability-abbr, body .wiz-mobile-card-num, body .iv-homebrew { font-size: 11px; }
  body .wiz-mobile-card-head h2, body #wizMobilePrimaryTitle { font-size: 12px; }
}

@media (max-width: 720px) {
  body .wiz-mobile-dp-item label, body .wiz-mob-rev-stat span, body .mob-eq-list .iv-atk-lbl,
  body .rv-skill-name small, body .ability-bonus-line, body .cf-status-pill,
  body .source-badge, body .edition-badge, body .iv-tag, body .ir-tag,
  body .mob-eq-results .ir-tag, body .mob-eq-list .iv-tag { font-size: 11px; }
}

@media (max-width: 720px) {
  body .cf-card-meta span, body .wiz-mobile-hb-banner .hb-badge, body .mob-eq-list .inv-group-head,
  body .rv-inv-badge, body .wiz-mob-rev-src-chip { font-size: 11px; }
}

/* Starting currency: five coins share one row (was four plus a stray PP) -- UX pass, item 14. */
@media (max-width: 720px) {
  .eq-currency-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .eq-currency-grid input[type="number"] { width: 100%; min-width: 0; box-sizing: border-box; padding-left: 4px; padding-right: 4px; }
}

/* --- UX pass round 3: play sheet, account button, inventory tags --- */
@media (max-width: 720px) {
  .navbar .user-menu-toggle { width: 40px; height: 40px; }
  /* Tags in the wizard inventory broke mid-word ("Commu / nication"); a tag is one word-group. */
  body .iv-tag, body .ir-tag { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  /* The last step has nowhere to go "Next"; the floating pair also sat on top of the Review rows. */
  body .rv-inv-badge, body .wiz-mobile-review em, body .rv-skill-name em { font-size: 11px; }
}

/* The phone play sheet is used up to 899px (tablets too), so its fixes live here and not in the 720px blocks. */
@media (max-width: 899px) {
  /* Quick rail: seven cells share the width; give Heroic the room its label needs. */
  .mobile-sheet-rail { grid-template-columns: 1.1fr 1fr 1.2fr repeat(4, minmax(0, 1fr)); gap: 4px; }
  .mobile-sheet-rail-btn { padding: 6px 2px; }
  .mobile-sheet-rail-btn span { font-size: 10px; letter-spacing: .03em; }
  /* Category bar: wider side buttons so "Resources" / "Conditions" are not cut to "RESOUR...". */
  .mobile-sheet-category-top { grid-template-columns: 74px 1fr 74px 44px; }
  .nav-adjacent { font-size: 10px; letter-spacing: 0; max-width: 100%; }
  body .mobile-sheet-kicker { font-size: 11px; }
  /* `.mobile-sheet-row span { display: block }` won over the grid, so the -/value/+ counter collapsed into a 15px
     column. The row's own rule is more specific than the control's. */
  .mobile-sheet-row .mobile-resource-control { display: grid; }
  button.mobile-sheet-chip { min-height: 40px; }
}