/* HUD cleanup lane: worlds-b (2026-10-31). Builds on styles/72-hud-taste.css tokens. */

/* ---- Moonlit Picnic (story chapter modal, opened by PrincessStoryChapter.open) ----
   Title plaque folded (the scene is the title), "Our story" joins the top row, the step sentence no longer
   repeats under the speech bubble (it lives on the big button and in "Our story"). Pearl pills, one gold hairline. */
.picnic-story-modal .picnic-story-shell button,
.picnic-story-modal .picnic-story-plan summary { min-height: var(--hud-tap); padding: 10px 18px; border: var(--hud-hairline); border-radius: var(--hud-pill); background: var(--hud-pearl-strong); color: var(--hud-ink); font: var(--hud-text); font-size: 16px; box-shadow: var(--hud-shadow-soft); -webkit-backdrop-filter: var(--hud-blur); backdrop-filter: var(--hud-blur); }
.picnic-story-modal .picnic-story-shell button:hover,
.picnic-story-modal .picnic-story-plan summary:hover { background: var(--hud-pearl-press); }
.picnic-story-modal .picnic-story-shell button:focus-visible,
.picnic-story-modal .picnic-story-plan summary:focus-visible { outline: 3px solid var(--hud-ink); outline-offset: 3px; box-shadow: var(--hud-shadow-soft); }
.picnic-story-modal .picnic-story-header { align-items: center; gap: 10px; }
.picnic-story-modal .picnic-story-header h2 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; box-shadow: none; white-space: nowrap; }
.picnic-story-modal .picnic-story-header [data-picnic-listen]::before { content: "\1F50A"; margin-right: 7px; font-size: 15px; }
.picnic-story-modal .picnic-story-plan { position: relative; top: auto; left: auto; z-index: 4; max-width: none; }
.picnic-story-modal .picnic-story-plan summary { display: inline-flex; align-items: center; box-sizing: border-box; list-style: none; }
.picnic-story-modal .picnic-story-plan:not([open]) .picnic-story-steps { display: none; }
.picnic-story-modal .picnic-story-plan summary::before { content: "\263E"; margin-right: 7px; font-size: 17px; color: var(--hud-gold); }
.picnic-story-modal .picnic-story-steps { position: absolute; top: calc(100% + 8px); left: 0; width: 300px; box-sizing: border-box; margin: 0; padding: 10px 18px; border: var(--hud-hairline); border-radius: var(--hud-radius); background: #fffaf7; color: var(--hud-ink); font: var(--hud-text); box-shadow: var(--hud-shadow); }
.picnic-story-modal .picnic-story-steps li + li { border-top: 1px solid rgba(212, 166, 78, 0.3); }
.picnic-story-modal .picnic-story-steps .is-ready { color: #3f6b55; }
.picnic-story-modal .picnic-story-steps .is-ready::before { content: "\2713  "; color: var(--hud-mint); font-weight: 800; }
.picnic-story-modal .picnic-story-steps .is-current { color: #a22f5c; }
.picnic-story-modal .picnic-story-bubble { padding: 12px 20px; border: var(--hud-hairline); border-radius: var(--hud-radius); background: var(--hud-pearl-strong); color: var(--hud-ink); font: 500 19px/1.3 var(--hud-story-font); box-shadow: var(--hud-shadow-soft); }
.picnic-story-modal #picnic-story-next { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.picnic-story-modal .picnic-story-shell .picnic-primary { min-height: 64px; padding: 12px 38px; border: 1px solid var(--hud-gold); background: #fbdbe7; color: var(--hud-ink); font: 600 clamp(22px, 2.4vw, 30px)/1.1 var(--hud-story-font); box-shadow: var(--hud-shadow); }
.picnic-story-modal .picnic-story-shell .picnic-primary:hover { background: #fde6ee; }
.picnic-story-modal .picnic-story-shell .picnic-friend { min-height: var(--hud-tap); padding: 8px 18px; font-size: 15px; background: var(--hud-pearl); }
.picnic-story-modal .picnic-story-shell .picnic-friend.is-seated { border-color: var(--hud-mint); }
.picnic-story-modal .picnic-story-shell .picnic-friend.is-seated::before { content: "\2713"; margin-right: 6px; color: #3f9c86; font-weight: 800; }
.picnic-story-modal .picnic-story-look button { width: var(--hud-tap); height: var(--hud-tap); padding: 0; border-radius: 50%; font-size: 28px; line-height: 1; }
.picnic-story-modal .picnic-story-shell .picnic-story-music::before { content: "\266B"; margin-right: 7px; color: var(--hud-gold); }
.picnic-story-modal .picnic-story-shell .picnic-story-music[aria-pressed="true"] { background: var(--hud-pearl-press); border-color: var(--hud-rose); }
.mini-game-board .picnic-return { border: var(--hud-hairline); border-radius: var(--hud-pill); background: var(--hud-pearl-strong); color: var(--hud-ink); font: var(--hud-text); box-shadow: var(--hud-shadow); -webkit-backdrop-filter: var(--hud-blur); backdrop-filter: var(--hud-blur); }
.mini-game-board .picnic-return::before { content: "\263E"; margin-right: 8px; color: var(--hud-gold); }
@media (max-width: 600px) {
  .picnic-story-modal .picnic-story-header { inset: max(12px, env(safe-area-inset-top)) 12px auto; gap: 8px; }
  .picnic-story-modal .picnic-story-header button,
  .picnic-story-modal .picnic-story-plan summary { padding: 10px 14px; font-size: 15px; }
  .picnic-story-modal .picnic-story-steps { position: fixed; top: max(70px, calc(env(safe-area-inset-top) + 58px)); left: 12px; right: 12px; width: auto; }
  .picnic-story-modal .picnic-story-bubble { top: max(78px, calc(env(safe-area-inset-top) + 66px)); padding: 10px 16px; font-size: 17px; }
  .picnic-story-modal .picnic-story-shell .picnic-primary { min-height: 58px; font-size: 24px; padding: 12px 26px; }
}
@media (max-height: 530px) and (min-width: 601px) {
  .picnic-story-modal .picnic-story-plan { top: auto; }
}

/* ---- Princess Arrow Tactica wrapper (kind princessArrowTactica) ----
   The finish button joins the pearl family at a full 48 px; the dark letterbox bands become soft sky. */
.mini-game-board.princess-arrow-tactica,
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-shell { background: #dfe7ee; }
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-actions button { min-height: var(--hud-tap); padding: 0 22px; border: 1px solid var(--hud-gold); border-radius: var(--hud-pill); background: #fbdbe7; color: var(--hud-ink); font: var(--hud-text); font-weight: 800; box-shadow: var(--hud-shadow); }
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-actions button::before { content: "\2726"; margin-right: 8px; color: var(--hud-gold); }
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-actions button:disabled { opacity: 1; border-color: var(--hud-gold-line); background: var(--hud-pearl); color: var(--hud-ink-soft); box-shadow: var(--hud-shadow-soft); }
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-actions button:focus-visible { outline: 3px solid var(--hud-ink); outline-offset: 3px; }
/* "calmer view on" corner badge and the "aim clue ready" badge repeat the feedback line, the progress pill and the
   finish button's own label; folded (kept in the DOM). */
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-frame.slow-frame-hint::after { content: none; display: none; }
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-reward { display: none; }
.mini-game-board.princess-arrow-tactica .princess-arrow-tactica-loader { background: rgba(255, 250, 247, 0.78); color: var(--hud-ink); font-family: var(--hud-font); -webkit-backdrop-filter: var(--hud-blur); backdrop-filter: var(--hud-blur); }