/* Finale CTA: device-aware. Default (no JS): both badges + browser link as plain text. */
:is(.finale,.hero) .fin-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px;max-width:100%}
:is(.finale,.hero) .fin-mobile,:is(.finale,.hero) .fin-qr,:is(.finale,.hero) .fin-web-desk{display:none}
:is(.finale,.hero) .fin-desk{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px}
:is(.finale,.hero) .fin-desk .badges{display:flex;flex-direction:column;gap:10px;align-items:center;margin:0}
:is(.finale,.hero) .fin-alt{margin:2px 0 0;font-size:15px}
:is(.finale,.hero) .fin-web{color:#f3e7c9;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,231,201,.55)}
:is(.finale,.hero) .fin-web:hover,:is(.finale,.hero) .fin-web:focus-visible{color:#fff;text-decoration-color:#e9c46a}
/* default/no-JS: browser link reads as plain text */
:is(.finale,.hero) [data-fin-device="default"] .fin-web{text-decoration:none}
:is(.finale,.hero) [data-fin-device="default"] .fin-desk .badges{flex-direction:row;flex-wrap:wrap;justify-content:center}
/* iPhone / Android: one big gold store button, small browser link */
:is(.finale,.hero) [data-fin-device="ios"] .fin-ios,:is(.finale,.hero) [data-fin-device="android"] .fin-android{display:block}
:is(.finale,.hero) [data-fin-device="ios"] .fin-desk,:is(.finale,.hero) [data-fin-device="android"] .fin-desk{display:none}
/* Desktop: QR + both badges */
:is(.finale,.hero) [data-fin-device="desktop"] .fin-qr{display:flex}
:is(.finale,.hero) [data-fin-device="desktop"] .fin-web-mobile{display:none}
:is(.finale,.hero) [data-fin-device="desktop"] .fin-web-desk{display:inline}
:is(.finale,.hero) .fin-qr{flex-direction:column;align-items:center;gap:8px;margin:0}
:is(.finale,.hero) .fin-qr svg{display:block;width:148px;height:148px;padding:6px;background:#fff;border-radius:10px;box-shadow:0 0 0 2px rgba(233,196,106,.7),0 8px 24px rgba(0,0,0,.45)}
:is(.finale,.hero) .fin-qr figcaption{color:#f3e7c9;font-size:15px;font-weight:600}
/* QR (92) matches the text block (caption 22 + 12 + badges 48 = 82) so no blank band sits above the caption.
   Hero + finale card rhythm: padding 16 all sides, QR-to-text gap 16, caption-to-badges 12 = badge gap; secondary row 16px under the card. */
.hero .fin-cta{margin-top:10px}
:is(.finale,.hero) .fin-cta{gap:16px}
.hero .fin-mobile .pill{box-shadow:0 10px 28px rgba(0,0,0,.5)}
:is(.finale,.hero) .hero-card{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;padding:16px;border-radius:var(--og-radius,16px);
 background:linear-gradient(180deg,rgba(34,27,19,.82),rgba(20,16,12,.88));-webkit-backdrop-filter:var(--og-blur,blur(14px));backdrop-filter:var(--og-blur,blur(14px));
 border:1px solid var(--og-rim,rgba(201,162,39,.4));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.55)}
:is(.finale,.hero) .hero-card .fin-qr{margin:0;flex:none}
:is(.finale,.hero) .hero-card .fin-qr svg{width:92px;height:92px;padding:4px;border-radius:8px;box-shadow:0 0 0 1px rgba(233,196,106,.6)}
:is(.finale,.hero) .hero-card-side{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
:is(.finale,.hero) .hero-card-cap{margin:0;color:#f3e7c9;font-size:18px;font-weight:700;line-height:1.25;text-align:left}
:is(.finale,.hero) .hero-card .badges{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;align-items:center;margin:0}
:is(.finale,.hero) .hero-card .badge,:is(.finale,.hero) .hero-card .badge img{display:block;height:48px;width:auto}
:is(.finale,.hero) [data-fin-device="default"] .hero-card{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
:is(.finale,.hero) [data-fin-device="default"] .hero-card-cap{display:none}
:is(.finale,.hero) .hero-alt{display:flex;align-items:center;justify-content:center;align-self:center;gap:12px;margin:0;font-size:15px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.hero .hero-watch{display:inline-flex;align-items:center;gap:6px;padding:0;min-height:44px;background:none;border:0;color:#f3e7c9;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,231,201,.55)}
.hero .hero-watch svg{width:12px;height:12px;fill:#e9c46a}
.hero .hero-watch:hover,.hero .hero-watch:focus-visible{color:#fff;text-decoration-color:#e9c46a}
:is(.finale,.hero) .hero-alt .fin-web{display:inline-flex;align-items:center;min-height:44px;padding:0;font-weight:600;text-decoration:underline}
:is(.finale,.hero) .hero-dot{color:rgba(243,231,201,.6)}
/* desktop pointer: drop the 44px touch height so the row hugs the card; trim the hero's bottom band */
@media (pointer:fine) and (min-width:761px){
 .hero .hero-watch,:is(.finale,.hero) .hero-alt .fin-web{min-height:24px}
 .hero .hero-copy{padding-bottom:clamp(20px,3vh,32px)}
}
/* desktop: centre the hero block at ~59% of the hero's height (owner 11-01 "still too low").
   align centre + padding-top 18% of the visible height shifts the block centre by 9% below the middle, at any height. */
@media (min-width:761px){
 .hero{align-items:center}
 .hero .hero-copy{padding:calc(18svh + 20px) 0 0;padding-top:calc(var(--app-h,100svh)*.18 + 20px)} /* +20 pad = block 10px lower (owner 11-01) */
}
/* phone: lift the stack off the bottom edge a little */
@media (max-width:760px){ .hero .hero-copy{padding-bottom:calc(48px + env(safe-area-inset-bottom))} }
@media (prefers-reduced-transparency:reduce){:is(.finale,.hero) .hero-card{background:var(--og-solid,#1a1510);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* "Watch a fight" trailer dialog (built by ui.js): portrait clip fits the viewport, Obsidian Glass rim as gk-modal.css */
dialog.trailer-dlg[open]{display:flex;flex-direction:column;align-items:center;gap:10px}
dialog.trailer-dlg{box-sizing:border-box;padding:12px;margin:auto;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow:hidden;
 border-radius:var(--og-radius,16px);border:2px solid var(--og-rim-hot,rgba(216,178,90,.8));
 background:linear-gradient(180deg,rgba(34,27,19,.94),rgba(20,16,12,.96));-webkit-backdrop-filter:var(--og-blur,blur(14px));backdrop-filter:var(--og-blur,blur(14px));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px var(--og-rim-soft,rgba(201,162,39,.16)),0 0 0 1px rgba(0,0,0,.6),0 30px 80px rgba(0,0,0,.75),0 0 40px rgba(201,162,39,.18);color:var(--og-ink,#f0e8d6)}
dialog.trailer-dlg::backdrop{background:rgba(6,4,10,.82);-webkit-backdrop-filter:blur(8px) saturate(80%);backdrop-filter:blur(8px) saturate(80%)}
dialog.trailer-dlg video{display:block;aspect-ratio:780/1688;width:auto;max-width:none;max-height:none;object-fit:contain;background:#000;border-radius:10px;
 height:min(calc(100vh - 100px),calc((100vw - 52px)*1688/780));height:min(calc(100svh - 100px),calc((100vw - 52px)*1688/780))}
dialog.trailer-dlg [data-close]{flex:none}
@media (prefers-reduced-transparency:reduce){dialog.trailer-dlg{background:var(--og-solid,#1a1510);-webkit-backdrop-filter:none;backdrop-filter:none}dialog.trailer-dlg::backdrop{background:rgba(6,4,10,.92);backdrop-filter:none;-webkit-backdrop-filter:none}}