/* ══ OIA SECTIONS — the ONE stylesheet for the East Regional's live sections ══
   Loaded by BOTH:
     · oakley/east-regional/live.html (the gated page), before its own <style>
     · embed/oia/{live,schedule,standings,bracket,alliance}.html (public embeds)
   so the embed of a section IS that section, not a second drawing of it
   (Carlos, Oct 10: "your embeds look nothing like what's actually live on that
   page"). Everything from ":root" to the reduced-motion line was cut, in order
   and byte for byte, out of live.html's <style> (Oct 10 2026): tokens, base,
   type roles, the pulse, section heads, the live cards and plate, the slate
   rows, the pools, the bracket, and the sections' share of the responsive
   block. live.html keeps everything else (bar, hero, film, watch, sheets).
   It lives under /embed/ because /oakley/* is behind the pitch gate and an
   embed must load without it. Only public assets are referenced here.
   ⛔ scripts/test-oia-section-embeds.js renders the page section and the embed
      side by side (Day and Night) and fails on any drift between them.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#000;
  --ink-2:#07080A;
  --gun:#54565A;
  --line:#1E2024;
  --line-2:#2C2F34;
  --ti:#9A9EA5;
  --bone:#F3F1EA;
  --gold:#B79E31;
  --gold-hi:#B79E31;
  --live:#E5383B;
  --wide:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
  --chy:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
  --text:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
  --g:clamp(16px,4.2vw,64px);
  --max:1360px;
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--bone);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 16px/1.55 var(--text);background:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g);position:relative}

/* the field grid: a faint yard-line lattice behind everything */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/96px 96px,
    linear-gradient(0deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/96px 96px;
  -webkit-mask:radial-gradient(120% 80% at 30% 0%,#000 30%,transparent 80%);
          mask:radial-gradient(120% 80% at 30% 0%,#000 30%,transparent 80%)}
main,header,footer{position:relative;z-index:1}

/* type roles */
.chy{font-family:var(--chy);text-transform:uppercase;letter-spacing:.22em;font-weight:500}
.wide{font-family:var(--wide);text-transform:uppercase;font-weight:700;letter-spacing:.01em}
.dot{color:var(--gold-ink)}

.pulse{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(229,56,59,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,56,59,.55)}70%{box-shadow:0 0 0 9px rgba(229,56,59,0)}100%{box-shadow:0 0 0 0 rgba(229,56,59,0)}}

/* ── Section heads ────────────────────────────────────────── */
.sec{padding:clamp(56px,7vw,104px) 0;border-bottom:1px solid var(--line)}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.sh .k{font:500 11px/1 var(--chy);letter-spacing:.32em;color:var(--gold-ink);text-transform:uppercase;margin-bottom:16px;display:block}
.sh h2{margin:0;font:700 clamp(24px,3.6vw,48px)/1 var(--wide);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
/* a designed phrase never breaks inside (scripts/test-intentional-line-breaks.js: no one-word last line) */
.sh h2 .keep{white-space:nowrap}
.sh .aside{font:500 11px/1.9 var(--chy);letter-spacing:.24em;color:var(--ti);text-transform:uppercase;text-align:right}
.sh .aside span{color:var(--gold-ink)}

/* ── Live cards: crest, badge, crest — the lens is the score plate ── */
.air{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{position:relative;display:block;border:1px solid var(--line-2);overflow:hidden;transition:border-color .3s;
  /* stage-lit: graphite studio backdrop, each team's colour as light from its own side, a gold floor glow */
  background:
    radial-gradient(55% 80% at 4% 45%, color-mix(in srgb,var(--a) 34%,transparent), transparent 70%),
    radial-gradient(55% 80% at 96% 45%, color-mix(in srgb,var(--b) 34%,transparent), transparent 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(183,158,49,.16), transparent 70%),
    linear-gradient(180deg,#1a1b1e 0%,#0a0b0d 55%,#050506 100%)}
.card:hover{border-color:rgba(183,158,49,.6)}
.card{background-size:140% 140%,140% 140%,100% 100%,100% 100%;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{0%{background-position:0% 40%,100% 60%,50% 100%,0 0}100%{background-position:18% 58%,82% 42%,50% 100%,0 0}}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.card{animation:none}}
.card::before{content:"";position:absolute;top:-20%;left:44%;width:90px;height:160%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(226,199,102,.30) 45%,rgba(226,199,102,.38) 50%,rgba(226,199,102,.30) 55%,transparent);mix-blend-mode:screen;filter:blur(2px);z-index:1;pointer-events:none}
.card-aura{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.card::after{z-index:1}
.card .stage,.card .plate,.card .foot{position:relative;z-index:2}
.card .stage{position:relative;aspect-ratio:2.9/1;margin-top:18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 7%}
.card .top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;z-index:2}
.lv-chip{display:inline-flex;align-items:center;gap:7px;background:var(--live);color:#fff;padding:6px 10px;font:600 10px/1 var(--chy);letter-spacing:.24em}
.lv-chip .pulse{background:#fff;animation:none;width:6px;height:6px}
.fld{padding:6px 10px;border:1px solid var(--line-2);background:rgba(0,0,0,.6);font:500 10px/1 var(--chy);letter-spacing:.24em;color:var(--gold-ink);text-transform:uppercase}
.coin{position:relative;isolation:isolate;width:clamp(96px,11vw,150px);aspect-ratio:1;background:center/contain no-repeat;justify-self:center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
/* no shape, no border: a soft pool of light so even a navy crest reads on graphite */
.coin::before{content:"";position:absolute;inset:-8%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent 70%)}

.vs{width:clamp(80px,7vw,92px)}
/* the lens score plate */
.plate{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;margin:0 16px;
  border:1px solid var(--line-2);border-left:4px solid var(--a);border-right:4px solid var(--b);
  background:linear-gradient(90deg,color-mix(in srgb,var(--a) 42%,#0b0c0e),#0b0c0e 34%,#0b0c0e 66%,color-mix(in srgb,var(--b) 42%,#0b0c0e));}
.plate::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(226,199,102,.8),transparent)}
.plate .t{display:flex;align-items:center;gap:14px;padding:0 18px}
.plate .t.b{justify-content:flex-end}
.plate .t b{font:600 15px/1 var(--chy);letter-spacing:.16em;text-transform:uppercase}
.plate .t .n{font:700 34px/1 var(--wide)}
.plate .mid{text-align:center;padding:0 18px;height:100%;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);background:#07080a}
.plate .mid .c{font:700 15px/1 var(--wide);color:var(--gold-ink)}
.plate .mid .h{font:500 9px/1 var(--chy);letter-spacing:.22em;color:var(--ti);margin-top:6px;text-transform:uppercase}
.card .foot{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 18px;border-top:1px solid var(--line);margin-top:14px}
.card .foot span{font:500 11px/1 var(--chy);letter-spacing:.26em;color:var(--ti);text-transform:uppercase}
.card .foot .w{display:inline-flex;align-items:center;gap:10px;color:var(--gold-ink)}
.poss{display:inline-block;width:12px;height:7px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 10px rgba(226,199,102,.7)}

/* ── Slate: broadcast rows ─────────────────────────────── */
/* the slate's day switch — one day at a time (28 stacked rows ran 5,900px on a phone, against the 6,000px a
   host's listener clamps at); live.html's .seg idiom: one bordered box, hairline dividers, the chosen day = ink
   fill + gold bottom edge, 44px keys. Never a pill. */
.dsw{display:inline-flex;max-width:100%;margin:0 0 18px;border:1px solid var(--line-2)}
.dsw button{height:44px;padding:0 16px;border:0;border-left:1px solid var(--line-2);background:transparent;color:var(--ti);font:600 11px/1 var(--chy);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.dsw button:first-child{border-left:0}
.dsw button[aria-pressed="true"]{background:var(--line);color:var(--bone);box-shadow:inset 0 -2px 0 var(--gold)}
.day[hidden],.rows[hidden]{display:none}
.day{display:flex;align-items:center;gap:18px;margin:0 0 16px;font:500 12px/1 var(--chy);letter-spacing:.3em;text-transform:uppercase}
.day .ct{border:1px solid rgba(183,158,49,.45);color:var(--gold-ink);padding:6px 10px;font-size:10px}
.day::after{content:"";flex:1;height:1px;background:var(--line-2)}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:120px minmax(0,1fr) 40px minmax(0,1fr) 150px 170px;align-items:center;gap:16px;min-height:78px;padding:0 20px;border:1px solid var(--line);background:rgba(10,11,13,.8)}
.row.live{border-color:rgba(229,56,59,.45);background:linear-gradient(90deg,rgba(229,56,59,.07),rgba(10,11,13,.8) 40%)}
.row .when{white-space:nowrap;font:700 18px/1 var(--wide);color:var(--gold-ink)}
.row .when small{font:500 10px/1 var(--chy);letter-spacing:.2em;color:var(--ti);margin-left:6px}
.row .when.lv{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--chy);letter-spacing:.24em;color:#FF5A5D;text-transform:uppercase}
.tm2{display:flex;align-items:center;gap:14px;min-width:0}
.tm2 .mc{flex:none;position:relative;isolation:isolate;width:44px;height:36px;background:center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.tm2 .mc::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 72%)}
/* no crest on file yet: the team's initials on its colour (POD1) — the same slot, never an empty box */
.tm2 .mc[data-ini]{display:grid;place-items:center;border-radius:4px;background:var(--tc);color:#fff;font:700 11px/1 var(--wide);letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.55);overflow:hidden}
.tm2 .mc[data-ini="3"]{font-size:8px;letter-spacing:0}.tm2 .mc[data-ini="4"]{font-size:6px;letter-spacing:0}

.tm2 b{display:block;font:500 16px/1.1 var(--chy);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm2 small{display:block;margin-top:5px;font:500 11px/1 var(--chy);letter-spacing:.16em;color:var(--ti)}
/* SCH1 (Oct 18 2026): the name wrapper takes the room and may shrink, so a long name ellipsises INSIDE the cell
   and the score never leaves it (it used to size to its content and push the score into the "@" / the field) */
.tm2>span:not(.sc):not(.mc){flex:1 1 auto;min-width:0}
.tm2 .sc{flex:none;margin-left:12px;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;font:700 22px/1 var(--wide)}
.tm2 .sc.l{color:var(--gun)}
.row .v{font:400 11px/1 var(--chy);letter-spacing:.3em;color:var(--gun);text-align:center}
.row .where{font:500 11px/1.5 var(--chy);letter-spacing:.2em;text-transform:uppercase}
.row .where span{display:block;color:var(--ti);font-size:10px}
.act{justify-self:end;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;font:600 11px/1 var(--chy);letter-spacing:.26em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--ti)}
.act.gold{background:var(--gold);color:#000;border-color:var(--gold)}
.act.final{border:0;color:var(--ti);padding:0}

/* ── Pools ── */
/* a pod takes the width it has: ONE pod = one full-width table (Oct 11 2026 — a fixed two-column grid put the
   East's single pod in a half column, 364px at an 820px host, and clipped 6 of 8 names); two or more pods sit
   side by side only where each gets 420px, else they stack */
.pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.pool{border:1px solid var(--line);background:rgba(10,11,13,.8)}
.pool h3{margin:0;padding:18px 22px;border-bottom:1px solid var(--line-2);font:700 16px/1 var(--wide);letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.pool h3 span{font:500 10px/1 var(--chy);letter-spacing:.26em;color:var(--ti)}
.st{display:grid;grid-template-columns:28px minmax(0,1fr) 44px 44px 60px;align-items:center;gap:8px;padding:14px 22px;border-bottom:1px solid var(--line)}
.st.hd{padding:12px 22px;font:500 10px/1 var(--chy);letter-spacing:.26em;color:var(--ti);text-transform:uppercase}
.st .rk{font:700 13px/1 var(--wide);color:var(--ti)}
.st .num{font:700 15px/1 var(--wide);text-align:right}
.st.hd span:nth-child(n+3){text-align:right}
.st.adv .rk{color:var(--gold-ink)}
.st.cut{border-bottom:1px solid var(--gold);position:relative}
.st.cut::after{content:"Advances";position:absolute;right:22px;bottom:-9px;background:#000;padding:0 8px;font:500 9px/18px var(--chy);letter-spacing:.3em;color:var(--gold-ink);text-transform:uppercase}
.tb{font:500 12px/1.5 var(--chy);letter-spacing:.14em;color:var(--ti);margin:16px 0 0;text-transform:uppercase}

/* ── the bracket: lifted from our playoff/Chargers bracket (chargers-invitational/css), themed for the event ── */
@keyframes pulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.cw-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 0.6rem; letter-spacing: 1.8px; text-transform: uppercase; padding: 4px 10px; border-radius: 5px; color: var(--chip-text); border: 1px solid color-mix(in srgb, var(--chip) 55%, transparent); background: color-mix(in srgb, var(--chip) 16%, transparent); }
.cw-chip .b { width: 6px; height: 10px; background: var(--chip); clip-path: polygon(58% 0px, 0px 62%, 38% 62%, 20% 100%, 100% 34%, 55% 34%); }
.cw-chip.powder { --chip: var(--cw-powder); --chip-text: var(--cw-powder-text); }
.cw-chip.gold { --chip: var(--cw-gold); --chip-text: var(--cw-gold-text); }
.cw-chip.blue { --chip: var(--cw-blue); --chip-text: var(--cw-blue-text); }
.cw-chip.navy { --chip: #33619e; --chip-text: var(--cw-navy-text); }
.cw-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 16px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: none; border-radius: 14px 14px 0px 0px; padding: 20px 22px; background: radial-gradient(ellipse 75% 120% at 90% -10%, color-mix(in srgb, var(--cw) 42%, transparent) 0%, transparent 60%),
        linear-gradient(112deg, color-mix(in srgb, var(--cw) 68%, #030910) 0%, color-mix(in srgb, var(--cw) 26%, #050d18) 44%, #050c16 100%); }
.cw-hero::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; background: linear-gradient(112deg, transparent 58%, color-mix(in srgb, var(--cw-hi, var(--cw)) 26%, transparent) 58.2%, color-mix(in srgb, var(--cw-hi, var(--cw)) 26%, transparent) 66%, transparent 66.2%); }
.cw-hero .bolt { width: 42px; flex: 0 0 auto; transform: rotate(-14deg); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cw-hi, var(--cw)) 80%, transparent)); }
.cw-hero .k { font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(244, 247, 251, 0.72); }
.cw-hero .n { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1; text-transform: uppercase; color: var(--white); text-shadow: rgba(0, 0, 0, 0.6) 0px 3px 18px; }
.cw-hero .n em { font-style: inherit; color: var(--cw-em, var(--white)); }
.cw-hero .sub { margin-top: 5px; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(244, 247, 251, 0.66); }
.cw-hero.powder { --cw: var(--cw-powder); --cw-hi: #6cc4f0; --cw-em: #9ddcff; }
.cw-hero.gold { --cw: #b8890a; --cw-hi: var(--cw-gold); --cw-em: var(--cw-gold); }
.cw-hero.blue { --cw: var(--cw-blue); --cw-hi: #4d94dd; --cw-em: #8fc1f2; }
.cw-hero.navy { --cw: var(--cw-navy); --cw-hi: #4d7cb8; --cw-em: #a6c4e8; }
.bracket-block .pbx-wrap { border-radius: 0px 0px 14px 14px; }
.pbx-consolation { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-subtle); }
.pbx-consolation .c-label { font-family: var(--font-body); font-weight: 700; font-size: 0.66rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.pbx-consolation .c-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px){.pbx-consolation .c-grid { grid-template-columns: 1fr 1fr; }}

.rv-scope .pbx-vs.rv.rv-in { opacity: 1; transform: none; transition: opacity 0.85s ease-out var(--rvd, 0ms), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--rvd, 0ms); }
.rv-scope .pbx-wires path { stroke-dasharray: 3200; stroke-dashoffset: 3200; }
.rv-scope .pbx-wires.wires-in path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(0.16, 1, 0.3, 1); }
.pbx-share { cursor: pointer; }
.pbx-share:hover, .pbx-share:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 22px rgba(0,0,0,0.3); outline: none; }
@media print{.cw-hero { padding: 12px 18px; }}
@media print{.cw-hero .n { font-size: 1.4rem; }}
@media print{.cw-hero, .pbx-wrap, .pbx-vs, .pbx-side, .tt-brand { print-color-adjust: exact; }}
.pm-bw .pbx-wrap { background: rgb(255, 255, 255); border-color: rgb(201, 206, 214); }
.pm-bw .pbx-wrap::before, .pm-bw .pbx-atmo { display: none; }
.pm-bw .pbx-vs { background: rgb(255, 255, 255); border: 1px solid rgb(106, 113, 128); box-shadow: none; }
.pm-bw .pbx-side, .pm-bw .pbx-side:not(:first-child) { background: rgb(255, 255, 255); }
.pm-bw .pbx-vs .pbx-side.pbx-tbd, .pm-bw .pbx-vs .pbx-side.pbx-tbd:not(:first-child) { background: rgb(242, 244, 247); }
.pm-bw .pbx-side::before { display: none; }
.pm-bw .pbx-vname { color: rgb(16, 21, 29); text-shadow: none; }
.pm-bw .pbx-vrec { color: rgb(51, 64, 79); background: rgb(232, 235, 239); }
.pm-bw .pbx-vtbd { color: rgb(90, 100, 114); }
.pm-bw .pbx-vdiv { color: rgb(106, 113, 128); }
.pm-bw .pbx-vs-seam { background: linear-gradient(transparent, rgb(154, 162, 173), transparent); }
.pm-bw .pbx-vs-badge { background: rgb(255, 255, 255); border-color: rgb(106, 113, 128); color: rgb(16, 21, 29); box-shadow: none; }
.pm-bw .pbx-meta { color: rgb(51, 64, 79); border-top-color: rgb(215, 219, 225); }
.pm-bw .pbx-meta-gnum { color: rgb(16, 21, 29); }
.pm-bw .pbx-champ-tag { color: rgb(51, 64, 79); border-color: rgb(154, 162, 173); }
.pm-bw .pbx-wires path { stroke: rgb(106, 113, 128); }
.pm-bw .pbx-division, .pm-bw .pbx-round-label { color: rgb(90, 100, 114); }
.pm-bw .pbx-consolation { border-top-color: rgb(215, 219, 225); }
.pm-bw .pbx-consolation .c-label { color: rgb(90, 100, 114); }
.pm-bw .cw-hero { background: rgb(255, 255, 255); border-color: rgb(201, 206, 214); }
.pm-bw .cw-hero::before { display: none; }
.pm-bw .cw-hero .n, .pm-bw .cw-hero .n em { color: rgb(16, 21, 29); text-shadow: none; }
.pm-bw .cw-hero .k, .pm-bw .cw-hero .sub { color: rgb(90, 100, 114); }
.pm-bw .cw-hero .bolt svg polygon { fill: rgb(16, 21, 29); stroke: rgb(106, 113, 128); }
.pm-bw .pbx-frame-powder, .pm-bw .pbx-frame-gold, .pm-bw .pbx-frame-blue, .pm-bw .pbx-frame-navy { background: rgb(255, 255, 255); border: 1px solid rgb(106, 113, 128); }
.pm-bw .pbx-foot { border-top-color: rgb(215, 219, 225); }
.pm-bw .pbx-sc { filter: brightness(0); opacity: 0.75; }
.pm-bw .pbx-pb { color: rgb(90, 100, 114); }
.pm-clean .pbx-vrec, .pm-clean .pbx-vdiv, .pm-clean .pbx-division { display: none; }
.pm-clean .pbx-meta span:not(.pbx-meta-gnum):not(.pbx-champ-tag) { display: none; }
.pm-clean .pbx-consolation .c-label { letter-spacing: 2px; }
@media print{.pbx-consolation { break-inside: avoid; }}
.pbx-wrap { position: relative; background: var(--wrap-grad); border: 1px solid var(--border-subtle); border-radius: 0px; overflow: hidden; }
.pbx-wrap::before { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.28) 100%),
        repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, var(--grid-line-soft) 0 1px, transparent 1px 72px); }
.pbx-atmo { position: absolute; inset: 0px; pointer-events: none; z-index: 0; overflow: hidden; }
.pbx-atmo-glow { position: absolute; left: 50%; top: 42%; width: 130%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(178, 203, 238, 0.086) 0%, rgba(178, 203, 238, 0.035) 45%, transparent 72%); animation: 11s ease-in-out 0s infinite alternate none running pbx-breathe; }
.pbx-atmo-shield { position: absolute; left: 50%; top: 46%; width: min(42%, 300px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%) rotate(-14deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23ffffff' points='58,0 0,62 38,62 20,100 100,34 55,34'/%3E%3C/svg%3E") center center / contain no-repeat; opacity: 0.06; }
@keyframes pbx-breathe { 
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){.pbx-atmo-glow { animation: auto ease 0s 1 normal none running none; opacity: 0.8; }}
.pbx-head, .pbx-tabs, .pbx-body, .pbx-foot, .pbx-state { position: relative; z-index: 1; }
.pbx-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 18px; border-bottom: 1px solid var(--border-subtle); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--league-solid, var(--league-primary)) 18%, transparent) 0%, transparent 62%); }
.pbx-head .pbx-bar { width: 4px; align-self: stretch; min-height: 34px; border-radius: 4px; background: linear-gradient(180deg, var(--league-solid, var(--league-primary)), color-mix(in srgb, var(--league-solid, var(--league-primary)) 50%, transparent)); }
.pbx-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: var(--league-primary); }
.pbx-head h1 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--text-primary); line-height: 1.04; letter-spacing: 0.4px; text-transform: uppercase; }
.pbx-tabs { padding: 13px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--row-hover); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pbx-tabs::-webkit-scrollbar { display: none; }
.pbx-tab { flex: 0 0 auto; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); background: var(--pill-bg); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; min-height: 38px; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.pbx-tab:hover { border-color: color-mix(in srgb, var(--league-primary) 50%, transparent); color: var(--text-primary); }
.pbx-tab.active { color: var(--pill-ink, #000); background: var(--league-solid, var(--league-primary)); border-color: var(--league-solid, var(--league-primary)); }
.pbx-body { padding: 18px; }
.pbx-division { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 12px; }
.pbx-rounds { position: relative; display: flex; gap: 30px; overflow-x: auto; padding-bottom: 10px; align-items: stretch; touch-action: pan-x pan-y; }
.pbx-wires { position: absolute; left: 0px; top: 0px; pointer-events: none; z-index: 0; }
.pbx-wires path { stroke: var(--wire); stroke-width: 2; fill: none; }
.pbx-round { flex: 1 1 0px; min-width: 256px; display: flex; flex-direction: column; gap: 18px; justify-content: space-around; position: relative; z-index: 1; }
.pbx-round-label { font-family: var(--font-body); font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-muted); text-align: center; margin-bottom: 2px; }
.pbx-vs { --vs-cut: 14px; position: relative; background: var(--vs-void); border: 1px solid var(--border-subtle); border-radius: 0px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 22px; }
.pbx-vs-body { position: relative; display: flex; align-items: stretch; min-height: 58px; }
.pbx-vdiv { font-family: var(--font-display); font-size: 0.58rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: color-mix(in srgb, var(--vs-ink) 52%, transparent); padding: 5px 12px 0px; line-height: 1; }
.pbx-side { position: relative; flex: 1 1 50%; min-width: 0px; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; background: linear-gradient(115deg,
        color-mix(in srgb, var(--vs-tc, var(--text-muted)) 86%, var(--vs-void)) 0%,
        color-mix(in srgb, var(--vs-tc, var(--text-muted)) 55%, var(--vs-void)) 100%); clip-path: polygon(0 0, 100% 0, calc(100% - var(--vs-cut)) 100%, 0 100%); transition: filter 0.3s; }
.pbx-side:not(:first-child) { margin-left: calc(-1 * var(--vs-cut)); padding: 9px 12px 9px 10px; flex-direction: row-reverse; text-align: right; background: linear-gradient(-115deg,
        color-mix(in srgb, var(--vs-tc, var(--text-muted)) 86%, var(--vs-void)) 0%,
        color-mix(in srgb, var(--vs-tc, var(--text-muted)) 55%, var(--vs-void)) 100%); clip-path: polygon(var(--vs-cut) 0, 100% 0, 100% 100%, 0 100%); }
.pbx-side::before { content: ""; position: absolute; inset: 0px 0px 50%; background: linear-gradient(rgba(255, 255, 255, 0.07), transparent); pointer-events: none; }
.pbx-side > * { position: relative; z-index: 2; }
.pbx-vs-seam { position: absolute; left: 50%; top: -6%; bottom: -6%; width: 2px; transform: translateX(-50%) skewX(-12deg); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--vs-ink) 45%, transparent), transparent); z-index: 3; pointer-events: none; }
.pbx-vs-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(10, 13, 20); border: 1.5px solid rgba(255, 255, 255, 0.28); color: rgb(244, 247, 251); font-family: var(--font-display); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; box-shadow: rgba(0, 0, 0, 0.45) 0px 2px 6px; }
.pbx-vs-badge.pbx-vs-score { width: auto; min-width: 74px; height: 28px; border-radius: 999px; gap: 7px; padding: 0px 11px; font-family: var(--font-stats); font-variant-numeric: tabular-nums; background: linear-gradient(rgb(16, 20, 29) 0%, rgb(8, 11, 17) 100%); border-color: rgba(255, 255, 255, 0.34); box-shadow: rgba(0, 0, 0, 0.6) 0px 3px 10px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; }
.pbx-cs { font-size: 1.05rem; font-weight: 800; line-height: 1; color: rgb(244, 247, 251); letter-spacing: 0.2px; }
.pbx-vs-body:has(.pbx-vs-score) .pbx-side:first-child { padding-right: 58px; }
.pbx-vs-body:has(.pbx-vs-score) .pbx-side:not(:first-child) { padding-left: 58px; }
.pbx-cs-sep { flex: 0 0 auto; font-family: var(--font-display); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.6px; line-height: 1; color: rgba(255, 255, 255, 0.42); position: relative; top: 0.5px; }
.pbx-done .pbx-cs-win { color: var(--win); }
.pbx-done .pbx-cs-lose { color: rgba(244, 247, 251, 0.55); font-weight: 700; }
.pbx-live .pbx-vs-badge.pbx-vs-score { border-color: color-mix(in srgb, var(--live) 60%, rgba(255,255,255,0.34)); }
.pbx-vseed { flex: 0 0 auto; min-width: 0px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; line-height: 1; color: color-mix(in srgb, var(--vs-ink) 80%, transparent); background: color-mix(in srgb, var(--vs-ink) 10%, transparent); border-radius: 4px; padding: 2px 3px; }
.pbx-vname { flex: 1 1 auto; min-width: 0px; font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.05; color: var(--vs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.55) 0px 1px 2px; }
.pbx-vnamecol { flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.pbx-side:not(:first-child) .pbx-vnamecol { align-items: flex-end; text-align: right; }
.pbx-vnamecol .pbx-vname { flex: 0 0 auto; max-width: 100%; }
.pbx-vrec { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.8px; line-height: 1; color: rgba(244, 247, 251, 0.85); background: rgba(6, 10, 16, 0.92); padding: 2px 6px; border-radius: 3px; align-self: flex-start; }
.pbx-side:not(:first-child) .pbx-vrec { align-self: flex-end; }
.pbx-side.pbx-tbd { background: linear-gradient(115deg,
        color-mix(in srgb, var(--text-muted) 14%, var(--vs-void)) 0%, var(--vs-void) 85%); }
.pbx-side.pbx-tbd:not(:first-child) { background: linear-gradient(-115deg,
        color-mix(in srgb, var(--text-muted) 14%, var(--vs-void)) 0%, var(--vs-void) 85%); }
.pbx-vtbd { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 1.6px; text-transform: uppercase; color: color-mix(in srgb, var(--vs-ink) 55%, transparent); }
.pbx-done .pbx-side.pbx-lose { filter: saturate(0.35) brightness(0.72); }
.pbx-live { border-color: color-mix(in srgb, var(--live) 55%, transparent); animation: 2.4s ease-in-out 0s infinite normal none running pbx-live-pulse; }
@keyframes pbx-live-pulse { 
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--live) 30%, transparent), 0 8px 22px rgba(0,0,0,0.18); }
  50% { box-shadow: 0 0 4px color-mix(in srgb, var(--live) 10%, transparent), 0 8px 22px rgba(0,0,0,0.18); }
}
@media (prefers-reduced-motion: reduce){.pbx-live { animation: auto ease 0s 1 normal none running none; }}
.pbx-champ { border-color: color-mix(in srgb, var(--bracket-gold) 60%, transparent); animation: 2.8s ease-in-out 0s infinite normal none running pbx-champ-halo; }
@keyframes pbx-champ-halo { 
  0%, 100% { box-shadow: 0 0 26px color-mix(in srgb, var(--bracket-gold) 45%, transparent), 0 8px 22px rgba(0,0,0,0.18); }
  50% { box-shadow: 0 0 12px color-mix(in srgb, var(--bracket-gold) 20%, transparent), 0 8px 22px rgba(0,0,0,0.18); }
}
@media (prefers-reduced-motion: reduce){.pbx-champ { animation: auto ease 0s 1 normal none running none; box-shadow: 0 0 18px color-mix(in srgb, var(--bracket-gold) 30%, transparent), 0 8px 22px rgba(0,0,0,0.18); }}
.pbx-champ-lights { position: relative; overflow: hidden; display: flex; align-items: baseline; gap: 12px; padding: 10px 14px 11px; border-top: 1px solid color-mix(in srgb, var(--bracket-gold) 45%, transparent); background: linear-gradient(115deg,
        color-mix(in srgb, var(--bracket-gold) 30%, #0a0d14) 0%,
        color-mix(in srgb, var(--bracket-gold) 12%, #0a0d14) 55%,
        #0a0d14 100%); }
.pbx-champ-lights::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 4px; background: var(--vs-tc, var(--bracket-gold)); }
.pbx-champ-lights::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 34%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent); animation: 3.2s ease-in-out 0s infinite normal none running pbx-champ-sweep; pointer-events: none; }
@keyframes pbx-champ-sweep { 
  0% { left: -40%; }
  60%, 100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce){.pbx-champ-lights::after { animation: auto ease 0s 1 normal none running none; display: none; }}
.pbx-champ-lights-word { font-family: var(--font-display); font-weight: 800; font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--bracket-gold); white-space: nowrap; }
.pbx-champ-lights-team { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1; color: rgb(255, 255, 255); text-shadow: 0 0 14px color-mix(in srgb, var(--bracket-gold) 65%, transparent), 0 1px 2px rgba(0,0,0,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbx-champ .pbx-side.pbx-win .pbx-vseed { background: color-mix(in srgb, var(--bracket-gold) 30%, transparent); color: var(--bracket-gold); }
.pbx-live-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 800; font-size: 0.6rem; letter-spacing: 1.4px; text-transform: uppercase; color: rgb(255, 255, 255); background: color-mix(in srgb, var(--live) 85%, #000); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.pbx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(255, 255, 255); animation: 1.4s ease-in-out 0s infinite normal none running pbx-live-dot; }
@keyframes pbx-live-dot { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce){.pbx-live-dot { animation: auto ease 0s 1 normal none running none; }}
.pbx-champ-tag { font-family: var(--font-display); font-weight: 800; font-size: 0.6rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--bracket-gold); border: 1px solid color-mix(in srgb, var(--bracket-gold) 55%, transparent); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.pbx-frame-gold, .pbx-frame-silver, .pbx-frame-powder, .pbx-frame-blue, .pbx-frame-navy { border: 1px solid transparent; }
.pbx-frame-gold { background: linear-gradient(var(--vs-void), var(--vs-void)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--gold) 78%, transparent),
            color-mix(in srgb, var(--gold) 18%, transparent) 45%,
            color-mix(in srgb, var(--gold) 60%, var(--vs-ink)) 100%) border-box; }
.pbx-frame-silver { background: linear-gradient(var(--vs-void), var(--vs-void)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--silver) 85%, transparent),
            color-mix(in srgb, var(--silver) 22%, transparent) 45%,
            color-mix(in srgb, var(--silver) 45%, var(--vs-ink)) 100%) border-box; }
.pbx-frame-powder { background: linear-gradient(var(--vs-void), var(--vs-void)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--powder) 90%, white),
            color-mix(in srgb, var(--powder) 30%, transparent) 45%,
            color-mix(in srgb, #6cc4f0 75%, var(--vs-ink)) 100%) border-box; }
.pbx-frame-blue { background: linear-gradient(var(--vs-void), var(--vs-void)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--cw-blue) 92%, white),
            color-mix(in srgb, var(--cw-blue) 32%, transparent) 45%,
            color-mix(in srgb, #4d94dd 70%, var(--vs-ink)) 100%) border-box; }
.pbx-frame-navy { background: linear-gradient(var(--vs-void), var(--vs-void)) padding-box,
        linear-gradient(135deg, color-mix(in srgb, #4d7cb8 80%, transparent),
            color-mix(in srgb, var(--navy) 55%, transparent) 45%,
            color-mix(in srgb, var(--cw-navy-text) 60%, var(--vs-ink)) 100%) border-box; }
.pbx-meta { padding: 8px 12px; border-top: 1px solid var(--border-subtle); font-size: 0.8rem; font-weight: 600; color: rgba(244, 247, 251, 0.92); display: flex; gap: 10px; flex-wrap: wrap; letter-spacing: 0.3px; }
.pbx-meta-gnum { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-secondary); }
.pbx-meta span { white-space: nowrap; }
.pbx-badge-live { color: var(--live); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
.cw-powder { --league-primary: var(--cw-powder-text); --league-solid: var(--powder); --pill-ink: #ffffff; }
.cw-gold { --league-primary: var(--gold); --league-solid: var(--gold); --pill-ink: #10141c; }
.cw-blue { --league-primary: var(--cw-blue-text); --league-solid: var(--cw-blue); --pill-ink: #ffffff; }
.cw-navy { --league-primary: var(--cw-navy-text); --league-solid: var(--navy); --pill-ink: #ffffff; }
@media (max-width: 640px){.pbx-head h1 { font-size: 1.32rem; }}
@media (max-width: 640px){.pbx-head, .pbx-tabs, .pbx-body { padding-left: 14px; padding-right: 14px; }}
@media (max-width: 640px){.pbx-round { min-width: 224px; }}
html[data-theme="light"] .pbx-wrap::before { background: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, var(--grid-line-soft) 0 1px, transparent 1px 72px); }
html[data-theme="light"] .pbx-atmo-glow { display: none; }
html[data-theme="light"] .pbx-atmo-shield { opacity: 0.05; filter: invert(1); }
.pbx-vs.pbx-mine { border-color: rgba(255, 194, 14, 0.8); box-shadow: rgba(255, 194, 14, 0.6) 0px 0px 0px 1px, rgba(255, 194, 14, 0.28) 0px 0px 22px, rgba(0, 0, 0, 0.18) 0px 8px 22px; }
.pbx-vs.pbx-path { border-color: rgba(255, 194, 14, 0.4); }
.pbx-wires path.w-hot { stroke: var(--gold); stroke-width: 3; }
.pbx-foot { padding: 0 18px; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid var(--border-subtle); }
.pbx-foot a, .pbx-foot .pbx-mark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
/* 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 reaches 44px (the foot's height is the mark's now) */
button.pbx-mark { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
button.pbx-mark:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pbx-pb { font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); opacity: 0.8; }
.pbx-sc { height: 15px; width: auto; filter: brightness(0) invert(1); opacity: 0.75; }
.pbx-foot a:hover .pbx-sc { opacity: 1; }
html[data-theme="light"] .pbx-sc { filter: brightness(0); opacity: 0.65; }
@media print{.rv-scope .pbx-vs.rv { opacity: 1; transform: none; }}
@media print{.rv-scope .pbx-wires path { stroke-dasharray: none; stroke-dashoffset: 0; }}
@media print{.pbx-wrap, .pbx-vs, .pbx-side { print-color-adjust: exact; }}
@media print{.pbx-rounds { overflow: visible; }}
@media print{.pbx-round { min-width: 0px; }}
@media print{.pbx-body { padding: 12px; }}
@media print{.pbx-vname { font-size: 0.82rem; }}
@media print{.pbx-vtbd { font-size: 0.6rem; letter-spacing: 1px; }}
@media print{.pbx-meta { font-size: 0.66rem; padding: 6px 10px; gap: 7px; }}
@media print{.pbx-vs-badge { width: 22px; height: 26px; font-size: 0.52rem; }}
@media print{.pbx-atmo-glow { display: none; }}
@media print{.pbx-wires { width: 100%; height: 100%; }}
body.printing .pbx-rounds { overflow: visible; }
body.printing .pbx-round { min-width: 0px; }
.oia-bracket{--border-subtle:rgba(255,255,255,0.09);--bracket-gold:#B79E31;--cw-powder:#B79E31;--cw-powder-text:#B79E31;--powder:#B79E31;--gold:#B79E31;--navy:#16171a;
 --font-body:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;--font-display:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;--font-stats:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;--grid-line:rgba(255,255,255,0.045);--grid-line-soft:rgba(255,255,255,0.022);
 --league-primary:#B79E31;--league-solid:#B79E31;--live:#E5383B;--silver:#9aa4b2;--text-muted:#9A9EA5;--text-primary:#F3F1EA;--text-secondary:#c9c7bf;--vs-ink:#F3F1EA;--vs-void:#050506;--white:#fff;--win:#B79E31;--wire:rgba(183,158,49,0.35);--wrap-grad:linear-gradient(180deg,#0e0f12 0%,#050506 100%)}
.oia-bracket .pbx-vs .pbx-side{display:flex;align-items:center;gap:14px}
.oia-bracket .pbx-vcrest{flex:0 0 auto;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.oia-bracket .pbx-vcrest-tbd{display:none}
/* a crest never sits on its own colour: each half is graphite, the team's colour is the outer edge bar and a glow behind the crest */
.oia-bracket .pbx-side:not(.pbx-tbd){background:radial-gradient(48% 130% at 9% 50%,color-mix(in srgb,var(--vs-tc) 34%,transparent),transparent 72%),linear-gradient(180deg,#1a1b1f,#0b0c0e);box-shadow:inset 4px 0 0 var(--vs-tc)}
.oia-bracket .pbx-side:not(.pbx-tbd):not(:first-child){background:radial-gradient(48% 130% at 91% 50%,color-mix(in srgb,var(--vs-tc) 34%,transparent),transparent 72%),linear-gradient(180deg,#1a1b1f,#0b0c0e);box-shadow:inset -4px 0 0 var(--vs-tc)}
@media (max-width:760px){.oia-bracket .pbx-vs .pbx-side{gap:8px}.oia-bracket .pbx-vname{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.02}.oia-bracket .pbx-vcrest{width:34px;height:34px}.oia-bracket .pbx-vcrest-tbd{display:none}}
/* NO GREY BARS (Oct 10 2026, Carlos: "hate the gray bars … desktop needs to just fit"). .pbx-rounds was
   overflow-x:auto (line 246), so it was a scroller on BOTH axes: when the final's column ran wider than its
   share it scrolled sideways, the bar ate the box's height under the wires SVG (sized to the whole box by
   drawWires), and a vertical bar followed — the white/grey gutters around "For the title". Now the bracket
   is never a scroller: the two columns share the box (min-width 0, names ellipsis, the meta row wraps), the
   height grows to the content. On a phone the three boards keep their width and the BODY scrolls sideways,
   behind a thin gold bar and a fade at the edge — never vertically. */
.oia-bracket .pbx-rounds{overflow:visible}
.oia-bracket .pbx-round{min-width:0}
.oia-bracket .pbx-vs{max-width:100%}
@media (max-width:760px){.oia-bracket .pbx-body{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .oia-bracket .pbx-body::-webkit-scrollbar{height:4px}
  .oia-bracket .pbx-body::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
  .oia-bracket .pbx-body::-webkit-scrollbar-track{background:transparent}
  .oia-bracket .pbx-rounds{min-width:720px}.oia-bracket .pbx-round{min-width:256px}.oia-bracket .pbx-division::after{content:" · swipe";color:var(--gold-ink)}}
/* any scroller the page or an embed still has (a sheet, a list) wears the theme: thin, gold on a dark track — never the default grey */
html{scrollbar-color:rgba(183,158,49,.7) transparent}
[data-oia-section] *,html[data-oia-embed] *{scrollbar-width:thin}
[data-oia-section] ::-webkit-scrollbar,html[data-oia-embed] ::-webkit-scrollbar{width:4px;height:4px}
[data-oia-section] ::-webkit-scrollbar-thumb,html[data-oia-embed] ::-webkit-scrollbar-thumb{background:rgba(183,158,49,.7);border-radius:2px}
[data-oia-section] ::-webkit-scrollbar-track,html[data-oia-embed] ::-webkit-scrollbar-track{background:transparent}

/* ── responsive (the sections' share of the page's responsive block) ── */
@media (max-width:1100px){
  /* the time column is as wide as "12:45 ET" needs (a fixed 96px wrapped the zone onto its own line) */
  .row{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) 130px;grid-template-rows:auto auto;padding:14px 16px}
  .row .v{display:none}
  .row .where{grid-column:1;grid-row:2}
  .row .act{grid-column:4;grid-row:1/3}
}
@media (max-width:760px){
  .air,.pools{grid-template-columns:minmax(0,1fr)}
  .card .stage{aspect-ratio:2.3/1}
  .sh{flex-direction:column;align-items:flex-start}
  .sh .aside{text-align:left}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
  .row .when{grid-column:1/-1;grid-row:1}
  /* VISITOR ABOVE, HOME BELOW (the law, stacked). nth-of-type counted DIVs — .when is the first — so the away
     cell took row 3 and home auto-placed into row 2 above it, half-width. Placed by side, never by position. */
  .row .tm2[data-side="away"]{grid-column:1/-1;grid-row:2}
  .row .tm2[data-side="home"]{grid-column:1/-1;grid-row:3}
  .row .where{grid-column:1;grid-row:4}
  .row .act{grid-column:2;grid-row:4}
  /* a thumb's key: 44px on a phone (40px is the desktop key) */
  .row .act{height:44px}
  .plate .t .n{font-size:26px}.plate .t b{font-size:12px}
  /* standings at phone width: the team's NAME gets the room (POD1, "list our team
     names next to their logo") — tighter rank/number columns, the same cells */
  .st{grid-template-columns:20px minmax(0,1fr) 28px 28px 40px;gap:6px;padding:14px 14px}
  .st.hd{padding:12px 14px}
  .st .tm2{gap:10px}
  .st .tm2 b{letter-spacing:.06em}
}
/* standings inside a phone-wide frame (a host's 24px gutters leave 272–382px): tighter rank and number
   columns, and a long name wraps to a second line rather than truncating — the name IS the row (POD1) */
@media (max-width:430px){
  .st{grid-template-columns:18px minmax(0,1fr) 26px 26px 40px;gap:5px;padding:12px 10px}
  .st.hd{padding:10px}
  .st .tm2{gap:8px}
  .st .tm2 b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05;letter-spacing:.02em}
  .st.cut::after{right:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── THE GRAIN: one move — Oakley's film texture + a living colour field ── */
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-4%,-3%)}80%{transform:translate(6%,5%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* the honest marker under a section head (loading, stale, unavailable).
   road.css carries the same two rules for the road section and the concept
   page; they are restated here because an embed cannot load /oakley/*. */
.rd-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:26px 0 0;font:500 12px/1.6 var(--chy);letter-spacing:.14em;text-transform:uppercase;color:var(--ti)}
.rd-note .tag{padding:5px 9px;border:1px solid rgba(183,158,49,.5);color:var(--gold-ink);font-size:10px;letter-spacing:.26em}

/* ══ DAY ═══════════════════════════════════════════════════════════════════
   The page's one look is Night. Day is the same sections on bone paper: the
   tokens flip, the rows and pool tables go white, and the broadcast pieces —
   the live cards and the bracket's matchup plates — stay dark plates, the way
   a broadcast graphic stays a broadcast graphic on any page. Scoped to a
   section ([data-oia-section]) so live.html?theme=day flips only the sections
   it shares with the embeds; an embed carries it on <html>. */
html[data-oia-theme="day"] [data-oia-section],
html[data-oia-theme="day"][data-oia-embed]{
  --ink:#F3F1EA;--ink-2:#E9E6DC;--bone:#0B0C0E;--ti:#5E6168;--gun:#54565A;
  --line:#DDD9CE;--line-2:#CBC6B8;--gold:#B79E31;--gold-hi:#B79E31;--live:#D62F32}
html[data-oia-theme="day"] [data-oia-section]{background:var(--ink);color:var(--bone)}
html[data-oia-theme="day"][data-oia-embed] body::before{display:none}
html[data-oia-theme="day"] [data-oia-section] .card{
  --bone:#F3F1EA;--ti:#9A9EA5;--gun:#54565A;--line:#1E2024;--line-2:#2C2F34;--gold:#B79E31;--gold-hi:#B79E31;--live:#E5383B;color:var(--bone)}
html[data-oia-theme="day"] [data-oia-section] .row{background:#fff}
html[data-oia-theme="day"] [data-oia-section] .row.live{background:linear-gradient(90deg,rgba(214,47,50,.08),#fff 40%)}
html[data-oia-theme="day"] [data-oia-section] .row .when.lv{color:var(--live)}
html[data-oia-theme="day"] [data-oia-section] .tm2 .mc::before{background:radial-gradient(closest-side,rgba(0,0,0,.06),transparent 72%)}
html[data-oia-theme="day"] [data-oia-section] .pool{background:#fff}
html[data-oia-theme="day"] [data-oia-section] .st.cut::after{background:#fff}
html[data-oia-theme="day"] [data-oia-section] .oia-bracket{--border-subtle:rgba(0,0,0,.10);--grid-line:rgba(0,0,0,.05);--grid-line-soft:rgba(0,0,0,.025);
  --text-muted:#5E6168;--text-secondary:#3A3D42;--wire:rgba(140,119,36,.55);--gold:#B79E31;--wrap-grad:linear-gradient(180deg,#FFFFFF 0%,#F3F1EA 100%)}
html[data-oia-theme="day"] [data-oia-section] .oia-bracket .pbx-vs{--gold:#B79E31;--text-secondary:#c9c7bf;--text-muted:#9A9EA5}
html[data-oia-theme="day"] [data-oia-section] .pbx-wrap::before{background:repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,var(--grid-line-soft) 0 1px,transparent 1px 72px)}
html[data-oia-theme="day"] [data-oia-section] .pbx-atmo-glow{display:none}
html[data-oia-theme="day"] [data-oia-section] .pbx-sc{filter:brightness(0);opacity:.65}

/* ══ EMBED ═════════════════════════════════════════════════════════════════
   An embed is one section and nothing else: no bar, no hero, no footer, no
   gate. Until the feed answers, only the head and its marker show — never an
   empty frame passing for a result. */
html[data-oia-embed]{scroll-behavior:auto}
/* ?title=0 — element only: no head (sections.js skeleton() leaves it out) and no top padding left behind */
html[data-oia-embed][data-oia-title="0"] [data-oia-section]{padding-top:0}
html[data-oia-embed][data-oia-title="0"] [data-oia-section] .wrap > .rd-note:first-child{margin-top:0}
/* the alliance's team list grows the frame (which sizes itself) instead of scrolling inside it — no inner bar on
   desktop. Here, not in embed/oia/alliance.css: that file is a byte copy of the page's (test-oia-page-live.js). */
html[data-oia-embed] .al-teams{max-height:none;overflow:visible}
html[data-oia-embed][data-oia-state="wait"] [data-oia-section] .wrap > :not(.sh):not(.rd-note){display:none}
/* LDR3 (Oct 18 2026) — the stat leaders board under the standings (embed/oia/embed.js): /embed/oia/leaders in a
   nested frame, sized by its own height post. A fallback height until the first post; it never scrolls inside. */
html[data-oia-embed] .oia-ld{display:block;width:100%;height:560px;border:0;background:transparent;overflow:hidden}
/* POWERED BY — every embed, bottom-right, small and quiet, in the frame's flow
   (never over content; auto-height counts it). The wordmark is an IMAGE and
   never a link; the theme picks the cut: night = white, day = black.
   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. */
.oia-pb{display:none}
html[data-oia-embed] .oia-pb,html[data-oia-vanguard] .oia-pb{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:10px 16px 14px;position:relative;z-index:1;width:100%;min-height:44px;
  -webkit-appearance:none;appearance:none;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
html[data-oia-embed] .oia-pb:focus-visible,html[data-oia-vanguard] .oia-pb:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
html[data-oia-embed] .oia-pb-t,html[data-oia-vanguard] .oia-pb-t{font:600 9px/1 var(--chy);letter-spacing:.18em;text-transform:uppercase;color:var(--ti);opacity:.85}
html[data-oia-embed] .oia-pb-mk,html[data-oia-vanguard] .oia-pb-mk{height:14px;width:auto;opacity:.8;display:block}
html[data-oia-embed] .oia-pb-day{display:none}
html[data-oia-embed][data-oia-theme="day"] .oia-pb-night{display:none}
html[data-oia-embed][data-oia-theme="day"] .oia-pb-day{display:block}
/* a painted bracket already signs off in its own .pbx-foot: one mark per frame */
html[data-oia-embed] #oiaEmbed:has([data-oia-section]:not([hidden]) .pbx-foot) > .oia-pb{display:none}
/* the tie rule under a standings table is never hidden, at any width or state where the table shows */
html[data-oia-embed] #pools .tb{display:block;visibility:visible}

/* ══ THE PER-CREST TILE (Oct 11 2026, js/logo-tone.js) ═════════════════════
   On ?theme=day the rows and pools go white, and a white crest (Jets Elite,
   the Jaguars "ELITE" wordmark) vanishes into them. The helper measures each
   crest once and marks the element only when THIS surface hides it:
   data-logo-tile="dark" = a light mark on a light surface, "light" = a dark
   mark on a dark surface. Tokens resolve on the themed ancestor and inherit,
   so a dark `.card` plate inside a day section keeps the right tile. */
:root { --oia-logo-tile-dark: var(--ink); --oia-logo-tile-light: var(--bone) }
html[data-oia-theme="day"] [data-oia-section], html[data-oia-theme="day"][data-oia-embed] {
  --oia-logo-tile-dark: var(--bone); --oia-logo-tile-light: var(--ink) }
.tm2 .mc[data-logo-tile], .coin[data-logo-tile], .oia-bracket .pbx-vcrest[data-logo-tile] { box-sizing: border-box; border-radius: 3px; background-origin: content-box }
.tm2 .mc[data-logo-tile] { padding: 3px }
.coin[data-logo-tile] { padding: 6% }
.oia-bracket .pbx-vcrest[data-logo-tile] { padding: 4px }
/* Named per slot: `.tm2 .mc` and `.coin` set the `background:` shorthand,
   which resets background-color at (0,2,0) and would beat a bare attribute. */
.tm2 .mc[data-logo-tile="dark"], .coin[data-logo-tile="dark"], .oia-bracket .pbx-vcrest[data-logo-tile="dark"] { background-color: var(--oia-logo-tile-dark) }
.tm2 .mc[data-logo-tile="light"], .coin[data-logo-tile="light"], .oia-bracket .pbx-vcrest[data-logo-tile="light"] { background-color: var(--oia-logo-tile-light) }
/* A mark the helper measured as a wordmark (alpha bbox ≥ 1.6:1) takes a 2:1
   box at the row's height instead of a 44×36 square, so "Rebels" and
   "NITRO" are words, not specks. The name beside it already truncates. */
.tm2 .mc[data-logo-shape="wide"] { width: 72px }