/* ── Loadout summary (top) ─────────────────────────────────────── */
.inv-loadout-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 540px) {
  .inv-loadout-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.inv-loadout-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  /* rc159 — opaque loadout chip. */
  background: var(--card-bg, #1a2138);
  border: 1px solid var(--slot, #5ad6ff);
  border-radius: 10px;
  min-width: 0;
}
.inv-loadout-chip-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--slot, #5ad6ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-loadout-chip-icon svg { width: 100%; height: 100%; }
.inv-loadout-chip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.inv-loadout-chip-slot {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #8e93ad;
  text-transform: uppercase;
  font-weight: 700;
}
.inv-loadout-chip-name {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-loadout-chip-lv {
  color: #8e93ad;
  font-weight: 500;
  font-size: 11px;
  margin-left: 4px;
}

/* ── Wallet strip (read-only) ──────────────────────────────────── */
.inv-wallet {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.inv-wallet-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  /* rc159 — opaque wallet chip. */
  background: var(--card-bg, #1a2138);
  border: 1px solid var(--chip-color, #4a5478);
  border-radius: 8px;
  min-width: 0;
}
.inv-wallet-chip-icon {
  width: 18px;
  height: 18px;
  color: var(--chip-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-wallet-chip-icon svg { width: 100%; height: 100%; }
.inv-wallet-chip-count {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.inv-wallet-chip-label {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #8e93ad;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Sections (one per slot) ───────────────────────────────────── */
.inv-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.inv-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--slot, #fff);
  text-transform: uppercase;
  font-weight: 800;
}
.inv-section-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--slot, #fff) 35%, transparent),
    transparent);
}
.inv-section-head .inv-section-rule:last-child {
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--slot, #fff) 35%, transparent));
}
.inv-section-title {
  white-space: nowrap;
  padding: 0 4px;
}

.inv-section-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Item row ──────────────────────────────────────────────────── */
.inv-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon body"
    "icon actions";
  gap: 4px 12px;
  padding: 10px 12px;
  /* rc159 — opaque inventory row. */
  background: var(--card-bg, #1a2138);
  border: 1px solid var(--card-border, #2a3454);
  border-left: 3px solid var(--slot, #5ad6ff);
  border-radius: 10px;
  align-items: center;
}
@media (min-width: 560px) {
  .inv-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "icon body actions";
    gap: 0 14px;
  }
}
.inv-row.is-equipped {
  border-left-width: 5px;
  border-left-color: var(--slot, #5ad6ff);
  /* rc159 — opaque equipped inventory row. */
  background: color-mix(in srgb, var(--slot, #5ad6ff) 14%, var(--card-bg, #1a2138));
}
.inv-row.is-locked {
  opacity: 0.55;
  border-left-color: #4a5478;
}
.inv-row.is-max .inv-row-meta { color: #ffcf4a; font-weight: 800; }

.inv-row-icon {
  grid-area: icon;
  width: 44px;
  height: 44px;
  color: var(--slot, #5ad6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  font-size: 22px;
}
.inv-row-icon svg { width: 72%; height: 72%; }

.inv-row-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inv-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-row-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.inv-row-meta {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  text-transform: uppercase;
}
.inv-row-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 14px;
  font-size: 11px;
}
.inv-row-stat .inv-stat-key { color: rgba(255,255,255,0.55); margin-right: 4px; }
.inv-row-stat .inv-stat-val { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-row-stat .inv-stat-arrow { color: rgba(255,255,255,0.4); margin: 0 2px; }
.inv-row-stat .inv-stat-next { color: var(--slot, #fff); font-weight: 800; }
.inv-row-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

/* ── Actions column ────────────────────────────────────────────── */
.inv-row-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (min-width: 560px) {
  .inv-row-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
}
.inv-row-cost {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inv-row-cost.is-short {
  color: #ff9a64;
}
.inv-row-btns {
  display: flex;
  gap: 6px;
}
.inv-btn {
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 32px;
  min-width: 76px;
  color: #fff;
  font-family: inherit;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.inv-btn:active:not([disabled]) { transform: translateY(1px); }
.inv-btn:hover:not([disabled]) { filter: brightness(1.1); }

.inv-btn-upgrade {
  background: linear-gradient(135deg, color-mix(in srgb, var(--slot, #5ad6ff) 75%, #fff 8%),
                                       color-mix(in srgb, var(--slot, #5ad6ff) 55%, #000 8%));
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--slot, #5ad6ff) 40%, #000);
}
.inv-btn-evolve {
  background: linear-gradient(135deg, #ffd066, #ff9a64);
  box-shadow: 0 2px 0 0 rgba(140, 80, 24, 0.5);
}
.inv-btn-equip {
  background: rgba(255,255,255,0.12);
  border: 1px solid color-mix(in srgb, var(--slot, #5ad6ff) 35%, transparent);
}
.inv-btn-equipped {
  background: var(--slot, #5ad6ff);
  color: #0c0f16;
  cursor: default;
  opacity: 0.9;
}
.inv-btn-max {
  background: rgba(255,207,74,0.18);
  color: #ffd066;
  cursor: default;
  border: 1px solid rgba(255,207,74,0.35);
}
.inv-btn.cant-afford {
  opacity: 0.55;
  filter: grayscale(0.4);
}

/* ── Toast ─────────────────────────────────────────────────────── */
.inv-toast {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 18px;
  background: rgba(15, 18, 26, 0.95);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.play-hub-panel[data-tab="inventory"] { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .inv-btn { transition: none; }
  .inv-toast { transition: opacity 0.001s; }
}

/* ─── BUILD SUMMARY PANEL ──────────────────────────────────────────────────
   Tab-toggled side panel that shows the run's equipment + powerup picks +
   live stats. Slides in from the left when .visible is on, slides out
   when removed. Sits above the gameplay HUD's z-stack but below modals
   (powerup screen, shop, game-over) so opening a modal hides the panel.
*/
#build-summary {
  position: fixed;
  top: 56px;
  left: 0;
  width: 240px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  background: rgba(12, 14, 22, 0.94);
  color: #e8eaf2;
  border-right: 1px solid rgba(167, 139, 250, 0.35);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font: 11px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 10px 12px 12px;
  transform: translateX(-105%);
  transition: transform 180ms ease-out;
  z-index: 8;
  pointer-events: none;
}
#build-summary.visible {
  transform: translateX(0);
  pointer-events: auto;
}
#build-summary .bs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#build-summary .bs-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c7cbe0;
}
#build-summary .bs-hint {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #6b7388;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
}
#build-summary .bs-section { margin-bottom: 10px; }
#build-summary .bs-section h3 {
  margin: 0 0 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #8b92a8;
  text-transform: uppercase;
}
#build-summary dl.bs-eq,
#build-summary dl.bs-stats {
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 8px;
  row-gap: 3px;
  margin: 0;
}
#build-summary dl.bs-eq dt,
#build-summary dl.bs-stats dt {
  color: #6b7388;
  font-size: 9px;
  letter-spacing: 0.12em;
  align-self: baseline;
}
#build-summary dl.bs-eq dd,
#build-summary dl.bs-stats dd {
  margin: 0;
  color: #e8eaf2;
  font-size: 11px;
}
#build-summary .bs-slot-gun       { color: #8aa9ff; }
#build-summary .bs-slot-secondary { color: #ffb37a; }
#build-summary .bs-slot-shield    { color: #7ee2ff; }
#build-summary .bs-slot-drone     { color: #c89bff; }
#build-summary .bs-slot-limit     { color: var(--gold); }
#build-summary ul.bs-pu {
  margin: 0;
  padding: 0;
  list-style: none;
}
#build-summary ul.bs-pu li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
#build-summary ul.bs-pu li:last-child { border-bottom: none; }
#build-summary .bs-pcount {
  color: #a78bfa;
  font-weight: 700;
  font-size: 11px;
  min-width: 22px;
}
#build-summary .bs-pname {
  color: #c7cbe0;
  font-size: 10px;
}
#build-summary p.bs-empty {
  margin: 0;
  color: #6b7388;
  font-style: italic;
  font-size: 10px;
}
/* Hide while modals own the screen */
body.dying #build-summary,
body.victorious #build-summary { display: none; }

/* On narrow portrait viewports, shrink the panel so it doesn't eat the arena */
@media (max-width: 640px) {
  #build-summary {
    width: 180px;
    font-size: 10px;
    padding: 8px;
  }
  #build-summary dl.bs-eq,
  #build-summary dl.bs-stats { grid-template-columns: 48px 1fr; column-gap: 6px; }
}

/* ─── STAGE-SELECT THEME (rc166 — portrait fidelity per Figma 3332:40) ─────
   Typography, colours and proportions pulled from the Figma annotation file
   (portrait 1075×1440). Original SVG + procedural CSS only — no third-party
   art is embedded. The map background continues to come from the project's
   own per-chapter SVGs under assets/world-map/.

   Layout: CSS grid on the stages panel. Portrait stacks header → chapter
   bar → map → preview → pagedots. body.landscape splits map and preview
   into a 2-column row so wide displays don't waste vertical space.

   `.ss-goldpill` is the shared gold-button mixin (BACK, NEXT, chapter
   ribbon). `.ss-nav-tile` styling on the bottom nav is the wood-tile look
   from the Figma (raised tile, depressed active state, ~80px circular
   icon disc, Inter label below).
*/

/* Gold pill mixin. Procedural — no bitmap. Used by .ss-back-btn,
   .ss-chapter-pill, .ss-preview-next. */
.ss-goldpill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #f7d989 0%, #e8b454 50%, #b67a2a 100%);
  border: 2px solid #7a4a18;
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.8),
    inset 0 -3px 6px rgba(122, 74, 24, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.45);
  color: #cfccc3;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ss-goldpill:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.9),
    inset 0 -3px 6px rgba(122, 74, 24, 0.4),
    0 5px 12px rgba(0, 0, 0, 0.5);
}
.ss-goldpill:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(60, 30, 5, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Stages panel grid. Default = portrait stack. landscape override below.
   rc168 — preview card row removed (popover restored); panel padding
   no longer reserves space for an inline preview. Bottom nav is
   position:absolute at the bottom (rc164 legacy), so the panel content
   needs bottom-padding to keep its content above the nav. */
#stage-select .play-hub-panel[data-tab="stages"]:not([hidden]) {
  display: grid;
  grid-template-areas:
    "chapter"
    "map";
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  gap: 8px 14px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(36px, 6vh, 56px) 18px clamp(40px, 8vh, 160px);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
body.landscape #stage-select .play-hub-panel[data-tab="stages"]:not([hidden]) {
  grid-template-areas:
    "chapter"
    "map";
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
}

/* Chapter bar — 3-col flex: [arrow] [pill] [arrow], centred. */
.ss-chapter-bar {
  grid-area: chapter;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 18px);
  padding: 6px 0 2px;
  position: relative;
  z-index: 2;
}
.ss-chapter-pill {
  background: url('../assets/stage-select/figma/chapter-ribbon.png') center / 100% 100% no-repeat;
  border: none;
  border-radius: 0;
  flex: 0 1 min(559px, 36vw);
  max-width: min(559px, 36vw);
  height: clamp(48px, 8.3vh, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(32px, 8%, 60px) 12px;
  box-sizing: border-box;
}
#ss-chapter-title {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 1.6vw, 22px);
  letter-spacing: 0.06em;
  color: #542e1f;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 232, 182, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* rc168 — chapter chevrons use the SMALL Figma asset (imgImage14, node
   3332:95) which is what the Figma actually shows beside the chapter
   pill. Only the right-pointing variant is exported by Figma — flip it
   via scaleX(-1) for the left button. */
.ss-chapter-arrow {
  /* rc187 — vh-aware so chevrons don't bloat on short landscape. */
  width: clamp(28px, min(4.5vw, 8vh), 62px);
  height: clamp(28px, min(4.5vw, 8vh), 62px);
  flex: 0 0 auto;
  background-image: url('../assets/stage-select/figma/chapter-chevron-small.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  transform: scaleX(-1);
}
.ss-chapter-arrow.ss-chapter-arrow-right {
  transform: none;
}
.ss-chapter-arrow:hover:not(:disabled) {
  transform: scaleX(-1) translateY(-1px);
}
.ss-chapter-arrow.ss-chapter-arrow-right:hover:not(:disabled) {
  transform: translateY(-1px);
}
.ss-chapter-arrow:active:not(:disabled) {
  transform: scaleX(-1) translateY(1px);
}
.ss-chapter-arrow.ss-chapter-arrow-right:active:not(:disabled) {
  transform: translateY(1px);
}
.ss-chapter-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) saturate(0.6);
}
/* Hide the world-map's internal pager + its internal pagedots row —
   we render our own #ss-pagedots + chapter chevrons in .ss-chapter-bar.
   The world-map helpers still get built; they're just CSS-hidden. */
.world-map-pager,
.world-map-pager .wm-chapter-title,
.world-map .wm-dots {
  display: none !important;
}

/* Frame — wraps the map area only. Parchment-tone gradient + subtle
   inner shadow. The world-map.js painted backdrop shows through. */
.ss-frame {
  /* rc176 — frame is now transparent; book-bg on the panel shows through. */
  grid-area: map;
  position: relative;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
/* World-map grid lives directly inside the frame. rc168 — display:flex
   so the .world-map / .world-map-stage children grow to fill the
   available vertical space (their `flex: 1 1 auto` needs a flex parent). */
#stage-select-grid.ss-map {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  padding: 0;
  overflow: visible;
  background: transparent;
}
.ss-map .world-map-stage {
  /* rc176 — fully transparent; book-bg on the panel is the only bg. */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Book background fills the entire stage-select modal. Uses the SAME warm
   wood-framed open book as the GEAR + SHOP tabs (shop-book-bg.webp / #2a1a0e)
   so all three play-hub tabs read as one storybook instead of the STAGES tab
   showing a different gold/blue book. */
#stage-select-panel:has(.world-map),
#stage-select-panel {
  background-image: url('../assets/shop/shop-book-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #2a1a0e;
}
/* Hide the painted chapter SVG backdrop — the book pages now act as
   the map surface. */
.ss-map .wm-backdrop,
.ss-map .wm-backdrop img,
.world-map .wm-backdrop {
  display: none !important;
}
/* rc181 — 4×2 grid layout for 8 stages per chapter doesn't need the
   connecting serpentine path between nodes. Hide the SVG line. */
.ss-map .wm-path,
.ss-map .wm-path-line {
  display: none !important;
}

/* rc170 — .ss-pagedots removed; chapter navigation is exclusively via the
   chapter-bar chevrons. */

/* ─── Bottom nav (rc174 — proper nine-patch, corners at natural size) ─
   Source asset (wood-panel.png) pre-resized to 495×266 so the filigree
   bands are ~52 px tall in source coords. Border-image-width MATCHES
   the slice values 1:1 → corners render at their natural pixel size
   with NO compression/stretching. Only the wood middle stretches
   (both vertically and horizontally) to fill the bar. */
.ss-bottom-nav.play-hub-bottom-nav {
  /* rc180 — bar sized so the tab cluster has ~60 px of wood on each
     side. Tab cluster at 4 × ~80 px = ~320 px wide; bar width 440 px
     gives ~60 px wood on either side. Height 110 px (50 % of the
     wood-panel.png native 221 height). Nine-patch keeps the corners
     at natural pixel size (30 × 90 from source) while the wood
     middle stretches. */
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  background-image: none;
  border-style: solid;
  border-color: transparent;
  /* rc187 — border widths + bar height scale with vh so the bar
     doesn't dominate short landscape viewports (iPhone SE landscape
     = 375 vh). At 1964 vh (the user's MBP calibration), 1.5vh ≈ 29
     so borders stay near natural 1:1; at 375 vh borders drop to the
     18 px floor (60 % corner art, still readable). */
  border-top-width: clamp(6px, 1.5vh, 30px);
  border-bottom-width: clamp(6px, 1.5vh, 30px);
  border-left-width: clamp(20px, 4.5vw, 90px);
  border-right-width: clamp(20px, 4.5vw, 90px);
  border-image-source: url('../assets/stage-select/figma/wood-panel.png');
  border-image-slice: 30 90 30 90 fill;
  border-image-width: clamp(6px, 1.5vh, 30px)
                      clamp(20px, 4.5vw, 90px)
                      clamp(6px, 1.5vh, 30px)
                      clamp(20px, 4.5vw, 90px);
  border-image-outset: 0;
  border-image-repeat: stretch;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
  /* rc189 — bar floor reduced for short landscape viewports. Width
     bumped narrower (96% instead of 100%) so the bar matches the
     book-page margins on desktop. Inner content fits icon (24-50) +
     label (12-16) at every floor. */
  width: min(45%, 640px);
  height: auto;
  max-width: 640px !important;
  position: absolute;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  z-index: 6;
}
.ss-nav-cap { display: none; }
.ss-bottom-nav .play-hub-tab.ss-nav-tab {
  /* rc185 — slot-pocket border-image + rc184 translateY removed. Tabs
     are now plain icon + label sitting on the wood bar with no per-tab
     background. Labels read clearly because they're no longer drowned
     by the slot pocket's dark interior. */
  flex: 1 1 0;
  min-width: 0;
  max-width: min(24vw, 104px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(1px, 0.5vh, 4px);
  padding: clamp(2px, 0.8vh, 6px) clamp(2px, 0.5vw, 4px);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #ffe6a8;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
  position: relative;
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #e8c9a4;
}
.ss-nav-icon-wrap {
  /* rc188 — sized to fit inside the bar's content area on every
     viewport. Use min(vw, vh) so the icon scales with the SHORTER
     viewport dimension (essential on short landscape viewports). */
  width: clamp(30px, min(4.5vw, 6.5vh), 54px);
  height: clamp(30px, min(4.5vw, 6.5vh), 54px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  transition: transform 0.18s, background 0.18s;
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab .ss-nav-icon {
  /* rc188 — matches the icon-wrap formula. */
  width: clamp(26px, min(4vw, 6vh), 50px);
  height: clamp(26px, min(4vw, 6vh), 50px);
  object-fit: contain;
  display: block;
  transition: transform 0.18s;
}
/* rc185 — active tab: soft gold halo behind the icon + warmer label
   colour. No full-tab background so the wood bar shows through. */
.ss-bottom-nav .play-hub-tab.ss-nav-tab.is-active {
  background: transparent;
  color: #fff2c2;
  box-shadow: none;
  transform: none;
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab.is-active .ss-nav-icon-wrap {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 215, 110, 0.55) 0%,
    rgba(255, 215, 110, 0.20) 50%,
    rgba(255, 215, 110, 0.0)  72%);
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab.is-active .ss-nav-icon {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(255, 200, 90, 0.55));
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab.is-active .ss-nav-label {
  color: #fff2c2;
}
/* rc178 — active disc + icon-color overrides retired (transparent
   wrap now, full-colour PNG icons). Active state lives entirely on
   .is-active .ss-nav-icon (lift + glow) above. */
.ss-nav-label {
  /* rc188 — label scales with min(vw, vh) so it doesn't bloat in
     either dimension. flex-shrink:0 prevents the column-flex parent
     from compressing it to 0 height. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(10px, min(1.4vw, 2.3vh), 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f0d9a8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
  line-height: 1.1;
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab.is-locked,
.ss-bottom-nav .play-hub-tab.ss-nav-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ss-bottom-nav .play-hub-tab.ss-nav-tab.is-locked:hover,
.ss-bottom-nav .play-hub-tab.ss-nav-tab:disabled:hover {
  color: #c9ae8f;
  transform: none;
}

/* Narrow viewports — keep the wood bottom nav stretchy (4 centred tabs at
   200 px would crowd a 414-wide screen). */
@media (max-width: 540px) {
  #stage-select .play-hub-panel[data-tab="stages"]:not([hidden]) {
    padding: clamp(32px, 6vh, 48px) 8px clamp(40px, 8vh, 160px);
    gap: 4px;
  }
  .ss-chapter-bar { padding: 2px 0; gap: 6px; }
  .ss-chapter-pill { height: clamp(48px, 8.3vh, 61px); padding: 0 32px; max-width: 36vw; }
  .ss-chapter-arrow { width: 36px; height: 36px; }
  /* rc178 — phones inherit the same 1676x221 natural bar dimensions.
     Modal clipping handles the overflow on narrow viewports. */
  .ss-bottom-nav .play-hub-tab.ss-nav-tab {
    /* rc171 — phones inherit the global flex: 1 1 0 + max-width:
       min(21.3vw, 102px) formula. Just tighten internal padding/gap. */
    padding: 2px 0;
    gap: 1px;
  }
  .ss-nav-icon-wrap { width: 24px; height: 24px; }
  .ss-bottom-nav .play-hub-tab.ss-nav-tab .ss-nav-icon { width: 14px; height: 14px; }
  .ss-nav-label { font-size: 9px; letter-spacing: 0.02em; }
}

/* ───────────────────────────────────────────────────────────────────────────
   PORTRAIT-PHONE STAGE-SELECT POLISH (goal items 3, 4, 5)
   Scoped to body.portrait so landscape phones / tablets / desktop keep their
   existing chrome. These use a 2-class `body.portrait` prefix so they beat the
   single-class `@media (max-width: 540px)` rules above on specificity.
   ─────────────────────────────────────────────────────────────────────────── */

/* Item 5 — the chapter row fills the panel width with ~16px of breathing room
   on each side (8px panel padding + 8px here). The left/right chevrons keep
   their size; only the ribbon stretches to consume the freed space. */
body.portrait .ss-chapter-bar {
  padding: 4px 8px 2px;
  gap: 8px;
}
body.portrait .ss-chapter-pill {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
  /* Item 4 — the ribbon art's writing band sits in its upper ~55%; the bottom
     is a dark decorative fold. Centring text in the box dropped it onto that
     fold ("at the bottom"). This bottom padding lifts the title back onto the
     band so it reads as vertically centred on the visible ribbon. */
  padding: 0 clamp(20px, 6%, 48px) 16px;
}

/* Item 3 — the bottom-nav glyphs were ~15px in portrait. Treble them and drop
   the text labels (no room for both); the icons alone carry the four tabs. */
body.portrait .ss-nav-label {
  display: none;
}
body.portrait .ss-nav-icon-wrap {
  width: 50px;
  height: 50px;
}
body.portrait .ss-bottom-nav .play-hub-tab.ss-nav-tab .ss-nav-icon {
  width: 41px;
  height: 41px;
}
body.portrait .ss-bottom-nav .play-hub-tab.ss-nav-tab {
  padding: 6px 0;
  gap: 0;
}