/* Open Scoring MMA — Fight Tracker.
   Lifted out of the template so it can be cached, and so the page can run under a
   Content-Security-Policy that does not need 'unsafe-inline' for scripts. */
*{box-sizing:border-box}
:root{--gold:#C8A44D;--red:#B22323;--matte:#0B0B0D;--warn:#C8895A;--live:#E0392B}
body{margin:0;background:var(--matte);color:#ECECEC;font-family:Inter,system-ui,sans-serif;line-height:1.5;
  background-image:radial-gradient(60% 40% at 50% -5%,rgba(178,35,35,.12),transparent 70%)}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:780px;margin:0 auto;padding:0 16px 64px}
header{position:sticky;top:0;z-index:30;background:rgba(11,11,13,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid #1f1f27}
.bar{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px}
.bar img{width:34px;height:34px}
.bar .t{font-family:"Space Grotesk",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:16px;
  white-space:nowrap}
/* At 390px the wordmark, the episode pill and Install cannot all fit, and the name was the
   thing that wrapped -- onto three lines. Shrink it and drop the pill to its icon instead. */
@media(max-width:430px){.bar{gap:9px;padding:12px 14px}.bar .t{font-size:13.5px}.listen-t{display:none}
  .listen{padding:6px 9px;font-size:13px}}
.bar .t small{display:block;font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:600}
.listen{margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  border:1px solid #2a2a33;background:#15151A;color:var(--gold);border-radius:999px;
  padding:5px 11px;font-size:11.5px;font-weight:600;white-space:nowrap}
#install{display:none;background:var(--gold);color:var(--matte);border:0;border-radius:9px;
  padding:8px 14px;font-weight:700;font-family:"Space Grotesk",sans-serif;text-transform:uppercase;font-size:12px;cursor:pointer}
.tzrow{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:0 16px 10px;font-size:12px;color:#9A9AA2}
.tzlbl{flex:0 0 auto}
.refresh-stamp{font-size:11px;color:#6E6E78;flex:0 0 auto}
/* The search shares the timezone row rather than taking one of its own: the header is
   sticky, so every row added here is taken off the top of every screenful of fights. */
#q{flex:1;min-width:0;background:#15151A;color:#ECECEC;border:1px solid #23232B;border-radius:999px;
  padding:7px 13px;font-family:Inter,sans-serif}
#q::placeholder{color:#63636D}
#q::-webkit-search-cancel-button{filter:invert(.6)}
@media(max-width:620px){.tzlbl,.refresh-stamp{display:none}}
.find-ev{font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.1em;
  color:#7E7E88;margin:14px 0 -2px}
.find-ev b{color:var(--gold);font-weight:700}
input,textarea{font-size:16px;font-family:inherit}
.tzrow select{background:#15151A;color:#ECECEC;border:1px solid #23232B;border-radius:7px;padding:5px 8px;font-family:Inter,sans-serif;font-size:12px}
.tabs{display:flex;gap:6px;max-width:780px;margin:0 auto;padding:0 16px 10px;overflow-x:auto}
.tab{flex:0 0 auto;background:#15151A;border:1px solid #23232B;color:#9A9AA2;border-radius:999px;
  padding:10px 18px;min-height:40px;font-family:"Space Grotesk",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:13px;cursor:pointer}
.tab.on{background:var(--gold);color:var(--matte);border-color:var(--gold)}
h1{font-family:"Space Grotesk",sans-serif;text-transform:uppercase;font-size:1.4rem;margin:22px 0 2px}
.league{display:none}.league.on{display:block}
.note{color:#9A9AA2;font-size:12.5px;margin:2px 0 10px;border-left:2px solid var(--gold);padding-left:10px}

.ev{border:1px solid #1f1f27;background:linear-gradient(180deg,#16161c,#121217);border-radius:16px;
  padding:16px;margin:14px 0;position:relative}
/* marquee / big fights: gold-edged with a STATIC glow (no repaint-heavy box-shadow or
   background animation). The only motion is a GPU-cheap opacity pulse on a gold ring. */
.ev.marquee{border:1px solid var(--gold);overflow:visible;
  background:linear-gradient(180deg,#1c1810,#141119);
  box-shadow:0 0 0 1px rgba(200,164,77,.30),0 12px 44px -14px rgba(200,164,77,.50)}
.ev.marquee::after{content:"";position:absolute;inset:-1px;border-radius:17px;pointer-events:none;
  border:1px solid var(--gold);opacity:.18;animation:marqueePulse 3.6s ease-in-out infinite;will-change:opacity}
@keyframes marqueePulse{0%,100%{opacity:.15}50%{opacity:.75}}
.ev.marquee::before{content:"★ Marquee";position:absolute;top:-10px;right:14px;z-index:2;
  background:var(--gold);color:var(--matte);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  box-shadow:0 2px 10px -2px rgba(200,164,77,.6)}
.ev.marquee>*{position:relative;z-index:1}
.fodds.favodds{background:var(--gold);color:var(--matte);padding:1px 7px;border-radius:5px;font-weight:700}
.favstar{color:var(--gold)}
/* A divisional rank, printed only where the bout's own weight class matches it. The champion
   reads C in gold; a contender is deliberately quiet, so a card of ranked fighters does not
   turn into a wall of gold. */
.rank{display:inline-block;min-width:21px;text-align:center;font-family:"Space Grotesk",sans-serif;
  font-weight:700;font-size:10px;letter-spacing:.02em;color:#B9B9C4;background:#24242e;
  border-radius:5px;padding:2px 5px;vertical-align:1px;font-variant-numeric:tabular-nums}
.rank.champ{background:var(--gold);color:var(--matte)}
.fighter.favored .fname{color:#fff}
@media (prefers-reduced-motion:reduce){
  .ev.marquee::after,.badge.b-live,.wk-badge.b-live,#livecta .dot,.lv-live .dot{animation:none;opacity:.65}}
.ev .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.evname{font-family:"Space Grotesk",sans-serif;font-weight:700;text-transform:uppercase;font-size:1.05rem}
.evlink{color:inherit}
.ev.marquee .evname{font-size:1.18rem;color:#fff}
.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 9px;border-radius:999px;border:1px solid #33333d;color:#9A9AA2}
.b-danger{color:#fff;background:#8C1B1B;border-color:#8C1B1B}
.b-warning{color:#E6C879;border-color:#A6822F}
.b-live{color:#fff;background:var(--red);border-color:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.b-past{color:#7E7E88}
.when{color:#9A9AA2;font-size:13px;margin:6px 0 2px}
.venue{color:#7E7E88;font-size:12px}
.meta{color:#9A9AA2;font-size:12px;margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px}
.meta b{color:#C9C9D2;font-weight:600}
.headline{margin-top:8px;font-weight:600;font-size:14px;color:#ECECEC}

.bout{padding:10px 0;border-top:1px solid #16161c}
.brow{display:flex;align-items:center;gap:10px}
/* What the prices make it. "-305" is a number most people cannot rank against "+284"
   without doing arithmetic; the same fact as two percentages needs none. The gold grows
   from the FAVOURITE's side, so which way the fight leans reads before any of the digits. */
/* Sits exactly where the market bar sits on an unfought bout: a finished fight has no odds,
   so the two never appear together. */
.res{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:9px 2px 1px}
.res-l{font-size:9.5px;letter-spacing:.09em;color:#5E5E68;flex:0 0 auto}
.res b{font-size:12px;font-weight:600;color:#E4E4EA}
.rstat{font-size:11px;color:#7E7E88;font-variant-numeric:tabular-nums;flex:0 0 auto}
.mkt{display:flex;align-items:center;gap:8px;margin:9px 2px 1px}
.mkt-l{font-size:9.5px;letter-spacing:.09em;color:#5E5E68;flex:0 0 auto}
.mkt b{font-size:11px;font-weight:700;color:#7E7E88;font-variant-numeric:tabular-nums;
  flex:0 0 auto;min-width:30px}
.mkt b:last-child{text-align:right}
.mkt b.on{color:var(--gold)}
.mkt-bar{flex:1;min-width:0;height:5px;border-radius:999px;background:#25252e;display:flex;overflow:hidden}
.mkt-bar.r{justify-content:flex-end}
.mkt-bar i{height:100%;background:var(--gold);border-radius:999px}
.bout.main{border-top:0;margin:6px -16px 0;padding:14px 16px 12px;
  background:linear-gradient(180deg,rgba(200,164,77,.10),transparent);border-radius:12px}
.mainlbl{display:block;font-family:"Space Grotesk",sans-serif;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:8px 0 -2px}
.fighter{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:inherit}
.fighter.b{flex-direction:row-reverse;text-align:right}
/* The circle lives on the WRAPPER, not the image, because the framing rule below is a
   transform and a transform is only clipped back to the circle by a non-transformed
   ancestor with overflow:hidden. The placeholder avatar is the wrapper's background, so
   an image that fails to load simply reveals it (see avatarFallback in app.js). */
.mug{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid #2a2a33;
  background:#20202a center/cover no-repeat}
.mug img{width:100%;height:100%;object-fit:cover;display:block}
/* Photos we had to go and find are full-body promo portraits (Sherdog ships every fighter
   at 200x300, head in the top third), so a centred square crop framed them at the chest.
   Anything clearly taller than it is wide gets zoomed to the head instead; app.js sets
   .tall from the image's own dimensions, which is the only thing that tells the two apart
   -- the same route serves real headshots from other sources. */
/* object-position moves the crop window to the TOP of the portrait; the transform then
   zooms into it. Without the first half the second one just magnifies the chest. */
.mug img.tall{object-position:50% 0;transform:scale(1.8);transform-origin:50% 4%}
.bout.main .mug{width:54px;height:54px;border-color:var(--gold)}
.fighter>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fighter.b>div{align-items:flex-end}
.fname{font-weight:600;font-size:14px;line-height:1.25;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.bout.main .fname{font-size:16px;line-height:1.3}
.frec{color:#7E7E88;font-size:11px;line-height:1.3}
.fodds{color:var(--gold);font-size:11px;font-weight:600}
.vs{flex:0 0 auto;color:#7E7E88;font-size:11px;font-weight:700;text-transform:uppercase}
.vs .vs-live{color:var(--red)}
.win{color:#7Cd992}
.more{margin-top:10px;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;font-family:"Space Grotesk",sans-serif;
  text-transform:uppercase;letter-spacing:.04em;background:none;border:0;padding:0;text-align:left}
/* A hidden prelim is a .bout, and a .bout is a BLOCK: its fighter row and its market bar
   stack. Revealing it as flex made those two children flex ITEMS instead, so every bout
   past the fourth drew the market bar beside the fighters rather than under them, with
   the right fighter squeezed toward the middle. Reveal it as what it already was. */
.rest{display:none}.rest.on{display:block}
.empty{color:#9A9AA2;padding:24px 0}
.remind{margin-top:30px;padding:20px 18px;background:#101015;border:1px solid #23232b;border-radius:14px;text-align:center}
.remind-h{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:16px;color:#ECECEC}
.remind-p{color:#9A9AA2;font-size:13px;margin:6px auto 12px;max-width:430px}
#remind-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#remind-email{flex:1;min-width:200px;max-width:320px;padding:10px 12px;border-radius:9px;border:1px solid #33333d;
  background:#15151A;color:#ECECEC;font-size:14px}
#remind-email:focus{outline:none;border-color:var(--gold)}
#remind-btn{padding:10px 18px;border:0;border-radius:9px;background:var(--gold);color:var(--matte);
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14px;cursor:pointer}
#remind-btn:disabled{opacity:.55;cursor:default}
.remind-msg{font-size:13px;margin-top:10px;min-height:1px}
.honeypot{position:absolute;left:-9999px}
footer{border-top:1px solid #1f1f27;margin-top:30px;padding:18px 0;text-align:center;color:#7E7E88;font-size:13px}
.wrap-out{max-width:780px;margin:0 auto 64px;padding:18px 16px}

/* ---- fight alerts (web push) ---- */
.alerts{margin-top:14px;padding-top:14px;border-top:1px solid #23232b}
.alerts[hidden]{display:none}
.alerts-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid #33333d;background:#15151A;color:#ECECEC;font-size:13.5px;font-weight:600;
  font-family:"Space Grotesk",sans-serif}
.alerts-btn:disabled{opacity:.55;cursor:default}
.alerts-btn.on{background:rgba(200,164,77,.14);border-color:var(--gold);color:var(--gold)}
.alerts-note{font-size:12px;color:#7E7E88;margin-top:8px}

/* ---- this week (cross-promotion list) ---- */
.wk{display:flex;gap:12px;padding:12px 14px;border:1px solid #1f1f27;border-radius:12px;background:#101015;margin-bottom:8px}
.wk.live{border-color:#5a2420;background:#160f0f}
.wk-when{flex-shrink:0;width:150px;font-size:12.5px;color:var(--gold);font-weight:600;line-height:1.35}
.wk-body{min-width:0;flex:1}
.wk-nm{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;line-height:1.25}
.wk-nm a{color:inherit;text-decoration:none}.wk-nm a:hover{color:var(--gold)}
.wk-badge{margin-left:7px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;vertical-align:middle}
.wk-badge.b-live{background:var(--live);color:#fff;animation:livepulse 1.1s infinite}
.wk-meta{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:5px;font-size:12.5px;color:#9A9AA2;align-items:center}
.wk-tag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.wk-mma{background:#15233a;color:#8fb4ff}.wk-boxing{background:#3a2415;color:#ffb98f}
.wk-src{text-align:center;color:#6E6E78;font-size:11.5px;margin:14px 0 4px}
@media(max-width:520px){.wk{flex-direction:column;gap:4px}.wk-when{width:auto}}

/* ---- live fight mode ---- */
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
#livecta{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:none;
  align-items:center;gap:9px;padding:12px 20px;border:0;border-radius:999px;cursor:pointer;
  background:var(--live);color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14px;
  box-shadow:0 8px 30px rgba(224,57,43,.45)}
#livecta.on{display:flex}
#livecta .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:livepulse 1.1s infinite}
#live{position:fixed;inset:0;z-index:50;display:none;background:#0A0A0C;color:#ECECEC;overflow-y:auto;
  flex-direction:column}
#live.on{display:flex}
.lv-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #1c1c22;
  position:sticky;top:0;background:#0A0A0Cee;backdrop-filter:blur(6px);z-index:2}
.lv-live{display:inline-flex;align-items:center;gap:7px;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.08em;color:var(--live);text-transform:uppercase}
.lv-live .dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:livepulse 1.1s infinite}
.lv-ev{font-size:13px;color:#9A9AA2;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-x{border:1px solid #2a2a33;background:#15151A;color:#ECECEC;width:34px;height:34px;border-radius:9px;
  font-size:17px;cursor:pointer;flex-shrink:0}

/* the event switcher: what makes two cards on the same night both reachable */
.lv-switch{display:flex;gap:8px;padding:10px 16px 2px;overflow-x:auto;max-width:860px;margin:0 auto;width:100%;
  scrollbar-width:none}
.lv-switch[hidden]{display:none}
.lv-switch::-webkit-scrollbar{display:none}
.lv-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid #2a2a33;background:#131318;color:#9A9AA2;border-radius:999px;padding:7px 14px;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12.5px;max-width:70vw}
.lv-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-chip .lg{color:#ECECEC;font-weight:700;letter-spacing:.04em}
.lv-chip.on{border-color:var(--gold);background:rgba(200,164,77,.13);color:var(--gold)}
.lv-chip.on .lg{color:var(--gold)}
.lv-chip .cdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#4A4A55}
.lv-chip.is-live .cdot{background:var(--live);animation:livepulse 1.1s infinite}
.lv-chip.is-underway .cdot{background:var(--warn)}
.lv-chip.is-upcoming .cdot{background:#4A4A55}
.lv-chip.is-recap .cdot{background:#7Cd992}
.lv-kind{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7E7E88;text-align:center}
.lv-kind.live{color:var(--live)}
.lv-kind.underway{color:var(--warn)}

.lv-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 16px;gap:16px;max-width:820px;margin:0 auto;width:100%}
.lv-weight{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7E7E88}
.lv-face{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;width:100%}
.lv-fighter{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.lv-ph{width:132px;height:132px;border-radius:50%;border:3px solid #23232b;max-width:34vw;
  background:#20202a center/cover no-repeat}
.lv-fighter.win .lv-ph{border-color:var(--gold)}
.lv-nm{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;line-height:1.15}
.lv-rec{font-size:13px;color:#9A9AA2}
.lv-flag{width:22px;height:15px;border-radius:2px;object-fit:cover;vertical-align:middle;margin-right:5px}
.lv-od{font-size:12px;color:var(--gold);font-weight:600;margin-top:1px}
.lv-vs{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#4A4A55;font-size:15px}
.lv-clock{text-align:center}
.lv-round{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:#9A9AA2}
.lv-time{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:60px;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;margin-top:4px}
.lv-time.status{font-size:30px}
.lv-result{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:20px;color:var(--gold);text-align:center;
  text-wrap:balance}
.lv-rstat{display:block;margin-top:6px;font-family:Inter,sans-serif;font-weight:400;font-size:12px;
  color:#8A8A94;font-variant-numeric:tabular-nums}
.lv-pending{text-align:center;color:#9A9AA2;font-size:15px}
.lv-pending .big{font-size:34px;font-weight:700;color:#fff;font-family:"Space Grotesk",sans-serif;
  font-variant-numeric:tabular-nums;margin-top:6px}
.lv-deck{width:100%;max-width:820px;margin:0 auto;padding:0 16px}
.lv-deck-h,.lv-rail-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7E7E88;margin:0 0 8px}
.lv-deck-card{display:flex;align-items:center;gap:10px;background:#101015;border:1px solid #23232b;
  border-radius:11px;padding:10px 12px}
.lv-deck-card .mug{width:34px;height:34px;border-radius:50%;
  background:#20202a center/cover no-repeat}
.lv-deck-card .mug.right{margin-left:auto}
.lv-deck-nm{font-weight:600;font-size:14px}
.lv-deck-sub{font-size:12px;color:#7E7E88}
.lv-rail{width:100%;max-width:820px;margin:14px auto 26px;padding:0 16px}
.lv-b{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;font-size:13px;
  border:1px solid transparent}
.lv-b+.lv-b{margin-top:4px}
.lv-b.now{background:#1a0f0f;border-color:#5a2420}
.lv-b.done{opacity:.5}
.lv-b .st{width:52px;flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lv-b.now .st{color:var(--live)}.lv-b.done .st{color:#7E7E88}.lv-b.up .st{color:var(--gold)}
.lv-b .nms{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-b .rz{color:#7E7E88;font-size:12px;flex-shrink:0}
@media(max-width:520px){.lv-ph{width:104px;height:104px}.lv-time{font-size:46px}.lv-nm{font-size:15px}}

/* ---- champions tab ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ch-block{margin:16px 0 22px}
.ch-h{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;color:var(--gold);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap}
.champs-updated{font-size:11px;color:#6E6E78;text-transform:none;letter-spacing:0;font-weight:500}
.champs-updated.stale{color:var(--warn)}
.ch-list{border:1px solid #1f1f27;border-radius:13px;overflow:hidden;background:#101015}
.ch-row{display:flex;align-items:center;gap:14px;padding:11px 14px}
.ch-main{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.ch-rec{font-family:Inter,sans-serif;font-weight:500;font-size:11.5px;color:#7E7E88;letter-spacing:0}
.ch-row+.ch-row{border-top:1px solid #1a1a21}
.ch-div{flex:0 0 132px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#7E7E88}
.ch-who{min-width:0;flex:1}
.ch-name{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#ECECEC;font-size:15.5px;line-height:1.25}
.ch-next{font-size:11.5px;color:#9A9AA2;margin-top:2px}
.ch-next b{color:var(--gold);font-weight:600}
@media(max-width:520px){.ch-row{flex-direction:column;align-items:flex-start;gap:6px}
  .ch-div{flex:none}.ch-main{width:100%}}

/* ---- share a card as an image ---- */
/* Filled, not outlined. This is the only thing on a card that DOES something rather than
   describing something, and as a grey-bordered pill it sat in the meta row reading like a
   third label next to the broadcaster and the details link. Gold is the app's one accent,
   so it is also the app saying "this is the button". Red is not available here: it means
   live, and a share button that looked like a live badge would be worse than a quiet one. */
.evshare{background:var(--gold);border:0;color:var(--matte);border-radius:999px;
  padding:7px 15px;font-family:Inter,sans-serif;font-size:13px;font-weight:700;cursor:pointer;
  min-height:34px;letter-spacing:.01em;
  box-shadow:0 2px 10px -2px rgba(200,164,77,.45)}
.evshare:hover{background:#D9B75F}
.evshare:active{transform:translateY(1px)}
.evshare:disabled{background:#3a3a46;color:#9A9AA2;box-shadow:none;cursor:default}
/* On a marquee card the gold border and the gold ring already own the eye, so the button
   steps back to an outline rather than adding a third gold shape to the same box. */
.ev.marquee .evshare{background:transparent;color:var(--gold);box-shadow:none;
  border:1px solid var(--gold)}
.ev.marquee .evshare:hover{background:rgba(200,164,77,.14)}

/* ---- first-visit "install as an app" invite ---- */
.a2hs{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);padding:0}
.a2hs[hidden]{display:none}
.a2hs-card{width:100%;max-width:460px;background:#15151A;border:1px solid #2a2a33;
  border-radius:18px 18px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.5);position:relative;text-align:center;
  animation:a2hsUp .28s cubic-bezier(.2,.9,.3,1)}
@keyframes a2hsUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:520px){.a2hs{align-items:center}.a2hs-card{border-radius:18px}}
.a2hs-x{position:absolute;top:10px;right:12px;background:none;border:0;color:#9A9AA2;
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.a2hs-ico{width:60px;height:60px;border-radius:14px;margin:2px auto 12px;display:block;
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.a2hs-t{font-weight:700;font-size:19px;color:#ECECEC;margin:0 0 6px}
.a2hs-p{color:#9A9AA2;font-size:14px;line-height:1.45;margin:0 auto 16px;max-width:340px}
.a2hs-go{display:block;width:100%;background:var(--gold);color:#15151A;border:0;border-radius:12px;
  font-weight:700;font-size:16px;padding:13px;cursor:pointer}
.a2hs-go:active{opacity:.85}
.a2hs-instr{display:none;color:#ECECEC;font-size:14px;line-height:1.5;margin:4px 4px 0;
  background:#1f1f27;border:1px solid #2a2a33;border-radius:12px;padding:12px}
.a2hs-instr.on{display:block}
.a2hs-instr b{color:var(--gold)}
.a2hs-shareico{display:inline-block;vertical-align:-3px}
.a2hs-later{background:none;border:0;color:#9A9AA2;font-size:13px;margin-top:12px;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}

/* ---- Shorts tab (links out to YouTube; nothing is embedded) ---- */
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.yt{display:flex;flex-direction:column;background:#101015;border:1px solid #1f1f27;border-radius:13px;
  overflow:hidden;color:inherit}
.yt:hover{border-color:var(--gold)}
.yt-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#15151A;display:block}
.yt-body{padding:9px 11px 11px}
.yt-title{font-weight:600;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;
  line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta{color:#7E7E88;font-size:11.5px;margin-top:5px}

/* ---- News tab ---- */
.ns{padding:13px 0;border-bottom:1px solid #1a1a21}
.ns-top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.ns-src{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:#15233a;color:#8fb4ff}
.ns-ago{font-size:11.5px;color:#6E6E78}
.ns-title{display:block;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15.5px;
  line-height:1.3;color:#ECECEC}
.ns-title:hover{color:var(--gold)}
.ns-sum{margin:5px 0 0;font-size:13px;color:#9A9AA2;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- two alert toggles ---- */
.alerts-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---- fighter placeholders ----
   The floor under every fighter photo: painted as the img's own background, so a photo
   that 404s (or fails before app.js loads) reveals it instead of a broken-image icon.
   Flat illustrations on purpose — they stand in for a fighter we have no picture of and
   must never be mistaken for one. Women's divisions come through as "W Flyweight"; a bout
   with no weight class at all gets the neutral. */
/* The placeholder for a fighter we have no photo of, and for a slot whose opponent has
   not been announced. A hooded fighter with his face in shadow is the honest version of
   "we do not have this one": a wrong face on a fighter is the single worst thing this app
   can do, so the placeholder deliberately has no face to be wrong about.
   The m1/m2/m3 aliases are for a reader still holding markup from before this deploy --
   the service worker is network-first, so that is one refresh, not forever. */
.av-m,.av-m1,.av-m2,.av-m3,.av-n1{background-image:var(--av-m,url(/static/avatar-m.jpg))}
.av-w,.av-w1,.av-w2,.av-w3{background-image:var(--av-w,url(/static/avatar-w.jpg))}
/* Several sources (ESPN's cutout headshots included) ship a photo with a transparent
   background, and the illustration above sits directly behind the <img> so that a 404
   still shows something. Once app.js confirms the photo actually painted pixels it adds
   .has-photo, which drops the illustration so it cannot show through those transparent
   edges -- a fighter's photo showing a cartoon face behind their real one reads as a bug,
   not a graceful fallback. */
.mug.has-photo{background-image:none}