/* Funnel pages — app-parity tokens from docs/web-parity.md (SunsetRush theme.js
   + TourPreviewScreen locals). The venue page replicates the app's mission-brief
   screen; checkout/redeem reuse the legacy class names below. */
:root {
  /* ---- colors (theme.js colors{}) ---- */
  --av-cream: #FBF1E6;
  --av-card: #FFF6EE;
  --av-page-bg: #ECE4DA;
  --av-ink: #26241f;
  --av-body: #2B2118;
  --av-body-muted: #6d685f;
  --av-muted: #6a6055;
  --av-faint: #847264;
  --av-disabled: #B5A390;
  --av-disabled2: #C4B3A3;
  --av-mono-brown: #8f5f35;

  --av-orange: #F26A21;
  --av-orange-warm: #FF8A4B;
  --av-orange-next: #F97129;
  --av-peach-prev: #FFE3CB;
  --av-pink: #FF2E7E;
  --av-purple: #7A3DF5;
  --av-blue: #46A8FF;

  /* gold family (rewards / Master Key / coins only) */
  --av-gold: #FFC24B;
  --av-gold-on-white: #C79A4B;
  --av-gold-deep: #A8802F;
  --av-gold-pale: #FFD9A8;
  --av-gold-text: #9A5A00;
  --av-gold-count: #C97A00;

  /* plum panel */
  --av-plum-top: #3A1B2E;
  --av-plum-bot: #241019;
  --av-kicker-on-plum: #C99A7C;
  --av-plum-orange-soft: #FF9E63;

  /* amber access-note family */
  --av-amber-bg: #FFF6E3;
  --av-amber-border: #F2DFB8;
  --av-amber-body: #7a6543;

  --av-card-border: #EADBCB;
  --av-track: #F0DECE;
  --av-soft: #FFE7D6;

  /* ---- glass surfaces on plum (theme.js glass{}) ---- */
  --av-glass-pill-bg: rgba(255,255,255,0.09);
  --av-glass-pill-border: rgba(255,255,255,0.15);
  --av-glass-icon-bg: rgba(255,255,255,0.10);
  --av-glass-icon-border: rgba(255,255,255,0.14);
  --av-glass-track-bg: rgba(255,255,255,0.14);
  --av-glass-pip-off: rgba(255,255,255,0.22);

  /* ---- gradients (theme.js gradients{}) ---- */
  --av-grad-cta: linear-gradient(135deg, #FF8A4B, #FF2E7E);
  --av-grad-plum: linear-gradient(160deg, #3A1B2E 0%, #241019 70%);
  --av-grad-gold-check: linear-gradient(135deg, #FFC24B, #F5A623);
  --av-grad-game: linear-gradient(135deg, #FF2E7E, #7A3DF5);
  --av-grad-ai: linear-gradient(135deg, #7A3DF5, #46A8FF);
  --av-grad-reroute: linear-gradient(135deg, rgba(255,138,75,0.16), rgba(255,46,126,0.13));

  /* ---- mission-brief screen locals (TourPreviewScreen.js) ---- */
  --av-tp-ink: #2A1726;
  --av-tp-paper: #FFFDF8;
  --av-tp-paper-border: #E8D9C6;
  --av-tp-cream-fill: #FFF6EC;
  --av-tp-cream-border: #F3E3D2;
  --av-tp-tab-border: #F0DFCC;
  --av-tp-tab-inactive: #B4A192;
  --av-tp-kicker-brown: #B58C6E;
  --av-tp-body-brown: #75655C;
  --av-tp-tag-brown: #8D7C70;
  --av-tp-orange-ui: #FF6A2C;
  --av-tp-orange-hi: #FF9E63;
  --av-tp-stamp-pink: rgba(240,36,125,0.55);
  --av-tp-stamp-pink-txt: rgba(240,36,125,0.75);
  --av-tp-cta-grad: linear-gradient(135deg, #FF8A4B, #F0247D); /* this screen's pink end differs from brand */
  --av-tp-hero-fallback: linear-gradient(160deg, #9DB39B, #5E7C80);

  /* ---- fonts ---- */
  --av-font-display: 'Fredoka', system-ui, sans-serif;
  --av-font-body: 'Nunito', system-ui, sans-serif;
  --av-font-mono: 'Space Mono', monospace;

  /* ---- legacy aliases (checkout.html / redeem.html inline styles) ---- */
  --cream: var(--av-cream);
  --ink: var(--av-ink);
  --plum: var(--av-tp-ink);
  --sunset: var(--av-grad-cta);
  --gold: var(--av-gold-on-white);
  --card: var(--av-tp-paper);
  --border: var(--av-card-border);
  --muted: var(--av-muted);
}

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--av-cream); color: var(--av-ink);
  font-family: var(--av-font-body);
  min-height: 100svh; display: flex; flex-direction: column;
}
h1, h2, .brand { font-family: var(--av-font-display); font-weight: 600; }

/* ---- legacy shared classes (checkout / redeem) ---- */
.brand { font-size: 1.1rem; letter-spacing: .04em; padding: 1rem 1.25rem 0; }
main { width: min(30rem, 100%); margin: 0 auto; padding: 1.25rem 1.25rem 3rem; flex: 1; }
.card {
  background: var(--av-tp-paper); border: 1.5px solid var(--av-tp-paper-border);
  border-radius: 1rem; padding: 1.25rem; margin-top: 1rem;
  box-shadow: 0 12px 36px rgba(120,70,30,0.12);
}
.hook { color: var(--av-muted); line-height: 1.5; margin-top: .5rem; }
.langs { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.langs button {
  min-height: 44px; min-width: 44px; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--av-card-border); background: var(--av-card); font: inherit; cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--av-tp-ink); color: #fff; border-color: var(--av-tp-ink); }
.play {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px;
  border: 0; border-radius: 999px; background: var(--av-grad-cta); color: #fff;
  font: 700 1.05rem var(--av-font-display); padding: .75rem 1.25rem; cursor: pointer; margin-top: 1rem;
  box-shadow: 0 6px 24px rgba(255,46,126,0.35);
}
.cta {
  display: block; text-align: center; text-decoration: none; margin-top: 1.5rem; min-height: 54px;
  border-radius: 15px; background: var(--av-tp-cta-grad); color: #fff;
  font: 700 1.05rem var(--av-font-display); padding: 1rem 1.25rem;
  box-shadow: 0 12px 30px rgba(240,36,125,0.5);
}
progress { width: 100%; margin-top: .75rem; accent-color: var(--av-pink); }
footer { padding: 1rem; text-align: center; font-size: .75rem; color: var(--av-muted); }
footer a { color: inherit; }
.err { padding: 2rem 1rem; text-align: center; color: var(--av-muted); }
.hidden { display: none; }

/* ==== venue page: the app's mission-brief screen (web-parity.md §2) ==== */
body.av-page { background: var(--av-page-bg); }
main.av-phone {
  width: min(430px, 100%); margin: 0 auto; padding: 0; flex: 1;
  background: var(--av-cream); position: relative;
}

/* -- hero (2.1) -- */
.av-hero {
  position: relative; width: 100%; height: 190px;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (max-height: 879px) { .av-hero { height: 170px; } }
@media (max-height: 749px) { .av-hero { height: 150px; } }
.av-hero-fallback { background-image: var(--av-tp-hero-fallback); }
.av-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,22,20,0.28) 0%, rgba(30,22,20,0) 26%, rgba(40,23,28,0.5) 66%, #FBF1E6 100%);
}
.av-hero-bottom { position: relative; padding: 0 20px 14px; }
.av-hero-kicker {
  font: 700 12.5px var(--av-font-mono); color: rgba(255,255,255,0.95);
  letter-spacing: 2px; text-transform: uppercase;
}
.av-hero-title {
  font: 700 29px/31px var(--av-font-display); color: #fff; margin-top: 5px;
  text-shadow: 0 2px 18px rgba(20,12,16,0.45);
}
.av-hero-meta { display: flex; gap: 16px; margin-top: 7px; flex-wrap: wrap; }
.av-hero-meta span { font: 700 13.5px var(--av-font-body); color: rgba(255,255,255,0.95); }

/* -- tabs row (2.2) -- */
.av-tabs {
  display: flex; align-items: center; padding: 0 18px;
  border-bottom: 1.5px solid var(--av-tp-tab-border);
}
.av-tab {
  font: 600 14.5px var(--av-font-display); color: var(--av-tp-tab-inactive);
  padding: 10px 0 7px; margin-right: 20px; position: relative;
  border: 0; background: none; cursor: pointer; -webkit-appearance: none;
}
.av-tab.on { color: var(--av-tp-ink); }
.av-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--av-tp-orange-ui);
}
.av-lang-wrap { margin-left: auto; position: relative; }
.av-lang-pill {
  border: 1px solid var(--av-tp-tab-border); background: var(--av-card);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
  font: 800 12px var(--av-font-body); color: var(--av-tp-ink);
  min-height: 30px;
}
.av-lang-pill .caret { font-size: 10px; color: var(--av-tp-orange-ui); }
.av-lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border-radius: 14px; border: 1px solid var(--av-card-border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25); padding: 4px 0; min-width: 140px;
}
.av-lang-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 14px; cursor: pointer; font: 700 13.5px var(--av-font-body);
  color: var(--av-ink); min-height: 36px;
}
.av-lang-menu button[aria-pressed="true"] { font-weight: 800; color: var(--av-tp-orange-ui); }

/* -- body & mission brief (2.3) -- */
.av-body { padding: 8px 20px calc(150px + env(safe-area-inset-bottom)); }
.av-brief {
  position: relative;
  background: var(--av-tp-paper);
  border: 1.5px solid var(--av-tp-paper-border);
  border-radius: 8px;                          /* deliberately square-ish: paper, not pill */
  padding: 10px 16px 11px;
  box-shadow: 0 12px 36px rgba(120,70,30,0.30);
}
.av-stamp {
  position: absolute; top: 10px; right: 12px; transform: rotate(7deg);
  border: 2px solid var(--av-tp-stamp-pink); border-radius: 6px; padding: 4px 8px;
  font: 700 12.5px var(--av-font-mono); letter-spacing: 1.9px;
  color: var(--av-tp-stamp-pink-txt); text-transform: uppercase;
}
.av-brief-kicker {
  font: 700 12.5px var(--av-font-mono); letter-spacing: 1.9px;
  color: var(--av-mono-brown); text-transform: uppercase;
}
.av-brief-body {
  font: 600 14.5px/20px var(--av-font-body); color: var(--av-tp-ink);
  margin-top: 6px; max-width: 300px; white-space: pre-line;
}

/* -- plum teaser panel (PlumPanel recipe; sits where the app's plum panel sits) -- */
.av-panel {
  position: relative; overflow: hidden; margin-top: 8px;
  background: var(--av-grad-plum); border-radius: 20px; padding: 12px 14px 14px;
  box-shadow: 0 10px 32px rgba(42,23,38,0.45);
}
.av-panel::before, .av-panel::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.av-panel::before {
  width: 260px; height: 260px; top: -100px; left: -80px;
  background: radial-gradient(circle, rgba(255,138,75,0.28) 0%, rgba(255,138,75,0) 68%);
}
.av-panel::after {
  width: 220px; height: 220px; top: -90px; right: -70px;
  background: radial-gradient(circle, rgba(255,46,126,0.20) 0%, rgba(255,46,126,0) 68%);
}
.av-panel > * { position: relative; z-index: 1; }
.av-panel-kicker {
  font: 700 12.5px var(--av-font-mono); letter-spacing: 1.8px;
  color: var(--av-tp-orange-hi); text-transform: uppercase;
}
.av-teaser-hook { font: 600 13.5px/19px var(--av-font-body); color: rgba(255,255,255,0.85); margin-top: 7px; }
.av-capsule {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  background: rgba(255,255,255,0.09); border-radius: 14px; padding: 6px 10px;
}
.av-capsule-art {
  width: 32px; height: 32px; border-radius: 16px; flex: none;
  background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 14px;
}
.av-capsule-main { flex: 1; min-width: 0; }
.av-capsule-eyebrow {
  font: 800 11px var(--av-font-body); letter-spacing: .8px;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.av-capsule-title {
  font: 700 13px var(--av-font-display); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.av-play-btn {
  width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer; flex: none;
  background: var(--av-grad-cta); display: grid; place-items: center; padding: 0;
}
.av-play-btn .tri {
  width: 0; height: 0; margin-left: 3px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}
.av-play-btn .bars { display: flex; gap: 4px; }
.av-play-btn .bars i { display: block; width: 3.5px; height: 13px; border-radius: 2px; background: #fff; }
.av-teaser-track {
  height: 5px; border-radius: 2.5px; background: var(--av-glass-track-bg);
  margin-top: 10px; overflow: hidden;
}
.av-teaser-fill {
  height: 100%; width: 0; border-radius: 2.5px;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E);
  box-shadow: 0 0 12px rgba(255,46,126,0.5);
}

/* -- "What's waiting along the way" panel (app parity: TourPreviewScreen
      Overview — five tappable game-type tiles over a plum panel) -- */
.av-waiting {
  margin-top: 8px; background: var(--av-grad-plum); border-radius: 20px;
  padding: 9px 13px; box-shadow: 0 10px 32px rgba(42,23,38,0.45);
}
.av-waiting-kicker {
  font: 700 12.5px var(--av-font-mono); letter-spacing: 1.8px;
  color: var(--av-tp-orange-hi); text-transform: uppercase;
}
.av-icon-row { display: flex; gap: 8px; margin-top: 7px; }
.av-icon-item {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.av-icon-tile {
  width: 44px; height: 44px; border-radius: 13px; background: var(--av-tp-cream-fill);
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.av-icon-item.on .av-icon-tile {
  background: var(--av-tp-cta-grad); transform: translateY(-3px);
  box-shadow: 0 8px 12px rgba(240,36,125,0.55);
}
.av-icon-emoji { font-size: 19px; line-height: 1; }
.av-icon-label {
  font: 800 11px var(--av-font-body); color: rgba(255,246,238,0.6);
  text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.av-icon-item.on .av-icon-label { color: #fff; }

/* -- detail card (2.5) -- */
.av-detail {
  display: flex; gap: 11px; margin-top: 6px; min-height: 62px;
  background: var(--av-tp-cream-fill); border: 1.5px solid var(--av-tp-cream-border);
  border-radius: 14px; padding: 9px 14px; align-items: flex-start;
}
.av-detail-emoji { font-size: 18px; line-height: 24px; }
.av-detail-main { flex: 1; min-width: 0; }
.av-detail-name { font: 600 14px var(--av-font-display); color: var(--av-tp-ink); }
.av-detail-desc { font: 600 14.5px/20px var(--av-font-body); color: var(--av-mono-brown); margin-top: 2px; }

/* -- Stops tab (app parity: TourPreviewScreen Stops) -- */
.av-stop-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0; border-bottom: 1px solid var(--av-card-border);
}
.av-stop-emoji { font-size: 20px; flex: none; }
.av-stop-main { flex: 1; min-width: 0; }
.av-stop-name { font: 700 15px var(--av-font-display); color: var(--av-tp-ink); }
.av-stop-sub {
  font: 600 12px var(--av-font-body); color: var(--av-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.av-stop-dur { font: 400 11px var(--av-font-mono); color: var(--av-mono-brown); flex: none; }
.av-stops-more { font: 400 13px var(--av-font-body); color: var(--av-tp-orange-ui); text-align: center; margin-top: 14px; }

/* -- Reviews tab (app parity: TourPreviewScreen Reviews) -- */
.av-review-summary { display: flex; align-items: center; gap: 14px; }
.av-review-score { font: 700 46px var(--av-font-display); color: var(--av-tp-ink); line-height: 1; }
.av-review-stars { font-size: 16px; color: var(--av-gold); }
.av-review-count { font: 600 12px var(--av-font-body); color: var(--av-muted); margin-top: 2px; }
.av-review-card {
  background: #fff; border-radius: 16px; padding: 16px; margin-top: 16px;
  border: 1px solid var(--av-card-border); width: 100%; text-align: left;
}
.av-review-retry { cursor: pointer; -webkit-appearance: none; }
.av-review-top { display: flex; align-items: center; justify-content: space-between; }
.av-review-stars-sm { font-size: 13px; color: var(--av-gold); }
.av-review-time { font: 600 11px var(--av-font-body); color: var(--av-muted); }
.av-review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.av-review-chip {
  background: #FFF6EE; border-radius: 10px; padding: 4px 9px;
  border: 1px solid var(--av-card-border);
  font: 600 11px var(--av-font-body); color: var(--av-gold-text);
}
.av-review-text { font: 600 14px/21px var(--av-font-body); color: var(--av-tp-ink); margin-top: 8px; }
.av-review-name { font: 700 13px var(--av-font-display); color: var(--av-body-muted); margin-top: 10px; }
.av-review-loading { padding: 28px 0; display: grid; place-items: center; }
.av-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--av-track); border-top-color: var(--av-tp-orange-ui);
  animation: av-spin 0.7s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }

/* -- docked purchase bar (2.7) -- */
.av-dock {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(430px, 100%); z-index: 20;
  background: var(--av-tp-ink); border-radius: 24px 24px 0 0;
  padding: 8px 16px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 36px rgba(42,23,38,0.5);
}
.av-cta-glow { border-radius: 16px; box-shadow: 0 12px 30px rgba(240,36,125,0.5); }
.av-cta {
  display: block; text-align: center; text-decoration: none;
  background: var(--av-tp-cta-grad); border-radius: 15px; padding: 11px 16px;
  font: 700 17px var(--av-font-display); color: #fff; min-height: 44px;
}
/* "Try for free" — outlined pill under the gradient CTA (app parity: tryFree) */
.av-tryfree {
  display: block; margin-top: 8px; text-align: center; text-decoration: none;
  padding: 13px 16px; border-radius: 999px; min-height: 44px;
  background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.5);
  font: 700 16px var(--av-font-display); color: #fff;
}
.av-dock-caption {
  margin-top: 4px; text-align: center;
  font: 700 11px var(--av-font-body); color: rgba(255,246,238,0.55);
}
.av-dock-caption a { color: var(--av-tp-orange-hi); text-decoration: none; }
/* legal line under the "just listening? Audio only" caption */
.av-legal {
  margin-top: 2px; text-align: center;
  font: 400 10px var(--av-font-body); color: rgba(255,246,238,0.4);
}
.av-legal a { color: inherit; text-decoration: none; }

/* ===========================================================================
   Venue web player (play.html) — screens. Spec: docs/web-parity.md §3-5.
   Uses the --av-* tokens defined at the top of this file.
   =========================================================================== */
body.pl-body { background: var(--av-cream); color: var(--av-ink); font-family: var(--av-font-body); }
.pl-app [hidden] { display: none !important; }
.pl-app { width: min(30rem, 100%); margin: 0 auto; min-height: 100svh; display: flex; flex-direction: column; }
.pl-main { flex: 1; display: flex; flex-direction: column; padding: 0; width: 100%; }

/* PlumPanel + orbs */
.pl-plum { position: relative; overflow: hidden; background: var(--av-grad-plum); }
.pl-plum::before, .pl-plum::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.pl-orbs-top::before { width: 260px; height: 260px; top: -100px; left: -80px;
  background: radial-gradient(circle, rgba(255,138,75,0.28) 0%, rgba(255,138,75,0) 68%); }
.pl-orbs-top::after { width: 220px; height: 220px; top: -90px; right: -70px;
  background: radial-gradient(circle, rgba(255,46,126,0.20) 0%, rgba(255,46,126,0) 68%); }
.pl-orbs-br::before { width: 240px; height: 240px; bottom: -90px; right: -70px;
  background: radial-gradient(circle, rgba(255,138,75,0.24) 0%, rgba(255,138,75,0) 68%); }

/* Ribbon HUD — museum-UX: ONE compact row (no tour title), safe-area padding
   so the bar clears hardware notches / the Dynamic Island, every control a
   44px tap box for one-handed use. */
.pl-ribbon { border-radius: 0 0 26px 26px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px; }
.pl-ribbon-row1 { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.pl-ribbon-back { width: 44px; height: 44px; border-radius: 22px; flex: none; border: 1px solid var(--av-glass-icon-border);
  background: var(--av-glass-icon-bg); color: #fff; font: 700 20px var(--av-font-display); cursor: pointer; }
.pl-ribbon-home, .pl-ribbon-list { display: grid; place-items: center; }
.pl-ribbon-home svg, .pl-ribbon-list svg { width: 20px; height: 20px; display: block; }
/* Review-mode indicator: small yellow dot beside the ✕ (replaces the old REVIEW pill) */
.pl-review-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #FFD43B; box-shadow: 0 0 6px rgba(255,212,59,0.8); }
.pl-ribbon-spacer { width: 44px; flex: none; }
.pl-pill { display: flex; align-items: center; gap: 7px; height: 44px; border-radius: 999px; padding: 0 11px;
  background: var(--av-glass-pill-bg); border: 1px solid var(--av-glass-pill-border); }
.pl-pill-progress { flex: 1; min-width: 0; }
.pl-pill-label { font: 700 11px var(--av-font-mono); color: rgba(255,255,255,0.65); }
.pl-track { flex: 1; height: 7px; border-radius: 3.5px; background: var(--av-glass-track-bg); overflow: hidden; }
.pl-fill { height: 100%; border-radius: 3.5px; background: linear-gradient(90deg, #FF8A4B, #FF2E7E);
  box-shadow: 0 0 12px rgba(255,46,126,0.5); }
.pl-coins { font: 700 11.5px var(--av-font-display); color: var(--av-gold); white-space: nowrap; }
/* Ribbon blend for dark full-bleed stages (desktop QR handoff): the HUD goes
   flat in the stage's own top color — the 0% stop of its gradient — and sheds
   the rounded corners + orb glows, so header and stage read as one surface.
   (Reward screens do the same via body.plr-open, scoped in player/reward.js.) */
.pl-ribbon.pl-ribbon-blend { background: var(--plr-hud, #3A1B2E); border-radius: 0; }
.pl-ribbon-blend::before, .pl-ribbon-blend::after { content: none; }

/* Master-Key pips pill (parity §1 Ribbon row 2) */
.pl-pill-key { gap: 3px; }
.pl-pill-key .key { font-size: 12px; margin-right: 3px; }
.pl-pip { width: 7px; height: 7px; border-radius: 3.5px; background: var(--av-glass-pip-off); }
.pl-pip.on { background: var(--av-gold); box-shadow: 0 0 6px rgba(255,194,75,0.8); }

/* Centered cards (gate / headphones / errors) */
.pl-center { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 20px; text-align: center; }
.pl-center .pl-emoji { font-size: 56px; }
.pl-center h1 { font: 600 26px var(--av-font-display); color: var(--av-ink); margin-top: 14px; }
.pl-center p { font: 600 15px/1.5 var(--av-font-body); color: var(--av-body-muted); margin-top: 10px; }
.pl-input { margin-top: 16px; width: 100%; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--av-card-border);
  background: #fff; padding: 0 16px; font: 700 18px var(--av-font-mono); color: var(--av-ink); text-align: center;
  letter-spacing: 3px; text-transform: uppercase; }
.pl-gate-err { color: #E0607E; font: 600 13px var(--av-font-body); margin-top: 8px; }

/* Start screen (design_handoff_start_screen): full-bleed plum launch screen —
   watercolour hero with the title overlaid, language pills, a gold-bordered
   "get ready" card, and a pinned gradient CTA. Overrides the cream player body
   for this one screen. */
.pl-start { flex: 1; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #3A1B2E, #241019); color: #FFF6EE; }
.pl-start-hero { position: relative; height: min(300px, 40vh); flex: none; }
.pl-start-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-start-img-fallback { display: grid; place-items: center; font-size: 92px;
  background: linear-gradient(160deg, #52243B, #2E1524); }
.pl-start-scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, #2E1524 8%, rgba(46,21,36,0.85) 32%, rgba(46,21,36,0.3) 60%, rgba(46,21,36,0.1) 100%); }
.pl-start-herocap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px 18px; }
.pl-start-kicker { font: 700 0.68rem var(--av-font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: #FFF6EE; margin-bottom: 6px; }
.pl-start-title { font: 600 2.05rem/1.12 var(--av-font-display); letter-spacing: -0.01em; margin: 0 0 6px; color: #fff; }
.pl-start-sub { margin: 0; font: 700 0.95rem/1.45 var(--av-font-body); color: rgba(255,246,238,0.8); }
.pl-start-body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.pl-start-langblock { display: flex; flex-direction: column; gap: 10px; }
.pl-start-label { font: 700 0.66rem var(--av-font-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,246,238,0.55); }
.pl-start-langs { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-start-chip { flex: 1 1 40%; min-height: 46px; cursor: pointer; border-radius: 999px; padding: 12px 16px;
  font: 800 0.95rem var(--av-font-body); border: 1.5px solid rgba(255,246,238,0.3);
  background: transparent; color: #FFF6EE; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.pl-start-chip.on { background: #FBF1E6; color: #26241f; border-color: #FBF1E6; }
.pl-start-card { background: rgba(255,246,238,0.05); border: 1px solid rgba(255,194,75,0.35);
  border-radius: 20px; padding: 4px 16px; }
.pl-start-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.pl-start-row-div { border-top: 1px dashed rgba(255,194,75,0.25); }
.pl-start-icon { flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,194,75,0.14); display: grid; place-items: center; font-size: 1.15rem; }
.pl-start-row strong { display: block; font: 500 0.98rem var(--av-font-display); color: #FFC24B; }
.pl-start-row span { display: block; font: 400 0.84rem/1.4 var(--av-font-body); color: rgba(255,246,238,0.72); }
.pl-start-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pl-start-cta { width: 100%; border: 0; cursor: pointer; color: #fff; padding: 17px 20px; border-radius: 999px;
  font: 600 1.12rem var(--av-font-display); background: linear-gradient(100deg, #F26A21, #FF2E7E);
  box-shadow: 0 8px 22px rgba(242,106,33,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pl-start-cta:active { transform: translateY(0); }
@media (hover: hover) { .pl-start-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,46,126,0.35); } }
.pl-start-caption { text-align: center; font: 400 0.66rem var(--av-font-mono); letter-spacing: 0.12em; color: rgba(255,246,238,0.74); }

/* Primary CTA + skip (shared) */
.pl-cta { display: block; width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E); color: #fff; font: 600 17px var(--av-font-display);
  box-shadow: 0 6px 24px rgba(255,46,126,0.35); margin-top: 16px; }
.pl-cta:disabled { opacity: 0.5; }
.pl-skip { display: block; width: 100%; min-height: 44px; margin-top: 12px; border: 0; background: none; cursor: pointer;
  font: 600 13px var(--av-font-body); color: var(--av-body-muted); }
/* Museum-UX: skip must not sink into the plum dock + browser chrome — bright
   enough to read as an escape hatch at arm's length. */
.pl-chdock .pl-skip { color: rgba(255,255,255,0.92); }
.pl-chdock .pl-skip span { color: rgba(255,255,255,0.7); }

/* Prominent location pill (museum-UX spec): the ONE consistent "you should be
   standing HERE" visual — gold pill with 📍, same look on the story hero, the
   mission briefing ("Entrance") and every challenge screen (.pl-ch-place). */
.pl-loc-pill { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 8px;
  padding: 6px 12px; border-radius: 999px; background: var(--av-gold); color: #4A2800;
  font: 700 11.5px var(--av-font-mono); letter-spacing: 0.8px; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(0,0,0,0.28); }

/* Venue map open buttons (the overlay itself styles inside venueMap.js).
   Story + game screens: a floating FAB in the shared .pl-fabstack column,
   mounted by play.html mountMapFab. Warm coral from the transport family
   (the play/next buttons), so it reads as house furniture next to the gold
   hint bulb it stacks under while staying a clearly different button, and
   carries over cream, over the plum dock and over the pale plan image.
   The list button sits on the cream page and follows .pl-stoprow. */
.pl-mapfab { pointer-events: auto; width: 56px; height: 56px; flex: none; border: 0; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; font-size: 24px; line-height: 1;
  background: radial-gradient(circle at 35% 28%, var(--av-orange-warm), #E0501C 78%); color: #fff;
  box-shadow: 0 6px 20px rgba(200,70,25,0.42); }
.pl-map-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: 44px; margin: 8px 0 12px; padding: 10px 16px; border: 1px solid var(--av-card-border);
  border-radius: 14px; background: var(--av-card); color: var(--av-ink); cursor: pointer;
  font: 700 14px var(--av-font-display); }

/* Stop list */
.pl-list { padding: 6px 20px 24px; }
.pl-kicker { font: 700 11px var(--av-font-mono); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--av-mono-brown); margin: 16px 0 4px; }
.pl-stoprow { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--av-card-border); padding: 12px 0; min-height: 44px; cursor: pointer; }
.pl-stoprow .em { font-size: 20px; flex: none; width: 28px; }
.pl-stoprow .nm { flex: 1; font: 700 15px var(--av-font-display); color: var(--av-ink); }
.pl-stoprow .nm small { display: block; font: 600 12px var(--av-font-body); color: var(--av-muted); margin-top: 2px; }
.pl-stoprow .dur { font: 700 11px var(--av-font-mono); color: var(--av-mono-brown); }
.pl-stoprow .done { color: #1E9E63; font-size: 15px; }

/* Story player */
.pl-hero { position: relative; margin: 14px 16px 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 22px 88px rgba(120,70,30,0.5); aspect-ratio: 2720 / 1536; background: var(--av-grad-plum); }
/* App parity §3.1: photo letterboxes (contain) over a blurred+dimmed copy of itself */
.pl-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(22px); transform: scale(1.15); }
.pl-hero .dim { position: absolute; inset: 0; background: rgba(30,18,14,0.38); }
.pl-hero img.fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pl-hero .fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; }
.pl-hero .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,18,14,0) 40%, rgba(30,18,14,0.8) 100%); }
.pl-hero .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 14px; }
.pl-hero .cap h2 { font: 600 28px var(--av-font-display); color: #fff; }
.pl-hero .cap p { font: 700 13px var(--av-font-body); color: rgba(255,255,255,0.82); margin-top: 3px; }

/* Generous bottom padding (museum-UX spec): the sticky dock must never sit on
   the last transcript sentences when the walker scrolls to the end. */
.pl-transcript { margin: 12px 16px 0; padding-bottom: 96px; }
.pl-live { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.pl-live .dot { width: 7px; height: 7px; border-radius: 3.5px; background: var(--av-pink); animation: pl-pulse 1.4s ease-in-out infinite; }
@keyframes pl-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.pl-line { font: 600 15px/22px var(--av-font-body); color: var(--av-faint); margin-bottom: 6px; }
.pl-line.active { font-weight: 700; color: var(--av-body); }

/* Player dock (parity §3.3) — compacted (museum-UX): tighter paddings and a
   small-visual speed pill (44px tap box via ::after) shave ~30px off the dock
   without shrinking any transport button. */
.pl-dock { position: sticky; bottom: 0; margin: 10px 12px 14px; border-radius: 28px; padding: 6px 18px 12px; z-index: 5; }
.pl-seek { position: relative; z-index: 1; height: 26px; display: flex; align-items: center; cursor: pointer; }
.pl-seek .trk { position: relative; flex: 1; height: 5px; border-radius: 2.5px; background: var(--av-glass-track-bg); }
.pl-seek .fl { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2.5px;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E); box-shadow: 0 0 12px rgba(255,46,126,0.5); }
.pl-seek .th { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 7.5px; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); transform: translate(-7.5px, -50%); }
.pl-times { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.pl-times span { font: 700 11px var(--av-font-mono); color: rgba(255,255,255,0.5); }
/* Speed pill: visually small (26px) so the dock stays compact; the ::after
   overlay restores the full 44px tap box (a11y floor). */
.pl-rate { position: relative; min-height: 26px; border-radius: 999px; padding: 0 10px; cursor: pointer;
  background: var(--av-glass-pill-bg); border: 1px solid var(--av-glass-pill-border);
  font: 700 11px var(--av-font-display); color: #fff; }
.pl-rate::after { content: ''; position: absolute; inset: -9px; }
.pl-transport { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; padding-bottom: 17px; }
/* Mini dock: a manual scroll down through the transcript collapses the dock
   to its transport strip (play/±15/prev/next keep full size); any scroll up
   or returning near the top restores the full player. */
.pl-dock-mini .pl-seek, .pl-dock-mini .pl-times, .pl-dock-mini .pl-tlabel { display: none; }
.pl-dock-mini { padding-top: 8px; }
.pl-dock-mini .pl-transport { margin-top: 0; padding-bottom: 8px; }
/* Equal-width side columns (= the 52px button) keep the transport symmetric so
   the play button sits at the dock's true center — directly under the centered
   "1×" speed button. The label is taken out of flow (absolutely positioned below
   its button) so the column collapses to the button's height — that keeps the
   prev/next buttons on the same baseline as the ↺15/15↻ jump buttons, while the
   wider "Next stop" label still overflows centered under its button. */
.pl-tcol { position: relative; display: flex; flex-direction: column; align-items: center; width: 52px; flex: none; }
.pl-tlabel { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font: 700 11px var(--av-font-mono); letter-spacing: 0.8px; text-transform: uppercase;
  white-space: nowrap; color: rgba(255,255,255,0.45); }
.pl-tlabel.next { color: var(--av-orange-warm); }
.pl-prev, .pl-next { width: 52px; height: 52px; border-radius: 18px; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.pl-prev { background: var(--av-peach-prev); color: var(--av-orange); }
.pl-prev:disabled { opacity: 0.4; }
.pl-next { background: var(--av-orange-next); color: #fff; box-shadow: 0 6px 24px rgba(249,113,41,0.4); }
.pl-prev svg, .pl-next svg { width: 22px; height: 22px; display: block; }
.pl-jump { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--av-glass-icon-border);
  background: var(--av-glass-icon-bg); color: #fff; font: 700 11px var(--av-font-display); cursor: pointer; }
.pl-play { position: relative; width: 66px; height: 66px; border-radius: 33px; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E);
  box-shadow: 0 14px 56px rgba(255,46,126,0.5); }
.pl-play .tri { width: 0; height: 0; margin-left: 5px;
  /* impeccable-disable-next-line border-accent-on-rounded -- CSS triangle (play glyph), not a card accent border */
  border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 21px solid #fff; }
.pl-play .bars { display: flex; gap: 6px; }
.pl-play .bars i { display: block; width: 6px; height: 24px; border-radius: 2px; background: #fff; }

/* Mission briefing (app parity: BriefingScreen) — the virtual n === 0 stop
   plays as a full-bleed plum stage (crest, waveform, big play, "read instead")
   instead of the standard cream story player. */
.pl-brief { flex: 1; display: flex; flex-direction: column; padding: calc(14px + env(safe-area-inset-top, 0px)) 0 0; }
.pl-brief-head { display: flex; align-items: center; padding: 8px 20px 0; position: relative; z-index: 1; }
.pl-brief-eyebrow { flex: 1; font: 400 11px var(--av-font-mono); letter-spacing: 2.4px; color: #FFD9A8; }
.pl-brief-skip { min-height: 44px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.7); font: 600 12px var(--av-font-body); }
.pl-brief-crest { display: grid; place-items: center; margin-top: 26px; position: relative; z-index: 1; }
.pl-brief-crestbox { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.pl-brief-ring { position: absolute; width: 150px; height: 150px; border-radius: 75px;
  border: 2px solid rgba(255,138,75,0.4); animation: plBriefPulse 3s ease-out infinite; }
.pl-brief-ring.b { border-color: rgba(255,46,126,0.35); animation-delay: 1.5s; }
@keyframes plBriefPulse { 0% { transform: scale(0.9); opacity: 0.55; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.pl-brief-tile { width: 118px; height: 118px; border-radius: 34px; display: grid; place-items: center;
  background: linear-gradient(135deg, #FF8A4B, #FF2E7E); box-shadow: 0 20px 44px rgba(255,46,126,0.55);
  animation: plBriefFloat 5s ease-in-out infinite; }
@keyframes plBriefFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.pl-brief-tile span { font-size: 56px; line-height: 1; }
.pl-brief-titles { text-align: center; margin-top: 24px; padding: 0 30px; position: relative; z-index: 1; }
.pl-brief-mission { font: 700 12px var(--av-font-mono); letter-spacing: 2.4px; color: #FF8FBA; text-transform: uppercase; }
.pl-brief-title { font: 600 34px/37px var(--av-font-display); color: #fff; margin-top: 9px; }
.pl-brief-sub { font: 700 15px/22px var(--av-font-body); color: #C9A4B8; margin: 11px auto 0; max-width: 290px; }
.pl-brief-spacer { flex: 1; min-height: 18px; }
/* Waveform doubles as a seek bar — tap or drag to jump (museum-UX). */
.pl-brief-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px;
  padding: 0 26px; position: relative; z-index: 1; cursor: pointer; touch-action: none; }
.pl-brief-wave i { display: block; width: 4px; border-radius: 99px; background: rgba(255,255,255,0.22); pointer-events: none; }
.pl-brief-wave i.on { background: linear-gradient(180deg, #FF8A4B, #FF2E7E); }
.pl-brief-times { display: flex; justify-content: space-between; align-items: center; padding: 6px 26px 0; position: relative; z-index: 1; }
.pl-brief-times span { font: 400 11px var(--av-font-mono); color: rgba(255,255,255,0.5); }
/* Speed button, centered between the time labels; small visual, full 44px tap. */
.pl-brief-rate { position: relative; min-height: 28px; border-radius: 999px; padding: 0 12px; cursor: pointer;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  font: 700 12px var(--av-font-display); color: #fff; }
.pl-brief-rate::after { content: ''; position: absolute; inset: -8px; }
.pl-brief-transport { display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 16px 0 6px; position: relative; z-index: 1; }
/* Briefing CTA matches the native app's BriefingScreen button: a rounded-rect
   (not the shared pill), diagonal gradient, strong pink glow, bold Fredoka.
   width:auto (not the shared .pl-cta width:100%) so the 26px side margins are
   respected on BOTH edges — 100% + margins overflowed off the right. */
.pl-brief-cta { width: auto; margin: 14px 26px 0; position: relative; z-index: 1;
  min-height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, #FF8A4B, #FF2E7E);
  box-shadow: 0 12px 24px rgba(255,46,126,0.5);
  font-weight: 700; letter-spacing: 0.3px;
  transition: opacity 0.3s ease, box-shadow 0.3s ease; }
/* Until the briefing hits 90% heard the CTA honestly reads "Skip briefing &
   start" and sits dimmed — Play is the star; at 90% it arms into the full-glow
   "Start the mission" (museum-UX: no three competing CTAs). */
.pl-brief-cta-dim { opacity: 0.62; box-shadow: 0 4px 12px rgba(255,46,126,0.22); font-weight: 600; }
.pl-brief-read { display: block; width: 100%; background: none; border: 0; cursor: pointer;
  padding: 12px 0 22px; position: relative; z-index: 1;
  font: 600 12px var(--av-font-body); color: rgba(255,255,255,0.55); text-align: center; }
/* "read the briefing instead" sheet */
.pl-brief-scrim { position: fixed; inset: 0; background: rgba(20,8,14,0.6); display: flex; align-items: flex-end; z-index: 30; }
.pl-brief-sheet { position: relative; width: min(30rem, 100%); margin: 0 auto; background: #FFF6EE;
  border-radius: 28px 28px 0 0; padding: 8px 22px 28px; max-height: 82vh; overflow: auto; }
.pl-brief-grab { width: 44px; height: 5px; border-radius: 99px; background: #E6D2BE; margin: 6px auto 14px; }
.pl-brief-sheet .k { font: 700 11px var(--av-font-mono); letter-spacing: 2px; color: #C22560; text-transform: uppercase; }
.pl-brief-sheet h3 { font: 700 22px var(--av-font-display); color: #2A1726; margin-top: 4px; }
.pl-brief-sheet p { font: 700 15px/23px var(--av-font-body); color: #3d2a34; margin-top: 10px; }
.pl-brief-close { display: block; width: 100%; margin-top: 16px; padding: 15px; border: 0; border-radius: 16px; cursor: pointer;
  background: #EFE4D6; color: #7a4a2a; font: 700 15px var(--av-font-display); }

/* Challenge screen */
.pl-chbody { padding: 18px 20px 0; flex: 1; display: flex; flex-direction: column; }
/* Clearance for the floating FAB column (hint bulb + map) — the last answer
   option must end above the buttons. A flow spacer right before the dock;
   core.js mountFabStack measures the column and sets its height. */
.pl-fabspace { flex: none; }
.pl-chip { align-self: center; background: #FFF1D2; border: 1px solid #F0D797; border-radius: 999px; padding: 4px 11px;
  font: 700 11px var(--av-font-mono); letter-spacing: 1.2px; color: var(--av-gold-deep); text-transform: uppercase; }
.pl-ch-title { text-align: center; font: 600 28px var(--av-font-display); color: var(--av-ink); margin-top: 10px; }
/* Challenge location: same gold "you should be HERE" pill as story + briefing
   (see .pl-loc-pill) — centered under the title. */
.pl-ch-place { width: fit-content; margin: 8px auto 0; padding: 6px 12px; border-radius: 999px;
  background: var(--av-gold); color: #4A2800; font: 700 11.5px var(--av-font-mono);
  letter-spacing: 0.8px; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(120,70,30,0.25); }
/* Contextual how-to-answer microcopy under the chip/title (museum-UX spec):
   "Take a wild guess!" / "Look around you for clues!" */
.pl-ch-hint { text-align: center; font: 600 13px var(--av-font-body); color: var(--av-body-muted); margin-top: 8px; }
.pl-riddle { position: relative; margin-top: 18px; }
.pl-riddle-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E); border-radius: 999px; padding: 4px 12px;
  font: 700 11px var(--av-font-mono); letter-spacing: 1.4px; color: #fff; box-shadow: 0 3px 16px rgba(255,46,126,0.4); }
.pl-riddle-card { background: #fff; border-radius: 24px; padding: 20px 22px 22px; box-shadow: 0 14px 60px rgba(120,70,30,0.4); }
.pl-riddle-card p { font: 600 15px/24px var(--av-font-body); color: #3d3833; }
/* Riddle-card header (challenge redesign) — an eye/spark badge + the contextual
   "look around for clues" / "take a wild guess" line, sitting above a divider,
   mirroring the app's challenge card. */
.pl-riddle-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(122,70,30,0.12); }
.pl-riddle-badge { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,194,75,0.16); color: var(--av-gold-count); }
.pl-riddle-badge svg { width: 19px; height: 19px; }
.pl-riddle-head-txt { font: 700 16.5px/1.3 var(--av-font-display); color: var(--av-ink); }
.pl-chphoto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: #EFE4DC; margin-bottom: 12px; }
/* The answer pills stop short of the floating FAB column (core.js
   mountFabStack measures it into --pl-fabinset), so a fixed button never
   covers an option's text or its tap area mid-scroll. */
.pl-opts { margin-top: 20px; padding-right: var(--pl-fabinset, 0px); }
.pl-opt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: #fff;
  border: 1.5px solid var(--av-orange); border-radius: 13px; padding: 11px 13px; margin-bottom: 8px; min-height: 44px;
  cursor: pointer; box-shadow: 0 2px 12px rgba(122,70,30,0.10); }
.pl-opt .badge { width: 30px; height: 30px; border-radius: 15px; flex: none; background: var(--av-soft);
  display: grid; place-items: center; font: 700 15px var(--av-font-display); color: var(--av-orange); }
.pl-opt .txt { flex: 1; font: 600 15px/1.4 var(--av-font-body); color: var(--av-ink); }
.pl-opt.correct { background: #34B27B; border-color: #2C9A6A; }
.pl-opt.wrong { background: #E0607E; border-color: #C9506C; }
.pl-opt.correct .txt, .pl-opt.wrong .txt { color: #fff; }
.pl-opt.correct .badge, .pl-opt.wrong .badge { background: rgba(255,255,255,0.28); color: #fff; }
.pl-opt.out { opacity: 0.75; }
.pl-retry { text-align: center; font: 600 13px var(--av-font-body); color: #E0607E; margin-top: 4px; }
/* Floating FAB column: the hint bulb (+ its "HINT 1 OF 2" card) on top, the
   map FAB below. One fixed layer for both, so they stack instead of covering
   each other; core.js mountFabStack sets `bottom` from the measured dock. */
.pl-fabstack { position: fixed; right: 16px; bottom: 110px; z-index: 12;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  width: min(78vw, 21rem); pointer-events: none; }
.pl-hintcard { pointer-events: auto; display: block; width: 100%; text-align: left; cursor: pointer;
  background: #FFFDF6; border: 1.5px solid #EFDFA9; border-radius: 20px;
  padding: 15px 18px; box-shadow: 0 10px 40px rgba(120,70,30,0.28); }
.pl-hintcard .k { display: block; font: 700 11px var(--av-font-mono); letter-spacing: 2.2px;
  color: var(--av-gold-deep); text-transform: uppercase; }
.pl-hintcard p { font: 600 15px/23px var(--av-font-body); color: var(--av-ink); margin-top: 5px; }
.pl-hintfab { pointer-events: auto; position: relative; width: 56px; height: 56px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #F9D06B, #E8A33D 78%);
  box-shadow: 0 6px 20px rgba(200,140,40,0.45); }
.pl-hintfab .bulb { font-size: 24px; line-height: 1; }
.pl-hintfab .badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
  border-radius: 11px; padding: 0 5px; background: #2A1726; color: #fff;
  font: 700 12px var(--av-font-mono); display: grid; place-items: center; }
/* Reviewer notes (review mode only) — the yellow "📋 Notes" pill in the
   ribbon (and on the briefing header) opens a bottom sheet: on games the
   correct answer, on stops the access notes, everywhere a textarea for the
   reviewer's on-site note (reviewNotes.js). */
.pl-revpill { display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(160deg, #FFE38A, #FFD43B);
  color: #2A1726; font: 700 13px var(--av-font-display);
  box-shadow: 0 0 12px rgba(255,212,59,0.55); }
.pl-revsheet { position: fixed; inset: 0; z-index: 40; display: flex;
  align-items: flex-end; justify-content: center; }
.pl-revsheet .scrim { position: absolute; inset: 0; background: rgba(20,8,18,0.55); }
.pl-revcard { position: relative; width: min(100%, 30rem); max-height: 82vh;
  overflow: auto; background: #FFFDF6; border-radius: 22px 22px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.pl-revcard h3 { font: 700 12px var(--av-font-mono); letter-spacing: 2.2px;
  color: var(--av-gold-deep); text-transform: uppercase; padding-right: 44px; }
.pl-revclose { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(42,23,38,0.08);
  color: var(--av-ink); font: 700 16px var(--av-font-body); cursor: pointer;
  display: grid; place-items: center; }
.pl-revctx { font: 600 14px var(--av-font-body); color: var(--av-ink-soft, #6B5A63);
  margin-top: 6px; }
.pl-revitem { margin-top: 12px; }
.pl-revitem .k { display: block; font: 700 11px var(--av-font-mono); letter-spacing: 1px;
  color: var(--av-gold-deep); text-transform: uppercase; }
.pl-revitem p { font: 600 14px/21px var(--av-font-body); color: var(--av-ink); margin-top: 3px; }
.pl-revcard textarea { width: 100%; min-height: 88px; margin-top: 16px;
  border: 1.5px solid #E4D6C3; border-radius: 12px; padding: 10px 12px;
  font: 600 14px/20px var(--av-font-body); color: var(--av-ink);
  background: #fff; resize: vertical; }
.pl-revcard .pl-cta { margin-top: 10px; }
.pl-revstatus { font: 600 12px var(--av-font-body); color: #2E7D71;
  margin-top: 8px; min-height: 16px; }
.pl-fact { background: var(--av-amber-bg); border: 1px solid var(--av-amber-border); border-radius: 12px;
  padding: 14px; margin-top: 14px; }
.pl-fact-label { font: 700 11px var(--av-font-mono); letter-spacing: 1px; color: var(--av-gold-deep); }
.pl-fact p { font: 600 14px/21px var(--av-font-body); color: var(--av-ink); margin-top: 6px; }
/* Plum dock pinned bottom (parity §4.8) — bleeds out of .pl-chbody's padding */
.pl-chdock { position: sticky; bottom: 0; z-index: 5; margin: 18px -20px 0; margin-top: auto;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: var(--av-grad-plum); border-radius: 28px 28px 0 0; }
.pl-chdock .pl-cta { margin-top: 0; min-height: 50px; }
.pl-chdock .pl-skip { margin-top: 4px; }

/* One-time coach overlay (first challenge): the ribbon lifts above the scrim
   so the real 🗝️/🪙 pills stay visible; cards below point up at them. */
.pl-coach { position: fixed; inset: 0; z-index: 60; background: rgba(20,8,14,0.74); }
body.pl-coach-open #ribbon { position: relative; z-index: 61; }
.pl-coach-cards { width: min(30rem, 100%); margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 78px) 20px 0; }
/* Arrow is nudged under the pill the current step explains (translateX set in
   maybeShowCoach); it slides from the 🗝️ pill to the 🪙 pill between steps. */
.pl-coach-up { display: inline-block; color: var(--av-gold); font-size: 15px; line-height: 1;
  transition: transform 0.2s ease; }
.pl-coach-card { position: relative; background: #FFFDF6; border-radius: 16px; padding: 14px 16px 14px 48px;
  margin-top: 8px; box-shadow: 0 14px 44px rgba(0,0,0,0.35); }
.pl-coach-card strong { position: absolute; left: 14px; top: 13px; font-size: 22px; }
.pl-coach-card p { font: 600 13.5px/1.5 var(--av-font-body); color: var(--av-ink); }
.pl-coach-cards .pl-cta { margin-top: 14px; }

/* "Leave this tour?" confirm sheet (✕ in the ribbon) — brief-sheet shell with
   an action pair; progress-is-saved reassurance in the body. */
.pl-exit-sheet { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.pl-exit-sheet .pl-brief-close { margin-top: 10px; }

/* Stub card */
.pl-stub-card { margin: 40px 20px; background: #fff; border-radius: 20px; padding: 28px 20px; text-align: center;
  border: 1px solid var(--av-card-border); box-shadow: 0 14px 60px rgba(120,70,30,0.25); }
.pl-stub-emoji { font-size: 44px; }
.pl-stub-card h3 { font: 600 20px var(--av-font-display); color: var(--av-ink); margin-top: 10px; }
.pl-stub-card p { font: 600 14px var(--av-font-body); color: var(--av-body-muted); margin-top: 6px; }
.pl-stub-card .pl-skip { margin-top: 16px; min-height: 48px; border-radius: 999px;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E); color: #fff; font: 600 16px var(--av-font-display); }

/* Finish screen (parity §5.1) */
.pl-finish-hero { position: relative; overflow: hidden; border-radius: 0 0 30px 30px; padding: 24px 22px 20px;
  text-align: center; background: linear-gradient(150deg, #FF6A9E 0%, #FF2E7E 55%, #7A3DF5 100%); }
.pl-finish-hero > * { position: relative; }
.pl-finish-hero .eyebrow { font: 700 13px var(--av-font-mono); letter-spacing: 3px; color: #fff; }
/* confetti: 10 pieces falling + rotating, staggered (parity §5.1) */
.pl-confetti { position: absolute; inset: 0; pointer-events: none; }
.pl-confetti i { position: absolute; top: -20px; width: 12px; height: 12px; opacity: 0;
  animation: pl-confetti-fall 1.8s linear infinite; }
@keyframes pl-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(170px) rotate(360deg); opacity: 0; }
}
.pl-medal-halo { width: 168px; height: 168px; border-radius: 84px; background: rgba(255,255,255,0.16);
  margin: 8px auto 0; display: grid; place-items: center; }
.pl-medal { width: 124px; height: 124px; border-radius: 62px; background: #FFC23D;
  display: grid; place-items: center; box-shadow: 0 12px 44px rgba(224,137,15,0.6);
  animation: pl-medal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             pl-medal-pulse 1.4s ease-in-out 0.5s infinite; }
@keyframes pl-medal-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes pl-medal-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.pl-medal .ring { width: 102px; height: 102px; border-radius: 51px; border: 2.5px dashed rgba(255,255,255,0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pl-medal .ring .em { font-size: 42px; }
.pl-medal .ring .city { font: 700 11px var(--av-font-mono); letter-spacing: 2px; color: #9A5A00; text-transform: uppercase; }
.pl-finish-title-pill { display: inline-block; background: #fff; border-radius: 16px; padding: 10px 18px; margin-top: -16px;
  position: relative; box-shadow: 0 8px 24px rgba(0,0,0,0.2); font: 700 16px var(--av-font-display); color: var(--av-ink); }
.pl-medal .ring .city:empty { display: none; }
.pl-finish-hero h1 { font: 700 28px var(--av-font-display); color: #fff; margin-top: 14px; }
.pl-finish-hero .blurb { font: 600 14px/20px var(--av-font-body); color: rgba(255,255,255,0.94); margin-top: 7px; }
.pl-stats { display: flex; gap: 10px; margin-top: 16px; }
.pl-stat { flex: 1; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); border-radius: 18px;
  padding: 16px 4px; text-align: center; }
.pl-stat .n { font: 700 26px var(--av-font-display); color: #fff; }
.pl-stat .l { font: 700 11px var(--av-font-mono); letter-spacing: 1px; color: rgba(255,255,255,0.85); margin-top: 4px; }
.pl-finish-body { padding: 20px; }

/* "Your adventure continues" — the gamified next-quest card. A vibrant
   violet→magenta→pink gradient that flows out of the celebration hero's
   purple base, with a gold "loot" CTA and a glowing translucent quest tile,
   so the primary action reads as a reward, not a receipt. */
.pl-adventure { position: relative; overflow: hidden; border-radius: 24px; padding: 18px;
  background: linear-gradient(160deg, #5B2BD6 0%, #8E2C9A 50%, #E62E86 100%);
  box-shadow: 0 18px 46px rgba(122,61,245,0.42); }
.pl-adventure::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 12% -12%, rgba(255,255,255,0.30), transparent 60%); }
.pl-adventure > * { position: relative; }
.pl-adventure .kick { font: 800 12px var(--av-font-mono); letter-spacing: 1.8px; color: var(--av-gold); }
.pl-adventure .bridge { font: 700 18px/24px var(--av-font-display); color: #fff; margin-top: 9px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.18); }
.pl-adventure .feat { display: none; align-items: center; gap: 13px; margin-top: 12px; padding: 11px;
  border-radius: 16px; text-decoration: none; background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .15s ease, background .15s ease; }
.pl-adventure .feat .go { display: none; }
.pl-adventure .feat img { width: 58px; height: 58px; border-radius: 13px; object-fit: cover; flex: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30); background: #eadfce; }
.pl-adventure .feat .feat-fallback { width: 58px; height: 58px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,0.2);
  box-shadow: 0 4px 14px rgba(0,0,0,0.30); }
.pl-adventure .feat-txt { min-width: 0; }
.pl-adventure .feat .city { display: block; font: 800 10.5px var(--av-font-mono); letter-spacing: 1px; color: var(--av-gold); }
.pl-adventure .feat .title { display: block; font: 700 16.5px/20px var(--av-font-display); color: #fff; margin-top: 1px; }
.pl-adventure .feat .pitch { display: block; font: 600 12px/16px var(--av-font-body); color: rgba(255,255,255,0.82); margin-top: 3px; }
.pl-adventure .feat .go { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--av-gold); color: #6a2a00;
  font: 800 17px var(--av-font-display); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.pl-adventure .blurb { font: 600 13.5px/19px var(--av-font-body); color: rgba(255,255,255,0.9); margin-top: 12px; }
.pl-adventure .stores { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pl-adventure-cta { flex: 1; min-height: 54px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font: 800 15px var(--av-font-display); color: #5a2a00;
  background: linear-gradient(135deg, #FFD874 0%, #FFB330 100%);
  box-shadow: 0 10px 26px rgba(255,168,40,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform .15s ease, box-shadow .15s ease; }
.pl-adventure-cta:hover { transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(255,168,40,0.62), inset 0 1px 0 rgba(255,255,255,0.6); }
.pl-adventure .tryfree-btn { align-items: center; justify-content: center;
  min-height: 48px; margin-top: 10px; padding: 0 18px; border-radius: 999px; text-decoration: none;
  font: 800 14.5px var(--av-font-display); color: var(--av-gold);
  background: rgba(255,255,255,0.10); border: 1.5px solid var(--av-gold);
  transition: transform .15s ease, background .15s ease; }
.pl-adventure .tryfree-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.18); }
.pl-adventure .explore-btn { display: flex; align-items: center; justify-content: center;
  min-height: 46px; margin-top: 10px; padding: 0 18px; border-radius: 999px; text-decoration: none;
  font: 800 14px var(--av-font-display); color: #fff;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.5);
  transition: transform .15s ease, background .15s ease; }
.pl-adventure .explore-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.24); }

/* Tour review form (app FinishScreen review parity) — sits UNDER the next-tour
   card on the finish body. A clean light card: tap a star, optionally pick
   tags, submit. Stars gate the submit; a sent verdict flips to the thanks line. */
.pl-review { margin-top: 14px; padding: 18px 16px 16px; border-radius: 24px;
  background: var(--av-card); border: 1px solid var(--av-card-border);
  box-shadow: 0 8px 24px rgba(42,23,38,0.06); }
.pl-review-title { font: 700 16px var(--av-font-display); color: var(--av-tp-ink); text-align: center; }
.pl-review-stars { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.pl-star { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 34px; line-height: 1; color: #E6D6C6; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, color .12s ease; }
.pl-star:active { transform: scale(0.9); }
.pl-star.on { color: var(--av-gold); }
.pl-review-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.pl-review-tag { padding: 10px 14px; min-height: 40px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--av-card-border);
  font: 600 13.5px var(--av-font-body); color: var(--av-body-muted);
  transition: background .12s ease, color .12s ease, border-color .12s ease; }
.pl-review-tag.on { background: var(--av-tp-ink); border-color: var(--av-tp-ink); color: #fff; }
.pl-review-submit { display: block; width: 100%; min-height: 52px; margin-top: 16px; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  font: 800 15px var(--av-font-display);
  background: linear-gradient(135deg, #FF8A4B, #FF2E7E);
  box-shadow: 0 10px 24px rgba(255,46,126,0.32);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.pl-review-submit:not([disabled]):hover { transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255,46,126,0.42); }
.pl-review-submit[disabled] { background: #D9C6B6; box-shadow: none; cursor: default; }
.pl-review-error { margin-top: 10px; text-align: center;
  font: 600 12.5px var(--av-font-body); color: #C0392B; }
.pl-review-thanks { padding: 8px 0; text-align: center;
  font: 700 15px var(--av-font-display); color: var(--av-tp-ink); }

/* Persistent buy proposal during the free trial window (play.html) */
.pl-buypill { display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; margin: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-radius: 999px; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, #FF8A4B, #FF2E7E);
  font: 600 15px var(--av-font-display);
  box-shadow: 0 6px 20px rgba(255,46,126,0.3); }

/* ===========================================================================
   Web home (home.html) — native HomeScreen parity. Mobile-first app column;
   ≥720px the column widens on the page-bg, ≥1000px rails wrap into grids.
   =========================================================================== */
body.hm-body { background: var(--av-cream); }
.hm-app { width: min(30rem, 100%); margin: 0 auto; min-height: 100svh; display: flex; flex-direction: column; }

/* Plum header (native 7a): greeting, coins chip, avatar, glass search */
.hm-head { border-radius: 0 0 28px 28px; padding: 20px 20px 18px; }
.hm-topbar { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.hm-hgroup { flex: 1; min-width: 0; }
.hm-greeting { font: 700 13px var(--av-font-display); color: var(--av-plum-orange-soft); }
.hm-h1 { font: 500 32px var(--av-font-display); color: #fff; margin-top: 2px; }
.hm-coins { display: flex; align-items: center; min-height: 34px; border-radius: 999px; padding: 7px 12px;
  background: var(--av-glass-pill-bg); border: 1px solid var(--av-glass-pill-border);
  font: 700 14px var(--av-font-display); color: var(--av-gold); white-space: nowrap; }
.hm-avatar { width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer; flex: none;
  background: var(--av-grad-cta); color: #fff; font: 700 17px var(--av-font-display);
  display: grid; place-items: center; padding: 0; }
.hm-search { position: relative; z-index: 1; display: block; width: 100%; margin-top: 16px; min-height: 46px;
  background: var(--av-glass-pill-bg); border: 1px solid var(--av-glass-pill-border); border-radius: 999px;
  padding: 13px 16px; font: 600 14px var(--av-font-body); color: #fff; text-align: left; cursor: text; }
.hm-search::placeholder { color: rgba(255,255,255,0.5); }
input.hm-search { outline: none; }
button.hm-search { color: rgba(255,255,255,0.5); }

/* content column — the legacy shared `main { width: min(30rem,100%) }` rule
   at the top of this file must not squeeze the home page on wide screens */
.hm-main { flex: 1; width: 100%; margin: 0; padding: 0 0 40px; }

/* catalog loading / error / empty */
.hm-status { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 72px 32px 40px; text-align: center; }
.hm-status .em { font-size: 40px; }
.hm-status h2 { font: 700 18px var(--av-font-display); color: var(--av-ink); }
.hm-status p { font: 600 14px/20px var(--av-font-body); color: var(--av-muted); }
.hm-retry { margin-top: 10px; border: 0; border-radius: 999px; padding: 12px 26px; cursor: pointer;
  background: var(--av-orange); color: #fff; font: 700 15px var(--av-font-display); min-height: 44px; }

/* featured "free mission of the day" (FreeStopHero-flavoured portal card) */
.hm-feat { display: block; width: calc(100% - 32px); margin: 16px 16px 0; text-align: left; border: 0; padding: 0;
  background: #fff; border-radius: 26px; overflow: hidden; cursor: pointer;
  box-shadow: 0 16px 26px rgba(60,20,35,0.35); }
.hm-feat-stage { position: relative; height: 190px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #4A2338 0%, #241019 70%); }
.hm-feat-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5;
  filter: saturate(0.85); }
.hm-feat-stage .glow { position: absolute; left: 50%; top: 42%; width: 190px; height: 190px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,190,90,0.5) 0%, rgba(255,190,90,0) 66%); }
.hm-feat-stage .ring { position: absolute; left: 50%; top: 42%; width: 108px; height: 108px;
  transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255,194,75,0.65);
  box-shadow: 0 0 26px rgba(255,190,90,0.55), inset 0 0 20px rgba(255,190,90,0.3);
  display: grid; place-items: center; font-size: 44px; }
.hm-feat-stage .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,8,14,0.15) 0%, rgba(20,8,14,0) 35%, rgba(20,8,14,0.78) 100%); }
.hm-feat-badge { position: absolute; top: 14px; left: 14px; border-radius: 999px; padding: 7px 12px;
  background: rgba(20,10,8,0.82); border: 1px solid rgba(255,194,75,0.5);
  font: 700 11px var(--av-font-mono); letter-spacing: 1.4px; color: var(--av-gold);
  box-shadow: 0 0 9px rgba(255,190,90,0.4); }
.hm-feat-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 15px; }
.hm-feat-story { font: 500 22px/24px var(--av-font-display); color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.72); }
.hm-feat-place { font: 600 12px var(--av-font-body); color: rgba(255,216,154,0.92); margin-top: 7px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.hm-feat-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; }
.hm-feat-playtitle { flex: 1; font: 800 13.5px var(--av-font-body); color: var(--av-ink); }
.hm-feat-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 11px 20px;
  background: var(--av-grad-cta); color: #fff; font: 600 14px var(--av-font-display);
  box-shadow: 0 10px 11px rgba(255,46,126,0.35); }
/* impeccable-disable-next-line border-accent-on-rounded -- CSS triangle (play glyph), not a card accent border */
.hm-feat-btn .tri { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid #fff; }

/* section heads */
.hm-sechead { display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; margin-top: 22px; }
.hm-sectitle { font: 700 22px var(--av-font-display); color: var(--av-ink); }

/* location prime card / denied note (native nearPrime / locDenied) */
.hm-locprime { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 13px 15px;
  background: var(--av-card); border: 1px solid var(--av-card-border); border-radius: 18px; }
.hm-locprime .em { font-size: 24px; flex: none; }
.hm-locprime .tx { flex: 1; min-width: 0; }
.hm-locprime strong { display: block; font: 700 14px var(--av-font-body); color: var(--av-ink); }
.hm-locprime span { display: block; font: 600 12.5px/1.4 var(--av-font-body); color: var(--av-body-muted); margin-top: 2px; }
.hm-locprime button { border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; flex: none; min-height: 44px;
  background: var(--av-grad-cta); color: #fff; font: 600 13px var(--av-font-display); }
.hm-locnote { margin: 12px 20px 0; font: 600 12.5px/1.5 var(--av-font-body); color: var(--av-muted); }

/* chip + tab pills */
.hm-chiprow { display: flex; gap: 9px; padding: 12px 20px; overflow-x: auto; scrollbar-width: none; }
.hm-chiprow::-webkit-scrollbar { display: none; }
.hm-chip { flex: none; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; min-height: 36px;
  background: #fff; box-shadow: 0 3px 6px rgba(122,70,30,0.12);
  font: 600 13px var(--av-font-body); color: #5d564f; }
.hm-chip.on { background: var(--av-plum-top); color: #fff; }
.hm-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 14px; padding: 9px 13px;
  cursor: pointer; min-height: 36px; background: #fff; border: 1px solid var(--av-card-border);
  font: 600 13px var(--av-font-body); color: var(--av-muted); }
.hm-tab.on { background: var(--av-ink); border-color: var(--av-ink); color: #fff; }
.hm-tab .ct { min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: grid; place-items: center;
  background: var(--av-track); font: 600 11px var(--av-font-body); color: var(--av-body-muted); }
.hm-tab.on .ct { background: rgba(255,255,255,0.25); color: #fff; }

/* rails: horizontal scroll on mobile, wrap into a grid on wide screens */
.hm-rail { display: flex; gap: 14px; padding: 12px 16px 10px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hm-rail::-webkit-scrollbar { display: none; }
.hm-empty { font: 600 13px var(--av-font-body); color: var(--av-muted); padding: 16px 20px; }

/* recommended card (native 7a rail: 250px, radius 24) */
.hm-card { flex: none; width: 250px; background: #fff; border-radius: 24px; overflow: hidden; cursor: pointer;
  border: 0; padding: 0; text-align: left; box-shadow: 0 14px 30px rgba(120,70,30,0.25);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease; }
.hm-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(120,70,30,0.32); }
.hm-card-img { position: relative; height: 104px; background: var(--av-soft);
  background-size: cover; background-position: center; }
.hm-card-badge { position: absolute; top: 9px; left: 9px; border-radius: 999px; padding: 3px 8px;
  background: rgba(36,16,25,0.45); border: 1px solid rgba(255,255,255,0.3);
  font: 400 11px var(--av-font-mono); letter-spacing: 0.4px; color: #fff; }
.hm-heart { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 17px; border: 0;
  cursor: pointer; background: rgba(36,16,25,0.45); color: rgba(255,255,255,0.85); font-size: 15px;
  display: grid; place-items: center; padding: 0; }
.hm-heart.on { color: var(--av-pink); background: rgba(255,255,255,0.92); }
.hm-card-body { padding: 13px; display: flex; flex-direction: column; flex: 1; }
.hm-card-title { font: 500 18px var(--av-font-display); color: var(--av-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card-city { font: 600 12px var(--av-font-body); color: var(--av-pink); letter-spacing: 0.3px; margin-top: 3px; }
.hm-card-teaser { font: 600 12px/16px var(--av-font-body); color: var(--av-body-muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card-meta { font: 400 11px var(--av-font-mono); color: var(--av-mono-brown); letter-spacing: 0.6px;
  margin-top: 6px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card-preview { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px;
  min-height: 44px; border-radius: 999px; border: 1.5px solid #FFB1CC; background: #FFF0F5;
  font: 800 12px var(--av-font-body); color: var(--av-pink); }
/* impeccable-disable-next-line border-accent-on-rounded -- CSS triangle (play glyph), not a card accent border */
.hm-card-preview .tri { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  /* impeccable-disable-next-line side-tab -- CSS triangle left edge, not a card accent border */
  border-left: 8px solid var(--av-pink); }

/* continue / saved / library card (native contCard: 232px, radius 18) */
.hm-cont { flex: none; width: 232px; background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer;
  border: 0; padding: 0; text-align: left; box-shadow: 0 8px 12px rgba(122,70,30,0.18);
  transition: transform .15s ease; }
.hm-cont:hover { transform: translateY(-3px); }
.hm-cont-img { height: 110px; background: linear-gradient(135deg, #FFC8A2, #FF8A5B);
  background-size: cover; background-position: center; }
.hm-cont-body { padding: 12px; }
.hm-cont-eyebrow { font: 800 11px var(--av-font-body); color: var(--av-pink); letter-spacing: 0.4px; }
.hm-cont-title { font: 700 16px var(--av-font-display); color: var(--av-ink); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cont-resume { font: 700 13px var(--av-font-display); color: var(--av-pink); margin-top: 8px; }

/* language sheet (avatar tap) */
.hm-sheet-scrim { position: fixed; inset: 0; background: rgba(20,8,14,0.6); display: flex; align-items: flex-end;
  justify-content: center; z-index: 30; }
.hm-sheet { width: min(30rem, 100%); background: #FFF6EE; border-radius: 28px 28px 0 0; padding: 8px 22px 28px; }
.hm-sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: #E6D2BE; margin: 6px auto 14px; }
.hm-sheet h3 { font: 700 18px var(--av-font-display); color: #2A1726; }

/* ---- responsive: widen on the desktop, wrap rails into grids ---- */
@media (min-width: 720px) {
  body.hm-body { background: var(--av-page-bg); }
  .hm-app { width: min(1080px, 100% - 48px); }
  .hm-head { border-radius: 28px; margin-top: 20px; }
  .hm-main { background: var(--av-cream); border-radius: 24px; margin-top: 16px; }
  .hm-search { max-width: 560px; }
}
@media (min-width: 1000px) {
  /* rails become true grids: cards stretch to fill the row instead of leaving
     a ragged right edge of fixed-width phone cards */
  .hm-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow-x: visible; }
  .hm-card, .hm-cont { width: auto; }
  .hm-feat { width: calc(100% - 32px); }
  .hm-feat-stage { height: 230px; }
}

/* ===========================================================================
   Desktop adaptations (≥900px).
   - Tour preview (venue.html + /tours/* marketing pages): the phone column
     unfolds into a two-column stage — hero + docked CTA pinned left, the
     tabs/brief/stops/reviews content flowing right.
   - Player (play.html): the app column becomes a framed device card on the
     page background. The JS side gates desktop sessions to mission + first
     stop and then hands off via QR (see play.html showDesktopHandoff).
   =========================================================================== */
@media (min-width: 900px) {
  /* Tour preview: ≥960px preview.js renders the dedicated desktop layout
     (.dv-*, design handoff — see the section at the end of this file); the
     phone-column markup below only ever shows under 960px, so it keeps its
     mobile styles untouched here. */

  /* ---- player: framed device card ---- */
  body.pl-body { background: var(--av-page-bg); }
  .pl-app {
    min-height: calc(100svh - 56px);
    margin: 28px auto; border-radius: 34px; overflow: hidden;
    background: var(--av-cream);
    box-shadow: 0 30px 80px rgba(60,30,20,0.28);
  }
  /* keep the floating FABs inside the centered card, not at the
     viewport's far right */
  .pl-fabstack { right: calc(50% - 15rem + 16px); }
}

/* Desktop handoff screen (play.html): mission + first stop are the desktop
   taster — this plum stage offers the QR that moves the session to a phone. */
.pl-desk { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 36px 28px 44px; }
.pl-desk > * { position: relative; z-index: 1; }
.pl-desk-icon { font-size: 44px; line-height: 1; }
.pl-desk h1 { font: 600 36px/40px var(--av-font-display); color: #fff; margin-top: 14px; max-width: 420px; }
.pl-desk p { font: 600 14.5px/21px var(--av-font-body); color: rgba(255,255,255,0.8);
  margin-top: 12px; max-width: 400px; }
.pl-desk-qr { background: #fff; border-radius: 24px; padding: 16px; margin-top: 24px;
  box-shadow: 0 18px 56px rgba(0,0,0,0.4); }
.pl-desk-qr img { display: block; width: 216px; height: 216px; image-rendering: pixelated; }
.pl-desk-cap { font: 700 12px var(--av-font-body); color: var(--av-gold); margin-top: 16px;
  letter-spacing: 0.4px; }
.pl-desk-url { font: 400 11px var(--av-font-mono); color: rgba(255,255,255,0.45);
  margin-top: 8px; word-break: break-all; max-width: 360px; }

/* ===========================================================================
   Desktop tour preview (design handoff, preview.js renderDesktop, ≥960px).
   Dark plum theme; tokens from the handoff README:
   bg #22101B + radial #3A1E2E · cream #FBEEE3 · text #F6E9DC (alpha steps)
   accents #FF8A4B / #FFB98A / #FF2E7E · success #23A06B · glass rgba(43,22,34,.72)
   =========================================================================== */
body.dv-body {
  background: radial-gradient(1400px 700px at 50% -200px, #3A1E2E, #22101B 70%) #22101B;
  color: #F6E9DC;
}
/* the dv layout renders inside main.av-phone — neutralize the phone column */
body.dv-body main.av-phone { width: 100%; max-width: none; margin: 0; padding: 0 0 90px; background: transparent; }
.dv-rail { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* -- top nav -- */
.dv-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.dv-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dv-logo svg { width: 34px; height: 34px; display: block; }
.dv-logo-word { font: 600 20px var(--av-font-display); color: #F6E9DC; }
.dv-langwrap { position: relative; }
.dv-langpill { padding: 9px 16px; border-radius: 13px; cursor: pointer;
  background: rgba(251,238,227,0.08); border: 1.5px solid rgba(251,238,227,0.14);
  font: 700 14px var(--av-font-body); color: #F6E9DC; }
.dv-langpill:disabled { cursor: default; }
.dv-langpill .caret { font-size: 10px; color: #FF8A4B; }
.dv-langmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 200px;
  border-radius: 16px; background: #FBEEE3; box-shadow: 0 24px 50px -18px rgba(0,0,0,0.6); padding: 8px; }
.dv-langmenu button { display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px 12px; border-radius: 11px; cursor: pointer;
  font: 700 14px var(--av-font-body); color: #2A1726; }
.dv-langmenu button:hover, .dv-langmenu button[aria-pressed="true"] { background: #F3E2D2; }
.dv-langmenu button .ck { color: #23A06B; float: right; }

/* -- hero (full-bleed, top edge fades into the page background) -- */
.dv-hero { position: relative; height: 480px; margin-top: 20px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px);
  mask-image: linear-gradient(180deg, transparent 0, #000 150px); }
.dv-hero img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; }
.dv-hero-fallback { background: var(--av-tp-hero-fallback); }
.dv-hero-v { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,16,27,0.55) 0%, rgba(34,16,27,0.05) 34%, rgba(34,16,27,0.45) 68%, #22101B 100%); }
.dv-hero-h { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(34,16,27,0.72) 0%, rgba(34,16,27,0.25) 45%, rgba(34,16,27,0) 70%); }
.dv-hero-rail { position: relative; height: 100%; display: flex; align-items: flex-end; }
.dv-hero-text { padding-bottom: 56px; max-width: 640px; }
.dv-eyebrow { font: 700 13px var(--av-font-mono); letter-spacing: 0.24em; color: #FFB98A;
  text-transform: uppercase; text-shadow: 0 2px 12px rgba(10,4,8,0.5); }
.dv-title { font: 600 54px/1.04 var(--av-font-display); color: #fff; margin-top: 14px;
  text-shadow: 0 4px 30px rgba(10,4,8,0.6); }

/* -- content grid -- */
.dv-grid { display: grid; grid-template-columns: 1fr 372px; gap: 52px; align-items: start; }
.dv-maincol { padding-top: 28px; min-width: 0; }

/* tabs */
.dv-tabs { display: flex; align-items: center; gap: 8px; }
.dv-tab { border: 0; background: none; cursor: pointer; padding: 10px 22px; border-radius: 999px;
  font: 700 15px var(--av-font-body); color: rgba(246,233,220,0.55); min-height: 40px; }
.dv-tab:hover { color: #F6E9DC; }
.dv-tab.on { background: #FBEEE3; color: #2A1726; font-weight: 800; }

/* mission brief — open editorial text, no card */
.dv-brief { margin-top: 26px; }
.dv-secline { display: flex; align-items: center; gap: 14px; }
.dv-seclabel { font: 700 14px var(--av-font-mono); letter-spacing: 0.22em; color: #FFB98A;
  text-transform: uppercase; white-space: nowrap; }
.dv-rule { flex: 1; height: 2px; background: linear-gradient(90deg, #FF8A4B, transparent); }
.dv-lead { font: 500 21px/1.55 var(--av-font-display); color: #F6E9DC; margin-top: 18px;
  white-space: pre-line; } /* DB line breaks (OBJECTIVE / LAST SEEN) lay out as typed */
.dv-bodytext { font: 500 17px/1.6 var(--av-font-display); color: rgba(246,233,220,0.72); margin-top: 18px; }
.dv-lead + .dv-bodytext { margin-top: 14px; }

/* what's waiting — 5 tiles + description panel */
.dv-waiting { margin-top: 26px; }
.dv-tilerow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.dv-tile { padding: 18px 12px 16px; border-radius: 18px; text-align: center; cursor: pointer;
  background: rgba(251,238,227,0.05); border: 1.5px solid rgba(251,238,227,0.1);
  transition: transform 0.15s ease; }
.dv-tile:hover { transform: translateY(-3px); }
.dv-tile-icon { width: 48px; height: 48px; border-radius: 15px; margin: 0 auto;
  display: grid; place-items: center; font-size: 24px; background: rgba(251,238,227,0.1); }
.dv-tile-label { display: block; margin-top: 10px; font: 800 14px var(--av-font-body);
  color: rgba(246,233,220,0.8); }
.dv-tile.on { background: linear-gradient(160deg, rgba(255,138,75,0.16), rgba(255,46,126,0.14));
  border-color: rgba(255,138,75,0.5); }
.dv-tile.on .dv-tile-icon { background: linear-gradient(135deg, #FF8A4B, #FF2E7E);
  box-shadow: 0 10px 22px -8px rgba(255,46,126,0.6); }
.dv-tile.on .dv-tile-label { color: #FFB98A; }
.dv-detailpanel { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px;
  padding: 20px 24px; border-radius: 18px;
  background: rgba(251,238,227,0.06); border: 1.5px solid rgba(251,238,227,0.1); }
.dv-detail-emoji { font-size: 24px; line-height: 1.2; }
.dv-detail-name { font: 800 16px var(--av-font-body); color: #F6E9DC; }
.dv-detail-desc { font: 600 15px/1.55 var(--av-font-body); color: rgba(246,233,220,0.72); margin-top: 4px; }

/* first stops */
.dv-stops { margin-top: 34px; scroll-margin-top: 24px; }
.dv-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.dv-sechead h2 { font: 600 24px var(--av-font-display); color: #F6E9DC; }
.dv-seeall { border: 0; background: none; cursor: pointer; padding: 4px 0;
  font: 800 14px var(--av-font-body); color: #FF8A4B; }
.dv-seeall:hover { color: #FF2E7E; }
.dv-stoprows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dv-stoprow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px;
  background: rgba(251,238,227,0.05); border: 1.5px solid rgba(251,238,227,0.09); }
.dv-stopthumb { width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 22px; background: #EADFCE; }
.dv-stoprow:nth-child(3n+2) .dv-stopthumb { background: #D9E2E4; }
.dv-stoprow:nth-child(3n) .dv-stopthumb { background: #DCD3E2; }
.dv-stopmain { flex: 1; min-width: 0; }
.dv-stopname { font: 600 17px var(--av-font-display); color: #F6E9DC; }
.dv-stopmeta { font: 700 12px var(--av-font-body); color: rgba(246,233,220,0.5); margin-top: 2px; }
.dv-tag { flex: none; border-radius: 999px; padding: 6px 12px;
  background: rgba(251,238,227,0.08); font: 800 12px var(--av-font-body); color: rgba(246,233,220,0.6); }
.dv-tag-free { background: #23A06B; color: #fff; }
.dv-morerow { margin-top: 10px; padding: 14px 18px; border-radius: 18px;
  border: 1.5px dashed rgba(251,238,227,0.18);
  font: 700 14px var(--av-font-body); color: rgba(246,233,220,0.55); }

/* reviews */
.dv-reviews { margin-top: 38px; scroll-margin-top: 24px; }
.dv-revsummary { font: 800 15px var(--av-font-body); color: #FFB98A; }
.dv-revsummary .dim { font: 700 13px var(--av-font-body); color: rgba(246,233,220,0.5); }
.dv-revgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.dv-revcard { padding: 18px 20px; border-radius: 18px; text-align: left;
  background: rgba(251,238,227,0.05); border: 1.5px solid rgba(251,238,227,0.09); }
.dv-revretry { cursor: pointer; font: 700 14px var(--av-font-body); color: rgba(246,233,220,0.72); }
.dv-revtop { display: flex; align-items: center; gap: 10px; }
.dv-revavatar { width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font: 700 15px var(--av-font-display); color: #2A1726; }
.dv-revwho { flex: 1; min-width: 0; }
.dv-revname { font: 800 14px var(--av-font-body); color: #F6E9DC; }
.dv-revmeta { font: 700 11px var(--av-font-body); color: rgba(246,233,220,0.45); }
.dv-revstars { font: 700 13px var(--av-font-body); color: #FFB98A; }
.dv-revbody { font: 600 14px/1.55 var(--av-font-body); color: rgba(246,233,220,0.72); margin-top: 12px; }

/* sticky CTA card (top-aligned with the Overview/Stops/Reviews tab row) */
.dv-side { position: sticky; top: 24px; margin-top: 28px; z-index: 10; }
.dv-card { background: rgba(43,22,34,0.72); border: 1.5px solid rgba(251,238,227,0.14);
  border-radius: 26px; padding: 26px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.65); color: #F6E9DC; }
.dv-card-eyebrow { font: 700 12px var(--av-font-mono); letter-spacing: 0.2em; color: #FFB98A;
  text-transform: uppercase; }
.dv-meta { display: flex; flex-direction: column; gap: 9px; margin-top: 16px;
  font: 700 14px var(--av-font-body); color: rgba(246,233,220,0.78); }
.dv-cta { display: block; width: 100%; margin-top: 20px; padding: 17px; border: 0; border-radius: 16px;
  cursor: pointer; background: linear-gradient(135deg, #FF8A4B, #FF2E7E);
  font: 600 19px var(--av-font-display); color: #fff; text-align: center;
  box-shadow: 0 16px 36px -12px rgba(255,46,126,0.55); transition: transform 0.15s ease; }
.dv-cta:hover { transform: translateY(-2px); }
.dv-ghost { display: block; width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px;
  cursor: pointer; background: none; border: 1.5px solid rgba(251,238,227,0.22);
  font: 800 14px var(--av-font-body); color: rgba(246,233,220,0.65); transition: border-color 0.15s ease, color 0.15s ease; }
.dv-ghost:hover { border-color: #FF8A4B; color: #FFB98A; }
.dv-audioline { margin-top: 12px; text-align: center; font: 700 12px var(--av-font-body);
  color: rgba(246,233,220,0.45); }
.dv-audioline a { color: #FF8A4B; text-decoration: none; }
.dv-audioline a:hover { color: #FF2E7E; }
.dv-cardfoot { margin-top: 14px; text-align: center; font: 600 12px var(--av-font-body);
  color: rgba(246,233,220,0.45); }
.dv-cardfoot a { color: inherit; text-decoration: none; }
.dv-cardfoot a:hover { color: #FFB98A; }

/* QR handoff modal */
.dv-qr-scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(16,6,12,0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dv-qr { position: relative; width: min(420px, calc(100% - 48px)); text-align: center;
  background: rgba(43,22,34,0.92); border: 1.5px solid rgba(251,238,227,0.14);
  border-radius: 26px; padding: 30px 28px 26px; color: #F6E9DC;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); }
.dv-qr-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(251,238,227,0.18); background: rgba(251,238,227,0.06); cursor: pointer;
  font: 700 14px var(--av-font-body); color: rgba(246,233,220,0.7); }
.dv-qr-close:hover { color: #F6E9DC; border-color: rgba(251,238,227,0.4); }
.dv-qr-icon { font-size: 36px; }
.dv-qr h2 { font: 600 26px var(--av-font-display); color: #fff; margin-top: 10px; }
.dv-qr p { font: 600 14px/1.55 var(--av-font-body); color: rgba(246,233,220,0.72); margin-top: 8px; }
.dv-qr-box { display: inline-block; background: #fff; border-radius: 20px; padding: 14px; margin-top: 18px; }
.dv-qr-box img { display: block; width: 196px; height: 196px; image-rendering: pixelated; }
.dv-qr-hint { font: 800 13px var(--av-font-body); color: #FFB98A; margin-top: 14px; }
.dv-qr-url { font: 400 11px var(--av-font-mono); color: rgba(246,233,220,0.4);
  margin-top: 8px; word-break: break-all; }