/* ══ OIA WATCH · the launcher tile (TV promo, approved rev 8) ═════════════════
   OIA tokens verbatim (oakley/alliance/css/alliance.css:7-25); Montserrat for
   words, Orbitron for the countdown; flat gold CTA; the ICON ring the one rich
   element. It scrolls WITH its host page and sizes its frame (sc-oia-height). */
:root{--ink:#000;--ink-2:#07080A;--line:#1E2024;--line-2:#2C2F34;--ti:#9A9EA5;--bone:#F3F1EA;--gold:#B79E31;--gold-hi:#B79E31;--live:#E5383B;
  --sans:"Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--num:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--bone);font:500 15px/1.4 var(--sans);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ln-host{padding:12px}
.ln-sh{padding:6px 4px 14px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.ln-sh .k{display:block;font:700 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.ln-sh h2{margin:0;font:900 clamp(22px,4vw,40px)/1 var(--sans);text-transform:uppercase;letter-spacing:.01em}
.ln-sh .dot{color:var(--gold-ink)}
html[data-oia-title="0"] .ln-sh{display:none}
.ln{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.ln-host{padding:16px}.ln{grid-template-columns:1fr 1fr;gap:16px}}
.ln-wait{margin:0;padding:40px 12px;text-align:center;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ti)}
.ln-cd{position:relative;display:block;border:1px solid var(--line-2);background:#000;color:var(--bone);overflow:hidden}
.ln-cd:hover .ln-go,.ln-cd:focus-visible .ln-go{filter:brightness(1.08)}
.ln-cd:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ln-vis{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate}
@media (min-width:760px){.ln-vis{aspect-ratio:16/10}}
.ln-vis canvas{position:absolute;inset:0;width:100%;height:100%}
.ln-vis video{position:absolute;left:50%;top:34%;width:78%;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:.9;pointer-events:none}
.ln-vis .veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,0) 72%)}
@media (min-width:760px){.ln-vis .veil{background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.15) 46%,rgba(0,0,0,0) 60%)}}
.ln-top{position:absolute;top:12px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px}
.ln-f{display:inline-flex;align-items:center;height:24px;padding:0 9px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ln-lt{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;background:var(--live);color:#fff;font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ln-lt i{width:6px;height:6px;border-radius:50%;background:#fff}
.ln-mx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 14px 10px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px}
.ln-t{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ln-t img{width:clamp(64px,18vw,104px);height:clamp(64px,18vw,104px);object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.75))}
.ln-t b{font:800 clamp(9px,2.3vw,12px)/1.2 var(--sans);text-transform:uppercase;text-align:center;letter-spacing:.06em;min-height:2.4em;display:flex;align-items:flex-start;justify-content:center;max-width:100%}
.ln-c{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 0 30px;width:clamp(132px,34vw,190px)}
.ln-c .ring{position:absolute;left:50%;top:50%;width:clamp(132px,34vw,190px);height:clamp(132px,34vw,190px);transform:translate(-50%,-50%);z-index:-1}
.ln-cdn{font:800 30px/1 var(--num);color:var(--bone)}
.ln-s{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.ln-fin{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--gold);color:var(--gold-ink);font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.dgo{display:inline-block;width:.84em;text-align:center;font-style:normal}
.jw{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ti);white-space:nowrap}
.swt{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.swt-white{background:var(--bone)}
.swt-black{background:#000;box-shadow:0 0 0 1px var(--bone)}
.ln-go{display:flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 18px;background:var(--gold);color:#000;font:800 15px/1 var(--sans)}
.ln-go .pl{width:0;height:0;border-left:11px solid #000;border-top:7px solid transparent;border-bottom:7px solid transparent}
/* EP1 (Oct 17 2026): the mark is a BUTTON into "The tech behind this game" (tech-popup.js, [data-tech-door]) — the UA chrome is stripped so the mark does not change; it spans the row and reaches 44px */
.ln-pb{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 4px 2px;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ti);
  width:100%;min-height:44px;-webkit-appearance:none;appearance:none;margin:0;border:0;background:none;cursor:pointer}
.ln-pb:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.ln-pb img{height:13px;width:auto;opacity:.8}
@media (prefers-reduced-motion:reduce){.ln-lt i{animation:none}}