/* ROUND 31 — menus-side styles. Owned by Developer K (src/ui/menus.js). See
   docs/design/round31-work-orders.md contract C14 and section "Developer K"
   for what belongs here versus in styles.css (which nobody owns this round).

   Every brand-new menus-side component style K writes this round lives here:
   the splash loading bar + rating notice (K-1), the results-screen ad offer
   (K-2), the Settings Backup section (K-3), the Settings Diagnostics section
   (K-4), the Settings Privacy row (K-5), the quality-tier readout (K-6), and
   the "Share play statistics" toggle helper line (K-8). Selectors compose the
   shared `pb-*` vocabulary already defined in styles.css (.pb-bar, .pb-btn*,
   .pb-col, .pb-kv*, .pb-card__desc) rather than re-declaring it. */

/* ================================ K-1 — splash =============================
   The loading bar sits between the crew art and the existing `splash-cue`,
   built on the shared `.pb-bar`/`.pb-bar__fill` component (styles.css §4.11)
   with its own fill colour so it doesn't fight the HP/XP/boss bars for
   meaning. Positioned to clear the cue, which sits at
   `bottom: max(28px, calc(var(--pb-sab) + 16px))` (styles.css). */
.pb-splash__loading {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(66px, calc(var(--pb-sab) + 54px));
  width: min(240px, 62vw);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.pb-splash__loadingLabel {
  margin: 0; font: 600 11.5px/1.2 ui-rounded, "Trebuchet MS", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #F4E4C4; text-shadow: 0 2px 8px #0c120a; opacity: .92;
}
.pb-splash__progress { width: 100%; height: 8px; background: rgba(8,11,6,.7); }
.pb-splash__progressFill { background: linear-gradient(180deg, var(--pb-moss-200), var(--pb-moss-400)); }

/* The rating notice sits bottom-left, mirroring `.pb-splash__version`
   (styles.css) at bottom-right — "beside the existing version tag" (copy
   document §4). `right` reserves room for the version stamp so a long
   two-sentence variant (orchestrator addenda §11, shown only when
   TELEMETRY_URL is set) wraps onto its own lines instead of running under it. */
.pb-splash__rating {
  position: absolute; left: max(10px, env(safe-area-inset-left));
  right: 128px;
  bottom: max(10px, env(safe-area-inset-bottom));
  margin: 0; font: 11px/1.35 var(--pb-font); text-align: left;
  color: var(--pb-ink-dim, #9aa38f); opacity: .85;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
@media (max-width: 380px) {
  /* Narrow phones: the version stamp is short enough to give the rating
     notice a little more room before it has to wrap. */
  .pb-splash__rating { right: 108px; }
}

/* ============================ K-2 — results ad offer ========================
   The "Double your Coins" offer (copy document §5.2). A block button, visually
   lighter than Continue/Retry (`.pb-btn--ghost`, styles.css), sitting above
   them in its own group so removing it after the ad resolves never disturbs
   the footer's layout rhythm. */
.pb-result__adOffer { gap: 4px; }
.pb-result__adOffer .pb-card__desc { text-align: center; margin: 0; }

/* =============================== K-3/K-4 — Settings sections ================
   Backup and Diagnostics share one visual language: a small heading, a dim
   explanation line, and — for both the backup code and the diagnostics-copy
   fallback — a selectable read-only box. */
.pb-settings__section { padding-top: 2px; }
.pb-settings__heading { font-size: 17px; margin: 0; }
.pb-settings__explain { margin: -2px 0 2px; }

/* K-3 — the selectable code box (backup code, and reused by K-4's diagnostics
   copy fallback). A read-only <textarea> rather than a <div> so the whole
   value is one native, keyboard-and-screen-reader-reachable selection instead
   of relying on a tap gesture the itch.io frame's own clipboard restrictions
   might also block. */
.pb-backup__boxWrap { display: flex; flex-direction: column; gap: 4px; }
.pb-backup__boxLabel { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; color: var(--pb-ink-dim); margin: 0; }
.pb-backup__box {
  width: 100%; min-height: 84px; resize: vertical;
  padding: 10px; border-radius: var(--pb-radius-sm);
  background: rgba(8,11,6,.55); border: 1.5px solid var(--pb-line);
  color: var(--pb-cream); font: 12.5px/1.4 var(--pb-font-num);
  word-break: break-all; user-select: all;
}
.pb-backup__box:focus { outline: 2px solid var(--pb-amber); outline-offset: 1px; }

/* K-3 — the restore flow: paste box, confirm, refusal message. */
.pb-backup__restore { gap: 8px; }
.pb-backup__paste {
  width: 100%; min-height: 88px; resize: vertical;
  padding: 10px; border-radius: var(--pb-radius-sm);
  background: rgba(8,11,6,.55); border: 1.5px solid var(--pb-line);
  color: var(--pb-cream); font: 12.5px/1.4 var(--pb-font-num);
}
.pb-backup__paste::placeholder { color: var(--pb-ink-dim); opacity: .75; }
.pb-backup__paste:focus { outline: 2px solid var(--pb-amber); outline-offset: 1px; }
.pb-backup__error { color: var(--pb-danger); font-size: 12.5px; line-height: 1.4; margin: 0; }

/* K-4 — the install-ID row (a selectable value beside its label, same `.pb-kv`
   row every other Settings/stat line already uses) and the event list. */
.pb-diag__idValue { user-select: all; word-break: break-all; }
.pb-diag__events { display: flex; flex-direction: column; gap: 2px; }
.pb-diag__row {
  font: 12px/1.4 var(--pb-font-num); color: var(--pb-ink-dim);
  display: flex; gap: 8px;
}

/* ============================ K-6 — quality readout ==========================
   A quiet line under the Quality row (copy document §8) — same treatment as
   every other Settings helper line (`skip-story-help`), not a new component. */
.pb-settings__qualityNow { margin: -2px 0 2px; }