/* ---- Play-gate cover (branded play screen, before tiles stream). Backdrop precedence:
   real blurred course frame (--pg-frame) > course-type motif (data-terrain) > neutral. ---- */
/* Play + loading are ONE continuous branded surface (.pg-screen): same backdrop + logo,
   Play button -> spinner. So clicking Play doesn't drop to a different page. */
/* Self-contained: includes @keyframes spin; reads :root brand vars with safe fallbacks. */
.pg-screen { overflow: hidden; }
.pg-screen::before { content:""; position:absolute; inset:0;
  background:
    radial-gradient(150% 72% at 50% 94%, var(--pg-glow, rgba(231,170,96,.34)) 0%, transparent 52%),
    linear-gradient(180deg, #0c1724 0%, #213440 48%, #3a4750 72%, #11140d 100%); }
.pg-screen[data-bg="frame"]::before { background: var(--pg-frame) center/cover; filter: blur(18px) brightness(.5) saturate(.95); transform: scale(1.14); }
.pg-screen .pg-ridge { position:absolute; left:0; right:0; bottom:0; z-index:0; pointer-events:none; }
.pg-screen[data-bg="frame"] .pg-ridge { display:none; }   /* a real course frame already shows the terrain */
.pg-screen[data-terrain="urban"] .pg-ridge { height:44%; background:#070b11; opacity:1;
  clip-path: polygon(0% 100%,0% 68%,3% 68%,3% 76%,6% 76%,6% 50%,8% 50%,8% 58%,11% 58%,11% 36%,12% 36%,12% 28%,13% 28%,13% 36%,16% 36%,16% 62%,20% 62%,20% 46%,23% 46%,23% 54%,26% 54%,26% 32%,28% 32%,28% 20%,29% 20%,29% 32%,32% 32%,32% 56%,36% 56%,36% 42%,39% 42%,39% 48%,42% 48%,42% 66%,45% 66%,45% 38%,47% 38%,47% 10%,48% 10%,48% 38%,51% 38%,51% 58%,55% 58%,55% 44%,58% 44%,58% 52%,61% 52%,61% 28%,64% 28%,64% 34%,67% 34%,67% 60%,71% 60%,71% 40%,73% 40%,73% 24%,74% 24%,74% 40%,77% 40%,77% 54%,81% 54%,81% 46%,84% 46%,84% 64%,88% 64%,88% 50%,91% 50%,91% 68%,94% 68%,94% 56%,100% 56%,100% 100%); }
.pg-screen[data-terrain="trail"] .pg-ridge, .pg-screen:not([data-terrain]) .pg-ridge { height:46%; background:#080d08; opacity:1;
  clip-path: polygon(0 62%,12% 48%,26% 60%,38% 38%,52% 56%,66% 34%,80% 54%,92% 42%,100% 58%,100% 100%,0 100%); }
/* per-motif sky tint */
.pg-screen[data-terrain="urban"] { --pg-glow: rgba(150,172,210,.24); }
.pg-screen[data-terrain="parkland"] { --pg-glow: rgba(214,194,110,.32); }
/* parkland / community — a soft varied treeline (neighborhood, park, school runs) */
.pg-screen[data-terrain="parkland"] .pg-ridge { height:32%; background:#0a140c; opacity:1;
  clip-path: polygon(0% 100%,0% 76%,3% 64%,6% 58%,9% 64%,11% 76%,13% 62%,16% 52%,19% 60%,21% 74%,23% 64%,26% 56%,29% 62%,31% 74%,33% 58%,36% 46%,39% 56%,42% 72%,45% 62%,48% 54%,51% 60%,53% 74%,56% 60%,59% 50%,62% 58%,65% 72%,68% 62%,71% 54%,74% 60%,77% 74%,80% 60%,83% 50%,86% 58%,89% 72%,92% 62%,95% 56%,98% 62%,100% 70%,100% 100%); }
.pg-loadrow { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.92); font-size:15px; letter-spacing:.02em; text-shadow:0 1px 10px rgba(0,0,0,.7); }
.pg-loadrow .sp { width:22px; height:22px; border:3px solid rgba(255,255,255,.25); border-top-color:var(--brand-primary); border-radius:50%; animation:spin .9s linear infinite; }
.pg-cover { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:22px; padding:24px; text-align:center; }
.pg-banner { width:min(520px,86vw); background:#fdfcf8; border-radius:14px; padding:16px 20px; box-shadow:0 24px 64px rgba(0,0,0,.5); }
.pg-banner img { width:100%; height:auto; display:block; }
/* Treatment B — interactive 3D logo plate (cover.model3d). No white placard: transparent
   model-viewer floating on the branded ridge backdrop, a soft drop glow under it for lift. */
.pg-model { width:min(440px,82vw); height:min(460px,56vh);
  --poster-color:transparent; background:transparent; cursor:grab;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.32)); }
/* kill model-viewer's default load progress bar (the brief black line above the logo) */
.pg-model::part(default-progress-bar) { display:none; }
.pg-screen--3d .pg-cover { gap:14px; }
.pg-name { font-family:'Arial Narrow', system-ui, sans-serif; font-weight:700; font-size:clamp(30px,6vw,54px);
           line-height:.97; letter-spacing:.01em; text-transform:uppercase; color:#fff; max-width:12ch; text-shadow:0 2px 20px rgba(0,0,0,.6); }
.pg-meta { font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); text-shadow:0 1px 12px rgba(0,0,0,.7); }
.pg-cover .btn { color:var(--brand-ink,#10131a); background:var(--brand-primary,#ff7a1a); border:2px solid var(--brand-primary,#ff7a1a); }
/* Host pages style their own `#overlay .btn` (id+class specificity), which would otherwise
   beat `.pg-cover .btn` and leave the Play button unbranded. Re-assert the brand colours
   scoped by the host id (#overlay/#loading carry .pg-screen via the renderer) so the brand
   wins legitimately — no !important. Host keeps the pill shape (padding/radius/font-size). */
#overlay.pg-screen .pg-cover .btn, #loading.pg-screen .pg-cover .btn {
  color:var(--brand-ink,#10131a); background:var(--brand-primary,#ff7a1a); border-color:var(--brand-primary,#ff7a1a); }
.pg-cover .btn:hover { filter:brightness(1.06); }
@keyframes spin { to { transform: rotate(360deg); } }