/* ==========================================================================
   BBC Sport — Live Experiences prototype
   Reith Sans, BBC Sport dark app palette
   ========================================================================== */

@font-face {
  font-family: "ReithSans";
  src: local("BBC Reith Sans"), local("BBCReithSans-Regular");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ReithSans";
  src: local("BBC Reith Sans Medium"), local("BBCReithSans-Medium");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ReithSans";
  src: local("BBC Reith Sans Bold"), local("BBCReithSans-Bold");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ReithSans";
  src: local("BBC Reith Sans XBold"), local("BBCReithSans-XBold");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ReithSansCd";
  src: local("BBC Reith Sans Cd Bold"), local("BBCReithSansCd-Bold");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --black: #000000;
  --bg: #0D0D0D;
  --panel: #151515;
  --card: #1C1C1C;
  --card-2: #262626;
  --line: #303030;
  --line-soft: #242424;
  --text: #FFFFFF;
  --text-2: #C4C4C4;
  --muted: #8E8E8E;

  --yellow: #FFD230;
  --red: #BB1919;
  /* BBC Live: the label colour for anything happening now, and nothing else */
  --live: #00CCC7;
  --live-core: #009E9E;
  --live-dark: #006666;
  --live-ink: #001A19;
  /* red is kept for things going wrong: warnings, wickets, wrong answers */
  --alert: #E8443C;
  --green: #007A3D;
  --blue: #3B7DD8;

  --eng: #E8F0FC;
  --eng-ink: #16296B;
  --ned: #F26522;
  --ned-ink: #201000;

  --pitch: #2F7D3A;
  --pitch-2: #35893F;
  --pitch-line: rgba(255,255,255,.42);

  --sans: "ReithSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cond: "ReithSansCd", "ReithSans", Arial Narrow, sans-serif;

  --gut: 16px;
  --radius: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #0A0A0A;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ==========================================================================
   Desktop chrome around the phone
   ========================================================================== */

.deskframe {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.deskbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line-soft);
  background: #0A0A0A;
  position: sticky;
  top: 0;
  z-index: 60;
}

.deskbar .brandline {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.deskbar .brandline b { color: var(--yellow); }

/* lifecycle switcher */
.lifecycle {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #141414; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 4px;
}
.lc {
  border: 0; background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  transition: background .18s, color .18s;
}
.lc:hover { color: var(--text); }
.lc[aria-selected="true"] { background: var(--yellow); color: #101010; }
.lc:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.hintline {
  font-size: 11.5px; color: var(--muted);
}
.hintline kbd {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  background: #1E1E1E; border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; color: var(--text-2);
}

.deskstage {
  display: grid;
  place-items: start center;
  padding: 26px 20px 40px;
}

/* phone shell */
.device {
  width: 390px; max-width: 100%;
  background: var(--black);
  border: 1px solid #2A2A2A;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.9);
  position: relative;
}
@media (max-width: 460px) {
  .deskstage { padding: 0; }
  .device { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .deskbar { padding-inline: var(--gut); }
}

.viewport {
  height: 780px;
  max-height: calc(100dvh - 190px);
  min-height: 520px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (max-width: 460px) {
  .viewport { height: auto; max-height: none; flex: 1; }
  .deskframe { height: 100%; }
  .deskstage { height: 100%; }
  .device { height: 100%; display: flex; flex-direction: column; }
}

/* ==========================================================================
   App header
   ========================================================================== */

.apphead { background: var(--black); flex: none; }

.headrow {
  display: grid;
  grid-template-columns: 44px 1fr 44px 44px;
  align-items: center;
  height: 52px;
  padding: 0 6px;
}

.iconbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px;
}
.iconbtn:hover { background: #161616; }
.iconbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.iconbtn svg { display: block; }

.bbcblocks { display: flex; gap: 3px; justify-content: center; }
.bbcblocks i {
  width: 24px; height: 24px; background: #fff; color: #000;
  font-family: var(--sans); font-weight: 700; font-size: 16px; font-style: normal;
  display: grid; place-items: center; line-height: 1;
}

.sportrow {
  display: flex; align-items: baseline; gap: 12px;
  padding: 2px var(--gut) 14px;
}
.sportmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.005em;
  color: var(--yellow);
  line-height: 1;
}
.sportsection { font-size: 17px; color: #D8D8D8; font-weight: 400; }

/* ==========================================================================
   Match header
   ========================================================================== */

.matchhead {
  background: var(--panel);
  padding: 0 0 2px;
  flex: none;
}

.compline {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; padding: 6px 4px 2px;
}
.compname {
  text-align: center; font-size: 14px; color: var(--text-2); font-weight: 500;
}

.scorewrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px var(--gut) 16px;
}
.side { display: grid; justify-items: center; gap: 8px; text-align: center; }
.crest {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  border: 2px solid rgba(255,255,255,.12);
}
.crest.eng { background: var(--eng); color: var(--eng-ink); }
.crest.ned { background: var(--ned); color: #fff; }
.side .tname { font-size: 16px; font-weight: 700; line-height: 1.2; }
.side .tsub { font-size: 12px; color: var(--muted); line-height: 1.35; }

.centre { display: grid; justify-items: center; gap: 4px; padding-top: 8px; min-width: 116px; }
.statusrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
}
.statusrow.live { color: var(--live); }
.statusrow.pre { color: var(--yellow); }
.statusrow.ft { color: var(--text-2); }
.statusrow.paired { color: #B79CFF; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pip.beat { animation: beat 1.9s ease-in-out infinite; }
@keyframes beat { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.bigscore {
  font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kotime { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.clockline { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* tabs */
.tabbar {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  background: var(--panel);
  border-bottom: 1px solid #000;
  flex: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbtn {
  border: 0; background: none; color: var(--muted);
  font-size: 15px; font-weight: 700;
  padding: 14px 16px 12px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.tabbtn[aria-selected="true"] { color: #fff; border-bottom-color: var(--red); }
.tabbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }

/* ==========================================================================
   Scroll body
   ========================================================================== */

.body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.body::-webkit-scrollbar { width: 6px; }
.body::-webkit-scrollbar-thumb { background: #2E2E2E; border-radius: 3px; }

.section { padding: var(--gut); border-bottom: 1px solid var(--line-soft); }
.section:last-child { border-bottom: 0; padding-bottom: 28px; }

.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.sechead h2 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.sechead .meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sechead .meta.live { color: var(--live); font-weight: 700; }

.livedot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700;
}
.livedot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); animation: beat 1.9s ease-in-out infinite;
}

.rule-y { height: 3px; background: var(--yellow); margin: 0 0 14px; }

.note { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.note b { color: var(--text); font-weight: 500; }

/* generic card */
.c {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
}
.c + .c { margin-top: 10px; }

/* ==========================================================================
   Get involved
   ========================================================================== */

.involve { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.involve .inner { padding: 16px; display: grid; gap: 10px; }
.involve .ihead { display: flex; gap: 12px; align-items: flex-start; }
.involve h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.involve p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.45; }

.btn {
  display: inline-block;
  background: none; border: 1px solid #fff; color: #fff;
  font-size: 15px; font-weight: 500;
  padding: 11px 18px; border-radius: 2px;
  transition: background .15s, color .15s;
}
.btn:hover { background: #fff; color: #000; }
.btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.btn.solid { background: var(--yellow); border-color: var(--yellow); color: #101010; font-weight: 700; }
.btn.solid:hover { background: #fff; border-color: #fff; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn[aria-pressed="true"] { background: #101010; color: var(--yellow); border-color: var(--yellow); }

/* ==========================================================================
   Opta live match view
   ========================================================================== */

.optacard { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.optahead {
  display: grid; grid-template-columns: 34px 1fr auto;
  gap: 11px; align-items: center; padding: 13px 14px 10px;
}
.optaicon {
  width: 34px; height: 34px; border-radius: 6px;
  background: #0E3B22; display: grid; place-items: center;
}
.optahead .t1 { font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.optahead .t2 { font-size: 11.5px; color: var(--muted); }
.linkbtn {
  background: none; border: 0; color: var(--yellow);
  font-size: 13.5px; font-weight: 500; padding: 4px;
}
.linkbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }

.optaclock {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 9px; font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.optaclock .l { display: inline-flex; align-items: center; gap: 7px; }
.optaclock .l::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); animation: beat 1.9s ease-in-out infinite;
}

.pitchbox { padding: 0 14px; }
.pitchsvg { width: 100%; height: auto; display: block; border-radius: 4px; }

.optacap { padding: 12px 14px 4px; }
.optacap .c1 { font-size: 14.5px; font-weight: 700; }
.optacap .c2 { font-size: 13px; color: var(--muted); margin-top: 2px; }

.optactrl {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 14px; flex-wrap: wrap;
}
.ctrlbtn {
  width: 34px; height: 34px; border-radius: 6px;
  background: var(--card-2); border: 0;
  display: grid; place-items: center; flex: none;
}
.ctrlbtn:hover { background: #333; }
.ctrlbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.chip {
  border: 0; background: var(--card-2); color: var(--text-2);
  font-size: 12.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 4px; white-space: nowrap;
}
.chip:hover { background: #333; color: #fff; }
.chip[aria-pressed="true"] { background: var(--red); color: #fff; font-weight: 700; }
.chip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.optactrl .spacer { flex: 1; }

/* ==========================================================================
   Polls / predictions
   ========================================================================== */

.q { font-size: 15.5px; font-weight: 700; margin: 0 0 12px; line-height: 1.35; }
.opts { display: grid; gap: 8px; }
.opts.two { grid-template-columns: 1fr 1fr; }
.optbtn {
  border: 1px solid var(--line); background: #202020; color: #fff;
  font-size: 14px; font-weight: 500;
  padding: 13px 14px; border-radius: 6px; text-align: left;
  transition: border-color .15s, background .15s;
}
.optbtn:hover { border-color: #6E6E6E; background: #262626; }
.optbtn[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: #101010; font-weight: 700; }
.optbtn:disabled { opacity: .55; cursor: default; }
.optbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.results { display: grid; gap: 10px; margin-top: 14px; }
.resrow { display: grid; gap: 5px; }
.reslab {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.reslab b { font-weight: 700; color: #fff; }
.track { height: 6px; background: #2B2B2B; border-radius: 3px; overflow: hidden; }
.track i { display: block; height: 100%; background: #6E6E6E; border-radius: 3px; transition: width .55s cubic-bezier(.2,.7,.3,1); }
.track i.me { background: var(--yellow); }
.track i.alt { background: var(--blue); }

.tally { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; min-height: 1.3em; font-variant-numeric: tabular-nums; }

/* score stepper */
.stepgrid { display: grid; gap: 12px; }
.steprow { display: grid; grid-template-columns: 1fr 38px 40px 38px; gap: 10px; align-items: center; }
.steprow .n { font-size: 15px; font-weight: 700; }
.stepb {
  width: 38px; height: 38px; border-radius: 6px;
  background: #202020; border: 1px solid var(--line); color: #fff;
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.stepb:hover { border-color: #6E6E6E; }
.stepb:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.stepv { text-align: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Stat comparison
   ========================================================================== */

.statrow { display: grid; gap: 6px; margin-bottom: 14px; }
.statrow:last-child { margin-bottom: 0; }
.statlab {
  display: grid; grid-template-columns: 46px 1fr 46px; align-items: center;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.statlab .v { font-weight: 700; }
.statlab .v.r { text-align: right; }
.statlab .k { text-align: center; color: var(--muted); font-size: 12.5px; }
.statbar { display: grid; grid-template-columns: 1fr 3px 1fr; align-items: center; height: 6px; }
.statbar .sb { height: 6px; background: #2B2B2B; overflow: hidden; display: flex; }
.statbar .sb.l { justify-content: flex-end; border-radius: 3px 0 0 3px; }
.statbar .sb.r { border-radius: 0 3px 3px 0; }
.statbar .sb i { display: block; height: 100%; transition: width .5s ease; }
.statbar .sb.l i { background: var(--eng); }
.statbar .sb.r i { background: var(--ned); }
.statbar .mid { height: 10px; background: #000; }

/* key numbers */
.kvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.kvgrid > div { background: var(--card); padding: 12px 11px; }
.kvgrid dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
.kvgrid dd { margin: 0; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kvgrid dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 3px; }

/* ==========================================================================
   Momentum
   ========================================================================== */

.momsvg { width: 100%; height: auto; display: block; }
.momkey {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted); margin-top: 8px;
}
.momkey b { font-weight: 700; }
.momkey .a { color: var(--eng); }
.momkey .b { color: var(--ned); }

/* ==========================================================================
   Live reporting feed
   ========================================================================== */

.selectrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.selectrow span { font-size: 13.5px; color: var(--text-2); }
select {
  flex: 1; background: #1C1C1C; color: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 10px 12px; font: inherit; font-size: 14px;
}
select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }

.feed { display: grid; gap: 2px; }
.post {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px;
  padding: 14px 0 14px 0;
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.post:first-child { border-top: 3px solid var(--red); }
.post .min { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.post h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.post h3.shout { text-transform: uppercase; letter-spacing: .02em; }
.post p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.post.fresh { animation: slidein .5s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px) } }

/* ==========================================================================
   Shorts rail
   ========================================================================== */

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 150px;
  gap: 10px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin: 0 calc(var(--gut) * -1); padding-inline: var(--gut);
}
.rail::-webkit-scrollbar { display: none; }
.short { border: 0; background: none; padding: 0; text-align: left; display: grid; gap: 8px; }
.thumb { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; }
.thumb svg { display: block; width: 100%; height: 100%; }
.thumb .play {
  position: absolute; inset: 0; margin: auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.85);
  display: grid; place-items: center;
}
.thumb .dur {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.8); color: #fff;
  font-size: 11px; font-weight: 500; padding: 2px 5px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.short .kick { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--yellow); }
.short .st { font-size: 14px; font-weight: 700; line-height: 1.3; }
.short[aria-pressed="true"] .st { color: var(--yellow); }
.short:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ==========================================================================
   Line-ups
   ========================================================================== */

.formation { background: var(--card); border-radius: var(--radius); padding: 12px; }
.formsvg { width: 100%; height: auto; display: block; border-radius: 4px; }
.formmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.formmeta b { color: #fff; font-weight: 700; }

.playerlist { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; margin-top: 10px; }
.pl {
  background: var(--card); padding: 11px 13px;
  display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: baseline;
}
.pl .num { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl .pn { font-size: 14.5px; font-weight: 500; }
.pl .pr { font-size: 12.5px; color: var(--muted); }
.pl .pr.hot { color: var(--yellow); font-weight: 700; }

/* ==========================================================================
   Countdown / predictor / streak / rating
   ========================================================================== */

.cd { display: flex; align-items: flex-end; gap: 10px; }
.cdu { display: grid; gap: 4px; justify-items: center; }
.cdn { font-size: 36px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cdl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cdsep { font-size: 30px; color: #3A3A3A; line-height: 1.1; font-weight: 300; }

input[type="range"] {
  width: 100%; accent-color: #FFD230; height: 28px; cursor: pointer; margin: 0;
}
#offset { accent-color: #B79CFF; }
input[type="range"]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.rangeends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ratehead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ratehead .who { font-size: 15px; font-weight: 700; }
.ratehead .val { font-size: 26px; font-weight: 700; color: var(--yellow); font-variant-numeric: tabular-nums; }

.bigpts { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bigpts .v { font-size: 46px; font-weight: 700; line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.bigpts .l { font-size: 13px; color: var(--muted); font-weight: 500; }

.scored { display: grid; gap: 11px; }
.sc-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: baseline; }
.sc-m { font-size: 15px; font-weight: 700; line-height: 1.2; }
.sc-m.y { color: #4ECB8F; }
.sc-m.n { color: var(--muted); }
.sc-t { font-size: 14px; line-height: 1.35; }
.sc-t small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.sc-p { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-p.on { color: #4ECB8F; }

.streak { display: flex; gap: 7px; margin-bottom: 12px; }
.wk {
  flex: 1; aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: #202020; border: 1px solid var(--line); color: var(--muted);
}
.wk.on { background: rgba(78,203,143,.18); border-color: #4ECB8F; color: #4ECB8F; }
.wk.next { border-style: dashed; }

.fixrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fixrow .f1 { font-size: 16px; font-weight: 700; }
.fixrow .f2 { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* second screen extras */
.paired {
  display: flex; gap: 12px; align-items: center;
  background: #16121F; border-bottom: 1px solid #332A4A;
  padding: 12px var(--gut);
}
.paired .p1 { font-size: 13.5px; font-weight: 700; color: #B79CFF; }
.paired .p2 { font-size: 12px; color: var(--muted); }

.clocks { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.ck { display: grid; gap: 4px; }
.ck .cl { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ck .cv { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ck.tv .cv { color: #B79CFF; }
.ckgap { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.warn { border-radius: 6px; padding: 12px 13px; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--alert); background: rgba(232,68,60,.14); }
.warn b { color: var(--alert); }
.warn.ok { border-color: #B79CFF; background: rgba(183,156,255,.13); }
.warn.ok b { color: #B79CFF; }

.qbar { height: 4px; border-radius: 2px; background: #2B2B2B; overflow: hidden; margin-bottom: 13px; }
.qbar i { display: block; height: 100%; background: #B79CFF; transition: width 1s linear; }

.pundit { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; }
.pav { width: 42px; height: 42px; border-radius: 50%; background: #2B2B2B; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.pq { font-size: 15.5px; line-height: 1.4; margin: 0 0 6px; }
.pw { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.storyline { border-left: 3px solid var(--yellow); padding-left: 13px; }
.storyline .sk { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.storyline p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }

.h2h { display: flex; gap: 6px; margin-bottom: 12px; }
.h2h span {
  flex: 1; height: 34px; border-radius: 4px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: #202020; border: 1px solid var(--line); color: var(--muted);
}
.h2h span.w { background: rgba(0,122,61,.3); border-color: #2C8C55; color: #6FE0A0; }
.h2h span.l { background: rgba(187,25,25,.3); border-color: #8E2020; color: #FF8A8A; }

/* ==========================================================================
   Bottom nav
   ========================================================================== */

.bottomnav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--black);
  border-top: 1px solid #1E1E1E;
  flex: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav {
  border: 0; background: none; color: var(--muted);
  display: grid; justify-items: center; gap: 4px;
  padding: 9px 2px 10px;
  font-size: 11px; font-weight: 500;
  border-top: 3px solid transparent;
  margin-top: -1px;
}
.nav[aria-selected="true"] { color: #fff; border-top-color: var(--red); font-weight: 700; }
.nav:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
.nav svg { display: block; }

/* ==========================================================================
   Drawer (hamburger)
   ========================================================================== */

.scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.62);
  z-index: 118; opacity: 0; pointer-events: none; transition: opacity .22s;
}
.scrim.open { opacity: 1; pointer-events: auto; }

/* the menu's own styling now lives in the profile menu section below */

.drawer .dsec {
  padding: 16px 16px 6px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}

/* toast */
.toast {
  position: absolute; left: 50%; bottom: 86px; transform: translate(-50%, 10px);
  background: #fff; color: #101010; font-size: 13.5px; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: 82%; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* swipe affordance */
.swipehint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 0 0;
}
.swipehint i {
  width: 6px; height: 6px; border-radius: 50%; background: #333; display: block;
  transition: background .2s, width .2s;
}
.swipehint i.on { background: var(--yellow); width: 18px; border-radius: 3px; }

.stage-anim { animation: statein .32s cubic-bezier(.2,.7,.3,1); }
@keyframes statein { from { opacity: 0; transform: translateX(var(--from, 16px)) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Multi-sport additions
   ========================================================================== */

/* crest colours are now generic A/B sides */
.crest.a { background: var(--eng); color: var(--eng-ink); }
.crest.b { background: var(--ned); color: #fff; }
.compback { width: 36px; height: 36px; }

/* ---- stacked header (cricket, tennis) ---- */
.stackwrap { padding: 10px var(--gut) 14px; display: grid; gap: 7px; }
.stackwrap .statusrow { justify-self: start; margin-bottom: 2px; }
.srow {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  align-items: baseline;
}
.srow .sname { font-size: 16px; font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; }
.srow .sscore { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text-2); }
.srow .sdet { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -3px; }
.srow.now .sname, .srow.now .sscore { color: #fff; font-weight: 700; }
.servedot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); display: inline-block; }
.strap { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ---- Home index ---- */
.homeintro .note { max-width: none; }
.cardlist { display: grid; gap: 10px; }
.ecard {
  display: grid; gap: 6px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid transparent; border-radius: var(--radius);
  padding: 14px; transition: border-color .15s, background .15s;
}
.ecard:hover { border-color: #444; background: #202020; }
.ecard.top { border-color: var(--yellow); background: rgba(255,210,48,.06); }
.ecard:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ec-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ec-sport {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.ec-when { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ec-when.live { color: var(--live); }
.ec-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.ec-sub { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ec-ctx { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.ec-foot { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.ec-sig {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ec-sig.hot { color: var(--yellow); }
.ec-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  background: var(--card-2); color: var(--text-2); padding: 3px 8px; border-radius: 3px;
}
.ec-go { margin-left: auto; display: grid; place-items: center; }

/* ---- shared smaller bits ---- */
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c.alert { border: 1px solid rgba(232,68,60,.55); background: rgba(232,68,60,.08); }
.alerttag { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; color: var(--alert); margin-bottom: 9px; }
.c.dashed { border: 1px dashed var(--line); }
.signp { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; }
.signnote { margin: 0 0 12px; color: #B79CFF; }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.searchin {
  width: 100%; background: #101010; border: 1px solid var(--line); border-radius: 4px;
  color: #fff; font: inherit; font-size: 15px; padding: 12px 13px;
}
.lgtop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lgpos { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lgpos small { font-size: 13px; font-weight: 400; color: var(--muted); }
.lgmove { font-size: 13px; font-weight: 700; color: #4ECB8F; }
.potmtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.potmtop .pname { font-size: 17px; font-weight: 700; }
.potmtop .pscore { font-size: 28px; font-weight: 700; color: var(--yellow); font-variant-numeric: tabular-nums; }
.synctop { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.synctop b { color: #B79CFF; }
.pl.follow { grid-template-columns: 1fr auto; align-items: center; }
.pl.score3 { grid-template-columns: 1fr 58px auto; align-items: center; }
.pl.bat4 { grid-template-columns: 1fr 44px 44px; align-items: center; }
.pl.oop { grid-template-columns: 62px 1fr auto; align-items: center; }
.pl .nums { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.pr.small { font-size: 12px; font-weight: 400; }
.totrow {
  display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; margin-top: 1px;
  background: var(--card-2); border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.totrow b { color: #fff; }

/* ---- cricket ---- */
.audio .audiotop { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.audiobtn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: #0E3B22;
  display: grid; place-items: center;
}
.audiobtn:hover { background: #14512F; }
.audiobtn:focus-visible { outline: 2px solid #4ADE80; outline-offset: 2px; }
.at1 { font-size: 15.5px; font-weight: 700; }
.at2 { font-size: 12.5px; color: var(--muted); }
.wave { width: 100%; height: 22px; display: block; margin-top: 12px; }

.sess { display: grid; gap: 5px; margin-bottom: 12px; }
.sess:last-of-type { margin-bottom: 0; }
.sesslab { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.sesslab b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.over { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.ball {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; background: #202020; color: #fff;
  border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.ball.four { background: rgba(255,210,48,.2); border-color: var(--yellow); color: var(--yellow); }
.ball.wkt { background: rgba(232,68,60,.22); border-color: var(--alert); color: var(--alert); }
.ball.now { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--muted); }
.overcap { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }

.wagonsvg { width: 100%; max-width: 230px; margin: 0 auto 12px; display: block; height: auto; }
.wagonkey { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.wagonkey span { display: inline-flex; align-items: center; gap: 5px; }
.wagonkey i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.wpbar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: #2B2B2B; }
.wpbar i { display: block; height: 100%; }
.wpbar i.a { background: #4ADE80; }
.wpbar i.d { background: #5B6470; }
.wpbar i.b { background: #F2B705; }
.wpkey { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.wpkey .a b { color: #4ADE80; }
.wpkey .d b { color: #96A0AC; }
.wpkey .b b { color: #F2B705; }
.wpspark { margin-top: 14px; }
.wpsvg { width: 100%; height: 34px; display: block; }
.wpsparkl { font-size: 11px; color: var(--muted); }

.bat { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.bat.lead .bn { color: var(--yellow); font-weight: 700; }
.bn { font-size: 14.5px; font-weight: 500; }
.br { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.br small { font-size: 12px; font-weight: 400; color: var(--muted); }
.bx { font-size: 12px; color: var(--muted); min-width: 56px; text-align: right; }
.ptotal { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; font-size: 13px; color: var(--muted); }
.ptotal b { color: #fff; font-variant-numeric: tabular-nums; }

/* ---- tennis ---- */
.courtlist { display: grid; gap: 8px; }
.court {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px;
  padding: 12px 13px; border-radius: 6px; text-align: left;
  background: var(--card); border: 1px solid var(--line);
}
.court:hover { border-color: #555; }
.court:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.court.top { border-color: var(--yellow); background: rgba(255,210,48,.07); }
.court .cname { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.court.top .cname { color: var(--yellow); }
.court .cname { grid-column: 1; grid-row: 1; }
.court .sig { grid-column: 2; grid-row: 1; justify-self: end; font-size: 15px; font-weight: 700; color: #9ADFA0; font-variant-numeric: tabular-nums; }
.court .cmatch { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; font-weight: 700; }
.court .cstate { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.court.top .sig { color: var(--yellow); }

.pgrid { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; }
.pgrid::-webkit-scrollbar { display: none; }
.pgcol { display: grid; gap: 3px; justify-items: center; flex: none; }
.pgcol .pgl { font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.pgcol i { width: 13px; height: 9px; border-radius: 2px; background: #333; display: block; }
.pgcol i.won { background: var(--yellow); }

.cent { display: grid; gap: 14px; }
.centrow { display: grid; grid-template-columns: 46px 1fr; gap: 13px; }
.cy { font-size: 15px; font-weight: 700; color: #9ADFA0; font-variant-numeric: tabular-nums; }
.ct { font-size: 14.5px; font-weight: 700; }
.cb { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ---- rugby ---- */
.lawcard { border-left: 3px solid var(--yellow); }
.lawref { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--yellow); margin-bottom: 8px; }
.lawbody { margin: 0; font-size: 14.5px; line-height: 1.5; }
.lawmeta { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

.tmobar { height: 5px; border-radius: 3px; background: #2B2B2B; overflow: hidden; margin: 4px 0 8px; }
.tmobar i { display: block; height: 100%; background: var(--live); transition: width 1s linear; }
.tmotime { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.tmotime b { color: #fff; font-variant-numeric: tabular-nums; }

.phasetop { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pcount { font-size: 38px; font-weight: 700; line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.plab { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.phaserow { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.phaserow i { width: 12px; height: 12px; border-radius: 2px; background: #2B2B2B; display: block; }
.phaserow i.on { background: #4A5560; }
.phaserow i.now { background: var(--yellow); }

/* ---- sofa mode ---- */
.viewport.sofa .body { font-size: 15px; }
.viewport.sofa .optbtn { font-size: 15px; padding: 15px 14px; border-radius: 10px; }
.viewport.sofa .q { font-size: 17px; }
.viewport.sofa .section { padding: 18px var(--gut); }

/* drawer sublabel */
.drawer .dl { flex-direction: column; align-items: flex-start; gap: 3px; }
.drawer .dsub { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ==========================================================================
   Home feed
   ========================================================================== */

.photo { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B0E12; }

/* section head with the dotted arrow */
.feedhead {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0 0 14px; width: 100%; text-align: left;
  color: #fff;
}
.feedhead span { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.feedhead .secarrow { color: #fff; flex: none; }
.feedhead:hover .secarrow { color: var(--yellow); }
.feedhead:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ---- hero ---- */
.hero { position: relative; }
.herophoto { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.heroscrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.35) 58%, #0D0D0D 100%);
}
.herotext { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) 4px; }
.herokick {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: 8px;
}
.herohead {
  margin: 0; font-size: 29px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.025em; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.herobody { padding-top: 14px; }
.herostand { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: var(--text-2); }

.engage { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.eng {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border-radius: 5px; padding: 8px 12px;
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.hys { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; text-align: center; }
.hysq { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.hysopts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hysbtn {
  border: 1px solid var(--line); background: transparent; color: #fff;
  font-size: 17px; font-weight: 500; padding: 13px 30px; border-radius: 999px;
  transition: border-color .15s, background .15s, color .15s;
}
.hysbtn:hover { border-color: #fff; }
.hysbtn[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: #101010; font-weight: 700; }
.hysbtn:disabled { opacity: .6; }
.hysbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.hys .results { text-align: left; margin-top: 18px; }
.hys .tally { text-align: left; }

/* ---- live rail ---- */
.rail.liverail { grid-auto-columns: 236px; }
.lcard, .vcard, .bcard {
  display: grid; gap: 7px; text-align: left; border: 0; background: none; padding: 0;
}
.lcard:focus-visible, .vcard:focus-visible, .bcard:focus-visible, .rcard:focus-visible, .comptab:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 8px;
}
.lphoto, .vphoto, .bphoto {
  position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: #111;
}
.lcard.top .lphoto { box-shadow: 0 0 0 2px var(--yellow); }
.chiplive, .chipsoon, .chipdone {
  position: absolute; left: 8px; top: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 4px;
}
.chiplive { background: var(--live); color: var(--live-ink); }
.chipsoon { background: rgba(0,0,0,.72); color: var(--yellow); border: 1px solid var(--yellow); }
.chipdone { background: rgba(0,0,0,.72); color: var(--text-2); }
.lbadge {
  position: absolute; right: 8px; top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  background: rgba(0,0,0,.72); color: #fff; padding: 4px 7px; border-radius: 4px;
}
.lsport {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.ltitle { font-size: 15px; font-weight: 700; line-height: 1.28; }
.lsub { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lsig { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.lsig.hot { color: var(--yellow); }

/* ---- video cards ---- */
.vplay {
  position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.85);
  display: grid; place-items: center;
}
.vdur {
  position: absolute; right: 7px; bottom: 7px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.82); color: #fff; font-size: 11px; font-weight: 500;
  padding: 3px 6px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.vtitle { font-size: 15px; font-weight: 700; line-height: 1.28; }
.rail .vcard, .rail .bcard { grid-row: 1; }
.rail { grid-auto-columns: 214px; }

/* ---- sport on the BBC ---- */
.bcard.live .bphoto { box-shadow: 0 0 0 1.5px var(--live); }
.btitle { font-size: 15px; font-weight: 700; line-height: 1.28; }
.bsub { font-size: 12.5px; color: var(--muted); }

/* ---- tables ---- */
.tablewrap { background: var(--card); border-radius: var(--radius); overflow: hidden; }
.ltable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ltable th {
  font-size: 12px; font-weight: 400; color: var(--muted); text-align: right;
  padding: 13px 8px 11px; white-space: nowrap;
}
.ltable th.tpos { width: 34px; }
.ltable th.tname { text-align: left; padding-left: 14px; }
.ltable td { font-size: 15px; font-weight: 700; text-align: right; padding: 13px 8px; }
.ltable td.tpos { color: #fff; font-weight: 500; text-align: left; padding-left: 14px; }
.ltable td.tname {
  text-align: left; font-weight: 500; padding-left: 0;
  display: flex; align-items: center; gap: 10px;
}
.ltable tr.lead { background: #232323; }
.ltable tbody tr + tr { border-top: 1px solid var(--line-soft); }
.ltable th:last-child, .ltable td:last-child { padding-right: 16px; }

.tbadge {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ---- competition tabs ---- */
.comptabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.comptabs::-webkit-scrollbar { display: none; }
.comptab {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  border: 1px solid var(--line); background: var(--card); color: #fff;
  border-radius: 999px; padding: 9px 18px 9px 10px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
}
.comptab:hover { border-color: #555; }
.comptab[aria-pressed="true"] { background: #2A2A2A; border-color: #4A4A4A; font-weight: 700; }

/* ---- rumour cards ---- */
.rcard {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px; text-align: left; width: 100%;
}
.rcard:hover { border-color: #444; }
.rcard .tbadge { width: 44px; height: 44px; font-size: 13px; }
.rtitle { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.rviews { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rail .rcard { grid-auto-columns: 244px; }

/* hero sits flush to the app chrome */
.homefeedtop { padding-top: 0; }

/* ==========================================================================
   Your daily drop — carousel and full-screen player
   ========================================================================== */

.dropwrap { position: relative; padding-top: 26px; }
.droppill {
  position: absolute; top: 0; left: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: #1E1E1E; border: 1px solid #2E2E2E; border-radius: 999px;
  padding: 9px 14px; box-shadow: 0 8px 22px -10px rgba(0,0,0,.9);
}
.droppill b { font-size: 14.5px; font-weight: 700; }
.dropcount {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); padding-left: 10px;
  border-left: 1px solid #333;
}
.rail.droprail { grid-auto-columns: 132px; }
.droprail .thumb { aspect-ratio: 9 / 16; }

/* ---- full-screen takeover ---- */
.takeover {
  position: absolute; inset: 0; z-index: 70;
  background: #000; overflow: hidden;
  display: block;
  animation: torise .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes torise { from { opacity: 0; transform: translateY(14px) } }
.tovideo { position: absolute; inset: 0; }
.tovideo .photo { width: 100%; height: 100%; object-fit: cover; }
.toscrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 42%, rgba(0,0,0,.82) 100%);
}

.tonav { position: absolute; inset: 0; display: flex; }
.tozone { flex: 1; border: 0; background: none; padding: 0; cursor: pointer; }
.tozone:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }

.toback {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.toback:hover { background: rgba(0,0,0,.65); }
.toback:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.torail {
  position: absolute; right: 12px; bottom: 132px; z-index: 4;
  display: grid; gap: 22px; justify-items: center;
}
.toact {
  border: 0; background: none; color: #fff; display: grid; justify-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.toact.on { --heartfill: #E8443C; color: #E8443C; }
.toact:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }

.tofoot {
  position: absolute; left: 0; right: 68px; bottom: 56px; z-index: 4;
  padding: 0 16px; display: grid; gap: 11px;
}
.tochan { display: grid; grid-template-columns: 40px 1fr; gap: 11px; align-items: center; }
.toav {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1B3A6B; border: 1.5px solid rgba(255,255,255,.5);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.tocn { font-size: 15.5px; font-weight: 700; }
.tohandle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: #D4D8DD;
}
.tocap {
  margin: 0; font-size: 14.5px; line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.totags { display: flex; gap: 9px; flex-wrap: wrap; }
.totag {
  border: 0; background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 8px 15px; border-radius: 999px;
}
.totag:hover { background: rgba(255,255,255,.24); }
.totag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.toprog {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.tosegs { display: flex; gap: 5px; flex: 1; }
.toseg {
  flex: 1; height: 3px; border: 0; padding: 0; border-radius: 2px;
  background: rgba(255,255,255,.3); cursor: pointer;
}
.toseg.on { background: #B07CFF; }
.toseg:hover { background: rgba(255,255,255,.55); }
.toseg:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tocount { font-size: 12.5px; color: #D4D8DD; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   Live page: status strip, Listen live, summary, reporting, scorecard
   ========================================================================== */

:root { --teal: var(--live); --teal-ink: var(--live-ink); }

/* ---- In Play chip + viewing count ---- */
.statestrip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 var(--gut) 2px;
}
.inplay {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 3px;
  background: #2A2A2A; color: var(--text-2);
}
.inplay.on { background: var(--teal); color: var(--teal-ink); }
.watching {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--teal);
  font-variant-numeric: tabular-nums;
}

/* ---- teal state line ---- */
.stateline {
  margin: 0; padding: 2px var(--gut) 14px;
  font-size: 14px; font-weight: 500; color: var(--teal); line-height: 1.4;
}

/* ---- Listen live ---- */
.listenrow {
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center;
  padding: 0 var(--gut) 16px;
}
.listenbtn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--teal); color: var(--teal-ink); border: 0;
  font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 3px;
  white-space: nowrap;
}
.listenbtn:hover { background: #63D2D2; }
.listenbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.listenmeta { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.listenmeta b { color: var(--text-2); font-weight: 700; }

/* ---- summary box ---- */
.summary {
  margin: 0; padding: 16px 18px 16px 34px;
  background: var(--card); border-radius: var(--radius);
  display: grid; gap: 12px;
}
.summary li { font-size: 15px; line-height: 1.45; }
.summary li::marker { color: var(--muted); }
.summary li.link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- live reporting ---- */
.byline { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.post { display: block; padding: 0 0 18px; border: 0; }
.post:first-child { border-top: 0; }
.stamp {
  display: inline-block; background: var(--yellow); color: #101010;
  font-size: 12.5px; font-weight: 700; padding: 5px 11px;
  font-variant-numeric: tabular-nums;
}
.postbody {
  background: var(--card); border-top: 3px solid var(--yellow);
  padding: 15px 16px; margin-top: -1px;
}
.postbody h3 { margin: 0 0 7px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.postbody h3.shout { text-transform: uppercase; letter-spacing: .02em; }
.postbody p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.react { display: flex; align-items: center; gap: 18px; margin-top: 15px; }
.rbtn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none;
  color: var(--text-2); font-size: 13.5px; font-weight: 500; padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.rbtn:hover { color: #fff; }
.rbtn.share { margin-left: auto; font-weight: 700; }
.rbtn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

/* ---- scorecard ---- */
.sctable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sctable th {
  font-size: 12px; font-weight: 400; color: var(--muted);
  text-align: right; padding: 12px 8px 10px;
}
.sctable th.scname { text-align: left; padding-left: 16px; }
.sctable td { font-size: 14px; text-align: right; padding: 13px 8px; color: var(--text-2); }
.sctable td.scr { font-size: 16px; font-weight: 700; color: #fff; }
.sctable td.scname {
  text-align: left; padding-left: 16px;
  display: flex; align-items: flex-start; gap: 9px;
}
.sctable td.scname b { font-size: 15px; font-weight: 700; color: #fff; }
.scdis { font-size: 12.5px; color: var(--muted); }
.sctable tbody tr + tr { border-top: 1px solid var(--line-soft); }
.sctable tr.notout td { color: var(--teal); }
.sctable tr.notout td.scr, .sctable tr.notout td.scname b { color: var(--teal); }
.sctable tr.notout { box-shadow: inset 3px 0 0 var(--teal); }
.batico { color: var(--teal); padding-top: 2px; }
.sctable th:last-child, .sctable td:last-child { padding-right: 16px; }

/* ---- rail arrows on pointer devices ---- */
.railwrap { position: relative; }
@media (hover: hover) and (min-width: 460px) {
  .railbtn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 44px; border: 0; background: rgba(0,0,0,.72);
    display: grid; place-items: center; z-index: 3; opacity: 0; transition: opacity .15s;
  }
  .railwrap:hover .railbtn { opacity: 1; }
  .railbtn.prev { left: 0; }
  .railbtn.next { right: 0; background: #fff; }
  .railbtn:focus-visible { opacity: 1; outline: 2px solid var(--yellow); outline-offset: -2px; }
}
@media not all and (hover: hover) { .railbtn { display: none; } }

/* ==========================================================================
   Collapsing match header
   ========================================================================== */

.viewport { --hdr: .26s cubic-bezier(.2,.7,.3,1); }

.sportrow, .paired, .statestrip, .stateline, .listenrow,
.side .tsub, .srow .sdet, .strap {
  overflow: hidden;
  transition: max-height var(--hdr), opacity .12s ease,
              padding var(--hdr), margin var(--hdr), border-width var(--hdr);
  max-height: 200px;
}
.crest, .bigscore, .kotime, .scorewrap, .stackwrap, .srow .sscore, .compline {
  transition: width var(--hdr), height var(--hdr), font-size var(--hdr), padding var(--hdr);
}

.viewport.condensed .sportrow,
.viewport.condensed .statestrip,
.viewport.condensed .stateline,
.viewport.condensed .listenrow,
.viewport.condensed .side .tsub,
.viewport.condensed .srow .sdet,
.viewport.condensed .strap {
  max-height: 0; opacity: 0; pointer-events: none;
  padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;
}
.viewport.condensed .paired {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0;
}

.viewport.condensed .crest { width: 34px; height: 34px; font-size: 11px; border-width: 1px; }
.viewport.condensed .side .tname { font-size: 13.5px; }
.viewport.condensed .bigscore { font-size: 25px; }
.viewport.condensed .kotime { font-size: 19px; }
.viewport.condensed .clockline { font-size: 12px; }
.viewport.condensed .statusrow { font-size: 11px; }
.viewport.condensed .scorewrap { padding-top: 4px; padding-bottom: 10px; gap: 6px; }
.viewport.condensed .stackwrap { padding-top: 4px; padding-bottom: 10px; gap: 2px; }
.viewport.condensed .srow .sscore { font-size: 17px; }
.viewport.condensed .srow .sname { font-size: 14px; }
.viewport.condensed .compline { padding-top: 2px; padding-bottom: 0; }
.viewport.condensed .compname { font-size: 12.5px; }

/* a bit more room for the scrolling body in the first place */
.viewport { height: 840px; max-height: calc(100dvh - 150px); }

@media (prefers-reduced-motion: reduce) {
  .sportrow, .paired, .statestrip, .stateline, .listenrow,
  .side .tsub, .srow .sdet, .strap, .crest, .bigscore, .kotime,
  .scorewrap, .stackwrap, .srow .sscore, .compline { transition: none; }
}

/* ==========================================================================
   Shorts: one in focus, neighbours peeking
   ========================================================================== */

.focusrail {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 2px 0 14px;
  margin: 0 calc(var(--gut) * -1);
  /* keep a sideways swipe sideways: no scroll chaining into the page */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
}
.focusrail::-webkit-scrollbar { display: none; }
.focusrail::before, .focusrail::after { content: ""; flex: 0 0 10%; }

.fcard {
  flex: 0 0 76%; scroll-snap-align: center;
  border: 0; background: none; padding: 0; text-align: left;
}
.fcard:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 12px; }

.fphoto {
  position: relative; display: block;
  aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #111;
  transform: scale(.93); opacity: .5;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .26s ease, box-shadow .26s ease;
}
.fcard.on .fphoto { transform: scale(1); opacity: 1; box-shadow: 0 18px 40px -20px rgba(0,0,0,.9); }

.fscrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.8) 100%);
}
.fcard .play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: 1.5px solid rgba(255,255,255,.85);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .26s ease;
}
.fcard .play svg { width: 20px; height: 20px; }
.fcard.on .play { opacity: 1; }
.fcard .dur {
  position: absolute; right: 10px; top: 10px;
  background: rgba(0,0,0,.8); color: #fff; font-size: 11.5px; font-weight: 500;
  padding: 3px 7px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.fmeta { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: grid; gap: 6px; }
.fkick {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--yellow);
}
.ftitle { font-size: 17px; font-weight: 700; line-height: 1.25; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .fphoto, .fcard .play { transition: none; }
}

/* ==========================================================================
   Home — the immersive live takeover
   ==========================================================================
   Whatever is most worth watching runs full bleed at the top of Home, with
   the state of it and one way in floated over the picture.
   ========================================================================== */

/* named apart from the shorts player's own .takeover, which is a different
   thing entirely and was quietly inheriting these rules */
.livetake {
  position: relative;
  aspect-ratio: 9 / 13;
  max-height: 62vh;
  min-height: 420px;
  overflow: hidden;
  background: #000;
  display: flex; flex-direction: column;
  isolation: isolate;
}

.tostill { position: absolute; inset: 0; overflow: hidden; }
.tokb {
  position: absolute; inset: -3%;
  animation: tokb 26s ease-in-out infinite alternate;
  will-change: transform;
}
.tokb .photo { width: 100%; height: 100%; display: block; object-fit: cover; }
@keyframes tokb {
  from { transform: scale(1) translate3d(-0.8%, 0.5%, 0); }
  to   { transform: scale(1.07) translate3d(1.2%, -1%, 0); }
}

.toveil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.05) 44%,
      rgba(0,0,0,.62) 72%, rgba(0,0,0,.94) 100%);
}
/* a slow sheen, so the frame reads as moving picture rather than a still */
.tosweep {
  position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.055) 50%, transparent 62%);
  animation: tosweep 9s linear infinite;
  pointer-events: none;
}
@keyframes tosweep {
  from { transform: translate3d(-36%, 0, 0); }
  to   { transform: translate3d(36%, 0, 0); }
}

.totop {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding: 12px var(--gut) 0;
}
.tospacer { flex: 1; }
.tochip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22);
  color: #fff; padding: 5px 9px; border-radius: 3px;
  backdrop-filter: blur(6px);
}
.tochip i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.tochip.on { background: var(--live); border-color: transparent; color: var(--live-ink); }
.tochip.on i { background: var(--live-ink) !important; }
.tochip.on i { background: #fff; animation: tobeat 1.6s ease-in-out infinite; }
@keyframes tobeat { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.towatch {
  font-size: 11.5px; color: #fff; font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
  font-variant-numeric: tabular-nums;
}
.toic {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px);
}
.toic svg path { stroke: #fff; fill: none; }
.toic:first-of-type svg path:first-child { fill: #fff; stroke: none; }

/* the floating card */
.tocard {
  position: relative; z-index: 2; margin-top: auto;
  margin: auto var(--gut) 16px;
  background: rgba(14,14,14,.66);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 14px 15px 13px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.95);
}
.tokick {
  display: flex; align-items: center; gap: 7px; margin: 0 0 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}
.tokick svg { width: 14px; height: 14px; }

.tonames {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: center; margin-bottom: 4px;
}
.tos {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; line-height: 1.2;
}
.tos.r { justify-content: flex-end; text-align: right; }
.tos i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.toline {
  font-size: 23px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tosub {
  margin: 0 0 12px; text-align: center;
  font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}

.tostats { display: grid; gap: 7px; margin-bottom: 13px; }
.tostat {
  display: grid; grid-template-columns: 30px 1fr auto 1fr 30px;
  align-items: center; gap: 8px;
}
.tonum {
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tonum.r { text-align: right; }
.tolab {
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
  letter-spacing: .02em;
}
.tobar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); display: flex; overflow: hidden; }
.tobar.a { justify-content: flex-end; }
.tobar i {
  display: block; height: 100%; border-radius: 3px;
  transform-origin: left center;
  animation: tobar .75s cubic-bezier(.2,.7,.3,1) both;
}
.tobar.a i { transform-origin: right center; }
@keyframes tobar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tocta {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: var(--yellow); color: #000;
  border-radius: 8px; padding: 12px 12px 12px 14px;
  font-size: 14.5px; font-weight: 700;
}
.tocta svg path { stroke: #000; }
.tocta:hover { background: #FFDD5C; }
.tocta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Home — participation, led by the picture
   ========================================================================== */

.pollsec { padding-top: 18px; }

.vpoll { display: grid; gap: 0; }
.vpkick {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--yellow);
}
.vpq {
  margin: 7px 0 13px; font-size: 19px; font-weight: 700;
  line-height: 1.25; letter-spacing: -.01em;
}
.vpopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vpopts.three { grid-template-columns: repeat(3, 1fr); }

.vpopt {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); padding: 0; text-align: left;
  transition: border-color .15s, transform .15s;
}
.vpopt:hover:not(.done) { border-color: #5A5A5A; transform: translateY(-2px); }
.vpopt:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.vpimg { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vpimg .photo { width: 100%; height: 100%; display: block; }
.vpveil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.72));
}
.vptick {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--yellow);
}
.vptick svg path { stroke: #000; }
.vpfill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,210,48,.16); border-right: 2px solid rgba(255,210,48,.6);
  transition: width .8s cubic-bezier(.2,.7,.3,1); z-index: 0;
}
.vpopt.mine .vpfill { background: rgba(255,210,48,.24); }
.vprow {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 11px 12px 12px;
}
.vplab, .vppct { position: relative; z-index: 1; }
.vplab { font-size: 14px; font-weight: 700; line-height: 1.25; }
.vppct {
  font-size: 15px; font-weight: 800; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.vpopt.mine { border-color: var(--yellow); }
.vpafter { margin: 11px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   Home — the lead story, headline on the picture
   ========================================================================== */

.story { border-bottom: 1px solid var(--line-soft); }
.stphoto { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.stphoto .photo { width: 100%; height: 100%; display: block; }
.stveil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.05) 34%, rgba(0,0,0,.86) 100%);
}
.stkick {
  position: absolute; top: 12px; left: var(--gut);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow); text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.sthead {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 13px;
  margin: 0; font-size: 25px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}
.stbody { padding: 13px var(--gut) 18px; }
.ststand { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

/* ==========================================================================
   Home — cards carry their own picture
   ========================================================================== */

.ecard {
  grid-template-columns: 108px 1fr; align-items: stretch; gap: 12px;
  padding: 10px;
}
.ecphoto {
  position: relative; display: block; border-radius: 6px; overflow: hidden;
  aspect-ratio: 4 / 3; background: #111;
}
.ecphoto .photo { width: 100%; height: 100%; display: block; }
.ecdot {
  position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); box-shadow: 0 0 0 2px rgba(0,0,0,.55);
  animation: tobeat 1.6s ease-in-out infinite;
}
.ectext { display: grid; gap: 5px; align-content: center; min-width: 0; }
.ectext .ec-title { font-size: 15.5px; }
.ectext .ec-ctx {
  font-size: 12.5px; margin-top: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.rcard { grid-template-columns: 76px 1fr; padding: 10px; align-items: center; }
.rphoto {
  position: relative; display: block; border-radius: 6px; overflow: hidden;
  aspect-ratio: 1 / 1; background: #111;
}
.rphoto .photo { width: 100%; height: 100%; display: block; }
.rveil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05)); }
.rphoto .tbadge {
  position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; font-size: 9px;
}
.rtext { display: grid; min-width: 0; }
.rail .rcard { grid-auto-columns: 256px; }

/* sideways rails stay sideways */
.rail, .comptabs, .pgrid { touch-action: pan-x; overscroll-behavior-x: contain; }

@media (prefers-reduced-motion: reduce) {
  .tokb, .tosweep, .tochip.on i, .ecdot { animation: none; }
  .tobar i, .vpfill { transition: none; animation: none; }
}

/* ==========================================================================
   The menu — a profile, opening from the right
   ========================================================================== */

.drawer {
  position: absolute; inset: 0 0 0 14%;
  background: #0C0C0C; border-left: 1px solid var(--line);
  z-index: 120; transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.9);
}
.drawer.open { transform: none; }

.dtop {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--gut) 4px;
}
.dspacer { flex: 1; }
.dtop .iconbtn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #141414;
  display: grid; place-items: center;
}
.dtop .iconbtn:hover { background: #1E1E1E; }
.dbadge { position: relative; }
.dbadge i {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  display: grid; place-items: center; border: 2px solid #0C0C0C;
}

.dme {
  display: flex; align-items: center; gap: 13px;
  padding: 10px var(--gut) 4px;
}
.dav {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, #3A6EA5, #1B3A5C);
  border: 2px solid #2E2E2E;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 800; color: #fff;
}
.dme h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }

.dblock { padding: 18px var(--gut) 0; }
.dblock.last { padding-bottom: 28px; }
.dh2 {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0 0 12px; color: #fff; width: 100%;
}
.dh2 span { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.dh2 .secarrow { color: var(--muted); }
button.dh2:hover .secarrow { color: var(--yellow); }

.dchips { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 calc(var(--gut) * -1); padding-inline: var(--gut); touch-action: pan-x; }
.dchips::-webkit-scrollbar { display: none; }
.dchip {
  flex: none; border: 1px solid #3A3A3A; background: transparent; color: #fff;
  border-radius: 999px; padding: 11px 19px; font-size: 15px; font-weight: 500;
  white-space: nowrap;
}
.dchip:hover { border-color: #666; background: #161616; }
.dchip.ic { padding: 11px 13px; display: grid; place-items: center; }

.dvotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.dvotes li { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; }
.dmark {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
}
.dmark.yes { background: #37C26B; }
.dmark.no { background: #E0443C; }
.dmark.no svg path { stroke: #fff; }
.dmark.wait { background: #2A2A2A; color: var(--muted); }
.dvt { display: grid; gap: 3px; min-width: 0; }
.dvt b { font-size: 16px; font-weight: 700; line-height: 1.25; }
.dvt span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.dnote { margin: 13px 0 0; font-size: 12.5px; color: var(--muted); }

.dcom {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start;
  background: none; border: 0; padding: 0 0 15px; text-align: left; width: 100%; color: #fff;
}
.dcimg { width: 42px; height: 42px; border-radius: 7px; overflow: hidden; background: #111; }
.dcimg .photo { width: 100%; height: 100%; }
.dct { display: grid; gap: 3px; min-width: 0; }
.dct b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.dct span {
  font-size: 13.5px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.drew { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dbadge2 {
  border: 1px solid var(--line); border-radius: 10px; background: #131313;
  padding: 13px 9px 11px; text-align: center; display: grid; gap: 5px; justify-items: center;
}
.dmedal {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #6B4BC4, #2C1D52);
  border: 2px solid #C9A227;
  display: grid; place-items: center;
}
.dbadge2 b { font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.dbadge2 span { font-size: 10.5px; color: var(--muted); }

.drawer nav { display: grid; gap: 2px; }
.drawer .dl {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: #131313; border: 1px solid transparent;
  border-radius: 9px; padding: 13px 14px; color: #fff;
}
.drawer .dl:hover { border-color: #3C3C3C; background: #181818; }
.drawer .dl.on { border-color: var(--yellow); }
.drawer .dl > span:first-child { font-size: 15.5px; font-weight: 700; display: grid; gap: 2px; flex: 1; min-width: 0; }
.dlive, .dwhen { flex: none; }
.drawer .dsub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.dlive { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--live); }
.dwhen { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

/* ==========================================================================
   Header: the menu sits on the right, where the menu opens from
   ========================================================================== */

.headrow { grid-template-columns: 1fr 44px 44px auto; }
.headrow .bbcblocks { justify-self: start; margin-left: 10px; }
.menubtn {
  width: auto; height: 36px; padding: 0 9px 0 3px; margin-right: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #333; border-radius: 999px; background: #141414;
}
.menubtn:hover { border-color: #555; }
.menubtn svg { width: 18px; height: 18px; }
.meav, .dav {
  display: grid; place-items: center; border-radius: 50%;
  background: #3A3A3A; color: #E4E4E4; font-weight: 800;
  border: 1px dashed #6A6A6A;
}
.meav { width: 28px; height: 28px; font-size: 13px; }

.dav { width: 56px; height: 56px; font-size: 23px; position: relative; flex: none; cursor: pointer; }
.dav:hover { border-color: #9A9A9A; }
.davadd {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--yellow); color: #000;
  font-size: 15px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; border: 2px solid #0C0C0C;
}

/* Live today in the menu: the Home cards, scaled to the drawer */
.drail { margin: 0 calc(var(--gut) * -1); padding-inline: var(--gut); grid-auto-columns: 214px; }
.drail .lcard.top { outline: 1.5px solid var(--yellow); outline-offset: 2px; border-radius: 8px; }

/* ==========================================================================
   The story so far
   ========================================================================== */

.rcp { display: grid; gap: 12px; }
.rcpmodes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: #151515; border: 1px solid var(--line); border-radius: 10px; padding: 4px;
}
.rcpmodes button {
  border: 0; background: transparent; color: var(--text-2);
  border-radius: 7px; padding: 8px 6px 7px; display: grid; gap: 1px; justify-items: center;
}
.rcpmodes button span { font-size: 14px; font-weight: 700; }
.rcpmodes button small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rcpmodes button[aria-selected="true"] { background: #fff; color: #000; }
.rcpmodes button[aria-selected="true"] small { color: #555; }

.rcpstage {
  position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 4 / 5; background: #0B0B0B; isolation: isolate;
}
.rcpslide { position: absolute; inset: 0; animation: rcpin .45s ease both; }
.rcpslide .photo { width: 100%; height: 100%; object-fit: cover; }
@keyframes rcpin { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.rcpscrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,.92) 100%);
}
.rcpgfx {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: start;
  padding: 0 22px 90px; gap: 6px;
  background:
    radial-gradient(120% 80% at 90% 10%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 60%),
    linear-gradient(160deg, #1B1B1B, #0A0A0A);
}
.rcpgfx b { font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--acc); }
.rcpgfx { align-content: start; padding-top: 70px; }
.rcpgfx b { font-size: 72px; }
.rcpgfx i { position: absolute; right: 18px; top: 64px; opacity: .35; }
.rcpgfx i svg { width: 64px; height: 64px; }
.rcpgfx.k-wicket b, .rcpgfx.k-card b { color: var(--alert); }
.rcpgfx.k-break b { color: var(--text-2); }

.rcpsegs {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3;
  display: flex; gap: 4px;
}
.rcpseg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.rcpseg.done { background: #fff; }
.rcpseg i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.rcpseg.on i { animation-name: rcpfill; animation-timing-function: linear; animation-fill-mode: forwards; }
.rcpstage.paused .rcpseg.on i { animation-play-state: paused; }
@keyframes rcpfill { to { transform: scaleX(1); } }

.rcptext { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: grid; gap: 5px; }
.rcptime {
  justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  padding: 3px 8px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.rcptext b { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.rcptext p { margin: 0; font-size: 14px; line-height: 1.4; color: #DADADA; }

.rcpzone { position: absolute; top: 0; bottom: 0; width: 38%; z-index: 2; background: none; border: 0; }
.rcpzone.prev { left: 0; } .rcpzone.next { right: 0; }
.rcpplay {
  position: absolute; top: 22px; right: 12px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.45); display: grid; place-items: center;
}
.rcpcount {
  position: absolute; top: 30px; left: 14px; z-index: 4;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums;
}

.rcpaudio {
  display: grid; gap: 10px; background: #141414; border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
}
.rcpbig {
  justify-self: start; width: 52px; height: 52px; border-radius: 50%;
  background: var(--yellow); border: 0; display: grid; place-items: center;
}
.rcpbig svg { width: 20px; height: 20px; }
.rcpbig svg path, .rcpbig svg rect { fill: #000; }
.rcpwavebox { position: relative; height: 44px; }
.rcpwave { position: absolute; inset: 0; width: 100%; height: 100%; fill: #3A3A3A; }
.rcpwavefill { position: absolute; inset: 0; }
.rcpwavefill .rcpwave { fill: var(--yellow); }
.rcptimes { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rcpspeed {
  border: 1px solid #3A3A3A; background: transparent; color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.rcpnow { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
.rcpnow span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); margin-right: 4px; }
.rcpvoice { margin: 0; font-size: 12px; color: var(--muted); }

.rcpread p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: #E6E6E6; }
.rcpread p:first-child { font-size: 17px; font-weight: 500; color: #fff; }
.rcpline {
  list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; display: grid; gap: 10px;
  border-left: 2px solid #2E2E2E;
}
.rcpline li { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 10px; font-size: 13.5px; }
.rcpline li::before {
  content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: #0D0D0D; border: 2px solid #555;
}
.rcpline li.k-goal::before { border-color: var(--yellow); background: var(--yellow); }
.rcpline li.k-wicket::before, .rcpline li.k-card::before { border-color: var(--alert); }
.rcpline li.k-milestone::before { border-color: var(--live); }
.rcpline li span { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; padding-top: 1px; }

/* ==========================================================================
   Audio dock: sits between the page and the navigation, keeps playing
   ========================================================================== */

.dock[hidden] { display: none; }
.dock {
  flex: none; position: relative; z-index: 30;
  display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 10px 11px 12px; background: #1A1A1A; border-top: 1px solid #2A2A2A;
  animation: dockin .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes dockin { from { transform: translateY(100%); opacity: 0; } }
.dkplay {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff;
  display: grid; place-items: center;
}
.dkplay svg path, .dkplay svg rect { fill: #000; }
.dktext { display: grid; gap: 1px; min-width: 0; }
.dktext b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dktext small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dklive {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--live-ink);
  background: var(--live); padding: 2px 6px; border-radius: 3px; margin-bottom: 2px;
}
.dklive i { width: 5px; height: 5px; border-radius: 50%; background: var(--live-ink); animation: tobeat 1.6s ease-in-out infinite; }
.dkread {
  border: 1px solid #3A3A3A; background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700;
}
.dkread[aria-pressed="true"] { background: #fff; color: #000; }
.dkclose { width: 32px; height: 32px; border: 0; background: none; display: grid; place-items: center; }
.dkbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2A2A2A; }
.dkbar i { display: block; height: 100%; background: var(--yellow); }
.dkbar.live i { width: 100%; background: var(--live); opacity: .7; }
.dktranscript {
  grid-column: 1 / -1; max-height: 160px; overflow-y: auto;
  border-top: 1px solid #2A2A2A; padding-top: 10px;
}
.dktranscript p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #DDD; }

/* ==========================================================================
   Other ways in: listen to the lead story, read a short
   ========================================================================== */

.tocatch {
  width: 100%; margin-top: 8px; display: flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 8px;
  padding: 10px 12px; color: #fff; font-size: 13.5px; font-weight: 600; text-align: left;
}
.tocatch svg { width: 13px; height: 13px; flex: none; }
.tocatch:hover { border-color: rgba(255,255,255,.5); }

.stlisten {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #3A3A3A; background: #151515; color: #fff; border-radius: 999px;
  padding: 6px 12px 6px 9px; font-size: 13px; font-weight: 700; margin-right: 4px;
}
.stlisten small { color: var(--muted); font-weight: 500; }
.stlisten svg { width: 15px; height: 15px; }

.toaa { font-size: 17px; font-weight: 800; line-height: 1; height: 28px; display: grid; place-items: center; }
.toact.texton, .toact.texton .toaa { color: var(--yellow); }
.totext {
  position: absolute; left: 12px; right: 70px; top: 64px; z-index: 5;
  background: rgba(10,10,10,.86); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 12px 14px; backdrop-filter: blur(8px);
}
.totext b { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.totext p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.tosounds {
  display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 8px;
  border: 0; border-radius: 999px; background: #fff; color: #000;
  padding: 7px 13px 7px 10px; font-size: 13px; font-weight: 700;
}
.tosounds svg path { fill: #000; stroke: #000; }

@media (prefers-reduced-motion: reduce) {
  .rcpslide, .dock { animation: none; }
  .rcpseg.on i { animation: none; transform: none; }
}

/* ==========================================================================
   Surfaces: phone, website, iPlayer on the TV, and the TV with a phone
   ========================================================================== */

.surface {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #141414; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 4px;
}
.sf {
  border: 0; background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 700; padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  transition: background .18s, color .18s;
}
.sf:hover { color: var(--text); }
.sf[aria-selected="true"] { background: #fff; color: #101010; }
.sf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

figure.devwrap { margin: 0; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.devcap { font-size: 12.5px; color: var(--muted); text-align: center; display: none; }
body[data-surface="together"] .devcap,
body[data-surface="tv"] .tvcap { display: block; }
body[data-surface="phone"] .tvwrap,
body[data-surface="web"] .tvwrap { display: none; }
body[data-surface="tv"] .phonewrap { display: none; }
body[data-surface="tv"] .tvwrap { width: min(1280px, 100%); }

body[data-surface="together"] .deskstage {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 32px; align-items: start; justify-content: center;
  max-width: 1720px; width: 100%; margin: 0 auto;
}
body[data-surface="together"] .tvwrap { width: 100%; padding-top: 30px; }
@media (max-width: 980px) {
  body[data-surface="together"] .deskstage { grid-template-columns: 1fr; justify-items: center; }
}

/* the telly: bezel, screen, stand */
.tvwrap .devcap { margin-top: 26px; }
.tvset { width: 100%; position: relative; padding: 10px; background: #050505; border-radius: 12px;
  border: 1px solid #262626; box-shadow: 0 40px 80px -40px rgba(0,0,0,.95); }
.tvset[hidden] { display: none; }
.tvset::after {
  content: ""; position: absolute; left: 50%; bottom: -26px; width: 22%; height: 16px;
  transform: translateX(-50%); background: linear-gradient(#1E1E1E, #0C0C0C); border-radius: 0 0 8px 8px;
}
.tvscreen { position: relative; width: 100%; height: var(--tvh, 405px); overflow: hidden; background: #000; border-radius: 3px; }
#tvapp { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0; }

/* the phone, told what just happened on the telly */
.nudge {
  position: absolute; top: 64px; left: 12px; right: 12px; z-index: 95;
  display: grid; gap: 3px; padding: 12px 14px 13px;
  background: #121212; border: 1px solid #2C2C2C; border-left: 4px solid var(--live); border-radius: 10px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.95);
  animation: nudgein .32s cubic-bezier(.2,.7,.3,1) both; transition: opacity .5s, transform .5s;
}
.nudge.out { opacity: 0; transform: translateY(-12px); }
.nudgek { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--live); }
.nudge b { font-size: 15px; }
.nudge span:last-child { font-size: 13px; color: var(--text-2); line-height: 1.4; }
@keyframes nudgein { from { opacity: 0; transform: translateY(-14px); } }

.listenbtn.ontv { background: #2A2A2A; color: #fff; }
.listenbtn.ontv:hover { background: #383838; }
.meav.sm { width: 32px; height: 32px; font-size: 13px; flex: none; }

/* ==========================================================================
   The website
   ========================================================================== */

.device.browser { width: min(1360px, 100%); border-radius: 12px; }
.web {
  height: 860px; max-height: calc(100dvh - 150px); min-height: 560px;
  position: relative; overflow: hidden; display: flex; flex-direction: column; background: #0A0A0A;
}
.wbrowser {
  flex: none; display: flex; align-items: center; gap: 16px; height: 38px; padding: 0 14px;
  background: #1F1F1F; border-bottom: 1px solid #2A2A2A;
}
.wdots { display: flex; gap: 7px; }
.wdots i { width: 11px; height: 11px; border-radius: 50%; background: #3C3C3C; }
.wurl {
  flex: 1; max-width: 560px; margin: 0 auto; text-align: center;
  font-size: 12.5px; color: #BDBDBD; background: #121212; border-radius: 999px; padding: 5px 14px;
}
.wscroll { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.wwrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

.wmast { background: #000; border-bottom: 1px solid #1E1E1E; }
.wmastin { display: flex; align-items: center; gap: 22px; height: 56px; }
.wnav { display: flex; gap: 2px; }
.wnav a {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 700;
  padding: 18px 10px 15px; border-bottom: 3px solid transparent;
}
.wnav a:hover { border-color: #fff; }
.wnav a.on { border-color: var(--yellow); }
.wfill { flex: 1; }
.wsearch {
  background: #1A1A1A; border: 1px solid #333; color: var(--muted); border-radius: 3px;
  font-size: 13.5px; padding: 8px 14px; width: 210px; text-align: left;
}
.wmast .menubtn { display: flex; align-items: center; gap: 8px; }

.wsport { background: #000; border-bottom: 1px solid #1E1E1E; }
.wsportin { display: flex; align-items: center; gap: 26px; height: 54px; }
.wsportmark {
  background: none; border: 0; padding: 0; color: var(--yellow);
  font-size: 27px; font-weight: 800; letter-spacing: .02em;
}
.wsport nav { display: flex; gap: 4px; overflow: hidden; }
.wsport nav a {
  color: #DADADA; text-decoration: none; font-size: 14px; white-space: nowrap;
  padding: 17px 9px 14px; border-bottom: 3px solid transparent;
}
.wsport nav a:hover { color: #fff; }
.wsport nav a.on { color: #fff; font-weight: 700; border-color: var(--yellow); }

.wmain { padding: 26px 0 48px; }
.wh1 { font-size: 42px; font-weight: 800; line-height: 1.04; margin: 10px 0 8px; letter-spacing: -.01em; }
.wh1 span { font-weight: 400; color: var(--yellow); font-variant-numeric: tabular-nums; margin: 0 .12em; }
.wh2 { font-size: 19px; font-weight: 800; margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wh2 small { font-size: 13px; font-weight: 400; color: var(--muted); }
.wh2.big { font-size: 24px; line-height: 1.15; margin: 6px 0 8px; }
.wsub { font-size: 15.5px; color: var(--text-2); line-height: 1.45; margin: 0; }
.wkick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; font-size: 13.5px; color: var(--text-2); }

.wlive, .wsoon, .wdone {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 4px 9px; border-radius: 3px; white-space: nowrap;
}
.wlive { background: var(--live); color: var(--live-ink); }
.wlive i { width: 7px; height: 7px; border-radius: 50%; background: var(--live-ink); animation: tobeat 1.6s ease-in-out infinite; }
.wsoon { background: #2C2C2C; color: #EDEDED; }
.wdone { background: #FFFFFF; color: #111; }
.wlive.sm, .wsoon.sm, .wdone.sm { font-size: 10.5px; padding: 3px 7px; }
.wwatch { display: inline-flex; align-items: center; gap: 7px; color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; }
.wwatch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

.wbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.wbtn {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px;
  border-radius: 3px; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.38);
  color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.wbtn svg { width: 16px; height: 16px; }
.wbtn svg [fill="#fff"] { fill: currentColor; }
.wbtn svg [stroke="#fff"] { stroke: currentColor; }
.wbtn:hover { background: rgba(255,255,255,.12); }
.wbtn.pri { background: #fff; color: #000; border-color: #fff; }
.wbtn.pri:hover { background: #E6E6E6; }
.wbtn.ghost { background: transparent; }

/* home: the lead beside what else is live */
.wtop { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 22px; }
.whero { position: relative; border-radius: 6px; overflow: hidden; min-height: 470px; background: #111; }
.wheroimg { position: absolute; inset: 0; }
.wheroimg .photo { width: 100%; height: 100%; object-fit: cover; }
.wheroveil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.3) 38%, rgba(0,0,0,.86) 62%, rgba(0,0,0,.95) 100%); }
.wherotext { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 30px 28px; }
.wherostats { max-width: 480px; margin-top: 16px; }
.wherostats .tostats { gap: 7px; }

.wlivelist { background: var(--panel); border-radius: 6px; padding: 18px 18px 8px; align-self: start; }
.wlrow {
  width: 100%; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  padding: 12px 0; background: none; border: 0; border-top: 1px solid var(--line-soft); text-align: left; color: #fff;
}
.wlrow:hover b { text-decoration: underline; }
.wlimg { width: 76px; height: 76px; border-radius: 5px; overflow: hidden; display: block; }
.wlimg .photo, .wlimg svg { width: 100%; height: 100%; display: block; }
.wltext { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.wltext b { font-size: 15px; line-height: 1.25; }
.wltext span:not(.wlive):not(.wsoon):not(.wdone) { font-size: 13px; color: var(--text-2); }
.wltext small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.wthree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; align-items: start; }
.wpanel { background: var(--panel); border-radius: 6px; padding: 18px; min-width: 0; }
.wpanel > .section, .wpanel .section { padding-left: 0; padding-right: 0; }
.wstory .wstimg { aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; margin-bottom: 14px; }
.wstory .wstimg .photo, .wstory .wstimg svg { width: 100%; height: 100%; display: block; }
.wstory .stlisten { margin-top: 14px; }

.wsec { margin-top: 36px; }
.wgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wcard { display: grid; gap: 6px; align-content: start; background: none; border: 0; padding: 0; text-align: left; color: #fff; }
.wcimg { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; display: block; margin-bottom: 4px; }
.wcimg .photo, .wcimg svg { width: 100%; height: 100%; display: block; }
.wcimg > .wlive, .wcimg > .wsoon, .wcimg > .wdone { position: absolute; left: 8px; bottom: 8px; }
.wcard b { font-size: 16px; line-height: 1.25; }
.wcard:hover b { text-decoration: underline; }
.wcsport { font-size: 12.5px; color: var(--muted); }
.wcctx { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }

.wshorts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.wshorts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wshort { display: grid; gap: 6px; align-content: start; background: none; border: 0; padding: 0; text-align: left; color: #fff; }
.wshort b { font-size: 14px; line-height: 1.3; }
.wsimg { position: relative; aspect-ratio: 9 / 13; border-radius: 8px; overflow: hidden; display: block; }
.wsimg .photo, .wsimg svg { width: 100%; height: 100%; display: block; }
.wsimg .play {
  position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.6); display: grid; place-items: center;
}
.wsimg .play svg { width: 14px; height: 14px; }
.wsimg .dur { position: absolute; right: 8px; bottom: 12px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 3px; }

.wtables { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* comments */
.wcom { display: grid; gap: 16px; }
.wcomin { display: flex; align-items: center; gap: 10px; }
.wcomfake {
  flex: 1; text-align: left; background: #1E1E1E; border: 1px solid #333; border-radius: 999px;
  color: var(--muted); font-size: 13.5px; padding: 10px 16px;
}
.wcomfake:hover { border-color: #555; color: var(--text-2); }
.wcomrow { display: grid; grid-template-columns: 32px 1fr; gap: 11px; }
.wcav {
  width: 32px; height: 32px; border-radius: 50%; background: #2E2E2E; color: #DDD;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
}
.wcmeta { margin: 0 0 3px; font-size: 12.5px; color: var(--muted); }
.wcmeta b { color: #fff; }
.wctext { margin: 0; font-size: 14px; line-height: 1.45; color: #EDEDED; }
.wcact { margin: 6px 0 0; display: flex; gap: 16px; }
.wcact button { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
.wcact button:hover { color: #fff; }
.wcact svg { width: 14px; height: 14px; }

/* the live page on a desk: catch up, the match, take part */
.wevhead { background: #000; border-bottom: 1px solid #1E1E1E; padding-top: 18px; margin-top: -26px; }
.wcrumb { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.wcrumb button { background: none; border: 0; padding: 0; color: var(--text-2); font-size: 13px; text-decoration: underline; }
.wevrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; margin-bottom: 14px; }
.wevrow .wbtns { margin-top: 0; }
.wevhead .tabbar, .wevhead .tabs { border-bottom: 0; }

.wcols {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px; gap: 24px;
  padding-top: 24px; align-items: start;
}
.wleft, .wright { display: grid; gap: 18px; min-width: 0; }
.wleft .rcpline { margin: 0; }
.wcentre { min-width: 0; }
.wcentre #stage { background: var(--black); border-radius: 6px; overflow: hidden; }

.wplayer { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.wplayer .photo { width: 100%; height: 100%; object-fit: cover; }
.wplayer.on .photo { animation: tokb 22s ease-in-out infinite alternate; }
.wpveil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5)); }
.wpchip { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.wpplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center;
}
.wpplay svg { width: 28px; height: 28px; margin-left: 4px; }
.wpplay svg path { fill: #000; }
.wpnow { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.wpnow svg { width: 14px; height: 14px; }

.wfoot { border-top: 1px solid #1E1E1E; padding: 22px 0 30px; }
.wfoot .wwrap { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); }

.web .drawer { left: auto; width: 400px; }
.web .toast { bottom: 40px; }

@media (max-width: 1180px) {
  .wcols { grid-template-columns: minmax(0, 1fr) 300px; }
  .wleft { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; order: 3; }
  .wshorts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wnav a:nth-child(n+5) { display: none; }
}
@media (max-width: 900px) {
  .wtop, .wthree, .wtables, .wcols, .wleft { grid-template-columns: 1fr; }
  .wgrid4 { grid-template-columns: 1fr 1fr; }
  .wsearch, .wnav { display: none; }
  .wh1 { font-size: 32px; }
}
@media (max-width: 460px) {
  .web { height: auto; max-height: none; flex: 1; }
  .wwrap { padding: 0 var(--gut); }
}

/* ==========================================================================
   iPlayer on the TV. Everything here is in a 1280 x 720 space.
   ========================================================================== */

.tv {
  position: relative; width: 1280px; height: 720px; overflow: hidden;
  background: #0B0B0B; color: #fff; font-family: var(--sans);
}
.tv button { font-family: inherit; cursor: pointer; }
.tv .photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.tvlive, .tvsoon {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800;
  letter-spacing: .04em; padding: 5px 11px; border-radius: 3px; white-space: nowrap;
}
.tvlive { background: var(--live); color: var(--live-ink); }
.tvlive i { width: 9px; height: 9px; border-radius: 50%; background: var(--live-ink); animation: tobeat 1.6s ease-in-out infinite; }
.tvsoon { background: rgba(255,255,255,.18); color: #fff; }
.tvlive.sm, .tvsoon.sm { font-size: 12px; padding: 4px 8px; }
.tvwatch { display: inline-flex; align-items: center; gap: 9px; color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; }
.tvwatch svg { width: 20px; height: 20px; }
.tvcatchkick {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #CFCFCF;
}
.tvcatchkick svg { width: 20px; height: 20px; }
.tvdim { color: #A8A8A8; }

/* buttons, and the focus a remote moves around */
.tvbtns { display: flex; gap: 14px; margin-top: 30px; }
.tvb {
  display: inline-flex; align-items: center; gap: 11px; height: 58px; padding: 0 28px;
  border: 0; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff;
  font-size: 19px; font-weight: 700; white-space: nowrap;
  transition: transform .14s, background .14s, color .14s;
}
.tvb.pri { background: rgba(255,255,255,.28); }
.tvb svg { width: 20px; height: 20px; }
.tvb svg [fill="#fff"] { fill: currentColor; }
.tvb svg [stroke="#fff"] { stroke: currentColor; }
.tvb.tvfocus { background: #fff; color: #000; transform: scale(1.06); box-shadow: 0 10px 30px -8px rgba(0,0,0,.8); }

/* home */
.tvhero { position: absolute; inset: 0; transition: opacity .3s; }
.tvheroveil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.1) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.96) 78%);
}
.tvrailnav { position: absolute; top: 30px; left: 64px; right: 64px; display: flex; align-items: center; gap: 30px; }
.tvlogo { font-size: 23px; font-weight: 400; margin-right: 18px; }
.tvlogo b { font-weight: 800; }
.tvnav { font-size: 17px; color: #BBB; padding-bottom: 5px; border-bottom: 3px solid transparent; }
.tvnav.on { color: #fff; font-weight: 700; border-color: #fff; }

.tvherotext { position: absolute; left: 64px; top: 112px; width: 700px; transition: opacity .3s, transform .3s; }
.tvkick { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 18px; color: #DDD; }
.tvherotext h1 { font-size: 58px; font-weight: 800; line-height: 1.02; margin: 18px 0 12px; letter-spacing: -.01em; }
.tvherotext h1 span { font-weight: 400; color: var(--yellow); margin: 0 .12em; font-variant-numeric: tabular-nums; }
.tvsub { font-size: 21px; color: #D0D0D0; margin: 0; }

.tvrails { position: absolute; left: 0; right: 0; top: 428px; padding: 0 0 0 64px; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.tvrails h2 { font-size: 21px; font-weight: 700; margin: 0 0 14px; }
.tvrow { display: flex; gap: 22px; overflow: hidden; padding: 8px 64px 24px 8px; margin: -8px 0 0 -8px; }
.tvcard {
  flex: none; width: 250px; display: grid; gap: 3px; align-content: start;
  background: none; border: 0; padding: 0; text-align: left; color: #fff;
}
.tvcimg {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; margin-bottom: 9px;
  transition: transform .14s, box-shadow .14s;
}
.tvcard.tvfocus .tvcimg { transform: scale(1.06); box-shadow: 0 0 0 4px #fff, 0 14px 30px -8px rgba(0,0,0,.9); }
.tvcard b { font-size: 18px; line-height: 1.2; }
.tvcard > span:last-child { font-size: 14.5px; color: #B5B5B5; font-variant-numeric: tabular-nums; }
.tvcard.tvfocus b { color: #fff; }
.tvcimg > .tvlive, .tvcimg > .tvsoon { position: absolute; left: 10px; top: 10px; }
.tvprog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.3); }
.tvprog i { display: block; height: 100%; background: var(--live); }
.tvbell {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; background: rgba(0,0,0,.72); padding: 6px 11px; border-radius: 999px;
}
.tvbell svg { width: 15px; height: 15px; }
.tvbell svg [stroke="#fff"] { stroke: currentColor; }
.tvbell svg [fill="#fff"] { fill: currentColor; }
.tvbell.on { background: var(--live); color: var(--live-ink); }

.tv.deep .tvrails { transform: translateY(-262px); }
.tv.deep .tvherotext { opacity: 0; transform: translateY(-30px); }
.tv.deep .tvhero { opacity: .45; }

/* full-bleed picture, for catch-up and the player */
.tvfull { position: absolute; inset: 0; overflow: hidden; }
.tvfull.kb .photo { animation: tokb 26s ease-in-out infinite alternate; }
.tvfull.dim .photo { filter: brightness(.55) saturate(.8); }
.tvfullveil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.9) 100%); }
.tvfullveil.light { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 72%, rgba(0,0,0,.45) 100%); }
.tvfullveil.heavy { background: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.62)); }
.tvgfx {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--acc) 40%, #111), #070707 70%);
}
.tvgfx b { font-size: 160px; font-weight: 800; color: var(--acc); opacity: .9; }
.tvgfx.k-wicket b, .tvgfx.k-card b { color: var(--alert); }

/* catch up */
.tvsegs { position: absolute; top: 36px; left: 64px; right: 64px; display: flex; gap: 7px; }
.tvsegs span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.tvsegs i { display: block; height: 100%; width: 0; background: #fff; }
.tvsegs span.done i { width: 100%; }
.s-catchup > .tvcatchkick { position: absolute; top: 62px; left: 64px; }
.tvcatchtext { position: absolute; left: 64px; bottom: 150px; width: 860px; animation: tvup .45s cubic-bezier(.2,.7,.3,1) both; }
.tvtime { font-size: 22px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.tvcatchtext h1 { font-size: 50px; font-weight: 800; line-height: 1.05; margin: 8px 0 12px; }
.tvcatchtext p { font-size: 23px; color: #DADADA; line-height: 1.4; margin: 0; }
.tvbtns.bottom { position: absolute; left: 64px; bottom: 48px; margin: 0; }
@keyframes tvup { from { opacity: 0; transform: translateY(18px); } }

.tvlisten { position: absolute; left: 64px; top: 110px; width: 920px; }
.tvlisten h1 { font-size: 44px; font-weight: 800; line-height: 1.1; margin: 16px 0 0; }
.tvwave { position: relative; height: 84px; margin: 34px 0 10px; }
.tvwave .rcpwave { fill: rgba(255,255,255,.22); }
.tvwave .rcpwavefill .rcpwave, .tvwave .rcpwave.on { fill: var(--live); }
.tvtimes { display: flex; justify-content: space-between; font-size: 17px; color: #AAA; margin: 0; font-variant-numeric: tabular-nums; }
.tvline { font-size: 22px; line-height: 1.5; color: #D6D6D6; margin: 24px 0 0; }

/* the player */
.tvtop { position: absolute; top: 34px; left: 64px; right: 64px; display: flex; align-items: center; justify-content: space-between; }
.tvtop p { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 700; }
.tvtop .tvwatch { background: rgba(0,0,0,.6); padding: 9px 16px; border-radius: 999px; color: #fff; font-weight: 400; }
.tvtop .tvwatch b { color: var(--live); font-weight: 800; }
.tvtop .tvwatch svg { color: var(--live); }
.tvaudiochip {
  position: absolute; top: 88px; left: 64px; margin: 0; display: inline-flex; align-items: center; gap: 9px;
  background: rgba(0,0,0,.66); padding: 7px 14px; border-radius: 999px; font-size: 15px; font-weight: 700;
}
.tvaudiochip svg { width: 17px; height: 17px; }
.tvaudiochip svg { color: var(--live); }

.tvradio { position: absolute; left: 64px; top: 128px; width: 820px; }
.tvscore { display: flex; gap: 56px; margin: 26px 0 16px; }
.tvscore div { display: grid; gap: 2px; }
.tvscore span { font-size: 19px; color: #AAA; }
.tvscore b { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tvscore .on b { color: var(--yellow); }
.tvscore small { font-size: 17px; color: #CCC; }
.tvbatters { font-size: 22px; margin: 0; color: #E0E0E0; }
.tvover { display: flex; gap: 12px; margin: 22px 0 0; }
.tvover span {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.35); font-size: 20px; font-weight: 700;
}
.tvover .four { background: var(--live); color: var(--live-ink); border-color: var(--live); }
.tvover .now { box-shadow: 0 0 0 3px #fff; }
.tvwave.live { height: 60px; margin-top: 30px; animation: tvbreath 1.8s ease-in-out infinite; }
@keyframes tvbreath { 50% { opacity: .55; } }

/* a moment as a lower third, then the hand-off to the phone */
.tvl3 {
  position: absolute; left: 64px; bottom: 64px; max-width: 700px;
  display: flex; align-items: center; gap: 22px; padding: 18px 26px 18px 22px;
  background: rgba(8,8,8,.9); border-left: 6px solid var(--live); border-radius: 4px;
  animation: tvl3in .4s cubic-bezier(.2,.7,.3,1) both;
}
.tvl3k { font-size: 32px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.tvl3 div { display: grid; gap: 4px; }
.tvl3 b { font-size: 24px; }
.tvl3 span:last-child { font-size: 19px; color: #D0D0D0; }
@keyframes tvl3in { from { opacity: 0; transform: translateX(-30px); } }

.tvphone {
  position: absolute; right: 64px; bottom: 64px; display: flex; align-items: center; gap: 18px;
  background: rgba(8,8,8,.92); padding: 14px 22px 14px 14px; border-radius: 10px;
  animation: tvup .4s cubic-bezier(.2,.7,.3,1) both;
}
.tvphone div { display: grid; gap: 4px; }
.tvphone b { font-size: 20px; }
.tvphone span { font-size: 15.5px; color: #BBB; }
.tvqr { width: 88px; height: 88px; display: block; border-radius: 4px; }
.tvqr.big { width: 240px; height: 240px; }
.tv:has(.tvstats) .tvphone { right: 500px; }

.tvstats {
  position: absolute; right: 64px; top: 96px; width: 410px; padding: 22px 24px;
  background: rgba(8,8,8,.86); border-radius: 10px; backdrop-filter: blur(6px);
  animation: tvside .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes tvside { from { opacity: 0; transform: translateX(24px); } }
.tvsline { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 16px; font-size: 20px; }
.tvsline span { color: var(--yellow); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.tvstats .tostats { display: grid; gap: 12px; }
.tvstats .tostat { grid-template-columns: 44px 1fr auto 1fr 44px; gap: 10px; }
.tvstats .tonum { font-size: 18px; }
.tvstats .tolab { font-size: 14px; }
.tvstats .tobar { height: 8px; }
.tvcourts { list-style: none; margin: 8px 0 0; padding: 0; }
.tvcourts li { display: flex; gap: 14px; align-items: baseline; font-size: 16px; padding: 9px 0; border-top: 1px solid #2A2A2A; color: #CCC; }
.tvcourts li b { min-width: 76px; color: #fff; }
.tvcourts li i { margin-left: auto; font-style: normal; color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; }
.tvcourts li.on { color: #fff; }

.tvhint { position: absolute; right: 64px; top: 84px; margin: 0; font-size: 14px; color: rgba(255,255,255,.6); }
.tv:has(.tvstats) .tvhint { display: none; }

/* controls, when OK is pressed */
.tvctrl {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 64px 46px;
  background: linear-gradient(to top, rgba(0,0,0,.94), rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
  animation: tvup .25s ease-out both;
}
.tv.ov .tvl3, .tv.ov .tvphone { display: none; }
.tvbar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); }
.tvbarfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--live); }
.tvmark { position: absolute; top: -6px; width: 4px; height: 18px; border-radius: 2px; background: #fff; transform: translateX(-50%); }
.tvmark.k-goal, .tvmark.k-score, .tvmark.k-milestone { background: var(--yellow); }
.tvmark.k-wicket, .tvmark.k-card { background: var(--alert); }
.tvmark em { display: none; }
.tvbarlive { position: absolute; right: 0; top: -34px; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--live); }
.tvctrl .tvbtns { margin-top: 30px; flex-wrap: wrap; }
.tvctrl .tvb { height: 52px; padding: 0 22px; font-size: 17px; }

/* side sheets: audio, other matches, pairing */
.tvsheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: 500px; padding: 64px 44px;
  background: rgba(10,10,10,.96); display: flex; flex-direction: column; gap: 12px;
  animation: tvside .28s cubic-bezier(.2,.7,.3,1) both;
}
.tvsheet > .tvcatchkick { margin-bottom: 10px; }
.tvsheet.wide { left: 0; width: auto; display: grid; place-items: center; background: rgba(6,6,6,.95); }
.tvopt {
  position: relative; display: grid; gap: 4px; text-align: left; padding: 17px 60px 17px 22px;
  border: 0; border-radius: 8px; background: rgba(255,255,255,.07); color: #fff;
  transition: background .14s, transform .14s;
}
.tvopt b { font-size: 20px; }
.tvopt span { font-size: 15px; color: #AFAFAF; }
.tvopt.sel b { color: var(--live); }
.tvopt i { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
.tvopt i svg { width: 24px; height: 24px; }
.tvopt i svg path { fill: none; stroke: var(--live); }
.tvopt.tvfocus { background: #fff; transform: scale(1.03); }
.tvopt.tvfocus b { color: #000; }
.tvopt.tvfocus span { color: #444; }
.tvworth {
  justify-self: start; margin-top: 5px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  background: var(--live); color: var(--live-ink); padding: 3px 8px; border-radius: 3px;
}
.tvpair { display: flex; align-items: center; gap: 64px; max-width: 1060px; }
.tvpair h1 { font-size: 42px; font-weight: 800; line-height: 1.1; margin: 14px 0 20px; }
.tvpair ul { margin: 0; padding-left: 24px; font-size: 21px; line-height: 1.7; color: #DDD; }
.tvpair .tvline { font-size: 17px; color: #AAA; }
.tvpair .tvbtns { margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .tvfull.kb .photo, .wplayer.on .photo, .tvwave.live { animation: none; }
  .tvrails, .tvherotext, .tvb, .tvcimg, .tvopt { transition: none; }
}
.tvphone.paired { padding-left: 20px; }
.tvphicon { width: 52px; height: 52px; border-radius: 50%; background: var(--live); color: var(--live-ink); display: grid; place-items: center; }

.wleft .rcpline li { grid-template-columns: 40px 1fr; }
.tvfull.blur .photo { filter: blur(22px) brightness(.42) saturate(.7); transform: scale(1.12); animation: none; }
.tvspine {
  position: absolute; right: 64px; bottom: 64px; width: 470px; padding: 24px 26px 26px;
  background: rgba(8,8,8,.9); border-radius: 10px; border-top: 4px solid var(--yellow);
  animation: tvside .35s cubic-bezier(.2,.7,.3,1) both;
}
.tvspinet { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 0 4px; }
.tvspinet b { font-size: 34px; }
.tvspinet i { font-style: normal; font-size: 30px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.tvspines { font-size: 19px; line-height: 1.4; color: #D8D8D8; margin: 0; }
.tvspine .tvbtns { margin-top: 22px; }
.tvspine .tvb { height: 52px; padding: 0 22px; font-size: 17px; }
.tvsets { margin: 24px 0 18px; display: grid; gap: 6px; }
.tvsets p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tvsets span { width: 230px; font-size: 32px; font-weight: 700; }
.tvsets em { font-style: normal; width: 64px; text-align: center; background: rgba(255,255,255,.1); border-radius: 4px; }
.tvsets p.on em:last-of-type { background: var(--yellow); color: #111; }
.tvsets i { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); margin-left: 10px; }
@media (max-width: 460px) { .surface, .lifecycle { border-radius: 20px; } }

/* ==========================================================================
   v11: watching, hiding the score, sheets, articles, the archive
   ========================================================================== */

/* Following today: the picture keeps its box however tall the text gets */
.ecard { align-items: center; }
.ecphoto { width: 108px; height: 81px; aspect-ratio: auto; align-self: center; }
.ec-when { white-space: nowrap; }
.ec-top { min-width: 0; }
.ec-sport { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-ctx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* reminders on anything that has not started */
.chipsoon.remind { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chipsoon.remind svg { flex: none; }
.chipsoon.remind.on { background: var(--yellow); color: #111; }
.chipsoon.remind:hover { background: rgba(255,210,48,.2); }
.chipsoon.remind.on:hover { background: #FFDD5C; }
.ec-top .chipsoon.remind { position: static; font-size: 10.5px; padding: 3px 8px; }

/* spoilers */
.spoilbar {
  display: flex; align-items: center; gap: 10px; margin: 10px var(--gut) 0; padding: 10px 12px;
  background: #1C1C1C; border: 1px solid #2E2E2E; border-radius: 8px; font-size: 12.5px; color: var(--text-2);
}
.spoilbar svg { flex: none; color: var(--yellow); }
.spoilbar span { flex: 1; line-height: 1.35; }
.spoilbar b { display: block; color: #fff; font-size: 13.5px; }
.spoilbar button { background: none; border: 1px solid #444; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.web .spoilbar { margin: 0 0 18px; }
.shield { padding-top: 16px; }
.shieldin { background: linear-gradient(160deg, #1D1B10, #141414); border: 1px solid rgba(255,210,48,.4); border-radius: 10px; padding: 16px; }
.shk { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.shieldin h3 { margin: 0 0 14px; font-size: 19px; line-height: 1.2; }
.shbtns { display: grid; gap: 8px; }
.shbtn {
  display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 14px; border-radius: 6px;
  background: #2A2A2A; color: #fff; border: 0; font-size: 14.5px; font-weight: 700;
}
.shbtn svg { width: 16px; height: 16px; }
.shbtn.pri { background: var(--yellow); color: #111; }
.shbtn.pri svg path { fill: #111; }
.shbtn.ghost { background: transparent; border: 1px solid #444; }
.spoilblur { filter: blur(9px) saturate(.6); opacity: .55; pointer-events: none; user-select: none; }
.revealpill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,210,48,.12); border: 1px solid rgba(255,210,48,.55); color: var(--yellow); font-size: 12.5px; font-weight: 700;
}
.stackwrap .revealpill { justify-self: start; }
.bigscore.hid { color: var(--muted); font-weight: 400; }
.sscore.hid { color: var(--muted); letter-spacing: .2em; }
.toreveal {
  display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 13px; font-weight: 700;
}
.tocta span { display: inline-flex; align-items: center; gap: 9px; }
.tocta span svg { width: 14px; height: 14px; }
.tocta span svg path { fill: currentColor; }

/* watch beside listen */
.listenbtn.watchbtn { background: #fff; color: #000; }
.listenbtn.watchbtn:hover { background: #E6E6E6; }
.listenbtn.watchbtn svg path { fill: #000; }
.listenrow { flex-wrap: wrap; }

/* reactions, in place */
button.eng { border: 0; cursor: pointer; font-family: inherit; }
button.eng:hover { background: #262626; color: #fff; }
.eng .lk { display: grid; place-items: center; }
.likebtn.on { color: #fff; }
.likebtn.pop .lk { animation: likepop .42s cubic-bezier(.2,.9,.3,1.4); }
@keyframes likepop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.likebtn.sm { background: none; padding: 0; font-size: 12.5px; color: var(--muted); gap: 5px; }
.likebtn.sm:hover { background: none; color: #fff; }
.likebtn.sm.on { color: #F2716A; }
.stphoto { border: 0; padding: 0; width: 100%; text-align: left; color: #fff; cursor: pointer; background: #111; }
.stphoto .sthead { display: block; }
.ststand { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; font-family: inherit; cursor: pointer; }
.ststand:hover, .stphoto:hover .sthead { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* notifications dot */
.nbell { position: relative; }
.ndot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px #000; }

/* ---- sheets ---- */
#ovl { position: absolute; inset: 0; pointer-events: none; z-index: 125; }
#ovl > * { pointer-events: auto; }
.sheetscrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 1; animation: fadein .2s both; }
@keyframes fadein { from { opacity: 0; } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; z-index: 2;
  display: flex; flex-direction: column; background: #161616; border-radius: 16px 16px 0 0;
  border-top: 1px solid #2C2C2C; animation: sheetup .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes sheetup { from { transform: translateY(100%); } }
.grab { width: 38px; height: 4px; border-radius: 3px; background: #444; margin: 8px auto 2px; flex: none; }
.shhead { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 6px var(--gut); flex: none; }
.shhead h2 { margin: 0; font-size: 19px; display: flex; align-items: baseline; gap: 8px; }
.shhead h2 small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.shbody { overflow-y: auto; padding: 4px var(--gut) 18px; overscroll-behavior: contain; }
.shsub { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.shnote { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.nlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nrow { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: start; padding: 10px 0; border: 0; background: none; color: #fff; text-align: left; border-bottom: 1px solid #242424; }
.nic { width: 38px; height: 38px; border-radius: 50%; background: #242424; display: grid; place-items: center; color: var(--live); }
.nic svg { width: 18px; height: 18px; }
.nic svg path[fill="#fff"] { fill: var(--live); }
.ntx { display: grid; gap: 2px; }
.ntx b { font-size: 14.5px; }
.ntx span { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.nwhen { font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.ntype {
  width: 100%; display: flex; align-items: center; gap: 12px; justify-content: space-between; text-align: left;
  padding: 11px 0; border: 0; border-bottom: 1px solid #242424; background: none; color: #fff; font-family: inherit;
}
.ntype span { display: grid; gap: 2px; }
.ntype b { font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.ntype b svg { width: 17px; height: 17px; color: var(--text-2); }
.ntype small { font-size: 12.5px; color: var(--muted); }
.sw { flex: none; width: 42px; height: 25px; border-radius: 999px; background: #3A3A3A; position: relative; transition: background .18s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s; }
.sw.on { background: var(--live-core); }
.sw.on::after { transform: translateX(17px); }
.shchips { display: flex; align-items: center; gap: 6px; padding: 2px var(--gut) 8px; flex: none; }
.shchip { border: 1px solid #3A3A3A; background: none; color: var(--text-2); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; }
.shchip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.shrule { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.clist { display: grid; gap: 16px; padding-top: 8px; }
.crow { display: grid; grid-template-columns: 32px 1fr; gap: 11px; }
.crow.mine .wcav { background: var(--yellow); color: #111; }
.crow.mine { animation: fadein .4s both; }
.composer { flex: none; display: flex; gap: 9px; align-items: center; padding: 10px var(--gut) 14px; border-top: 1px solid #262626; background: #161616; }
.composer input { flex: 1; min-width: 0; background: #222; border: 1px solid #383838; border-radius: 999px; color: #fff; padding: 10px 14px; font-size: 14px; font-family: inherit; }
.composer input:focus { outline: none; border-color: var(--live); }
.composer button { border: 0; background: var(--live); color: var(--live-ink); border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: 13.5px; }
.scard { border-radius: 10px; overflow: hidden; background: #202020; margin: 4px 0 6px; }
.scimg { position: relative; display: block; aspect-ratio: 16 / 9; }
.scard.big .scimg { aspect-ratio: 4 / 5; }
.scimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.scveil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.85)); }
.scmark { position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; color: var(--yellow); }
.scmark .bbcblocks i { width: 16px; height: 16px; font-size: 10px; }
.scbig { position: absolute; left: 14px; right: 14px; bottom: 14px; font-size: 26px; font-weight: 800; line-height: 1.1; }
.scbig small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.sctext { display: grid; gap: 3px; padding: 10px 12px 12px; }
.sctext b { font-size: 14px; line-height: 1.3; }
.sctext span { font-size: 12px; color: var(--muted); }
.targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tgt { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; background: #202020; border: 0; border-radius: 10px; color: #fff; font-size: 12.5px; font-weight: 700; }
.tgt span { color: var(--text-2); }
.tgt:hover { background: #2A2A2A; }

/* ---- articles ---- */
.article { position: absolute; inset: 0; z-index: 1; background: var(--black); display: flex; flex-direction: column; animation: artin .28s cubic-bezier(.2,.8,.3,1) both; }
@keyframes artin { from { transform: translateX(8%); opacity: 0; } }
.arbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 6px; border-bottom: 1px solid #222; background: var(--black); }
.arkick { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arscroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.arhero { margin: 0; }
.arhero .photo, .arfig .photo { width: 100%; height: auto; display: block; }
.arhero figcaption, .arfig figcaption { font-size: 12px; color: var(--muted); padding: 7px var(--gut) 0; line-height: 1.4; }
.arbody { padding: 14px var(--gut) 28px; }
.arkicker { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.arbody h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.12; letter-spacing: -.015em; }
.arby { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.arbody p { font-size: 16px; line-height: 1.6; color: #E6E6E6; margin: 0 0 16px; }
.arbody h2 { font-size: 19px; margin: 24px 0 10px; }
.arfig { margin: 18px calc(var(--gut) * -1) 20px; }
.arfig.whole { margin-left: 0; margin-right: 0; }
.arfig.whole .photo { border-radius: 4px; }
.arfig.whole figcaption { padding-left: 0; padding-right: 0; }
.arfoot { flex: none; padding: 10px var(--gut) 2px; border-top: 1px solid #222; background: var(--black); }
.arfoot .engage { margin-bottom: 8px; }
.web .article { left: auto; width: min(720px, 100%); box-shadow: -30px 0 60px -20px rgba(0,0,0,.9); }
.web .article .arbody { padding: 20px 36px 36px; }
.web .article .arbody h1 { font-size: 34px; }

/* the archive: a feature card, a rail of programmes, and the reader */
.feat {
  width: 100%; display: grid; gap: 0; text-align: left; border: 0; padding: 0; border-radius: 10px; overflow: hidden;
  background: #1A1712; color: #fff; box-shadow: inset 0 0 0 1px rgba(214,190,130,.35); cursor: pointer;
}
.feat .fimg { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.feat .fimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.25); transition: transform .4s; }
.feat:hover .fimg .photo { transform: scale(1.03); }
.feat .ftx { display: grid; gap: 5px; padding: 12px 14px 14px; }
.feat small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #D6BE82; }
.feat b { font-size: 18px; line-height: 1.2; }
.feat .ftx > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.feat.compact { grid-template-columns: 84px 1fr; align-items: center; margin-top: 12px; }
.feat.compact .fimg { aspect-ratio: 1; height: 100%; }
.feat.compact b { font-size: 15px; }
.cliprail { grid-auto-columns: 214px; }
.clip { border: 0; background: none; padding: 0; text-align: left; color: #fff; display: grid; gap: 7px; }
.climg { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111; }
.climg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip.archive .climg .photo { filter: sepia(.45) contrast(1.05); }
.climg .play { position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.65); display: grid; place-items: center; }
.climg .play svg { width: 12px; height: 12px; }
.climg .dur { position: absolute; right: 8px; bottom: 9px; font-size: 11.5px; font-weight: 700; background: rgba(0,0,0,.65); padding: 2px 6px; border-radius: 3px; }
.cltitle { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.readrail { grid-auto-columns: 104px; }
.rpage { border: 0; background: none; padding: 0; color: #fff; display: grid; gap: 6px; text-align: left; }
.rpimg { display: block; aspect-ratio: 9 / 13; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 16px -6px rgba(0,0,0,.8), 0 0 0 1px rgba(214,190,130,.3); background: #1A1712; }
.rpimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpy { font-size: 12px; font-weight: 700; color: #D6BE82; }
.reader { position: absolute; inset: 0; z-index: 3; background: #0E0C09; display: flex; flex-direction: column; animation: fadein .25s both; }
.rdbar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 8px var(--gut); }
.rdbar span { display: grid; }
.rdbar b { font-size: 17px; }
.rdbar small { font-size: 12px; color: #B8A474; }
.rdpages { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rdpages::-webkit-scrollbar { display: none; }
.rdpage { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut); gap: 12px; }
.rdimg { flex: 1; min-height: 0; display: grid; place-items: center; }
.rdimg .photo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 20px 40px -18px #000; }
.rdpage figcaption { font-size: 13.5px; color: #D8CBAA; line-height: 1.45; padding-bottom: 6px; }
.rdpage figcaption b { display: block; color: #F0E3C0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.rddots { flex: none; display: flex; justify-content: center; gap: 6px; padding: 6px 0 4px; }
.rddots i { width: 6px; height: 6px; border-radius: 3px; background: #4A4232; transition: width .2s, background .2s; }
.rddots i.on { width: 18px; background: #D6BE82; }
.rdnote { flex: none; text-align: center; font-size: 11.5px; color: #7D735C; margin: 0 0 14px; }

/* ---- the second-screen nudge ---- */
.push {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5; padding: 11px 13px 12px;
  background: rgba(38,38,40,.94); backdrop-filter: blur(16px); border-radius: 16px; color: #fff;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.9); animation: pushin .45s cubic-bezier(.2,.9,.3,1.1) both; transition: transform .4s, opacity .4s;
}
.push.out { transform: translateY(-120%); opacity: 0; }
@keyframes pushin { from { transform: translateY(-130%); } }
.pushtop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pushapp { width: 22px; height: 22px; border-radius: 6px; background: #000; display: grid; place-items: center; overflow: hidden; }
.bbcblocks.mini { gap: 1px; }
.bbcblocks.mini i { width: 6px; height: 6px; font-size: 0; }
.pushsrc { flex: 1; font-size: 11.5px; letter-spacing: .04em; color: #BDBDBD; }
.pushx { border: 0; background: none; color: #999; padding: 2px; display: grid; }
.pushx svg { width: 16px; height: 16px; }
.push b { display: block; font-size: 15px; margin-bottom: 2px; }
.push p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: #E2E2E2; }
.pushbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pushbtns button { border: 0; border-radius: 10px; padding: 9px; font-weight: 700; font-size: 13.5px; background: rgba(255,255,255,.12); color: #fff; }
.pushbtns button:first-child { background: #fff; color: #000; }
.watchbar {
  display: flex; align-items: center; gap: 11px; width: calc(100% - var(--gut) * 2); margin: 10px var(--gut) 0; padding: 10px 12px;
  background: linear-gradient(90deg, rgba(0,204,199,.12), rgba(0,204,199,.03)); border: 1px solid rgba(0,204,199,.35);
  border-radius: 10px; color: #fff; text-align: left;
}
.wbic { width: 36px; height: 36px; border-radius: 8px; background: rgba(0,204,199,.16); color: var(--live); display: grid; place-items: center; flex: none; }
.wbtx { flex: 1; display: grid; gap: 1px; min-width: 0; }
.wbtx small { font-size: 11.5px; color: var(--live); font-weight: 700; }
.wbtx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-2); }

/* ---- video, at the top of the match page ---- */
.vid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; flex: none; }
.vidimg { position: absolute; inset: 0; }
.vidimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.vidimg.kb .photo { animation: tokb 22s ease-in-out infinite alternate; }
.vidimg.dim .photo { filter: brightness(.35) saturate(.7) blur(2px); transform: scale(1.06); }
.vid.archive .vidimg .photo { filter: sepia(.5) contrast(1.05); }
.vidveil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.75)); }
.vtop { position: absolute; top: 8px; left: 10px; right: 6px; display: flex; align-items: center; gap: 8px; }
.vsp { flex: 1; }
.vlive, .vclip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 3px; }
.vlive { background: var(--live); color: var(--live-ink); }
.vlive i { width: 6px; height: 6px; border-radius: 50%; background: var(--live-ink); animation: tobeat 1.6s ease-in-out infinite; }
.vclip { background: rgba(255,255,255,.2); color: #fff; }
.vchan { font-size: 12px; font-weight: 700; text-shadow: 0 1px 6px #000; }
.vwatch { font-size: 11.5px; color: #fff; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.vwatch::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; }
.vbtn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; }
.vbtn svg { width: 17px; height: 17px; }
.vcap {
  position: absolute; left: 12%; right: 12%; bottom: 52px; margin: 0; text-align: center; font-size: 13.5px; line-height: 1.35;
  background: rgba(0,0,0,.72); padding: 5px 9px; border-radius: 4px; animation: fadein .3s both;
}
.vbot { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vplay { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; flex: none; }
.vplay svg path, .vplay svg rect { fill: #000; }
.vbar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.vbar i { display: block; height: 100%; background: var(--live); transition: width .2s linear; }
.vid:not(.audio) .vbar i { background: var(--live); }
.vtime { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; }
.vchip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 999px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; }
.vchip svg { width: 17px; height: 17px; }
.vchip[aria-pressed="true"] { background: #fff; color: #000; }
.vlabel { position: absolute; left: 10px; top: 42px; margin: 0; font-size: 13px; font-weight: 700; text-shadow: 0 1px 8px #000; }
.vid.audio .vaud { position: absolute; left: 14px; right: 14px; top: 44px; bottom: 50px; display: grid; align-content: center; gap: 8px; }
.vwave { position: relative; height: 46px; display: block; animation: tvbreath 1.8s ease-in-out infinite; }
.vwave .rcpwave { fill: var(--live); }
.vnote { margin: 0; font-size: 12px; color: #CFCFCF; }
.vtitle { font-size: 13px; font-weight: 700; }
.vtrans { flex: none; background: #0F1414; border-bottom: 1px solid #1F2A2A; padding: 8px var(--gut) 10px; display: grid; gap: 4px; }
.vtk { margin: 0 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--live); }
.vtrans p:not(.vtk) { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.vtrans p b { color: var(--text-2); margin-right: 8px; font-variant-numeric: tabular-nums; }
.vtrans p.now { color: #fff; animation: fadein .5s both; }
.minip {
  position: absolute; right: 10px; bottom: 74px; z-index: 4; width: 250px; display: grid; grid-template-columns: 96px 1fr auto auto;
  align-items: center; gap: 8px; padding: 6px; background: #1C1C1C; border: 1px solid #333; border-radius: 10px;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.95); animation: pipin .3s cubic-bezier(.2,.8,.3,1) both;
}
.docked .minip { bottom: 136px; }
@keyframes pipin { from { transform: translateY(20px) scale(.9); opacity: 0; } }
.pipimg { position: relative; width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 0; padding: 0; background: #000; }
.pipimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.minip.audio .pipimg .photo { filter: brightness(.4); }
.pipwave { position: absolute; left: 8px; right: 8px; top: 30%; height: 40%; }
.pipwave .rcpwave { fill: var(--live); }
.pipimg .vlive.sm { position: absolute; left: 4px; top: 4px; font-size: 8.5px; padding: 2px 5px; }
.piptx { display: grid; min-width: 0; }
.piptx b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piptx small { font-size: 11px; color: var(--muted); }
.pipb { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #2C2C2C; color: #fff; display: grid; place-items: center; }
.pipb svg { width: 13px; height: 13px; }

/* ---- every court: how hot, and one tap to watch or listen ---- */
.court { grid-template-columns: 1fr auto; }
.court .heat { grid-column: 2; grid-row: 1; justify-self: end; }
.court .cacts { grid-column: 1 / -1; grid-row: 4; display: flex; gap: 8px; margin-top: 8px; }
.cbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #3A3A3A; background: none; color: #fff; font-size: 12.5px; font-weight: 700; }
.cbtn svg { width: 13px; height: 13px; }
.cbtn.pri { background: #fff; color: #000; border-color: #fff; }
.cbtn.pri svg path { fill: #000; }
.court:not(.top) .cacts { display: none; }
.court:not(.top) { grid-template-rows: auto auto auto; cursor: default; }
.court:not(.top):hover .cacts, .court:not(.top):focus-within .cacts { display: flex; }
.heat { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.hbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.hbars i { width: 4px; border-radius: 1px; background: #3A3A3A; }
.hbars i:nth-child(1) { height: 5px; } .hbars i:nth-child(2) { height: 7px; } .hbars i:nth-child(3) { height: 10px; } .hbars i:nth-child(4) { height: 12px; }
.heat.h1 i:nth-child(-n+1), .heat.h2 i:nth-child(-n+2), .heat.h3 i:nth-child(-n+3), .heat.h4 i:nth-child(-n+4) { background: #9ADFA0; }
.heat.h4 { color: var(--yellow); }
.heat.h4 i { background: var(--yellow) !important; }
.bites { display: grid; gap: 8px; }
.bite { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 8px; background: var(--card); border: 0; color: #fff; }
.bite:hover { background: #242424; }
.bplay { width: 38px; height: 38px; border-radius: 50%; background: var(--live); display: grid; place-items: center; }
.bplay svg path { fill: var(--live-ink); }
.btx { display: grid; gap: 2px; }
.btx b { font-size: 14px; }
.btx span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.bdur { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* menu: theme and spoilers */
.dset { padding-top: 4px; }
.dset .ntype { border-bottom-color: #1E1E1E; }
.dthemebtn svg { width: 20px; height: 20px; }

/* website bits */
.wstlink { display: grid; gap: 6px; border: 0; background: none; padding: 0; text-align: left; color: #fff; cursor: pointer; width: 100%; }
.wstlink .wstimg { display: block; margin-bottom: 8px; }
.wstlink:hover .wh2 { text-decoration: underline; text-underline-offset: 3px; }
.wstory .engage { margin: 14px 0 0; }
.web .sheet { left: auto; right: 0; top: 0; bottom: 0; width: 420px; max-height: none; border-radius: 0; border-left: 1px solid #2C2C2C; animation: sheetside .3s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sheetside { from { transform: translateX(100%); } }
.web .sheet .grab { display: none; }
.web .minip { bottom: 20px; right: 20px; }
.wmast .nbell { color: #fff; }
.viewport.hasvid .sportrow { display: none; }
.viewport.hasvid .paired { display: none; }
.viewport:has(.minip) .toast { bottom: 150px; }
.tvtag { display: flex; align-items: center; gap: 7px; margin: 0; padding: 2px var(--gut) 0; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #B79CFF; }
.tvtag svg { width: 15px; height: 15px; }

/* ==========================================================================
   Light mode. The phone and the website only: the telly stays dark, and
   anything laid over a photograph keeps its own dark veil and white type.
   ========================================================================== */
body[data-theme="light"] #app {
  --black: #FFFFFF; --bg: #F4F4F4; --panel: #FFFFFF; --card: #F1F1F1; --card-2: #E7E7E7;
  --line: #D6D6D6; --line-soft: #E6E6E6; --text: #121212; --text-2: #3A3A3A; --muted: #6A6A6A;
  --live-text: #007A78; color-scheme: light; color: var(--text);
}
body[data-theme="light"] .device { background: #fff; border-color: #CFCFCF; }
body[data-theme="light"] #app .viewport, body[data-theme="light"] #app .web { background: #fff; color: var(--text); }
body[data-theme="light"] #app .bbcblocks i { background: #000; color: #fff; }
body[data-theme="light"] #app .sportmark, body[data-theme="light"] #app .wsportmark { color: #000; }
body[data-theme="light"] #app .apphead { border-bottom: 1px solid var(--line-soft); }
body[data-theme="light"] #app .iconbtn { color: #121212; }
body[data-theme="light"] #app .iconbtn svg [stroke="#fff"] { stroke: #121212; }
body[data-theme="light"] #app .iconbtn svg [fill="#fff"] { fill: #121212; }
body[data-theme="light"] #app .menubtn { background: #F1F1F1; border-color: #D6D6D6; }
body[data-theme="light"] #app .meav, body[data-theme="light"] #app .dav { background: #E4E4E4; color: #333; border-color: #9A9A9A; }
body[data-theme="light"] #app .ndot { box-shadow: 0 0 0 2px #fff; }
body[data-theme="light"] #app .bottomnav { border-top: 1px solid var(--line-soft); }
body[data-theme="light"] #app .nav[aria-selected="true"], body[data-theme="light"] #app .tabbtn[aria-selected="true"] { color: #000; }
body[data-theme="light"] #app .nav svg [stroke="#fff"] { stroke: currentColor; }
body[data-theme="light"] #app .feedhead, body[data-theme="light"] #app .feedhead .secarrow { color: #121212; }
body[data-theme="light"] #app .feedhead svg [stroke="#fff"] { stroke: #121212; }
body[data-theme="light"] #app .srow.now .sname, body[data-theme="light"] #app .srow.now .sscore,
body[data-theme="light"] #app .reslab b, body[data-theme="light"] #app .formmeta b, body[data-theme="light"] #app .totrow b,
body[data-theme="light"] #app .sesslab b, body[data-theme="light"] #app .ptotal b, body[data-theme="light"] #app .tmotime b,
body[data-theme="light"] #app .ltable td.tpos, body[data-theme="light"] #app .sctable td.scr, body[data-theme="light"] #app .sctable td.scname b,
body[data-theme="light"] #app .rcpread p, body[data-theme="light"] #app .arbody p, body[data-theme="light"] #app .spoilbar b,
body[data-theme="light"] #app .wcmeta b, body[data-theme="light"] #app .vtrans p.now { color: #121212; }
body[data-theme="light"] #app .ecard, body[data-theme="light"] #app .court, body[data-theme="light"] #app .bite,
body[data-theme="light"] #app .eng, body[data-theme="light"] #app .comptab, body[data-theme="light"] #app .summary { background: #F1F1F1; color: #121212; }
body[data-theme="light"] #app .ecard:hover, body[data-theme="light"] #app button.eng:hover, body[data-theme="light"] #app .bite:hover { background: #E8E8E8; border-color: #D0D0D0; }
body[data-theme="light"] #app .ec-when.live, body[data-theme="light"] #app .watching, body[data-theme="light"] #app .statusrow.live,
body[data-theme="light"] #app .stateline, body[data-theme="light"] #app .vtk, body[data-theme="light"] #app .wwatch { color: var(--live-text); }
body[data-theme="light"] #app .optbtn, body[data-theme="light"] #app .stepb, body[data-theme="light"] #app select,
body[data-theme="light"] #app .ball, body[data-theme="light"] #app .tgt, body[data-theme="light"] #app .shbtn,
body[data-theme="light"] #app .listenbtn.ontv, body[data-theme="light"] #app .stlisten, body[data-theme="light"] #app .pipb { background: #EDEDED; color: #121212; border-color: #D3D3D3; }
body[data-theme="light"] #app .listenbtn.ontv svg path, body[data-theme="light"] #app .shbtn svg path, body[data-theme="light"] #app .stlisten svg path { fill: currentColor; }
body[data-theme="light"] #app .listenbtn.watchbtn { background: #121212; color: #fff; }
body[data-theme="light"] #app .listenbtn.watchbtn svg path { fill: #fff; }
body[data-theme="light"] #app .optbtn:hover { border-color: #999; }
body[data-theme="light"] #app .hysbtn, body[data-theme="light"] #app .btn, body[data-theme="light"] #app .dchip,
body[data-theme="light"] #app .rcpspeed, body[data-theme="light"] #app .dkread, body[data-theme="light"] #app .cbtn,
body[data-theme="light"] #app .spoilbar button, body[data-theme="light"] #app .shchip, body[data-theme="light"] #app .dh2,
body[data-theme="light"] #app .dcom, body[data-theme="light"] #app .nrow, body[data-theme="light"] #app .ntype,
body[data-theme="light"] #app .clip, body[data-theme="light"] #app .rpage, body[data-theme="light"] #app .wstlink, body[data-theme="light"] #app .rbtn:hover { color: #121212; border-color: #CFCFCF; }
body[data-theme="light"] #app .cbtn.pri, body[data-theme="light"] #app .shchip[aria-pressed="true"] { background: #121212; color: #fff; border-color: #121212; }
body[data-theme="light"] #app .cbtn.pri svg path { fill: #fff; }
body[data-theme="light"] #app .chip:hover { background: #E4E4E4; color: #121212; }
body[data-theme="light"] #app .searchin, body[data-theme="light"] #app .composer input, body[data-theme="light"] #app .wcomfake, body[data-theme="light"] #app .wsearch { background: #F1F1F1; color: #121212; border-color: #D3D3D3; }
body[data-theme="light"] #app .drawer { background: #fff; }
body[data-theme="light"] #app .drawer .dl { background: #F3F3F3; color: #121212; }
body[data-theme="light"] #app .dtop .iconbtn { background: #F1F1F1; color: #121212; }
body[data-theme="light"] #app .dcom, body[data-theme="light"] #app .dbadge2 { background: #F4F4F4; }
body[data-theme="light"] #app .dock { background: #F4F4F4; border-top-color: #DADADA; color: #121212; }
body[data-theme="light"] #app .dkplay { background: #121212; }
body[data-theme="light"] #app .dkplay svg path, body[data-theme="light"] #app .dkplay svg rect { fill: #fff; }
body[data-theme="light"] #app .dkbar { background: #DADADA; }
body[data-theme="light"] #app .sheet { background: #fff; border-top-color: #DDD; color: #121212; }
body[data-theme="light"] #app .composer { background: #fff; border-top-color: #E4E4E4; }
body[data-theme="light"] #app .nic { background: #EAF7F7; color: var(--live-text); }
body[data-theme="light"] #app .nic svg path[fill="#fff"] { fill: var(--live-text); }
body[data-theme="light"] #app .grab { background: #CCC; }
body[data-theme="light"] #app .sw { background: #CFCFCF; }
body[data-theme="light"] #app .sw.on { background: var(--live-core); }
body[data-theme="light"] #app .scard { background: #F1F1F1; }
body[data-theme="light"] #app .article, body[data-theme="light"] #app .arbar, body[data-theme="light"] #app .arfoot { background: #fff; border-color: #E4E4E4; color: #121212; }
body[data-theme="light"] #app .arkicker { color: #8A6D00; }
body[data-theme="light"] #app .spoilbar { background: #FFF8DC; border-color: #F0D878; color: #4A4A4A; }
body[data-theme="light"] #app .spoilbar svg { color: #8A6D00; }
body[data-theme="light"] #app .shieldin { background: #FFF8DC; border-color: #F0D878; color: #121212; }
body[data-theme="light"] #app .shk { color: #8A6D00; }
body[data-theme="light"] #app .shbtn.ghost { background: #fff; }
body[data-theme="light"] #app .revealpill { background: #FFF3C4; color: #6F5700; border-color: #E6C654; }
body[data-theme="light"] #app .watchbar { color: #121212; background: #EAF7F7; border-color: #9EDCDA; }
body[data-theme="light"] #app .wbtx small, body[data-theme="light"] #app .wbic { color: var(--live-text); }
body[data-theme="light"] #app .tvtag, body[data-theme="light"] #app .paired .p1 { color: #6A45C9; }
body[data-theme="light"] #app .vtrans { background: #F2F8F8; border-bottom-color: #D8E8E8; }
body[data-theme="light"] #app .vtrans p b { color: #121212; }
body[data-theme="light"] #app .minip { background: #fff; border-color: #D6D6D6; color: #121212; }
body[data-theme="light"] #app .rpy { color: #7A6331; }
body[data-theme="light"] #app .tbadge { color: #fff; }
body[data-theme="light"] #app .likebtn.on { color: #121212; }
body[data-theme="light"] #app .likebtn.sm:hover { color: #121212; }
body[data-theme="light"] #app .ec-title, body[data-theme="light"] #app .ltitle, body[data-theme="light"] #app .btitle,
body[data-theme="light"] #app .cltitle, body[data-theme="light"] #app .ntx b { color: #121212; }
body[data-theme="light"] #app .chipsoon { background: #fff; color: #7A5F00; border-color: #D9B437; }
body[data-theme="light"] #app .chipsoon.remind.on { background: var(--yellow); color: #111; }
body[data-theme="light"] #app .chipdone { background: rgba(255,255,255,.9); color: #333; }
/* photographs keep their veils and white type */
body[data-theme="light"] #app .livetake, body[data-theme="light"] #app .stphoto, body[data-theme="light"] #app .vid,
body[data-theme="light"] #app .push, body[data-theme="light"] #app .rcpstage, body[data-theme="light"] #app .fphoto,
body[data-theme="light"] #app .climg, body[data-theme="light"] #app .wheroimg, body[data-theme="light"] #app .wherotext,
body[data-theme="light"] #app .wplayer, body[data-theme="light"] #app .scimg, body[data-theme="light"] #app .reader,
body[data-theme="light"] #app .feat, body[data-theme="light"] #app .takeover, body[data-theme="light"] #app .pipimg { color: #fff; }
body[data-theme="light"] #app .livetake .tocard { color: #fff; }
/* the website's own chrome */
body[data-theme="light"] #app .wmast, body[data-theme="light"] #app .wsport { background: #fff; border-bottom-color: #E2E2E2; }
body[data-theme="light"] #app .wnav a, body[data-theme="light"] #app .wsport nav a { color: #121212; }
body[data-theme="light"] #app .wnav a.on, body[data-theme="light"] #app .wsport nav a.on { border-color: #121212; }
body[data-theme="light"] #app .wevhead { background: #fff; border-bottom-color: #E2E2E2; }
body[data-theme="light"] #app .wlivelist, body[data-theme="light"] #app .wpanel { background: #F4F4F4; }
body[data-theme="light"] #app .wlrow, body[data-theme="light"] #app .wcard, body[data-theme="light"] #app .wshort { color: #121212; }
body[data-theme="light"] #app .wbrowser { background: #EDEDED; border-bottom-color: #D8D8D8; }
body[data-theme="light"] #app .wurl { background: #fff; color: #444; }
body[data-theme="light"] #app .wfoot { border-top-color: #E2E2E2; }
body[data-theme="light"] #app .wcentre #stage { background: #fff; }
body[data-theme="light"] #app .wctext { color: #222; }
body[data-theme="light"] #app .wcav { background: #E4E4E4; color: #333; }
body[data-theme="light"] #app .livetake, body[data-theme="light"] #app .stphoto, body[data-theme="light"] #app .vid,
body[data-theme="light"] #app .push, body[data-theme="light"] #app .rcpstage, body[data-theme="light"] #app .fphoto,
body[data-theme="light"] #app .climg, body[data-theme="light"] #app .whero, body[data-theme="light"] #app .wplayer,
body[data-theme="light"] #app .scimg, body[data-theme="light"] #app .reader, body[data-theme="light"] #app .feat {
  --text: #FFFFFF; --text-2: #C4C4C4; --muted: #9A9A9A; --card: #1C1C1C; --card-2: #262626; --line: #303030; --line-soft: #242424; --panel: #151515; --bg: #0D0D0D;
}
body[data-theme="light"] #app .sportsection { color: #555; }
body[data-theme="light"] #app .pipb { color: #121212; }
body[data-theme="light"] #app .pipb svg [fill="#fff"] { fill: #121212; }
body[data-theme="light"] #app .ststand { color: #3A3A3A; }

/* ==========================================================================
   v12: calmer reminders, player controls, voices, full screen, the experts
   ========================================================================== */

/* Following today: the time is plain text, the reminder a quiet pill below */
.ec-when.soon { color: var(--yellow); }
.ec-foot { display: flex; margin-top: 6px; }
.rpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  border: 1px solid #3A3A3A; color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.2;
}
.rpill:hover { border-color: var(--yellow); color: var(--yellow); }
.rpill.on { background: rgba(255,210,48,.14); border-color: rgba(255,210,48,.6); color: var(--yellow); }
body[data-theme="light"] #app .rpill { border-color: #CFCFCF; color: #333; }
body[data-theme="light"] #app .rpill.on { background: #FFF3C4; color: #6F5700; border-color: #E6C654; }

/* player controls: one row, a thin progress line on the bottom edge */
.vctl { position: absolute; left: 8px; right: 8px; bottom: 9px; display: flex; align-items: center; gap: 7px; }
.vpp { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center; flex: none; }
.vpp svg path, .vpp svg rect { fill: #000; }
.vlivepill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 6px #000; }
.vlivepill i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(0,204,199,.25); }
.vclock { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px #000; }
.vic { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; flex: none; }
.vic svg { width: 18px; height: 18px; }
.vic[aria-pressed="true"] { background: #fff; color: #000; }
.vprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.22); }
.vprog i { display: block; height: 100%; background: var(--live); transition: width .2s linear; }
.vprog.live i { background: linear-gradient(90deg, rgba(0,204,199,.55), var(--live)); }
.vvoice {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px 0 4px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.6); color: #fff; max-width: 170px; min-width: 0;
}
.vvoice > span:not(.vav) { display: grid; text-align: left; line-height: 1.1; min-width: 0; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vvoice small { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #BDBDBD; }
.vvoice > svg { width: 12px; height: 12px; transform: rotate(90deg); flex: none; opacity: .8; }
.vav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 800; color: #fff; }
.vav.ic { background: rgba(255,255,255,.14); }
.vav.ic svg { width: 14px; height: 14px; }
.vav.lg { width: 38px; height: 38px; font-size: 13px; }
.vav.lg.ic { background: #262626; color: var(--live); }
.vav.lg.ic svg { width: 18px; height: 18px; }
.vid .vlabel { top: 42px; }
.vid.audio .vaud { bottom: 54px; }
.vrow { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid #242424; background: none; color: #fff; text-align: left; }
.vrtx { display: grid; gap: 2px; }
.vrtx b { font-size: 14.5px; }
.vrtx small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.vrow.on b { color: var(--live); }
.vrow i svg { width: 20px; height: 20px; }
.vrow i svg path { stroke: var(--live); }
body[data-theme="light"] #app .vrow { color: #121212; border-bottom-color: #E6E6E6; }
body[data-theme="light"] #app .vrow.on b { color: var(--live-text); }

/* full screen */
.vfs { position: absolute; inset: 0; z-index: 4; background: #000; overflow: hidden; color: #fff; animation: fadein .25s both; }
.vfs.rot { inset: auto; top: 0; left: 0; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
.vfs .vidimg { position: absolute; inset: 0; }
.vfs .vidimg .photo { width: 100%; height: 100%; object-fit: cover; }
.vfs .vidimg.arch .photo { filter: sepia(.5) contrast(1.05); }
.vfs .vidveil { background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 66%, rgba(0,0,0,.8)); }
.fstop { position: absolute; top: 14px; left: 18px; right: 18px; display: flex; align-items: flex-start; gap: 14px; }
.fsl { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.fsbug { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.62); padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; }
.fsbug b { font-size: 17px; font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.fsbn { display: inline-flex; align-items: center; gap: 7px; }
.fsbn i { width: 8px; height: 8px; border-radius: 2px; }
.fssub { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; color: #D0D0D0; text-shadow: 0 1px 6px #000; white-space: nowrap; }
.fstop { justify-content: space-between; }
.fstop .fsbug { position: absolute; left: 50%; transform: translateX(-50%); }
.fstitle { margin: 0; font-size: 15px; font-weight: 700; text-shadow: 0 1px 8px #000; padding-top: 4px; }
.fsbot { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 48px; }
.fsbot .vctl { left: 0; right: 0; bottom: 8px; }
.fsbot .vprog { bottom: 0; border-radius: 2px; }
.vfs .vcap { bottom: 74px; font-size: 16px; }
.fsstats, .fsvoices {
  position: absolute; right: 14px; top: 62px; bottom: 70px; width: 300px; overflow-y: auto; padding: 14px 16px;
  background: rgba(10,10,10,.86); backdrop-filter: blur(8px); border-radius: 10px; animation: tvside .25s both;
}
.fsstats .tostats { display: grid; gap: 10px; margin-top: 8px; }
.fsvoices .shsub { margin-top: 8px; }
.fsvoices .vrow { padding: 8px 0; }
.fsaud { position: absolute; left: 24px; right: 24px; top: 70px; bottom: 76px; display: grid; align-content: center; gap: 6px; }
.fsaud .vwave { height: 56px; margin-bottom: 8px; }
.fsaud p { margin: 0; font-size: 14px; color: #9A9A9A; }
.fsaud p b { color: #CFCFCF; margin-right: 10px; }
.fsaud p.now { color: #fff; font-size: 16px; }
.web .wpfs { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; }
.web .wpnow { right: 58px; }

/* ask the experts */
.pund { display: grid; gap: 12px; }
.phosts { grid-auto-columns: 156px; }
.phost { display: grid; justify-items: start; gap: 3px; padding: 12px; border-radius: 10px; background: var(--card); }
.phav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.phost b { font-size: 14px; line-height: 1.2; }
.phost small { font-size: 12px; color: var(--muted); }
.pstat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin: 2px 0 6px; }
.pstat.on { color: var(--live); }
.pstat i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: tobeat 1.6s ease-in-out infinite; }
.pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 0; background: #fff; color: #000; font-size: 12px; font-weight: 800; }
.pbtn svg { width: 12px; height: 12px; }
.pbtn svg path { fill: #000; }
.pbtn svg [stroke] { stroke: #000; }
.pbtn.ghost { background: none; border: 1px solid #444; color: #fff; }
.pbtn.ghost[aria-pressed="true"] { background: var(--live); border-color: var(--live); color: var(--live-ink); }
.pask { display: flex; align-items: center; gap: 9px; }
.pask input { flex: 1; min-width: 0; background: #1E1E1E; border: 1px solid #333; border-radius: 999px; color: #fff; padding: 10px 14px; font-size: 14px; font-family: inherit; }
.pask input:focus { outline: none; border-color: var(--live); }
.pask button { border: 0; background: var(--live); color: var(--live-ink); border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: 13.5px; }
.pnote { margin: -4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.xqs { display: grid; gap: 1px; }
.xq { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.xq > div { flex: 1; display: grid; gap: 2px; }
.xq b { font-size: 14px; line-height: 1.35; }
.xq small { font-size: 12px; color: var(--muted); }
.xq.mine b { color: var(--yellow); }
.votebtn { display: grid; justify-items: center; gap: 0; min-width: 44px; padding: 5px 6px; border-radius: 8px; border: 1px solid #3A3A3A; background: none; color: var(--text-2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.votebtn svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.votebtn.on { border-color: var(--live); color: var(--live); background: rgba(0,204,199,.08); }
.psub { margin: 4px 0 -2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body[data-theme="light"] #app .phost { background: #F1F1F1; }
body[data-theme="light"] #app .pask input { background: #F1F1F1; border-color: #D3D3D3; color: #121212; }
body[data-theme="light"] #app .pbtn.ghost { color: #121212; border-color: #CFCFCF; }
body[data-theme="light"] #app .pbtn { background: #121212; color: #fff; }
body[data-theme="light"] #app .pbtn svg path { fill: #fff; }
body[data-theme="light"] #app .votebtn { border-color: #CFCFCF; color: #333; }
body[data-theme="light"] #app .pstat.on, body[data-theme="light"] #app .votebtn.on { color: var(--live-text); }
body[data-theme="light"] #app .xq.mine b { color: #6F5700; }
/* full screen held upright: the picture in the middle, everything else around it */
.vfs.port .vidimg { top: 50%; bottom: auto; height: auto; aspect-ratio: 16 / 9; transform: translateY(-62%); }
.vfs.port .vidveil { display: none; }
.vfs.port .fstop { flex-wrap: wrap; row-gap: 12px; }
.vfs.port .fstop .fsbug { position: static; transform: none; order: 3; width: 100%; justify-content: center; }
.vfs.port .fssub { top: 104px; }
.vfs.port .fstitle { order: 3; width: 100%; text-align: center; }
.vfs.port .vcap { bottom: auto; top: calc(50% + 70px); left: 16px; right: 16px; }
.vfs.port .fsstats, .vfs.port .fsvoices { top: auto; left: 12px; right: 12px; width: auto; bottom: 74px; max-height: 34%; }
.vfs.port .fsaud { top: 130px; }
.vfs.rot .fsbug { font-size: 14px; }
.vvoice { flex: none; }
.vfs .vctl { gap: 6px; }
.fstop .vic { margin-top: -2px; }
.fstop .vwatch { margin-top: 4px; }
/* web and TV: the same voices and experts */
.wpvoice { position: absolute; left: 14px; bottom: 14px; }
.wltext .rpill { margin-top: 4px; }
.tvaudiochip .vav { width: 24px; height: 24px; font-size: 10px; }
.tvgroup { margin: 10px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; }
.tvopt.withav { grid-template-columns: 48px 1fr; column-gap: 16px; padding-left: 16px; }
.tvopt.withav .vav { grid-row: 1 / span 3; width: 48px; height: 48px; font-size: 15px; }
.tvopt.withav b, .tvopt.withav span:not(.vav), .tvopt.withav em { grid-column: 2; }
.tvworth.dim { background: rgba(255,255,255,.14); color: #fff; }
.tvopt.tvfocus .tvworth.dim { background: #111; }
.tvsheet { overflow-y: auto; padding-top: 44px; }
.tvask { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.06); }
.tvask .tvqr { width: 72px; height: 72px; }
.tvask span { display: grid; gap: 3px; font-size: 14px; color: #AFAFAF; }
.tvask b { font-size: 17px; color: #fff; }
.tv:has(.tvsheet) .tvtop .tvwatch { display: none; }

/* ==========================================================================
   v13: the hero fills the width, full screen to the edges, and a compact,
   sticky set of controls on a real phone
   ========================================================================== */
.livetake { aspect-ratio: auto; width: 100%; height: clamp(420px, 62vh, 563px); }

/* upright full screen: the picture against the top edge, the controls on it,
   and the space underneath given to what you are listening to */
.vfs { container-type: size; }
.vfs.port .vidimg { top: 0; transform: none; }
.vfs.port .vidveil { display: block; bottom: auto; height: calc(100cqw * 9 / 16);
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.75)); }
.vfs.port .fstop { top: 10px; left: 12px; right: 12px; flex-wrap: nowrap; }
.vfs.port .fstop .fsbug { position: absolute; order: 0; width: auto; left: 50%; top: calc(100cqw * 9 / 16 + 6px); transform: translateX(-50%);
  background: none; padding: 0; font-size: 15px; white-space: nowrap; }
.vfs.port .fssub { top: calc(100cqw * 9 / 16 + 34px); }
.vfs.port .fstitle { position: absolute; top: calc(100cqw * 9 / 16 + 8px); left: 0; right: 0; }
.vfs.port .fsbot { top: calc(100cqw * 9 / 16 - 54px); bottom: auto; left: 8px; right: 8px; }
.vfs.port .vcap { top: calc(100cqw * 9 / 16 - 104px); bottom: auto; font-size: 13.5px; }
.vfs.port .fsaud { top: 60px; bottom: auto; height: calc(100cqw * 9 / 16 - 120px); }
.fspanel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(100cqw * 9 / 16 + 60px); display: flex; flex-direction: column; background: #0B0B0B; border-top: 1px solid #1E1E1E; }
.fstabs { flex: none; display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #1E1E1E; }
.fstabs button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #333; background: none; color: #BDBDBD; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 800; }
.fstabs button svg { width: 16px; height: 16px; }
.fstabs button[aria-selected="true"] { background: #fff; color: #000; border-color: #fff; }
.fsbody { flex: 1; overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
.fsbody .shsub { position: sticky; top: 0; z-index: 1; background: #0B0B0B; margin: 0; padding: 12px 0 6px; }
.fsbody .tostats { display: grid; gap: 12px; padding-top: 16px; }
.fsvoices .vtk, .fsstats .vtk { position: sticky; top: -14px; z-index: 2; margin: -14px -16px 0; padding: 14px 16px 8px; background: rgba(10,10,10,.96); }
.fsvoices .shsub { position: sticky; top: 16px; z-index: 1; background: rgba(10,10,10,.96); padding: 6px 0; margin: 4px 0 0; }
.sheet.s-voices .shbody .shsub { position: sticky; top: -4px; z-index: 1; background: #161616; margin: 0; padding: 10px 0 6px; }
/* a real phone turned on its side: the picture fills the screen */
.vfs:not(.port):not(.rot) .fstop .fsbug { top: 0; }

.swipehint { display: none; }

@media (max-width: 460px) {
  html, body { height: 100%; overflow: hidden; }
  .deskframe { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .deskbar {
    position: relative; flex: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 6px; padding: 8px 10px 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }
  .deskbar .brandline, .deskbar .hintline { display: none; }
  .surface, .lifecycle { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: 999px; }
  .surface::-webkit-scrollbar, .lifecycle::-webkit-scrollbar { display: none; }
  .sf, .lc { flex: 1 0 auto; font-size: 12.5px; padding: 7px 11px; }
  .deskstage { flex: 1; min-height: 0; height: auto; padding: 0; display: block; overflow-y: auto; }
  body[data-surface="phone"] .deskstage, body[data-surface="web"] .deskstage { overflow: hidden; }
  figure.devwrap.phonewrap { display: block; height: 100%; width: 100%; }
  .device, #app, .viewport { width: 100%; max-width: 100%; }
  body[data-surface="together"] figure.devwrap.phonewrap { height: 82dvh; }
  .device { height: 100%; }
  #app { height: 100%; }
  .viewport, .web { height: 100%; max-height: none; min-height: 0; }
  .devcap { display: none !important; }
  body[data-surface="tv"] .tvwrap, body[data-surface="together"] .tvwrap { padding: 12px 10px 30px; }
}
#ovl { container-type: size; }
.vfs.rot { width: 100cqh; height: 100cqw; }
.drawer.noanim, .scrim.noanim { transition: none !important; }
.dthemebtn[aria-pressed="true"] { background: #FFF3C4 !important; color: #6F5700 !important; }

/* v14: on match pages the scoreboard scrolls with the page and the tabs stick */
#scrollbody > .tabbar { position: sticky; top: 0; z-index: 8; }
#scrollbody > .paired, #scrollbody > .matchhead { position: relative; }
#scrollbody { position: relative; }

/* ==========================================================================
   v15: bottom navigation as in the BBC Sport app, and My Sport
   ========================================================================== */
.nav { border-top: 0; padding: 8px 2px 10px; gap: 5px; color: #BDBDBD; font-size: 11.5px; }
.nav[aria-selected="true"] { color: #fff; border-top-color: transparent; }
.navpill { display: grid; place-items: center; width: 58px; height: 32px; border-radius: 999px; font-style: normal; transition: background .18s; }
.navpill svg { width: 23px; height: 23px; }
.nav[aria-selected="true"] .navpill { background: #4A4121; color: var(--yellow); }
.nav[aria-selected="true"] .navfill { fill: var(--yellow); }
.nav[aria-selected="true"] .navcut { stroke: #4A4121; }
body[data-theme="light"] #app .nav { color: #555; }
body[data-theme="light"] #app .nav[aria-selected="true"] { color: #000; }
body[data-theme="light"] #app .nav[aria-selected="true"] .navpill { background: #FFE9A3; color: #3B3000; }
body[data-theme="light"] #app .nav[aria-selected="true"] .navfill { fill: #3B3000; }
body[data-theme="light"] #app .nav[aria-selected="true"] .navcut { stroke: #FFE9A3; }

/* the watch and listen buttons sit side by side at their own size */
.listenrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.listenrow .listenbtn { flex: none; }
.listenrow .listenmeta { flex: 1 1 100%; }

/* My Sport */
.section.flush { padding: 0 0 8px; }
.ms { display: grid; gap: 0; }
.msrail { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 16px var(--gut) 14px; border-bottom: 1px solid var(--line-soft); }
.msrail::-webkit-scrollbar { display: none; }
.msf { flex: none; width: 72px; display: grid; justify-items: center; gap: 7px; border: 0; background: none; padding: 0; color: var(--text-2); }
.msav { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: #2E2E2E; display: block; }
.msav.fresh { background: conic-gradient(var(--yellow), #FFB000, var(--yellow)); }
.msavin { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--black); color: #fff; }
.msavin .photo { width: 100%; height: 100%; object-fit: cover; }
.msavin b { font-size: 18px; font-weight: 800; }
.msav.all .msavin { background: #1E1E1E; color: var(--yellow); }
.msav.add .msavin { background: #1E1E1E; font-size: 28px; font-weight: 300; color: var(--text-2); }
.msav.sm { width: 44px; height: 44px; padding: 2px; flex: none; }
.msav.sm b { font-size: 13px; }
.msn { font-size: 11.5px; line-height: 1.25; text-align: center; max-width: 72px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msf.on .msn { color: #fff; font-weight: 800; }
.msf.on .msav { background: #fff; }
.mshead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px var(--gut) 12px; }
.mshead h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; display: grid; }
.mshead h2 small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.msedit { border: 1.5px solid #555; background: none; color: var(--yellow); border-radius: 999px; padding: 8px 20px; font-size: 14px; font-weight: 800; }
.msedit.on { color: #fff; }
.mshero { display: grid; gap: 10px; width: 100%; border: 0; background: none; padding: 0 var(--gut) 18px; text-align: left; color: #fff; }
.msimg { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; position: relative; }
.msimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.mshero .msimg { margin: 0 calc(var(--gut) * -1); }
.mstitle { font-size: 16px; font-weight: 800; line-height: 1.25; }
.mstitle.big { font-size: 23px; line-height: 1.18; letter-spacing: -.01em; }
.mstag { font-size: 12.5px; color: var(--muted); }
.mstag b { color: var(--yellow); font-weight: 600; }
.mssub { font-size: 13px; color: var(--text-2); }
.msfeed { display: grid; }
.msrow { display: grid; grid-template-columns: 42% 1fr; gap: 12px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line-soft); background: none; padding: 14px var(--gut); color: #fff; align-items: start; }
.msthumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.msthumb .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.msthumb .chiplive, .msthumb .chipsoon { left: 6px; top: 6px; }
.mstx { display: grid; gap: 6px; min-width: 0; }
.mspair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px var(--gut); border-top: 1px solid var(--line-soft); }
.msshort { display: grid; gap: 7px; border: 0; background: none; padding: 0; text-align: left; color: #fff; align-content: start; }
.msshort .msimg.tall { aspect-ratio: 9 / 13; border-radius: 8px; }
.msshort .play { position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.msshort .play svg { width: 12px; height: 12px; }
.msshort .dur { position: absolute; right: 8px; bottom: 11px; font-size: 11.5px; font-weight: 700; background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 3px; }
.msshort .mstitle { font-size: 14px; }
.mscta { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 0 var(--gut); margin-top: 14px; margin-bottom: 14px; padding: 14px; border-radius: 10px; border: 0; text-align: left; color: #fff; background: var(--card); }
.mscta.quiz { background: linear-gradient(135deg, #2A2410, #1C1C1C); box-shadow: inset 0 0 0 1px rgba(255,210,48,.35); }
.mscta.ww { background: linear-gradient(135deg, #22163A, #1C1C1C); box-shadow: inset 0 0 0 1px rgba(122,63,209,.5); }
.msic { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); color: #111; display: grid; place-items: center; }
.mskick { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.mscta.qa .mskick { color: var(--live); }
.mscta.ww .mskick { color: #B79CFF; }
.msgo { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--text-2); }
.msgo svg { width: 14px; height: 14px; }
body[data-theme="light"] #app .msrow, body[data-theme="light"] #app .mshero, body[data-theme="light"] #app .msshort,
body[data-theme="light"] #app .mscta { color: #121212; }
body[data-theme="light"] #app .mstag b { color: #7A5F00; }
body[data-theme="light"] #app .mskick { color: #7A5F00; }
body[data-theme="light"] #app .msav { background: #D6D6D6; }
body[data-theme="light"] #app .msavin { border-color: #fff; }
body[data-theme="light"] #app .msf.on .msn, body[data-theme="light"] #app .msedit.on { color: #121212; }
body[data-theme="light"] #app .msedit { color: #7A5F00; border-color: #BDBDBD; }
body[data-theme="light"] #app .mscta.quiz { background: #FFF6D6; }
body[data-theme="light"] #app .mscta.ww { background: #F1EAFD; }

.build { font-style: normal; color: #6A6A6A; margin-left: 6px; }
.build.mob { display: none; }
@media (max-width: 460px) { .build.mob { display: block; font-size: 10px; text-align: right; margin: -2px 4px 0; } }
.ck.ckyour .cv { color: #B79CFF; }
.syncwhy { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* v19: two-way results as one bar */
.splitbar { margin-top: 12px; display: grid; gap: 7px; }
.sblabs { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.sblabs .me { color: var(--yellow); }
.sbtrack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #2A2A2A; gap: 2px; }
.sbtrack i { display: block; height: 100%; background: #5A5A5A; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.sbtrack i.me { background: var(--yellow); }
.sbline { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sbline b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.vpoll .splitbar { margin-top: 12px; }
body[data-theme="light"] #app .sbtrack { background: #E4E4E4; }
body[data-theme="light"] #app .sbtrack i { background: #B8B8B8; }
body[data-theme="light"] #app .sbtrack i.me { background: #E0B400; }
body[data-theme="light"] #app .sbline b { color: #121212; }
body[data-theme="light"] #app .sblabs .me { color: #7A5F00; }

/* coming-up cards: time and reminder under the picture, never on it */
.lfoot { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.lwhen { font-size: 12.5px; font-weight: 700; color: var(--yellow); }
body[data-theme="light"] #app .lwhen { color: #7A5F00; }

/* what is happening on each court, stated plainly */
.court .ctag { grid-column: 2; grid-row: 1; justify-self: end; font-size: 11.5px; font-weight: 700; color: var(--text-2); padding: 2px 8px; border-radius: 999px; border: 1px solid #3A3A3A; white-space: nowrap; }
.court .ctag.on { color: var(--yellow); border-color: rgba(255,210,48,.5); }
body[data-theme="light"] #app .court .ctag.on { color: #7A5F00; }

/* ==========================================================================
   v19: iPlayer on the TV, closer to the real app. Work in progress.
   ========================================================================== */
.tvwip {
  position: absolute; z-index: 50; top: 18px; right: 22px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #111; background: var(--yellow); padding: 5px 10px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.tvcap::after { content: " · work in progress"; color: var(--yellow); }
/* left rail */
.tvside {
  position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: 104px; display: flex; flex-direction: column; align-items: center;
  padding: 36px 0 32px; gap: 14px; background: linear-gradient(to right, rgba(0,0,0,.72), rgba(0,0,0,0)); transition: width .22s, background .22s;
}
.tvside.open { width: 330px; align-items: stretch; padding-left: 34px; background: #0E0E0E; box-shadow: 30px 0 60px rgba(0,0,0,.6); }
.tvsav { width: 50px; height: 50px; border-radius: 50%; background: #2F6FE4; color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; margin-bottom: 70px; flex: none; }
.tvside.open .tvsav { margin-bottom: 0; }
.tvsname { font-size: 20px; color: #fff; margin: -52px 0 64px 70px; }
.tvsi { display: flex; align-items: center; gap: 22px; border: 0; background: none; color: #D6D6D6; padding: 10px 12px; border-radius: 6px; position: relative; font-size: 21px; }
.tvsi i { display: grid; place-items: center; width: 34px; }
.tvsi i svg { width: 28px; height: 28px; }
.tvsi.on::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 16px; height: 4px; border-radius: 2px; background: #F54997; transform: translateX(-50%); }
.tvside.open .tvsi.on::after { left: 29px; }
.tvside.open .tvsi.on span { font-weight: 800; color: #fff; }
.tvsi.tvfocus { background: #fff; color: #000; }
.tvsbrand { margin-top: auto; font-size: 30px; font-weight: 800; color: #F54997; letter-spacing: .02em; }
.tv.sideopen .tvherotext, .tv.sideopen .tvrails { opacity: .35; }
.tv.s-home .tvherotext { left: 150px; top: 150px; }
.tv.s-home .tvrails { padding-left: 150px; top: 452px; }
.tv.deeper .tvrails { transform: translateY(-520px); }
.tvck { font-size: 13px; color: #A9A9A9; margin-top: 2px; }
/* player controls with the programme's own title, iPlayer style */
.tvctitle { margin-bottom: 26px; }
.tvctitle h2 { margin: 0; font-size: 40px; font-weight: 800; }
.tvctitle p { margin: 6px 0 0; font-size: 21px; color: #D6D6D6; }
.tvctrl { padding-top: 120px; }
.tvmark em { display: none; }
/* moments */
.tvopt.withthumb { grid-template-columns: 150px 1fr; column-gap: 18px; padding: 10px 18px 10px 10px; align-items: center; }
.tvothumb { grid-row: 1 / span 2; position: relative; display: block; width: 150px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #222; }
.tvothumb .photo { width: 100%; height: 100%; object-fit: cover; }
.tvothumb em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.75); padding: 2px 7px; border-radius: 3px; color: var(--yellow); }
.tvopt.withthumb b, .tvopt.withthumb > span:not(.tvothumb) { grid-column: 2; }
.tvopt.withthumb > span:not(.tvothumb) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tvb.wide { justify-content: center; margin-bottom: 6px; }
/* more like this, along the bottom of the picture */
.tvmore { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 0 34px 64px; background: linear-gradient(to top, rgba(0,0,0,.95) 40%, rgba(0,0,0,0)); animation: tvup .25s ease-out both; }
.tvmore h2 { margin: 0 0 16px; font-size: 26px; font-weight: 800; }
.tv:has(.tvmore) .tvhint, .tv:has(.tvmore) .tvl3, .tv:has(.tvmore) .tvphone { display: none; }
.tvside .tvsi.tvfocus, .tvside.open .tvsi.tvfocus span { color: #000; }
.tv.s-home .tvherotext { top: 120px; }
.tv.s-home .tvrails { top: 478px; }
.tv.deep .tvrails { transform: translateY(-282px); }
.tv.deeper .tvrails { transform: translateY(-548px); }

/* v20: team crests. Each sits on a small white tile so every crest reads on dark */
.crimg { display: inline-grid; place-items: center; flex: none; background: #fff; border-radius: 6px; overflow: hidden; vertical-align: middle; }
.crimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.crest.hasimg { background: #fff; padding: 7px; border-color: rgba(255,255,255,.25); }
.crest.hasimg .crimg { width: 100%; height: 100%; border-radius: 50%; }
.viewport.condensed .crest.hasimg { padding: 4px; }
.crimg.sm { width: 22px; height: 22px; border-radius: 4px; margin-right: 8px; }
.tos .crimg.sm { margin-right: 0; }
.tos.r .crimg.sm { margin-left: 0; }
.tos { display: inline-flex; align-items: center; gap: 8px; }
.crimg.xs { width: 18px; height: 18px; border-radius: 3px; margin-right: 7px; }
.pl.score3 .pn .crimg.xs { margin-bottom: 3px; }
.crimg.md { width: 40px; height: 40px; border-radius: 6px; margin: 0 12px 0 0; }
.wh1 .crimg.md:last-child { margin: 0 0 0 12px; }
.crimg.tvc { width: 56px; height: 56px; border-radius: 8px; margin: 0 16px 0 0; }
.tvherotext h1 .crimg.tvc:last-child { margin: 0 0 0 16px; }
.fsbn .crimg.xs { margin: 0; }
.srow .sname { display: inline-flex; align-items: center; }
.msavin.crest-in { background: #fff; padding: 9px; }
.msavin.crest-in img { width: 100%; height: 100%; object-fit: contain; }
/* surfaces still being built */
.sfwip { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; margin-left: 6px; padding: 2px 5px; border-radius: 3px; background: var(--yellow); color: #111; vertical-align: 1px; }
body[data-surface="together"] .phonecap::after { content: " · work in progress"; color: var(--yellow); }

/* ==========================================================================
   v21: the sport pages on the website. The day's fixtures first, grouped
   live, coming up and finished, then a mix of stories, posts, clips and
   shorts, with most read alongside.
   ========================================================================== */
.wsphead .wevrow { align-items: center; margin-bottom: 6px; }
.wsphead .wh1 { margin: 4px 0; }
.wsptabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.wsptabs a {
  flex: none; padding: 12px 12px 13px; font-size: 14px; color: var(--text-2); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.wsptabs a.on { color: var(--text); font-weight: 700; border-color: var(--yellow); }
.wsptabs a:hover { color: var(--text); }

.wfix { margin-top: 26px; }
.wfixcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.wfixcol { background: var(--panel); border-radius: 6px; padding: 14px 14px 6px; min-width: 0; }
.wfixcol h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.wfixcol h3 small {
  font-size: 11.5px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--card-2, #2A2A2A); color: var(--text);
}
.wfixcol.live h3 small { background: var(--live); color: var(--live-ink); }
.wfx {
  display: grid; gap: 4px; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--line-soft, #242424); padding: 11px 0 12px; color: var(--text);
}
.wfixcol h3 + .wfx { border-top: 0; padding-top: 2px; }
.wfxtop { display: flex; align-items: center; gap: 8px; }
.wfxmeta { font-size: 12.5px; color: var(--muted); }
.wfx b { font-size: 15.5px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.wfx:hover b { text-decoration: underline; }
.wfxsub { font-size: 12.5px; color: var(--muted); }
.wfx.feat {
  background: var(--card, #1A1A1A); border: 0; border-left: 3px solid var(--yellow); border-radius: 4px;
  padding: 11px 12px 12px; margin-bottom: 8px;
}
.wfixcol h3 + .wfx.feat { padding-top: 11px; }
.wfx.feat + .wfx { border-top: 0; }
.wfx.feat b { font-size: 17px; }
.wfxgo { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 2px; }
.wfxgo svg { width: 13px; height: 13px; }
.wfxnone { margin: 2px 0 12px; font-size: 13.5px; color: var(--muted); }

.wspbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.wspmain { min-width: 0; }
.wsptop { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; margin-bottom: 34px; }
.wspside2 { display: grid; gap: 16px; align-content: start; }
.wspst { display: grid; gap: 6px; align-content: start; width: 100%; background: none; border: 0; padding: 0; text-align: left; color: var(--text); }
.wspst b { font-size: 16px; line-height: 1.25; }
.wspst.big b { font-size: 26px; line-height: 1.12; }
.wspst:hover b { text-decoration: underline; }

.wspfeed { column-count: 3; column-gap: 18px; }
.wspcell { break-inside: avoid; margin-bottom: 18px; }
.wspsh { display: grid; gap: 6px; width: 100%; background: none; border: 0; padding: 0; text-align: left; color: var(--text); }
.wspsh .wsimg { aspect-ratio: 4 / 5; }
.wspsh b { font-size: 14.5px; line-height: 1.3; }

.wpost { background: var(--panel); border-radius: 6px; padding: 14px; }
.wpost.cr { box-shadow: inset 3px 0 0 #B79CFF; }
.wphead { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.wphead > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; flex: 1; }
.wphead b { font-size: 14px; }
.wphead small { font-size: 12px; color: var(--muted); }
.wpav {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.wpav.bbc { border-radius: 4px; background: #000; display: flex; gap: 1px; padding: 0 3px; border: 1px solid #333; }
.wpav.bbc i { font-style: normal; background: #fff; color: #000; font-size: 7.5px; line-height: 1; width: 8px; height: 9px; display: grid; place-items: center; }
.wpkind { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wpost.cr .wpkind { color: #B79CFF; }
.wptext { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); }

.wbite {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; color: var(--text);
  background: var(--panel); border: 0; border-radius: 6px; padding: 14px;
}
.wbite .bplay { flex: none; }
.wbite .bplay svg { width: 15px; height: 15px; }
.wbite.listen .bplay { background: var(--yellow); color: #000; }
.wbite.listen .bplay svg [fill="#fff"] { fill: #000; }
.wbite.listen .bplay svg [stroke="#fff"] { stroke: #000; }
.spbtx { display: grid; gap: 3px; min-width: 0; }
.spbtx b { font-size: 15px; line-height: 1.3; }
.spbtx small { font-size: 12.5px; color: var(--muted); }
.wbite:hover b { text-decoration: underline; }

.wspside { display: grid; gap: 18px; }
.wmost { margin: 0; padding: 0; list-style: none; counter-reset: most; }
.wmost li { counter-increment: most; display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft, #242424); }
.wmost li:first-child { border-top: 0; padding-top: 0; }
.wmost li::before { content: counter(most); font-size: 26px; font-weight: 800; line-height: 1; color: var(--yellow); min-width: 22px; }
.wmost button { background: none; border: 0; padding: 0; text-align: left; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.wmost button:hover { text-decoration: underline; }
.wcrumb button + button, .wcrumb button[data-sportpage] { margin: 0; }

body[data-theme="light"] #app .wfx.feat { background: #F4F4F4; }
body[data-theme="light"] #app .wmost li::before { color: #121212; }
body[data-theme="light"] #app .wpav.bbc { border-color: #000; }
body[data-theme="light"] #app .wpost, body[data-theme="light"] #app .wbite, body[data-theme="light"] #app .wfixcol { border: 1px solid #E2E2E2; }

@media (max-width: 1180px) {
  .wspbody { grid-template-columns: 1fr; }
  .wspside { grid-template-columns: 1fr 1fr; }
  .wspfeed { column-count: 2; }
}
@media (max-width: 900px) {
  .wfixcols, .wsptop, .wspside { grid-template-columns: 1fr; }
  .wspst.big b { font-size: 22px; }
}
@media (max-width: 560px) {
  .wspfeed { column-count: 1; }
}
body[data-theme="light"] #app .wfx, body[data-theme="light"] #app .wfxgo, body[data-theme="light"] #app .wspst,
body[data-theme="light"] #app .wspsh, body[data-theme="light"] #app .wbite, body[data-theme="light"] #app .wmost button,
body[data-theme="light"] #app .wptext, body[data-theme="light"] #app .wsptabs a.on { color: #121212; }

/* ==========================================================================
   v22: the website chrome and sport pages as bbc.co.uk/sport has them now.
   The BBC bar and the Sport bars stay black in both themes, as on the site.
   ========================================================================== */
.wmast { background: #000; border-bottom: 1px solid #2B2B2B; }
.wmastin { gap: 18px; height: 58px; }
.wmast .bbcblocks i { width: 27px; height: 27px; font-size: 18px; }
.wforyou {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0;
  color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.wforyou .meav { background: #1F6FEB; color: #fff; width: 28px; height: 28px; }
.wmsep { width: 1px; height: 26px; background: #444; }
.wnav { gap: 0; align-items: center; }
.wnav a {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700;
  padding: 19px 10px 17px; border-bottom: 0; color: #fff; white-space: nowrap;
}
.wnav a:hover { text-decoration: underline; }
.wni {
  width: 13px; height: 13px; flex: none; background: var(--c);
  clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 0, 100% 70%, 45% 70%, 45% 100%, 0 100%);
}
.wdots3 { letter-spacing: .1em; font-size: 18px !important; padding-top: 14px !important; }
.wsearch {
  display: inline-flex; align-items: center; gap: 10px; width: 230px; height: 40px;
  background: #242424; border: 0; border-radius: 0; color: #fff; font-size: 14px; font-weight: 700; padding: 0 14px;
}
.wsearch svg { flex: none; }

.wsport { background: #000; border-bottom: 0; }
.wsportmk { padding-top: 12px; padding-bottom: 10px; }
.wsportmark { font-size: 40px; line-height: 1; letter-spacing: .01em; color: #FFD230; }
.wsportbar { border-top: 1px solid #3A3A3A; }
.wsportin { height: auto; gap: 0; align-items: stretch; }
.wsnav { flex: 1; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.wsnav::-webkit-scrollbar, .wsub2::-webkit-scrollbar { display: none; }
.wsport nav.wsnav a, .wsub2 a {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  color: #fff; font-size: 15px; font-weight: 400; text-decoration: none; white-space: nowrap;
  padding: 13px 11px 12px; border: 0;
}
.wsport nav.wsnav a + a::before, .wsub2 a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: #555;
}
.wsport nav.wsnav a:first-child, .wsub2 a:first-child { padding-left: 0; }
.wsport nav.wsnav a.on, .wsub2 a.on { font-weight: 400; }
.wsport nav.wsnav a.on::after, .wsub2 a.on::after {
  content: ""; position: absolute; left: -8px; right: 0; bottom: 0; height: 4px; background: #FFD230;
}
.wsport nav.wsnav a:first-child.on::after, .wsub2 a:first-child.on::after { left: -8px; }
.wsport nav.wsnav a:hover, .wsub2 a:hover { text-decoration: underline; }
.wsub2 a svg { width: 13px; height: 13px; }
.wmorebtn {
  flex: none; display: inline-flex; align-items: center; gap: 10px; background: none; border: 0;
  border-left: 1px solid #3A3A3A; color: #fff; font-size: 15px; padding: 0 4px 0 18px;
}
.wmorebtn svg { width: 20px; height: 20px; }
.wsubbar { background: #202020; }
.wsub2 { display: flex; overflow-x: auto; scrollbar-width: none; }
.wsub2 a { font-size: 14.5px; padding-top: 11px; padding-bottom: 11px; }

/* the sport page */
.wsppage { padding-top: 4px; }
.bsphead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 18px; }
.bsphead h1 { font-size: 46px; font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.bfollow {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px;
  background: transparent; color: #fff; border: 2px solid #fff; border-radius: 0; font-size: 16px; font-weight: 700;
}
.bfollow b { font-size: 24px; font-weight: 400; line-height: 1; margin-top: -2px; }
.bfollow svg { width: 18px; height: 18px; }
.bfollow.on { background: #1F6FEB; border-color: #1F6FEB; }

/* scores and fixtures, compact */
.fxstrip { margin: 0 0 26px; }
.fxbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fxbar h2 { margin: 0; font-size: 15px; font-weight: 800; }
.fxbar h2 small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.fxall { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--text); font-size: 13px; font-weight: 700; }
.fxall svg { width: 12px; height: 12px; }
.fxrow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; scroll-snap-type: x proximity; }
.fxc {
  flex: 0 0 196px; scroll-snap-align: start; display: grid; gap: 3px; text-align: left;
  background: var(--panel); color: var(--text); border: 0; border-top: 3px solid transparent; border-radius: 3px;
  padding: 8px 11px 9px;
}
.fxc.fxfeat { border-top-color: #FFD230; background: var(--card, #1A1A1A); }
.fxc:hover .fxt b { text-decoration: underline; }
.fxhead { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; min-height: 17px; }
.fxlive { display: inline-flex; align-items: center; gap: 5px; background: var(--live); color: var(--live-ink); font-weight: 800; font-size: 10.5px; padding: 2px 6px; border-radius: 2px; }
.fxlive i { width: 6px; height: 6px; border-radius: 50%; background: var(--live-ink); }
.fxsoon { color: var(--text); font-weight: 700; }
.fxdone { color: var(--muted); font-weight: 700; }
.fxt { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.25; }
.fxt b { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxt em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: pre; }
.fxt .crimg.xs { flex: none; }
.fxcomp { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.fxcomp u { text-decoration: none; color: var(--text); font-weight: 700; }

/* story grid: a lead, then three columns */
.bgrid { display: grid; grid-template-columns: minmax(0, 2.05fr) repeat(3, minmax(0, 1fr)); gap: 26px 20px; }
.bgrid .bcard.lead { grid-row: span 2; }
.bgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; }
.bcard {
  display: flex; flex-direction: column; gap: 9px; text-align: left; background: none; border: 0; padding: 0; color: var(--text); min-width: 0;
}
.bimg { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.bimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.btitle { font-size: 17px; font-weight: 800; line-height: 1.22; }
.bcard.lead .btitle { font-size: 30px; line-height: 1.12; }
.bstand { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.bcard:hover .btitle { text-decoration: underline; }
.bmeta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.btag { color: #FFD230; }
.bdot { color: #777; }
.bcom { display: inline-flex; align-items: center; gap: 4px; color: #FFD230; }
.bcom svg { width: 14px; height: 14px; }
.bcom svg [stroke] { stroke: currentColor; }
.blive { display: inline-flex; align-items: center; gap: 5px; color: var(--live); }
.blive i { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--live); box-sizing: border-box; }

/* posts, clips and shorts */
.bmix { column-count: 4; column-gap: 20px; }
.bmixcell { break-inside: avoid; margin-bottom: 20px; }
.wspsh .wsimg { aspect-ratio: 4 / 5; border-radius: 0; }
.wspsh { gap: 8px; }
.wspsh .btitle { font-size: 15.5px; }
.spbtx .btag { font-size: 12.5px; }
.wpost, .wbite { border-radius: 0; }
.bmostwrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.bmost ol { margin: 0; padding: 0; list-style: none; counter-reset: most; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bmost li { counter-increment: most; display: grid; gap: 6px; align-content: start; border-top: 1px solid #333; padding-top: 10px; }
.bmost li::before { content: counter(most); font-size: 30px; font-weight: 800; line-height: 1; color: #FFD230; }
.bmost button { background: none; border: 0; padding: 0; text-align: left; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.bmost button:hover { text-decoration: underline; }

/* light mode: the chrome stays black, the page goes white */
body[data-theme="light"] #app .wmast, body[data-theme="light"] #app .wsport { background: #000; border-bottom-color: #2B2B2B; }
body[data-theme="light"] #app .wsubbar { background: #202020; }
body[data-theme="light"] #app .wnav a, body[data-theme="light"] #app .wsport nav a, body[data-theme="light"] #app .wsub2 a,
body[data-theme="light"] #app .wforyou, body[data-theme="light"] #app .wmorebtn { color: #fff; }
body[data-theme="light"] #app .wsportmark { color: #FFD230; }
body[data-theme="light"] #app .wmast .bbcblocks i { background: #fff; color: #000; }
body[data-theme="light"] #app .bcard, body[data-theme="light"] #app .bmost button, body[data-theme="light"] #app .fxc { color: #121212; }
body[data-theme="light"] #app .btag, body[data-theme="light"] #app .bcom, body[data-theme="light"] #app .bmost li::before { color: #8A6D00; }
body[data-theme="light"] #app .fxc { background: #F4F4F4; }
body[data-theme="light"] #app .fxc.fxfeat { background: #fff; border: 1px solid #E2E2E2; border-top: 3px solid #FFD230; }
body[data-theme="light"] #app .bfollow { color: #121212; border-color: #121212; }
body[data-theme="light"] #app .bfollow.on { color: #fff; border-color: #1F6FEB; }
body[data-theme="light"] #app .bmost li { border-top-color: #DDD; }

@media (max-width: 1180px) {
  .wnav a:nth-child(n+5) { display: none; }
  .bgrid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .bgrid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bmix { column-count: 3; }
  .bmostwrap { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wforyou, .wmsep { display: none; }
  .wsearch { width: auto; }
  .wsportmark { font-size: 32px; }
  .bgrid, .bgrid4 { grid-template-columns: 1fr 1fr; }
  .bgrid .bcard.lead { grid-column: 1 / -1; grid-row: auto; }
  .bmix { column-count: 2; }
  .bmost ol { grid-template-columns: 1fr 1fr; }
  .bsphead h1 { font-size: 36px; }
}
@media (max-width: 560px) {
  .wsearch { font-size: 0; gap: 0; width: 40px; justify-content: center; padding: 0; }
  .bcard.lead .btitle { font-size: 24px; }
  .bmix { column-count: 1; }
  .fxc { flex-basis: 172px; }
}

.wsub2 a:nth-child(2)::before { display: none; }
.wsub2 a:first-child { font-weight: 700; }

/* ==========================================================================
   v23: fixture cards as the site draws them, flags, web My Sport, more
   sports, and the TV as a radio for any audio-only event.
   ========================================================================== */
.fxbar { align-items: center; margin-bottom: 10px; }
.fxbar h2 { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; }
.fxbar h2 svg { width: 16px; height: 16px; }
.fxarrows { display: inline-flex; gap: 4px; }
.fxarr { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: #4A4121; color: #000; }
.fxarr.on { background: #FFD230; }
.fxarr svg { width: 18px; height: 18px; }
.fxarr svg [stroke] { stroke: #000; }
.fxrow { gap: 12px; scrollbar-width: none; }
.fxrow::-webkit-scrollbar { display: none; }
.fxc {
  flex: 0 0 calc((100% - 36px) / 4); min-width: 250px; display: grid; gap: 6px; padding: 0; background: none;
  border: 0; border-radius: 0; color: var(--text); text-align: left;
}
.fxcomp { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; }
.fxcomp u { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: #FFD230; font-weight: 700; font-size: 12px; }
.fxcomp u svg { width: 11px; height: 11px; }
.fxbody { display: flex; align-items: stretch; background: var(--panel); border-left: 4px solid #D8D8D8; min-height: 88px; }
.fxc.fxfeat .fxbody { border-left-color: #FFD230; }
.fxc.fxfeat { border-top: 0; background: none; }
.fxteams { flex: 1; min-width: 0; display: grid; }
.fxt { display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 15.5px; min-height: 44px; }
.fxt + .fxt { border-top: 1px solid var(--bg, #0A0A0A); }
.fxt b { font-weight: 700; }
.fxt em { font-size: 24px; font-weight: 400; }
.fxt.solo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 88px; }
.fxt.solo small { font-size: 13px; color: var(--muted); }
.fxflag { flex: none; width: 30px; height: 20px; display: block; }
.fxflag.none { background: transparent; }
.fxt .crimg.fxcr { flex: none; width: 30px; height: 30px; background: #fff; border-radius: 3px; padding: 2px; box-sizing: border-box; }
.fxt .crimg.fxcr img { width: 100%; height: 100%; object-fit: contain; }
.fxbox {
  flex: 0 0 84px; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center;
  border-left: 1px solid var(--bg, #0A0A0A); padding: 6px;
}
.fxbox b { font-size: 21px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fxbox b.fxft { font-size: 15px; font-weight: 700; }
.fxbox small { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fxbox .fxlive { margin-bottom: 2px; }
.fxc:hover .fxt b { text-decoration: underline; }
.fxhead { display: none; }

/* web My Sport */
.bmsh { font-size: 26px; font-weight: 800; margin: 6px 0 18px; }
.bchips { display: flex; flex-wrap: wrap; gap: 14px; max-height: 118px; overflow: hidden; }
.bchips.open { max-height: none; }
.bchip { display: inline-flex; align-items: stretch; background: #222; color: #fff; font-size: 17px; font-weight: 700; }
.bchip > span { padding: 12px 18px; }
.bchip button { width: 50px; border: 0; border-left: 1px solid #555; background: none; color: #fff; display: grid; place-items: center; }
.bchip button b { font-size: 26px; font-weight: 300; line-height: 1; }
.bchip button svg { width: 20px; height: 20px; }
.bseemore { display: flex; align-items: center; gap: 6px; margin: 16px auto 0; background: none; border: 0; color: #FFD230; font-size: 17px; font-weight: 700; }
.bseemore svg { width: 16px; height: 16px; transform: rotate(90deg); }
.bchips.open + .bseemore svg { transform: rotate(-90deg); }
.bfollowwrap { padding-bottom: 26px; border-bottom: 1px solid #333; margin-bottom: 26px; }
.bmstoday { margin-bottom: 30px; }
.bmsrow { margin: 0 0 30px; }
.bmshead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bmshead h2 { margin: 0; font-size: 26px; font-weight: 800; }
.bmshead h2 button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: var(--text); font: inherit; }
.bmshead h2 svg { width: 18px; height: 18px; }
.bmsmore { background: none; border: 0; color: var(--text); font-size: 17px; font-weight: 700; }
.bgrid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.bmsfx { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid #333; }
.bmostwrap.solo { grid-template-columns: 1fr; }

/* the TV as a radio, for anything audio-only that is not cricket */
.tvtiming { display: grid; gap: 6px; margin: 10px 0 12px; }
.tvtiming p { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; margin: 0; padding: 8px 14px; background: rgba(255,255,255,.07); border-radius: 4px; }
.tvtiming p.on { background: rgba(255,210,48,.14); }
.tvtiming span { font-size: 24px; font-weight: 700; }
.tvtiming b { font-size: 24px; font-variant-numeric: tabular-nums; }
.tvtiming small { grid-column: 1 / -1; font-size: 15px; color: #BDBDBD; }

body[data-theme="light"] #app .fxbody { background: #F2F2F2; }
body[data-theme="light"] #app .fxcomp u { color: #8A6D00; }
body[data-theme="light"] #app .bchip { background: #EDEDED; color: #121212; }
body[data-theme="light"] #app .bchip button { color: #121212; border-left-color: #BBB; }
body[data-theme="light"] #app .bseemore { color: #8A6D00; }
body[data-theme="light"] #app .bfollowwrap, body[data-theme="light"] #app .bmsfx { border-color: #DDD; }

@media (max-width: 1180px) {
  .fxc { flex-basis: calc((100% - 24px) / 3); }
  .bgrid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fxc { flex-basis: 260px; }
  .bgrid5 { grid-template-columns: 1fr 1fr; }
  .bmsh, .bmshead h2 { font-size: 21px; }
}
@media (max-width: 560px) {
  .fxarrows { display: none; }
  .fxc { flex-basis: 250px; }
  .bchips { gap: 8px; }
  .bchip { font-size: 15px; }
  .bchip > span { padding: 10px 12px; }
}

.fxgo { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: #FFD230; }
.fxgo svg { width: 11px; height: 11px; }
.fxgo svg [stroke] { stroke: currentColor; }
.bchip button svg [stroke] { stroke: currentColor; }
.bchip button svg [fill]:not([fill="none"]) { fill: currentColor; }
.bfollow svg [stroke] { stroke: currentColor; }
body[data-theme="light"] #app .fxgo { color: #8A6D00; }

/* ==========================================================================
   v25: the mixed row (posts, clips, shorts) as one aligned card shape.
   Three to a row, every card the same height as its neighbours, the same
   inner padding, and the footer pinned to the bottom edge.
   ========================================================================== */
.mxgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.mxc {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 16px;
  background: var(--panel); border: 0; border-radius: 0; color: var(--text); text-align: left; font: inherit;
}
.mxc.cr { box-shadow: inset 3px 0 0 #B79CFF; }
.mxc.media { padding: 0; gap: 0; }
.mxhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mxhead .wpav, .mxhead .bplay { flex: none; width: 36px; height: 36px; }
.mxhead .bplay svg { width: 14px; height: 14px; }
.mxwho { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mxwho b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxwho small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxkind { flex: none; align-self: flex-start; margin-top: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mxc.cr .mxkind { color: #B79CFF; }
.mxtext {
  margin: 0; font-size: 15px; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.mxtitle { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.mxfoot { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.mxfoot.wcact { gap: 16px; }
.mximg { position: relative; display: block; aspect-ratio: 2.2 / 1; overflow: hidden; background: #111; }
.mximg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.mxplay { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.65); display: grid; place-items: center; }
.mxplay svg { width: 13px; height: 13px; }
.mxdur { position: absolute; right: 10px; bottom: 12px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.65); padding: 2px 6px; }
.mxbody { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.mxc:hover .mxtitle, .mxc.media:hover .mxtitle { text-decoration: underline; }
body[data-theme="light"] #app .mxc { color: #121212; border: 1px solid #E2E2E2; }

/* most read sits in the same column rhythm as the rows above it */
.bmostwrap { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.bmost ol { gap: 16px; }
.bmostwrap .wbite.listen { align-self: start; margin-top: 44px; padding: 16px; }

@media (max-width: 1180px) { .mxgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mxgrid { grid-template-columns: 1fr; } }

/* five events today: one row of five rather than four and an orphan */
.wgrid4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* one rhythm for the website's rows: 20px gaps, and panels in a row share a height */
.wthree, .wtables { align-items: stretch; gap: 20px; }
.mxgrid, .bmostwrap, .fxrow { gap: 20px; }
.wtables > div { background: var(--panel); padding: 18px; }

/* ==========================================================================
   v26: before the start, the match page leads with what is worth knowing
   and ways in, rather than moments that have not happened yet.
   ========================================================================== */
.pmrows { margin: 0 0 14px; display: grid; }
.pmrows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft, #242424); }
.pmrows > div:first-child { border-top: 0; padding-top: 2px; }
.pmrows dt { font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.pmrows dd { margin: 0; display: grid; gap: 2px; }
.pmrows dd b { font-size: 15px; font-weight: 700; }
.pmrows dd span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.pmgo { display: grid; gap: 8px; }
.pmgo button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; text-align: left;
  background: var(--card, #1A1A1A); border: 0; border-left: 3px solid #FFD230; color: var(--text); font-size: 14px; font-weight: 700;
}
.pmgo button span { flex: 1; }
.pmgo button svg { width: 14px; height: 14px; flex: none; }
.pmgo button:hover span { text-decoration: underline; }
.wbtn.wfol.on { background: #1F6FEB; border-color: #1F6FEB; color: #fff; }
.wbtn.wfol svg [stroke] { stroke: currentColor; }
.iconbtn.compback.on svg path { fill: #FFD230; stroke: #FFD230; }
body[data-theme="light"] #app .pmgo button { background: #F2F2F2; color: #121212; }

.pmrows > div { grid-template-columns: 1fr; gap: 3px; }
.pmrows dt { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 0; }

/* ==========================================================================
   v27: radio-led match pages in the live site's current design language.
   The cricket head on one line, a live block with a full-width Listen
   live, a bar that pins once it scrolls away, the radio card with crests,
   and the scorecard, fall of wickets, teams and streams.
   ========================================================================== */
.ckhead { padding: 6px var(--gut) 14px; text-align: center; display: grid; gap: 4px; }
.ckdate { margin: 0; font-size: 13.5px; color: var(--muted); }
.ckcomp { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.ckline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ckname { display: inline-flex; align-items: center; gap: 6px; font-size: 21px; min-width: 0; }
.ckname b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckname.a { justify-self: end; }
.ckname.b { justify-self: start; }
.ckbat { color: var(--teal); display: inline-grid; }
.ckbat svg { width: 18px; height: 18px; }
.ckchip { font-size: 15px; font-weight: 700; padding: 4px 9px; background: #2A2A2A; color: var(--text-2); white-space: nowrap; }
.ckchip.on { background: var(--teal); color: var(--teal-ink); }
.ckline.sc { margin-top: 4px; }
.ckscore { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ckscore.a { justify-self: end; }
.ckscore.b { justify-self: start; }
.ckscore.now { color: var(--teal); font-size: 21px; font-weight: 800; }
.ckscore small { font-size: 13px; font-weight: 400; }
.ckstate { margin: 8px 0 0; font-size: 14.5px; color: var(--teal); }
.ckstrap { margin: 0; font-size: 12.5px; color: var(--muted); }
.ckreveal { justify-self: center; margin-top: 8px; }

.lvblock { padding: 14px var(--gut) 16px; background: #000; border-top: 1px solid var(--line-soft, #222); display: grid; gap: 8px; }
.lvlive { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--teal); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.lvlive i { width: 4px; height: 4px; background: var(--teal); }
.lvlive span:last-child { font-weight: 500; letter-spacing: 0; }
.lvring { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--teal); box-sizing: border-box; display: inline-block; position: relative; }
.lvring::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--teal); }
.lvhead { margin: 2px 0 0; font-size: 21px; font-weight: 800; line-height: 1.2; }
.lvprog { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.lvprog b { color: var(--text); }
.lvlisten {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 4px;
  padding: 13px 16px; border: 0; border-radius: 0; background: #019A9A; color: #fff; font-size: 16px; font-weight: 700;
}
.lvlisten svg path, .lvlisten svg [fill="#fff"] { fill: currentColor; }
.lvlisten svg [stroke] { stroke: currentColor; }
.lvlisten:hover { background: #02AFAF; }
.lvlisten.on { background: #0D3D3D; color: #7FE3E3; }
.lvlisten.sm { padding: 10px 14px; font-size: 14.5px; margin-top: 2px; }

.lvbar {
  position: absolute; left: 0; right: 0; z-index: 9; padding: 10px var(--gut) 12px; background: #000;
  border-bottom: 1px solid #222; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.viewport.lvstuck .lvbar { opacity: 1; transform: none; pointer-events: auto; }
.lvbar > * { grid-column: 1; }
.lvbar .lvbx { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.lvbar .lvlive { font-size: 13px; }
.lvbhead { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.lvbprog { margin: 0; font-size: 12px; color: var(--text-2); }
.lvbprog b { color: var(--text); }
.lvbar .lvlisten { grid-column: 1 / -1; }
.viewport.lvstuck #scrollbody > .tabbar { top: var(--lvh, 0px); }

/* the radio card */
.vid.audio.aart { background: #0B6E6E; }
.aartbg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,210,48,.55) 0 5px, transparent 5px 14px) right / 34% 100% no-repeat,
    radial-gradient(circle at 38% 60%, #16A5A5 0 38%, transparent 38.2%),
    linear-gradient(120deg, #0A7F80 0 45%, #0F9393 45% 100%);
}
.aartdiscs { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; }
.adisc {
  width: 92px; height: 92px; border-radius: 50%; background: #E9E9E9; border: 3px solid #C9A227;
  display: grid; place-items: center; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.adisc + .adisc { margin-left: 14px; }
.adisc .crimg.adc { width: 64px; height: 64px; }
.adisc .crimg.adc img { width: 100%; height: 100%; object-fit: contain; }
.adsport { color: #0B6E6E; }
.adsport svg { width: 48px; height: 48px; }
.actl { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 30px; }
.abig { width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; }
.abig svg { width: 22px; height: 22px; }
.abig svg path { fill: #fff; }
.askip { background: rgba(0,0,0,.28); border: 0; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 6px 10px; display: inline-flex; align-items: center; gap: 4px; }
.askip span { font-size: 14px; }
.askip.dim { opacity: .55; }
.aspeed { font-size: 13px; color: #fff; }
.abot { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 12px; }
.aprog { flex: 1; height: 4px; background: rgba(255,255,255,.3); position: relative; }
.aprog i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #7FE3E3; }
.aprog i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #7FE3E3; }
.alive { display: inline-flex; align-items: center; gap: 6px; color: #7FE3E3; font-size: 13px; font-weight: 800; }
.alive .lvring { border-color: #7FE3E3; width: 12px; height: 12px; }
.alive .lvring::after { background: #7FE3E3; }
.avoice { position: absolute; left: 10px; bottom: 26px; }
.vid.audio.aart .vtop .vic { background: rgba(0,0,0,.25); }

/* live reporting: the event and the score after it */
.pev { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.pevic { width: 36px; height: 36px; flex: none; color: var(--text); }
.pevic.num { display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-weight: 800; font-size: 17px; width: 32px; height: 32px; }
.pev span { display: grid; gap: 2px; }
.pev b { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.pev small { font-size: 14px; color: var(--text-2); }
.pev.four b, .pev.four .pevic { color: #FFD230; }

/* scorecard, fall of wickets, teams, streams */
.sctable.ck td, .sctable.ck th { padding-left: 6px; padding-right: 6px; }
.fowt td { text-align: left; }
.ckteams { display: grid; gap: 0; }
.cktabs { display: flex; justify-content: center; gap: 24px; border-bottom: 1px solid #333; margin-bottom: 12px; }
.cktabs button { background: none; border: 0; color: var(--text-2); font-size: 16px; padding: 10px 14px 12px; border-bottom: 4px solid transparent; }
.cktabs button[aria-selected="true"] { color: var(--text); font-weight: 800; border-color: #FFD230; }
.ckteamh { margin: 0; padding: 14px 16px; background: var(--card); font-size: 18px; font-weight: 700; }
.ckxi { list-style: none; margin: 0; padding: 0; }
.ckxi li { padding: 12px 16px; border-bottom: 1px solid #2A2A2A; font-size: 15px; font-weight: 700; }
.streams { display: grid; gap: 10px; }
.stream { display: grid; grid-template-columns: 46% 1fr; align-items: stretch; position: relative; background: var(--card); border: 0; padding: 0; text-align: left; color: var(--text); }
.start { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 4px; }
.start.ck { background: linear-gradient(120deg, #34C7C7 0 40%, #6BAF4B 40% 100%); }
.start.local { background: #512C84; }
.start b { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.start.local b { font-size: 13px; }
.stbbc { display: flex; align-items: center; gap: 2px; color: #fff; font-size: 10px; font-weight: 700; }
.stbbc i { font-style: normal; background: #fff; color: #000; width: 12px; height: 12px; display: grid; place-items: center; font-size: 8px; }
.sticon { position: absolute; left: 0; bottom: 0; width: 28px; height: 28px; background: #019A9A; display: grid; place-items: center; color: #fff; }
.sticon svg { width: 14px; height: 14px; }
.sticon svg path { fill: #fff; }
.sttx { display: grid; align-content: center; gap: 3px; padding: 10px 12px; }
.sttx b { font-size: 15px; line-height: 1.25; }
.sttx span { font-size: 13px; color: var(--muted); }
.sttx em { font-style: normal; font-size: 13px; color: var(--teal); }
.involvecta { background: var(--card); padding: 16px; display: grid; gap: 12px; justify-items: start; }
.involvecta h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; }
.involvecta button { display: inline-flex; align-items: center; gap: 10px; background: #FFD230; color: #000; border: 0; padding: 10px 16px; font-size: 15px; font-weight: 800; }
.involvecta button svg { width: 20px; height: 20px; }
.involvecta button svg [stroke] { stroke: #000; }

body[data-theme="light"] #app .lvblock, body[data-theme="light"] #app .lvbar { background: #fff; border-color: #E2E2E2; }
body[data-theme="light"] #app .ckchip:not(.on) { background: #EDEDED; color: #333; }
body[data-theme="light"] #app .ckxi li { border-color: #E2E2E2; }
body[data-theme="light"] #app .pev.four b, body[data-theme="light"] #app .pev.four .pevic { color: #8A6D00; }

.aartdiscs.one { left: 76%; }
.aartdiscs.one .adisc { width: 104px; height: 104px; }
.aartdiscs.one ~ .actl { left: 36%; }

/* ==========================================================================
   v28: the website's radio-led match pages in today's design, the full
   scorecard, the radio player and full screen, and the More menu.
   ========================================================================== */
.wx { display: none; }
.web .wx { display: table-cell; }
.web tr.wx { display: table-row; }
.web .apponly { display: none; }
.tabn { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--teal); color: var(--teal-ink); font-size: 11.5px; font-weight: 800; vertical-align: 1px; }

/* live reporting pictures */
.pimg { margin: 4px 0 12px; position: relative; }
.pimg .photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pimg figcaption { position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 8px; }

/* stream artwork */
.start.img { padding: 0; display: block; overflow: hidden; }
.start.img .photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* head band and live block */
.web .wband { background: #1F1F1F; padding: 22px 0 26px; }
.web .wband .ckhead { padding: 0 28px; gap: 6px; }
.web .wband .ckdate { font-size: 15px; }
.web .wband .ckcomp { font-size: 15.5px; margin: 0 0 6px; }
.web .wband .ckname { font-size: 30px; }
.web .wband .ckchip { font-size: 18px; padding: 5px 10px; }
.web .wband .ckscore { font-size: 16px; }
.web .wband .ckscore.now { font-size: 24px; }
.web .wband .ckstate { font-size: 16px; }
.ckline.one { grid-template-columns: 1fr auto 1fr; }
.f1lead { margin: 8px 0 0; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f1lead b { color: var(--text); }
.f1lead .now, .f1lead .now b { color: var(--teal); font-size: 18px; }

.wlv { position: relative; background: #000; overflow: hidden; }
.wlvimg { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.wlvimg .photo { width: 100%; height: 100%; object-fit: cover; opacity: .5; display: block; }
.wlvimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.25) 100%); }
.wlv .wwrap { position: relative; padding-top: 34px; padding-bottom: 38px; }
.wlvtext { max-width: 720px; display: grid; gap: 12px; }
.wlv .lvlive { font-size: 19px; }
.wlv .lvlive .lvring { width: 20px; height: 20px; border-width: 4px; }
.wlvh { margin: 2px 0 6px; font-size: 38px; font-weight: 800; line-height: 1.15; }
.wlvprog { margin: 0; font-size: 16px; color: var(--text-2); }
.wlvprog b { color: var(--text); }
.wlvbtns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.web .lvlisten { width: auto; margin-top: 0; padding: 12px 20px; font-size: 17px; }
.web .lvlisten.sm { padding: 10px 16px; font-size: 15px; }

/* the pinned bar */
.wlvbar { position: absolute; left: 0; right: 0; z-index: 9; background: #000; border-bottom: 1px solid #2A2A2A;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s, transform .18s; }
.web.lvstuck .wlvbar { opacity: 1; transform: none; pointer-events: auto; }
.wlvbar .wwrap { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding-top: 12px; padding-bottom: 14px; }
.wlvbar .lvbhead { font-size: 17px; margin: 4px 0 0; }
.wlvbr { display: grid; gap: 6px; justify-items: start; }
.wlvbr .lvbprog { font-size: 13px; }
.wlvbar .lvbx { align-self: start; }
.wcktabs { position: sticky; top: var(--lvh, 0px); z-index: 7; background: #000; border-bottom: 1px solid #2A2A2A; }
.wcktabs .tabbar { justify-content: center; border: 0; max-width: 1240px; margin: 0 auto; }
.wcktabs .tabbtn { font-size: 16px; }

/* two columns: summary and taking part on the left, the tab on the right */
.wckcols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; padding-top: 24px; align-items: start; }
.wckleft { display: grid; gap: 16px; }
.wckleft .section { padding: 0; }
.wckmain { min-width: 0; max-width: 900px; }
.wckmain .section { padding-left: 0; padding-right: 0; }
.web .involvecta h3 { font-size: 22px; }

/* the full scorecard */
.web .sctable.ck th, .web .sctable.ck td { padding: 14px 12px; }
.web .sctable.ck td.scdis { text-align: left; color: var(--text-2); }
.web .sctable.ck th.wx:empty { width: 1px; }
.sctot td { color: var(--teal); font-weight: 700; }
.sctot td.scr { font-size: 22px; color: var(--teal); }
.sctrx td { color: var(--text-2); }
.web .ckteams { max-width: 640px; }

/* watch & listen as the site lays it out */
.web .streams { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.web .stream { grid-template-columns: 1fr; }
.web .stream .sticon { bottom: auto; top: calc(100% * 0); }
.web .stream .start { aspect-ratio: 16 / 9; }
.web .stream .sticon { top: auto; bottom: auto; }
.web .stream { position: relative; }
.web .stream .sttx { padding: 14px 16px 16px; }
.web .stream .sttx b { font-size: 17px; }

/* the radio player */
.wradio { background: #000; padding: 18px 0 30px; }
.wrtop { max-width: 980px; margin: 0 auto 12px; display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text-2); }
.wrtop b { color: var(--text); }
.wrtop .iconbtn { margin-left: auto; }
.wrcard { position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #0B6E6E; color: #fff; }
.wrcard .aartdiscs { top: 50%; }
.wrcard .adisc { width: 180px; height: 180px; border-width: 5px; }
.wrcard .adisc + .adisc { margin-left: 24px; }
.wrcard .adisc .crimg.adc { width: 124px; height: 124px; }
.wrcard .adsport svg { width: 90px; height: 90px; }
.wrtitle { position: absolute; left: 26px; top: 20px; margin: 0; font-size: 24px; font-weight: 800; }
.wrctl { position: absolute; inset: 0; pointer-events: none; }
.wrctl button { pointer-events: auto; }
.wrb { background: none; border: 0; color: #fff; display: inline-grid; place-items: center; font-size: 22px; line-height: 1; }
.wrb small { font-size: 10px; font-weight: 800; letter-spacing: .04em; margin-top: -2px; }
.wrb svg { width: 24px; height: 24px; }
.wrb svg path { fill: #fff; }
.wrb svg [stroke] { stroke: #fff; }
.wrb.big svg { width: 38px; height: 38px; }
.wrb.dim { opacity: .5; }
.wrb b { font-size: 20px; }
.wrb.vol { position: absolute; right: 190px; top: 18px; }
.wrmid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 70px; }
.wrmid .skip { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.25); }
.wrmid .big { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.3); }
.wrend { position: absolute; right: 22px; top: 16px; display: flex; gap: 14px; align-items: center; }
.wrprog { position: absolute; left: 50px; right: 40px; bottom: 44px; display: flex; align-items: center; gap: 16px; }
.wrprog .aprog i { width: 30%; }
.wrvoice { position: absolute; left: 20px; bottom: 76px; }
.wrcc { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: 70%; margin: 0; background: rgba(0,0,0,.72); padding: 8px 12px; font-size: 15px; text-align: center; }
.wrcard.fs { position: absolute; z-index: 60; inset: 0; max-width: none; aspect-ratio: auto; margin: 0; }
.web .wrcard.fs { position: fixed; }
.wrcard.fs .wrmid { top: auto; bottom: 24px; transform: translateX(-50%); gap: 34px; }
.wrcard.fs .wrmid .skip, .wrcard.fs .wrmid .big { background: none; }
.wrcard.fs .wrb.vol { right: auto; left: 40px; top: auto; bottom: 30px; }
.wrcard.fs .wrend { top: auto; bottom: 28px; right: 40px; }
.wrcard.fs .wrprog { bottom: 92px; left: 60px; right: 60px; }
.wrcard.fs .wrvoice { bottom: 130px; left: 40px; }
.wrcard.fs .wrtitle { font-size: 30px; left: 40px; top: 28px; }
.wrcard.fs .adisc { width: 260px; height: 260px; }
.wrcard.fs .adisc .crimg.adc { width: 180px; height: 180px; }
.wrcard.fs .wrcc { bottom: 150px; }

/* More: every sport, then more from BBC Sport */
.wmega { background: #202020; border-top: 1px solid #333; padding: 18px 0 26px; }
.wmega h2 { margin: 6px 0 12px; font-size: 26px; font-weight: 400; color: #fff; }
.wmgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); margin-bottom: 18px; }
.wmgrid.more { grid-template-rows: repeat(2, auto); }
.wmgrid a { color: #fff; text-decoration: none; font-size: 16px; padding: 9px 14px; border-right: 1px solid #555; }
.wmgrid a:hover { text-decoration: underline; }
.wmorebtn.on { background: #202020; }
.wmorebtn svg [stroke] { stroke: currentColor; }
.wforyou .meav { flex: none; }

@media (max-width: 1180px) {
  .wckcols { grid-template-columns: 300px minmax(0, 1fr); }
  .wmgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: none; }
  .wmgrid.more { grid-template-rows: none; }
  .web .streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wforyou { display: inline-flex !important; }
  .wforyou .wfy { display: none; }
  .wckcols { grid-template-columns: 1fr; }
  .wlvh { font-size: 28px; }
  .wlvbar .wwrap { grid-template-columns: 1fr auto; }
  .wlvbr .lvbprog { display: none; }
  .wmgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrmid { gap: 26px; }
  .wrcard .adisc { width: 110px; height: 110px; }
  .wrcard .adisc .crimg.adc { width: 76px; height: 76px; }
  .web .wband .ckname { font-size: 22px; }
}
body[data-theme="light"] #app .wband { background: #F2F2F2; }
body[data-theme="light"] #app .wlv, body[data-theme="light"] #app .wlvbar, body[data-theme="light"] #app .wcktabs, body[data-theme="light"] #app .wradio { background: #fff; }
body[data-theme="light"] #app .wlvimg::after { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.8) 40%, rgba(255,255,255,.3) 100%); }

.fowt { display: grid; }
.fowh, .fowr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 12px 16px; font-size: 14.5px; }
.fowh { background: var(--card); font-size: 13px; color: var(--text-2); }
.fowr { border-bottom: 1px solid #2A2A2A; }
.fowr span { color: var(--text-2); }
.fowr span b { color: var(--text); }
body[data-theme="light"] #app .fowr { border-color: #E2E2E2; }
.tabbtn[aria-selected="true"] { border-bottom-color: #FFD230; }
.sctable.bowl { width: 100%; } .sctable.bowl th:not(.scname), .sctable.bowl td:not(.scname) { text-align: right; }

/* a new post: the NEW tag sits on the top edge, opposite the time */
.post { position: relative; }
.pnew { position: absolute; top: 0; right: 0; background: #000; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 6px 14px; }
body[data-theme="light"] #app .pnew { background: #fff; color: var(--live-text); }

/* ==========================================================================
   v30: football in the live page's current design. The head, the slim
   live block, clip rail, fixtures, tables, line-ups on a pitch, match
   stats, watch & listen with coming up, and the form guide.
   ========================================================================== */
.fbhead { padding: 10px var(--gut) 14px; text-align: center; display: grid; gap: 4px; }
.lvlive.c { justify-content: center; font-size: 17px; margin-bottom: 8px; }
.lvlive.c .lvring { width: 18px; height: 18px; border-width: 3.5px; }
.fbline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin-top: 10px; }
.fbside { display: grid; justify-items: center; gap: 8px; font-size: 17px; }
.fbside b { font-weight: 500; }
.fbmark { height: 42px; display: grid; place-items: center; }
.fbmark .fxflag { width: 56px; height: 37px; }
.fbmark .crimg.fbc { width: 44px; height: 44px; background: #fff; border-radius: 4px; padding: 3px; box-sizing: border-box; }
.fbmark .crimg.fbc img { width: 100%; height: 100%; object-fit: contain; }
.fbmid { display: grid; justify-items: center; gap: 2px; padding-top: 2px; }
.fbbig { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fbbig.sc { color: #fff; }
.fbbig.hid { color: var(--muted); }
.fbclock { font-size: 13px; font-weight: 800; color: var(--text-2); }
.fbclock.live { color: var(--teal); }
.fbscorers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 13px; font-weight: 700; margin-top: 6px; }
.fbdash { justify-self: center; width: 16px; height: 2px; background: #FFD230; margin: 10px 0 6px; }
.fbvenue { margin: 0; font-size: 13.5px; }
.fbvenue span { color: var(--muted); }
.lvblock.slim { background: var(--panel); border-top: 0; padding-top: 4px; }
.lvprog.c { text-align: center; font-size: 14.5px; }
.lvbtns { display: flex; gap: 8px; }
.lvbtns > * { flex: 1; margin-top: 4px; }
.lvwatch { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border: 0; background: #fff; color: #000; font-size: 16px; font-weight: 700; margin-top: 4px; }
.lvwatch svg path { fill: #000; }

/* posts */
.psub { margin: -2px 0 12px !important; font-size: 14px !important; color: var(--text) !important; }
.pcrest { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px !important; }
.pcrest .crimg.pc { width: 54px; height: 54px; background: #fff; border-radius: 50%; padding: 6px; box-sizing: border-box; }
.pcrest .crimg.pc img { width: 100%; height: 100%; object-fit: contain; }
.pcrest b { color: var(--text); font-size: 14px; }
.postbody p + p { margin-top: 12px; }
.postbody p b { color: var(--text); }

/* clips with the site's yellow corners */
.swrail { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.swclip { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 0; padding: 0; background: #111; text-align: left; color: #fff; }
.swimg { position: absolute; inset: 0; }
.swimg .photo { width: 100%; height: 100%; object-fit: cover; }
.swclip::before, .swclip::after { content: ""; position: absolute; z-index: 1; background: #FFD230; }
.swclip::before { top: -30%; left: -40%; width: 70%; height: 55%; border-radius: 50%; clip-path: inset(50% 0 0 50%); }
.swclip::after { right: -35%; bottom: 8%; width: 55%; height: 55%; border-radius: 50%; clip-path: inset(0 50% 0 0); opacity: .95; }
.swveil { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.85) 100%); }
.swtx { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 4px; }
.swdur { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.swdur svg { width: 11px; height: 11px; }
.swtx b { font-size: 15px; line-height: 1.2; }

/* fixtures */
.fxdate { text-align: center; font-size: 18px; font-weight: 800; color: var(--text-2); margin: 6px 0 10px; }
.fxlist { display: grid; gap: 8px; }
.flr { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: center; min-height: 52px; background: var(--panel); border-left: 4px solid #E6E6E6; padding: 6px 8px; font-size: 14.5px; }
.flr.live, .flr.done { border-left-color: #FFD230; }
.flr.me { box-shadow: inset 0 0 0 1px rgba(255,210,48,.4); }
.fla { display: flex; justify-content: flex-end; align-items: center; gap: 8px; text-align: right; }
.flb { display: flex; align-items: center; gap: 8px; }
.flr .fxflag { width: 26px; height: 17px; }
.flm { display: grid; justify-items: center; }
.flt { font-size: 21px; font-variant-numeric: tabular-nums; }
.fls { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.fls i { width: 2px; height: 22px; background: #FFD230; }
.flm small { font-size: 12px; color: var(--text-2); }
.flr.live .flm small { color: var(--teal); font-weight: 700; }
.fxmore { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: none; border: 0; padding: 0; color: var(--text); font-size: 15px; }
.fxmore svg { width: 14px; height: 14px; }

/* tables */
.gth { margin: 4px 0 8px; font-size: 15px; color: var(--text-2); }
.gth small { color: var(--muted); }
.gtab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gtab th { background: var(--panel); font-size: 13px; font-weight: 500; padding: 10px 6px; text-align: center; color: var(--text); }
.gtab td { padding: 12px 6px; text-align: center; color: var(--text-2); border-bottom: 1px solid #2A2A2A; }
.gtab .gtn { text-align: left; }
.gtab td.gtn { display: flex; align-items: center; gap: 8px; }
.gtab td.gtn b { color: var(--text); }
.gtab td.pts { color: var(--text); font-size: 17px; }
.gtab tr.cut td { border-bottom: 2px solid #8A8A8A; }
.gtab .fxflag { width: 24px; height: 16px; }

/* line-ups on a pitch */
.pcard { background: var(--panel); padding: 14px 14px 10px; }
.pch { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 19px; }
.pch .fxflag { width: 30px; height: 20px; }
.pch .crimg.pc { width: 30px; height: 30px; background: #fff; border-radius: 3px; padding: 2px; box-sizing: border-box; }
.pch .crimg.pc img { width: 100%; height: 100%; object-fit: contain; }
.pcm { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #333; font-size: 13.5px; color: var(--text-2); }
.pcm b { color: var(--text); }
.ppitch { position: relative; aspect-ratio: 3 / 3.6; }
.ppitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ppitch svg * { fill: none; stroke: #4A4A4A; stroke-width: .4; vector-effect: non-scaling-stroke; }
.pdot { position: absolute; transform: translate(-50%, -30%); display: grid; justify-items: center; gap: 3px; width: 76px; }
.pdot i { width: 34px; height: 34px; border-radius: 50%; background: #FFD230; color: #000; font-style: normal; font-weight: 700; font-size: 14px; display: grid; place-items: center; box-shadow: 0 0 0 2px #1B1B1B; }
.pdot b { font-size: 11.5px; font-weight: 500; text-align: center; line-height: 1.15; }
.pcsub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.plist { list-style: none; margin: 8px 0 0; padding: 0; }
.plist li { display: flex; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid #2A2A2A; }
.plist i { width: 30px; height: 30px; border-radius: 50%; background: #FFD230; color: #000; font-style: normal; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
.plist b { flex: 1; font-size: 15px; }
.plist span { font-size: 12.5px; color: var(--muted); }

/* match stats */
.msk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-bottom: 14px; font-size: 16px; }
.msk span { display: flex; align-items: center; gap: 10px; }
.msk span:last-child { justify-content: flex-end; }
.msk .kk { color: var(--muted); font-size: 14px; }
i.ka, i.kb { width: 18px; height: 18px; display: inline-block; flex: none; }
i.ka { background: #FFD230; }
i.kb { background: #F4F4F4; }
.mspos { background: var(--panel); padding: 14px; text-align: center; }
.mspos p { margin: 0 0 10px; font-size: 16px; }
.msdo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.msl { display: grid; grid-template-columns: auto auto; gap: 6px 8px; justify-content: center; font-size: 14px; }
.msl .ka, .msl .kb { width: 10px; height: 10px; align-self: center; }
.msl b { grid-column: 1 / -1; font-weight: 400; font-size: 16px; }
.donut { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#FFD230 0 var(--deg), #F4F4F4 var(--deg) 360deg); position: relative; }
.donut::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--panel); }
.msrows { display: grid; gap: 16px; margin-top: 18px; }
.msr p { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 15px; }
.msr p b { font-weight: 500; min-width: 22px; }
.msr p b:last-child { text-align: right; }
.msbar { display: flex; justify-content: center; gap: 4px; background: var(--panel); height: 8px; }
.msbar i { display: block; height: 100%; }
.msbar .ba { background: #FFD230; }
.msbar .bb { background: #F4F4F4; }

/* watch & listen: station art, coming up */
.start.fl { background: linear-gradient(135deg, #1FC7C7 0 55%, #0FA2A2 55% 100%); }
.start.sx { background: linear-gradient(135deg, #2A2A2A, #111); }
.start small { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.cups { display: grid; gap: 10px; }
.cup { display: grid; gap: 6px; text-align: left; background: var(--panel); border: 0; padding: 14px 16px; color: var(--text); }
.cup b { font-size: 16px; }
.cup span { font-size: 13.5px; color: var(--text-2); font-weight: 700; }
.cup em { font-style: normal; font-size: 14px; color: var(--text-2); }

/* form guide */
.fgbox { background: var(--panel); text-align: center; padding: 14px; display: grid; gap: 4px; margin: 0 0 12px; }
.fgbox b { font-size: 18px; }
.fgbox span { font-size: 14px; color: var(--text-2); }
.fgcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.fgh { text-align: center; font-weight: 800; font-size: 16px; margin: 4px 0 10px; }
.fgc { background: var(--panel); padding: 10px; margin-bottom: 8px; display: grid; gap: 8px; }
.fgt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.fgt i { font-style: normal; width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex: none; }
.fgW { background: #1E8E3E; }
.fgL { background: #D6245C; }
.fgD { background: #9A9A9A; color: #000 !important; }
.fgs { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 20px; }
.fgs i { width: 2px; height: 20px; background: #888; }
.fgs .fxflag { width: 24px; height: 16px; }
.fgcomp { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-2); }
.fgmeet { display: grid; gap: 8px; }
.fgmeet p { margin: 0; background: var(--panel); padding: 12px 14px; display: grid; gap: 2px; }
.fgmeet span { font-size: 12.5px; color: var(--muted); }
.fgmeet b { font-size: 15px; }
.fgmeet small { font-size: 12.5px; color: var(--text-2); }

body[data-theme="light"] #app .lvwatch { background: #121212; color: #fff; }
body[data-theme="light"] #app .lvwatch svg path { fill: #fff; }
body[data-theme="light"] #app i.kb, body[data-theme="light"] #app .msbar .bb { background: #BDBDBD; }
body[data-theme="light"] #app .donut { background: conic-gradient(#FFD230 0 var(--deg), #BDBDBD var(--deg) 360deg); }
body[data-theme="light"] #app .gtab td, body[data-theme="light"] #app .plist li { border-color: #E2E2E2; }
.postbody .psub { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* v31: football live, from the live page as it looks today */
.fbbig.sc { display: inline-flex; align-items: center; gap: 12px; }
.fbbig.sc i { width: 3px; height: 34px; background: #FFD230; }
.fbbig.sc i.live { background: var(--teal); }
.lvprog.tall { line-height: 1.5; font-size: 15px; color: var(--text-2); }
.lvalt { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; background: none; border: 1px solid #3A3A3A; color: var(--text); font-size: 14px; font-weight: 600; }
.lvalt svg { width: 18px; height: 18px; }
.lvalt svg path { fill: currentColor; }
.lvblock.slim:has(.lvplayer) { padding: 0 0 8px; }
.lvplayer { background: #000; }
.lvptitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0; padding: 12px var(--gut) 10px; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.lvptitle b { color: var(--text); font-size: 15px; }
.lvpvid { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lvpvid .vidimg { position: absolute; inset: 0; }
.lvpvid .vidimg img, .lvpvid .vidimg .photo { width: 100%; height: 100%; object-fit: cover; }
.lvpveil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 35%, rgba(0,0,0,.05) 65%, rgba(0,0,0,.7)); pointer-events: none; }
.lvptop { position: absolute; left: 10px; right: 8px; top: 8px; display: flex; align-items: center; gap: 4px; }
.lvptop .vsp { flex: 1; }
.lvpb { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 4px; background: none; border: 0; color: #fff; font-size: 15px; }
.lvpb svg { width: 22px; height: 22px; }
.lvpb[aria-pressed="true"] { color: var(--teal); }
.lvpmid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 44px; pointer-events: none; }
.lvpmid > * { pointer-events: auto; }
.lvpb.big { width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.45); }
.lvpb.big svg { width: 30px; height: 30px; }
.lvpb.skip { display: grid; gap: 0; font-size: 22px; line-height: 1; }
.lvpb.skip small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.lvpb.dim { color: var(--teal); }
.lvpbot { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 10px; }
.lvpbot .aprog { flex: 1; height: 3px; background: rgba(255,255,255,.35); position: relative; }
.lvpbot .aprog i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--teal); }
.lvpbot .aprog i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.lvptime { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lvpcap { position: absolute; left: 12px; right: 12px; bottom: 30px; margin: 0; text-align: center; font-size: 14px; background: rgba(0,0,0,.7); padding: 4px 8px; }

.flr.live { border-left-color: var(--teal); }
.flr.live .flm b, .flr.live .flm strong { color: var(--teal); }
.flr.done { border-left-color: #FFD230; }
.flr.hid { border-left-color: #555; }

.msr p b.lead, .msl.lead b, .msl b.lead { font-weight: 800; }
.msbar { gap: 6px; background: none; }
.msbar .sa, .msbar .sb { flex: 1; display: flex; height: 100%; background: var(--panel-2, #2A2A2A); }
.msbar .sa { justify-content: flex-end; }
.msbar .sa i, .msbar .sb i { height: 100%; }
.hpie { width: 124px; height: 124px; }
.hpie .pa { fill: #FFD230; }
.hpie .pb { fill: #F4F4F4; }
.hpie .p0 { fill: none; stroke: #444; stroke-width: 2; stroke-dasharray: 4 4; }
.msdeep { margin: 26px 0 4px; font-size: 20px; font-weight: 800; }
.msgh { margin: 18px 0 10px; font-size: 16px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid #333; }
body[data-theme="light"] #app .hpie .pb { fill: #BDBDBD; }

.ltext .ltx { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.ltext .ltx .stamp { background: #FFD230; color: #000; font-weight: 800; font-size: 13px; padding: 3px 7px; min-width: 38px; text-align: center; }
.ltext .ltx h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.ltext .ltx p { margin: 0; font-size: 15px; line-height: 1.5; }

.pcm { display: grid; gap: 4px; }
button.pdot { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; }
.pdot { position: absolute; }
.pdot.scored i::after, .pdot.booked i::before { content: ""; position: absolute; }
.pdot i { position: relative; }
.pdot.scored i::after { right: -8px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #fff radial-gradient(circle at 50% 50%, #111 0 3px, transparent 3.5px); box-shadow: 0 0 0 1.5px #111; }
.pdot.booked i::before { left: -7px; top: -5px; width: 9px; height: 13px; background: #FFD230; box-shadow: 0 0 0 1.5px #111; border-radius: 1px; }
.pdot:focus-visible i, .pdot:hover i { box-shadow: 0 0 0 2px #fff; }
.plist li button { display: grid; grid-template-columns: 30px 1fr auto 18px; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0; color: inherit; text-align: left; font: inherit; }
.plist li button svg { width: 16px; height: 16px; opacity: .6; }

.plsheet { position: absolute; inset: 0; z-index: 40; background: #121212; overflow-y: auto; }
.plin { padding: 56px 28px 30px; text-align: center; }
.plflag { margin: 0 0 10px; display: flex; justify-content: center; }
.plflag img, .plflag .fxflag, .plflag svg { width: 52px; height: auto; }
.plin h2 { margin: 0; font-size: 26px; font-weight: 800; }
.plpos { margin: 6px 0 0; font-size: 16px; }
.plteam { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.plcard { display: inline-block; margin: 12px 0 0; padding: 3px 8px; background: #FFD230; color: #000; font-size: 13px; font-weight: 700; }
.plh { margin: 26px 0 8px; text-align: left; font-size: 18px; font-weight: 800; }
.plin .note { text-align: left; }
.pldl { margin: 0; text-align: left; }
.pldl div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #2E2E2E; font-size: 15px; }
.pldl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.plx { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: #fff; }
.plnav { position: absolute; top: 118px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: #fff; }
.plnav.l { left: 8px; }
.plnav.r { right: 8px; }
.plx svg, .plnav svg { width: 22px; height: 22px; }
body[data-theme="light"] #app .plsheet { background: #fff; }
body[data-theme="light"] #app .plx, body[data-theme="light"] #app .plnav { color: #111; }
.flr.live .fls b { color: var(--teal); }
.flr.live .fls i { background: var(--teal); }

/* v32: football on the website, as the live page looks today */
.web .wband.wfb { padding: 26px 0 22px; }
.web .wfb .fbhead { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.web .wfb .lvlive.c { font-size: 30px; }
.web .wfb .lvlive.c .lvring { width: 30px; height: 30px; border-width: 5px; }
.web .wfb .lvlive.c i { width: 6px; height: 6px; }
.web .wfb .lvlive.c span:last-child { font-size: 22px; }
.web .wfb .ckcomp { font-size: 17px; }
.web .wfb .fbline { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; max-width: 760px; margin: 8px auto 0; }
.web .wfb .fbside { display: flex; align-items: center; gap: 18px; font-size: 26px; }
.web .wfb .fbside b { font-weight: 400; font-size: 34px; }
.web .wfb .fbside.h { flex-direction: row-reverse; justify-content: flex-start; }
.web .wfb .fbside.h { justify-self: end; }
.web .wfb .fbside.a { justify-self: start; }
.web .wfb .fbmark .crimg, .web .wfb .fbmark .fxflag { width: 58px; height: auto; }
.web .wfb .fbbig { font-size: 64px; }
.web .wfb .fbbig.sc { gap: 22px; }
.web .wfb .fbbig.sc i { height: 60px; }
.web .wfb .fbclock { font-size: 18px; margin-top: 10px; }
.web .wfb .fbscorers { max-width: 760px; margin: 12px auto 0; font-size: 18px; }
.fbassist { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; max-width: 1180px; margin: 22px auto 0; padding-top: 22px; border-top: 1px solid #3A3A3A; font-size: 18px; }
.fbassist span:first-child { text-align: right; }
.fbassist b { font-weight: 700; }
.web .wfb .fbvenue { font-size: 16px; }

.wfbwatch { background: #1F1F1F; padding: 4px 16px 34px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.wfbwatch p { margin: 0; font-size: 19px; color: var(--text-2); }
.wfbwatch p b { color: var(--text); }
.web .wfbwatch .lvlisten { padding: 12px 22px; font-size: 22px; }
.wfbwatch .wlvbtns { justify-content: center; }

.wfbplayer { background: #1F1F1F; padding: 16px 0 26px; }
.wfbin { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.wfbptop { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 18px; color: var(--text-2); }
.wfbptop b { color: var(--text); }
.wfbpv { position: relative; aspect-ratio: 16 / 9; max-height: 64vh; margin: 0 auto; overflow: hidden; background: #000; }
.wfbpv .vidimg { position: absolute; inset: 0; }
.wfbpv .vidimg .photo, .wfbpv .vidimg img { width: 100%; height: 100%; object-fit: cover; }
.wfbpvoice { position: absolute; left: 18px; top: 16px; }
.wfbpbar { position: absolute; left: 22px; right: 22px; bottom: 74px; display: flex; align-items: center; gap: 14px; }
.wfbpbar .aprog, .lvpbot .aprog { flex: 1; height: 4px; background: rgba(255,255,255,.35); position: relative; display: block; }
.wfbpbar .aprog i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--teal); }
.wfbpbar .aprog i::after { content: ""; position: absolute; right: -8px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(1,154,154,.35); }
.alive { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 800; font-size: 15px; }
.alive .lvring { width: 14px; height: 14px; border-width: 3px; }
.wfbpctl { position: absolute; left: 22px; right: 22px; bottom: 16px; height: 48px; }
.wfbpmid { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; gap: 34px; align-items: center; }
.wfbpmid .wrb.big { width: 48px; height: 48px; }
.wfbpend { position: absolute; right: 0; top: 4px; display: flex; gap: 18px; align-items: center; }
.wfbpend .wrb svg path, .wfbpend .wrb svg rect { fill: none; stroke: #fff; }
.wfbpend .wrb svg rect + rect { fill: #fff; }

.wfbone { padding-top: 26px; padding-bottom: 30px; }
.wfbone #stage { max-width: 1000px; margin: 0 auto; }
.wfbone.t-lineups #stage, .wfbone.t-watchlisten #stage { max-width: none; }
.wfbone .section { padding-left: 0; padding-right: 0; }
.wfbcols .wckmain { max-width: 880px; }
.wsum .slink, .summary .slink { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; color: var(--text); }

/* report and the player rater */
.rpnote p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; }
.rpnote p.b { font-weight: 800; }
.rater { max-width: 900px; margin: 18px auto 0; border-top: 4px solid #FFD230; padding: 24px 28px 10px; }
.rater h3 { margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.rtnote { margin: 0 0 18px; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.rtkey { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #333; font-size: 16px; }
.rtkey .rb + .rb, .rtkey .rb:not(:first-child) { margin-left: 18px; }
.rttabs { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid #333; margin: 0 -28px 18px; }
.rttabs button { background: none; border: 0; color: var(--text); font-size: 17px; padding: 12px 22px; border-bottom: 4px solid transparent; }
.rttabs button[aria-selected="true"] { font-weight: 800; border-bottom-color: #FFD230; }
.rtxi { margin: 0 0 12px; color: var(--text-2); font-weight: 700; font-size: 14px; }
.rtrow { margin-bottom: 18px; }
.rtrow p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 18px; }
.rtrow p b { font-weight: 800; }
.rtrow p em { margin-left: auto; font-style: normal; font-size: 14px; color: #5BB35B; display: inline-flex; align-items: center; gap: 6px; }
.rtrow p em svg path { stroke: #5BB35B; }
.rtballs { display: flex; gap: 10px; flex-wrap: wrap; }
.rb { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: #1E1E1E; color: #BDBDBD; font-size: 16px; display: inline-grid; place-items: center; cursor: pointer; }
span.rb { cursor: default; }
.rb.h { border-color: #FFD230; color: #fff; font-weight: 700; }
.rb.on { background: #FFD230; color: #000; font-weight: 800; }
body[data-theme="light"] #app .rb { background: #EDEDED; color: #333; }
body[data-theme="light"] #app .rb.on { background: #FFD230; color: #000; }

/* fans' messages and posts from the ground */
.post .pgi { display: flex; align-items: center; gap: 12px; }
.post .pgi svg { width: 34px; height: 34px; }
.pfans { display: grid; gap: 4px; margin: 10px 0 4px; }
.pfans blockquote { position: relative; margin: 0 0 0 10px; padding: 14px 18px; background: #000; font-size: 15.5px; line-height: 1.5; }
.pfans blockquote p { margin: 0; }
.pfans blockquote::after { content: ""; position: absolute; left: 22px; bottom: -12px; border: 12px solid transparent; border-bottom: 0; border-top-color: #000; }
.pfan { margin: 16px 0 12px; font-weight: 800; font-size: 16px; }
.pby { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.pby .wpav { width: 46px; height: 46px; border-radius: 50%; }
.pby span:last-child { display: grid; }
.pby small { color: var(--text-2); font-size: 13px; }
body[data-theme="light"] #app .pfans blockquote { background: #F2F2F2; }
body[data-theme="light"] #app .pfans blockquote::after { border-top-color: #F2F2F2; }

/* line-ups: both sides at once on the website, the away side in white */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pcard.away .pdot i, .plist.away li i { background: #F4F4F4; color: #000; }
.web .pgrid .ppitch { height: 520px; }
.web .pgrid .pch b { font-size: 26px; }

/* watch & listen: the match leads */
.stream.vid .sticon svg { width: 16px; height: 16px; }
.stnow { position: absolute; left: 0; top: 0; background: #FFD230; color: #000; font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 4px 8px; }
.stream .start.img { position: relative; }
.sticon small { font-size: 12px; margin-left: 6px; }
.web .streams { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* the player's controls on the phone */
.lvpbot .alive { font-size: 12.5px; }
.lvpbot .aprog i { background: var(--teal); }
.lvpmid { gap: 22px; }
.lvpmid .lvpb.skip { font-size: 18px; }

/* the player's match stats on the website sit in the middle, as a dialogue */
.web .plsheet { background: rgba(0,0,0,.72); pointer-events: auto; }
.web .plin { position: relative; max-width: 660px; min-height: 100%; margin: 0 auto; background: #000; padding: 48px 56px 40px; }
.web .plnav { top: 50%; transform: translateY(-50%); background: #E9E9E9; color: #000; width: 56px; height: 64px; }
.web .plnav.l { left: calc(50% - 330px - 56px); }
.web .plnav.r { right: calc(50% - 330px - 56px); }
.web .plx { background: #5A5A5A; width: 56px; height: 56px; }
.plsheet { pointer-events: auto; }
.web .stream .start { width: 100%; }
.stream.vid .start.img .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.web .plnav svg path { stroke: #000; }
.web .plnav svg [fill="#fff"] { fill: #000; }
.web .stream .start { height: auto; min-height: 0; }
.web .streams .stream .start.img { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.web .streams .stream .start.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.web .streams .stream { min-width: 0; overflow: hidden; }
.web .streams .stream .start { box-sizing: border-box; max-width: 100%; }
.web .streams .stream .start.img { aspect-ratio: auto; height: 0; padding-top: 56.25%; }
.stvimg { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.stvimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stream.vid { display: flex; flex-direction: column; position: relative; }
.web .streams .stream { overflow: visible; }
.web .streams .stream { grid-template-columns: minmax(0, 1fr); }
.lvpmid { gap: 12px; }
.lvpmid .lvpb.skip { min-width: 34px; font-size: 16px; }
.lvpmid .lvpb.skip small { font-size: 9px; }

/* v33: habit posts in My Sport, Latest and Top, and clubs you follow */
.msview { display: flex; gap: 26px; padding: 14px var(--gut) 0; border-bottom: 1px solid var(--line-soft); }
.msview button { background: none; border: 0; padding: 4px 0 12px; font-size: 17px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.msview button[aria-selected="true"] { color: var(--text); font-weight: 800; border-bottom-color: var(--yellow); }
.msview.web { padding: 0; margin: 8px 0 22px; gap: 34px; border-bottom: 1px solid #333; }
.msview.web button { font-size: 20px; }
.msav.xs { width: 26px; height: 26px; padding: 1px; flex: none; }
.msav.xs .msavin b { font-size: 9px; }
.msav.xs .msavin.crest-in { padding: 2px; }
.msav.xs .crest-in img { width: 100%; height: 100%; }
.msav.xs .msavin img.photo { width: 100%; height: 100%; object-fit: cover; }
.msnew { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--yellow); color: #000; font-weight: 800; font-size: 13.5px; padding: 6px 12px 6px 6px; border-radius: 20px; white-space: nowrap; }
.mshead.sm { padding-top: 16px; padding-bottom: 8px; }
.mshead.sm h2 { font-size: 20px; }
.hpwrap { padding: 0 var(--gut) 20px; }
.hpfeed { gap: 14px; }
.post.hp .postbody h3 { font-size: 18px; margin-bottom: 10px; }
.hpsrc { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-size: 13.5px !important; color: var(--text) !important; }
.post.hp .pby { margin: 2px 0 12px; }
.post.hp .pby .wpav { width: 40px; height: 40px; }
.post.hp .pimg { margin: 0 0 12px; }
.hpoll { display: grid; gap: 8px; margin-top: 12px; }
.hpoll button { text-align: left; background: #2A2A2A; border: 1px solid #3A3A3A; color: var(--text); font-weight: 700; font-size: 15px; padding: 12px 14px; }
.hpres { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; background: #262626; font-weight: 700; font-size: 15px; overflow: hidden; }
.hpres i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,210,48,.28); }
.hpres.me i { background: rgba(255,210,48,.55); }
.hpres span, .hpres b { position: relative; }
.hpmeta { margin-top: 8px !important; font-size: 13px !important; color: var(--muted) !important; }
.hpcta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.hpgo { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); color: #000; border: 0; font-weight: 800; font-size: 14.5px; padding: 10px 14px; }
.hpgo svg path { stroke: #000; }
.hpstreak { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--text-2); }
.hpstreak i { width: 14px; height: 14px; background: #333; }
.hpstreak i.on { background: var(--yellow); }
.hpstreak b { margin-left: 6px; color: var(--text); }
.post.hp .react { margin-top: 10px; justify-content: flex-end; }

.clhead { display: flex; align-items: center; gap: 14px; padding: 16px var(--gut) 10px; }
.clcrest { width: 56px; height: 56px; }
.clhead span { display: grid; flex: 1; }
.clhead b { font-size: 26px; font-weight: 800; }
.clhead small { font-size: 13px; color: var(--muted); }
.clsub { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--gut) 0; border-bottom: 1px solid var(--line-soft); }
.clsub::-webkit-scrollbar { display: none; }
.clsub button { flex: none; background: none; border: 0; color: var(--text-2); font-size: 14.5px; padding: 8px 0 10px; border-bottom: 3px solid transparent; }
.clsub button.on { color: var(--text); font-weight: 700; border-bottom-color: var(--yellow); }
.clfx { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gut) 6px; }
.clfx::-webkit-scrollbar { display: none; }
.clc { flex: none; width: 250px; display: grid; gap: 4px; }
.clcomp { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.clcomp small { font-size: 12.5px; }
.clbody { display: flex; background: var(--panel); border-left: 4px solid #E6E6E6; }
.clc.done .clbody { border-left-color: var(--yellow); }
.clteams { flex: 1; display: grid; }
.clt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 15px; }
.clt + .clt { border-top: 1px solid #2E2E2E; }
.clt img { width: 26px; height: 26px; }
.clt .clno { width: 26px; height: 26px; border-radius: 50%; background: #333; color: #ddd; font-style: normal; font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.clt b { flex: 1; font-weight: 700; }
.clt b.lost { font-weight: 400; }
.clt em { font-style: normal; font-size: 22px; font-weight: 500; }
.clwhen { width: 70px; display: grid; place-content: center; justify-items: center; border-left: 1px solid #2E2E2E; }
.clwhen small { font-size: 11.5px; color: var(--text-2); }
.clwhen b { font-size: 18px; font-weight: 500; }

/* the website: the club alongside the stream */
.whp { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 10px; }
.whpside { position: sticky; top: 12px; display: grid; gap: 18px; }
.wclub { background: #111; padding-bottom: 14px; }
.wclub .clhead { padding: 18px 18px 12px; }
.wclub h3 { margin: 6px 18px 10px; font-size: 18px; font-weight: 800; }
.wclub .clfx { flex-direction: column; overflow: visible; padding: 0 18px; }
.wclub .clc { width: auto; }
.whpmain { max-width: 820px; }
.whphead { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.whphead h2 { margin: 0; font-size: 28px; font-weight: 800; }
.whphead span { color: var(--muted); font-size: 16px; }
.web .hpwrap { padding: 0; display: grid; gap: 22px; }
.web .post.hp .postbody { padding: 22px 26px; }
.web .post.hp .postbody h3 { font-size: 26px; }
.web .post.hp .postbody p { font-size: 17px; }
.web .post.hp .pimg { max-width: 100%; }
.web .msview.web { display: flex !important; flex-direction: row; justify-content: flex-start; }
.web .msview.web button { display: inline-block; width: auto; flex: none; text-align: left; }
.web .msview.web { height: auto !important; min-height: 0 !important; align-items: flex-end; }
.web .msview.web button { height: auto !important; }

/* v34: My Sport as one feed, with the follow row and club tabs pinned */
.msview { display: none !important; }
.ms > .msrail { position: sticky; top: 0; z-index: 6; background: var(--black, #000); transition: padding .2s; }
.msf { position: relative; }
.msbadge { position: absolute; top: -2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--yellow); color: #000; font-style: normal; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #000; z-index: 2; }
.msav, .msf .msn, .msbadge { transition: width .2s, height .2s, opacity .15s, top .2s, right .2s; }
.viewport.condensed .ms > .msrail { padding-top: 8px; padding-bottom: 8px; gap: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.viewport.condensed .ms > .msrail .msf { width: 42px; gap: 0; }
.viewport.condensed .ms > .msrail .msav { width: 40px; height: 40px; padding: 2px; }
.viewport.condensed .ms > .msrail .msav .msavin b { font-size: 11px; }
.viewport.condensed .ms > .msrail .msav.all .msavin svg, .viewport.condensed .ms > .msrail .msav.add .msavin { transform: scale(.7); }
.viewport.condensed .ms > .msrail .msn { height: 0; opacity: 0; overflow: hidden; }
.viewport.condensed .ms > .msrail .msbadge { top: -4px; right: -6px; min-width: 18px; height: 18px; font-size: 10.5px; }
.viewport.condensed .ms > .msrail .msf.on .msav { box-shadow: 0 0 0 2px var(--yellow); }
.ms > .clsub { position: sticky; top: 0; z-index: 5; background: var(--black, #000); }
.viewport.condensed .ms > .clsub { top: 57px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.clfx.vert { flex-direction: column; overflow: visible; }
.clfx.vert .clc { width: auto; }
.whpmore { margin: 40px 0 16px; font-size: 28px; font-weight: 800; }
.whphead + .hpwrap { margin-bottom: 26px; }

/* ---- v35: community on every post: votes, reactions, replies ---------- */
.talk { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.talk .rbtn.share { margin-left: auto; width: 32px; height: 32px; justify-content: center; border-radius: 999px; }
.vote { display: inline-flex; align-items: center; height: 32px; border: 1px solid #333; border-radius: 999px; background: #161616; flex: none; }
.vote button { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; border-radius: 999px; color: var(--muted); padding: 0; cursor: pointer; }
.vote button:hover { color: #fff; }
.vote b { min-width: 24px; text-align: center; font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.vote.up { border-color: rgba(255, 210, 48, .55); }
.vote.up [data-vt="1"], .vote.up b { color: var(--yellow); }
.vote.dn { border-color: rgba(142, 166, 255, .5); }
.vote.dn [data-vt="-1"], .vote.dn b { color: #9DB0FF; }
.vote.pop b { animation: likepop .42s cubic-bezier(.2, .9, .3, 1.4); }
.vote.sm { height: 26px; background: none; border-color: #2c2c2c; }
.vote.sm button { width: 24px; height: 24px; }
.vote.sm svg { width: 13px; height: 13px; }
.vote.sm b { font-size: 12px; min-width: 18px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 1px solid #333; border-radius: 999px; background: #161616; color: var(--muted); font: inherit; cursor: pointer; flex: none; }
.rx i { font-style: normal; font-size: 14.5px; line-height: 1; }
.rx b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rx:hover { color: #fff; border-color: #4a4a4a; }
.rx.on { border-color: rgba(255, 210, 48, .6); background: rgba(255, 210, 48, .1); color: var(--yellow); }
.rx.pop .rxe { animation: likepop .42s cubic-bezier(.2, .9, .3, 1.4); }
.rx.stack { padding: 0 10px 0 7px; gap: 6px; }
.rx.stack:not(:has(.rxe)) { width: 32px; padding: 0; justify-content: center; }
.rxe { display: inline-flex; }
.rxe i { width: 20px; height: 20px; margin-left: -5px; display: grid; place-items: center; border-radius: 50%; background: #262626; box-shadow: 0 0 0 2px #161616; font-size: 12.5px; }
.rxe i:first-child { margin-left: 0; }
.rx.open { border-color: #5a5a5a; color: #fff; }
.rx.add { width: 32px; padding: 0; justify-content: center; }
.rx.rp .n { font-size: 12.5px; font-weight: 700; }
.rxtray { flex-basis: 100%; order: 10; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 5px; border: 1px solid #333; border-radius: 14px; background: #1b1b1b; animation: fadein .18s both; }
.rxtray button { display: grid; justify-items: center; gap: 1px; padding: 6px 2px 5px; border: 1px solid transparent; background: none; border-radius: 10px; color: var(--muted); cursor: pointer; font: inherit; }
.rxtray button i { font-style: normal; font-size: 20px; line-height: 1.1; }
.rxtray button small { font-size: 10.5px; font-weight: 700; }
.rxtray button b { font-size: 10.5px; font-weight: 700; min-height: 13px; font-variant-numeric: tabular-nums; }
.rxtray button:hover { background: #262626; color: #fff; }
.rxtray button.on { background: rgba(255, 210, 48, .1); border-color: rgba(255, 210, 48, .5); color: var(--yellow); }
.topreply { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; width: 100%; margin-top: 12px; padding: 10px 12px; border: 0; border-left: 3px solid var(--live); border-radius: 4px 10px 10px 4px; background: #151515; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.topreply:hover { background: #1b1b1b; }
.topreply .wcav { width: 28px; height: 28px; font-size: 11px; }
.trx { display: grid; gap: 3px; min-width: 0; }
.trx small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.trx small em { font-style: normal; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--yellow); }
.trx small em svg { width: 12px; height: 12px; }
.trt { font-size: 13.5px; line-height: 1.4; color: #e6e6e6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trmore { font-size: 12px; font-weight: 700; color: var(--live); }
.post.hp .talk { margin-top: 12px; }
/* comment threads */
.wcact .vote.sm + button, .wcact button[data-replyto] { display: inline-flex; align-items: center; gap: 5px; }
.wcact button[data-replyto] small { font-size: 11.5px; color: var(--muted); }
.creplies { display: grid; gap: 12px; margin-top: 12px; padding-left: 12px; border-left: 2px solid #2a2a2a; }
.crow.reply { grid-template-columns: 26px 1fr; gap: 9px; }
.crow.reply .wcav { width: 26px; height: 26px; font-size: 10.5px; }
.crow.reply.mine .wcav { background: var(--yellow); color: #111; }
.replying { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px var(--gut) 0; background: #161616; border-top: 1px solid #262626; font-size: 12.5px; color: var(--muted); }
.replying b { color: #fff; }
.replying button { margin-left: auto; background: none; border: 0; color: var(--muted); padding: 2px; display: grid; }
.replying button svg { width: 14px; height: 14px; }
.replying + .composer { border-top: 0; }
/* light theme */
body[data-theme="light"] #app .vote, body[data-theme="light"] #app .rx { background: #F4F4F4; border-color: #D6D6D6; }
body[data-theme="light"] #app .vote b { color: #121212; }
body[data-theme="light"] #app .vote.up b, body[data-theme="light"] #app .vote.up [data-vt="1"] { color: #8A6A00; }
body[data-theme="light"] #app .vote.dn b, body[data-theme="light"] #app .vote.dn [data-vt="-1"] { color: #3350C8; }
body[data-theme="light"] #app .rx.on { background: #FFF4C8; border-color: #E0B800; color: #6A5200; }
body[data-theme="light"] #app .rxtray { background: #fff; border-color: #D6D6D6; }
body[data-theme="light"] #app .rxtray button:hover { background: #EDEDED; }
body[data-theme="light"] #app .rxtray button.on { background: #FFF4C8; border-color: #E0B800; color: #6A5200; }
body[data-theme="light"] #app .rxe i { background: #E8E8E8; box-shadow: 0 0 0 2px #F4F4F4; }
body[data-theme="light"] #app .topreply { background: #F4F4F4; }
body[data-theme="light"] #app .trt { color: #222; }
body[data-theme="light"] #app .replying { background: #fff; border-top-color: #E4E4E4; }
body[data-theme="light"] #app .replying b { color: #121212; }
body[data-theme="light"] #app .creplies { border-left-color: #E0E0E0; }
body[data-theme="light"] #app .rx.open, body[data-theme="light"] #app .rx:hover, body[data-theme="light"] #app .vote button:hover, body[data-theme="light"] #app .rxtray button:hover { color: #121212; }
body[data-theme="light"] #app .rx.open { border-color: #9A9A9A; }
body[data-theme="light"] #app .trx small em { color: #8A6A00; }

/* ==========================================================================
   App · 2030. Work in progress, in line with Bet 6: Reimagined Experiences
   Everything is scoped to .nx. BBC Sport yellow and live teal stay; the rest
   is new. Anton (SIL Open Font Licence) is embedded for poster type.
   ========================================================================== */
@font-face { font-family: "NXPoster"; src: url(data:font/woff2;base64,d09GMgABAAAAAEi0ABEAAAAAqxQAAEhQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoJQG5YyHIhABmAAhUQIgT4JnAwRCAqB71yB0ikLhDgAATYCJAOIbAQgBYQMB4pPDIFhGwKZJWxcxex2EESCuoeHKErUrJhwY+hh44DR8zy/+P9vCZzIkLIb2umuwiXpgohSARGRRtOj3uhWKxqeLt3E5eRW6hbCpFCpUEat/u3U/+peaZfLzGVfbbF+MGC4wO4XIeyHPbi34B5+EAFl62ARGkUf5lHcfORendVFYOMyRrJy8vJ8tPb/79pVPT3z3v0BAhlWhIqIXFTiCCUBemLJcE/7D/w2/9z3Ho/IKUZjYxPayAcsFlXWKoJ1sqp2Xc5tX3v+/9dMu/c++L+qpEYyUJJB1pGpQwpgh2V1oKxZeTSw7FPB3drLGaBtdhaCbmIUohggCiIWKApioI1FCTaljU7FmFFzs3rGZuTm2m1OV/2urM3NXrvId/9z+b9tfh86pYgmBJMQrEDVzrvj385ebLHYjvV9/19/Kg9Tyipc9XWyz/8FCqBMQdArSvGPh9nDrG26Unh5u69kZplZuFIpV1sJBz2c2X9U1/SEMnmDA02VpfNf4InIkuU8+JbtCgTJg/Z22dptQv8/nZ/vzrxBjQANJFu2P/gDL5CWyAHusKs2XZOTotq2CSgwZ2P9WLjxiWHJaaWRiNJoudBdeWVN8Bq/uRACMA14u2H3yxRCF6Pt/fYhVrJc4OxVeU1SFaY3Pf9/Tf3avlsl2ZLz08cKfOD0R/800NnbDnQPa4BoX7rvlapevRJVWYkojm05OY4dkJR02rL/yagE/pLdEHBynAbC/EFbCjph/yGmFdGKcLHk3WyXs5v9zHI1+0X3duA/Wk7NPOqMWhwSYVzp++mrAHU4XOw5GSVLl7GxES4my8wdEOIwbEwULINMz1df9d3os32ROv38U8lJ8IKIZ0UGbwlzrGmdWdnW3ESl2CiDjDCIyfuaWW2yULUIqp9XJ4cco6OuxeOItPS0NeHB//ERDAVACgwtjhpxF4qEi0Hi6BEjC2KTiZUlB6mjDtJQI6S1NkiePKRQD6y++mENMASZYAIy0RSMGWZgzDUXcViItdxyZIWVWKttQrZwIjvsQHbZi3XIIeSYY8gJp5GzziLXXEeKFCHvvUc++4yUohQUUMBGSFJQFKQARUlKsFFFE8U92ghhwV3BjcFlETGbDD04LLDCSrsiAyJnk6lQX/04LLTCLrvtsTcAgtVXv0BB4CKtNpi73p3OAhTPeGymBFDggPWPgWCwT39iugSI/s0GAP9n9uALAmrQeEIisGmzOIKyH85w4YL70bJThnYSo+eL4dR4KkSCQUcuOzpSyYgk0lklUgh/nlwQ7M9HEo86pM4FVbT+7j4I9rcJIoSTQ4chGsHmyNQi9ERzmUZo1luKmFkyg2hhNLx5Ux/wqjSOnwjS78Xk9vEiMqaoY3+q9ygS4sHiULWoVSW4sT35e5vjjCjkEZyPOrwnX8EMHgTY/I8d2qrI0LaTJ8KZaJLJZuCECOFOghlheNSmuY4d3tREaBs+1zFDBh71mLmOM72xluX2w9ZkMl0y/nXf8Yxm0L877V2bUpPdKe658/EzI0l8BF0jwklw/D6wR6j3kWIb3CdGxyh6XTWjQiJa1UP2DKjC/yjGF+9ua7/w2F3X8y+izAC5lE4tUH4oDOoK8BgfjQYfpMwCq/IWhxrzcr9cuRfv+VlKC2MiP9gwrRsp5gmvea+F0DMNLCVWGlXFHpOGT/oHjlLOufovaowAXJ+sV0Mm5fQneFlBI5SbcNF8th2B5xBZPRnkyAjilbDnlLTblLy9lL63ktlWsmXfWNSmDnVpSCOa0JRmar6raKG2W4p26hz3l2aPCGyd5cIOGsxs7H3YLJv50Sf7k9nImzzLw9zOVXk/n5OZwHtjOZzh9Kazh29VWlK3da1IKZ7OT1bSkhhRosL96jO6pRZ6vOIap9maAOH5d+YxiX6uxz2qUSIOFWpQhnoJvvnglaI4oafuu+mys447+PWT3Zwo+7dllNt7AcojoZQo2JXI4+nu8JRXSZvr0OesJupBqtpXp8q96PJ3HyZ3t2+3IuGcMCFvaVFuYxFF8VayL8UvM1VzWZWqrm6l3hTFCpp+6b46H0L+n0p9IxW3YKUlh0rzR+55HVnIfV7yNv+oFeWaK+BqvO6UsTbwj5+cVxnsnLfvP9KMgIycgpI7D558BNAIFCRYiCgx4ujoGcVLkChJshSp0pn9xyJLthx1lj611uZ3Aww0yGBDTDDXcmuss94GG22yZf1HvD7khiecdEpn1/1virz3WSkJSURikpCUFKSKWtSjEc1ok0M+xHru6drBnclt32veczzcRrTIDPBeIJ8A1hAOv/q7tHZW7FhWj6txvNGSr/b53Wf2nNw+Fob3HNjeu2c+riMuh6jhcqlxGcvyXipZ5pO8TyrexojzBH92xSSkVGpx4UrNizcfvvz4CxVOK0KkKNGT7U9jmqoatVmWm1aI9z/112VwdXHdgUtXxcat9ZfbeIcQWuCNtOEeoD870s6DaNEIwY1Ja3Cq1rSNp4IfpfoHijwTns64qa73+rSSXU5XoxRIL89yTkVKwUCUkWL3Pdw7dwpmyl8PhgiTViQYa3CQK7pJTOTz4PVO6Ly9XnWs+x0cgkZ7JQc1mumVHR7PrQhMpnsodv85N9zmmnanP304LZF92kpi8ZnUwpDi+hMzeGKMAJ+Q3sdJFny5zIbIa9ed8MUtUitqBBhiK5nWJu7ciWQmKZTS6wWGgitfwyPee+DQjXiDvVePRUTdpAPFWOab16ITa453cOsZXoAQRCA+l4B+XZa8HkpZH6Up3AROLfTCN6+eqsxduLR62LvciWWE1HvV8zCC9gFN/I3g7qQhqUPGRsrJvfNugearaRchZNqxr/jxj09JA3L5kp8gSU0BOj0pnS8EWjwjIY4PNHpGqjAZqHOTM4vNzxqUkg4kgxcukIWySBZDLbO3MhVlV2T5PHWdqkLupJb1VeV9HscZSWLCCDW69tv09YxdJItEZ22uGkk+HrN0mc6Gmmqmw86567tiVBBLHr0xvUhMtgiEXQqE7CImnJcy32oTd0wwGSvTTpOONasRKqkZqTfasXgSbO9pYooh+PalDDPNLEec98MvVBJHnnqIdLvIl/ndP9x0sx11wU8lqCIBeSFkTpf1kqhFh9Ze+8q7/5ZCNMlwJw0g8ikQfwCfOx4CGffB2WonmgsXdx333/OpSfbmrMXYnIIPBLwGw9ua9pYR1K+2eUYDlpb/pabVXgyHPRg2Q1godqXuzEezbBya0ZbDaB5uXwhxb0lvWAotmpMPhhBub9HvgN1uenWGJ7EivdEWFbsK+wr1XbPCapsFUJuPuqeBSIpFcMeKGv0eTjoo3C4ijWi21JI1K8yDhVgBk12MvoEqjKA3jSRei6jH5i7MtTMNBLDdctwDb030Eq+W27sgHvAyeDJ4mvjN+qwnZmcCp+H6VxInnEfB2W2r/7qg1wHbz+YrcF0sKAh3XRGLfFzt5nd0PgF8717KaP/IJsw6XzerqJ41sRwrZoMbc12x0ZnRFTXeGn9NkCZMY9SkajI121lQ4DzmKF2C3P79tfFprFnNqHP3gW1WdNcVNJ4a3w/aoElJa23utdYDAc6XnLbX3ACE74X6569+9ekpFPjVdwH86javNPCrx7ya95LX1tfyX/xc7V/lggC3VQbkE7n/xfMxsMP8CAse5fCj6R8Y57njervD7p1bbqvvsc5Wues3eTgXFhWYaapifDfUYZ18s81oizzVAEdGTknlXbt78VCOxIJ5Vp4WWzfXWAt1sw3zmYGROlVcD82fKlx3w5NqXvRHs7ammmimHtZ47f2P3Ghp6asC3V2x2HZ/8MFO+Z6ERw2s9rnpgbYuu2qJSy6qxjNiPCEpEQkBBbVf4/6MccxNiEjwaA8HQ0lY28RgnhxfQ1m7srUxBKFNfjsxxrFGnRu/HknPeKTO+m+MXZWTWpgzuqnNwRYAH1ZohVFGeumVFw744tO8xYM933rAMJJYHu2I0wmmLsybrs8iHlE85gKR9+xEE8+SIrA8uXjQdGCWbN/k4KkKLzs5mejbK/bPrlPiBXZ06+/Te0Ajdrv1ZDpJfwCRTpT0k+8psPNAycUO9dUvz5s1Hj6EEdJP9xQeH62ARTiUS2Mt6TfSS+kWgtCCqwiwLSO+n4BYsWeVQHMt559OuA5LIthvfMIs5jsub5ov83k6BoMd19KJDfl8XESjweC4HL62ffklWZh88RotT1wpU2loJaRv/ZWWJolpCefJYE1PyiZpVL6vrEEDfj0n51/lMMXsDXvUO95Suh7/9k/yTfpV+e35De8Pi/fPd95/UORqMDY89GqbYpIujAtx8jUHI6Qv9YJ4HnSjFTD8uXRH7hJB9cEiFM7AIel7T/r4wK2qGy/NC+dH8SGTodhFHpQIVJuoRKjaQfQryIbitKICeiB7bEDDQ09jjlYkjbUPs6WidrpCJEaz6TnwoNGmMQKbxdSlN6TqWv+VJ1L79W+KfDG6IecjHw5NPFYvahXsrzwZBhx1QSeraEDHdiHhbWJznTkBqT5RpOiNiH6CpptTDtA5N+HwgUWQOVGqL8pph+7dmTyKmxNaz7Vs+JDIGU5mGCuJkOkA2YO2K3UVjcstmvhlD9s19m5LULrN7E70zMSDxLjeBapYkwTNuvLreEbkdg69NWK1ZSumyKKxw7/NgxUzZB1IpdweJvCZMKczbIPvRbZqJFdG6pqz4oFFmLrKnAHpdx0S5sQ/8gI7pz7zoKsfGA9lXLHEzpHfOemKGZvl8v4VMhU80ws5gaiOeahho8JdTp8hG0csCii9GtmJUfJNKn3RyQezrpXHwRbTCBEREPQ1V5lywAyBWRmfVePJ82ai0roESU9/kdLLN1mNiUzsnHoW5tBjYo6xUReHcD9cniQ1mRPnHAykmp+ouZrY8Z9Ye68+p0GmOgYykECGkiAjSZKxxGQiKTKVNJlJhswlSxaS699BVqEpddk59YKaeIkZJdWf8LQ3rvfup+1b18fbrcUELxPWDhP19gkrh5WwhBZWoNCBwhoUNqCwBYUDUDgEhSNQOAbNngHLYUvO8wOHBR25FB3P6mjGGXKjF7DokfXu+Ha5BDDAmg5JnJf0Xr2YYSAgV+xxKCdjO7hrxctuVmmh5z+preLaSTUIZm+A7/pvucVENcPOzGkiNKrYuyg1/0RE9GpV5vNNqi1+u9wByxhYkSC9jL+KKt5D/Xy54n2JKDEPPBr/AFmItqPmFKmLmZGt9GXP+miEvzTUO95cuZ+w8KTl8x+C1HwPvmPsb5Q7kYNczhuxfZXODFhO99HLoz7Uo0ap9aBKCvydWMb3F/6adbY1cjTPjtXR7ZgnUqcWlX45rOamNQLlsb1pAWZohIqxKTp/cKMYge7KKiajYOccWfpx3gg9+xT+Qec6YkBtSMVlbgSfJJVHUZY3Rc5LkZxLqdJpyYy6focfA8Ixi6tcJWR5fqH9iU0vpPeBU+Nahp8KUJMY3Ir+RD/6GstiTfDJgHYh5otp1xq2DjDMlxUxr66ZYYEffvaBaxB8NUKZU9bwoKcTPcSMUCri7AP6Q3OsHsta54tUtS09n3/gY3M484sRqlZ7vV+CD2Pa3Ffgo0jtgUibZbovkUfNmhd75LVNDUrNDH8iMhTmAHzT5eE21DI/S/4bZD/iDlMe2P8pBlhGy5DMXn1Z5o1FTdyqtuRtPz0MaPg7TTniVphqk+YIeG/Wm98qFOf63NRz112fDyMfkQlXMd4j/ZORP/ggn09HzY6gRj91FTJrj7CO8fNF3jcoRG8wMXwrKQvxOxAEEiT0Sd4QSZC4A0EikZ/iWgJoATIyJLsMQU6G5FdIMlCQIcVlCEoyRrkyeEoVJFLtQFCTIHWf5AMNCdLsQNCSEO3mwEPuYCDdZQh6MqIPBAxkyHAZgpHMnjGyjN9RTKQYneSagmvM/vWUwNPn9yGUZOFGXrohq80yrWHtMmHjMsUW9B126jvZuyEHN/z43W7ByWXB2WXBxWXBVQW5uSF3N/yBdhueLhteLhveLhs+KsjXDfm5yf5B8Rv52xzqtcKN8dJerLGqrk07ZHwWdZ+h/7O/xWNAaP21DuQaQN0Gcmu47LsRrvpUoH8AdVu4zUsg8PkRC7NsZqTM3EQF9lWqVWW1oBvDXtXCbkxpkURNBiZs1bU37TUYNAMnaJzLYr6mYYtLu2PEDICZgWlS68FRRSuoaI7l5VrWXp2tU3PHyGjv2nCdOkYzCEydX+0U5joqzUaYjEAETEej1GK5YThzpZZJjD6/InOynHHu/NK7kMR+GbiMdOyTqPCNeg2uyCp7YlNfmTg433rGwH3rV/UrYcy0eBDKhLnrrGUOq7LcGsNskFNls2moNjcHhueM93EzN/HhUP+YmkfnPwrqg66L5FeWF/E6b5rnm6s856dIkoiN3nB+yaFeR3OXM+UQOhv1yBW3PvZNKJL0IU8gc1EIXMUz5hg26MpxlRUmPOjwPGKTpenfzOXdIE8udiDDG228XiRrdjtjIRv4BF8xy1nc0S7X2LZZdm6RL1Rc1tk5zxrpmQ1ZtKge4+OqdohnTkIWp1MIMLDahHFhpl4mh2Yk7qagS1gIX93gBeO9NJgWm6Kl8Ql5hmh4LJ4gxV06VEBPRDSPMYzXdC6RbMYBidlQec45KMCdF53eLwz3UioGOzmdRwqjhmMq4ZIVBxJqZ2OOlNHutBdZBGrDUVUK5exstBV9bSlCgE/RtL2REitWHmqWZ3Sol8Ur7y3ysyYrH/WnSiixYEsvqUZxXcsW6EpmG8+gE3iT15PDWGt0BwMzxUH84B3luDOf0LyvoYoL01Np/XGATF2LcYENxw8UuZzA8QoVnvbiGwWXRJ/iw1Ex5RbHK449a8YH5O8tpJYUfw8yPgoc01HkbtiqIPpch6GQIXU0GMnEuBAjdV406KXuCn2hT1HbZ90F8YhDh5cLDV8XCoScpQxbxX8ALmXI2crAlwX72F7NAm40sWbN0JyJ1gww5M1Z7BvJDG4NeKcO0SjMGv22iZjc0rgDGBBqibKnG2nlZc6tDO0cwfHME4sKBa7UC10vZNNdW37DuSHUbztEbuJcZuD5v7bMGVzFpJjXL7SypfMy94uQf9dVupES+ufXMvqxtyjnt8CuOi/PnqmKucyq4tTpvNzt/B9JcC/9W37wO/ZW0QIVr+kxPFpJYMFiYyK0/89b/S+fbLFeqzv3QVmJhXuejsE2p/ioAyeZVwYzxAUJcsp77QonrOvbUNfHnZg5/Blo8A78jgG3YhPfHzrahycL+pGjb/qHt8wUbaqMhvkqpV0WGjoWDJP8rHOxRq0QF52Ieii0e49PkIBUI3ETBL4A3GeNN+bV5wFlG4F7htUd1gajC+qbMgJvZQdEPw1AXq2cmc/6HzscKV4SZrE66sntJlMlueBNL46mjOE7yiYxpjqX2D4ksyxgxIzsAxzOHwk0guSqsgq6laKI5Jwi38CgECvXL14RqxUSG6YT4WDbNWmHas1H9Xno6o082gJHtLNBo3BEYGvBOZPBOUpLtrQwIRh0W1tLL9wHIdM2dlSfJ4SLjhGaNSbpGSpSTaoopAstPPBgUDsY1dqWiedkYYo1kfiGuN3Qlo1pZjesoty0eDXZh/2mCoSD530l55352TfwWnKFXHKvgEsbdZcxDYTauLE2x8GXgYNb1mm/vdBHI1uTl1W1q423jBjJSNUSEcCAzRo20jDG3UnbObKgYE9BzAX2d63qtT23OkWtk05SpqpQSsNwoJwUBDk57f8gKbgTY0l/snBCsPFRtPA27ihMQuYwL9qWAg5n9Tz9lgk+i7vqP9k9tEMuSwQZH0isxppGAwGGCxJebTtJ7rQ970WWVlbF17T+FKPEUHeb9G5gHppub1fvYxIyzCBk3A86d4ZONzAx89mQqOgsn+Q23r1AF/HU6dvMqLsy53G3arxbRSSFpRKbUmzhI0hc+aubKD6EATFt7jL1OvUG0YCgLQN+GF9dMg/u5I0r2gJtQtToorPLQKrpzTt0F0+dvkjWZJdNcAZtsuUESPBPUxgiLNI3rLOINrQez0SRDxXCmsa6UEFp1SVRKBEJQpvJMTLdgnUGMaF39gBIafrVIzZyyFe3lhMVnifeBZMIBjdZCyZ0aEvVzp8IaiZeiZW1znzAeefM1ry5Hz6974fy6WC1lb4YCQd7hSYPzLW9YIO516TPFrhvmOhH56x2Er+hvDnzuRuUpKm7O5YPA08wCThyfEuIrHmB7XQV6afjwZZ9n4xEMg1OmtHVVtf0ZCVHoje7KvNTea1VRPvGDHQ/DDY7aCjekZVXmh1nUixio5vwySZI8qaetiFD/8fF3JvhSqftgwxiYGFY93VrzfZzVgDTGlTgeCPcS1GnKEsgmh0tmA/S12l9QhasGq4YEl1FmnKaGHY0J4u/ARYgmyChjaCl87ihnOxwyDwZ+YXGPOOWulChZtSeasrHDE5A63IVOJgaCTjnUUOyF2dMrPlAwQRkGu8QNgXt7M5Q/qzcS1GLxhmPx7hZFpZbDODgESU9LCgWgnHGNY09xPGBcIdtSZYBuz0mU3Ghlp1c+/ZVjpu/MrfZGjyxOkxTW1k6SqCj/31bLocXO0z2Uawj1RjX4eYUSg9N9OqoH993HguvpF1GBKzECpDMu88BPP3R8vBR/o2yywiO7Rb9CX9BMxk5+ZTxbAGmVUXT91bgYs3zy/YsxkwZeAQ5Gk7bR1uhhTWVVxlPNIHJShx2po7V+X4KEMa3dMA+8HLO9hBWUcIjl8VVpSE208d7ci7M92TmlQQD76o3Wh6DMXury1x1JCIDi/kp7CWXmqyL2WTAkaa3P5MSG7fcR3JYC27PAMefOpL6EVtcvcUUjVhTAqQ6Brk+N0a+4S6FZgMczT/TpbmLr+CTSJrT2dNYJnpF99IWoQZXdU2Xulvrpct2PitMVJkN4sNrprqcYjd6gwIMYhQtibnmA2C3zLekwRQ7r3tRwEHl/KJm+MzQv1cpmO2RJIEdgUCuC8R8cE3aQT2W4unzz+7xAqihfYDCvqf33GcnXyEiQml4na2UtR6gC5/XguMJvfJzRao4nKb2+l2/pCZVC9UzRIfKtQeBq4pzMvtOOeZAPnH4H8Irl4+eXQjI53aE6WQZBC/3HHL5u/mgC8zy9bGB+xNPsP39ZAmdlaXL/jgO1e1PiO019NLGh0c4YAr6suBqeOp4tXWUfFAW1sbYi7zD95C5JcqX7CwI2HgzTZ7j2l5cvDR7h/TjKHRJau/Mj6rhPvMxM+tudZkVFkr3pzfvCLXS53Wi/Df851XGekM3Qh3UvmFCo3TpTDoCMwHN1f//w/GxC3Xeaje4+xwRdBtndIgN2xvFtSeJpr4/o3RHZWrJzeED55RHo6TD0qizHYhhhBk1cJb/poBB1CEQyBw0+1p4+qldkxGDeG9MEB8IfyEQ5jUpd69ILEZYPOLKwGXBNiZa5fnZlG1yLJZpV2EMEKcScYYXnkgX4mEDIdgYtHDf3Da4Sdku2ty0cjRRCenvP9+VcJXl0tJQkC/QudU/XzzeLL95+FAknnl80b7pH9CCu8JLA7nlYQwzL8so3NHurqpj//ms6yaGpNEsaE/iHaz7HJwzHcjOPq7uXkSBi7u+eySTvoicop8eb1c35kK9NKj/1gRYt+2AeLx7Iv9YwjQh3N36YGsQ5hpuBWMQ7FB0UpinIdPD39+gM02jJb6fhnud33eXNNVPftMUWKQkibDJwWYWxOJzOmd+2d1//O9b5vPVd3Nz/qv2nLnIz2+LfqWPVgSHoB1ICK4dwZDj6IIEB9pbDvqTRn9P5U78cmuDzyGREUPVvTS+M/xEwAsvJIBisX174v7iju0+Qb/MfwIdjlh2Rnngrb1dQwyTAwWebvtbjw8vPJ1+d/PrlIxibC5qDxIrMTU1Y49MXf1HXOw8mvd9XDfxJaBQN8OQZcwMhvHafQfyNnOWHaxy3+zpcPh3f21H/diMJoPMbwnYnmnr6mRm8wK6/OC/z0BAOD9xkGA7c4wtOAT3k4OAfJ4aKPgW/Ly97WkQWPOoIuFo0MU5jR8rP1rngjRDQYRQH4UXoW9XH7ENtD6sUBakQAsygyvPDUGEFG5YRHAEr/6cU742JJIc23EMjaSpteyP5DP5zAi1XftpSIiRK4wQkeyxRoANxld6WHGhBaUZVv8UVxKPlqamo1f8O3ODfARhEYow1fXZsy9zLrAkQzuzRWOwyGyhixbO0Nei39cgJIx7pXwMDFYYV1tbfBIOUnlVLyJzZXHEEKQZ96qjqsNmvmvppuDLardnPz8YCphoF0lMT1LiGEhfjB9DPNF38fXzE0WVlJr8Gkrm1QfzD1PEMtVakNl8TIoNzjgktVDE7vN6cSK3L2FvFMLL2Kc9Qrvs9MF9/cE0LQkHLtReFFT/5GNzj5X/VbQSzcGzv9d6SDPiaje7DEwc9bxIzO5q5woFvazog6W18RfiQ6O/OLVIQqoeZ0QEzBybYKGjUktpwH+n9GAiqzykAds/IABhMKq4y3ZMjNEvHmk38jxWrJxx0+1dETbLWLzJFpkdg2p0tYtEHJvB32F4y2tYr0z4wq1gHX0DVV4fW8/NTSJwCwxO1HWHDT3VRWhEnibr+VBLBcHuYS8sLD+ez7illqmW3MZ/GMMiN0wMXh6+GFBPVs/Ef22vTiPRNo5p3ScIse9Wdwl/O927WPoBKhvx8HiDDuoE6V5zdY5JhFpYTDpDWF7hvlrSQPhYUJviE0UPRJc+Kw60cse4W1wYv8dHr3dfMbOuTAunRkCSujURT48j2k7gjaIcKqheNvoFGeTtGSj/QXA3lJvCMeL2JgO5njxoxMiMSGnOeXjkWQZ1ojRxS9tRJ5Xhx9SRkJxgaSF+IXTOmnHY+Otk2PBrmDMTKN9c6HsM0XLugtxDd87+6iARPjIcciNcCR8hCqrh7HvofkFOmcnSI2bHUNKEpJoaIYmSxs8msvSYAWbn+tv5rlShPKRnX80TWkWEKd0Ig1hFdlZz9l881PkcoLiEhU0BCgenYOYm5845dvbPqebyHhp1LnUam3F9XdKs4ppaB87ubR+YbG0dnGzfO3jWUAn6a1bmx/3zQVu38sbyr4fuOJj3MmWWYOBlyy1YwJvR8VYoP9tfSXy+5PiVSPKHrLgos7U35+G27gQ3kn29tU9fDCtxOjKutob0U+BP01B/213tA3/f3B91/dS/p3H7wJHhZs0bFweBlA8TnvVp0rsD1/5p1dzrKbvb4XNT+1sijq1Px+Hhj9qK5GnT2Fis+Nmr3yrjLQYvZZr4iPwoGuqqGLHqDjrZ3TIYACq7aTHmuOdlj92t+SgYGxN8rKlRFsqgKNPViPNVFzeu1RV/amwq/uhubGxYr4s2NULBN3glL75AmthYmFKSLy4XiDsuiAPw+l8NOrQTtfBurVcGlv698qulNSyMwM+U2sXweMq8nNAY+9zcGCKH09ricogxWVlEvlPcNzc3NNwuPz+csFAXvaMsMjo1nx+1oyQiMq3ETwKNz/Unl6ufjKs5svNhc0pmhCFjcCJ+Q/QYBAsisTp2JiGJ2URELNHJgO+Ufb5Cd26g9/JYT/flk719gnf73J5TNL9wNzeEaChyNIl1wcZi/XCcrdx/z8HvsWV+GMFu05jGpvzbIRvxG7cbxh9+rgaw4fU/sPF1naK01nNafUuzDhHYTj5WiKR+Qhjt3z8pCmtvi+FBc49kjWqd+HBd7GaxgsZ2IG0FfB2NZe4RydA/1/eqNufK25OwsVj0WO83vPr/QyFqgi4TT4vCqZxD0UTNd9DeC9khT3vCZz49mj1+IOWmHA1sYg6hG5uR4DGBDSL2Acaz6+lQYf3oVIiZl7kFnsaibql/n4PLS3e7DLEtgo1onRn4t2/n1189X/xalHaIaxpl7dC9Wyo/B4fuKok8QEIL7e3RQtIBhTnTmK6+YCyP6GDGC+7r6qRAmvKHO1yDTGNgz83CaPCqyvxde8qL6v1MxJ534blcvY684cZee6FxmJFRorHQfo4US0NC6eaGyUS3WBrlVh5P5x6DjcWWf+VbkX9tgDcQjsj/VJKby1+XXZcp3JDdsPoJPXy7jq1ySf76r0VPmi6S5xJ+PJ1R3C4YrGtARD7/rv363qiEUdwQldiUjptUOB/6bSZ7AB1dC9sjDt13kwtLp0ZC176qPg8VjYvsRBOisC+vgHfrc39fROpT9MIo+MruIk+Q7cjj5J14vJc5xtILD4usFy5fKVjLX5UXy8SKYsMVbCwWJyf1zUlt8WmdL7ofYFYJlW5qbrFfv6Zn6a/sAhsuIzUCtbzLqVu6d4Db0yDJXiul0GwLRySdEmahxAzFihppB7z9tr73cK0pOW3hwQOIhfweoz8xB87GBFAg+BucrJ2dCzysqqeZMR15Fw31MCWzLxp9uIapeuaPjI6JNO7m55uekQpvUO6k+IvyGxzQUdLQnJ9ADUWho3TsKdPZtp4H7fqvXXQ/RTpCOkhn75Sz9XiI/zZuQVEOgD52DwBbkotv0ZQSe3PulwaUcZgp3GZsx9mkMjH5SBI8126iJE4qlAjVWQdTgAD9/bL48B9W+x8Mno0hwOi2f+z1+J1OgMKu5INXX49clyZ41AfDCg0Y76+20v4c6GyLh9Vn0UNc3RjfiQia3TTd358OxBEH491qi5Hhi09AKo9+zyez6Gu4OALSDF3pqOoIvaP+cZgSbsWyL7IvxTmyukFIud/63b9V4hxyHUrdxMIA2FEu1itVj6tbu931oV8awEr1IMF/rEE+QK6ndegzs4OD99VeGypLTLapxZkew6VaAyDnhDymG9k2Wmx17FSoUXRBTf6Ooq4GC5lHmG4TiWlLPpYCdG05CCgsx3IcS/1IwUCv+udTG6Gk8z5rQg0WDAla3paq3sLT5Em5LsNiiYsJIIfkM9ar1Z4HF6xevYZ5xfT4IxAWccuR2+3IimNfYl8E3RxP7B97oo/yAWI56qhOeAY/LayQAaOZ+0rocQW7Ewnn833EgY1+Zi3QADOiONBKO9LKfBLKwiA5sruZHVUdaE3OD28oZwihsmB8UIvZWlyBEfWDZXO4bXHaJABqi7cLg3sRSPrCIGOxjZN79b182D7bjxEckYd+4Dgw0HSWbVogH5l3N7mkwU7O4e+ruTRSzo/BIf1wmHgIC2vI+A+aeoku7Ui/yEThwKG+WLKlqzO/Vujo07g/k/z66HE26Hbj4Yl7+awfF5bPIHT4F67wIXLPIwsWS7lUnXhGXUOeE4TfJhan3dYyU/ExRbaippf6sCWszo6urPN7+zMHR3TrkTdyRJk+9n7FAXamK9YsdrbTLckPogF5/WxStOBX9KcaeINkoytiUf9NDN8lIjeqbhLJG50rOtyTkUTDi2F13mHvn9DLM2HzH37NzomzzofNXNawRLvarpSxWGUrtmORJRgM/qR2ec7W4s9sR2q0OHrk+GjJeyVgLTYqxM7aOJFeIWAfYDy/njFKuZx4jprd6dH0sEw7ZDAbXuYw5J/XLvC/QNCdCggkmHcuIT4C7gYHQE8x7fo+vobGQ6+SXStHlDB7H158SVVImf7DD2+158rCuAh0rzjGaBc3ot+/BJ2CNcWS3YI1QRrbTxxonayf7Kiv1su/LObarCCrTByHXT28qhPGYEJlUfrq8Lk7IwfO3z64evr4+bFl93DPeHdavGe45alJ8qtTSebu+J2l+Nlcr6H8K0hKmqkNm7lC/4UfP3vBnBN7gL23gHyU3FuENnedqEpMa3I91skC/qx9EAVtSe9fPvXS0ncajGmMXL/e0TS05dKZDaTjJ0BBMQoIRVOrc/tBL5rz/h4oVX9iZUHK/tuoUTySf1DYsUjkOYNjQWH+JB41yn+bsizoJ1aVcyBP4UVLXIvxzdcexo9em0LP3n1xKWnqysKNG1cXppIu3X1xVsGMi31FNqaRnUw8nF5hucwyc17rL3QHXADmDazbQGHyu6Qf8yCCZ7FULKL7NvU8LWLgIsOHgfgfNz298TAX93t/28S67g35DVLAVseRaIaoAxP0nuDRFRkrNJ+be1T6xiwvvNlbMAZLZ9ofrHcz4lMsspRY+CbJnyng6p2xu0WczRNH0qAvu46Nht6gm3xIXpJDw24oPg0u9mlP3GsRBJ4XCfNi/PPAzX5UxruiNAz62E6QE02VoeHo6qUzQJtT4t05usta23Idbeyw6awGLJX8lpQ8AuOU8UUWuFz1cCPNPN8i969hAdEs4xTn0mRPNDM4UCXJbYKOVkPvArStTQOJP4kJsCxcuXmUAEjwJ+Uz6Pmr2fHH7XJxgVJBSMzhi008z8iu6pKdI1MhWadO6qc7WiKYlvTgkN8rfXF+NfcOzX9eaZtXv7d2+m6QfD4fnYBARAmIEagGp6xRZnllbKWoPi61ZSIo5fb05G0b+fxI3Gsj60j3LMKAd0Y7r6wyriq2Nl3TmSDDyTsCbaTIXwTTs8TEUCTyyCuJfvXmaff+k4XYAEC/JWyrTHPp4L//4jX0cqLnAqkkD9aEV1U3TN/+OFfs3oNLQl1SivfyumGZaJvlqqbUZ7DjYf+BhqrQM/fzWT/PE7XRT+3XtWcsc7R4vDohyadpX98ELY0bISn9q55Hh/RJh4Z1G1DXc0RFglaxOO2WNnq7Dxo5hHqw2GdRTNHzSc93XzS9a8NkWzmUVyo9m35L8ged1AA2/DoZNv4ahoWdDKCZCpnuu/s39iymqMeoCI1vLU9cbzwo9X3c4iKB01EGgzY6eHgNXKK/saVUJs8NKih9hMzKgzaKdhaNiNXE1AiqfM+6TNMCE13k5skCbVfnLaA8T+PwwiVn6pcm5zJcJ6uS0hrdTnQygT/rpDLSPLR5RHtjtkdmCCzN/bnGm7lv3ycSJr1MYpypxvHZuHDKHp4ycE4Jjw6ObuWQ0BwaMVlZRvXr06dvrs6Xeh6IMvZDeqdqDWWBlw324CCV+Q1NyfMpGB9To9gAmD0ykKB5llhHirRDVNoiF0ybysorIbp0c2GGm6GRNH5fycg47tbLK/ek+pwK+zN/HjPu77fTUojD6K0QmwNqnEThFG/vdEwUxgw+Qxoi6rg7Zof5uitx/AOkljE4vOhH6bcDE1FvOeKdu53Cwx3uysREYtDvCaLAURJGy3lg/qB7w2ej58G2M21p0lRpxxm5OPBA3GeIXVycB5VVFjxdNObF9mDmHw+8X0JFcZ24+xfSQRj4xSDwVNXE0tdvL7qCNsouBkY5uMdXmwWt0/EUh8zYAWd/Z1/BwA4U04QQXrToOpJyaqC4rr483KY6IG1IkcIu0rvGIM+IvzKC5a7psl9iTjw0p1BoOZYTWXiNN2ZH8URWCRs1Kfdr+AERMehy/4oRD0Vz4IpQreU4BeFbkMbbWCh72bij1J5gj36pfDHeDmSHVshAh4KErlDebYugLF3OBV1jKjxnmoHV7NBb4ynFSYVJSjIvt/8Xt3iodgiN3Xp+2Ayuglc5fS4U5BGsKArmqcViVVgsDt88TOXobcHto/1Qu+RIfiY/MwKKTO48ellw+ehlKB1K1V/SEb4U6S9samssi7ZZbUHXvm690/v+Cvzu/Uvwd713X7bWaBhLX7yYqhdBoehFUMV4vK+lYzEQl72yqWquaXdXdfXurqa5qrqm0ou6zvif6f92g/99wZ1DyiXOy/UMGgfZYbU58sGSfwdS/wKM/3wX/D9qtfLfv/8SObGmrdcQUtUhAzT4d1gLqwvWfQZ5nuzVaV09AihyEzbPIxzSAZnW9NtGfwG1rpeT/AtOP1bOXxfk4JX/cCqH+ls5/TtQ+BcQrJ7vMutaPg8ZreQVbqMJUvuU/3cb5aOuNNsYuM2rd1LtmehweVXeV5jPQfg78r/fp/wfJ7yR1sSadvUCxAD42/LXv2P++Bfmf8MBQp6wdUJRId8Ecx/c6pHf5mRKhBYkJyl5Y6dNicuum9iSt7M2f2gObs2CuR39CjcU+rJn6vM/IC8c6r6J3qVDtwRMyAmSPbb8pgr+HfPLvzDfDIeCSF5AbmROnpDMHkAc2wY6Xgq7kjBnVo9WsgnWaRCeNylWFV1X1dN9T/ptR1Hyt5WMf8cC/AuzFXIoZPV+Wx6D6sn0X2j915fcXrxxGfGk60EDl6G8LPwX3BXeLgNw3UMexZ5wbehvHDeTaXqJyy/cP5uD5byyB+dnDaBvZPKuv/ylZlDxh20Hs+RHLN/3C39an7c5x8yyAOqdIJRovdwcJFpkfMRc8QoCKk8cYDeDmQINvmYpMA+0fB0YIinZNRLoV0BEesW+SLCfkZmLIJYf6+N7mM4/e3J7jwDSO/cpwDGGSEK2UAvjvvMr3TJvugvMm9F1/Vtv/5VwsfxyawSnKo5cl0UA6kPgmX7VnnBO+TscYWP5hfl8EUOUyrnODv3Zvb7qczuxLyaRXPEJPdeP7eD8Yd62rWIWB6PHzNtuT2jK77LUS47YrG+CzLGD+5QMhKbESEJ2j2qB5JYlP90TvjQ+b0PUNrWkiTMAGdRjpF1gxnkCjW+B9bUMGGxT6f0dzD0cnOEQXU8B/vFZlCIn2IOmoqBs5njmD3e/ftl++zt0JGAp66lIr9kPQGLuXvnfrcg95kOjiInae78kB7JZqXFoHU8mBlCi7QLb4W9ufv6iNH+6+yr+P/781j+fNbV/aeHFIXQTHJohhCuWmOkblRCynBdY+03vY0Q3FhGPeeg7GGWU3rB+fwdnEhamGIRb+BVmXEA+ZH9cuCwAHvGm0Ok09IlthJq4jtb4vR1UEyaQRK4UBeYJukeDekPNY4wOkrwMkHZBvRdAh84dnZI/bmMb2+jmkmCvwUI40ROhOdLQT2TzBrOJ/L1xNAp8j9omjTG6kWPFH+6g0ScqIlgTXkpngwZDAY5Ibj3zaWIzH8DocUcUHOiXxtK0IhGe0Tstu6hWzPCTsuNqjyoHNtt+EM+UMqnshrtrij/AB53NkjgKPWrFbZPuG5ebCLjRe4WVW2ZKbnFCbYMHQXiybjRiPNKX8YJUnlXzyzwdwWTUABQTHlyq+Gm2Nu6aDGyhUMtsUTptJnAmvx44lZImorBFu1Vgcb1E8krQdj0xCI0LxGY+9Qd0XBXZkXQxtFlihBEE8ebrBmal5sMVp1WpIXU97DER1b1YfJYQO4U5TIdWY8xxmtLsThIe5n0F/gkT//FZ0YrA3FdkMrIqBNrb3h47sf1b4fMSm8g9at7y1wRvdafADoRcMwj+OIFu8ZMILAAeRvlXQQukR7rfNYjOph73Oaqp3pJGNrFNpDsQlHGJO/6D4A7tllbsvNTd5QzgnD63JyQqcYo8FdTNVkUcEuawuhRl9qwd5PRqLDVkc0RmSbbl8cijqKSyjJj0AMYjroiD4SuooK6IsAVmDwPIVTLe19yz58CWEuCArs2i0HdVG46fYUdSuzIBwEfhKTkwwmdYM5bagzHM2RFm95/3mUzTgwZbtIa1u0ssyb1WJkGi3LORPiAc2yhrJ7E5mQQ6tTC/F4ncIhosoxBjm5mdFFKrt5l74/SHRIfOKoixvCgz2qxrKupWUarfGUcNkDRphgt3I8nmMNIYUohOwKjuzNraidApKDTzNsKYOsEkuY9Bm/Ti0HmXgOVDk6ZMs+CeXQzsCH3FuQ25T6q6QpLzLwuBrh+xeRL7rp336XANC7sB7eeXrdnZa34X+Nv780FpdLjzVUDiAgqic8G3kqXyQ2SxoiGXjARYpR95JKr5Q/SkY1dvXnUKbKVm8RIZJQcNojTRD2GalcA+rxEpE5ctwARbc6d+zJqBzap/qPbTtvXMaBQV0k7+HC49/Xn78+PR5bzbLMZ5W/EU3jv+hHsJOkYKmt7s6iQKfU9ybvspUdkuEGZITefnx0epqo/741I+dOdxgEG/OR/7XGibdANLrc08+dX7UyTIWQb1Ir6EAP0LArwoAAqIt7z3+g+rn+pMgLYl5c3tXxOPVh2niAIPHqIUJVtMiDlVqcpX7zT0J1ItaQ1Bm2GEfYxAiEe2SYsEGN4ROs4rgWNM/p/QceLPyz0k+H9FibXpK4XnzZuUD7/ngSwF79sQ+UdY/QlUffb3xfn2d1gqeGmLt4M2S5tXY6c0qqb+Se2Iiq8pBfBXr3vvd3KkIc3To0k1H6O6ruWfwwD28CLQ5Mnlw/XV4Xq16Bpe5qnvYstX/Bn3Y7xAvo9qGWY4CV4CmsEVLYmwPJ087HSY4+rAR+M/IiSH+oaXsDt3I3Ly+U0hT+XsfTxyClrowGJxgqfqyqJZQ0wGDwJ1NSaKDcyBPqwRAAmN3YagAx7bvR100sfSovCd+ONHnk2o/0B1MsYKghgyowtyp/FQXpw98Nju8SKlj+VF3zuB4oKbtCrJGwOhPh0F9shMF5R+nOytrIjCRHghAoJlQK94rSORc1g55yQGvHT1FsyrfX1itqVgRUIl0LH7G6u8DlnXeYGDzbgp8e42Y7CQYAy+Oc0Q9eOUHZdG3k2PR6UIDfHWekiUn+D5ne4k3I6FMZLY33zSB25yuwIQoSUWYR9jFk8KwuJtgDu0KSvuRpI/ppEpVJnS9THLZBm8JRKTAkF+oI2uJVRIp8USGIYslWr9uNlm1sZ5juspGSl+pUBJWgsiEs+gVNPrhiT1tsNRpv+xu+TUUEDNFvk9eiVdmpIrauNNXUFY0JYESkZZ0ozoanw5ggB9PIKExRAQ3vEc33gb59j5wPr6+xjHvBkY7tf5m8qlAk1onv12vRr7CuoeBZS7XHOFajhG9Df9Zytuiht2splw2fHAFZiy2dQKr22BVwFMsGWCSH2cwCSL5uI75ylnSZu2Y38joFI5Ccu5qV6qkxUpfHSy9GyRBd4ncMelVeDchswmwiU0jlZGT8bVcosMabXVNtmSr4wlaCAzO0nOcjrJJBDbuT6IBxTUkEkh3QpsMkvB8Lc6UvCq0tyZerGpEtkND6JcyH2FRosxj/AL0wlpox5vNSserV0/uG0ykZygo3+3SP5vvwK9tz6sJ6yfa1OBBrh5S9LhtgJ0HJx0RRtbwojtkBpq9mG85X3HflQY0ksEmAT8gk47mpTuplfDQUq7tXbWWg5kE6ODExOvAvxvjdoP3Yi1SXcOYn8P9WTuMh6ztjrp1jJLA5+SzzedYGr3e90xIrSCzSkMDG3sUI91GR4sglB9ZoO5t4e1SUTovfR4WyexQD8/rtfNmuVxlVRWjCOMjT0hKGFw0mtXTmnVS3K/OCQEUr/j67IdxT9kNucZWQjgvKliGepTtdOz2iGsjWVKj7ebbg6217amDrZh9Ca+1mJOjMdznXe5vcq6vFtxihlbz+Eo+X5jjkbj1To82uANp9Xl+yHUkWOxZzTC5XQsgGOesjimPqSH9GfxVwrHoyHFXeBA0M+O27pkxX8jUxB4DrFNAxQFvDf/EmfpwXPGtGlnshN+haup7/w/C1pvRdNsAfB1TJRxQCeC6JEedwPwY+xQVfPy5PBLBFk4w41m+pHsYgXmxZZkxpwIFKatWWdTgy8ON0VjbrqLrbOfBxmyk+CfiRWZtCw2ME97hjOdV1DiMwJZInvZ2nJuXHMfpV+ls+s3nEbWyHHlxHTtk3FNDKItKe2jxk2szjiSLJ62wlmqckJUCeGbNtpeyrQ2w1gIvlKK+ZBCu46lUepQ1VW1nTVj3jzfeh91bw6rGKIR0iyPhDG48NQcFZ5h9vcbdWjRKoVLzSFGOIg/ctdKAovPBf5TcTMgquqciDAHDUGLCdo6KoKUE7zA93q6phRNsAiIoaldisSwfUm8EpdQZt2nnXkaEowXDdtcoLvrfCiGOPJd005z8xnmbnjvYRgtrh6UwILiKbu5qFoN+nXjFnVrTPFYyv7EMKY8kDzv2RaDhhVdcfu7SZPdXsit2cIGYJcGANzbLDJ6qW930lEjJ4UGduF0iNfaILyqP2ceNxM1vlbqmvaZ7u3zq2lfGXE8rGtqwRm0XSgp0wwE6WA/gIuZ6bJAekX3mQHwmvVNlUuQTEOnk/ZpOtAus4XsPDePOXbROFEIg60489SRUuW4ZT0zC2Bal8PZsuO1MTmziZv2NAx0gL2mXTZhLZX2PmoXZAHOIc8TX4D9f5vbtO5oSSuOFX+qFvI07YHjNd33hrBP3K/P+i5TdJMcN3MTvDdhoA2aiSR652pMN5jd2KIiH7u1V16dMx6j1soTSUIwDZGuzQyM1PeZ6uqgUbxpHKTBmbP7uU4L2DqhIZjE1XpCjB6jj+EL3B+G694Vbl14NbDjluPZVEt46bBa1ss4dLDuM3AL3YFFxlIADVUlOAGODM+lfOd1W101M16XgDVmULTCIVv52M1LpYlyAAUbpQC312DR1VLXcHlO+DCDm/+4h2y9Su5an06dOGqFjujnsei6SbQHythuNKHJWFHR7g9WF47HXs4rnlg194X2QhYip2sqb4CYqyA8XCrwwFBp3FTrDE3rTlp1ONK+pz2I1JE8H6hthdHc6zkZmv72YjiOx66peJHZpAuwrbkSx7kjikFTBVauLEVMZ4czak2HbresTP80mn8MWrQ7kXbGliE7v4LP44CbzfOLJZI/qP+Qn4QX6NcvlYVrXaTHhfxpz6oyc2UiXXT/sNdP1wo8bJuBhJIp1f2CfNoxjW8ymqQZGnGUPDVZmV3n3S4/C6cTj/lMnYZdJQMbEJrRxwcH3dBKs6MWVvKAxpRS29oqUWPIjMKLIToaktzJUU75luPid0EJMAwIGEkuZ3TZ3rSZt+LLet1wAp2XH89gGOw3OFSC7L3M10rdyo9nMhD8DQ8DAdThDcpGEBOMZiMZNF6a5RigMlTd7amFIRXmEh+a6NY6AnOEZKa1IIoELekVhYFt2D6mYotmQXIImY821i/4liSiWCyvKvNigx9pf75khUNEBv54s7ytbl1TLNii3zfrHiqFU/j1PnHO3q/dgfMfgEXM4fvcC4Pu6435c1W8FY7TcGD9+lVGKnoyy3yAUiZmPw7AaH20vjYWBlU1vkLWRpJhhSqRg4qG1+cCsBhvkMsjVaBOBFDvRtSnw255bH9E0LUpBjgCHgPUBKBuZeRhaZ0851n0tO035hmaZhtOG3Ia+A1lUUkNRrvigwQK0T9/CciLfSV2CYl3AfrodW4XmbEjbgagLnnBzKwmgdqR/wEwn94EtUowk4hlsG1kJZX2OacaoIw7IijMBhGS5z67hcFwBeV/BEPgjKnSxslI30tTX1HikRl2s+WjQIlcYFkoAVV43GglAWOSAz8DnL5/qH5KICpXds6TTCxMiXZI0ttRk2j8EiJxWkacLnQ30UJC6sjxo31QntRuYVJKifLtWLyoHMuCxCK0o7Hb+BQnD9kLzFUVSr3cEqCHyYhSE6KQ/Lz/jtCVs7FRpDLkWJH8fo6mevM2VmTUTMSTVSXn74/Ox+rQo/udO2JbR1Nsg3hI+ZlXYh0PpuoXnyW9nCOqWZ3n1cY47+UcU4q/2R61JqXu4SAq/P8PR+QNfADBbWSlxJ1Ccme+vXInqzPMK5rEgUsriGfSeJ+tg4w6N1jgJxDF1WM/dPZvb72tnyVjJqPXCURpSK6oyYERARDR0zDFQlRk2mT8O2+MJ+pTooPtFuamk5DTJuCJKI0o/ex9SLWo42dHQ2nsUf8zjRi7JdAII8HRFZRfLv+2ulpmTQfruNOxQODNTSGO3N28VFrANYRTAYlWdJXU1V5WH7AxUd3AgKwFjoJp1Mu9321ltxrLYPJwaUUpdT5ArRPrR0KZj4JDKmJL/eZ9iY4r7JVOi33Vn+3gUQqaO6DUjCSYGJwKMsUeOGmuJqyPhsrfvIfG7vUiEVwH0eX8EbUwT+04XnyZIzoc4IxkKKNsW+Iv9vNFtE81/GLXzo1cnbD7jBggKb5S/uHArc2l0DHwIaXm25w7XZZGQTQJWfErnB/8vFOa7v2ZxBUFkSWWeThu2Siabih/ZU7tum2smUvEZd+NhWXExOSDfgnHvc21DJkhW2uZsCp7b321YkppG2oVqf0S9HWP2hB2+4R8qt71tqia1zlRauersgEksMA4b+VA3aCib9L+XRj2MSAPbTbKz+jNYmMgTK+GEwAIS7tt5pEBHs+uDwt/qfEHWBUYg7dOpnn34s7kbYL/9KI4bGDAG0uR5jQL1J1uFTgEMN42IVheTUcGPHI7oIW/20E+/36GtW9RN2rIQEeKGXPiVvgaoLC87fc+kVuRiuGMb+6M5iNO5tm2RdzMW82/rBD13NTkVmCp5tKdBtnrPmmY8WFF27KKdGVvwuH7OAiRdMsWWJCHvZOLbUTQtXBTHt0TdzlevpfJ5+xmZiXfz5DZQUVqx6lDgQfnb77gNQHwP4CKqtzzBl/XdCqKKeczvhGm6zO1akeJGdK2GAPsSdqBkHmtdaxtVcy8ATAaTIhOt698khCfVqBrVRvUnqaZuD3AHjU1xaeX4Oet+2ve5us3reE7ND7DvcqcpJNwB2pq5ODt4ks4IQWkMvv3IgIAnf43tGlO/rMe/9+yyiEG4Kdr9nMA+Nm+/QO/W8/FZ0fOnMDEAAK/Glv/YckWz//Tj0c+nzzX6D8aZB0mT9K/4b8ZrvnKbO15DfoOC/+qhP0RW38hq5Spj219+ilLlcQ0s89bP7YZ69PALWBQxLw+JqxvmXW882zfl/evwhcsmy1DEgAk9rRgIf93yqdxsRMiG0vdJ5l7SkqIaIXiKzy2MT69hpVNJI9rp+lVEU9RVdrCcrFORzND2xNhyYSBEVxcw0HNW31h6G4h8y2L6mrlUK+pfHKOuSYE1CRtVTOL5sG5JbNmxPVHJrZgudLCydyLdD8RheYZ+SQzLyRlmp3OVlz5W6yg3hDTv2x01Rfd02xGW1xTHRZUs/x6TFDeyYBVn322TJepN+7eFFu5LbZRSaOEqQpYs/ShCP2wo83DJhTcr6i0I987JSTHM6ypiSmFPZzEjEsJ8RvOg0XiwIjtT1KrSvog73+smiSM3gASqRU1eCq6aCjDDqshDEMj8+ar7DzDDQ5wsUVwxHM586PZ8hZ0v/7Anl8LVJPgJgudaopYHGLDMcr2O5nm1zIuom6K7t/svSmxKhiB4sOMaGG9xYSh7Q0dJtQQr4zxhGd7MDTLzMMBjRTdlgxFCw452PungGLRu9YhR6bIzEvKFXbWdV1jWJ0nt9Nj2loVO9Er/0zXX4S1RERfkNTjEvsUQ54O3izhMrAOhH0RdBQmwWl13xVeePJ22vzH1puyazejXZoZmNRUfsVlOs3n+p7I2iEwndB/YjZnwiuHhuYjjmRC/681nLpicI9lMO5OLSkTbus/MsMZQrbe0y1c8XHusHKjSfUdJoqowslPkbQ7396krUwW3ErfyrmGVoQ6EWDodDILvOnS28AhcMjFoiEGfEiZcA+R+HEPQ+HVPSyd3fdwvC26RyBbI85P3YlcUXfAUwzsXfsaIFVc8QBd9Vegr/MNEJss0HPgfSrPMz1xQ9nqserN+8jiGE10l2eQlXdm3kIT/UtRk69hEEvfxxKl0VTkuWYxyILnV19vA31ag5OxksVco4gqvWicprz3nA9ps0zTlFMqVfMMme5rWMcibxTYsNCxpEYzHbo7muGNNpJ9FE5F1zdh7UXkj0cMeC070HSeAl1ykC6Vd7WLXjnepxfm6am73Ap03PVxFUPZuVCsTTYC4/OTO92Q69s514AUscQhxFxXXNLFDl3tFCpMN+G0urvsqms+L8JgyYmvR4AbbrplSeA3nstgt9vuyHPPPLtsmJzqu2T3PZDvoW2B706Tr9JlKtDDrIBISCL0tEYhccTozaozuWC9ZPlPRx10YmbxyZS2/u/Xi0gw0eNI4UcZGclJgRlOyDHB7EBJ5XDUCD2LSzSiya6v/gboxyda0bbNPntpfIkHznq1oxtY9JzmGXj0neERgyAcV8c0GTGMUYwF2srppFPqxiRIKvUMDMpgQ2LqkUHqB62BhgJs0EhRwmMeTLCx8DPRitGYbyyDNxSviWFGGGmP4dSxirU/+Et6K62y1ihNTSUlI1IrtrFzLvEhUnBoJsg6Ahfsd8BBh5wn0dx0z5OoRRxM5s87pDjyilPIXELBmqRlnP3gHmpc/E8WT2KNu5ncQotHPLUy2ljjjGGLl9bx1kZb7Xxz1CLtucYnvvEr2v3kAx9IpytKn5VgrbPqVLU7C6WZ4mg/fM8+wuRAugdEdK7ESkSF4tasGMrpkkadXoj4PNIGWwZZZTQkKXpYMutnA+98iMqgyRA1TcgWN54sIzRzUJxka9AnyETPznQMC4ttUONo5AEI/3npDWd8S+1x0ZIYQ2HIW53fIRf76FgFYUcnHK1kiJUtGp9SelGgP9vTEOozOLf7hbVc8x2QdA+Sxz87NYkvSI0UUZe0JH2qBR3anigSaIbF8O+H5cYkd3xDfFEQX68XTN1AZWwJvLNhOqSZkiZRShEHpyr4Sy9q0r4UqRNeNEpQwKepjZDQlBmt5stBc2PBVXpxKfZZ+S1/pNbGaPaMYfVZmfHUHLyVwrJmElzcMnUZjMakT2et9zGKM5+aLBoISjVkwZkvTk2Kv46bbRBOjLg0bSpaKWJbZTQBpdqV24YLoO5ncPl+rU6QzOyHHqf/VS/2nBMQ3vnT7YHs2yB4ApHSRe+owtz9B/mwmmYDPkESrWXYFlS0SRwWZTy8q5Hf+ctucKUkIyGESRqI68GwvBGLfhaxcNePhlDFfbnHLRWtRNJN0mYmRMC+AHd9KHxPe8w5KypGw7ypK0vH11fAVYW9BZTztBmYMhggReRnhL/llK/9qOxa4ccFoglk3hUA) format("woff2"); font-weight: 400; font-display: swap; }

body[data-surface="next"] .deskstage { grid-template-columns: 390px minmax(0, 380px); gap: 44px; justify-content: center; align-items: start; }
body[data-surface="next"] .tvwrap { display: none; }
@media (max-width: 900px) { body[data-surface="next"] .deskstage { grid-template-columns: 1fr; } .nxnotes { display: none !important; } }
@media (max-width: 460px) { body[data-surface="next"] .deskstage { overflow: hidden; } }

.nx {
  --y: #FFD230; --t: #00CCC7; --yt: #FFD230; --tt: #00CCC7; --bg: #09090A; --bgc: 9, 9, 10; --ink: #fff; --fg: 255, 255, 255; --mut: #A3A3A8; --soft: #E0E0E4; --soft2: #C9C9CE; --card: #141416; --card2: #19191C; --sheet: #0E0E10; --navbg: rgba(26, 26, 29, .72); --gl: rgba(34, 34, 38, .66); --ln: rgba(var(--fg), .13);
  --poster: "NXPoster", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  display: block; background: var(--bg); color: var(--ink); position: relative; overflow: hidden; isolation: isolate;
}
.nx button { font: inherit; color: inherit; cursor: pointer; }
.nx button:focus-visible, .nx input:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.nxi { display: inline-grid; width: 18px; height: 18px; flex: none; }
.nxi svg { width: 100%; height: 100%; }
.nxi.sm { width: 15px; height: 15px; }
.nxi.xs { width: 13px; height: 13px; }
.nxscroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.nxscroll::-webkit-scrollbar, .nxrail::-webkit-scrollbar, .nxdrops::-webkit-scrollbar, .nxlbody::-webkit-scrollbar, .nxchips::-webkit-scrollbar, .nxdays::-webkit-scrollbar, .nxlayers::-webkit-scrollbar { display: none; }
.nxscroll.pad { padding-top: 64px; }
.nxend { height: 120px; }
.nxillus { font-size: 10.5px; color: #77777c; letter-spacing: .02em; margin: 8px 0 0; font-weight: 600; }

/* ---- footage: stills that behave like video ---- */
.nxfoot { position: absolute; inset: 0; overflow: hidden; background: #111; }
.nxfoot video { width: 100%; height: 100%; object-fit: cover; }
.nxfr { position: absolute; inset: -4%; background-size: cover; animation: nxkb 14s ease-in-out infinite alternate; }
.nxfoot.n2 .nxfr { animation: nxkb 14s ease-in-out infinite alternate, nxcut2 9s linear infinite; animation-delay: 0s, calc(var(--i) * -4.5s); }
.nxfoot.n3 .nxfr { animation: nxkb 14s ease-in-out infinite alternate, nxcut3 12s linear infinite; animation-delay: 0s, calc(var(--i) * -4s); }
@keyframes nxkb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes nxcut2 { 0%, 48% { opacity: 1; } 52%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes nxcut3 { 0%, 31% { opacity: 1; } 35%, 96% { opacity: 0; } 100% { opacity: 1; } }
.nxwaves { position: absolute; left: -10%; width: 120%; bottom: 120px; height: 150px; pointer-events: none; mix-blend-mode: screen; opacity: .7; }
.nxwaves path { fill: none; stroke-width: 1.1; animation: nxwave 7s ease-in-out infinite alternate; animation-delay: var(--d); }
.nxwaves.t path { stroke: var(--t); }
.nxwaves.y path { stroke: var(--y); }
@keyframes nxwave { from { transform: translateX(-60px) scaleY(.7); } to { transform: translateX(0) scaleY(1.15); } }

/* ---- top bar ---- */
.nxtop { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 16px 10px; }
.nxtop:not(.over) { background: linear-gradient(var(--bg) 70%, rgba(var(--bgc), 0)); }
.nxpick .nxtop { position: relative; background: none; }
.nxstack { justify-self: start; display: flex; align-items: center; padding: 4px 8px 4px 4px; border: 1px solid var(--ln); border-radius: 999px; background: var(--gl); backdrop-filter: blur(14px); }
.nxstack .nxbadge + .nxbadge { margin-left: -9px; }
.nxbrand { display: flex; align-items: center; gap: 7px; }
.nxbbc { display: flex; gap: 2.5px; }
.nxbbc i { width: 21px; height: 21px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 800 14px/1 var(--sans); font-style: normal; }
.nxbrand b { font: 400 22px/1 var(--poster); color: var(--yt); letter-spacing: .02em; }
.nxtr { justify-self: end; display: flex; gap: 8px; }
.nxround { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ln); background: var(--gl); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 0; position: relative; flex: none; }
.nxround .nxi { width: 19px; height: 19px; }
.nxround.on { background: var(--t); color: #002826; border-color: var(--t); }
.nxround.sm { width: 34px; height: 34px; }
.nxround.sm .nxi { width: 16px; height: 16px; }
.nxround.me span { font-weight: 800; font-size: 15px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFD230, #FF8A3D); color: #1A1200; }
.nxround.me em { position: absolute; right: -8px; bottom: -6px; display: flex; align-items: center; gap: 1px; padding: 1px 5px 1px 3px; font: 800 10px/1.4 var(--sans); font-style: normal; background: #1B1B1E; border: 1px solid var(--ln); border-radius: 99px; color: #FFB23F; }
.nxround.me em .nxi { width: 10px; height: 10px; }

/* ---- the badge: crest, photo or initials ---- */
.nxbadge { --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; position: relative;
  background: radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 52%), hsl(var(--h) 60% 22%) 75%); border: 1.5px solid rgba(var(--fg), .22); box-shadow: 0 6px 18px -8px hsl(var(--h) 80% 40%); }
.nxbadge.bcrest { background: radial-gradient(circle at 35% 30%, #fff, #E8EBF2 70%); }
.nxbadge.bcrest img { width: 64%; height: 64%; object-fit: contain; }
.nxbadge.bphoto img { width: 100%; height: 100%; object-fit: cover; }
.nxbadge b { font-weight: 800; font-size: calc(var(--s) * .3); letter-spacing: .02em; text-align: center; line-height: 1.05; padding: 0 8%; }
.nxbadge.k-sport b, .nxbadge.k-show b { font-size: calc(var(--s) * .17); }

/* ---- buttons ---- */
.nxbtn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; padding: 12px 20px; font-weight: 800 !important; font-size: 15px !important; white-space: nowrap; }
.nxbtn .nxi { width: 17px; height: 17px; }
.nxbtn.y { background: var(--y); color: #161200 !important; box-shadow: 0 10px 30px -12px rgba(255, 210, 48, .7); }
.nxbtn.t { background: var(--t); color: #00211F !important; box-shadow: 0 10px 30px -12px rgba(0, 204, 199, .8); }
.nxbtn.ghost { background: rgba(var(--fg), .1); border-color: rgba(var(--fg), .22); backdrop-filter: blur(12px); }
.nxbtn.on { background: var(--ink); color: var(--bg) !important; }
.nxbtn.sm { padding: 9px 15px; font-size: 13.5px !important; }
.nxbtn.xs { padding: 7px 12px; font-size: 12.5px !important; gap: 5px; }
.nxbtn.xs .nxi { width: 13px; height: 13px; }
.nxbtn.wide { width: calc(100% - 32px); justify-content: center; margin: 0 16px; }
.nxpill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .06); font-weight: 700 !important; font-size: 13px !important; }
.nxpill.ctr { display: flex; margin: 6px auto 0; }
.nxpill .nxi { width: 15px; height: 15px; }

/* ---- floating nav ---- */
.nxnav { position: absolute; z-index: 40; left: 16px; right: 16px; bottom: 14px; height: 68px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; gap: 2px;
  border-radius: 999px; border: 1px solid rgba(var(--fg), .16); background: var(--navbg); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); }
.nxnav button { border: 0; background: none; border-radius: 999px; display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--soft2); position: relative; padding: 0; }
.nxnav button .nxi { width: 23px; height: 23px; }
.nxnav button span { font-size: 11.5px; font-weight: 600; }
.nxnav button.on { background: rgba(var(--fg), .12); color: var(--ink); }
.nxnav button.on span { font-weight: 800; }
.nxnav em { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--y); color: #111; font: 800 10.5px/17px var(--sans); font-style: normal; text-align: center; }

/* ---- the time dial ---- */
.nxdial { position: absolute; z-index: 39; left: 26px; right: 26px; bottom: 92px; height: 50px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 20px;
  border-radius: 999px; border: 1px solid rgba(var(--fg), .16); background: rgba(26, 26, 29, .72); backdrop-filter: blur(22px); font-size: 15px; font-weight: 600; }
.nxdial label { position: relative; display: block; height: 30px; }
.nxdial input { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; }
.nxdial input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink), rgba(var(--fg), .25)); }
.nxdial input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(var(--fg), .3); }
.nxdial input::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 24px; border-radius: 12px; background: #d8d8dc; margin-top: -10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.nxdial input::-moz-range-thumb { width: 40px; height: 24px; border-radius: 12px; background: #d8d8dc; border: 0; }
.nxdialtip { position: absolute; top: -30px; left: calc(var(--p) * (100% - 40px) + 20px); transform: translateX(-50%); font: 800 12px/1 var(--sans); font-style: normal; background: var(--y); color: #111; padding: 5px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; transition: left .15s; }
.nxdialtip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--y); transform: translateX(-50%) rotate(45deg); z-index: -1; }

/* ---- hero ---- */
.nxhero { position: relative; height: 600px; display: flex; align-items: flex-end; overflow: hidden; }
.nxhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bgc), .55) 0, rgba(var(--bgc), 0) 22%, rgba(var(--bgc), .1) 42%, rgba(var(--bgc), .88) 72%, var(--bg) 100%); z-index: 1; }
.nxhero .nxwaves { z-index: 2; bottom: 200px; }
.nxherotx { position: relative; z-index: 3; padding: 0 20px 26px; width: 100%; }
.nxkick { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yt); }
.nxposter { margin: 0; font: 400 50px/.95 var(--poster); text-transform: uppercase; letter-spacing: .005em; display: grid; gap: 2px; color: var(--ink); text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.nxposter span { display: flex; align-items: center; gap: 10px; }
.nxposter img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.nxposter small { font: 400 20px/1 var(--poster); color: var(--yt); }
.nxposter.sm { font-size: 44px; }
.nxsub { margin: 10px 0 0; font-size: 15px; color: var(--soft); }
.nxsub.ctr { text-align: center; }
.nxsub em { font-style: normal; color: var(--tt); font-weight: 800; font-variant-numeric: tabular-nums; }
.nxctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.nxctas.ctr { justify-content: center; }
.nxlive { display: flex; align-items: center; gap: 8px; margin: 0 auto 16px; width: max-content; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(20, 20, 22, .6); backdrop-filter: blur(12px); border: 1px solid var(--ln); font-size: 13.5px; font-weight: 700; }
.nxlive b { background: var(--t); color: #00211F; padding: 4px 12px; border-radius: 999px; font-size: 13px; letter-spacing: .04em; position: relative; }
.nxlive b::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--t); opacity: 0; animation: nxpulse 2s ease-out infinite; }
@keyframes nxpulse { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.3); } }
.nxlive.sm { margin: 0; }
.nxavs { display: inline-flex; }
.nxavs i { width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--sans); font-style: normal; color: #fff; border: 2px solid #1a1a1c;
  background: radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 60%), hsl(var(--h) 55% 32%)); }
.nxavs i:first-child { margin-left: 0; }
.nxavs.xs i { width: 22px; height: 22px; font-size: 9.5px; }
.nxbug { display: flex; align-items: center; justify-content: center; gap: 16px; }
.nxbug span { display: flex; align-items: center; gap: 8px; font: 400 28px/1 var(--poster); letter-spacing: .03em; }
.nxbug img { width: 40px; height: 40px; background: #fff; border-radius: 50%; padding: 5px; object-fit: contain; }
.nxbug b { font: 400 86px/.9 var(--poster); color: var(--ink); display: flex; gap: 10px; text-shadow: 0 8px 40px rgba(0, 0, 0, .6); }
.nxbug b i { font-style: normal; color: var(--tt); }
.nxjoin { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 12px 10px 22px; border-radius: 999px; border: 1px solid rgba(var(--fg), .22); background: rgba(30, 30, 33, .6); backdrop-filter: blur(16px); font-size: 17px !important; font-weight: 700 !important; }
.nxticker { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--mut); height: 18px; overflow: hidden; }
.nxticker span { display: inline-block; }
.nxticker span.in { animation: nxtick .5s ease both; }
@keyframes nxtick { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.nxwp { margin-top: 22px; }
.nxwp p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--soft); }
.nxwp p b { color: var(--ink); }
.nxwp > div { display: flex; gap: 8px; }
.nxwp button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); background: rgba(30, 30, 33, .6); backdrop-filter: blur(14px); font-weight: 800 !important; font-size: 14.5px !important; }
.nxwp button.on { background: var(--y); color: #111 !important; border-color: var(--y); }
.nxspoil { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px dashed rgba(var(--fg), .4); background: rgba(0, 0, 0, .3); font-size: 13.5px !important; font-weight: 700 !important; }

/* ---- sections ---- */
.nxsec { padding: 26px 0 0; position: relative; }
.nxsh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px 14px; }
.nxsh h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nxsh h2 > span { font-size: 13px; font-weight: 600; color: var(--mut); letter-spacing: 0; }
.nxsh h2 .nxi { width: 22px; height: 22px; color: var(--soft2); }
.nxsh small { color: var(--mut); font-size: 12px; }
.nxrail { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 4px; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.nxrail > * { scroll-snap-align: start; }
.nxhint { display: flex; gap: 6px; align-items: center; margin: 10px 20px 0; font-size: 12px; color: var(--mut); }
.nxhint .nxi { color: var(--yt); width: 13px; height: 13px; }
.nxcard.cut { flex: 0 0 186px; border: 0; padding: 0; background: none; text-align: left; display: grid; gap: 8px; animation: nxin .35s ease both; animation-delay: calc(var(--i) * 40ms); }
@keyframes nxin { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.nxcard .th { position: relative; height: 112px; border-radius: 16px; background-size: cover; background-position: center; border: 1px solid var(--ln); overflow: hidden; }
.nxcard .th em { position: absolute; left: 8px; top: 8px; font: 800 10.5px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: rgba(0, 0, 0, .65); padding: 5px 7px; border-radius: 6px; }
.nxcard .th em.lv { background: var(--t); color: #00211F; }
.nxcard .th i { position: absolute; right: 8px; bottom: 8px; font: 800 11.5px/1 var(--sans); font-style: normal; background: rgba(0, 0, 0, .7); padding: 5px 7px; border-radius: 6px; }
.nxcard b { font-size: 14.5px; line-height: 1.3; font-weight: 700; }
.nxhab { flex: 0 0 158px; text-align: left; padding: 16px; border-radius: 22px; border: 1px solid var(--ln); background: linear-gradient(160deg, rgba(var(--fg), .07), rgba(var(--fg), .02)); display: grid; gap: 4px; }
.nxhab .ring { --p: .5; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; color: var(--yt);
  background: radial-gradient(closest-side, #19191c 78%, transparent 80% 100%), conic-gradient(var(--y) calc(var(--p) * 100%), rgba(var(--fg), .12) 0); }
.nxhab .ring .nxi { width: 18px; height: 18px; }
.nxhab b { font-size: 16.5px; font-weight: 800; }
.nxhab small { font-size: 13px; color: var(--mut); }

/* orbit around the match */
.nxsec.orbit { padding-bottom: 6px; }
.nxorbit { position: relative; height: 380px; margin: 0 8px; }
.nxorbit .rings, .nxmine .rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.nxorbit .rings i, .nxmine .rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--fg), .1); }
.nxorbit .rings i:nth-child(1) { width: 160px; height: 160px; } .nxorbit .rings i:nth-child(2) { width: 260px; height: 260px; } .nxorbit .rings i:nth-child(3) { width: 360px; height: 360px; } .nxorbit .rings i:nth-child(4) { width: 460px; height: 460px; }
.nxorbit .core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%); border-radius: 26px; border: 2px solid var(--t); padding: 0; overflow: hidden; background: #111; box-shadow: 0 0 0 6px rgba(0, 204, 199, .12), 0 20px 50px -16px rgba(0, 204, 199, .6); z-index: 2; }
.nxorbit .core .th { position: absolute; inset: 0; background-size: cover; background-position: center; animation: nxkb 12s ease-in-out infinite alternate; }
.nxorbit .core::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .85)); }
.nxorbit .core em { position: absolute; z-index: 1; left: 8px; top: 8px; font: 800 10.5px/1 var(--sans); font-style: normal; padding: 4px 7px; border-radius: 99px; background: rgba(0, 0, 0, .6); }
.nxorbit .core em.lv { background: var(--t); color: #00211F; }
.nxorbit .core b { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; font-size: 12.5px; line-height: 1.15; font-weight: 800; text-align: left; }
.nxorbit .sats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: nxspin 60s linear infinite; }
.nxorbit .sat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; width: 100px; animation: nxspin 60s linear infinite reverse; }
.nxorbit .sat .th { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center 25%; border: 2px solid rgba(var(--fg), .25); box-shadow: 0 10px 24px -10px #000; }
.nxorbit .sat b { font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center; }
.nxorbit .sat small { font-size: 11.5px; color: var(--mut); }
@keyframes nxspin { to { rotate: 360deg; } }

/* creators */
.nxillus + * { margin-top: 0; }
.nxrail.wide > * { flex: 0 0 306px; }
.nxcre { border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--ln); padding-bottom: 6px; }
.nxcre .band { position: relative; width: 100%; height: 100px; border: 0; padding: 0 16px 10px; display: flex; align-items: flex-end; gap: 8px; color: #141414 !important; background: linear-gradient(180deg, #232326 0 46%, var(--band) 46%); text-align: left; }
.nxcre .band .cut { position: absolute; left: 14px; top: 4px; border-radius: 50%; box-shadow: 0 0 0 3px var(--band); }
.nxcre .band .nm { display: grid; margin-left: 78px; }
.nxcre .band .nm b { font-size: 19px; font-weight: 800; line-height: 1.1; }
.nxcre .band .nm span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.nxcre .band .ver { width: 16px; height: 16px; color: #141414; }
.nxcre .row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; border: 0; background: none; text-align: left; }
.nxcre .row .th { position: relative; height: 66px; border-radius: 12px; background-size: cover; background-position: center; display: grid; place-items: center; }
.nxcre .row .nxpl { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.nxcre .row b { display: block; font-size: 15px; line-height: 1.25; font-weight: 700; }
.nxcre .row small { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--mut); font-size: 12.5px; }
.nxsec .nxillus { padding: 0 20px; }
.nxsh .nxillus { padding: 0; margin: 0; }

/* chips and tables */
.nxchips { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 14px; scrollbar-width: none; }
.nxchips button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); font-weight: 800 !important; font-size: 14.5px !important; }
.nxchips button img { width: 24px; height: 24px; background: #fff; border-radius: 50%; padding: 3px; object-fit: contain; }
.nxchips button .nxi { width: 20px; height: 20px; }
.nxchips button.on { background: rgba(var(--fg), .16); border-color: rgba(var(--fg), .3); }
.nxchips button.lvc i { width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px rgba(0, 204, 199, .25); }
.nxchips button.lvc.on { background: var(--t); color: #00211F !important; }
.nxtable { margin: 0 20px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); overflow: hidden; font-size: 15px; }
.nxtable .hd, .nxtable .tr { display: grid; grid-template-columns: 1fr 22px 22px 22px 22px 30px 30px; gap: 4px; align-items: center; padding: 0 14px; }
.nxtable .hd { height: 40px; font-size: 12.5px; color: var(--mut); }
.nxtable .hd span:not(:first-child), .nxtable .tr span:not(:first-child) { text-align: center; }
.nxtable .tr { height: 50px; border-top: 1px solid rgba(var(--fg), .06); }
.nxtable .tr.me { background: rgba(255, 210, 48, .08); box-shadow: inset 3px 0 var(--y); }
.nxtable .tr span:first-child { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.nxtable em { font-style: normal; width: 14px; color: var(--mut); font-weight: 700; }
.nxtable img, .nxtable .tr i { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.nxtable img { background: #fff; padding: 3px; object-fit: contain; }
.nxtable .tr i { display: grid; place-items: center; font: 800 8px/1 var(--sans); font-style: normal; background: hsl(var(--h) 55% 40%); }
.nxtable .nxillus { padding: 0 14px 10px; }

/* athlete spotlight */
.nxsec.spot { height: 560px; margin-top: 18px; overflow: hidden; }
.nxglow { position: absolute; left: 50%; top: 40px; width: 420px; height: 420px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(149, 82, 255, .55), rgba(149, 82, 255, 0) 65%); }
.nxsec.spot .hero { position: absolute; left: 50%; top: 66px; width: 300px; height: 380px; transform: translateX(-50%); background-size: cover; background-position: center 15%;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 35%, #000 55%, transparent 80%); mask-image: radial-gradient(ellipse 70% 75% at 50% 35%, #000 55%, transparent 80%); }
.nxsh.over { position: relative; z-index: 2; }
.nxsec.spot .fan { position: absolute; left: 0; right: 0; bottom: 70px; height: 230px; }
.nxsec.spot .fan button { position: absolute; bottom: 0; left: calc(50% - 70px + (var(--i) - 1) * 112px); width: 140px; height: 210px; border-radius: 18px; border: 2px solid rgba(var(--fg), .5); background-size: cover; background-position: center 20%;
  transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * 0px)); box-shadow: 0 20px 40px -14px #000; display: flex; align-items: flex-end; padding: 10px; text-align: left; transition: transform .25s; }
.nxsec.spot .fan button:nth-child(2) { z-index: 2; transform: translateY(-14px) scale(1.05); }
.nxsec.spot .fan button::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .8)); }
.nxsec.spot .fan b { position: relative; z-index: 1; font-size: 13px; font-weight: 800; line-height: 1.2; }
.nxsec.spot > .nxpill { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); }

.nxlist { display: grid; gap: 10px; padding: 0 20px; }
.nxstory { display: grid; grid-template-columns: 136px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); text-align: left; }
.nxstory .th { height: 92px; border-radius: 14px; background-size: cover; background-position: center; }
.nxstory small { color: var(--yt); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nxstory b { display: block; font-size: 15px; line-height: 1.28; margin: 3px 0 6px; font-weight: 700; }
.nxstory em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; color: var(--mut); }

/* ---- toast ---- */
.nxtoast { position: absolute; z-index: 60; left: 20px; right: 20px; top: 70px; padding: 13px 16px; border-radius: 16px; background: rgba(250, 250, 250, .96); color: #111; font-size: 14px; font-weight: 700; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .2s, transform .25s; }
.nxtoast.on { opacity: 1; transform: none; }

/* ---- the picker ---- */
.nxpick { position: absolute; inset: 0; display: flex; flex-direction: column; background: radial-gradient(120% 70% at 70% 30%, #1d1d22, #09090a 70%); padding-bottom: 18px; }
.nxpick h1 { margin: 6px 20px 4px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.nxpick > p { margin: 0 20px; color: var(--mut); font-size: 14.5px; line-height: 1.45; }
.nxconst { position: relative; flex: 1; min-height: 200px; margin: 4px 16px 0; }
.nxconst .cb { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; transition: left .5s cubic-bezier(.3, 1.3, .5, 1), top .5s cubic-bezier(.3, 1.3, .5, 1), opacity .3s; }
.nxconst .cb .nxbadge { --s: var(--d); transition: width .45s cubic-bezier(.3, 1.4, .5, 1), height .45s cubic-bezier(.3, 1.4, .5, 1); }
.nxconst .cb > b { font-size: 12px; font-weight: 800; white-space: nowrap; text-shadow: 0 2px 8px #000; }
.nxconst .cb.big > b { font-size: 14px; }
.nxconst .cb.out { opacity: 0; }
.nxmarq { flex: none; display: grid; gap: 10px; margin: 6px 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nxmarq .row { overflow: hidden; }
.nxmarq .mtrack { display: flex; gap: 8px; width: max-content; animation: nxmarq 40s linear infinite; }
.nxmarq .row.r1 .mtrack { animation-duration: 46s; animation-direction: reverse; }
.nxmarq .row.r2 .mtrack { animation-duration: 52s; }
.nxmarq .row.r3 .mtrack { animation-duration: 44s; animation-direction: reverse; }
.nxmarq:hover .mtrack, .nxmarq:focus-within .mtrack { animation-play-state: paused; }
@keyframes nxmarq { to { transform: translateX(-50%); } }
.nxmarq button { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); background: rgba(20, 20, 22, .8); font-weight: 800 !important; font-size: 14.5px !important; white-space: nowrap; }
.nxmarq button img { width: 22px; height: 22px; background: #fff; border-radius: 50%; padding: 2px; object-fit: contain; }
.nxmarq button i { display: none; gap: 2px; }
.nxmarq button.lv1, .nxmarq button.lv2, .nxmarq button.lv3 { background: #3a3a40; border-color: rgba(var(--fg), .35); }
.nxmarq button.lv1 i, .nxmarq button.lv2 i, .nxmarq button.lv3 i { display: inline-flex; width: 6px; height: 6px; border-radius: 50%; background: var(--y); box-shadow: 9px 0 0 rgba(255, 210, 48, .25), 18px 0 0 rgba(255, 210, 48, .25); margin-right: 18px; }
.nxmarq button.lv2 i { box-shadow: 9px 0 0 var(--y), 18px 0 0 rgba(255, 210, 48, .25); }
.nxmarq button.lv3 i { box-shadow: 9px 0 0 var(--y), 18px 0 0 var(--y); }

/* ---- live companion ---- */
.nxlivescr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.nxlhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; flex: none; }
.nxplayer { position: relative; margin: 0 12px; aspect-ratio: 16 / 9.4; border-radius: 22px; overflow: hidden; border: 1px solid var(--ln); flex: none; }
.nxplayer .sb { position: absolute; z-index: 2; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); font: 800 12px/1 var(--sans); }
.nxplayer .sb span { color: #fff; background: var(--t); color: #00211F; padding: 2px 5px; border-radius: 4px; }
.nxplayer .sb em { font-style: normal; color: var(--tt); margin-left: 4px; font-variant-numeric: tabular-nums; }
.nxplayer .ctl { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; }
.nxplayer .ctl button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 0; }
.nxplayer .ctl button .nxi { width: 22px; height: 22px; }
.nxplayer .ctl button.big { width: 62px; height: 62px; }
.nxplayer .ctl span { width: 46px; }
.nxplayer .bar { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 10px; font: 800 11.5px/1 var(--sans); }
.nxplayer .bar i { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--t) 97%, rgba(var(--fg), .3) 0); }
.nxplayer .ovl { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 30px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(0, 204, 199, .5); background: rgba(10, 30, 30, .75); backdrop-filter: blur(12px); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; animation: nxin .4s ease both; }
.nxplayer .ovl > span { display: flex; grid-row: span 2; }
.nxplayer .ovl > span .nxbadge + .nxbadge { margin-left: -10px; }
.nxplayer .ovl b { font-size: 14px; }
.nxplayer .ovl p { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--soft); }
.nxplayer .ovl p em { font: 800 14px/1 var(--sans); font-style: normal; color: #fff; }
.nxplayer .ovl p i { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--t) calc(var(--a) * 100%), rgba(var(--fg), .15) 0); direction: rtl; }
.nxplayer .ovl p i.r { direction: ltr; background: linear-gradient(90deg, #8FA6FF calc(var(--a) * 100%), rgba(var(--fg), .15) 0); }
.nxtvbar { margin: 0 12px; display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 18px; border: 1px solid rgba(0, 204, 199, .45); background: linear-gradient(90deg, rgba(0, 204, 199, .14), rgba(0, 204, 199, .04)); flex: none; }
.nxtvbar .th { position: relative; height: 56px; border-radius: 12px; overflow: hidden; }
.nxtvbar b { display: block; font-size: 14.5px; font-weight: 800; }
.nxtvbar small { font-size: 12px; color: #BDE9E7; }
.nxtvbar > button { border: 1px solid var(--ln); background: rgba(var(--fg), .08); border-radius: 999px; padding: 8px 12px; font-size: 12.5px !important; font-weight: 800 !important; }
.nxlayers { display: flex; gap: 8px; overflow-x: auto; padding: 14px 12px 12px; flex: none; scrollbar-width: none; }
.nxlayers button { flex: none; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); font-weight: 800 !important; font-size: 14.5px !important; position: relative; }
.nxlayers button.on { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(110deg, var(--y), #FF8AD8 45%, var(--t)) border-box; border: 2px solid transparent; }
.nxlbody { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 20px; scrollbar-width: none; }
.nxlnote { display: flex; gap: 7px; align-items: flex-start; margin: 2px 4px 12px; font-size: 12.5px; color: var(--mut); line-height: 1.4; }
.nxlnote .nxi { color: var(--yt); width: 13px; height: 13px; margin-top: 2px; }
.nxmoments { list-style: none; margin: 0; padding: 0; position: relative; }
.nxmoments::before { content: ""; position: absolute; left: 51px; top: 8px; bottom: 8px; width: 2px; background: rgba(var(--fg), .1); }
.nxmoments li { display: grid; grid-template-columns: 40px 24px 1fr; gap: 0; padding: 0 0 18px; }
.nxmoments .t { font: 800 13px/20px var(--sans); color: var(--mut); text-align: right; padding-right: 8px; }
.nxmoments .dot { width: 12px; height: 12px; margin: 4px 0 0 5px; border-radius: 50%; background: #55555a; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.nxmoments .k-goal .dot { background: var(--t); box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--t); }
.nxmoments .k-card .dot { background: var(--y); border-radius: 2px; }
.nxmoments .k-goal b { color: var(--tt); }
.nxmoments b { font-size: 15px; line-height: 1.35; font-weight: 700; }
.nxmoments .mclip { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; width: 100%; height: 132px; border-radius: 16px; border: 1px solid var(--ln); background-size: cover; background-position: center 30%; padding: 10px; position: relative; overflow: hidden; }
.nxmoments .mclip .nxi { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.nxmoments .mclip i:not(.nxi) { font: 800 12px/1 var(--sans); font-style: normal; background: rgba(0, 0, 0, .65); padding: 5px 7px; border-radius: 6px; }
.nxcardx { border-radius: 22px; border: 1px solid var(--ln); background: var(--card); padding: 16px 0 14px; margin-bottom: 12px; }
.nxcardx .nxsh { padding: 0 16px 12px; }
.nxcardx .nxsh h2 { font-size: 19px; }
.nxseg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(var(--fg), .06); border: 1px solid var(--ln); }
.nxseg button { border: 0; background: none; padding: 7px 12px; border-radius: 999px; font-size: 12.5px !important; font-weight: 800 !important; color: var(--mut) !important; }
.nxseg button.on { background: var(--ink); color: var(--bg) !important; }
.nxseg.wide { display: flex; margin: 0 0 12px; }
.nxseg.wide button { flex: 1; padding: 10px; font-size: 14px !important; }
.nxstep { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; margin: 0 16px 12px; height: 56px; padding: 0 4px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .03); text-align: center; }
.nxstep b { font-size: 16px; font-weight: 800; }
.nxstep button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ln); background: rgba(var(--fg), .04); display: grid; place-items: center; padding: 0; }
.nxpitch { display: block; width: calc(100% - 32px); margin: 0 16px; height: auto; }
.nxpitch .pf { fill: #0E2A1B; }
.nxpitch .hm circle { mix-blend-mode: screen; animation: nxhm .6s ease both; }
@keyframes nxhm { from { opacity: 0; } }
.nxpitch .ln * { fill: none; stroke: rgba(var(--fg), .45); stroke-width: 1.2; }
.nxpitch text { fill: rgba(var(--fg), .6); font: 700 9px var(--sans); }
.nxlegend { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--mut); }
.nxlegend i { width: 140px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #2EC27E, #FFD230, #FF3B1F); }
.nxbar { display: grid; grid-template-columns: 34px 1fr auto 1fr 34px; gap: 8px; align-items: center; padding: 6px 16px; font-size: 14px; }
.nxbar > b:first-child { text-align: left; } .nxbar > b:last-child { text-align: right; }
.nxbar em { font-style: normal; font-size: 13px; color: var(--soft); text-align: center; min-width: 104px; }
.nxbar span { height: 9px; border-radius: 9px; background: rgba(var(--fg), .06); display: flex; overflow: hidden; }
.nxbar span.l { justify-content: flex-end; }
.nxbar span i { display: block; height: 100%; border-radius: 9px; background: var(--t); }
.nxbar span.r i { background: #8FA6FF; }
.nxcardx .nxillus { padding: 0 16px; }
.nxrail.xi { padding: 0 0 12px; gap: 6px; }
.nxrail.xi button { flex: 0 0 64px; border: 0; background: none; padding: 4px 0; display: grid; justify-items: center; gap: 3px; border-radius: 14px; }
.nxrail.xi button.on { background: rgba(var(--fg), .08); }
.nxrail.xi b { font-size: 11.5px; font-weight: 800; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxrail.xi small { font-size: 10px; color: var(--mut); }
.sh { width: 42px; height: 46px; display: grid; place-items: center; font: 400 20px/1 var(--poster); clip-path: polygon(22% 0, 78% 0, 100% 16%, 90% 36%, 82% 30%, 82% 100%, 18% 100%, 18% 30%, 10% 36%, 0 16%); }
.sh.eng { background: #F3F3F3; color: #0A1F44; }
.sh.ned { background: #F36C21; color: #fff; }
.sh.big { width: 52px; height: 58px; font-size: 26px; }
.nxplayercard { border-radius: 24px; border: 1px solid var(--ln); background: var(--card); overflow: hidden; padding-bottom: 14px; }
.nxplayercard .top { position: relative; padding: 16px; min-height: 176px; background-size: cover; background-position: center 30%; display: grid; align-content: end; gap: 2px; }
.nxplayercard .top::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .1), rgba(20, 20, 22, .96)); }
.nxplayercard .top > * { position: relative; }
.nxplayercard .top .sh { position: absolute; top: 14px; left: 14px; }
.nxplayercard h3 { margin: 0; font: 400 34px/1 var(--poster); text-transform: uppercase; }
.nxplayercard .top small { color: var(--soft); font-size: 13px; }
.nxplayercard .top .nxbtn { position: absolute; right: 14px; bottom: 16px; }
.nxplayercard h4 { margin: 16px 16px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.nxkv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; }
.nxkv span { padding: 10px 6px; border-radius: 14px; background: rgba(var(--fg), .05); text-align: center; display: grid; gap: 3px; }
.nxkv b { font: 400 24px/1 var(--poster); color: var(--tt); }
.nxkv small { font-size: 10.5px; color: var(--mut); }
.nxfilm { display: flex; align-items: flex-end; gap: 10px; width: calc(100% - 32px); margin: 0 16px; height: 120px; padding: 12px; border-radius: 16px; border: 1px solid var(--ln); background-size: cover; background-position: center 30%; position: relative; text-align: left; overflow: hidden; }
.nxfilm::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.nxfilm > * { position: relative; }
.nxfilm .nxi { width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: var(--y); color: #111; }
.nxfilm b { display: block; font-size: 15px; } .nxfilm small { font-size: 12px; color: var(--soft); }
.nxplayercard .nxillus { padding: 0 16px; }
.nxroom { border-radius: 22px; padding: 16px; margin-bottom: 14px; border: 1px solid rgba(0, 204, 199, .45); background: linear-gradient(160deg, rgba(0, 204, 199, .16), rgba(0, 204, 199, .03)); }
.nxroom .k { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt); }
.nxroom h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; }
.nxroom .opts, .nxdq { display: grid; gap: 8px; }
.nxroom .opts { grid-template-columns: 1fr 1fr; }
.nxroom .opts button, .nxdq > button:not(.nxbtn) { height: 50px; border-radius: 14px; border: 1px solid rgba(var(--fg), .25); background: rgba(0, 0, 0, .25); font-weight: 800 !important; font-size: 15px !important; }
.res { position: relative; height: 50px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(var(--fg), .06); font-weight: 800; font-size: 14.5px; }
.res i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--fg), .12); animation: nxgrow .7s cubic-bezier(.2, .8, .3, 1) both; }
.res.me i { background: rgba(255, 210, 48, .35); }
.res span, .res b { position: relative; }
@keyframes nxgrow { from { width: 0 !important; } }
.nxroom .m { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: #CFEFEE; }
.nxchat { display: grid; gap: 12px; padding-bottom: 80px; }
.nxmsg { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; }
.nxmsg.in { animation: nxin .45s ease both; }
.nxmsg .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--sans); background: radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 60%), hsl(var(--h) 55% 30%)); }
.nxmsg p { margin: 0; font-size: 14.5px; line-height: 1.4; }
.nxmsg p b { margin-right: 6px; font-size: 13px; color: var(--soft2); }
.nxvote { display: inline-flex; align-items: center; height: 36px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); }
.nxvote button { width: 32px; height: 34px; border: 0; background: none; padding: 0; display: grid; place-items: center; color: var(--mut); }
.nxvote button .nxi { width: 16px; height: 16px; }
.nxvote b { font-size: 13px; font-weight: 800; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.nxvote.up { border-color: rgba(255, 210, 48, .6); } .nxvote.up b, .nxvote.up button:first-child { color: var(--yt); }
.nxvote.dn { border-color: rgba(143, 166, 255, .6); } .nxvote.dn b, .nxvote.dn button:last-child { color: #8FA6FF; }
.nxvote.sm { height: 28px; } .nxvote.sm button { width: 24px; height: 26px; } .nxvote.sm .nxi { width: 13px; height: 13px; } .nxvote.sm b { font-size: 12px; }
.nxreactbar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 10px 12px 16px; background: linear-gradient(rgba(11, 11, 12, 0), var(--bg) 30%); }
.nxreactbar > button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ln); background: rgba(var(--fg), .06); font-size: 18px; padding: 0; flex: none; }
.nxreactbar form { flex: 1; min-width: 0; }
.nxreactbar input { width: 100%; height: 40px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .06); color: var(--ink); padding: 0 14px; font: 600 14px var(--sans); }
.nxreactbar .fly { position: absolute; left: 12px; right: 40%; bottom: 60px; height: 300px; pointer-events: none; }
.nxreactbar .fly span { position: absolute; bottom: 0; font-size: 26px; animation: nxfly 2.4s ease-out forwards; }
@keyframes nxfly { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translate(0, -30px) scale(1.15); } 100% { transform: translate(var(--dx), -280px) scale(.9); opacity: 0; } }
.nxaudio { display: grid; gap: 8px; }
.nxaudio button { display: grid; grid-template-columns: 40px 1fr 22px; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); text-align: left; }
.nxaudio button > .nxi { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(var(--fg), .07); }
.nxaudio b { display: block; font-size: 15px; } .nxaudio small { font-size: 12.5px; color: var(--mut); }
.nxaudio .rad { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(var(--fg), .35); }
.nxaudio button.on { border-color: var(--t); background: rgba(0, 204, 199, .08); }
.nxaudio button.on .rad { border: 6px solid var(--t); }

/* ---- drops ---- */
.nxdrops { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; background: #000; }
.nxdtabs { position: sticky; top: 0; z-index: 10; height: 0; display: flex; justify-content: center; gap: 4px; }
.nxdtabs button { margin-top: 16px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .35); backdrop-filter: blur(10px); font-weight: 700 !important; font-size: 14px !important; color: rgba(var(--fg), .75) !important; display: inline-flex; align-items: center; gap: 6px; }
.nxdtabs button.on { color: #fff !important; background: rgba(var(--fg), .18); }
.nxdtabs button i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.nxdrop { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; align-items: flex-end; }
.nxdrop .nxfoot .nxfr { animation-play-state: paused; }
.nxdrop.play .nxfoot .nxfr { animation-play-state: running; }
.nxdrop .shade { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .9) 88%); }
.nxdrop.k-poll .shade, .nxdrop.k-quiz .shade { background: linear-gradient(rgba(0, 0, 0, .55), rgba(var(--bgc), .92) 60%); }
.nxdrop .prog { position: absolute; z-index: 3; left: 14px; right: 14px; top: 62px; height: 3px; border-radius: 3px; background: rgba(var(--fg), .25); overflow: hidden; }
.nxdrop .prog i { display: block; height: 100%; width: 0; background: #fff; }
.nxdrop.play .prog i { animation: nxprog 14s linear infinite; }
@keyframes nxprog { to { width: 100%; } }
.nxdtx { position: relative; z-index: 3; padding: 0 84px 120px 18px; }
.nxdtx .src { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--soft); }
.nxdtx .src .lv { background: var(--t); color: #00211F; padding: 3px 7px; border-radius: 5px; font-size: 11px; }
.nxdtx h3 { margin: 0 0 14px; font: 400 36px/1 var(--poster); text-transform: uppercase; }
.nxdrail { position: absolute; z-index: 3; right: 10px; bottom: 120px; display: grid; gap: 14px; justify-items: center; }
.nxdrail > button { border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; }
.nxdrail > button .nxi { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: rgba(0, 0, 0, .4); backdrop-filter: blur(10px); }
.nxdrail .em { width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .4); backdrop-filter: blur(10px); display: grid; place-items: center; font-size: 16px; letter-spacing: -4px; }
.nxdrail small { font-size: 11.5px; font-weight: 800; }
.nxvote.v { flex-direction: column; height: auto; width: 46px; padding: 4px 0; background: rgba(0, 0, 0, .4); backdrop-filter: blur(10px); border-radius: 26px; }
.nxvote.v b { font-size: 11px; }
.nxdrop .dur { position: absolute; z-index: 3; right: 16px; top: 74px; font: 800 11.5px/1 var(--sans); background: rgba(0, 0, 0, .5); padding: 4px 7px; border-radius: 6px; }
.nxdq { position: relative; z-index: 3; width: 100%; padding: 0 18px 120px; }
.nxdq .k { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--yt); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nxdq h3 { margin: 0 0 14px; font: 400 40px/1 var(--poster); text-transform: uppercase; }
.nxdq .m { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; color: var(--soft); }
.nxdq .m .nxi { color: #FFB23F; width: 15px; height: 15px; }
.nxdq ol { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: c; }
.nxdq li { padding: 14px 16px 14px 46px; border-radius: 14px; border: 1px dashed rgba(var(--fg), .25); color: var(--mut); font-weight: 700; position: relative; counter-increment: c; }
.nxdq li::before { content: counter(c); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--fg), .1); display: grid; place-items: center; font-size: 12px; }
.nxdq li.on { border-style: solid; color: #fff; background: rgba(var(--fg), .06); animation: nxin .4s ease both; }
.nxdq li.on::before { background: var(--y); color: #111; }

/* ---- scores ---- */
.nxtitle { position: relative; padding: 4px 20px 16px; }
.nxtitle h1 { margin: 0; font: 400 46px/1 var(--poster); text-transform: uppercase; }
.nxtitle h1 span { color: var(--yt); font-size: 28px; }
.nxtitle p { margin: 8px 0 0; color: var(--mut); font-size: 14px; line-height: 1.45; max-width: 290px; }
.nxtitle .nxpill { position: absolute; right: 20px; top: 8px; }
.nxdays { display: flex; gap: 6px; overflow-x: auto; padding: 0 20px 14px; scrollbar-width: none; }
.nxdays button { flex: 0 0 58px; height: 70px; border-radius: 18px; border: 1px solid var(--ln); background: rgba(var(--fg), .03); display: grid; align-content: center; justify-items: center; gap: 2px; position: relative; }
.nxdays small { font-size: 11.5px; color: var(--mut); font-weight: 700; }
.nxdays b { font: 400 24px/1 var(--poster); }
.nxdays i { position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--y); }
.nxdays button.on { background: var(--ink); color: var(--bg); } .nxdays button.on small { color: #555; }
.nxsgroup { padding: 4px 20px 10px; }
.nxsgroup h2 { margin: 6px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--mut); }
.nxsgroup .nxtable { margin: 0; }
.nxsrow { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 14px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); margin-bottom: 8px; position: relative; overflow: hidden; }
.nxsrow.live { border-color: rgba(0, 204, 199, .5); background: linear-gradient(110deg, rgba(0, 204, 199, .13), var(--card) 60%); }
.nxsrow .when { display: grid; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--soft); }
.nxsrow .when .lv { justify-self: start; background: var(--t); color: #00211F; padding: 3px 6px; border-radius: 5px; font-size: 10.5px; }
.nxsrow .m { display: grid; gap: 2px; min-width: 0; }
.nxsrow .m small { font-size: 11.5px; color: var(--mut); }
.nxsrow .m b { font-size: 16px; font-weight: 800; }
.nxsrow .m em { font-style: normal; font-size: 12.5px; color: var(--soft2); }
.nxsrow .you { font-style: normal; justify-self: start; margin-top: 5px; font-size: 11px; font-weight: 800; color: var(--yt); background: rgba(255, 210, 48, .12); padding: 3px 8px; border-radius: 99px; }
.nxspark { position: absolute; right: 14px; bottom: 8px; width: 82px; height: 20px; opacity: .6; }
.nxspark polyline { fill: none; stroke: var(--t); stroke-width: 1.6; }
.nxempty { margin: 20px; padding: 24px; border-radius: 20px; border: 1px dashed var(--ln); color: var(--mut); text-align: center; font-size: 14px; line-height: 1.5; }

/* ---- my sport ---- */
.nxmine { position: relative; height: 340px; margin: 0 16px 6px; }
.nxmine .rings i:nth-child(1) { width: 150px; height: 150px; } .nxmine .rings i:nth-child(2) { width: 250px; height: 250px; } .nxmine .rings i:nth-child(3) { width: 350px; height: 350px; }
.nxmine .me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; font-weight: 800; font-size: 20px; color: #1A1200; background: linear-gradient(135deg, #FFD230, #FF8A3D); box-shadow: 0 0 0 8px rgba(255, 210, 48, .12); }
.nxmine .me small { font-size: 10px; font-weight: 800; }
.nxmine .b { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; animation: nxbob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes nxbob { 50% { translate: 0 -6px; } }
.nxmine .b > b { font-size: 11.5px; font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.nxmine .b em { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--y); color: #111; font: 800 11px/20px var(--sans); font-style: normal; text-align: center; box-shadow: 0 0 0 3px var(--bg); }
.nxsched { display: grid; grid-template-columns: 56px auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); }
.nxspacebody .nxsched { grid-template-columns: 56px 1fr auto; margin-bottom: 8px; }
.nxsched.live { border-color: rgba(0, 204, 199, .55); background: linear-gradient(110deg, rgba(0, 204, 199, .14), var(--card) 60%); }
.nxsched .d { display: grid; gap: 2px; }
.nxsched .d small { font-size: 11.5px; color: var(--mut); font-weight: 700; }
.nxsched .d b { font: 400 21px/1 var(--poster); }
.nxsched.live .d b { color: var(--tt); font-size: 17px; }
.nxsched .m { display: grid; gap: 2px; min-width: 0; }
.nxsched .m b { font-size: 15px; font-weight: 800; }
.nxsched .m small { font-size: 12.5px; color: var(--mut); }
.nxsched .res { width: 40px; height: 40px; border-radius: 12px; padding: 0; justify-content: center; font: 400 20px/1 var(--poster); }
.nxsched .res.rW { background: rgba(46, 194, 126, .2); color: #5BE39E; } .nxsched .res.rL { background: rgba(255, 90, 80, .18); color: #FF8B82; } .nxsched .res.rD { background: rgba(var(--fg), .1); }
.nxspacebody .nxsched .res { grid-row: span 1; }
.nxpost { margin: 0 20px 12px; padding: 16px; border-radius: 22px; border: 1px solid var(--ln); background: var(--card); }
.nxspacebody .nxpost { margin: 0 0 12px; }
.nxpost.new { border-color: rgba(255, 210, 48, .35); }
.nxpost header { display: flex; align-items: center; gap: 10px; }
.nxpost header .who { display: grid; flex: 1; }
.nxpost header b { font-size: 14px; } .nxpost header small { font-size: 12px; color: var(--mut); }
.nxpost header em { font-style: normal; font: 800 10.5px/1 var(--sans); color: #111; background: var(--y); padding: 4px 7px; border-radius: 5px; }
.nxpost h3 { margin: 12px 0 10px; font-size: 19px; line-height: 1.25; }
.nxpost .th { display: block; height: 180px; border-radius: 16px; background-size: cover; background-position: center 30%; margin-bottom: 10px; }
.nxpost p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--soft2); }
.nxtalk { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.nxrx { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); font-size: 13px !important; font-weight: 800 !important; }
.nxrx .nxi { width: 15px; height: 15px; }
.nxrx.on { border-color: rgba(255, 210, 48, .6); background: rgba(255, 210, 48, .12); color: var(--yt) !important; }

/* ---- spaces ---- */
.nxspacehero { position: relative; height: 470px; display: flex; align-items: flex-end; overflow: hidden; }
.nxspacehero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 25%, rgba(var(--bgc), .6) 60%, var(--bg)); z-index: 1; }
.nxspacehero .tx { position: relative; z-index: 3; padding: 0 20px 18px; width: 100%; }
.nxspacehero .tx > .nxbadge { margin-bottom: 12px; box-shadow: 0 10px 30px -8px #000; }
.nxspacehero h1 { display: flex; align-items: center; gap: 10px; }
.nxspacehero h1 .ver { width: 28px; height: 28px; color: var(--yt); }
.nxstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 6px 20px 14px; }
.nxstrip span { display: grid; gap: 1px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--ln); background: rgba(var(--fg), .04); min-width: 0; }
.nxstrip small { font-size: 11px; color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.nxstrip b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxstrip em { font-style: normal; font-size: 12px; color: var(--soft2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxstabs { position: sticky; top: 0; z-index: 8; display: flex; gap: 6px; overflow-x: auto; padding: 10px 20px; background: rgba(var(--bgc), .92); backdrop-filter: blur(16px); scrollbar-width: none; }
.nxstabs button { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ln); background: none; font-weight: 800 !important; font-size: 14px !important; color: var(--mut) !important; }
.nxstabs button.on { background: var(--y); color: #111 !important; border-color: var(--y); }
.nxspacebody { padding: 12px 20px 0; }
.nxspacebody .nxtable { margin: 0; }
.nxspacebody .nxempty { margin: 0; }
.nxgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nxtile { position: relative; height: 240px; border-radius: 18px; border: 1px solid var(--ln); background-size: cover; background-position: center 25%; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; overflow: hidden; }
.nxtile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .9)); }
.nxtile > * { position: relative; }
.nxtile .nxpl { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.nxtile b { font-size: 14px; line-height: 1.25; } .nxtile small { font-size: 11.5px; color: var(--soft2); margin-top: 4px; }

/* ---- the design notes beside the phone ---- */
.nxnotes { position: sticky; top: 96px; display: grid; gap: 14px; color: #D8D8DC; font-size: 14.5px; line-height: 1.55; padding-top: 10px; }
.nxnotes[hidden] { display: none; }
.nxnotes .k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.nxnotes .k2 { margin: -10px 0 0; font-size: 12px; color: var(--muted); font-weight: 700; }
.nxnotes h2 { margin: 2px 0 0; font-size: 26px; line-height: 1.15; color: #fff; letter-spacing: -.01em; }
.nxnotes p { margin: 0; }
.nxnotes .now { padding: 16px 18px; border-radius: 16px; border: 1px solid #2c2c2c; background: #121214; }
.nxnotes .now h3 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.nxnotes .now p { font-size: 14px; }
.nxnotes .ev { padding: 14px 16px; border-left: 3px solid var(--yellow); background: #121214; border-radius: 0 12px 12px 0; }
.nxnotes .ev p { font-size: 14px; font-style: italic; }
.nxnotes .ev p b { color: var(--yellow); font-style: normal; }
.nxnotes .ev small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.nxnotes .ev.n { display: grid; gap: 2px; border-left-color: #00CCC7; }
.nxnotes .ev.n b { font-size: 30px; color: #fff; line-height: 1; }
.nxnotes .ev.n span { font-size: 13.5px; }
.nxnotes .f { font-size: 12.5px; color: var(--muted); }
.nxbig .cap { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #ddd; }
.nxbig .cap .nxi { width: 18px; height: 18px; }
.nxbig .scr { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 8px solid #050505; box-shadow: 0 0 0 1px #2a2a2a, 0 30px 60px -20px #000; filter: grayscale(.9) brightness(.45); transition: filter .4s; }
.nxbig .scr.on { filter: none; }
.nxbig .bug { position: absolute; z-index: 2; left: 8px; top: 8px; font: 800 11px/1 var(--sans); background: rgba(0, 0, 0, .7); padding: 5px 8px; border-radius: 5px; color: #fff; }
.nxbig .bug em { font-style: normal; color: #00CCC7; }
.nxbig .tvvote { position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 46%; display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 30, 30, .82); border: 1px solid rgba(0, 204, 199, .6); color: #fff; animation: nxin .4s ease both; }
.nxbig .tvvote small { font-size: 9.5px; color: #9FE4E2; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.nxbig .tvvote b { font-size: 13px; }
.nxbig .tvvote i { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #00CCC7 var(--w), rgba(255, 255, 255, .2) 0); }
.nxbig .tvvote em { font-style: normal; font-size: 10px; color: #FFD230; font-weight: 800; }
.nxbig .say { position: absolute; z-index: 2; left: 8px; bottom: 8px; max-width: 46%; font-size: 11px; background: rgba(0, 0, 0, .7); padding: 6px 8px; border-radius: 8px; color: #fff; animation: nxin .4s ease both; }
.nxbig .say b { color: #FFD230; }
.nxnotes .nxi { display: inline-grid; width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .nx *, .nx *::before, .nx *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .nxfoot.n2 .nxfr:not(:first-child), .nxfoot.n3 .nxfr:not(:first-child) { opacity: 0; }
}

/* ---- v37: the depth slider, four modes, SB6-style touches ---- */
.nxdial { left: 22px; right: 22px; bottom: 92px; height: 52px; grid-template-columns: 34px 1fr 34px; gap: 10px; padding: 0 9px; }
.nxdial .end { width: 34px; height: 34px; border: 0; background: none; padding: 5px; color: var(--soft); border-radius: 10px; display: grid; place-items: center; }
.nxdial .end svg { width: 22px; height: 22px; }
.nxdial .end:hover { background: rgba(var(--fg), .08); }
.nxdial label { height: 34px; }
.nxdial input { height: 34px; position: relative; z-index: 2; }
.nxdial input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--ink) calc(var(--p, .5) * 100%), rgba(var(--fg), .22) 0); }
.nxdial input::-webkit-slider-thumb { width: 38px; height: 16px; border-radius: 9px; margin-top: -6.5px; background: #E8E8EC; box-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.nxdial input::-moz-range-thumb { width: 38px; height: 16px; border-radius: 9px; background: #E8E8EC; }
.nxdial .ticks { position: absolute; left: 19px; right: 19px; top: 50%; height: 0; pointer-events: none; z-index: 1; }
.nxdial .ticks i { position: absolute; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgba(var(--fg), .35); }
.nxdialtip { top: -34px; left: calc(var(--p) * (100% - 38px) + 19px); font-weight: 600 !important; font-size: 12px !important; background: rgba(250, 250, 250, .96); color: #111; padding: 6px 10px; border-radius: 10px; transition: left .05s; }
.nxdialtip b { font-weight: 800; }
.nxdialtip::after { background: rgba(250, 250, 250, .96); }
.nxhome.morph { animation: nxmorph .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes nxmorph { from { opacity: 0; transform: scale(.965); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* Ask */
.nx[data-mode="ask"] { background: radial-gradient(90% 45% at 15% 100%, rgba(80, 170, 110, .28), transparent 70%), radial-gradient(90% 50% at 90% 95%, rgba(110, 80, 220, .35), transparent 70%), #0B0B0D; }
.nx[data-mode="ask"] .nxhome { background: transparent; }
.nxask { padding: 6px 22px 200px; }
.nxask .lead { margin: 18px 0 10px; font-size: 21px; font-weight: 800; line-height: 1.25; }
.nxask .big { margin: 0; font-size: 33px; line-height: 1.22; font-weight: 300; letter-spacing: -.01em; color: var(--soft); font-family: Georgia, "Times New Roman", serif; }
.nxask .from { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--mut); }
.nxask .from .nxi { color: #A9B8FF; }
.nxask .go { margin: 30px 0 12px; font-size: 18px; font-weight: 800; }
.nxask .go em { font-style: normal; color: #7FA2FF; }
.nxask .qs { display: grid; gap: 10px; justify-items: start; }
.nxask .qs button { padding: 11px 16px; border-radius: 999px; font-size: 15px !important; font-weight: 600 !important; text-align: left;
  border: 1.5px solid transparent; background: linear-gradient(#1A1A1E, #1A1A1E) padding-box, linear-gradient(100deg, #8E7BFF, #6FD3FF 45%, #9BE36B) border-box; animation: nxin .35s ease both; }
.nxask .qa { margin-top: 22px; display: grid; gap: 10px; animation: nxin .35s ease both; }
.nxask .q { justify-self: end; margin: 0; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: #2A2A30; font-size: 15px; font-weight: 600; }
.nxask .a { padding: 14px 16px; border-radius: 4px 18px 18px 18px; background: rgba(var(--fg), .05); border: 1px solid var(--ln); }
.nxask .a p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.nxask .att { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; width: 100%; margin-top: 12px; padding: 6px; border-radius: 14px; border: 1px solid var(--ln); background: rgba(0, 0, 0, .25); text-align: left; }
.nxask .att .th { height: 56px; border-radius: 10px; background-size: cover; background-position: center; display: grid; place-items: center; }
.nxask .att .nxpl { width: 24px; height: 24px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.nxask .att b { display: block; font-size: 14px; } .nxask .att small { font-size: 12px; color: var(--mut); }
.nxask .askf { display: flex; gap: 8px; margin-top: 18px; }
.nxask .askf input { flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .06); color: var(--ink); padding: 0 16px; font: 600 15px var(--sans); }
.nxask .askf button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg) !important; display: grid; place-items: center; }
.nxask .nxillus { margin-top: 12px; }

/* Scan */
.nxscan { padding: 4px 16px 200px; display: grid; gap: 10px; }
.nxscan .hd { margin: 6px 4px 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.nxscan .srow { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; border: 1px solid transparent; background: var(--card2); text-align: left; animation: nxin .3s ease both; animation-delay: calc(var(--i) * 25ms); }
.nxscan .srow.live { border-color: rgba(0, 204, 199, .7); }
.nxscan .th { position: relative; height: 76px; border-radius: 10px; background-size: cover; background-position: center; }
.nxscan .th em { position: absolute; left: 6px; bottom: 6px; font: 800 10px/1 var(--sans); font-style: normal; background: var(--t); color: #00211F; padding: 4px 6px; border-radius: 99px; }
.nxscan .srow b { font-size: 16.5px; line-height: 1.3; font-weight: 600; font-family: Georgia, "Times New Roman", serif; }

/* Immerse */
.nxhome.m-immerse { scroll-snap-type: y mandatory; background: #000; }
.nximm { height: 100%; }
.nximc { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; align-items: flex-end; }
.nximc.live { box-shadow: inset 0 0 0 1.5px rgba(0, 204, 199, .8); border-radius: 18px; }
.nximc .nxfoot .nxfr { animation-play-state: paused; }
.nximc.play .nxfoot .nxfr { animation-play-state: running; }
.nximc .shade { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .9) 85%); }
.nximc .pp { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(40, 40, 44, .55); backdrop-filter: blur(8px); display: grid; place-items: center; }
.nximc .tx { position: relative; z-index: 3; padding: 0 20px 168px; width: 100%; }
.nximc .tx .nxlive { margin: 0 0 12px; }
.nximc .k { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.nximc h2 { margin: 0; font: 400 40px/1 var(--poster); text-transform: uppercase; }
.nximc .s { margin: 8px 0 14px; font-size: 15px; color: var(--soft); }
.nximc .s em { font-style: normal; color: var(--tt); font-weight: 800; }

/* Dive back in: compact glass cards, after the SB6 TV home */
.nxsec.dive { padding-top: 18px; }
.nxsec.dive .nxsh h2 { font-size: 18px; }
.nxdive { flex: 0 0 214px; display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; padding: 7px; border-radius: 14px; border: 1px solid rgba(var(--fg), .14); background: linear-gradient(160deg, rgba(var(--fg), .09), rgba(var(--fg), .03)); text-align: left; }
.nxdive:hover, .nxdive:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.nxdive .th { height: 54px; border-radius: 9px; background-size: cover; background-position: center; }
.nxdive .tx { display: grid; gap: 3px; min-width: 0; }
.nxdive small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--soft2); font-weight: 700; }
.nxdive small .lv { background: var(--t); color: #00211F; padding: 2px 7px; border-radius: 99px; font-size: 10px; letter-spacing: .04em; }
.nxdive b { font-size: 13.5px; line-height: 1.2; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* notes: the spectrum, and the TV in SB6 dress */
.nxnotes .spec p { font-size: 13.5px; color: #C9C9CE; }
.nxnotes .spec ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; }
.nxnotes .spec li { padding: 10px 8px; border-radius: 12px; border: 1px solid #2c2c2c; background: #121214; display: grid; gap: 2px; text-align: center; }
.nxnotes .spec li b { font-size: 14px; color: #fff; } .nxnotes .spec li small { font-size: 11.5px; color: var(--muted); }
.nxnotes .spec li.on { border-color: #fff; background: #1d1d21; }
.nxbig .scr { border-radius: 14px; border-width: 6px; }
.nxbig .tvbbc { position: absolute; z-index: 2; left: 10px; top: 10px; display: flex; gap: 2px; }
.nxbig .tvbbc i { width: 13px; height: 13px; display: grid; place-items: center; background: #fff; color: #000; font: 800 9px/1 var(--sans); font-style: normal; }
.nxbig .bug { left: auto; right: 10px; }
.nxbig .tvlive { position: absolute; z-index: 2; left: 10px; top: 32px; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 999px; background: rgba(20, 20, 24, .7); backdrop-filter: blur(8px); font-size: 10.5px; font-weight: 700; color: #fff; }
.nxbig .tvlive b { background: #00CCC7; color: #00211F; padding: 2px 7px; border-radius: 99px; font-size: 9.5px; }
.nxbig .tvlive .nxavs i { width: 16px; height: 16px; font-size: 7px; border-width: 1.5px; }
@media (prefers-reduced-motion: reduce) { .nxhome.morph { animation: none; } }

/* ---- v38: sport icons, labels that never collide, live for every sport, highlights, athletes ---- */
.nxbadge .emo { font-style: normal; font-size: calc(var(--s) * .52); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.nxbadge.blogo { background: radial-gradient(circle at 35% 30%, #fff, #EDEDED 70%); }
.nxbadge.blogo img { width: 72%; height: 72%; object-fit: contain; }
.nxmarq button .emo { font-size: 18px; line-height: 1; }
.nxmarq button img.lg { background: #fff; padding: 3px; }
.nxmarq button img.ph { padding: 0; object-fit: cover; }
.nxconst .cb { transform: translate(-50%, calc(var(--d) / -2)); }
.nxconst .cb > b { text-align: center; overflow: hidden; text-overflow: ellipsis; }
.nxmine { margin: 0 16px 6px; }
.nxmine .rings { top: -8px; }
.nxmine .me { top: calc(50% - 8px); z-index: 3; }
.nxmine .b { left: auto; top: auto; transform: translateX(-50%); z-index: 2; }
.nxmine .b .bw { position: relative; display: block; }
.nxmine .b > b { display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.nxmine .b em { top: -3px; right: -3px; z-index: 4; }
.nxmine .b:hover .nxbadge, .nxmine .b:focus-visible .nxbadge { box-shadow: 0 0 0 3px #fff; }

/* score rows that open the live page or highlights */
.nxsrow.go { cursor: pointer; transition: transform .15s, border-color .15s; }
.nxsrow.go:hover { border-color: rgba(var(--fg), .3); }
.nxsrow.go:active { transform: scale(.985); }
.nxsrow.go:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.nxsgroup h2 { display: flex; align-items: center; gap: 8px; }

/* radio-led live (cricket, F1) */
.nxradio { position: relative; margin: 0 12px; height: 228px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(0, 204, 199, .45); flex: none; }
.nxradio .nxfoot { filter: blur(3px) brightness(.55) saturate(1.2); transform: scale(1.08); }
.nxradio .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 30, 30, .35), rgba(5, 10, 12, .85)); }
.nxradio .sb { position: absolute; z-index: 2; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); font: 800 12px/1 var(--sans); }
.nxradio .sb span { background: var(--t); color: #00211F; padding: 2px 5px; border-radius: 4px; }
.nxradio .sb em { font-style: normal; color: var(--tt); margin-left: 4px; }
.nxradio .rtx { position: absolute; z-index: 2; left: 16px; right: 16px; top: 50px; }
.nxradio .st { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 800; color: var(--tt); letter-spacing: .04em; text-transform: uppercase; }
.nxradio .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: 4px; }
.nxradio .eq b { width: 3px; background: var(--t); border-radius: 2px; animation: nxeq 1s ease-in-out infinite; }
.nxradio .eq b:nth-child(2) { animation-delay: -.3s; } .nxradio .eq b:nth-child(3) { animation-delay: -.6s; } .nxradio .eq b:nth-child(4) { animation-delay: -.15s; } .nxradio .eq b:nth-child(5) { animation-delay: -.45s; }
@keyframes nxeq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
.nxradio h3 { margin: 6px 0 10px; font: 400 26px/1.05 var(--poster); text-transform: uppercase; }
.nxradio .cc { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.4; min-height: 60px; }
.nxradio .cc span.in { animation: nxtick .5s ease both; display: inline-block; }
.nxradio .ctl { position: absolute; z-index: 2; right: 12px; top: 8px; display: flex; gap: 8px; }
.nxradio .ctl button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 0; }
.nxradio .ctl button .nxi { width: 17px; height: 17px; }
.nxradio .bar { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 10px; font: 800 11.5px/1 var(--sans); }
.nxradio .bar i { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--t) 97%, rgba(var(--fg), .3) 0); }
.nxmoments small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--soft2); }
.nxmoments .k-wicket .dot, .nxmoments .k-goal .dot { background: var(--t); }

.nxmom { display: block; width: calc(100% - 32px); margin: 0 16px; height: 90px; }
.nxmom .ax { stroke: rgba(var(--fg), .25); stroke-width: 1; }
.nxmom .a { fill: var(--t); } .nxmom .b { fill: #8FA6FF; }
.nxlegend.two { justify-content: space-between; padding: 0 16px; }
.nxlegend.two span { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--soft); }
.nxlegend.two span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--t); }
.nxlegend.two span.b::before { background: #8FA6FF; }
.nxbarhd { display: flex; justify-content: space-between; padding: 0 16px 4px; font-size: 12px; color: var(--mut); }
.nxwin { display: flex; gap: 4px; margin: 0 16px; height: 64px; }
.nxwin i { flex: 0 0 var(--w); border-radius: 12px; display: grid; align-content: center; justify-items: center; font-style: normal; animation: nxgrow .8s cubic-bezier(.2, .8, .3, 1) both; overflow: hidden; }
.nxwin i.a { background: rgba(0, 204, 199, .25); } .nxwin i.d { background: rgba(var(--fg), .1); } .nxwin i.b { background: rgba(255, 210, 48, .2); }
.nxwin b { font: 400 24px/1 var(--poster); } .nxwin small { font-size: 11px; color: var(--soft); }
.nxbat { display: grid; padding: 0 16px; }
.nxbat > div { display: grid; grid-template-columns: 1fr auto 44px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(var(--fg), .06); }
.nxbat.bowl > div { grid-template-columns: 1fr auto; }
.nxbat span { display: grid; } .nxbat span b { font-size: 15px; } .nxbat span small { font-size: 12px; color: var(--mut); }
.nxbat .rn { font: 400 22px/1 var(--poster); }
.nxbat > div > small { text-align: right; color: var(--mut); font-size: 12px; }
.nxbat .in { background: linear-gradient(90deg, rgba(0, 204, 199, .12), transparent); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.nxbat .in .rn { color: var(--tt); }
.nxcardx.tower { padding-bottom: 8px; }
.nxtim { display: grid; grid-template-columns: 22px 5px 40px 1fr auto 52px; gap: 10px; align-items: center; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid rgba(var(--fg), .06); background: none; text-align: left; }
.nxtim em { font-style: normal; font-weight: 800; color: var(--mut); text-align: right; }
.nxtim i { width: 5px; height: 26px; border-radius: 3px; }
.nxtim b { font: 400 18px/1 var(--poster); letter-spacing: .04em; }
.nxtim span { font-size: 14px; color: var(--soft); }
.nxtim strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.nxtim small { font-size: 11.5px; color: var(--mut); text-align: right; }
.nxtim.p1 { background: linear-gradient(90deg, rgba(255, 128, 0, .16), transparent); }
.nxtim.p1 strong { color: #C77DFF; }
.nxtim:hover { background: rgba(var(--fg), .04); }
.nxsect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; }
.nxsect span { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(199, 125, 255, .1); border: 1px solid rgba(199, 125, 255, .35); }
.nxsect small { font-size: 11px; color: var(--mut); font-weight: 800; } .nxsect b { font-size: 17px; font-variant-numeric: tabular-nums; } .nxsect em { font-style: normal; font-size: 12px; color: #C77DFF; font-weight: 800; }
.nxcourts { display: grid; gap: 10px; }
.nxcourts button { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); text-align: left; }
.nxcourts button.on { border-color: var(--t); }
.nxcourts .th { position: relative; height: 72px; border-radius: 12px; background-size: cover; background-position: center; }
.nxcourts .th em { position: absolute; left: 6px; bottom: 6px; font: 800 9.5px/1 var(--sans); font-style: normal; padding: 4px 6px; border-radius: 99px; background: #fff; color: #111; }
.nxcourts .th em.lv { background: var(--t); color: #00211F; }
.nxcourts small { font-size: 11.5px; color: var(--mut); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.nxcourts b { display: block; font-size: 15px; margin: 2px 0; } .nxcourts i { font-style: normal; font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.nxtvbar .th .nxfoot { border-radius: 12px; }

/* highlights page */
.clipshero { height: 560px; }
.clipshero .nxsub b { color: #fff; }
.nxgrid.pad { padding: 0 20px; }
.nxtile .tk { position: absolute; top: 12px; right: 10px; font: 800 10.5px/1 var(--sans); background: rgba(0, 0, 0, .6); padding: 5px 7px; border-radius: 6px; color: #fff; margin: 0; }
.nxtile { cursor: pointer; transition: transform .15s; }
.nxtile:active { transform: scale(.97); }

/* the story-style viewer */
#nxviewhost { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.nxview { position: absolute; inset: 0; background: #000; pointer-events: auto; animation: nxviewin .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes nxviewin { from { opacity: 0; transform: scale(.94); } }
.nxview .shade { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .9) 88%); }
.nxview .segs { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.nxview .segs i { flex: 1; height: 3px; border-radius: 3px; background: rgba(var(--fg), .3); overflow: hidden; }
.nxview .segs i b { display: block; height: 100%; width: 0; background: #fff; }
.nxview .segs i.done b { width: 100%; }
.nxview .segs i.on b { animation: nxseg 6s linear forwards; }
@keyframes nxseg { to { width: 100%; } }
.nxview header { position: absolute; z-index: 4; left: 14px; right: 12px; top: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 800; }
.nxview .tap { position: absolute; z-index: 2; top: 80px; bottom: 180px; width: 42%; border: 0; background: none; padding: 0; }
.nxview .tap.l { left: 0; } .nxview .tap.r { right: 0; width: 58%; }
.nxview .tx { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 40px; }
.nxview .k { margin: 0 0 6px; display: inline-block; font: 800 11.5px/1 var(--sans); padding: 5px 8px; border-radius: 6px; background: var(--y); color: #111; }
.nxview h2 { margin: 0; font: 400 40px/1 var(--poster); text-transform: uppercase; animation: nxin .35s ease both; }
.nxview .s { margin: 8px 0 0; font-size: 15px; color: var(--soft); line-height: 1.4; }
.nxview .n { margin: 10px 0 0; font-size: 12.5px; color: var(--mut); font-weight: 700; }

/* athletes that stand out */
.nxrail.ath { gap: 14px; padding-bottom: 8px; }
.nxath { position: relative; flex: 0 0 290px; height: 470px; border-radius: 28px; overflow: hidden; isolation: isolate; border: 1px solid rgba(var(--fg), .14);
  background: radial-gradient(120% 70% at 50% 35%, var(--g) 0%, var(--g2) 55%, var(--bg) 100%); }
.nxath .bg { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(var(--fg), .05) 0 2px, transparent 2px 14px); mix-blend-mode: overlay; }
.nxath .nm { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font: 400 var(--fs)/.85 var(--poster); letter-spacing: -.01em; white-space: nowrap; pointer-events: none; }
.nxath .nm.back { color: rgba(var(--fg), .92); z-index: 1; }
.nxath .nm.front { color: transparent; -webkit-text-stroke: 1.5px rgba(var(--fg), .85); z-index: 3; }
.nxath .cut { position: absolute; z-index: 2; left: 50%; bottom: -10px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.nxath .cut.hamilton { height: 112%; bottom: -150px; }
.nxath .cut.norris { width: 150%; bottom: 40px; }
.nxath .ph { position: absolute; z-index: 2; left: 0; right: 0; top: 70px; bottom: 0; background-size: cover; background-position: center 18%;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 40%, #000 52%, transparent 78%); mask-image: radial-gradient(ellipse 62% 70% at 50% 40%, #000 52%, transparent 78%); }
.nxath::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(transparent 52%, rgba(0, 0, 0, .85) 86%); pointer-events: none; }
.nxath .info { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 64px; display: grid; gap: 2px; }
.nxath .info small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--fg), .8); }
.nxath .info b { font-size: 22px; font-weight: 800; }
.nxath .info em { font-style: normal; font-size: 13.5px; color: var(--yt); font-weight: 700; }
.nxath .acts { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 18px; display: flex; gap: 8px; }
.nxath .hit { position: absolute; inset: 0; z-index: 4; border: 0; background: none; padding: 0; }
.nxath:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Norris, this week: the cut-out over the fan */
.nxsec.spot .hero.cutimg { left: 50%; top: 40px; width: 360px; height: auto; transform: translateX(-50%); -webkit-mask-image: linear-gradient(#000 60%, transparent 92%); mask-image: linear-gradient(#000 60%, transparent 92%); background: none; }
.nxsec.spot .nxglow { background: radial-gradient(circle, rgba(255, 128, 0, .55), rgba(255, 128, 0, 0) 65%); }

/* athlete spaces: the cut-out in front of their name */
.nxspacehero.hascut { background: radial-gradient(110% 80% at 50% 30%, var(--g), var(--bg) 75%); }
.nxspacehero .cutbg { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(var(--fg), .05) 0 2px, transparent 2px 14px); }
.nxspacehero .cutnm { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font: 400 128px/.85 var(--poster); color: rgba(var(--fg), .9); white-space: nowrap; }
.nxspacehero .cutimg { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.nxspacehero .cutimg.hamilton { height: 135%; top: 50px; }
.nxspacehero .cutimg.norris { width: 135%; top: 90px; }
.nxspacehero.hascut .tx > .nxbadge { display: none; }
.nxsec.spot .hero.cutimg { z-index: 1; }
.nxsec.spot .nxsh.over { z-index: 3; }
.nxsec.spot .nxsh.over h2 { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.nxsec.spot .hero.cutimg { top: 78px; width: 330px; }

/* ---- v39: four tabs, My Sport as a sheet, the universe under the poster, tournament spotlights, presence ---- */
.nxhere { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 5px; border-radius: 999px; background: rgba(20, 20, 22, .62); backdrop-filter: blur(10px); border: 1px solid rgba(var(--fg), .14); font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.nxhere .dot { width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: nxdot 2s ease-out infinite; }
@keyframes nxdot { to { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } }
.nxhere b { background: var(--t); color: #00211F; padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; }
.nxhere .nxavs i { width: 20px; height: 20px; font-size: 8.5px; }
.nxherotx > .nxhere, .nxspacehero .tx > .nxhere { margin-bottom: 10px; }
.nxspacehero .tx > .nxbadge + .nxhere { display: flex; width: max-content; }
.nxdtx > .nxhere { margin-bottom: 8px; }

/* Home: the poster as a card, the universe in orbit beneath it */
.nxhome.m-explore .nxhero { margin: 0 12px; height: 548px; border-radius: 28px; border: 1.5px solid rgba(var(--fg), .16); }
.nxhome.m-explore .nxhero.l { border-color: rgba(0, 204, 199, .75); box-shadow: 0 0 0 5px rgba(0, 204, 199, .08), 0 30px 60px -30px rgba(0, 204, 199, .5); }
.nxhome.m-explore .nxhero::after { background: linear-gradient(180deg, rgba(var(--bgc), .25) 0, rgba(var(--bgc), 0) 22%, rgba(var(--bgc), .1) 40%, rgba(var(--bgc), .9) 76%, rgba(var(--bgc), .96) 100%); }
.nxuni { position: relative; height: 350px; overflow: hidden; }
.nxuni::before { content: ""; position: absolute; left: 50%; top: -120px; width: 420px; height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 210, 48, .16), transparent); }
.nxuni.live::before { background: radial-gradient(closest-side, rgba(0, 204, 199, .26), transparent); }
.nxuni .rings i { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(var(--fg), .11); }
.nxuni .rings i:nth-child(1) { width: 190px; height: 190px; } .nxuni .rings i:nth-child(2) { width: 350px; height: 350px; } .nxuni .rings i:nth-child(3) { width: 510px; height: 510px; } .nxuni .rings i:nth-child(4) { width: 670px; height: 670px; } .nxuni .rings i:nth-child(5) { width: 830px; height: 830px; }
.nxuni.live .rings i { border-color: rgba(0, 204, 199, .2); }
.nxuni .sat { position: absolute; left: calc(50% + var(--x)); top: var(--y); transform: translate(-50%, -50%); width: 112px; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; animation: nxbob 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.nxuni .sat .th { width: 66px; height: 66px; border-radius: 50%; background-size: cover; background-position: center 25%; border: 2px solid rgba(var(--fg), .28); box-shadow: 0 10px 24px -10px #000; }
.nxuni .sat b { font-size: 13.5px; font-weight: 800; line-height: 1.15; text-align: center; }
.nxuni .sat small { font-size: 11.5px; color: var(--mut); }
.nxuni .sat:hover .th, .nxuni .sat:focus-visible .th { border-color: var(--ink); }

/* tournament spotlight: the cut-out, with clips sliding in over it */
.nxsec.tour { position: relative; height: 540px; margin-top: 22px; padding: 0; overflow: hidden; }
.nxsec.tour .glow { position: absolute; left: -10%; top: -6%; width: 110%; height: 80%; background: radial-gradient(closest-side, var(--g), transparent 72%); opacity: .5; }
.nxsec.tour .who { position: absolute; pointer-events: none; }
.nxsec.tour .who.cut.norris { left: -86px; top: 6px; width: 470px; -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
.nxsec.tour .who.ph { left: -40px; top: 0; width: 330px; height: 400px; background-size: cover; background-position: center 12%; -webkit-mask-image: radial-gradient(ellipse 64% 68% at 50% 40%, #000 55%, transparent 80%); mask-image: radial-gradient(ellipse 64% 68% at 50% 40%, #000 55%, transparent 80%); }
.nxsec.tour .ttl { position: absolute; z-index: 2; left: 18px; bottom: 58px; width: 222px; display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; border: 0; background: none; padding: 0; text-align: left; }
.nxsec.tour .ttl b { display: flex; align-items: center; gap: 8px; font-size: 23px; font-weight: 800; line-height: 1.1; }
.nxsec.tour .ttl b .nxi { width: 22px; height: 22px; color: var(--soft2); }
.nxsec.tour .ttl small { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.35; color: var(--soft2); }
.nxsec.tour .clips { position: absolute; z-index: 3; left: 0; right: 0; bottom: 50px; height: 280px; display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 0 252px; scroll-snap-type: x proximity; scrollbar-width: none; pointer-events: none; }
.nxsec.tour .clips::-webkit-scrollbar { display: none; }
.nxsec.tour .clips button { pointer-events: auto; flex: 0 0 152px; height: 272px; border-radius: 20px; border: 1.5px solid rgba(var(--fg), .55); background-size: cover; background-position: center 22%; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; text-align: left; scroll-snap-align: end; box-shadow: 0 24px 40px -16px #000; }
.nxsec.tour .clips button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .85)); }
.nxsec.tour .clips b { position: relative; z-index: 1; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.nxsec.tour .clips .nxpl { position: absolute; z-index: 1; top: 10px; left: 10px; width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.nxsec.tour > .nxhere { position: absolute; z-index: 2; left: 18px; bottom: 12px; }

/* top-left stack opens My Sport */
.nxstack { position: relative; gap: 2px; padding-right: 6px; }
.nxstack em { min-width: 18px; height: 18px; margin-left: 4px; border-radius: 9px; background: var(--y); color: #111; font: 800 10.5px/18px var(--sans); font-style: normal; text-align: center; padding: 0 4px; }
.nxstack > .nxi { width: 12px; height: 12px; transform: rotate(90deg); color: var(--soft2); }
.nxmineback { position: absolute; inset: 0; z-index: 44; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); animation: nxfade .25s both; }
@keyframes nxfade { from { opacity: 0; } }
.nxminesheet { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; z-index: 45; border-radius: 28px 28px 0 0; background: var(--sheet); border-top: 1px solid rgba(var(--fg), .16); overflow: hidden; animation: nxsheet .34s cubic-bezier(.2, .85, .25, 1) both; box-shadow: 0 -30px 60px -20px #000; }
@keyframes nxsheet { from { transform: translateY(40%); opacity: 0; } }
.nxminesheet .grab { display: block; width: 42px; height: 5px; margin: 10px auto 12px; border-radius: 5px; background: rgba(var(--fg), .28); }
.nxminesheet .nxtitle .acts { position: absolute; right: 18px; top: 6px; display: flex; gap: 8px; align-items: center; }
.nxminesheet .nxtitle .nxpill { position: static; }

/* scores: dive into what you follow, and who is watching */
.nxdiverow { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 16px; scrollbar-width: none; }
.nxdiverow::-webkit-scrollbar { display: none; }
.nxdiverow button { flex: 0 0 60px; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 6px; }
.nxdiverow button > span:last-child { max-width: 66px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); }
.nxbadge.plus { background: rgba(var(--fg), .06); border: 1.5px dashed rgba(var(--fg), .35); box-shadow: none; }
.nxsrow .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nxsrow .tags .you { margin: 0; }
.nxsrow .tags .wt { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; font-weight: 800; color: #BDE9E7; background: rgba(0, 204, 199, .12); padding: 2px 8px 2px 3px; border-radius: 99px; }
.nxsrow .tags .wt .nxavs i { width: 16px; height: 16px; font-size: 7px; border-width: 1.5px; }

/* search */
.nxsearch { display: flex; align-items: center; gap: 10px; height: 54px; margin: 0 20px 6px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); background: rgba(var(--fg), .06); }
.nxsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 600 16px var(--sans); outline: none; }
.nxsearch input::-webkit-search-cancel-button { display: none; }
.nxsearch:focus-within { border-color: var(--ink); }
.nxsearch button { border: 0; background: none; padding: 4px; color: var(--soft2) !important; display: grid; }
.nxsr { padding: 0 20px; }
.nxsr .shd { margin: 22px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--mut); }
.nxtrend { display: flex; flex-wrap: wrap; gap: 8px; }
.nxtrend button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); font-size: 14px !important; font-weight: 700 !important; }
.nxtrend em { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--poster); font-style: normal; background: rgba(255, 210, 48, .15); color: var(--yt); }
.nxsres { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); text-align: left; }
.nxsres.live { border-color: rgba(0, 204, 199, .5); background: linear-gradient(110deg, rgba(0, 204, 199, .12), var(--card) 60%); }
.nxsres .th { width: 92px; height: 60px; border-radius: 12px; background-size: cover; background-position: center; }
.nxsres b { display: block; font-size: 15px; font-weight: 800; }
.nxsres small { display: block; font-size: 12.5px; color: var(--mut); margin-top: 1px; }
.nxsres .nxhere { margin-top: 6px; padding: 2px 9px 2px 3px; font-size: 11.5px; background: none; border-color: rgba(0, 204, 199, .35); }
.nxsres .nxhere b { display: inline; font-size: 9.5px; padding: 2px 7px; }
.nxsres > .nxi { color: var(--soft2); }
.nxsports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nxsports button { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); font-size: 13px !important; font-weight: 700 !important; }
.nxrail.sclips { padding: 0; }
.nxsclip { position: relative; flex: 0 0 150px; height: 150px; border-radius: 16px; border: 1px solid var(--ln); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 10px; text-align: left; overflow: hidden; }
.nxsclip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .85)); }
.nxsclip b { position: relative; z-index: 1; font-size: 13px; line-height: 1.2; }
.nxsclip .nxpl { position: absolute; z-index: 1; top: 8px; left: 8px; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.nx .nxsearch input:focus-visible { outline: none; }
.nxsec.tour .ttl b { flex-wrap: wrap; }

/* ---- v40: account, notifications, share and comments; light mode; the slider tucks away; scores for the whole day; tables for every sport ---- */
.nxtop { grid-template-columns: auto 1fr auto; gap: 10px; padding: 12px 14px 10px; }
.nxpick .nxtop { grid-template-columns: 1fr auto 1fr; }
.nxbrand { justify-self: start; gap: 6px; }
.nxpick .nxbrand { justify-self: center; }
.nxbbc { gap: 2px; }
.nxbbc i { width: 18px; height: 18px; font-size: 12px; }
.nxbrand b { font-size: 20px; }
.nxstack .nxbadge + .nxbadge { margin-left: -10px; }
.nxtr { gap: 0; align-items: center; }
.nxicon { width: 34px; height: 38px; border: 0; background: none; padding: 0; display: grid; place-items: center; position: relative; }
.nxicon .nxi { width: 21px; height: 21px; }
.nxicon > i:not(.nxi) { position: absolute; top: 7px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 2px var(--bg); }
.nxme { display: flex; align-items: center; gap: 7px; height: 38px; padding: 3px 10px 3px 3px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--ln); background: var(--gl); backdrop-filter: blur(14px); }
.nxme span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; border: 1.5px dashed rgba(var(--fg), .45); background: rgba(var(--fg), .1); }
.nxme .nxi { width: 18px; height: 18px; }

.nxticker { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 14px 0 0; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); background: rgba(30, 30, 33, .55); backdrop-filter: blur(14px); font-size: 13px !important; font-weight: 600 !important; color: var(--soft) !important; overflow: hidden; text-align: left; }
.nxticker span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nxticker .nxi { flex: none; }
.nxspoil.ctr { display: flex; width: max-content; margin: 12px auto 0; }
.nxspoil.bar { display: flex; width: calc(100% - 40px); margin: 0 20px 12px; justify-content: center; background: rgba(var(--fg), .05); border-color: rgba(var(--fg), .3); }
.nxask .nxspoil { margin-top: 14px; border-color: rgba(var(--fg), .35); background: rgba(var(--fg), .05); }
.nxsub b { font-weight: 800; }

/* the slider rests as a chip, opens on tap, and tucks away again */
.nxdepth { position: absolute; z-index: 39; left: 0; right: 0; bottom: 92px; display: grid; justify-items: center; align-items: end; pointer-events: none; }
.nxdepth > * { grid-area: 1 / 1; pointer-events: auto; }
.nxdepth .chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid rgba(var(--fg), .18); background: var(--navbg); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); font-size: 13px !important; font-weight: 800 !important; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.nxdepth.away .chip { transform: translateY(64px); opacity: 0; pointer-events: none; }
.nxdepth.open .chip { transform: scale(.8); opacity: 0; pointer-events: none; }
.nxlvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.nxlvl b { width: 3px; border-radius: 2px; background: rgba(var(--fg), .3); }
.nxlvl b:nth-child(1) { height: 5px; } .nxlvl b:nth-child(2) { height: 8px; } .nxlvl b:nth-child(3) { height: 11px; } .nxlvl b:nth-child(4) { height: 14px; }
.nxlvl b.on { background: var(--ink); }
.nxdial { position: relative; left: auto; right: auto; bottom: auto; width: calc(100% - 36px); height: auto; display: block; padding: 10px 18px 8px; border-radius: 26px; border: 1px solid rgba(var(--fg), .18); background: var(--navbg); backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.nxdepth.open .nxdial { opacity: 1; transform: none; pointer-events: auto; }
.nxdial label { height: 30px; }
.nxdial input { height: 30px; }
.nxdial input::-webkit-slider-thumb { background: var(--ink); }
.nxdial input::-moz-range-thumb { background: var(--ink); }
.nxdial .stops { position: relative; height: 34px; margin: 0 19px; }
.nxdial .stops button { position: absolute; top: 0; left: calc(var(--at) * 1%); transform: translateX(-50%); border: 0; background: none; padding: 2px 3px; display: grid; justify-items: center; gap: 1px; color: var(--mut) !important; white-space: nowrap; }
.nxdial .stops b { font-size: 12.5px; font-weight: 800; }
.nxdial .stops small { font-size: 10px; font-weight: 600; }
.nxdial .stops button.on { color: var(--ink) !important; }

/* trending: the same chips in Ask and in Search */
.nxtrend button { padding: 0 14px 0 11px; gap: 7px; }
.nxtrend .nxi { color: var(--mut); }
.nxask .go { margin: 26px 0 12px; }
.nxask .big { font-size: 29px; }

/* scores: the whole day */
.nxtitle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nxtitle .nxseg { flex: none; }
.nxsgroup h2 { color: var(--soft); }
.nxsgroup h2 span { color: var(--mut); font-weight: 700; letter-spacing: 0; }
.nxsrow { grid-template-columns: 48px 1fr auto; gap: 12px; }
.nxsrow .when { align-content: center; justify-items: start; color: var(--soft); }
.nxsrow .when span { font-size: 13px; font-weight: 800; }
.nxsrow .m small { display: flex; align-items: center; gap: 6px; }
.nxsrow .m small .emo { font-style: normal; font-size: 12px; }
.nxsrow .m small img { width: 24px; height: 12px; object-fit: contain; background: #fff; border-radius: 3px; padding: 1px 3px; }
.nxsrow .m b { line-height: 1.22; }
.nxgo { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ln); background: rgba(var(--fg), .06); display: grid; place-items: center; padding: 0; flex: none; }
.nxgo .nxi { width: 18px; height: 18px; }
.nxgo.t { background: var(--t); border-color: var(--t); color: #00211F !important; box-shadow: 0 8px 22px -10px rgba(0, 204, 199, .9); }
.nxgo.on { background: var(--y); border-color: var(--y); color: #161200 !important; }
.nxsched > span:last-child:empty { display: none; }

/* tables for every kind of competition */
.nxtblwrap { padding: 0 20px; }
.nxtblwrap .nxtable, .nxspacebody .nxtable { margin: 0; }
.nxtblwrap .nxcardx:last-child { margin-bottom: 0; }
.nxtable .tr i { color: #fff; }
div.nxtim { cursor: default; }
div.nxtim:hover { background: none; }
div.nxtim.p1:hover { background: linear-gradient(90deg, rgba(255, 128, 0, .16), transparent); }
.nxroute { list-style: none; margin: 0; padding: 0 16px 2px; }
.nxroute li { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; position: relative; }
.nxroute li + li::before { content: ""; position: absolute; left: 8px; top: -12px; height: 24px; width: 2px; background: rgba(var(--fg), .14); }
.nxroute i { width: 12px; height: 12px; margin-left: 3px; border-radius: 50%; border: 2px solid rgba(var(--fg), .3); background: var(--card); position: relative; z-index: 1; }
.nxroute li.done i { background: var(--y); border-color: var(--y); }
.nxroute li.next i { border-color: var(--y); }
.nxroute li.live i { background: var(--t); border-color: var(--t); box-shadow: 0 0 0 4px rgba(0, 204, 199, .25); }
.nxroute b { font-size: 15px; font-weight: 700; }
.nxroute span { font-size: 13.5px; color: var(--mut); text-align: right; }
.nxroute li.done span, .nxroute li.next span { color: var(--soft); }
.nxroute li.live span { color: var(--tt); font-weight: 700; }
.nxoop div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid rgba(var(--fg), .06); }
.nxoop span { display: grid; }
.nxoop b { font-size: 14.5px; }
.nxoop small { font-size: 12px; color: var(--mut); }
.nxoop em { font-style: normal; font-size: 14px; color: var(--soft); }
.nxoop .me { background: rgba(255, 210, 48, .08); box-shadow: inset 3px 0 var(--y); }
.nxsquad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nxsquad > span { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--ln); background: var(--card); }
.nxsquad .sh { grid-row: span 2; }
.nxsquad b { font-size: 14px; }
.nxsquad small { font-size: 12px; color: var(--mut); }
.nxbadge.plus.y { background: rgba(255, 210, 48, .16); color: var(--yt); border-color: rgba(255, 210, 48, .4); box-shadow: none; }

/* the account panel, from the profile button */
.nxscrim { position: absolute; inset: 0; z-index: 48; background: rgba(0, 0, 0, .6); animation: nxfade .25s both; }
.nxacct { position: absolute; top: 0; bottom: 0; right: 0; width: calc(100% - 54px); z-index: 49; background: var(--sheet); border-left: 1px solid rgba(var(--fg), .12); box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .9); overflow: hidden; }
.nxacct.in { animation: nxdrawer .32s cubic-bezier(.2, .85, .25, 1) both; }
@keyframes nxdrawer { from { transform: translateX(100%); } to { transform: none; } }
.nxacct > .nxscroll { padding: 14px 16px 0; }
.nxacct .top { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; align-items: center; }
.nxround.bdg > i:not(.nxi) { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #D7352B; color: #fff; font: 800 10.5px/17px var(--sans); font-style: normal; text-align: center; }
.nxacct .who { display: flex; align-items: center; gap: 14px; margin: 20px 0 14px; }
.nxacct .who .av { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 26px/1 var(--sans); border: 2px dashed rgba(var(--fg), .4); background: rgba(var(--fg), .08); }
.nxacct h2 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.nxacct .who p { margin: 3px 0 0; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--yt); }
.nxswitch { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(var(--fg), .1); background: none; text-align: left; }
.nxswitch b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 800; }
.nxswitch small { display: block; margin-top: 3px; font-size: 13px; color: var(--mut); line-height: 1.35; }
.nxswitch .sw { flex: none; width: 46px; height: 28px; border-radius: 14px; background: rgba(var(--fg), .22); position: relative; transition: background .2s; }
.nxswitch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.nxswitch .sw.on { background: var(--t); }
.nxswitch .sw.on::after { transform: translateX(18px); }
.nxacct section { padding: 18px 0 0; }
.nxacct .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nxacct h3 { margin: 0; font-size: 20px; font-weight: 800; }
.nxacct .nxdiverow { padding: 0 16px 4px 0; margin-right: -16px; }
.nxacct .calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nxacct .calls li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.nxacct .calls li > i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.nxacct .calls li > i .nxi { width: 15px; height: 15px; }
.nxacct .calls .yes { background: #3DBE74; color: #06230F; }
.nxacct .calls .no { background: #E0503F; color: #fff; }
.nxacct .calls .wait { background: rgba(var(--fg), .14); }
.nxacct .calls b { display: block; font-size: 15px; }
.nxacct .calls small { display: block; font-size: 13px; color: var(--mut); line-height: 1.4; margin-top: 2px; }
.nxacct .com { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; }
.nxacct .com .th { height: 52px; border-radius: 10px; background-size: cover; background-position: center; }
.nxacct .com b { display: block; font-size: 15px; }
.nxacct .com small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--mut); line-height: 1.4; }
.nxacct .rew { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nxacct .rew div { padding: 12px; border-radius: 16px; border: 1px solid var(--ln); background: rgba(var(--fg), .04); display: grid; gap: 2px; align-content: start; }
.nxacct .rew i:not(.nxi) { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 210, 48, .16); color: var(--yt); margin-bottom: 6px; font-style: normal; }
.nxacct .rew i .nxi { width: 15px; height: 15px; }
.nxacct .rew b { font-size: 13.5px; line-height: 1.25; }
.nxacct .rew small { font-size: 12px; color: var(--mut); }

/* sheets: notifications, share, comments */
.nxmineback.sh { z-index: 54; }
.nxsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 55; max-height: 86%; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--sheet); border-top: 1px solid rgba(var(--fg), .16); box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .9); }
.nxsheet.in { animation: nxsheet .34s cubic-bezier(.2, .85, .25, 1) both; }
.nxsheet.k-comments { height: 84%; }
.nxsheet .grab { display: block; flex: none; width: 42px; height: 5px; margin: 10px auto 12px; border-radius: 5px; background: rgba(var(--fg), .28); }
.nxsheet .shd2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 10px; }
.nxsheet h2 { margin: 0; font-size: 22px; font-weight: 800; min-width: 0; }
.nxsheet h2 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxsheet > .nxscroll { position: static; flex: 1; min-height: 0; padding: 0 18px 20px; }
.nxsheet .nlist { list-style: none; margin: 0; padding: 0; }
.nxsheet .nlist button { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid rgba(var(--fg), .08); background: none; text-align: left; }
.nxsheet .nlist button > i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .08); font-style: normal; }
.nxsheet .nlist b { display: block; font-size: 15px; }
.nxsheet .nlist small { display: block; font-size: 13px; color: var(--mut); margin-top: 2px; }
.nxsheet .nlist em { font-style: normal; font-size: 12px; color: var(--mut); }
.nxsheet h3 { margin: 18px 0 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.scard { border-radius: 18px; overflow: hidden; border: 1px solid var(--ln); background: var(--card); }
.scard .th { display: block; height: 150px; background-size: cover; background-position: center 30%; position: relative; transition: height .25s; }
.scard.big .th { height: 230px; }
.scard .th::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .35), transparent 35%, transparent 55%, rgba(0, 0, 0, .8)); }
.scard .th .nxbbc { position: absolute; left: 12px; top: 12px; z-index: 1; }
.scard .th .nxbbc i { background: #fff; color: #000; }
.scard .th b { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; font: 400 30px/1 var(--poster); text-transform: uppercase; color: #fff; }
.scard .tx { display: grid; gap: 2px; padding: 12px 14px; }
.scard .tx b { font-size: 15px; }
.scard .tx small { font-size: 12.5px; color: var(--mut); }
.nxsheet .targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.nxsheet .targets button { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; border: 1px solid var(--ln); background: rgba(var(--fg), .04); font-size: 12.5px !important; font-weight: 700 !important; }
.nxsheet .targets button > i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--fg), .1); font-style: normal; }
.nxc { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(var(--fg), .07); }
.nxc .av, .nxsheet .composer .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--sans); color: #fff; background: hsl(var(--h, 48) 45% 36%); }
.nxc .mt { margin: 0; font-size: 12.5px; color: var(--mut); }
.nxc .mt b { color: var(--ink); font-size: 13.5px; }
.nxc .tx { margin: 3px 0 8px; font-size: 15px; line-height: 1.45; color: var(--soft); }
.nxc .act { margin: 0; display: flex; align-items: center; gap: 8px; }
.nxc .rp { border: 0; background: none; padding: 4px 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px !important; font-weight: 800 !important; color: var(--mut) !important; }
.nxc .reps { margin-top: 6px; border-left: 2px solid rgba(var(--fg), .12); padding-left: 10px; }
.nxc.reply { border-bottom: 0; padding: 8px 0 2px; grid-template-columns: 28px 1fr; }
.nxc.reply .av { width: 28px; height: 28px; font-size: 10.5px; }
.nxsheet .rule { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--mut); }
.nxsheet .replying { flex: none; margin: 0; padding: 8px 18px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--mut); border-top: 1px solid rgba(var(--fg), .1); }
.nxsheet .replying b { color: var(--ink); }
.nxsheet .replying button { border: 0; background: none; padding: 4px; display: grid; }
.nxsheet .composer { flex: none; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 18px 16px; border-top: 1px solid rgba(var(--fg), .1); }
.nxsheet .composer input { height: 44px; min-width: 0; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .06); color: var(--ink); padding: 0 16px; font: 600 15px var(--sans); }
.nxsheet .composer button { height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--y); color: #161200 !important; font-weight: 800 !important; }
.nxdrail > button.on small { color: var(--y); }
.nxdays button.on small { color: inherit; opacity: .65; }

/* ---- light mode: page surfaces flip; anything over a picture keeps its dark dress ---- */
body[data-theme="light"] .nx {
  --bg: #F4F3EF; --bgc: 244, 243, 239; --ink: #141416; --fg: 20, 20, 24; --mut: #62626A; --soft: #2C2C31; --soft2: #4E4E55; --card: #FFFFFF; --card2: #FFFFFF; --sheet: #FAF9F6;
  --navbg: rgba(255, 255, 255, .84); --gl: rgba(255, 255, 255, .8); --yt: #7A5A00; --tt: #00726F;
}
body[data-theme="light"] .nx :is(.nxhero, .nxdrops, .nximm, .nxhome.m-immerse, .nxview, .nxspacehero, .nxplayer, .nxradio, .nxath, .nxsec.tour .clips, .nxpitch, .nxtile, .nxcard .th, .nxfilm, .nxplayercard .top, .nxtvbar .th, .nxhere, .nxlive, .nxavs, .nxsclip, .mclip, .nxcourts .th, .nxscan .th, .scard .th, .nxcre .row .th, .nxask .att .th),
body[data-theme="light"] .nx.t-drops .nxnav, body[data-theme="light"] .nx.t-home[data-mode="immerse"] .nxnav, body[data-theme="light"] .nx.t-home[data-mode="immerse"] .nxdepth {
  --bg: #09090A; --bgc: 9, 9, 10; --ink: #fff; --fg: 255, 255, 255; --mut: #A3A3A8; --soft: #E0E0E4; --soft2: #C9C9CE; --card: #141416; --card2: #19191C; --sheet: #0E0E10;
  --navbg: rgba(26, 26, 29, .72); --gl: rgba(34, 34, 38, .66); --yt: #FFD230; --tt: #00CCC7; color: #fff;
}
body[data-theme="light"] .nxnav, body[data-theme="light"] .nxdepth .chip, body[data-theme="light"] .nxdial { box-shadow: 0 14px 34px -18px rgba(20, 20, 24, .45); }
body[data-theme="light"] .nxsrow, body[data-theme="light"] .nxcardx, body[data-theme="light"] .nxtable, body[data-theme="light"] .nxpost, body[data-theme="light"] .nxsched, body[data-theme="light"] .nxstory, body[data-theme="light"] .nxsres, body[data-theme="light"] .nxcre { box-shadow: 0 1px 0 rgba(20, 20, 24, .04), 0 10px 24px -20px rgba(20, 20, 24, .35); }
body[data-theme="light"] .nxacct, body[data-theme="light"] .nxsheet, body[data-theme="light"] .nxminesheet { box-shadow: 0 0 60px -20px rgba(20, 20, 24, .5); }
body[data-theme="light"] .nxbadge { border-color: rgba(20, 20, 24, .12); }
body[data-theme="light"] .nxbadge b, body[data-theme="light"] .nxbadge.k-creator b { color: #fff; }
body[data-theme="light"] .nxuni .sat .th { border-color: rgba(20, 20, 24, .18); box-shadow: 0 10px 24px -14px rgba(20, 20, 24, .6); }
body[data-theme="light"] .nxtoast { background: #1B1B1E; color: #fff; }
.nxposter small { margin: 6px 0 11px 2px; }
.nxbug b.hid { font-size: 46px; align-items: center; }
.nxsquad > span { grid-template-columns: 44px 1fr; }
.nxdial { background: rgba(24, 24, 27, .94); }
body[data-theme="light"] .nxdial { background: rgba(255, 255, 255, .96); }
body[data-theme="light"] .nx.t-home[data-mode="immerse"] .nxdial { background: rgba(24, 24, 27, .94); }
body[data-theme="light"] .nxsrow .tags .wt, body[data-theme="light"] .nxtvbar small { color: var(--tt); }
body[data-theme="light"] .nxsres .nxhere { --ink: #141416; color: #141416 !important; border-color: rgba(0, 114, 111, .4); }
body[data-theme="light"] .nx .sh { filter: drop-shadow(0 1px 2px rgba(20, 20, 24, .35)); }
body[data-theme="light"] .nxmine .b > b, body[data-theme="light"] .nxconst .cb > b { text-shadow: none; }
body[data-theme="light"] .nxask .qs button { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(100deg, #8E7BFF, #6FD3FF 45%, #9BE36B) border-box; }
body[data-theme="light"] .nxask .q { background: #E7E5DE; }
body[data-theme="light"] .nxask .go em { color: #4B5FD6; }
body[data-theme="light"] .nxask .att { background: rgba(255, 255, 255, .7); }
body[data-theme="light"] .nxsec.tour .glow { opacity: .28; }
body[data-theme="light"] .nxsec.tour .ttl small { color: var(--soft2); }
body[data-theme="light"] .nxpick { background: radial-gradient(120% 70% at 70% 30%, #fff, #F4F3EF 70%); }
body[data-theme="light"] .nxmarq button { background: rgba(255, 255, 255, .9); }
body[data-theme="light"] .nxmarq button.lv1, body[data-theme="light"] .nxmarq button.lv2, body[data-theme="light"] .nxmarq button.lv3 { background: #1B1B1E; color: #fff !important; }
body[data-theme="light"] .nxcre .band { background: linear-gradient(180deg, #ECEAE3 0 46%, var(--band) 46%); }
body[data-theme="light"] .nxroom .m { color: var(--soft2); }
body[data-theme="light"] .nxroom .opts button { background: rgba(255, 255, 255, .75); }
body[data-theme="light"] .nxmoments .dot { background: #A9A9AF; }
body[data-theme="light"] .nxhab .ring { color: #7A5A00; }

/* ---- the BBC Sport marks, drawn from the brand artwork ---- */
.lg { display: block; flex: none; width: auto; }
.sportmark .lg-sport { height: 20px; }
.wsportmark .lg-sport { height: 29px; }
@media (max-width: 760px) { .wsportmark .lg-sport { height: 23px; } }
.scmark { gap: 8px; }
.scmark .lg-bbc { height: 16px; color: #fff; }
.scmark .lg-sport { height: 12px; }
.nxbrand { gap: 7px; }
.nxbrand .lg-bars { height: 24px; }
.nxbrand .lg-sport { height: 13px; color: var(--y); }
.nxbrand.stack { flex-direction: column; align-items: center; gap: 5px; justify-self: center; }
.nxbrand.stack .lg-bbc { height: 20px; color: var(--ink); }
.nxbrand.stack .lg-sport { height: 17px; }
.scard .th .mk { position: absolute; left: 12px; top: 12px; z-index: 1; display: flex; align-items: center; gap: 8px; }
.scard .th .mk .lg-bbc { height: 17px; color: #fff; }
.scard .th .mk .lg-sport { height: 12px; color: #FED12C; }
body[data-theme="light"] .nxbrand .lg-sport { color: var(--ink); }
body[data-theme="light"] .nx :is(.nxspacehero, .nxhome.m-immerse) .nxbrand .lg-sport { color: #FED12C; }

/* ---- v41: a quiet day; the spotlights keep a dark stage in light mode ---- */
.lcq { border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; padding: 8px 15px; border-radius: 999px; white-space: nowrap; transition: background .18s, color .18s; margin-left: 4px; box-shadow: -5px 0 0 -4px var(--line-soft, #333); }
.lcq:hover { color: var(--text); }
.lcq[aria-selected="true"] { background: var(--yellow); color: #101010; box-shadow: none; }
.lcq:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lifecycle.quiet .lc[aria-selected="true"] { background: transparent; color: var(--muted); }
.nxlist.tight { gap: 0; }
.nxlist.tight .nxsched { margin-bottom: 8px; }
.nxnextc { margin: 0 20px 10px; padding: 16px; border-radius: 22px; border: 1px solid rgba(255, 210, 48, .4); background: linear-gradient(150deg, rgba(255, 210, 48, .14), rgba(255, 210, 48, .02) 60%), var(--card); display: grid; grid-template-columns: auto 1fr auto; gap: 12px 14px; align-items: center; }
.nxnextc .cd { grid-column: 3; grid-row: 1; display: grid; justify-items: center; line-height: 1; }
.nxnextc .cd b { font: 400 44px/1 var(--poster); color: var(--yt); }
.nxnextc .cd small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nxnextc .m { grid-column: 2; grid-row: 1; display: grid; gap: 2px; min-width: 0; }
.nxnextc .m small { font-size: 12px; font-weight: 800; color: var(--yt); letter-spacing: .04em; text-transform: uppercase; }
.nxnextc .m b { font-size: 18px; font-weight: 800; line-height: 1.2; }
.nxnextc .m em { font-style: normal; font-size: 13px; color: var(--mut); }
.nxnextc .acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.nxnextc .nxbtn.ghost { background: rgba(var(--fg), .08); border-color: rgba(var(--fg), .2); }
.nxstory em .nxavs { margin-right: 2px; }
.nxstory em .nxavs i { width: 18px; height: 18px; font-size: 8px; border-width: 1.5px; }
.nxquiet { margin: 0 20px 14px; padding: 18px; border-radius: 20px; border: 1px dashed var(--ln); }
.nxquiet h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.nxquiet p { margin: 0; font-size: 14px; color: var(--mut); line-height: 1.45; }
.nxsrow .when span + span { font-weight: 700; color: var(--mut); font-size: 12px; }
body[data-theme="light"] .nxsec.tour { margin: 22px 12px 0; border-radius: 28px; background: radial-gradient(120% 85% at 28% 18%, color-mix(in srgb, var(--g) 42%, #0B0B0D), #0B0B0D 68%);
  --bg: #09090A; --bgc: 9, 9, 10; --ink: #fff; --fg: 255, 255, 255; --mut: #A3A3A8; --soft: #E0E0E4; --soft2: #C9C9CE; --card: #141416; --ln: rgba(255, 255, 255, .13); --gl: rgba(34, 34, 38, .66); --yt: #FFD230; --tt: #00CCC7; color: #fff; }
body[data-theme="light"] .nxsec.tour .glow { opacity: .5; }
body[data-theme="light"] .nxsec.tour .ttl small { color: #D5D5D9; }
body[data-theme="light"] .nxsec.tour .who.cut.norris { left: -98px; }
body[data-theme="light"] .nxsec.tour .who.ph { left: -52px; }
body[data-theme="light"] .nxsec.tour .clips { padding-left: 240px; }
body[data-theme="light"] .nxsec.tour .ttl { left: 16px; width: 204px; }

/* ---- v42: clips, the new cut-outs, the living room ---- */
video.photo, .nxfoot video { background: #0B0B0D; }
.vidimg.kb video.photo, .tvfull.kb video.photo { animation: none; }
/* a film shot wide keeps its shape where the frame is tall */
.nxview .nxfoot video[data-o="w"], .nxdrop .nxfoot video[data-o="w"], .tovideo video[data-o="w"] { object-fit: contain; }
.nxview .segs i.on b { animation-duration: var(--hold, 6s); }
.nxath .cut.raducanu { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.nxsec.tour .who.cut.raducanu { left: -6px; top: 18px; height: 430px; -webkit-mask-image: linear-gradient(#000 66%, transparent 94%); mask-image: linear-gradient(#000 66%, transparent 94%); }
body[data-theme="light"] .nxsec.tour .who.cut.raducanu { left: -16px; }
.nxcre .band .cutout { position: absolute; left: 6px; bottom: 0; height: 100px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.nxcre .band.hascut .nm { margin-left: 122px; }
.nxpick { isolation: isolate; }
.nxpickvid { position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none; }
.nxpickvid video { width: 100%; height: 100%; object-fit: cover; background: none; }
.nxpickvid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(9, 9, 10, .2), rgba(9, 9, 10, .75) 45%, #09090a 82%); }
body[data-theme="light"] .nxpickvid { opacity: .16; }
body[data-theme="light"] .nxpickvid::after { background: linear-gradient(rgba(244, 243, 239, .1), rgba(244, 243, 239, .8) 45%, #F4F3EF 82%); }
.nxroom2 { margin: 0 0 14px; }
.nxroom2 img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.nxroom2 figcaption { margin-top: 7px; font-size: 12.5px; color: #B9B9BE; }

/* ---- v43: Saka and Kane, driver portraits ---- */
.nxtim span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nxtim .hs { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ring, #888); }
.plphoto { display: block; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.nxath::after { background: linear-gradient(transparent 46%, rgba(0, 0, 0, .9) 84%); }

/* ---- v43: Drops with For you, Following and Live ---- */
.nxdhead { position: sticky; top: 0; z-index: 10; height: 0; }
.nxdhead .nxdtabs { position: static; height: auto; }
.nxdtabs button.lv i { box-shadow: 0 0 0 0 rgba(0, 204, 199, .6); animation: nxdlive 1.8s ease-out infinite; }
@keyframes nxdlive { to { box-shadow: 0 0 0 7px rgba(0, 204, 199, 0); } }
.nxdtabs button.lv.on { background: var(--t); color: #00211F !important; }
.nxdtabs button.lv.on i { background: #00211F; animation: none; }
.nxdfol { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px 0; scrollbar-width: none; }
.nxdfol::-webkit-scrollbar { display: none; }
.nxdfol button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 5px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .42); backdrop-filter: blur(10px); color: rgba(255, 255, 255, .82) !important; font-size: 13px !important; font-weight: 700 !important; }
.nxdfol button:first-child { padding: 0 14px; }
.nxdfol button.on { background: #fff; color: #111 !important; }
.nxdrops.t-following .nxdrop .prog { top: 106px; }
.nxdrops.t-following .nxdrop .dur { top: 118px; }
.nxlive.top { position: absolute; z-index: 3; left: 16px; top: 66px; margin: 0; }
.nxdrop.k-livenow .nxdtx { padding-right: 18px; width: 100%; }
.nxdtx .s { margin: -6px 0 14px; font-size: 15px; color: #E0E0E4; }
.nxdtx .s em { font-style: normal; color: var(--t); font-weight: 800; }
.nxdrop.k-livenow .nxctas { display: flex; gap: 8px; margin: 0; }
.nxdrop.k-next { align-items: center; background: radial-gradient(120% 80% at 30% 8%, #1D1D22, #09090A 70%); }
.nxdnext { position: relative; z-index: 3; width: 100%; padding: 96px 18px 120px; }
.nxdnext .k { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #FFD230; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nxdnext .k .nxi { width: 15px; height: 15px; }
.nxdnext h3 { margin: 0 0 6px; }
.nxdnext .m { margin: 0 0 14px; font-size: 14.5px; line-height: 1.4; color: #C9C9CE; }
.nxdnext .row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.nxdnext .t { font-size: 13.5px; font-weight: 800; color: #FFD230; }
.nxdnext .w b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.nxdnext .w small { display: block; margin-top: 3px; font-size: 12.5px; color: #A3A3A8; }
.nxdnext .nxbtn { margin-top: 0; white-space: nowrap; }
.nxdnext > .nxbtn { margin-top: 14px; }

/* ---- v43: headlines in the BBC sans, sentence case, as on the News prototype.
   The condensed face stays for numerals and for the athlete name plates ---- */
.nxtitle h1 { font: 800 34px/1.05 var(--sans); text-transform: none; letter-spacing: -.02em; }
.nxtitle h1 span { font-size: 22px; }
.nxposter { font: 800 40px/1.04 var(--sans); text-transform: none; letter-spacing: -.025em; gap: 0; }
.nxposter.sm { font-size: 34px; }
.nxposter small { font: 700 16px/1 var(--sans); letter-spacing: 0; }
.nxdtx h3 { font: 800 26px/1.14 var(--sans); text-transform: none; letter-spacing: -.015em; }
.nxdq h3, .nxdnext h3 { font: 800 28px/1.1 var(--sans); text-transform: none; letter-spacing: -.02em; }
.nximc h2, .nxview h2 { font: 800 30px/1.08 var(--sans); text-transform: none; letter-spacing: -.02em; }
.nxradio h3 { font: 800 21px/1.15 var(--sans); text-transform: none; letter-spacing: -.01em; }
.nxplayercard h3 { font: 800 28px/1 var(--sans); text-transform: none; letter-spacing: -.02em; }
.scard .th b { font: 800 22px/1.12 var(--sans); text-transform: none; letter-spacing: -.015em; }

/* ---- v43: the top bar says which bet each screen belongs to ---- */
.surface { background: none; border: 0; padding: 0; gap: 8px 14px; align-items: flex-end; }
.sfgrp { display: grid; gap: 5px; min-width: 0; }
.sflab { padding-left: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-style: normal; }
.sflab b { color: #fff; font-weight: 800; }
.sflab i { font-style: normal; color: var(--yellow); }
.sfrow { display: flex; gap: 4px; background: #141414; border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px; }
.sfgrp.next .sfrow { border-style: dashed; border-color: #3A3A3A; }
@media (max-width: 460px) {
  .surface { padding: 0; border-radius: 0; gap: 8px; }
  .sfgrp { flex: none; gap: 3px; }
  .sflab { font-size: 9.5px; padding-left: 10px; }
  .sflab span { display: none; }
  .sfrow { padding: 3px; }
}
.deskbar .brandline { flex-direction: column; align-items: flex-start; gap: 3px; }
@media (max-width: 1500px) { .deskbar .hintline { display: none; } }
.nxposter small { margin: 3px 0 5px 2px; }
.sflab u { text-decoration: none; }
@media (max-width: 1340px) { .sflab span { display: none; } }
@media (max-width: 460px) {
  .sflab u { display: none; }
  .surface .sfwip { display: none; }
  .surface .sf { padding: 7px 9px; font-size: 12px; flex: 0 0 auto; }
  .surface { position: relative; gap: 6px; }
}
@media (max-width: 460px) { .surface .sf { padding: 7px 8px; } .sfrow { gap: 1px; } }

/* ---- v45: the top bar has two axes, each named.
   Horizon: which bet the screen belongs to, now or next and later.
   Moment: where we are in the life of an event. ---- */
.deskbar { flex-wrap: nowrap; align-items: center; gap: 14px 28px; }
.deskbar .brandline { flex: none; }
.deskctl { margin: 0 auto; display: grid; gap: 10px; justify-items: start; min-width: 0; }
.ctlrow { display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
.ctllab { flex: none; width: 124px; display: grid; gap: 2px; text-align: right; padding-bottom: 7px; }
.ctllab b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ctllab i { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.25; }
.ctlrow + .ctlrow { padding-top: 10px; border-top: 1px solid var(--line-soft); align-items: center; width: 100%; }
.ctlrow + .ctlrow .ctllab { padding-bottom: 0; }
/* the moment row reads left to right, as time does */
.lifecycle { flex-wrap: nowrap; }
.lifecycle .lc + .lc { margin-left: 24px; position: relative; }
.lifecycle .lc + .lc::before { content: ""; position: absolute; left: -21px; top: 50%; width: 13px; height: 1px; background: #5A5A5A; }
.lifecycle .lc + .lc::after { content: ""; position: absolute; left: -13px; top: calc(50% - 3px); width: 5px; height: 5px; border-top: 1px solid #5A5A5A; border-right: 1px solid #5A5A5A; transform: rotate(45deg); }
.lcq { margin-left: 12px; }
.deskbar .hintline { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.deskbar .hintline span:not(:empty)::before { content: "Showing: "; color: #6A6A6A; }
@media (max-width: 1180px) { .deskbar .hintline { display: none; } .ctllab { width: 78px; } .ctllab i { display: none; } }
@media (max-width: 980px) { .deskbar .brandline { display: none; } }
@media (max-width: 760px) { .ctllab { display: none; } .ctlrow { flex-wrap: wrap; } }
@media (max-width: 460px) {
  .deskctl, .ctlrow { display: contents; }
  .ctllab, .deskbar .hintline { display: none; }
  .lifecycle .lc + .lc { margin-left: 0; }
  .lifecycle .lc + .lc::before, .lifecycle .lc + .lc::after { display: none; }
  .lcq { margin-left: 4px; }
}

/* ---- v45: the design notes carry the research, and scroll on their own ---- */
body[data-surface="next"] .deskstage { grid-template-columns: 390px minmax(0, 430px); }
.nxnotes { top: 176px; max-height: calc(100vh - 196px); overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #333 transparent; align-content: start; }
.nxnotes::-webkit-scrollbar { width: 6px; } .nxnotes::-webkit-scrollbar-thumb { background: #333; border-radius: 6px; }
.nxnotes .now .f { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2c2c2c; font-size: 12.5px; line-height: 1.5; }
.nxnotes .evs { display: grid; gap: 10px; }
.nxnotes .evs h3 { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.nxnotes .ev p { font-size: 13.5px; line-height: 1.5; }
.nxnotes .ev small { font-size: 11.5px; line-height: 1.4; }
.nxnotes .ev cite { font-style: normal; color: #C9C9CE; }
.nxnotes .ev.f { border-left-color: #8A8A92; }
.nxnotes .ev.f p { font-style: normal; }
.nxnotes .ev.f em { display: block; margin-bottom: 4px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8A8A92; }
.nxnotes .ev.n b { font-size: 28px; letter-spacing: -.01em; }
.nxnotes .ev.n small { margin-top: 4px; }
.nxnotes details { border: 1px solid #2c2c2c; border-radius: 14px; background: #0E0E10; }
.nxnotes summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; font-size: 13.5px; font-weight: 800; color: #fff; }
.nxnotes summary::-webkit-details-marker { display: none; }
.nxnotes summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 400; color: var(--yellow); line-height: 1; }
.nxnotes details[open] summary::after { content: "–"; }
.nxnotes summary span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nxnotes summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 12px; }
.nxnotes details .in { display: grid; gap: 10px; padding: 0 12px 12px; }
.nxnotes .srcs { list-style: none; margin: 0; padding: 0 14px 4px; display: grid; gap: 12px; }
.nxnotes .srcs li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid #2c2c2c; }
.nxnotes .srcs li.on { border-left-color: var(--yellow); }
.nxnotes .srcs b { font-size: 13px; color: #fff; }
.nxnotes .srcs small { font-size: 11.5px; color: var(--muted); }
.nxnotes .srcs p { font-size: 12.5px; line-height: 1.45; color: #B9B9C0; }
.nxnotes details > .f { padding: 4px 14px 14px; }

/* ---- v45: on athlete cards the name sits behind the player, as on their page.
   The outlined copy that ran across the face is gone; the player casts a soft shadow on the letters. ---- */
.nxath .nm.front { display: none; }
.nxath .nm.back { color: transparent; background: linear-gradient(rgba(var(--fg), .96) 30%, rgba(var(--fg), .58)); -webkit-background-clip: text; background-clip: text; }
.nxath .cut, .nxath .cut.raducanu { filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5)) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.nxspacehero .cutnm { color: transparent; background: linear-gradient(rgba(var(--fg), .94) 30%, rgba(var(--fg), .55)); -webkit-background-clip: text; background-clip: text; }

/* ---- v46: the live lead carries one line about the moment; the score is a tap away ---- */
.tocard.tease .toline { font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.tocard.tease .tonames { margin-bottom: 8px; }
.tohook { margin: 0 0 5px; text-align: center; font-size: 21px; font-weight: 800; line-height: 1.16; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.tocard.tease .tosub { margin-bottom: 14px; }
.toscore { display: flex; align-items: center; gap: 7px; margin: 11px auto 0; padding: 4px 8px; background: none; border: 0; color: rgba(255,255,255,.72); font-size: 12.5px; font-weight: 700; }
.toscore svg { width: 15px; height: 15px; }
.toscore:hover { color: #fff; }
.toscore:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.whook { margin: 2px 0 6px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.wbtn.wscore { background: transparent; border-color: transparent; color: var(--text-2); padding-inline: 8px; }
.wbtn.wscore:hover { color: var(--text); }
.wbtn.wscore svg { width: 16px; height: 16px; }

/* ---- v46: each clip has one poster in its own shape, so a box of another shape crops it from a little above the middle, where the faces are ---- */
.nx [style*="url(img/c-"], .nx [style*="url(img/v-"] { background-position: 50% 30% !important; }
img.photo[src*="img/c-"] { object-position: 50% 30%; }
video[data-clip][data-o="t"] { object-position: 50% 30%; }
.listenrow .listenmeta { display: flex; align-items: center; gap: 10px; }
.listenrow .lart { width: 62px; height: 35px; border-radius: 5px; object-fit: cover; flex: none; }

/* ---- v47: one event, three ways in ----------------------------------- */
.nxmodes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0 12px 10px; padding: 4px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); flex: none; }
.nxmodes button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 0; border-radius: 999px; background: none; font-weight: 800 !important; font-size: 13.5px !important; color: var(--mut) !important; }
.nxmodes button .nxi { width: 15px; height: 15px; }
.nxmodes button.on { background: var(--ink); color: var(--bg) !important; }
.nxlivescr .nxlhead { padding-bottom: 10px; }
.nxlivescr .nxradio { height: 196px; }
.nxlivescr .nxradio .rtx { top: 44px; }
.nxlivescr .nxradio .cc { min-height: 54px; }
.nxfollow { margin: 0 12px; padding: 14px 16px 16px; border-radius: 22px; border: 1px solid var(--ln); background: linear-gradient(150deg, rgba(var(--fg), .08), rgba(var(--fg), .02)); flex: none; }
.nxfollow .sb { display: inline-flex; align-items: center; gap: 8px; font: 800 17px/1 var(--sans); }
.nxfollow .sb span { background: var(--t); color: #00211F; padding: 4px 8px; border-radius: 6px; }
.nxfollow .sb em { font-style: normal; color: var(--tt); margin-left: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.nxfollow .k { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.nxfollow .k .nxi { width: 13px; height: 13px; }
.nxfollow .cc { margin: 0; font-size: 15px; line-height: 1.4; min-height: 42px; }
.nxfollow .cc span.in { animation: nxtick .5s ease both; display: inline-block; }
.nxlivescr .nxlayers { padding-top: 12px; }
.nxlivescr .nxlayers button { height: 42px; padding: 0 16px; }

/* the Live layer: text, clips, a vote, the fans, the numbers, an explainer, the radio */
.nxfeedhd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 14px; }
.nxfeedhd > span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--mut); min-width: 0; }
.nxfeedhd > span .nxi { width: 14px; height: 14px; flex: none; }
.nxfeedhd .nxpill { flex: none; padding: 6px 12px; font-size: 12.5px !important; }
.nxfeedhd .nxpill.on { background: var(--y); border-color: var(--y); color: #161200 !important; }
.nxfeed { list-style: none; margin: 0; padding: 0; position: relative; }
.nxfeed::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: rgba(var(--fg), .1); }
.nxfeed > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 0 0 20px; position: relative; }
.nxfeed > li.x { display: block; padding-left: 24px; }
.nxfeed .dot { width: 10px; height: 10px; margin: 5px 0 0 2px; border-radius: 50%; background: #55555a; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
.nxfeed .key .dot { background: var(--t); box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--t); }
.nxfeed .t { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font: 800 12px/20px var(--sans); color: var(--mut); letter-spacing: .02em; }
.nxfeed .t em { font-style: normal; padding: 0 7px; border-radius: 5px; background: rgba(0, 204, 199, .18); color: var(--tt); font-size: 11.5px; }
.nxfeed li > div > b { display: block; font-size: 16px; line-height: 1.3; font-weight: 800; }
.nxfeed .key > div > b { color: var(--tt); }
.nxfeed li > div > p:not(.t) { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--soft2); }
.nxfeed .mclip { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 10px; width: 100%; height: 150px; border-radius: 16px; border: 1px solid var(--ln); background-size: cover; background-position: center 30%; padding: 10px; position: relative; overflow: hidden; }
.nxfeed .mclip .nxi { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.nxfeed .mclip i:not(.nxi) { font: 800 12px/1 var(--sans); font-style: normal; background: rgba(0, 0, 0, .65); color: #fff; padding: 5px 7px; border-radius: 6px; }
.nxfeed .nxtalk { margin-top: 10px; }
.nxfeed .nxroom { margin: 0; }
.fxc { display: block; width: 100%; text-align: left; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); padding: 14px; }
.fxc .k { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.fxc .k .nxi { width: 14px; height: 14px; }
.fxc .nxpill { margin-top: 12px; }
.fxc .nxchat.mini { display: grid; gap: 12px; }
.fxc.nums .nxbarhd { padding: 0 0 8px; } .fxc.nums .nxbar { padding-left: 0; padding-right: 0; }
button.fxc.read, button.fxc.hear { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; }
.fxc .th { position: relative; width: 68px; height: 68px; border-radius: 14px; background-size: cover; background-position: center; }
.fxc .th .nxpl { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 8px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.fxc span small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin-bottom: 3px; }
.fxc span b { display: block; font-size: 15px; line-height: 1.3; font-weight: 800; }
.fxc.hear { border-color: rgba(0, 204, 199, .45); background: linear-gradient(110deg, rgba(0, 204, 199, .14), var(--card) 70%); }
.fxc.hear .rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: #00211F; }
.fxc.hear .rb .nxi { width: 20px; height: 20px; }
.fxc.hear > .nxi { width: 16px; height: 16px; color: var(--mut); }

/* pages: what is next, in plain words */
.nxglance { display: grid; gap: 8px; padding: 6px 20px 12px; }
.nxglance .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 2px; }
.nxglance .facts span { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .04); font-size: 12.5px; font-weight: 700; color: var(--soft2); }
.nxglance .grow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 16px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); }
.nxglance .grow.k-live { border-color: rgba(0, 204, 199, .55); background: linear-gradient(110deg, rgba(0, 204, 199, .16), var(--card) 65%); }
.nxglance .tx { display: grid; gap: 2px; min-width: 0; }
.nxglance small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.nxglance .k-live small { color: var(--tt); }
.nxglance .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 0 rgba(0, 204, 199, .6); animation: nxpulse 1.6s ease-out infinite; }
@keyframes nxpulse { to { box-shadow: 0 0 0 9px rgba(0, 204, 199, 0); } }
.nxglance b { font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.nxglance em { font-style: normal; font-size: 13px; color: var(--soft2); }
.nxglance .nxbtn { flex: none; }

/* pages: Latest mixes the forms */
.nxlatest { display: grid; gap: 12px; }
.nxlatest .nxpost { margin: 0; }
.nxlatest .nxpost.flat h3 { margin: 12px 0 6px; }
.nxlead { position: relative; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; height: 214px; border-radius: 22px; border: 1px solid var(--ln); background-size: cover; background-position: center 28%; padding: 16px; overflow: hidden; }
.nxlead::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0, 0, 0, .88)); }
.nxlead > * { position: relative; color: #fff; }
.nxlead .nxpl { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.nxlead small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 4px; }
.nxlead b { font-size: 20px; line-height: 1.2; font-weight: 800; }
.nxmedia { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; text-align: left; padding: 10px 14px 10px 10px; border-radius: 22px; border: 1px solid var(--ln); background: var(--card); }
.nxmedia .th { position: relative; width: 84px; height: 84px; border-radius: 14px; background-size: cover; background-position: center; }
.nxmedia .th .nxpl { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 9px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.nxmedia small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.nxmedia small .nxi { width: 13px; height: 13px; }
.nxmedia.listen small { color: var(--tt); }
.nxmedia b { display: block; font-size: 16px; line-height: 1.3; font-weight: 800; }
.nxmedia em { display: block; font-style: normal; font-size: 12.5px; color: var(--soft2); margin-top: 3px; }
.nxtile.sm { height: 200px; }
.nxroom.page { margin: 0; }
.nxlatest .nxpill.ctr { margin-top: 2px; }

/* Predictor */
.nxsheet.k-predict, .nxsheet.k-read { height: 86%; }
.nxsheet .shd2 h2 small { display: block; font-size: 12.5px; font-weight: 700; color: var(--mut); margin-top: 2px; letter-spacing: 0; text-transform: none; }
.nxsheet .predict, .nxsheet .reader { padding: 0 18px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; }
.pstreak { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 12px; border-radius: 20px; border: 1px solid rgba(255, 210, 48, .4); background: linear-gradient(110deg, rgba(255, 210, 48, .14), transparent 70%); }
.pstreak > i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--y); color: var(--y); font-style: normal; }
.pstreak > i .nxi { width: 20px; height: 20px; }
.pstreak b { display: block; font-size: 18px; font-weight: 800; }
.pstreak small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--soft2); margin-top: 2px; }
.pfix { padding: 14px 16px; margin-bottom: 10px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); }
.pfix .when { margin: 0 0 10px; font-size: 12.5px; color: var(--mut); }
.pfix .when b { color: var(--ink); margin-right: 8px; font-weight: 800; }
.pside { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.pside > b { font-size: 17px; font-weight: 800; }
.pstep { display: inline-flex; align-items: center; gap: 4px; }
.pstep button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ln); background: rgba(var(--fg), .06); display: grid; place-items: center; padding: 0; }
.pstep button .nxi { width: 16px; height: 16px; }
.pstep i, .pnum { min-width: 40px; text-align: center; font: 400 30px/1 var(--poster); font-style: normal; font-variant-numeric: tabular-nums; }
.pnum { color: var(--tt); padding-right: 44px; }
.pfix .st { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ln); font-size: 13px; color: var(--soft2); }
.pfix .st .nxi { width: 14px; height: 14px; color: var(--tt); }
.pfix.locked { border-color: rgba(0, 204, 199, .4); }
.nxbtn.wide { display: flex; justify-content: center; width: 100%; margin: 6px 0 4px; }
.plg { margin: 20px 0 10px; font-size: 18px; }
.pleague { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pleague li { display: grid; grid-template-columns: 20px 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 16px; background: rgba(var(--fg), .04); }
.pleague li.me { background: rgba(255, 210, 48, .14); border: 1px solid rgba(255, 210, 48, .4); }
.pleague em { font-style: normal; font-weight: 800; color: var(--mut); font-size: 13px; }
.pleague .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--sans); color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 60%), hsl(var(--h) 55% 30%)); }
.pleague b { font-size: 15px; font-weight: 800; }
.pleague strong { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* the reader */
.reader .th { display: block; height: 180px; border-radius: 18px; background-size: cover; background-position: center 30%; margin-bottom: 14px; }
.reader h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.reader .by { margin: 0 0 12px; font-size: 13px; color: var(--mut); }
.reader .nxpill { margin-bottom: 14px; }
.reader > p:not(.by) { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; color: var(--soft); }

/* Ask: the newest answer announces itself */
.nxask .qa.fresh .a { animation: nxfresh 1.6s ease both; }
@keyframes nxfresh { 0% { box-shadow: 0 0 0 2px rgba(138, 160, 255, .9); } 100% { box-shadow: 0 0 0 2px rgba(138, 160, 255, 0); } }
.fxc .nxchat.mini { padding-bottom: 0; }

/* ---- v47: BBC Weather, one line ---------------------------------------- */
.wx { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--soft2, #D6D6DA); }
.wx .wxi { width: 17px; height: 17px; flex: none; color: #FFD230; font-style: normal; display: inline-grid; }
.wx .wxi svg { width: 100%; height: 100%; display: block; }
.wx b { font-weight: 800; color: var(--ink, #fff); }
.wx small { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--mut, #9A9AA0); }
.wx.hero { margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .42); backdrop-filter: blur(10px); color: #fff; }
.wx.hero b { color: #fff; }
.nxglance .wx { margin-top: 4px; }
.nxnextc .m .wx { margin-top: 5px; }
.fxc.wxc { padding: 12px 14px; }
.wx.to { justify-content: center; margin: 2px 0 10px; color: rgba(255, 255, 255, .86); }
.wx.to b { color: #fff; }
.wx.w { margin-top: 10px; color: rgba(255, 255, 255, .86); }
.wx.w b { color: #fff; }

/* before it starts */
.nxsheet.k-preview { height: 86%; }
.nxsheet .preview { padding: 0 18px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; }
.preview .th { display: block; height: 150px; border-radius: 18px; background-size: cover; background-position: center 28%; margin-bottom: 12px; }
.preview .pacts { display: flex; gap: 8px; margin: 12px 0 4px; }
.nxsheet .preview h3 { margin: 18px 0 8px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.prows { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.prows li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 16px; background: rgba(var(--fg), .04); }
.prows small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.prows b { display: block; font-size: 15px; font-weight: 800; }
.prows em { display: block; font-style: normal; font-size: 13px; color: var(--soft2); margin-top: 1px; }
.fxc.pcall { border-color: rgba(255, 210, 48, .45); background: linear-gradient(110deg, rgba(255, 210, 48, .14), var(--card) 70%); }
.fxc.pcall .rb { background: var(--y); color: #161200; }

/* Scan: things to play */
.nxscan .hd.play { margin-top: 14px; }
.nxscan .srow.play { grid-template-columns: 44px 1fr; padding: 8px 12px 8px 8px; }
.nxscan .th.ic { height: 44px; width: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 210, 48, .16); color: var(--y); }
.nxscan .th.ic .nxi { width: 19px; height: 19px; }
.nxscan .srow.play b { font-family: var(--sans); font-size: 15px; font-weight: 700; }

.nxsheet .reader h3 { text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.nxsheet .nxroom h3 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 18px; margin: 0 0 12px; }
.nx .wx b, .tocard .wx b, .wherotext .wx b { display: inline; font-size: 13px; line-height: 1.3; font-weight: 800; }
.nx .wx > span { display: inline; }
.nx .wx small { display: block; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--mut); }

/* ---- v48: page rows, compact ------------------------------------------ */
.nxglance { gap: 8px; padding: 4px 20px 8px; }
.nxglance .grow.lead { padding: 10px 10px 10px 14px; border-radius: 18px; }
.nxglance .grow.lead b { font-size: 16px; }
.nxglance .meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nxglance .meta em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxglance .meta .wx { flex: none; margin: 0; padding-left: 8px; border-left: 1px solid var(--ln); }
.nxglance .gmore { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 2px; scrollbar-width: none; }
.nxglance .gmore::-webkit-scrollbar { display: none; }
.nxglance .grow.chip { flex: none; display: flex; align-items: center; gap: 10px; width: auto; padding: 7px 8px 7px 12px; border-radius: 14px; text-align: left; background: rgba(var(--fg), .04); }
.nxglance .chip .tx { gap: 0; }
.nxglance .chip small { font-size: 10.5px; }
.nxglance .chip b { font-size: 13.5px; white-space: nowrap; }
.nxglance .chip b em { display: inline; margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--soft2); }
.nxglance .chip .go { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ln); background: rgba(var(--fg), .06); font-style: normal; flex: none; }
.nxglance .chip .go .nxi { width: 14px; height: 14px; }
.nxglance .chip.on .go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nxglance .chip .wx { margin: 0; }

/* the day itself, before the clips */
.nxtodaywrap { display: grid; gap: 12px; margin-bottom: 4px; }
.nxtoday { border-radius: 22px; border: 1px solid var(--ln); background: var(--card); padding: 14px 16px 16px; overflow: hidden; }
.nxtoday.live { border-color: rgba(0, 204, 199, .5); }
.nxtoday .tb { display: block; height: 96px; margin: -14px -16px 12px; background-size: cover; background-position: center 55%; }
.nxtoday .k { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.nxtoday.live .k { color: var(--tt); }
.nxtoday .k .nxi { width: 14px; height: 14px; }
.nxtoday .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--t); animation: nxpulse 1.6s ease-out infinite; }
.nxfeed.mini::before { background: rgba(var(--fg), .12); }
.nxfeed.mini > li { padding-bottom: 12px; }
.nxfeed.mini > li:last-child { padding-bottom: 4px; }
.nxfeed.mini .dot { box-shadow: 0 0 0 4px var(--card); }
.nxfeed.mini li > div > b { font-size: 15px; }
.nxfeed.mini li > div > p:not(.t) { font-size: 14px; margin-top: 2px; }
.nxtoday .wxrow { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--ln); }
.nxtoday .nxpill { margin-top: 12px; }
.nxtoday .nxpill .nxi { width: 12px; height: 12px; }
.nxtodaywrap .nxroom.page, .nxtodaywrap .fxc { margin: 0; }
.nxsubh { margin: 18px 0 10px; font-size: 18px; font-weight: 800; }

/* programme art in a tall frame: the whole picture, on a blur of itself */
.nxfoot.art { position: absolute; inset: 0; overflow: hidden; background: #062B2A; }
.nxfoot.art span { position: absolute; background-repeat: no-repeat; }
.nxfoot.art .artbg { inset: -40px; background-size: cover; background-position: center; filter: blur(28px) brightness(.55) saturate(1.2); }
.nxfoot.art .artfg { left: 0; right: 0; top: 16%; height: 46%; background-size: contain; background-position: center; }
.nxglance .lead small .wx { margin: 0 0 0 4px; padding-left: 8px; border-left: 1px solid var(--ln); text-transform: none; letter-spacing: 0; }
.nxglance .lead small .wx b { font-size: 12.5px; }
.nxglance .lead small .wx .wxi { width: 15px; height: 15px; }

/* ---- v49 ----------------------------------------------------------------- */
/* the analyst card: name and role each on one line, both on the band */
.nxcre .band .nm { min-width: 0; }
.nxcre .band .nm b, .nxcre .band .nm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxcre .band .nm span .nxi { flex: none; }

/* scrolling down clears the screen; scrolling up brings the bars back */
.nxnav { transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.viewport.navoff .nxnav { transform: translateY(130%); opacity: 0; pointer-events: none; }
.viewport.navoff .nxdepth .chip { transform: translateY(64px); opacity: 0; pointer-events: none; }
/* sticky offsets count from inside the scroller's 64px top padding, so the bar is pulled back up by that much */
.nxscroll.pad > .nxtop { position: sticky; top: -64px; left: auto; right: auto; margin: -64px 0 4px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.viewport.navoff .nxscroll.pad > .nxtop { transform: translateY(-110%); }
.viewport.scrolled .nxscroll.pad > .nxtop { background: rgba(var(--bgc), .9); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--ln); }
@media (prefers-reduced-motion: reduce) { .nxnav, .nxscroll.pad > .nxtop { transition: none; } }

/* Hear it: a moment you can play */
button.fxc.hear.audio { grid-template-columns: auto minmax(0, 1fr); }
.fxc.hear .ipa { display: none; }
.fxc.hear.playing .ipa { display: block; } .fxc.hear.playing .ipl { display: none; }
.fxc.hear .hp { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.fxc.hear .hp i { flex: 1; height: 4px; border-radius: 4px; background: rgba(var(--fg), .16); overflow: hidden; }
.fxc.hear .hp i b { display: block; height: 100%; border-radius: 4px; background: var(--t); transition: width .25s linear; }
.fxc.hear .hp em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--mut); font-variant-numeric: tabular-nums; }
.fxc.hear.playing { border-color: var(--t); }
.nxlatest button.fxc.hear { width: 100%; }
.nx [style*="cg-orange"] { background-position: 50% 0 !important; }
.plphoto[src*="cg-orange"] { object-position: 50% 0; }

/* Who Am I?: its own sheet */
.nxsheet.k-quiz { height: 78%; }
.nxsheet .quiz { padding: 0 18px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; }
.nxdq.insheet { padding: 4px 0 0; }
.nxdq .qpts { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--soft2); }
.nxdq .qpts .nxi { width: 15px; height: 15px; color: var(--y); }
.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.qopts .qo { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(var(--fg), .25); background: rgba(var(--fg), .05); font-weight: 800 !important; font-size: 15px !important; text-align: center; }
.qopts .qo.right { border-color: #2EC27E; background: rgba(46, 194, 126, .18); color: #7BEBB0; }
.qopts .qo.right .nxi { width: 16px; height: 16px; }
.qopts .qo.wrong { border-color: rgba(255, 90, 80, .6); background: rgba(255, 90, 80, .14); color: #FF9A92; }
.qres { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--soft2); }
.qres b { color: var(--ink); }
.qres.ok b { color: #7BEBB0; }

/* ===== v50: the play drawn from live data, partners labelled, and actions on Immerse ===== */
.nx2d { display: block; }
.nx2d .pic { position: relative; aspect-ratio: 100 / 54; background: #101114; overflow: hidden; }
.nx2d .v2svg { display: block; width: 100%; height: 100%; font-family: var(--sans); }
.nx2d .chips { position: absolute; z-index: 2; left: 8px; bottom: 8px; display: flex; gap: 5px; }
.nx2d .chips button { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 8, 10, .62); backdrop-filter: blur(8px); font-size: 11.5px !important; font-weight: 800 !important; color: rgba(255, 255, 255, .86) !important; white-space: nowrap; }
.nx2d .chips button.on { background: #fff; border-color: #fff; color: #0B0B0D !important; }
.nx2d .cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px 11px; }
.nx2d .cap p { margin: 0; display: grid; gap: 1px; min-width: 0; }
.nx2d .cap b { font-size: 14.5px; line-height: 1.25; font-weight: 800; }
.nx2d .cap span { font-size: 12.5px; line-height: 1.3; color: var(--soft2); }
.nx2d .cap em { font-style: normal; font-size: 11px; line-height: 1.25; font-weight: 700; color: var(--mut); text-align: right; max-width: 66px; }
.nx2d .cap em.sy { max-width: 96px; color: var(--tt); }
.nx2d .cap em.sy i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 0 rgba(0, 204, 199, .6); animation: v2pulse 2s ease-out infinite; }
@keyframes v2pulse { to { box-shadow: 0 0 0 6px rgba(0, 204, 199, 0); } }
@keyframes v2fade { from { opacity: 0; } to { opacity: 1; } }
.v2svg .sync > * { animation: v2fade .4s ease both; }
@media (prefers-reduced-motion: reduce) { .v2svg .sync > *, .nx2d .cap em.sy i { animation: none; } }
.v2svg[data-step="0"] .c-NOR, .v2svg[data-step="1"] .c-LEC, .v2svg[data-step="2"] .c-RUS, .v2svg[data-step="3"] .c-VER { display: none; }
.nx2d .cap button.back { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(0, 204, 199, .55); background: rgba(0, 204, 199, .1); font-size: 12px !important; font-weight: 800 !important; color: var(--tt) !important; white-space: nowrap; }
.nx2d .cap button.back .nxi { width: 11px; height: 11px; }
.nxplayer.d2 { aspect-ratio: auto; background: var(--card); }
.nxplayer.d2.sub { margin-top: 8px; }
.nxlivescr .nxradio.d2 { height: auto; background: var(--card); }
.nxradio.d2 .rtx { position: static; padding: 0 14px 12px; }
.nxradio.d2 .strow { display: flex; align-items: center; gap: 10px; padding-top: 9px; border-top: 1px solid var(--ln); }
.nxradio.d2 .strow .st { flex: 1; min-width: 0; }
.nxradio.d2 .ctl { position: static; display: flex; gap: 6px; flex: none; }
.nxradio.d2 .ctl button { width: 30px; height: 30px; background: rgba(var(--fg), .1); }
.nxradio.d2 .ctl button .nxi { width: 15px; height: 15px; }
.nxlivescr .nxradio.d2 .cc { min-height: 0; height: 2.8em; margin-top: 7px; padding: 0; background: none; font-size: 13.5px; line-height: 1.4; color: var(--soft2); overflow: hidden; }
.nxfollow.d2 { position: relative; padding: 0 0 12px; overflow: hidden; background: var(--card); }
.nxfollow.d2 .sb { position: absolute; z-index: 2; left: 10px; top: 10px; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .65); font: 800 12px/1 var(--sans); color: #fff; }
.nxfollow.d2 .sb span { padding: 2px 5px; border-radius: 4px; }
.nxfollow.d2 .sb em { font-size: 12px; }
.nxfollow.d2 > .k { margin: 0 14px 5px; padding-top: 9px; border-top: 1px solid var(--ln); }
.nxfollow.d2 > .cc { margin: 0 14px; height: 2.8em; overflow: hidden; font-size: 13.5px; line-height: 1.4; color: var(--soft2); }
.nxplayer.d2 .sb, .nxradio.d2 .sb { color: #fff; }
.nxlhead .hr { display: flex; align-items: center; gap: 6px; }
.nxlivescr .nxlhead { padding-left: 12px; padding-right: 12px; gap: 6px; }
.nxlhead .nxlive { min-width: 0; }
.nxlhead .nxlive > span:last-child { white-space: nowrap; }
.nxround.t2d { font: 800 13px/1 var(--sans) !important; letter-spacing: .02em; }
.nxround.t2d.on { background: var(--ink); border-color: var(--ink); color: var(--bg) !important; }

/* partners: one mark, the same everywhere. A green disc with the 4, on the side of the picture */
.c4disc { --s: 44px; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: #AAFF89; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .35); }
.c4disc::before { content: ""; width: calc(var(--s) * .37); height: calc(var(--s) * .5); background: #14401B; -webkit-mask: var(--c4) center / contain no-repeat; mask: var(--c4) center / contain no-repeat; }
.nxfrom { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 5px; border-radius: 999px; background: rgba(8, 8, 10, .72); border: 1px solid rgba(170, 255, 137, .45); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.nxfrom .c4disc { box-shadow: none; }
.nxview .tx .nxfrom { margin: 0 0 10px; }
.nxview > .c4disc { position: absolute; z-index: 3; right: 16px; bottom: 46px; }
.nxview.c4 .tx { right: 84px; }
.nxdrail .from { display: grid; justify-items: center; gap: 4px; }
.nxdrail .from small { color: #fff; }
.c4disc.tile { position: absolute !important; top: 10px; right: 10px; }
.nxuni .sat .c4disc { position: absolute; left: 50%; top: 44px; margin-left: 8px; box-shadow: 0 0 0 2px var(--bg); }
.nxwhere { margin: 0 0 14px; padding: 12px 14px 4px; border-radius: 20px; border: 1px solid var(--ln); background: var(--card); }
.nxwhere > .k { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.nxwhere .row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; }
.nxwhere .nxround.go { background: var(--t); border-color: var(--t); color: #00211F; }
.nxwhere .row + .row { border-top: 1px solid var(--ln); }
.nxwhere .wi { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 204, 199, .16); color: var(--tt); }
.nxwhere .wi .nxi { width: 18px; height: 18px; }
.nxwhere .c4disc, .fxc.c4row .c4disc { box-shadow: none; }
.nxwhere .row > span { display: grid; gap: 1px; min-width: 0; }
.nxwhere small { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.nxwhere b { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.nxwhere em { font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--soft2); }
.nxwhere .nxbtn { white-space: nowrap; }
.fxc.c4row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.fxc.c4row b { font-size: 14px; }
.fxc.c4row span small { white-space: nowrap; }
.fxc.c4row .nxbtn { white-space: nowrap; }
button.fxc.read.c4 .th .c4disc { position: absolute; right: -6px; bottom: -6px; box-shadow: 0 0 0 2px var(--card); }

/* Immerse: the same rail as Drops, on every film */
.nximc .nxdrail { bottom: 178px; }
.nximc .tx { padding-right: 76px; }
.nximc .nxdrail small { color: #fff; }

/* ===== v51: a calmer forecast. A symbol, a temperature, a few words and one small mark, on one line ===== */
.wxby { display: inline-flex; align-items: center; gap: .32em; flex: none; font-size: 9px; line-height: 1; font-style: normal; vertical-align: middle; }
.wxby i { display: block; flex: none; }
.wxby .bb { width: 3.515em; height: 1em; background: var(--ink, #fff); -webkit-mask: var(--wx-bbc) center / 100% 100% no-repeat; mask: var(--wx-bbc) center / 100% 100% no-repeat; }
.wxby .wd { width: 5.85em; height: .84em; background: #149EDC; -webkit-mask: var(--wx-word) center / 100% 100% no-repeat; mask: var(--wx-word) center / 100% 100% no-repeat; }
.wx.hero .wxby .bb, .wx.to .wxby .bb, .wx.w .wxby .bb, .wx.glass .wxby .bb { background: #fff; }
.wx.hero .wxby, .wx.to .wxby, .wx.w .wxby { margin-left: 2px; }
.wx.short { flex-wrap: nowrap; }
.wx.short .wxby { font-size: 8px; margin-left: 1px; }
.nxglance .chip .wx .wxby { display: none; }
/* on a card: one row, with the mark at the far end */
.wx.credit, .nx .wx.credit { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; width: 100%; }
.nx .wx.credit > span { display: block; flex: 1; min-width: 0; }
.wx small.by, .nx .wx small.by { display: flex; align-items: center; gap: 7px; flex: none; margin: 0 0 0 auto; }
.wx small.by .mo { display: block; flex: none; width: 16px; height: 10px; background: #D6DF23; -webkit-mask: var(--wx-met) center / 100% 100% no-repeat; mask: var(--wx-met) center / 100% 100% no-repeat; }
.wx .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fxc.wxc { padding: 10px 14px; border-radius: 14px; }
.nxtoday .wxrow { padding-top: 9px; }
/* Immerse: a small glass pill in the corner of the picture, where the weather bears on the event */
.wx.glass { padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(0, 0, 0, .42); backdrop-filter: blur(10px); color: #fff; }
.nx .wx.glass b { color: #fff; }
.nximc > .wx.glass { position: absolute; z-index: 3; top: 76px; right: 14px; }
/* Ask: the forecast as the source under an answer */
.nxask .att.wxatt { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 8px 10px 12px; }
/* the label line of a page's lead row runs the full width, so a forecast and its mark stay on it */
.nxglance .grow.lead { column-gap: 12px; row-gap: 2px; }
.nxglance .grow.lead > .tx { display: contents; }
.nxglance .grow.lead > .tx > small { grid-column: 1 / -1; min-width: 0; }
.nxglance .grow.lead > .tx > b, .nxglance .grow.lead > .tx > em { grid-column: 1; min-width: 0; }
.nxglance .grow.lead > .nxbtn { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
/* the website's table rule for .wx was catching the forecast line too */
.web span.wx { display: inline-flex; }

/* ===== v51b: streaks and badges where they change, a poll on its post, discovery notes ===== */
.nxtoast.earn { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px 10px 10px; }
.nxtoast.earn > i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #FFD230; color: #161200; font-style: normal; }
.nxtoast.earn > i .nxi { width: 19px; height: 19px; }
.nxtoast.earn b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.nxtoast.earn small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; line-height: 1.3; opacity: .72; }
.nxme { position: relative; }
.nxme em.new { position: absolute; top: -1px; left: 25px; width: 10px; height: 10px; border-radius: 50%; background: #FFD230; box-shadow: 0 0 0 2px var(--bg); }
.nxdsk { position: absolute; top: 16px; right: 10px; height: 36px; display: inline-flex; align-items: center; gap: 3px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(10px); color: #FFD230; font-size: 13.5px; font-weight: 800; }
.nxdsk .nxi { width: 14px; height: 14px; }
.nxdsk.up { background: #FFD230; color: #161200; transition: background .3s, color .3s; animation: nxskup .6s ease; }
@keyframes nxskup { 40% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .nxdsk.up { animation: none; } }
.nxacct .rew div.new { border-color: rgba(255, 210, 48, .55); background: rgba(255, 210, 48, .08); }
.nxacct .rew em { justify-self: start; margin-bottom: 6px; padding: 2px 6px; border-radius: 6px; background: #FFD230; color: #161200; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qsk { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12.5px; font-weight: 800; color: var(--yt); }
.qsk .nxi { width: 14px; height: 14px; flex: none; }
.clist .nxroom.page { margin: 4px 0 6px; }
.clist .clab { display: flex; align-items: center; gap: 6px; margin: 14px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.clist .clab .nxi { width: 14px; height: 14px; }
.nxpost .nxroom.page { margin: 10px 0 2px; }
.nxnotes .disc { padding: 14px 16px; border-radius: 14px; border: 1px solid #2c2c2c; background: #121214; }
.nxnotes .disc h3 { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.nxnotes .disc p { font-size: 14px; line-height: 1.5; color: #E4E4E8; }
.nxnotes .disc.hyp { border-color: rgba(0, 204, 199, .45); }
.nxnotes .disc.hyp h3 { color: #00CCC7; }
.nxnotes .disc.asm h3 { color: #C9C9CE; }
.nxnotes .disc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nxnotes .disc li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; }
.nxnotes .disc li b { justify-self: start; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #26262B; color: #D8D8DC; }
.nxnotes .disc li b.t-desirable { background: rgba(255, 210, 48, .18); color: #FFD230; }
.nxnotes .disc li b.t-feasible { background: rgba(0, 204, 199, .18); color: #5FE3DF; }
.nxnotes .disc li b.t-viable { background: rgba(143, 166, 255, .2); color: #AFC0FF; }
.nxnotes .disc li b.t-usable { background: rgba(123, 235, 176, .18); color: #7BEBB0; }
.nxnotes .disc li b.t-ethical { background: rgba(255, 138, 216, .18); color: #FF9EDD; }
.nxnotes .disc .f { margin-top: 10px; padding-top: 9px; border-top: 1px solid #2c2c2c; font-size: 12px; color: var(--muted); }

/* ===== v52: the TV player. Home, the transport, chapters, more to watch, and the play drawn in 2D ===== */
.tv .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tvavs { display: inline-flex; margin-right: 2px; }
.tvavs i { width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--sans, inherit); font-style: normal; color: #fff; background: hsl(var(--h) 55% 42%); border: 2px solid #0B0B0B; }
.tvavs i:first-child { margin-left: 0; }
.tvhomebtn { position: absolute; left: 64px; top: 84px; animation: tvup .25s ease-out both; }
.tvhomebtn .tvb { height: 48px; padding: 0 20px; font-size: 16px; background: rgba(0, 0, 0, .55); }
.tvctrl.v2 { padding: 60px 64px 0; bottom: -206px; background: linear-gradient(to top, rgba(0, 0, 0, .96) 55%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, 0)); }
.tvctrl.v2.eps { bottom: 0; }
.tvctrl.v2 .tvctitle { margin-bottom: 30px; }
.tvctrl.v2 .tvctitle h2 { font-size: 36px; }
.tvbar.chap { height: 6px; }
.tvhead { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.tvbar.chap .tvmark { border: 0; padding: 0; cursor: pointer; top: -7px; width: 5px; height: 20px; transition: none; }
.tvbar.chap .tvmark::after { content: ""; position: absolute; inset: -12px -10px; }
.tvbar.chap .tvmark.tvfocus { width: 9px; height: 30px; top: -12px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); }
.tvmark .pv { display: none; position: absolute; left: 50%; bottom: 44px; width: 230px; transform: translateX(-50%); padding: 8px 8px 11px; border-radius: 10px; background: #fff; color: #000; text-align: left; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .9); }
.tvmark.first .pv { left: -14px; transform: none; }
.tvmark.last .pv { left: auto; right: -14px; transform: none; }
.tvmark.tvfocus .pv { display: grid; gap: 2px; }
.tvmark .pv img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.tvmark .pv small { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #555; }
.tvmark .pv b { font-size: 17px; line-height: 1.2; }
.tvbarlive.behind { color: #fff; opacity: .7; }
.tvctrl.v2 .tvbtns { flex-wrap: nowrap; align-items: center; gap: 12px; }
.tvctrl.v2 .tvbtns.transport { margin-top: 26px; }
.tvctrl.v2 .tvbtns.opts { margin-top: 14px; }
.tvctrl.v2 .tvb { height: 50px; padding: 0 20px; font-size: 16.5px; }
.tvctrl.v2 .tvb.icon { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
.tvctrl.v2 .tvb.icon.big { width: 66px; height: 66px; background: rgba(255, 255, 255, .26); }
.tvctrl.v2 .tvb.icon.tvfocus, .tvctrl.v2 .tvb.icon.big.tvfocus { background: #fff; }
.tvctrl.v2 .tvb .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); }
.tvctrl.v2 .tvb.at { color: var(--live); background: rgba(0, 204, 199, .14); }
.tvctrl.v2 .tvb.at.tvfocus { color: #000; background: #fff; }
.tvchhint { margin-left: auto; font-size: 14px; color: rgba(255, 255, 255, .6); }
.tveps { margin-top: 26px; }
.tveps h3 { margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 800; }
.tveps h3 span { font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, .55); }
.tvctrl.v2.eps .tveps h3 span { display: none; }
.tveps .tvrow { padding-bottom: 26px; }
.tveps .tvcard { width: 232px; }
.tveps .tvcimg .c4disc { position: absolute; right: 8px; bottom: 8px; }
.tveps .tvcimg img { width: 100%; height: 100%; object-fit: cover; }
.tv.ov .tvhint { display: none; }
.tv2d { position: absolute; right: 64px; top: 96px; width: 420px; padding: 18px 20px 16px; border-radius: 10px; background: rgba(8, 8, 8, .86); backdrop-filter: blur(6px); animation: tvside .3s cubic-bezier(.2, .7, .3, 1) both; }
.tv2d .v2svg { display: block; width: 100%; aspect-ratio: 100 / 54; margin-top: 10px; border-radius: 8px; overflow: hidden; font-family: var(--sans, inherit); }
.tv2d .cap { margin: 12px 0 0; display: grid; gap: 2px; }
.tv2d .cap b { font-size: 20px; line-height: 1.2; }
.tv2d .cap span { font-size: 15.5px; color: #C9C9C9; }
.tv2d .note { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.tv2d.big { top: 122px; width: 500px; padding: 0; background: none; backdrop-filter: none; animation: none; }
.tv2d.big .v2svg { margin: 0; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
.tv2d.big .cap b { font-size: 24px; }
.tv2d.big .line { margin: 12px 0 0; display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: baseline; font-size: 17px; line-height: 1.4; color: #E6E6E6; }
.tv2d.big .line i { width: 9px; height: 9px; border-radius: 50%; background: var(--live); animation: tobeat 1.6s ease-in-out infinite; }
.tv.ov .tv2d.big .line, .tv.ov .tv2d.big .note, .tv.ov .tv2d.big .cap { display: none; }
.tv:has(.tv2d:not(.big)) .tvhint { display: none; }
.tv.ov .tv2d:not(.big) .cap, .tv.ov .tv2d:not(.big) .note { display: none; }
.tv.ov .tv2d:not(.big) { padding-bottom: 18px; }
.tv:has(.tv2d.big) .tvradio { width: 610px; }
.tv.ov .tvaudiochip, .tv.ov .tvradio .tvover, .tv.ov .tvradio .tvwave, .tv.ov .tvradio .tvbatters { display: none; }
.tv.ov:has(.tvctrl.v2) .tvradio .tvtiming p:nth-child(n+3) { display: none; }

/* ==========================================================================
   v53: finding the TV controls
   ========================================================================== */
.tvset::before {
  content: "Work in progress"; position: absolute; z-index: 5; top: -11px; right: 22px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #111; background: var(--yellow); padding: 4px 9px; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.tv.s-player .tvfull { cursor: pointer; }
.tvhint { top: 92px; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 17px; font-weight: 700; color: #fff; }
.tvhint b { padding: 3px 8px; border-radius: 999px; background: #fff; color: #000; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.tv:has(.tvsheet) .tvhint, .tv:has(.tvl3) .tvhint { display: none; }
.tvkeys { display: block; margin-top: 5px; color: #BDBDBD; }
.tvcap::after { content: none; }
/* the radio screen: the hint clears the 2D panel, and Home clears the line under it */
.tv:has(.tv2d.big) .tvhint { top: 82px; }
.tv2d.big { top: 134px; }
.tv.ov .tvradio > .tvcatchkick { visibility: hidden; }

/* ==========================================================================
   v54: from the story to the page behind it
   ========================================================================== */
.nxkick.go { display: flex; align-items: center; gap: 8px; }
.nxkgo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 3px 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: rgba(0,0,0,.4); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nxkgo b { font-weight: inherit; }
.nxkgo svg { opacity: .8; }
.nxviewgo { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: #fff; font-size: 13.5px; font-weight: 800; }
.nxviewgo b { font-weight: 800; }

/* ==========================================================================
   v55: what you follow decides what you see
   ========================================================================== */
.nxconst .cbx { position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(12,12,14,.92); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; padding: 0 0 1px; display: grid; place-items: center; transition: left .5s cubic-bezier(.3, 1.3, .5, 1), top .5s cubic-bezier(.3, 1.3, .5, 1); animation: nxcbx .3s ease-out both; }
@keyframes nxcbx { from { opacity: 0; transform: scale(.4); } }
.nxfollowask { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.04); color: inherit; }
.nxfollowask b { display: block; font-size: 15.5px; font-weight: 800; } .nxfollowask small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); line-height: 1.35; }
.nxwhy { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yt); text-align: center; }
.nxstack .add { font-size: 13px; font-weight: 800; margin: 0 2px 0 6px; }
.nxscan .srow.add b { color: var(--mut); font-weight: 700; }
.nxscan .srow .th.ic .nxbadge { --s: 34px; }

/* ==========================================================================
   v56: finding something new. A dashed lilac outline means "not yours yet"
   ========================================================================== */
.nx { --lil: #C9B8FF; }
.nxbtn.lil { background: var(--lil); color: #170B3A; border-color: transparent; }
.nxbtn.w { background: #fff; color: #000; border-color: transparent; }
/* a name in the live text */
.nxnm { display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--lil); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.nxnm.mine { text-decoration-color: rgba(var(--fg), .55); }
.nxnm[aria-expanded="true"] { color: var(--lil); }
.nxnmc { position: relative; margin: 10px 0 6px; padding: 12px; border-radius: 16px; background: var(--card2); box-shadow: 0 14px 40px -14px #000, inset 0 0 0 1px rgba(var(--fg), .14); display: grid; grid-template-columns: 48px 1fr 28px; gap: 4px 12px; align-items: center; animation: nxin .22s ease both; }
.nxnmc::before { content: ""; position: absolute; left: 22px; top: -6px; width: 12px; height: 12px; background: var(--card2); transform: rotate(45deg); box-shadow: inset 1px 1px 0 rgba(var(--fg), .14); }
.nxnmc .who b { display: block; font-size: 15px; font-weight: 800; } .nxnmc .who small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--mut); }
.nxnmc .x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(var(--fg), .08); color: inherit; display: grid; place-items: center; align-self: start; }
.nxnmc .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nxbadge.ini { display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: #2B2B33; } .nxbadge.ini b { font-size: 15px; font-weight: 800; color: #fff; }
/* the end of Scan */
.nxscan .hd.done { display: flex; align-items: center; gap: 10px; margin: 18px 4px 6px; color: var(--mut); } .nxscan .hd.done::before, .nxscan .hd.done::after { content: ""; flex: 1; height: 1px; background: rgba(var(--fg), .16); }
.nxdiff { display: grid; gap: 8px; margin: 0 0 6px; } .nxdiff h3 { margin: 2px 4px 2px; font-size: 16px; font-weight: 800; }
.nxdiff .r { display: grid; grid-template-columns: 1fr auto 26px; gap: 8px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 18px; border: 1.5px dashed rgba(201, 184, 255, .5); background: rgba(125, 90, 255, .08); }
.nxdiff .go { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; text-align: left; border: 0; background: none; color: inherit; padding: 0; min-width: 0; }
.nxdiff .go b { display: block; font-size: 14.5px; line-height: 1.25; font-weight: 800; } .nxdiff .go small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); }
.nxdiff .nxbtn { white-space: nowrap; }
.nxdiff .no { width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; color: var(--mut); display: grid; place-items: center; }
/* one from outside, in the orbit */
.nxuni.six { height: 440px; }
.nxuni .sat.out .nxbadge { outline: 2px dashed var(--lil); outline-offset: 5px; }
.nxuni .sat.out small.new { color: var(--lil); font-weight: 800; }
/* a look before you follow */
.nxsheet.k-peek .peek { padding: 0 18px 22px; display: grid; gap: 12px; }
.nxnew { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lil); } .nxnew::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--lil); }
.nxsheet.k-peek .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.nxsheet.k-peek .note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--mut); }
body[data-theme="light"] .nx { --lil: #5B3FD6; }

/* ==========================================================================
   v56: the picker's tray. It stays still; a pick leaves and another arrives
   ========================================================================== */
.nxtray { flex: none; margin: 4px 14px 14px; }
.nxtray .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; } .nxtray .tabs::-webkit-scrollbar { display: none; }
.nxtray .tabs button { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); background: none; color: var(--soft2); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.nxtray .tabs button.on { background: var(--ink); color: var(--bg0, #0b0b0c); border-color: transparent; }
.nxtray .why { display: flex; justify-content: space-between; align-items: center; height: 22px; margin: 0 4px 8px; font-size: 12px; font-weight: 700; color: var(--lil, #C9B8FF); }
.nxtray .why button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; color: var(--mut); font-size: 12px; font-weight: 800; }
.nxtray .slots { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 46px; gap: 8px; height: 208px; align-content: start; }
.nxtray .slots.wrap { display: flex; flex-wrap: wrap; overflow-y: auto; scrollbar-width: none; } .nxtray .slots.wrap .chip { flex: none; height: 46px; }
.nxtray .chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid rgba(var(--fg), .2); background: rgba(34, 34, 40, .9); color: inherit; font-size: 14.5px; font-weight: 800; text-align: left; }
.nxtray .chip.none { border-style: dashed; background: none; opacity: .35; }
.nxtray .chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxtray .chip img { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; } .nxtray .chip img.ph { padding: 0; object-fit: cover; }
.nxtray .chip .emo, .nxtray .chip .ini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(var(--fg), .1); font-size: 17px; } .nxtray .chip .ini { font-size: 10.5px; font-weight: 800; }
.nxtray .chip > .nxi { flex: none; opacity: .6; } .nxtray .slots:not(.wrap) .chip > .nxi { display: none; } .nxtray .slots:not(.wrap) .chip { font-size: 14px; }
.nxtray .chip.in { animation: nxchipin .4s cubic-bezier(.3, 1.4, .5, 1) both; border-color: rgba(201, 184, 255, .7); }
@keyframes nxchipin { from { opacity: 0; transform: scale(.7); } }
.nxtray .all { grid-column: 1 / -1; margin: 12px 4px; font-size: 14px; color: var(--mut); }

/* ==========================================================================
   v56: profiles. Who is here, and the picture they chose
   ========================================================================== */
.nxme span[data-av^="e"] { font-size: 16px; }
.nxacct .who .av { padding: 0; cursor: pointer; color: inherit; }
.nxacct .who .av[data-av^="e"] { font-size: 30px; }
.nxacct .who > div { flex: 1; min-width: 0; }
.nxacct .who h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxacct .who .swp { flex: none; gap: 4px; padding-right: 10px; }
.nxsheet .composer .av[data-av^="e"] { font-size: 16px; }
.nxacct .nxdiverow:empty::after { content: "Nothing yet. Tap Edit to pick what you love."; font-size: 14px; color: var(--mut); }
.nxprof { list-style: none; margin: 0; padding: 0; }
.nxprof button { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 13px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(var(--fg), .08); background: none; text-align: left; }
.nxprof .av, .nxpics .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 18px; border: 1.5px dashed rgba(var(--fg), .45); background: rgba(var(--fg), .08); }
.nxprof .av[data-av^="e"], .nxpics .av[data-av^="e"] { font-size: 22px; }
.nxprof .av.add { border-style: dashed; color: var(--mut); }
.nxprof b { display: block; font-size: 16px; font-weight: 800; }
.nxprof small { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxprof em { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: #002423; font-style: normal; }
.nxprof button[aria-pressed="true"] b { color: var(--tt); }
.nxsheet.k-profile h3 { margin: 18px 0 10px; }
.nxpics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 6px; justify-items: center; }
.nxpics button { padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; }
.nxpics button[aria-pressed="true"] { border-color: var(--y); }
.nx .av[data-av="i1"], .nxme span[data-av="i1"] { background: #FFD230; color: #161200; border-color: transparent; }
.nx .av[data-av="i2"], .nxme span[data-av="i2"] { background: #00CCC7; color: #002423; border-color: transparent; }
.nx .av[data-av="i3"], .nxme span[data-av="i3"] { background: #C9B8FF; color: #1B1040; border-color: transparent; }
.nx .av[data-av="i4"], .nxme span[data-av="i4"] { background: #FF8A6B; color: #2A0B02; border-color: transparent; }
.nx .av[data-av^="e"], .nxme span[data-av^="e"] { background: rgba(var(--fg), .1); border-style: solid; border-color: rgba(var(--fg), .22); color: inherit; }

/* ==========================================================================
   v57: the first screen never traps you
   ========================================================================== */
/* the picker scrolls when it has to, and its button stays in reach */
.nxpick { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.nxpick::-webkit-scrollbar { display: none; }
.nxpick > * { flex-shrink: 0; }
.nxpick > .nxbtn.wide { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -14px 24px 6px rgba(var(--bgc), .85); }
.nxpickvid { overflow: hidden; }
/* the tray gives rows to the map when the map needs them */
.nxpick[data-rows="3"] .nxtray .slots { height: 154px; }
.nxpick[data-rows="3"] .nxtray .slots:not(.wrap) > :nth-child(n+7) { display: none; }
.nxpick[data-rows="2"] .nxtray .slots { height: 100px; }
.nxpick[data-rows="2"] .nxtray .slots:not(.wrap) > :nth-child(n+5) { display: none; }
/* the menu, on the first screen */
.nxpick .nxtop > .nxme { justify-self: end; margin-left: 0; }

/* ==========================================================================
   v58: the way to the phone version. Prototype chrome, in the phone build's blue
   ========================================================================== */
.gpchip { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 6px 11px 6px 8px; border-radius: 8px; border: 1px solid #6C97FF; background: #0E2157; color: #E4ECFF; font: 700 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: none; cursor: pointer; }
.gpchip:hover, .gpchip[aria-expanded="true"] { background: #16307A; }
.gpchip:focus-visible, .gp:focus-visible, .gpbar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gpbar { display: none; }
@media (max-width: 460px) {
  .gpbar { display: flex; align-self: stretch; align-items: center; gap: 8px; margin: -8px -10px 2px; padding: 9px 14px; padding-top: calc(9px + env(safe-area-inset-top, 0px)); margin-top: calc(-8px - env(safe-area-inset-top, 0px)); background: #0E2157; border-bottom: 2px solid #6C97FF; color: #E4ECFF; font: 400 12.5px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-decoration: none; }
  .gpbar span { flex: 1; min-width: 0; } .gpbar b { font-weight: 700; } .gpbar i { font-style: normal; font-size: 16px; color: #9DB6F5; }
}
.gppop { position: fixed; z-index: 400; left: 20px; top: 132px; width: 292px; padding: 16px 16px 14px; border-radius: 14px; border: 1px solid #6C97FF; border-top-width: 2px; background: #0E2157; color: #E4ECFF; box-shadow: 0 30px 60px -20px #000; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.gppop[hidden] { display: none; }
.gppop h3 { margin: 0 26px 8px 0; font: inherit; font-size: 15px; font-weight: 700; }
.gppop p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #C4D3FA; }
.gppop .gpqr { display: block; width: 200px; margin: 0 auto 12px; padding: 14px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #fff; }
.gppop .gpqr svg { display: block; width: 100%; height: auto; }
.gppop .gpu { margin-bottom: 4px; text-align: center; word-break: break-all; }
.gppop .gpu a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: #6C97FF; text-underline-offset: 3px; }
.gppop .gpn { text-align: center; color: #9DB6F5; }
.gppop .gpc { display: block; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(157, 182, 245, .55); background: rgba(6, 20, 58, .6); color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.gppop .gpx { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: #9DB6F5; font-size: 20px; line-height: 1; cursor: pointer; }
/* the row at the foot of either app's menu */
.gp { z-index: 60; display: grid; gap: 6px; width: 100%; padding: 11px 16px 13px; border: 0; border-top: 2px solid #6C97FF; background: #0E2157; color: #E4ECFF; text-align: left; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; box-shadow: 0 -18px 30px -12px rgba(0, 0, 0, .8); cursor: pointer; border-radius: 0; }
.nx .gp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #E4ECFF; }
.nxacct > .gp { position: absolute; left: 0; right: 0; bottom: 0; }
.drawer > .gp { position: sticky; bottom: 0; flex: none; margin-top: auto; }
.nxacct .nxend { height: 170px; }
.gp .gptag { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gp .gptag b { padding: 3px 7px; border-radius: 4px; background: #6C97FF; color: #06143A; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.gp .gptag small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #9DB6F5; }
.gp .gpl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.gp .gpl b { flex: 1; font-weight: 700; } .gp .gpl i { font-style: normal; font-size: 16px; color: #9DB6F5; }
.gp > small { font-size: 11.5px; line-height: 1.4; color: #9DB6F5; }

/* ---- v59 ------------------------------------------------------------------
   Drops: what fans are saying, one comment at a time, over the clip on screen */
.nxdpk { position: relative; display: block; width: min(288px, 100vw - 102px); height: 50px; margin: 0 0 10px; padding: 0; border: 0; background: none; color: #fff; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nxdpk .c { position: absolute; left: 0; bottom: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 18px; background: rgba(20, 20, 22, .64); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; line-height: 1.32; font-weight: 600; color: #E6E6EA; opacity: 0; transform: translateY(8px); pointer-events: none; }
.nxdpk .c > i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: hsl(var(--h) 52% 36%); }
.nxdpk .c > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.nxdpk .c b { margin-right: 6px; font-weight: 800; color: #fff; }
.nxdrop.play .nxdpk .c { animation: nxdpk 12s calc(var(--j) * 4s + .9s) infinite both; }
@keyframes nxdpk { 0% { opacity: 0; transform: translateY(8px); } 3.5%, 29% { opacity: 1; transform: none; } 32.5%, 100% { opacity: 0; transform: translateY(-6px); } }
.nxdpk:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; border-radius: 18px; }
@media (prefers-reduced-motion: reduce) {
  .nxdrop.play .nxdpk .c { animation: none; }
  .nxdrop.play .nxdpk .c:first-child { opacity: 1; transform: none; }
}
/* a story, read: the top reply sits under the words and leads into the rest */
.nxtopc { display: grid; gap: 7px; width: 100%; margin: 6px 0 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.nxtopc small { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nxtopc .c { font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.nxtopc .c b { margin-right: 6px; color: var(--ink); }
.nxtopc em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--yt); }
/* the quiet day: scores from elsewhere */
.nxsrow .tags .nu { font-style: normal; font-size: 11px; font-weight: 800; color: var(--lil); background: rgba(var(--fg), .08); padding: 3px 8px; border-radius: 99px; }
.nxelse > .nxbtn.wide { width: 100%; margin: 4px 0 0; }
.nxrail.nxels { gap: 10px; }
.nxrail.nxels > .nxelc { flex: 0 0 212px; min-width: 0; display: grid; gap: 4px; align-content: start; padding: 13px 14px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.nxelc.live { border-color: rgba(0, 204, 199, .5); background: linear-gradient(110deg, rgba(0, 204, 199, .13), var(--card) 60%); }
.nxelc small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxelc small .emo { font-style: normal; font-size: 12px; }
.nxelc b { font-size: 15px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxelc em { display: flex; align-items: center; gap: 6px; min-width: 0; font-style: normal; font-size: 12px; color: var(--soft2); }
.nxelc em span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxelc em .lv { flex: none; font-style: normal; background: var(--t); color: #00211F; padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 800; }
/* the read sheet in light mode: the dark panel of the Bet 4 reader was showing through it */
body[data-theme="light"] #app .nxsheet .reader { background: none; color: var(--ink); --bg: #F4F3EF; --card: #FFFFFF; }
body[data-theme="light"] .nxelc, body[data-theme="light"] .nxtopc { box-shadow: 0 1px 0 rgba(20, 20, 24, .04), 0 10px 24px -20px rgba(20, 20, 24, .35); }

/* ---- v60 ------------------------------------------------------------------
   The live page: four tabs, and one line of the conversation under them */
.nxlsub { margin: 18px 4px 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--soft); }
.nxlpk { display: flex; align-items: center; gap: 10px; flex: none; width: calc(100% - 24px); height: 44px; margin: 0 12px 10px; padding: 0 12px 0 7px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.nxlpk .cs { position: relative; flex: 1; min-width: 0; height: 30px; }
.nxlpk .c { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); animation: nxlpk 15s calc(var(--j) * 5s) infinite both; }
.nxlpk .c > i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--sans); font-style: normal; color: #fff; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 70% 60%), hsl(var(--h) 55% 30%)); }
.nxlpk .c > span { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--soft); }
.nxlpk .c b { margin-right: 6px; color: var(--ink); }
.nxlpk em { flex: none; display: flex; align-items: center; gap: 2px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--tt); }
@keyframes nxlpk { 0% { opacity: 0; transform: translateY(6px); } 3%, 30% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .nxlpk .c { animation: none; } .nxlpk .c:first-child { opacity: 1; transform: none; } }
.nxlayers:has(+ .nxlpk), .nxlayers:has(+ .nxchathd) { padding-bottom: 10px; }
/* four tabs share the row, so none is cut off at the edge of a phone */
.nxlivescr .nxlayers { gap: 6px; }
.nxlivescr .nxlayers button { flex: 1 0 auto; padding: 0 12px; font-size: 14px !important; }
/* Chat: rooms, the vote in a line, and three kinds of room */
.nxchathd { flex: none; margin: 0 12px; }
.nxrooms { display: flex; gap: 4px; margin: 0 0 10px; padding: 4px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); }
.nxrooms button { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--mut) !important; font-size: 13px !important; font-weight: 800 !important; white-space: nowrap; }
.nxrooms button.on { background: var(--ink); color: var(--bg) !important; }
.nxrooms .nxavs i { width: 18px; height: 18px; font-size: 8px; border-width: 1.5px; }
.nxpin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 10px 10px 14px; border-radius: 16px; border: 1px solid rgba(0, 204, 199, .45); background: linear-gradient(160deg, rgba(0, 204, 199, .16), rgba(0, 204, 199, .03)); }
.nxpin > b { flex: 1 1 130px; font-size: 14px; line-height: 1.25; text-align: left; }
.nxpin.three { display: grid; gap: 9px; padding: 12px; }
.nxpin.three .o { display: grid; grid-template-columns: 1fr .62fr 1fr; }
.nxpin.three .o button { justify-content: center; height: 40px; font-size: 13.5px !important; }
.nxpin .o { display: flex; gap: 6px; flex: none; }
.nxpin .o button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border-radius: 10px; border: 1px solid rgba(var(--fg), .25); background: rgba(0, 0, 0, .25); font-size: 12.5px !important; font-weight: 800 !important; white-space: nowrap; }
.nxpin .o > i { font-style: normal; padding: 7px 10px; border-radius: 10px; background: rgba(var(--fg), .07); font-size: 12px; font-weight: 800; color: var(--soft2); white-space: nowrap; }
.nxpin .o > i.me { background: rgba(0, 204, 199, .3); color: var(--ink); }
body[data-theme="light"] .nxpin .o button { background: rgba(255, 255, 255, .7); }
.nxmark { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tt); }
.nxmark::before, .nxmark::after { content: ""; flex: 1; height: 1px; background: rgba(0, 204, 199, .35); }
.nxreactl { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--soft2); }
.nxmsg.me { grid-template-columns: 1fr; }
.nxmsg.me > div { justify-self: end; max-width: 84%; padding: 8px 13px; border-radius: 16px 16px 4px 16px; background: rgba(255, 210, 48, .16); }
.nxroomn { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nxroomn.n { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.nxchat.top { padding-bottom: 16px; }
.nxchat.top + .nxburst { margin-bottom: 84px; }
.nxsum { margin: 0 0 12px; padding: 13px 15px; border-radius: 18px; border: 1px solid var(--ln); background: var(--card); }
.nxsum small { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nxsum p { margin: 0; font-size: 14.5px; line-height: 1.42; }
.nxsum em { display: block; margin-top: 8px; font-style: normal; font-size: 11.5px; color: var(--mut); }
.nxburst { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--fg), .05); }
.nxburst p { margin: 0; font-size: 13.5px; }
.nxburst p b { font-size: 15px; }
.nxburst div { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font-size: 12.5px; font-weight: 800; }
.nxburst div span { display: flex; align-items: center; justify-content: center; color: #fff; white-space: nowrap; }
body[data-theme="light"] .nxsum { box-shadow: 0 1px 0 rgba(20, 20, 24, .04), 0 10px 24px -20px rgba(20, 20, 24, .35); }
/* fight night: the bout, the question, the card */
.nxbx .d { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--fg), .14); }
.nxbx .d.r { background: #E5484D; } .nxbx .d.b { background: #3E7BFA; } .nxbx .d.e { background: none; box-shadow: inset 0 0 0 2px var(--soft2); } .nxbx .d.x { background: none; box-shadow: inset 0 0 0 1.5px rgba(var(--fg), .3); }
.nxbxtop { flex: none; margin: 0 12px; padding: 14px 16px; border-radius: 22px; border: 1px solid rgba(0, 204, 199, .4); background: linear-gradient(160deg, rgba(0, 204, 199, .10), rgba(var(--fg), .02)); }
.nxbxtop .bout { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nxbxtop .bout b { flex: none; display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 800; }
.nxbxtop .bout span { min-width: 0; font-size: 12px; font-weight: 800; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxbxtop .when { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 10px; font-size: 13px; font-weight: 800; color: var(--tt); }
.nxbxtop .when em { font-style: normal; font-weight: 700; color: var(--soft2); }
.nxbxtop .pips { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.nxbxtop .pips i { height: 6px; border-radius: 3px; background: rgba(var(--fg), .14); }
.nxbxtop .pips i.on { background: var(--t); } .nxbxtop .pips i.now { background: var(--ink); animation: nxbxn 1.2s ease-in-out infinite alternate; }
@keyframes nxbxn { to { opacity: .35; } }
.nxbxtop .radio { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ln); }
.nxbxtop .radio small { flex: none; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt); }
.nxbxtop .radio p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.35; color: var(--soft); }
.nxlayers button.ask::after { content: ""; position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--y); }
.nxbxask { position: relative; overflow: hidden; border-radius: 22px; padding: 16px; margin-bottom: 14px; border: 1px solid rgba(0, 204, 199, .45); background: linear-gradient(160deg, rgba(0, 204, 199, .16), rgba(0, 204, 199, .03)); }
.nxbxask .k { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt); }
.nxbxask.done .k { margin-bottom: 10px; }
.nxbxask h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.25; }
.nxbxask .opts { display: grid; grid-template-columns: 1fr .62fr 1fr; gap: 8px; }
.nxbxask .opts button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 52px; padding: 0 6px; border-radius: 14px; border: 1px solid rgba(var(--fg), .25); background: rgba(0, 0, 0, .25); font-weight: 800 !important; font-size: 15px !important; }
body[data-theme="light"] .nxbxask .opts button { background: rgba(255, 255, 255, .7); }
.nxbxask .m { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 2px; font-size: 12.5px; color: var(--soft2); }
.nxbxask .kd { flex: none; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px dashed rgba(var(--fg), .35); background: none; font-size: 12.5px !important; font-weight: 700 !important; white-space: nowrap; }
.nxbxask .kd.on { border-style: solid; border-color: var(--y); background: rgba(255, 210, 48, .16); }
.nxbxask .drain { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--t); transform-origin: left; animation: nxdrain var(--len, 24s) linear var(--el, 0s) both; }
@keyframes nxdrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.nxbxsplit { display: grid; gap: 7px; }
.nxbxsplit div { position: relative; display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); overflow: hidden; font-size: 14px; font-weight: 800; }
body[data-theme="light"] .nxbxsplit div { background: rgba(255, 255, 255, .6); }
.nxbxsplit div i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--fg), .13); }
.nxbxsplit div.me i { background: rgba(0, 204, 199, .38); }
.nxbxsplit div span, .nxbxsplit div b { position: relative; }
.nxbxh { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 8px; }
.nxbxh b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nxbxh span { font-size: 13.5px; font-weight: 800; }
.nxbxrow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.nxbxrow span { display: grid; justify-items: center; gap: 5px; padding: 7px 0 8px; border-radius: 10px; background: rgba(var(--fg), .05); font-size: 10.5px; font-weight: 800; color: var(--mut); }
.nxbxrow span .d { width: 12px; height: 12px; }
.nxbxrow span.now { background: rgba(var(--fg), .14); color: var(--ink); outline: 1.5px solid var(--ink); }
.nxbxvs { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--ln); font-size: 13.5px; }
.nxbxvs span { color: var(--soft2); } .nxbxvs b { font-weight: 800; }
.nxbxnote { margin: 12px 0; font-size: 13.5px; line-height: 1.4; color: var(--soft2); }
.nxbxnote.live { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: rgba(var(--fg), .05); color: var(--soft); }
.nxbxres { border-radius: 22px; padding: 16px; margin-bottom: 12px; border: 1px solid rgba(255, 210, 48, .5); background: linear-gradient(160deg, rgba(255, 210, 48, .15), rgba(255, 210, 48, .02)); }
.nxbxres .k { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yt); }
.nxbxres h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.nxbxres.wait { border-color: var(--ln); background: rgba(var(--fg), .05); margin-bottom: 14px; }
.nxbxres.wait .k { color: var(--mut); }
.nxbxcmp { display: grid; gap: 8px; margin-bottom: 4px; }
.nxbxcmp > div { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(var(--fg), .05); font-size: 14px; }
.nxbxcmp small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.nxbxcmp b { display: flex; align-items: center; gap: 7px; font-weight: 800; white-space: nowrap; }
.nxbxcmp em { font-style: normal; font-size: 12px; color: var(--soft2); text-align: right; }
.nxbxcmp > div.me { outline: 1.5px solid var(--y); background: rgba(255, 210, 48, .08); }
.nxbxacts { display: flex; gap: 8px; margin-bottom: 14px; }
.nxbxacts .nxbtn { flex: 1; justify-content: center; }
.nxbxtbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.nxbxtbl th { text-align: left; padding: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.nxbxtbl td { padding: 7px 0; border-top: 1px solid var(--ln); }
.nxbxtbl td .d { margin-right: 7px; }
.nxbxtbl td small { color: var(--mut); font-size: 12px; margin-left: 6px; }
/* Drops: React opens five to choose from */
.nxdrail .nxrtray { position: absolute; right: 56px; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(20, 20, 22, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .16); transform-origin: right center; animation: nxrtin .16s ease both; }
.nxrtray button { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; }
.nxrtray button.on { background: rgba(255, 210, 48, .28); }
.nxdrail .em.one { font-size: 22px; letter-spacing: 0; }
@keyframes nxrtin { from { opacity: 0; transform: scale(.7); } }
.nxdrop:has(.nxrtray) .nxdpk { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .nxdrail .nxrtray { animation: none; } }

/* v60: search in the picker */
.nxptitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 20px 4px; }
.nxpick .nxptitle h1 { margin: 0; }
.nxptitle .nxround.on { background: var(--ink); color: var(--bg); }
.nxpsearch { position: relative; z-index: 6; flex: none; margin: 0 16px; }
.nxpsearch label { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 40px 0 14px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nxpsearch label .nxi { flex: none; width: 18px; height: 18px; color: var(--mut); }
.nxpsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 600 15px var(--sans); }
.nxpsearch input::placeholder { color: var(--mut); }
.nxpsearch input::-webkit-search-cancel-button { display: none; }
.nxpsearch label:focus-within { border-color: var(--y); }
.nxpsearch input:focus, .nxpsearch input:focus-visible { outline: none; box-shadow: none; }
.nxpsearch .x { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(var(--fg), .12); display: grid; place-items: center; padding: 0; }
.nxpres { position: absolute; left: 0; right: 0; top: 48px; padding: 6px; border-radius: 20px; border: 1px solid var(--ln); background: var(--sheet, #141416); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); display: grid; gap: 2px; }
.nxpres[hidden] { display: none; }
.nxpres .r { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 14px; background: none; text-align: left; }
.nxpres .r:hover, .nxpres .r:focus-visible { background: rgba(var(--fg), .07); }
.nxpres .r > span:not(.nxbadge) { display: grid; gap: 1px; min-width: 0; }
.nxpres .r b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxpres .r small { font-size: 12px; color: var(--mut); line-height: 1.3; }
.nxpres .r em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--yt); white-space: nowrap; }
.nxpres .r.on { opacity: 1; } .nxpres .r.on em { color: var(--mut); }
.nxpres .r.add { grid-template-columns: 36px 1fr; border-top: 1px solid var(--ln); border-radius: 0 0 14px 14px; padding-top: 10px; }
/* a page for something with no pictures of its own */
.nxplainhero { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 70% 20%, hsl(var(--h) 55% 30%), hsl(var(--h) 60% 10%) 70%); }
.nxplainhero i { font-style: normal; font-size: 120px; opacity: .5; transform: translateY(-40px); }
.nxplainhero b { font: 400 150px/1 var(--poster); color: rgba(255, 255, 255, .22); transform: translateY(-40px); }

/* ---- v61 · Immerse is your own channel ---- */
.nxchtop { position: sticky; top: 0; height: 0; z-index: 21; }
.nxchtop > .nxtop { position: absolute; top: 0; left: 0; right: 0; }
.nxchbar { position: absolute; left: 14px; right: 14px; top: 60px; display: flex; align-items: center; gap: 8px; }
.nxchchip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 34px; padding: 0 11px 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(20, 20, 22, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13.5px !important; font-weight: 800 !important; white-space: nowrap; }
.nxchchip b { overflow: hidden; text-overflow: ellipsis; }
.nxchchip em { flex: none; font-style: normal; font-weight: 700; color: var(--soft2); }
.nxchchip em.lv { color: var(--tt); font-weight: 800; }
.nxchchip .nxi { flex: none; width: 13px; height: 13px; opacity: .8; }
.nxchbar .rt { margin-left: auto; display: flex; gap: 8px; flex: none; }
.nxchbar .nxround.sm { background: rgba(20, 20, 22, .55); border-color: rgba(255, 255, 255, .2); }
.nxchtvb { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(20, 20, 22, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px !important; font-weight: 800 !important; white-space: nowrap; }
.nxchtvb .nxi { width: 16px; height: 16px; }
.nxchtvb.on { background: #fff; border-color: #fff; color: #111 !important; }
/* v75: the row of segments that was here is now the rail down the right edge (.nxchrail, at the end) */
.nxhome.m-immerse .nximc > .wx.glass { top: 118px; }
.nximm.paused .nximc.play .nxfoot .nxfr { animation-play-state: paused; }
/* the link between two clips, and the opening of a channel */
.nximc .lk { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 20px 168px; border: 0; text-align: left; color: #fff !important; background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .46) 34%, rgba(0, 0, 0, .93) 78%); }
.nximc.linking .lk { display: flex; animation: nxfade .3s both; }
.nximc.linking .tx, .nximc.linking .pp, .nximc.linking > .wx { visibility: hidden; }
.nximc .lk .k { margin-bottom: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt); }
.nximc .lk > b { font: 400 44px/.98 var(--poster); text-transform: uppercase; }
.nximc .lk .s { margin: 10px 0 14px; font-size: 15px; line-height: 1.4; color: var(--soft); }
.nximc .lk .why { display: inline-flex; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; }
.nximc .lk small { margin-top: 10px; font-size: 12px; color: var(--mut); }
.nximc .lk .ol { display: grid; width: 100%; margin-top: 14px; }
.nximc .lk .ol > span { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14.5px; font-weight: 700; }
.nximc .lk .ol i { font-style: normal; color: var(--mut); }
.nximc .lk .ol em { font-style: normal; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nximc .lk .ol u { text-decoration: none; font-size: 13px; color: var(--soft2); }
/* the end of the channel */
.nximend { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; align-items: flex-end; }
.nximend .bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 22%; }
.nximend .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .42) 30%, rgba(0, 0, 0, .95) 72%); }
.nximend .tx { position: relative; z-index: 3; width: 100%; padding: 0 20px 146px; }
.nximend .k { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tt); }
.nximend h2 { margin: 0; font: 400 46px/.98 var(--poster); text-transform: uppercase; }
.nximend .s { margin: 10px 0 18px; font-size: 15px; line-height: 1.4; color: var(--soft); }
.nximend .nxbtn { display: flex; width: 100%; height: 50px; margin: 0 0 9px; justify-content: center; }
.nximend .nxbtn:last-child { margin-bottom: 0; }
/* the phone as the remote */
.nximm.ontv { height: 100%; }
.nximtv { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 124px 18px 150px; background: #0B0B0D; overflow: hidden; }
.nximtv > * { min-width: 0; max-width: 100%; }
.nximtv .lab { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tt); }
.nximtv .lab .nxi { width: 16px; height: 16px; }
.nximtv .scr { position: relative; flex: 1 1 120px; min-height: 84px; max-height: 190px; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 204, 199, .5); }
.nximtv .scr .bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 30%; }
.nximtv .scr .lv { position: absolute; left: 10px; top: 10px; padding: 3px 7px; border-radius: 6px; background: var(--t); color: #00211F; font-size: 11px; font-weight: 800; }
.nximtv h3 { flex: none; margin: 14px 0 3px; font: 800 20px/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: #fff; }
.nximtv .m { flex: none; margin: 0 0 12px; font-size: 13.5px; color: var(--mut); }
.nximtv .bar { flex: none; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.nximtv .bar i { display: block; height: 100%; border-radius: 4px; background: #fff; transition: width 1s linear; }
.nximtv .bar.lv i { background: var(--t); }
.nximtv .ctl { flex: none; display: flex; align-items: center; justify-content: center; gap: 30px; margin: 16px 0; }
.nximtv .ctl button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); display: grid; place-items: center; padding: 0; }
.nximtv .ctl button .nxi { width: 20px; height: 20px; }
.nximtv .ctl button.big { width: 62px; height: 62px; background: #fff; color: #111 !important; }
.nximtv .ctl button.big .nxi { width: 24px; height: 24px; }
.nximtv .ctl button:disabled { opacity: .35; }
.nximtv .up { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 7px 12px 7px 7px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .06); text-align: left; }
.nximtv .up .th { width: 44px; height: 44px; border-radius: 10px; background-size: cover; background-position: 50% 30%; }
.nximtv .up small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.nximtv .up b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nximtv .up > span { min-width: 0; }
.nximtv .up em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--soft2); }
.nximtv .acts { flex: none; display: flex; gap: 8px; margin-top: 12px; }
.nximtv .acts .nxbtn { flex: 1 1 0; min-width: 0; height: 44px; display: block; padding: 0 10px; text-align: center; line-height: 42px; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 720px) { .nximtv .up { display: none; } .nximtv .ctl { margin: 12px 0; } }
/* the running order */
.nxsheet.k-order { max-height: 88%; }
.nxchs { flex: none; display: flex; gap: 8px; padding: 2px 18px 12px; overflow-x: auto; scrollbar-width: none; }
.nxchs::-webkit-scrollbar { display: none; }
.nxchs .ch { position: relative; flex: 1 0 104px; height: 92px; border: 0; border-radius: 14px; overflow: hidden; padding: 8px 9px; display: flex; align-items: flex-end; text-align: left; background: #111; color: #fff !important; }
.nxchs .ch .bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 28%; }
.nxchs .ch .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .88)); }
.nxchs .ch .t { position: relative; display: grid; gap: 2px; min-width: 0; }
.nxchs .ch b { font-size: 13px; line-height: 1.2; font-weight: 800; }
.nxchs .ch small { font-size: 11px; line-height: 1.2; font-weight: 700; color: #D2D2D7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxchs .ch small:first-child { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #fff; opacity: .85; }
.nxchs .ch.on { outline: 2.5px solid var(--tt); outline-offset: -2.5px; }
.nxsheet.k-order > .nxscroll { padding: 0 10px 2px; }
.nxq { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nxq button { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px 10px 8px 8px; border: 0; border-radius: 16px; background: none; text-align: left; }
.nxq button.now { background: rgba(0, 204, 199, .1); box-shadow: inset 0 0 0 1px rgba(0, 204, 199, .4); }
.nxq button.was { opacity: .55; }
.nxq .th { width: 52px; height: 52px; border-radius: 12px; background-size: cover; background-position: 50% 28%; }
.nxq .tt { display: grid; gap: 2px; min-width: 0; }
.nxq b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.nxq small { font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxq em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--mut); white-space: nowrap; }
.nxq .now em { color: var(--tt); }
.nxq em .lv { padding: 2px 6px; border-radius: 5px; background: var(--t); color: #00211F; font-style: normal; font-size: 11px; }
.nxbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.nxbars i { width: 3px; border-radius: 2px; background: var(--tt); }
.nxbars i:nth-child(1) { height: 6px; } .nxbars i:nth-child(2) { height: 12px; } .nxbars i:nth-child(3) { height: 8px; }
.nxqacts { flex: none; display: flex; gap: 8px; padding: 10px 18px 18px; }
.nxqacts .nxbtn { flex: 1; min-width: 0; justify-content: center; padding: 12px 10px; }
/* narrow and short phones: the channel's name is never the thing that gives way */
@media (max-width: 430px) {
  .nxchtvb .w { display: none; }
  .nxchtvb { padding: 0 11px 0 9px; }
  .nxqacts { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .nxqacts .nxbtn { gap: 5px; padding: 12px 6px; font-size: 13.5px !important; }
  .nxaskch { padding-left: 12px; padding-right: 12px; }
}
@media (max-height: 740px) { .nximc .pp { top: 34%; } }
/* asking for a channel */
.nxaskch { flex: none; display: flex; gap: 8px; padding: 2px 18px 12px; }
.nxaskch label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .07); }
.nxaskch label:focus-within { border-color: var(--tt); }
.nxaskch label .nxi { flex: none; width: 17px; height: 17px; color: var(--tt); }
.nxaskch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 600 16px var(--sans); }
.nxaskch input::placeholder { color: var(--mut); }
.nxaskch input:focus, .nxaskch input:focus-visible { outline: none; box-shadow: none; }
.nxaskch .nxbtn { flex: none; height: 46px; }
.nxasks { list-style: none; margin: 0; padding: 0 18px 20px; display: grid; gap: 6px; }
.nxasks button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 14px; background: rgba(var(--fg), .06); text-align: left; font-size: 15px !important; font-weight: 700 !important; }
.nxasks em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.nxnone { margin: 0 18px 20px; padding: 16px; border-radius: 18px; background: rgba(var(--fg), .06); display: grid; gap: 10px; }
.nxnone h3 { margin: 0; font: 800 18px/1.25 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.nxnone p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--soft); }
.nxnone .fx { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); background: none; text-align: left; }
.nxnone .fx b { display: block; font-size: 15px; font-weight: 800; }
.nxnone .fx small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mut); }
.nxnone .fx em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--mut); }
.nxnone .nxbtn { justify-content: center; }

/* ---- v62 · the Now app: rails that let the page scroll, Shorts that play, Scores by day ---- */
/* a swipe that starts on a rail goes whichever way the finger does */
.rail, .comptabs, .pgrid, .dchips, .focusrail { touch-action: pan-x pan-y; }
/* and the shorts rail no longer swallows an up-and-down swipe: it may hand it on to the page */
.focusrail { overscroll-behavior-y: auto; }
/* the card in focus plays its clip, so it needs no play button */
.fphoto video.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcard.hasclip.on .play { opacity: 0; }
/* Scores & Fixtures */
.scspoil { margin: -16px -16px 14px; }
.scfind { padding: 0; }
.scfind label { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; background: var(--card); border-radius: 2px; color: var(--text); }
.scfind label svg { flex: none; width: 22px; height: 22px; }
.scfind input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; }
.scfind input::placeholder { color: var(--muted); }
.scfind input::-webkit-search-cancel-button { display: none; }
.scfind label:focus-within { box-shadow: inset 0 0 0 2px var(--yellow); }
.scmonth { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 14px; }
.scmonth h2 { margin: 0; font-size: 22px; font-weight: 400; }
.scmonth .iconbtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.scdays { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 6px; border-bottom: 2px solid var(--line); }
.scdays button { display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; border: 0; background: none; color: var(--text); border-bottom: 3px solid transparent; margin-bottom: -2px; font: inherit; }
.scdays button small { font-size: 16px; line-height: 1.2; }
.scdays button b { font-size: 17px; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; }
.scdays button:first-child, .scdays button:last-child { color: var(--muted); }
.scdays button.on { color: var(--text); border-bottom-color: var(--yellow); }
.scdays button.on small, .scdays button.on b { font-weight: 700; }
.scdays button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.scbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; }
.scpred { height: 44px; padding: 0 16px; border: 0; background: var(--yellow); color: #121212; font: inherit; font-size: 16px; font-weight: 700; }
.scsw { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15.5px; font-weight: 700; }
.scsw svg { width: 20px; height: 20px; }
.scsw[aria-pressed="true"] { color: var(--yellow); }
body[data-theme="light"] .scsw[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.scgh { display: grid; justify-items: center; gap: 2px; margin: 18px 0 10px; text-align: center; }
.scgh h3 { margin: 0; font-size: 17px; font-weight: 700; }
.scgh small { font-size: 14px; color: var(--text-2, var(--muted)); }
.scrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 12px; row-gap: 7px; align-items: center; width: 100%; padding: 13px 10px 12px; margin: 0 0 8px; border: 0; border-left: 4px solid var(--text); background: var(--card); color: var(--text); font: inherit; text-align: left; }
.scrow[hidden], .scgrp[hidden] { display: none; }
.scrow.st-live { border-left-color: var(--live); }
button.scrow:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sca, .scb { display: flex; align-items: center; min-width: 0; font-size: 15.5px; line-height: 1.2; }
.sca { justify-content: flex-end; text-align: right; }
.sca .crimg.xs, .sca .scsh { margin: 0 0 0 8px; }
.scb .crimg.xs, .scb .scsh { margin: 0 8px 0 0; }
.scrow .crimg.xs { width: 22px; height: 22px; }
/* two crests supplied for this screen, carried in the stylesheet so they add no file */
.crimg.sccr { background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 86%; }
.sccr-sco { background-image: var(--sc-sco); }
.sccr-ita { background-image: var(--sc-ita); }
.scsh { flex: none; width: 20px; height: 22px; color: var(--muted); }
.scsh svg { width: 100%; height: 100%; display: block; }
.scm { display: grid; justify-items: center; gap: 1px; min-width: 62px; }
.scm b { font-size: 20px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scm.t b { font-weight: 400; }
.scm i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.st-live .scm i { color: var(--live); }
.scm .hid { display: grid; place-items: center; color: var(--muted); }
.scsc, .scnote, .scw { grid-column: 1 / -1; }
.scsc { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); column-gap: 12px; font-size: 12.5px; line-height: 1.4; color: var(--text-2, var(--muted)); }
.scsc span:first-child { text-align: right; }
.scsc span:last-child { grid-column: 3; }
.scnote { text-align: center; font-size: 12.5px; color: var(--text-2, var(--muted)); }
.scw { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
/* the iPlayer logo as supplied, scaled down and carried in the stylesheet so it adds no file */
.svc.ip { flex: none; display: inline-block; width: 59px; height: 15px; background: var(--sc-ip) center / contain no-repeat; }
.scw em { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; font-style: normal; font-weight: 700; color: var(--text); }
.scw em svg { width: 14px; height: 14px; }
/* narrow phones: a long name stays whole */
@media (max-width: 400px) {
  .scrow { column-gap: 8px; padding-left: 8px; padding-right: 8px; }
  .sca, .scb { font-size: 14px; }
  .sca .crimg.xs, .sca .scsh { margin-left: 6px; }
  .scb .crimg.xs, .scb .scsh { margin-right: 6px; }
  .scrow .crimg.xs { width: 20px; height: 20px; }
  .scm { min-width: 52px; }
  .scm b { font-size: 18px; }
  .scsc { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); column-gap: 8px; }
}
.scnone { margin: 26px 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.scnone[hidden] { display: none; }

/* ---- v63 · a profile you add has a name of its own, and can be removed ---- */
.nxprof li.mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border-bottom: 1px solid rgba(var(--fg), .08); }
.nxprof li.mine > button[data-nxwho] { border-bottom: 0; }
.nxprof button.rm { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: -9px; border: 0; border-radius: 50%; color: var(--mut); }
.nxprof button.rm .nxi { width: 20px; height: 20px; }
.nxprof button.rm:active { background: rgba(var(--fg), .1); color: var(--ink); }
.nxprof li.rmq { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 67px; padding: 10px 0; border-bottom: 1px solid rgba(var(--fg), .08); }
.nxprof li.rmq p { margin: 0; min-width: 0; font-size: 15px; line-height: 1.3; }
.nxprof li.rmq p b { display: inline; font-size: inherit; overflow-wrap: anywhere; }
.nxprof li.rmq > span { flex: none; display: flex; gap: 8px; }
.nxprof li.rmq .nxbtn, .nxprof li.newp .nxbtn { display: inline-flex; width: auto; padding: 9px 15px; border: 1px solid transparent; text-align: center; }
.nxprof li.rmq .nxbtn.ghost { border-color: rgba(var(--fg), .22); }
.nxprof li.newp { padding: 10px 0; border-bottom: 1px solid rgba(var(--fg), .08); }
.nxprof li.newp form { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.nxprof li.newp input, .nxpname input { width: 100%; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .07); color: var(--ink); font: 700 16px var(--sans); }
.nxprof li.newp input::placeholder { color: var(--mut); font-weight: 600; }
.nxprof li.newp input:focus, .nxpname input:focus, .nxprof li.newp input:focus-visible, .nxpname input:focus-visible { outline: none; box-shadow: none; border-color: var(--tt); }
.nxprof li.newp .nxbtn { height: 46px; padding: 0 18px; }
.nxsheet.k-profile h3 label { font: inherit; color: inherit; letter-spacing: inherit; }
.nxpname { margin: 0; }
/* the ground behind a sheet shared a class name with the shirts in a line-up, so it was drawn as a small shirt in the top corner
   and caught no taps. It now covers the screen: a tap outside a sheet closes it. It stays clear, so the page looks as it did. */
body .nx .nxmineback.sh, body[data-theme="light"] .nx .nxmineback.sh { width: auto; height: auto; display: block; clip-path: none; filter: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }

/* ---- v64 · Reith, and a calmer App 2030 ------------------------------------------------
   Sans for everything you scan, Serif for what you read. App 2030 is set in Reith Bold where it
   used ExtraBold. One rhythm: 40px between sections, a title 12px above its cards. */
:root { --serif: "ReithSerifE", "BBC Reith Serif", Georgia, "Times New Roman", serif; }
:root.hasreith { --sans: "ReithSansE", "ReithSans", "Helvetica Neue", Helvetica, Arial, sans-serif; --cond: "ReithSansCdE", "ReithSansCd", "ReithSans", "Arial Narrow", sans-serif; }
:root.hasreith .nx { --sans: "ReithSans29", "ReithSansE", "ReithSans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.nx { font-family: var(--sans); }
.nx button, .nx input, .nx textarea, .nx select { font-family: inherit; }

/* rhythm */
.nx .nxsec { padding-top: 40px; }
.nx .nxsec.tour { padding-top: 0; margin-top: 40px; }
.nx .nxsec.spot { padding-top: 0; margin-top: 40px; }
.nx .nxsec.dive { padding-top: 40px; }
.nx .nxsh { padding-bottom: 12px; }
.nx .nxsh h2, .nx .nxsec.dive .nxsh h2 { font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }

/* small labels: sentence case, no tracking */
.nx :is(.nxkick, .nxstory small, .nxplayercard h4, .nxroom .k, .nxdq .k, .nxsgroup h2, .nxstrip small, .nxscan .hd, .nximc .k, .nxcourts small, .nxath .info small, .nxsr .shd, .nxsheet h3,
  .nxnextc .cd small, .nxnextc .m small, .nxdnext .k, .nxfollow .k, .fxc .k, .fxc span small, .nxglance small, .nxlead small, .nxmedia small, .prows small, .nxtoday .k, .nxwhere > .k, .nxwhere small,
  .clist .clab, .nxwhy, .nxnew, .nxtopc small, .nxlsub, .nxroomn, .nxsum small, .nxbxtop .radio small, .nxbxask .k, .nxradio .st) { text-transform: none; letter-spacing: 0; font-weight: 700; }
.nx :is(.nxkick, .nxsgroup h2, .nxscan .hd, .nxsr .shd, .nxsheet h3, .nxlsub) { font-size: 13.5px; }

/* On now: the whole name, on two lines */
.nx .nxdive { flex: 0 0 248px; grid-template-columns: 64px 1fr; padding: 8px; border-radius: 16px; }
.nx .nxdive .th { height: 64px; border-radius: 10px; }
.nx .nxdive b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.25; }
/* a title keeps its arrow on its line */
.nx .nxsec.tour .ttl b { display: block; }
.nx .nxsec.tour .ttl b .nxi { display: inline-block; vertical-align: -3px; margin-left: 6px; }
/* the names around the dial stay on one line each */
.nx .nxuni .sat small { display: block; max-width: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Serif for reading */
.nx .nxask .big { font-family: var(--serif); font-weight: 300; }
.nx .nxscan .srow b { font-family: var(--serif); font-weight: 500; }
.nx .nxpost h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.005em; }
.nx .nxstory b { font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.25; }
.nx .reader h3, .nx .nxsheet .reader h3 { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.18; letter-spacing: -.005em; }
.nx .reader > p:not(.by) { font-family: var(--serif); font-size: 17.5px; line-height: 1.6; }
.nx .reader > p.rsf { font-weight: 600; font-size: 19px; line-height: 1.45; color: var(--ink); margin-bottom: 18px; }
.nx .reader .rfig { margin: 6px 0 22px; }
.nx .reader .rfig .ph { display: block; height: 220px; border-radius: 14px; background-size: cover; background-position: center; }
.nx .reader .rfig figcaption { margin-top: 8px; font: 500 13.5px/1.4 var(--sans); color: var(--mut); }

/* Deeper dives */
.nxdeep .stack { display: grid; gap: 12px; padding: 0 20px; }
.dcard { display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; text-align: left; font: inherit; }
.dcard .tx { display: block; }
.dcard, .dcard * { white-space: normal; }
.dcard .k { display: block; margin: 0 0 6px; font: 500 13.5px/1.3 var(--sans); }
.dcard .h { display: block; font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.17; letter-spacing: -.005em; }
.dcard .dsf { display: block; margin-top: 10px; font: 400 15.5px/1.45 var(--sans); }
.dmeta { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 13px/1 var(--sans); }
.dmeta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.dcard.an { padding: 12px 12px 18px; background: #EFE5D8; color: #1A1714; }
.dcard.an .pic { display: block; height: 196px; border-radius: 12px; background-size: cover; background-position: center; margin-bottom: 14px; }
.dcard.an .tx { padding: 0 6px; }
.dcard.an .k, .dcard.an .dmeta { color: #5E554B; }
.dcard.an .dsf { color: #2B2621; }
.dcard.es { background: #F4F2EE; color: #141414; }
.dcard.es .tx { padding: 20px 20px 16px; }
.dcard.es .h { font-weight: 300; font-size: 31px; line-height: 1.1; }
.dcard.es .k, .dcard.es .dmeta { color: #555; }
.dcard.es .dsf { color: #333; }
.dcard.es .pics { position: relative; display: block; height: 230px; background-size: cover; background-position: center; }
.dcard.es .dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 9px; border-radius: 99px; background: rgba(0, 0, 0, .45); }
.dcard.es .dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .6); }
.dcard.es .dots i.on { width: 24px; background: #fff; }
.dcard.reads { background: var(--card); border: 1px solid rgba(var(--fg), .08); }
.dcard.reads .band { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 16px; background: linear-gradient(100deg, #FFD230, #FFE58A); color: #1A1400; }
.dcard.reads .band b { font: 700 16px/1.2 var(--sans); }
.dcard.reads .band span { font: 500 13.5px/1.2 var(--sans); padding-left: 10px; border-left: 1px solid rgba(26, 20, 0, .35); }
.dcard.reads .row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-top: 1px solid rgba(var(--fg), .07); background: none; text-align: left; font: inherit; color: inherit; }
.dcard.reads .row:nth-of-type(1) { border-top: 0; }
.dcard.reads .row .th { height: 96px; border-radius: 12px; background-size: cover; background-position: center; }
.dcard.reads .row .h { font-size: 18px; line-height: 1.22; color: var(--ink); }
.dcard.reads .row .dmeta { margin-top: 10px; color: var(--mut); }
.dcard:focus-visible, .dcard .row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Moments */
.nxkmhd { margin: 4px 2px 12px; font-size: 13.5px; font-weight: 700; color: var(--mut); }
.nxkm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding-bottom: 8px; }
.nxkmc { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
.nxkmc .v { position: relative; display: block; height: 232px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; }
.nxkmc .v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 58%, rgba(0, 0, 0, .62)); pointer-events: none; }
.nxkmc .min { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 4px 8px; border-radius: 8px; background: var(--y); color: #161200; font: 700 12px/1 var(--sans); font-style: normal; }
.nxkmc .dur { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font: 700 12px/1 var(--sans); font-style: normal; }
.nxkmc .dur .nxi { width: 10px; height: 10px; }
.nxkmc .now { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font: 700 13.5px/1 var(--sans); }
.nxkmc b { display: block; margin: 8px 2px 0; font-size: 14.5px; line-height: 1.3; font-weight: 700; }
.nxkmc small { display: block; margin: 3px 2px 0; font-size: 12.5px; line-height: 1.3; color: var(--mut); }
.nxkmc.hid .v { background-image: none !important; background: linear-gradient(160deg, #2A3A2E, #16201A); }
.nxkmc.hid .shade { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 8px; color: #fff; font: 700 13px/1.35 var(--sans); text-align: center; padding: 0 12px; }
.nxkmc.hid .shade .nxi { width: 22px; height: 22px; }
.nxkmc:focus-visible .v { outline: 2px solid var(--ink); outline-offset: 2px; }
.nxplayer.km { position: relative; overflow: hidden; }
.nxplayer.km .kmbg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) brightness(.55); }
.nxplayer.km .nxfoot { background: transparent; }
.nxplayer.km .nxfoot video { object-fit: contain; background: transparent; }
.nxplayer.km .kmtop { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; margin: 0; display: flex; align-items: center; gap: 8px; color: #fff; font: 700 14px/1.2 var(--sans); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.nxplayer.km .kmtop em { font-style: normal; padding: 4px 8px; border-radius: 8px; background: var(--y); color: #161200; font-size: 12px; text-shadow: none; }
.nxplayer.km .kmback { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: #111; font: 700 14px/1 var(--sans); }
.nxplayer.km .kmback .nxi { width: 16px; height: 16px; }

/* five tabs on the match page fit across a phone */
.nx .nxlivescr .nxlayers { gap: 5px; }
.nx .nxlivescr .nxlayers button { padding: 0 9px; font-size: 13.5px !important; }

/* the clip that plays by itself */
.aphost { isolation: isolate; overflow: hidden; }
.aphost > video.apv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; }
.aphost.apon > video.apv { opacity: 1; }
.aphost.apon .nxpl { opacity: 0; transition: opacity .2s; }
.apbar { position: absolute; left: 10px; right: 10px; bottom: 7px; z-index: 4; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; pointer-events: none; }
.apbar i { display: block; height: 100%; width: 0; background: #fff; transition: width .25s linear; }
.nxkmc .v .apbar { bottom: 4px; }

body[data-theme="light"] .nx .dcard.reads { background: #fff; }
body[data-theme="light"] .nx .dcard.es { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .08); }
body[data-theme="light"] .nx .dcard.an { box-shadow: inset 0 0 0 1px rgba(20, 20, 24, .06); }

/* ---- v65 · Search ------------------------------------------------------------------ */
.nx .nxsearch { height: 56px; border: 1.5px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(100deg, #9C8CFF, #6FD3FF 55%, #FFD230) border-box; }
.nx .nxsearch:focus-within { border-color: transparent; box-shadow: 0 0 0 3px rgba(111, 211, 255, .25); }
.nx .nxsearch input { font-weight: 500; font-size: 17px; }
.nx .nxsearch input::placeholder { color: var(--soft2); }
.nx .nxsearch .micb { width: 40px; height: 40px; margin-right: -8px; place-items: center; border-radius: 50%; }
.nx .nxsearch .micb .nxi { width: 20px; height: 20px; }
.nx .nxsearch.mic .micb { color: #161200 !important; background: var(--y); animation: nxmicp 1s ease-in-out infinite; }
@keyframes nxmicp { 50% { box-shadow: 0 0 0 8px rgba(255, 210, 48, .25); } }
@media (prefers-reduced-motion: reduce) { .nx .nxsearch.mic .micb { animation: none; } }
.nx .nxsr .shd2s { display: flex; align-items: center; gap: 10px; margin: 40px 0 12px; font: 700 22px/1.15 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.nx .nxsr .shd2s .sarr { width: 26px; height: 14px; }
.nx .nxstrend { margin: 14px -20px 0; }
.nx .nxstrend .nxtrend { flex-wrap: nowrap; overflow-x: auto; padding: 0 20px 2px; scrollbar-width: none; }
.nx .nxstrend .nxtrend::-webkit-scrollbar { display: none; }
.nx .nxstrend .nxtrend button { flex: none; }
/* recent searches */
.nxsrecent { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.nxsrecent::-webkit-scrollbar { display: none; }
.nxsrc { flex: 0 0 248px; scroll-snap-align: start; display: block; padding: 8px 8px 14px; border-radius: 18px; border: 1px solid rgba(var(--fg), .14); background: rgba(var(--fg), .04); text-align: left; color: inherit; font: inherit; }
.nxsrc .pic { position: relative; display: block; height: 136px; border-radius: 12px; background-size: cover; background-position: center; }
.nxsrc .lv { position: absolute; left: 8px; top: 8px; font: 700 12px/1 var(--sans); font-style: normal; background: var(--t); color: #00211F; padding: 4px 8px; border-radius: 99px; }
.nxsrc b { display: block; margin: 12px 6px 0; font: 700 17px/1.25 var(--sans); }
.nxsrc small { display: block; margin: 6px 6px 0; font: 500 14px/1.3 var(--sans); color: var(--soft2); }
/* browse */
.nxbrowse { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nxbt { position: relative; display: block; height: 104px; padding: 0; border-radius: 16px; border: 1px solid rgba(var(--fg), .14); overflow: hidden; background-size: cover; background-position: center; text-align: left; font: inherit; }
.nxbt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 12, .92) 32%, rgba(10, 10, 12, .25)); }
.nxbt span { position: absolute; left: 14px; right: 12px; bottom: 13px; z-index: 1; color: #fff; }
.nxbt b { display: block; font: 700 17px/1.2 var(--sans); }
.nxbt small { display: block; margin-top: 3px; font: 500 13.5px/1.25 var(--sans); color: rgba(255, 255, 255, .84); }
.nxbt small .dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #00CCC7; vertical-align: 1px; }
.nxbt.on { border-color: rgba(0, 204, 199, .55); }
.nxbt:focus-visible, .nxsrc:focus-visible, .nxfc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nx .nxsr .nxbrowse + .nxsports { margin-top: 12px; }
/* from what you follow: a carousel, the cut-out standing out above its card */
.nxfav { display: flex; gap: 12px; overflow-x: auto; margin: -4px -20px 0; padding: 58px 20px 6px; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.nxfav::-webkit-scrollbar { display: none; }
.nxfc { position: relative; flex: 0 0 300px; height: 250px; padding: 0; border: 0; border-radius: 20px; scroll-snap-align: start; background: var(--c1); clip-path: inset(-90px 0 0 0 round 0 0 20px 20px); text-align: left; font: inherit; color: #fff; }
.nxfc::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: var(--c1); }
.nxfc .low { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-radius: 0 0 20px 20px; background: linear-gradient(100deg, color-mix(in srgb, var(--c3) 55%, var(--c1)), var(--c3)); }
.nxfc img { position: absolute; bottom: 0; z-index: 1; object-fit: contain; object-position: right bottom; pointer-events: none; }
.nxfc .tx { position: absolute; z-index: 2; left: 18px; top: 26px; max-width: 46%; }
.nxfc.foot .tx { top: auto; bottom: 22px; }
.nxfc .lv { display: inline-block; margin-bottom: 12px; font: 700 13px/1 var(--sans); font-style: normal; background: #0E8C88; padding: 6px 10px; border-radius: 99px; }
.nxfc b { display: block; font: 700 23px/1.15 var(--sans); }
.nxfc small { display: block; margin-top: 8px; font: 500 14.5px/1.3 var(--sans); color: rgba(255, 255, 255, .82); }
.nxfavdots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 0; }
.nxfavdots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(var(--fg), .3); transition: width .2s; }
.nxfavdots i.on { width: 22px; background: var(--ink); }
body[data-theme="light"] .nx .nxbt { border-color: rgba(20, 20, 24, .12); }
body[data-theme="light"] .nx .nxsrc { background: #fff; }

/* ---- v67 · the goal drawn, As it stands, Fastest and furthest, How to follow it, and Ask answered by Claude ---- */
.nxgoal { margin: 12px 0 4px; padding: 12px; border-radius: 18px; background: var(--card2); border: 1px solid var(--ln); }
.nxgoal .two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; align-items: end; }
.nxgoal svg { display: block; width: 100%; height: auto; }
.nxgoal .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.nxgoal .nums b { display: block; font: 700 20px/1.1 var(--sans); color: var(--ink); }
.nxgoal .nums small { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--sans); color: var(--mut); }
.nxgoal .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.nxgoal .tags span { padding: 6px 10px; border-radius: 99px; background: rgba(var(--fg), .07); font: 600 13px/1 var(--sans); }
.nxgoal .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nxgrp { margin-top: 4px; border-radius: 16px; background: rgba(var(--fg), .04); padding: 4px 12px 10px; }
.nxgrp .h, .nxgrp .r { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px 28px 34px; align-items: center; gap: 6px; height: 40px; font: 500 14.5px/1 var(--sans); }
.nxgrp .h { height: 30px; font: 600 12.5px/1 var(--sans); color: var(--mut); }
.nxgrp .h span:last-child, .nxgrp .pts { text-align: right; }
.nxgrp .r { border-top: 1px solid var(--ln); }
.nxgrp .r.me { background: rgba(0, 204, 199, .08); margin: 0 -12px; padding: 0 12px; }
.nxgrp .n { color: var(--mut); }
.nxgrp .tm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nxgrp .tm b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxgrp .tm img, .nxgrp .tm i { flex: none; width: 20px; height: 20px; object-fit: contain; }
.nxgrp .tm i { border-radius: 50%; background: rgba(var(--fg), .14); display: grid; place-items: center; font: 700 10px/1 var(--sans); font-style: normal; color: var(--soft); }
.nxgrp .lv { justify-self: start; font: 700 12.5px/1 var(--sans); padding: 5px 7px; border-radius: 8px; background: rgba(var(--fg), .1); }
.nxgrp .lv.w { background: var(--t); color: #00211F; }
.nxgrp .pts { font-weight: 700; }
.nxgrp .note { margin: 8px 0 0 !important; font: 500 12.5px/1.35 var(--sans) !important; color: var(--mut) !important; }
.nx .nxstand .nxsh, .nx .nxfast .nxsh { display: block; }
.nx .nxstand .nxsh small, .nx .nxfast .nxsh small { display: block; margin-top: 4px; }
.nx .nxhow .hw > .nxbtn { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 34px; padding: 0 14px !important; border-radius: 99px; white-space: nowrap; }
.nxstand h4, .nxfast h4 { margin: 16px 0 6px; font: 700 15.5px/1.2 var(--sans); }
.nxform { display: grid; gap: 10px; }
.nxform div { display: flex; align-items: center; gap: 6px; }
.nxform img { width: 22px; height: 22px; object-fit: contain; margin-right: 4px; }
.nxform b { flex: 1; font: 700 15px/1 var(--sans); }
.nxform span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 13px/1 var(--sans); background: rgba(var(--fg), .16); }
.nxform span.w { background: var(--t); color: #00211F; }
.nxform span.l { background: #C8102E; color: #fff; }
.nxfast .r { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.nxfast .av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--fg), .12); display: grid; place-items: center; }
.nxfast .av b { font: 700 13px/1 var(--sans); }
.nxfast .av img.f { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.nxfast .av img.c { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; object-fit: contain; background: var(--card); border-radius: 50%; padding: 1px; }
.nxfast .nm { flex: 1; min-width: 0; font: 600 15.5px/1.2 var(--sans); }
.nxfast .nm i { display: block; height: 4px; margin-top: 7px; border-radius: 3px; background: rgba(0, 204, 199, .6); max-width: 100%; }
.nxfast .v { font: 700 15px/1 var(--sans); padding: 7px 10px; border-radius: 99px; white-space: nowrap; }
.nxfast .v.top { background: var(--t); color: #00211F; }
.nxhow, .nxground { margin: 4px 0 14px; padding: 14px 16px; border-radius: 18px; background: rgba(var(--fg), .04); }
.nxhow h3, .nxground h3 { margin: 0 0 8px; font: 700 16px/1.2 var(--sans); }
.nxhow .hw { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ln); }
.nxhow .hw:first-of-type { border-top: 0; }
.nxhow .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--fg), .08); font: 700 11.5px/1 var(--sans); }
.nxhow .tx { flex: 1; min-width: 0; }
.nxhow .tx b { display: block; font: 700 15px/1.25 var(--sans); }
.nxhow .tx small { display: block; margin-top: 3px; font: 500 13px/1.3 var(--sans); color: var(--mut); }
.nxground div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nxground span { padding: 10px; border-radius: 12px; background: rgba(var(--fg), .05); }
.nxground small { display: block; font: 600 11.5px/1 var(--sans); color: var(--mut); }
.nxground b { display: block; margin-top: 6px; font: 700 15px/1.2 var(--sans); }
.nxask .aino { display: flex; align-items: center; gap: 6px; margin: 10px 4px 0; font: 500 12px/1.3 var(--sans); color: var(--mut); }
.nxask .aino .nxi { color: #A9B8FF; }
.nxask .qa.ai .aiby { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 600 12.5px/1 var(--sans); color: var(--mut); }
.nxask .qa.ai .aiby em { font-style: normal; font: 700 10.5px/1 var(--sans); padding: 3px 6px; border-radius: 5px; background: rgba(156, 140, 255, .2); color: #C9C0FF; }
.nxask .qa.ai .a > p:not(.aiby):not(.aisrc):not(.aiwait):not(.aierr) { font-family: var(--serif, Georgia); font-size: 17px; line-height: 1.45; color: var(--ink); }
.nxask .qa.ai .a > p + p:not(.aisrc) { margin-top: 8px; }
.nxask .aiwait { display: flex; align-items: center; gap: 4px; color: var(--mut) !important; font-size: 14px !important; }
.nxask .aiwait i { width: 6px; height: 6px; border-radius: 50%; background: #A9B8FF; animation: nxaidot 1s ease-in-out infinite; }
.nxask .aiwait i:nth-child(2) { animation-delay: .15s; } .nxask .aiwait i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes nxaidot { 50% { opacity: .25; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .nxask .aiwait i { animation: none; } }
.nxask .aierr { color: var(--soft) !important; font-size: 14px !important; margin-top: 8px !important; }
.nxask .qa.ai .nxbtn { margin-top: 10px; }
.nxask .aisrc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px !important; font: 500 12.5px/1 var(--sans) !important; color: var(--mut) !important; }
.nxask .aisrc span { padding: 5px 9px; border-radius: 99px; border: 1px solid var(--ln); color: var(--soft); }
.nxask .aipc { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--fg), .06); }
.nxask .aipc img, .nxask .aipc i { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; }
.nxask .aipc i { display: grid; place-items: center; background: rgba(var(--fg), .14); font: 700 14px/1 var(--sans); font-style: normal; }
.nxask .aipc b { display: block; font: 700 15px/1.2 var(--sans); color: var(--ink); }
.nxask .aipc .nums { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font: 500 13px/1.2 var(--sans); color: var(--mut); }
.nxask .aipc .nums b { display: inline; font-size: 14.5px; margin-right: 3px; }
.nxask .qa.ai .nxgrp { margin-top: 12px; }
.nxask .aifu { display: flex; flex-wrap: wrap; gap: 8px; }
.nxask .aifu button { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(156, 140, 255, .55); background: transparent; font: 600 14px/1.2 var(--sans); text-align: left; }

/* ---- v68 · How it works ---------------------------------------------------------------------------------- */
.howchip { margin-left: 0; }
.howchip svg { width: 12px; height: 12px; }
.howdlg { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .64); }
.howbox { position: relative; width: min(880px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 24px 26px 20px; border-radius: 18px; border: 1px solid #2C2C33; background: #141418; color: #fff; box-shadow: 0 40px 90px -20px #000; font-family: var(--sans, "BBC Reith Sans", Helvetica, Arial, sans-serif); text-align: left; }
.howtag { display: inline-block; margin-bottom: 12px; padding: 5px 8px; border-radius: 4px; background: #1D3B8A; color: #CFE0FF; font: 700 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.howbox h3 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; font-weight: 700; }
.howp { margin: 0 0 16px; color: #C9C9CF; font-size: 16px; line-height: 1.45; }
.howx { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #B5B5BC; font-size: 28px; line-height: 1; cursor: pointer; }
.howx:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.howv { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.howv video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.howcover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; padding: 20px; cursor: pointer; color: #fff; text-align: center;
  background: radial-gradient(60% 70% at 72% 50%, rgba(0, 140, 130, .35), rgba(0, 40, 40, .1) 60%, transparent 85%), radial-gradient(50% 60% at 20% 40%, rgba(120, 60, 190, .28), transparent 70%), #0A0A0D; }
.howcover[hidden] { display: none; }
.howpl { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #FFD230; color: #000; }
.howpl svg { width: 30px; height: 30px; margin-left: 4px; }
.howcover b { font-size: 20px; font-weight: 700; }
.howcover small { font-size: 14px; color: #C9C9CF; }
.howst { position: absolute; left: 12px; right: 12px; top: 12px; margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .75); text-align: center; font-size: 14px; line-height: 1.35; color: #E6E6EA; }
.howst[hidden] { display: none; }
.howsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.howsteps button { display: flex; justify-content: space-between; gap: 8px; min-height: 44px; align-items: center; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: #1E1E24; color: #fff; font: 600 14px/1.25 var(--sans, Helvetica, Arial, sans-serif); text-align: left; cursor: pointer; }
.howsteps button i { flex: none; font-style: normal; font-weight: 700; color: #FFD230; }
.howsteps button:hover { background: #26262E; }
.howsteps button.on { border-color: #FFD230; }
.howfoot { display: flex; justify-content: flex-end; margin-top: 14px; }
.howfoot button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: #fff; font: 700 15px/1.2 var(--sans, Helvetica, Arial, sans-serif); cursor: pointer; }
.howfoot button:hover { text-decoration: underline; }
.howdlg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* on a phone it rises as a sheet from the foot of the screen */
.howdlg.howsheet { place-items: end stretch; padding: 0; background: rgba(0, 0, 0, .7); }
.howdlg.howsheet .howbox { width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.howdlg.howsheet h3 { font-size: 22px; padding-right: 40px; }
.howdlg.howsheet .howp { font-size: 15px; }
.howdlg.howsheet .howsteps { grid-template-columns: 1fr 1fr; }
.howdlg.howsheet .howpl { width: 58px; height: 58px; }
.howdlg.howsheet .howcover b { font-size: 17px; }
.howdlg.howsheet .howcover small { font-size: 12.5px; }
.pc .pcrow.pchow { background: rgba(255, 210, 48, .1); }

/* ---- v69 · tap the picture on Home to watch full screen ------------------------------------------------- */
.livetake .tostill[role="button"] { cursor: pointer; }
.livetake .tostill[role="button"]:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.nxherotap { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.nxherotap:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.nxplayer .fsin { position: absolute; z-index: 3; right: 10px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; padding: 0; }
.nxplayer.fs { position: absolute; inset: 0; height: auto; z-index: 300; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.nxplayer.fs .nxfoot { position: absolute; inset: 0; }
.nxplayer.fs .nxfoot video, .nxplayer.fs .nxfoot img { object-fit: contain !important; }
.nxplayer.fs .sb { top: calc(14px + env(safe-area-inset-top, 0px)); left: 60px; }
.nxplayer.fs .fsx { position: absolute; z-index: 3; left: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; padding: 0; }
.nxplayer.fs .bar { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.nxplayer .fsrot { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font: 600 13px/1.3 var(--sans); color: rgba(255, 255, 255, .72); }
@media (orientation: landscape) { .nxplayer .fsrot { display: none; } }
/* ---- v70 · press, wait and slide, as an app does ----------------------------------------------------------- */
.mot-press { transform: scale(.97); opacity: .82; transition: transform .12s ease-out, opacity .12s ease-out; }
@keyframes motFwd { from { transform: translateX(36px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes motBack { from { transform: translateX(-36px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes motTab { from { opacity: 0; } to { opacity: 1; } }
.mot-in-fwd { animation: motFwd .32s cubic-bezier(.2, .8, .2, 1) both; }
.mot-in-back { animation: motBack .3s cubic-bezier(.2, .8, .2, 1) both; }
.mot-in-tab { animation: motTab .22s ease-out both; }
.navskel { position: absolute; inset: 0; z-index: 250; padding: 64px 16px 0; background: #0B0B0C; display: flex; flex-direction: column; gap: 14px; animation: motTab .12s ease-out both; }
body[data-theme="light"] .navskel { background: #F4F3EF; }
.navskel i, .navskel span i { display: block; border-radius: 14px; background: linear-gradient(90deg, rgba(128, 128, 128, .12) 0, rgba(128, 128, 128, .26) 40%, rgba(128, 128, 128, .12) 80%); background-size: 300% 100%; animation: motShim 1s linear infinite; }
.navskel .k1 { height: 22px; width: 46%; } .navskel .k2 { height: 190px; } .navskel .k3 { height: 16px; width: 82%; } .navskel .k4 { height: 16px; width: 64%; } .navskel .k5 { height: 16px; width: 72%; }
.navskel span { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .navskel span i { height: 110px; }
@keyframes motShim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .mot-in-fwd, .mot-in-back, .mot-in-tab, .navskel, .navskel i { animation: none !important; } }

/* ---- v70 · thinking, then the answer arrives ------------------------------------------------------------------ */
.nxthinking { display: flex; align-items: center; gap: 5px; margin: 2px 0 6px; font: 500 14px/1.3 var(--sans); color: var(--mut); }
.nxthinking i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: nxthink 1s ease-in-out infinite; }
.nxthinking i:nth-child(2) { animation-delay: .15s; } .nxthinking i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes nxthink { 50% { opacity: 1; transform: translateY(-3px); } }
.awhold { display: none !important; }
.awin { animation: motTab .35s ease-out both; }
.nxask.streaming .go, .nxask.streaming .qs, .nxask.streaming .askf { opacity: .35; pointer-events: none; transition: opacity .2s; }
.nxaskconv { margin: 4px 0 0; padding: 0 18px 20px; overflow-y: auto; }
.nxaskconv .you { margin: 0 0 10px auto; width: max-content; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: rgba(255, 210, 48, .16); font: 600 15px/1.3 var(--sans); }
.nxaskconv .bot > p:first-child:not(.nxthinking) { margin: 0; font: 500 16px/1.45 var(--serif, Georgia); color: var(--ink); }
.nxaskrows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.nxaskrows li { display: flex; align-items: center; gap: 10px; animation: motFwd .3s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 120ms); }
.nxaskrows .th { flex: none; width: 46px; height: 46px; border-radius: 10px; background-size: cover; background-position: center; }
.nxaskrows b { flex: 1; font: 600 14px/1.25 var(--sans); } .nxaskrows em { font-style: normal; font: 600 12.5px/1 var(--sans); color: var(--mut); }
.nxaskby { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font: 500 12.5px/1 var(--sans); color: var(--mut); }

/* ---- v70 · a call and a card, made to travel ---------------------------------------------------------------- */
.nxsharelead { margin: 2px 0 14px; font: 500 15px/1.4 var(--sans); color: var(--soft, #C9C9CF); }
.nxsharecard { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto 16px; padding: 18px 16px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); color: #fff; overflow: hidden; }
.nxsharecard .mk { align-self: flex-start; display: flex; align-items: center; gap: 6px; height: 16px; } .nxsharecard .mk svg { height: 16px; width: auto; }
.nxsharecard.call { width: 230px; min-height: 380px; background: linear-gradient(160deg, #0B2C2A, #09090A 55%, #1E1630); }
.nxsharecard .vs { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 28px 0 8px; }
.nxsharecard .vs img, .nxsharecard .vs i { width: 46px; height: 46px; object-fit: contain; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); font: 800 18px/1 var(--sans); font-style: normal; }
.nxsharecard .vs img { background: none; border-radius: 0; }
.nxsharecard .vs em { font-style: normal; font: 700 12px/1.2 var(--sans); color: #A3A3AB; text-align: center; }
.nxsharecard .sc { font: 800 72px/1 var(--sans); letter-spacing: -.02em; }
.nxsharecard .who { margin-top: 8px; text-align: center; font: 700 14px/1.3 var(--sans); color: #D6D6DC; }
.nxsharecard .strk { display: flex; align-items: center; gap: 5px; margin-top: 16px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 210, 48, .15); color: #FFD230; font: 700 12.5px/1 var(--sans); }
.nxsharecard .ask { margin-top: auto; align-self: stretch; padding: 11px; border-radius: 12px; background: #fff; color: #000; text-align: center; font: 800 15px/1.2 var(--sans); }
.nxsharecard.fight { width: 100%; max-width: 330px; align-items: stretch; background: linear-gradient(170deg, #2A1240, #09090A 65%); }
.nxsharecard .kk { margin-top: 14px; font: 600 12px/1 var(--sans); color: #A3A3AB; } .nxsharecard .tt { margin: 4px 0 12px; font: 800 22px/1.1 var(--sans); }
.nxsharecard .rw { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, .06); margin-bottom: 6px; font: 600 14px/1.2 var(--sans); }
.nxsharecard .rw em { font-style: normal; color: #A3A3AB; } .nxsharecard .rw.me { background: rgba(185, 168, 255, .2); } .nxsharecard .rw.me em { color: #E6DEFF; }
.nxsharecard .nxbxrow { margin: 8px 0 4px; }
.nxsharecard .ft { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font: 700 13.5px/1.35 var(--sans); }
.nxprev { display: flex; align-items: center; gap: 6px; margin: 10px 2px 2px; font: 500 12.5px/1.35 var(--sans); color: var(--mut); }
.nxshareto { margin-top: 14px; }
.nxsheet.k-sharecall .nxbtn.wide { margin-top: 12px; }
/* Home: what a shared link carries */
.nxincoming { position: relative; display: flex; gap: 12px; margin: 6px 16px 14px; padding: 14px 40px 14px 14px; border-radius: 16px; border: 1.5px dashed rgba(185, 168, 255, .65); background: rgba(185, 168, 255, .1); }
.nxincoming .av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #3B2E70; display: grid; place-items: center; font: 800 14px/1 var(--sans); font-style: normal; }
.nxincoming b { display: block; font: 700 15px/1.25 var(--sans); } .nxincoming small { display: block; margin-top: 3px; font: 500 13px/1.35 var(--sans); color: var(--soft, #C9C9CF); }
.nxincoming .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nxincoming .x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--mut); display: grid; place-items: center; }
.nxsharecard .d { display: block; border-radius: 50%; }
.nxsharecard .d.r { background: #E5484D; } .nxsharecard .d.b { background: #3E7BFA; } .nxsharecard .d.e { background: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); } .nxsharecard .d.x { background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.nxsharecard .nxbxrow span { background: rgba(255, 255, 255, .06); color: #A3A3AB; outline: 0; }
.nxsheet .targets.nxshareto { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.nxsheet .targets.nxshareto button { padding: 8px 0 6px; border: 0; background: none; font-size: 11.5px !important; font-weight: 600 !important; white-space: nowrap; }
.nxsheet .targets.nxshareto button > i { width: 48px; height: 48px; }
.nxsheet .targets.nxshareto button[data-nxshareto="fm"] > i { background: #FFD230; color: #000; }
@media (max-width: 360px) { .nxsheet .targets.nxshareto button { font-size: 10.5px !important; } .nxsheet .targets.nxshareto button > i { width: 44px; height: 44px; } }
@media (max-width: 430px) { .nxaskconv { padding-left: 12px; padding-right: 12px; } }

/* ==========================================================================
   v72 · TV · 2030: the TV and the phone beside it, across the sporting year
   ========================================================================== */
body[data-surface="tv30"] .deskstage {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 32px; align-items: start; justify-content: center;
  max-width: 1720px; width: 100%; margin: 0 auto;
}
body[data-surface="tv30"] .tvwrap { width: 100%; padding-top: 18px; }
body[data-surface="tv30"] .devcap { display: block; }
body[data-surface="tv30"] .phonecap::after { content: " · work in progress"; color: var(--yellow); }
@media (max-width: 980px) { body[data-surface="tv30"] .deskstage { grid-template-columns: 1fr; justify-items: center; } }
@media (max-width: 760px) { body[data-surface="tv30"] .tvwrap { padding: 12px 10px 30px; } }

/* the caption under the TV: the day, the four tools, a line on what the sport earns */
.tvcap .t3capd { display: block; font-size: 15px; color: #fff; margin-bottom: 8px; }
.tvcap .t3capd b { font-weight: 800; }
.t3tags { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.t3tags i { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: #77777f; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); }
.t3tags i.on { color: #7ff2ea; background: rgba(0,194,181,.14); box-shadow: inset 0 0 0 1.5px rgba(0,194,181,.55); }
.t3tags i.most { color: var(--yellow); background: rgba(255,210,48,.12); box-shadow: inset 0 0 0 1.5px rgba(255,210,48,.6); }
.t3capn { display: block; max-width: 760px; margin: 0 auto 6px; line-height: 1.45; }

/* the year row in the desk bar */
.ctlrow.t3yr { align-items: center; }
.t3yrs { display: flex; flex-direction: column; gap: 4px; flex: none; }
.t3ytab { border: 0; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; text-align: left; white-space: nowrap; }
.t3ytab.on { background: #fff; color: #101010; }
.t3rib { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.t3ev { border: 0; display: grid; text-align: left; gap: 1px; font-size: 12px; font-weight: 700; padding: 5px 11px 6px; border-radius: 9px; background: #1d1d22; color: #d0d0d6; white-space: nowrap; box-shadow: inset 0 0 0 1px #34343b; }
.t3ev small { font-size: 10px; font-weight: 700; color: #8a8a93; letter-spacing: .04em; text-transform: uppercase; }
.t3ev.sum { box-shadow: inset 0 0 0 1px rgba(0,194,181,.45); }
.t3ev:hover { color: #fff; }
.t3ev.on { background: #fff; color: #101010; box-shadow: none; }
.t3ev.on small { color: #555; }
@media (max-width: 760px) { .t3rib { flex-wrap: nowrap; overflow-x: auto; } }

/* ---- the screen, drawn at 1280 x 720 ---- */
#tvapp.t3 { background: #0a0a0c; color: #fff; overflow: hidden; font-family: var(--sans); }
.t3 .t3bg, .t3 .t3full { position: absolute; inset: 0; }
.t3 .t3bg img, .t3 .t3bg video, .t3 .t3full img, .t3 .t3full video, .t3 .t3bg .photo, .t3 .t3full .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.t3 .t3bg > *, .t3 .t3full > * { width: 100%; height: 100%; }
.t3 .t3full.radio { filter: brightness(.22) blur(4px); transform: scale(1.04); }
.t3veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,6,8,.94) 0, rgba(6,6,8,.6) 40%, rgba(6,6,8,0) 66%), linear-gradient(0deg, rgba(6,6,8,.96) 0, rgba(6,6,8,.45) 40%, rgba(6,6,8,0) 58%); }
.t3veil.heavy { background: linear-gradient(90deg, rgba(6,6,8,.97) 0, rgba(6,6,8,.84) 45%, rgba(6,6,8,.25) 75%), linear-gradient(0deg, rgba(6,6,8,.96) 0, rgba(6,6,8,.4) 40%, rgba(6,6,8,0) 58%); }
.t3veil.lo { background: linear-gradient(0deg, rgba(6,6,8,.9) 0, rgba(6,6,8,0) 34%); }
.t3veil.lo.heavy { background: rgba(6,6,8,.35); }

.t3top { position: absolute; left: 0; right: 0; top: 0; height: 76px; display: flex; align-items: center; padding: 0 48px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); z-index: 3; }
.t3bb i { width: 27px; height: 27px; font-size: 18px; }
.t3nav { margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.t3n { border: 0; background: transparent; color: #ddd; font: 500 18px var(--sans); padding: 8px 20px; border-radius: 30px; display: flex; align-items: center; gap: 8px; }
.t3n svg { width: 20px; height: 20px; }
.t3n.on { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); color: #fff; }
.t3dot { width: 8px; height: 8px; border-radius: 50%; background: #00C2B5; display: inline-block; }
.t3av { width: 36px; height: 36px; border-radius: 50%; background: #7a5af8; display: grid; place-items: center; font: 700 16px var(--sans); }

.t3hero { position: absolute; left: 64px; top: 140px; width: 660px; z-index: 2; }
.t3art { display: block; width: 210px; height: 118px; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.t3art img { width: 100%; height: 100%; object-fit: cover; }
.t3art.big { width: 300px; height: 168px; }
.t3kick { display: flex; align-items: center; gap: 10px; font: 700 18px var(--sans); color: #e8e8ec; flex-wrap: wrap; margin: 0 0 4px; }
.t3live { background: #00C2B5; color: #001b19; font: 800 15px var(--sans); padding: 4px 10px; border-radius: 6px; letter-spacing: .06em; }
.t3live.sm { position: absolute; left: 8px; top: 8px; font-size: 12px; padding: 3px 7px; }
.t3q { background: rgba(255,255,255,.16); font: 700 15px var(--sans); padding: 4px 10px; border-radius: 6px; }
.t3y { background: var(--yellow); color: #111; font: 800 15px var(--sans); padding: 4px 10px; border-radius: 6px; }
.t3t { font: 800 64px/1.02 var(--sans); letter-spacing: -.02em; margin: 14px 0 10px; }
.t3t.m { font-size: 48px; }
.t3m { font: 500 20px/1.4 var(--sans); color: #d6d6dc; margin: 0; }
.t3btns { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.t3b { border: 0; display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 30px; font: 700 18px var(--sans); color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.t3b.pri { background: rgba(255,255,255,.92); color: #000; }
.t3b.pri svg path { fill: #000; }
.t3 .f { outline: 4px solid #fff; outline-offset: 3px; }
.t3n.f { outline-offset: 0; }

.t3panel { position: absolute; right: 40px; top: 104px; width: 380px; border-radius: 16px; background: rgba(14,14,18,.88); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); padding: 18px 20px; z-index: 2; }
.t3panel h4 { font: 700 15px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #a9a9b2; margin: 0 0 8px; }
.t3panel h4.h2 { margin-top: 14px; }
.t3ln { display: flex; justify-content: space-between; align-items: center; font: 500 17px/1.25 var(--sans); padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); gap: 10px; }
.t3panel h4 + .t3ln, .t3big + .t3ln { border-top: 0; }
.t3ln b { font-weight: 700; }
.t3ln span { color: #c9c9cf; text-align: right; }
.t3ln em { font-style: normal; font-weight: 800; }
.t3ln b.r { text-align: right; }
.t3ln.hl, .t3ln.hl span, .t3ln.hl em { color: var(--yellow); }
.t3big { font: 800 52px var(--sans); letter-spacing: .1em; margin: 4px 0 8px; }
.t3foot { font: 500 15px/1.35 var(--sans); color: #c9c9cf; margin: 10px 0 0; }

.t3svgwrap { position: absolute; right: 50px; top: 96px; width: 420px; z-index: 2; }
.t3svgwrap.pl { top: 120px; right: 60px; width: 440px; }
.t3svg { width: 100%; height: auto; display: block; font-family: var(--sans); }

.t3row { position: absolute; left: 64px; right: 0; bottom: 40px; z-index: 2; }
.t3row h2 { font: 700 20px var(--sans); margin: 0 0 12px; }
.t3cards { display: flex; gap: 14px; }
.t3card { flex: none; width: 272px; height: 92px; border: 0; color: #fff; text-align: left; border-radius: 14px; background: rgba(30,30,36,.85); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); display: flex; align-items: center; padding: 0 14px; gap: 12px; overflow: hidden; }
.t3card.t { background: linear-gradient(120deg, rgba(0,140,130,.6), rgba(0,90,85,.4)); box-shadow: inset 0 0 0 2px rgba(0,194,181,.7); }
.t3th { width: 74px; height: 64px; border-radius: 9px; overflow: hidden; flex: none; position: relative; display: block; }
.t3th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t3th.txt { background: #22222a; display: grid; place-items: center; font: 800 24px var(--sans); color: var(--yellow); }
.t3ct b { display: block; font: 700 17px/1.2 var(--sans); }
.t3ct small { display: block; font: 500 14px/1.3 var(--sans); color: #c4c4cc; margin-top: 4px; }

.t3roomv { position: absolute; left: 64px; top: 96px; z-index: 3; background: var(--yellow); color: #111; font: 700 17px var(--sans); padding: 8px 14px; border-radius: 10px; }
.t3roomv b { font-weight: 800; margin-right: 6px; }
.t3pres { position: absolute; left: 40px; top: 30px; display: flex; align-items: center; gap: 10px; font: 700 16px var(--sans); background: rgba(10,10,12,.72); padding: 8px 14px; border-radius: 30px; z-index: 2; }
.t3faces { display: inline-flex; } .t3faces i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1a1a1f; margin-left: -7px; display: inline-grid; place-items: center; font: 800 11px var(--sans); font-style: normal; }
.t3faces i:first-child { margin-left: 0; }
.t3radio { position: absolute; left: 64px; top: 110px; width: 560px; z-index: 2; }
.t3tl { position: absolute; left: 40px; right: 40px; bottom: 120px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.25); z-index: 2; }
.t3tl i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #00C2B5; }
.t3tl em { position: absolute; top: -4px; width: 4px; height: 14px; background: var(--yellow); border-radius: 2px; }
.t3cap { position: absolute; left: 40px; right: 40px; bottom: 34px; height: 66px; border-radius: 14px; background: rgba(10,10,12,.88); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); display: flex; align-items: center; gap: 16px; padding: 0 20px; font: 600 20px var(--sans); z-index: 2; }
.t3hint { margin-left: auto; font: 500 15px var(--sans); color: #aaa; }
.t3ctl { position: absolute; left: 40px; right: 40px; bottom: 34px; display: flex; gap: 12px; z-index: 3; }
.t3toast { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); background: #fff; color: #101010; font: 700 18px var(--sans); padding: 12px 22px; border-radius: 999px; z-index: 6; white-space: nowrap; }

.t3streams { position: absolute; left: 64px; right: 64px; top: 110px; z-index: 2; }
.t3streams h1 { font: 800 44px var(--sans); margin: 0 0 6px; }
.t3sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.t3sc { border: 0; color: #fff; text-align: left; background: rgba(30,30,36,.85); border-radius: 14px; padding: 0 0 14px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.t3sc .t3th { width: 100%; height: 150px; border-radius: 0; margin-bottom: 10px; }
.t3sc b { display: block; font: 700 18px var(--sans); padding: 0 14px; }
.t3sc small { display: block; font: 500 14px var(--sans); color: #c4c4cc; padding: 4px 14px 0; }

.t3multi { position: absolute; left: 24px; right: 24px; top: 24px; bottom: 112px; display: grid; gap: 14px; }
.t3multi.h { grid-template-columns: 1fr 1fr; align-content: center; }
.t3multi.h .t3mt { aspect-ratio: 16 / 9; }
.t3multi.q { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.t3mt { position: relative; border: 0; padding: 0; overflow: hidden; border-radius: 12px; background: #111; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.t3mt > img, .t3mt > video, .t3mt > .photo { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.t3mt.on { box-shadow: 0 0 0 4px #00C2B5; }
.t3mtl { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; align-items: baseline; gap: 10px; background: rgba(10,10,12,.8); padding: 8px 12px; border-radius: 10px; text-align: left; color: #fff; }
.t3mtl b { font: 700 18px var(--sans); } .t3mtl small { font: 500 14px var(--sans); color: #c4c4cc; }
.t3mtl em { margin-left: auto; font: 800 13px var(--sans); font-style: normal; color: #00C2B5; display: flex; align-items: center; gap: 6px; }
.t3cap.mv { bottom: 30px; }

/* ---- the phone beside it ---- */
.t3phone { height: 780px; max-height: calc(100dvh - 190px); min-height: 520px; overflow: hidden; position: relative; display: flex; flex-direction: column; background: #0b0b0d; }
.t3ph { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.t3ph b { font-size: 17px; font-weight: 800; }
.t3pd { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.t3ptabs { display: flex; gap: 6px; padding: 0 16px 10px; }
.t3ptabs button { flex: 1; border: 0; padding: 9px 0; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: #1c1c22; color: #c4c4cc; }
.t3ptabs button.on { background: #fff; color: #101010; }
.t3pbody { flex: 1; overflow-y: auto; padding: 4px 14px 90px; }
.t3pc { border-radius: 18px; background: #1c1c22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); padding: 13px 15px; margin-bottom: 10px; }
.t3pc .k { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); margin: 0 0 5px; }
.t3pc.t { background: linear-gradient(120deg, rgba(0,140,130,.5), rgba(0,90,85,.3)); }
.t3pc.t .k { color: #00C2B5; }
.t3pc.y { box-shadow: inset 0 0 0 1.5px rgba(255,210,48,.6); }
.t3pc b { display: block; font-size: 16.5px; line-height: 1.25; }
.t3pc p { font-size: 14px; line-height: 1.35; color: #c4c4cc; margin: 4px 0 0; }
.t3pc .bt { display: flex; gap: 8px; margin-top: 10px; }
.t3pc .bt button { flex: 1; border: 0; font-size: 14px; font-weight: 700; padding: 9px 0; border-radius: 12px; background: #fff; color: #000; }
.t3pc .bt button.g { background: rgba(255,255,255,.14); color: #fff; }
.t3pc .t3vw { color: var(--yellow); font-weight: 700; }
.t3pnote { font-size: 13px; color: var(--muted); line-height: 1.4; margin: 2px 2px 12px; }
.t3nt { display: flex; gap: 12px; border-radius: 18px; background: #1d2632; padding: 11px 13px; margin-bottom: 9px; align-items: flex-start; }
.t3nt .ic { width: 40px; height: 40px; border-radius: 9px; background: var(--yellow); color: #111; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; flex: none; }
.t3nt b { display: block; font-size: 14.5px; line-height: 1.25; }
.t3nt small { display: block; font-size: 13px; color: #c9ced6; line-height: 1.3; margin-top: 2px; }
.t3nt em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #a9aeb6; flex: none; }
.t3nt.fold { background: transparent; border: 1px dashed rgba(255,255,255,.28); }

.t3 .t3bg.zoom > *, .t3 .t3full.zoom > * { transform: scale(1.25); transform-origin: 30% 100%; }
.t3hero.art { top: 108px; }
.t3hero.art .t3art { width: 168px; height: 94px; margin-bottom: 12px; }
.t3mt.zoom > img, .t3mt.zoom > video, .t3mt.zoom > .photo { transform: scale(1.25); transform-origin: 30% 100%; }
.t3navv { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 10px auto 8px; }
.t3navv em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8aa7ff; margin-right: 4px; }
.t3navv button { border: 0; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #10162a; color: #b9c6f0; box-shadow: inset 0 0 0 1px #2c3c6e; }
.t3navv button.on { background: #2f5bd9; color: #fff; box-shadow: none; }

/* ==========================================================================
   v73: football first, cricket second
   ========================================================================== */
/* App and website: What do you follow? */
#app .fcfolsec { padding: 8px var(--gut) 26px; }
#app .fcfol { padding: 18px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(160deg, rgba(255,210,48,.10), rgba(255,210,48,0) 60%), var(--panel); }
#app .fcfol.w { border-radius: 4px; padding: 20px; height: 100%; }
#app .fck { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
#app .fcfol h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
#app .fcfol .fcp { margin: 0 0 14px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
#app .fccrests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; margin-bottom: 12px; }
#app .fcfol.w .fccrests { display: flex; flex-wrap: wrap; gap: 10px; }
#app .fccrests button { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; }
#app .fcfol.w .fccrests button { width: 62px; }
#app .fccrests i { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: #fff; border: 2px solid rgba(128,128,128,.25); }
#app .fcfol.w .fccrests i { width: 46px; height: 46px; }
#app .fccrests i img { width: 70%; height: 70%; object-fit: contain; }
#app .fccrests button.on i { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,210,48,.35); }
#app .fccrests button.more i { background: var(--card-2); border-style: dashed; color: var(--yellow); font-size: 22px; }
#app .fccrests button:focus-visible i { outline: 2px solid var(--yellow); outline-offset: 2px; }
#app .fchint { margin: 0; font-size: 12.5px; color: var(--muted); }
/* Cricket today and Football across the country */
#app .fclist { display: grid; gap: 10px; }
#app .fcrow { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
#app .fcimg { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--card); }
#app .fcimg img, #app .fcimg .photo { width: 100%; height: 100%; object-fit: cover; display: block; }
#app .fcimg .ecdot { position: absolute; top: 6px; left: 6px; }
#app .fctx { display: grid; gap: 3px; min-width: 0; }
#app .fctx small { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
#app .fctx small.lv { color: var(--live); }
#app .fctx b { font-size: 15px; line-height: 1.25; }
#app .fctx span { font-size: 13px; line-height: 1.35; color: var(--text-2); }
#app .fcgrounds { display: grid; }
#app .fcg { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
#app .fcg small { grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#app .fcg b { font-size: 15.5px; }
#app .fcg em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--yellow); align-self: center; white-space: nowrap; }
#app .fcg em.lv { color: var(--live); }
#app .fcg span { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); }
#app .fcgrounds.w { grid-template-columns: repeat(4, 1fr); gap: 20px; }
#app .fcgrounds.w .fcg { border-bottom: 0; border-top: 3px solid var(--yellow); padding-top: 10px; display: block; }
#app .fcgrounds.w .fcg small, #app .fcgrounds.w .fcg b, #app .fcgrounds.w .fcg span, #app .fcgrounds.w .fcg em { display: block; }
#app .fcgrounds.w .fcg b { margin: 4px 0; font-size: 17px; }
#app .fcgrounds.w .fcg em { margin-top: 6px; }
#app .fctwo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#app .fcbox { border: 1px solid var(--line); border-radius: 4px; padding: 20px; background: var(--panel); }
#app .fcbox .fcrow { border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: none; padding: 12px 0; grid-template-columns: 96px 1fr; }
#app .fcbox .fcrow:last-child { border-bottom: 0; }
@media (max-width: 900px) { #app .fctwo { grid-template-columns: 1fr; } #app .fcgrounds.w { grid-template-columns: 1fr 1fr; } }

/* App 2030: your club, across the country */
.nx .fcn-sec { padding-bottom: 26px; }
.nx .fcn-club { display: flex; align-items: center; gap: 12px; margin: 0 20px 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.nx .fcn-club b { display: block; font-size: 24px; line-height: 1.1; }
.nx .fcn-club span { font-size: 13.5px; color: var(--mut); }
.nx .fcn-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.nx .fcn-row::-webkit-scrollbar { display: none; }
.nx .fcn-c { flex: 0 0 74%; scroll-snap-align: start; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--ln); padding: 0; color: inherit; text-align: left; font: inherit; }
.nx .fcn-c i { display: block; height: 128px; background-size: cover; background-position: center; }
.nx .fcn-c span { display: block; padding: 12px 14px 14px; }
.nx .fcn-c small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t); margin-bottom: 4px; }
.nx .fcn-c b { display: block; font-size: 17px; line-height: 1.25; }
.nx .fcn-c em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--mut); line-height: 1.35; }
.nx .fcn-sub { color: var(--mut); font-size: 13px; }
.nx .fcn-list { margin: 0 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--ln); padding: 2px 14px; }
.nx .fcn-g { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--ln); background: none; color: inherit; text-align: left; font: inherit; }
.nx .fcn-g:last-child { border-bottom: 0; }
.nx .fcn-g small { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.nx .fcn-g b { font-size: 16px; }
.nx .fcn-g em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--y); align-self: center; }
.nx .fcn-g em.l { color: var(--t); }
.nx .fcn-g span { grid-column: 1 / -1; font-size: 13px; color: var(--mut); }
.nx .tour .ttl .nxbadge + span b { white-space: normal; }

/* App 2030 picker: the Sports tab gives football and cricket the room */
.nxtray .fcq-big { display: grid; gap: 8px; margin-bottom: 10px; width: 100%; min-width: 0; }
.nxtray .fcq-t { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(var(--fg), .22); background: rgba(34, 34, 40, .92); }
.nxtray .fcq-t.on { border-color: var(--y); background: rgba(255, 210, 48, .10); }
.nxtray .fcq-t > .hit { position: absolute; inset: 0; border: 0; background: none; border-radius: inherit; }
.nxtray .fcq-t .e { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-style: normal; background: rgba(var(--fg), .1); }
.nxtray .fcq-t b { display: block; font-size: 16px; }
.nxtray .fcq-t small { display: block; font-size: 12px; color: var(--mut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxtray .fcq-t em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--y); }
.nxtray .fcq-subs { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.nxtray .fcq-subs button { padding: 5px 10px; border-radius: 14px; border: 1px solid rgba(var(--fg), .2); background: none; color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; }
.nxtray .fcq-subs button.on { background: var(--y); color: #161200; border-color: var(--y); }
.nxtray .fcq-small { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.nxtray .fcq-small button { padding: 7px 11px; border-radius: 16px; border: 1px solid rgba(var(--fg), .18); background: rgba(34, 34, 40, .9); color: inherit; font: inherit; font-size: 13px; font-weight: 700; }
.nxtray .fcq-small button.on { border-color: var(--y); color: var(--y); }
.nxtray .slots.fcqwrap { display: block; height: auto; overflow-y: auto; max-height: 300px; scrollbar-width: none; }
.nxtray .fcq-subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
.nxtray .fcq-subs::-webkit-scrollbar { display: none; }
.nxtray .fcq-subs button { flex: none; }
.nxsec.tour .who.cut.root { left: -86px; top: 6px; width: 470px; -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
body[data-theme="light"] .nxsec.tour .who.cut.root { left: -98px; }

/* ==========================================================================
   v74: the top of a live screen tucks away while you read
   ========================================================================== */
.nxlivescr .nxstagewrap { display: grid; grid-template-rows: 1fr; flex: none; transition: grid-template-rows .28s ease, opacity .2s ease; }
.nxlivescr .nxstagein { min-height: 0; overflow: hidden; }
.nxlivescr.tuck .nxstagewrap { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.nxlivescr .nxmini { display: none; align-items: center; gap: 10px; flex: none; margin: 0 12px; padding: 7px 12px 7px 7px; border-radius: 16px; border: 1px solid rgba(0, 204, 199, .35); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nxlivescr.tuck .nxmini { display: flex; animation: nxminiin .25s ease; }
.nxmini .msb { flex: none; display: flex; align-items: baseline; gap: 6px; max-width: 52%; overflow: hidden; padding: 7px 10px; border-radius: 11px; background: rgba(var(--fg), .08); font-size: 13px; font-weight: 800; white-space: nowrap; }
.nxmini .msb span { font-weight: 800; }
.nxmini .msb em { font-style: normal; font-weight: 700; color: var(--t); }
.nxmini .mtx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nxmini small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--t); white-space: nowrap; overflow: hidden; }
.nxmini small .nxi { width: 14px; height: 14px; flex: none; }
.nxmini .mtx b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxmini > .nxi { flex: none; transform: rotate(90deg); opacity: .7; }
.nxmini:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
@keyframes nxminiin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nxlivescr .nxstagewrap { transition: none; } .nxlivescr.tuck .nxmini { animation: none; } }

/* ==========================================================================
   v75: Immerse reads as a stack you swipe through, and the picture takes the screen
   ========================================================================== */
/* where you are in the channel, upright down the right edge. It sits a little above the middle of the screen, so the
   Immerse scroller is a size container and the rail is placed from its height. The rail stays when the bars fade */
.nxhome.m-immerse { container-type: size; }
.nxchrail { position: absolute; right: 8px; top: 328px; top: calc(46cqh - 60px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.nxchrail i { width: 4px; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .42); box-shadow: 0 0 6px rgba(0, 0, 0, .35); overflow: hidden; transition: height .3s cubic-bezier(.2, .8, .2, 1); }
.nxchrail i.now { height: 32px; }
.nxchrail i.past { background: rgba(255, 255, 255, .7); }
.nxchrail i b { display: block; width: 100%; height: 0; border-radius: 3px; background: #fff; transition: height 1s linear; }
.nxchrail i.lv { background: rgba(0, 204, 199, .32); }
.nxchrail i.lv b { background: var(--t); transition: none; }
.nxchrail i.lv.now { box-shadow: 0 0 8px rgba(0, 204, 199, .8); }

/* the first time: a quiet cue beside the rail, nudging upwards, until the fan has swiped once */
.nxchcue { position: absolute; right: 22px; top: 312px; top: calc(46cqh - 76px); display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(20, 20, 22, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; animation: nxcuein .4s 1.6s ease-out forwards, nxcuenudge 1.6s 2s ease-in-out infinite; }
.nxchcue .nxi { width: 15px; height: 15px; }
@keyframes nxcuein { to { opacity: 1; } }
@keyframes nxcuenudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* the bars fade while a clip plays untouched; a touch brings them back (imCalm in next.js puts .imcalm on #app) */
.nx :is(.nxchtop .nxtop, .nxchbar, .nxnav, .nxdepth .chip, .nximc .pp) { transition: opacity .45s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
#app.imcalm .nx :is(.nxchtop .nxtop, .nxchbar, .nxnav, .nxdepth .chip, .nximc .pp) { opacity: 0; pointer-events: none; }
#app.imcalm .nxchrail { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .nxchcue { animation: nxcuein .2s 1s forwards; } }

/* ==========================================================================
   v76: the picker holds still, tables by sport, Live in the heading, and the picture stays on the chat
   ========================================================================== */
/* The picker's map holds still: each bubble keeps its place, and only its size changes when tapped (or when one
   arrives or leaves). The lift that keeps a bubble centred on its spot follows the size at the same pace, so it
   grows from its middle; the × rides the shoulder in step. Short, and without the old overshoot */
.nxconst .cb { transition: transform .22s cubic-bezier(.2, .8, .3, 1), left .22s cubic-bezier(.2, .8, .3, 1), top .22s cubic-bezier(.2, .8, .3, 1), opacity .2s ease-out; }
.nxconst .cb .nxbadge { transition: width .22s cubic-bezier(.2, .8, .3, 1), height .22s cubic-bezier(.2, .8, .3, 1); }
.nxconst .cbx { z-index: 4; transition: left .22s cubic-bezier(.2, .8, .3, 1), top .22s cubic-bezier(.2, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .nxconst .cb, .nxconst .cb .nxbadge, .nxconst .cbx { transition: none; animation: none; } }

/* Tables by sport: a row of sports, each with its icon, then that sport's competitions when it has more than one,
   a step smaller so the two rows read as sport, then competition */
.nxtsports button .emo { font-style: normal; font-size: 19px; line-height: 1; }
.nxchips.nxtcomps { margin-top: -4px; }
.nxchips.nxtcomps button { height: 36px; padding: 0 14px; font-size: 13.5px !important; font-weight: 700 !important; background: none; color: var(--mut); }
.nxchips.nxtcomps button.on { background: rgba(var(--fg), .1); border-color: rgba(var(--fg), .3); color: var(--ink); }

/* "Live now" on Scores is the switch for live only: tap to see just what is live, tap again for everything */
.nxsgroup h2 .nxlvh { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(var(--fg), .05); color: var(--soft); font-weight: 800; letter-spacing: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nxsgroup h2 .nxlvh .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px rgba(0, 204, 199, .25); }
.nxsgroup h2 .nxlvh span { color: var(--mut); font-weight: 700; letter-spacing: 0; }
.nxsgroup h2 .nxlvh.on { background: var(--t); border-color: var(--t); color: #00211F; }
.nxsgroup h2 .nxlvh.on .dot { background: #00211F; box-shadow: none; }
.nxsgroup h2 .nxlvh.on span { color: rgba(0, 33, 31, .7); }
.nxsgroup h2 .nxlvh .nxi { width: 16px; height: 16px; margin-right: -4px; }
.nxsgroup h2 .nxlvh:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }

/* Keep the picture: on the chat, with the picture on this phone, the player stays at the top, a little shorter,
   and the messages scroll underneath (.keep). The pin on the player (.nxkeep) stops the top tucking on every layer */
.nxlivescr.keep .nxplayer:not(.fs) { aspect-ratio: 16 / 7; transition: aspect-ratio .25s ease; }
.nxlivescr.keep .nxplayer:not(.fs) .ctl { gap: 18px; }
.nxlivescr.keep .nxplayer:not(.fs) .ctl button { width: 40px; height: 40px; }
.nxlivescr.keep .nxplayer:not(.fs) .ctl button.big { width: 52px; height: 52px; }
.nxlivescr.keep .nxplayer:not(.fs) .ctl span { width: 40px; }
.nxlivescr.keep .nxplayer:not(.fs) .bar { bottom: 9px; }
.nxlivescr.keep .nxmodes { margin-bottom: 8px; }
.nxkeep { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.nxkeep svg { display: block; }
.nxkeep.on { background: var(--t) !important; color: #00211F !important; }
.nxkeep:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.nxplayer > .nxkeep { position: absolute; z-index: 3; right: 52px; top: 10px; background: rgba(0, 0, 0, .55); color: #fff; }
.nxfollow:not(.d2) { position: relative; }
.nxfollow > .nxkeep { position: absolute; z-index: 2; right: 12px; top: 10px; background: rgba(var(--fg), .08); color: inherit; }
@media (prefers-reduced-motion: reduce) { .nxlivescr.keep .nxplayer:not(.fs) { transition: none; } }

/* (v76) the picker's tray in the light theme: its chips were drawn on a dark plate with dark words, and the chosen
   tab dark on dark. The Sports tab's tiles had the same plate */
body[data-theme="light"] .nxtray .chip, body[data-theme="light"] .nxtray .fcq-t, body[data-theme="light"] .nxtray .fcq-small button { background: #fff; border-color: rgba(20, 20, 24, .14); color: var(--ink); }
body[data-theme="light"] .nxtray .chip.none { background: none; }
body[data-theme="light"] .nxtray .fcq-t.on { background: rgba(255, 210, 48, .16); border-color: #E0A800; }
body[data-theme="light"] .nxtray .tabs button.on { background: var(--ink); color: #fff; }